:root{color-scheme:dark;--bg:#111619;--panel:#1b2327;--line:#334046;--text:#edf2ed;--muted:#a1afb1;--accent:#d9f577;--ink:#172016;--selected:#e4cf75;font:14px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);overflow:hidden}button,input,select{font:inherit}button,select{color:inherit;background:transparent;border:1px solid var(--line);border-radius:5px;cursor:pointer}button{min-height:36px;padding:6px 10px;display:inline-flex;gap:7px;align-items:center;justify-content:center;white-space:nowrap}button:hover,select:hover{background:#303c40}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{opacity:.3;cursor:default}button[aria-pressed=true]{background:var(--accent);color:var(--ink);border-color:var(--accent)}button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.iconbtn{width:37px;padding:6px}.accent{background:var(--accent);color:var(--ink);border-color:var(--accent)}.accent:hover{background:#e8ffad}.app{height:100svh;max-width:1800px;margin:auto;padding:0 max(14px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:10px}.top{height:67px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;gap:16px}.brand{display:flex;align-items:center;gap:10px}.brandmark{display:grid;grid-template-columns:repeat(3,5px);gap:3px;transform:rotate(-10deg)}.brandmark i{width:5px;height:5px;background:var(--accent)}.brandmark i:nth-child(2),.brandmark i:nth-child(6){opacity:.3}.brand h1{margin:0;font-size:23px;letter-spacing:2px;font-weight:850}.brand small{display:block;font-size:10px;letter-spacing:2px;color:var(--muted);margin-top:1px}.topactions{display:flex;gap:7px;align-items:center}.topactions select{max-width:170px;height:36px;padding:5px 9px}.desktoplabel{display:inline}.world{position:relative;flex:1;min-height:160px;background:#0b1115;border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center}.world::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 60px #0002}#canvas{display:block;image-rendering:pixelated;touch-action:none;cursor:none;outline:none}#overlay{position:absolute;pointer-events:none;image-rendering:pixelated}#pausedTag{position:absolute;top:13px;left:14px;display:none;background:#d9f577;color:#172016;padding:5px 9px;font-size:12px;letter-spacing:1px;border-radius:3px}#worldLabel{position:absolute;top:14px;right:14px;pointer-events:none;color:#80918f;font-size:11px;letter-spacing:1.5px}.worldHint{position:absolute;pointer-events:none;text-align:center;color:#98a9a8;top:38%;left:20px;right:20px;font:14px/1.8 ui-monospace,monospace}.worldHint strong{color:#edf2ed;font-size:22px}.readout{height:22px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:11px}.statusleft{display:flex;gap:17px;align-items:center;white-space:nowrap}.liveDot{width:6px;height:6px;display:inline-block;border-radius:50%;background:var(--accent);margin-right:6px}#hoverInfo{min-width:0;flex:1;text-align:right;color:#d2ded9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.controls{flex-shrink:0;display:flex;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:10px;flex-wrap:wrap}.controlgroup{display:flex;gap:5px;align-items:center}.divider{width:1px;height:26px;background:var(--line);margin:0 4px}.tools{display:flex;gap:5px;align-items:center;flex:1}.tool{padding:6px 8px;font-size:12px}.tool svg{width:17px;height:17px}.controlmeta{display:flex;gap:8px;align-items:center;margin-left:auto}.brushcontrol{min-width:0;display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px}.brushcontrol input{width:90px;accent-color:var(--accent)}#brushValue{color:var(--text);min-width:24px}.controlmeta select{height:34px;padding:3px 7px;font-size:12px}.palette{background:var(--panel);border:1px solid var(--line);border-radius:6px;flex-shrink:0;padding:0 10px 8px}.categories{display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);height:43px;align-items:stretch}.categories::-webkit-scrollbar{display:none}.category{border:0;border-radius:0;border-bottom:2px solid transparent;padding:7px 3px;min-height:40px;font-size:12px;color:var(--muted)}.category[aria-pressed=true]{background:transparent;border-bottom-color:var(--accent);color:var(--accent)}.category small{opacity:.6;font-size:10px}.materials{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:6px;padding:9px 0 8px}.material{justify-content:flex-start;gap:8px;min-height:43px;font-size:12px;border-color:#3b484c;background:#242e32;padding:7px 9px}.material[aria-pressed=true]{background:color-mix(in srgb,var(--mat) 16%,#182222);border-color:var(--mat);color:var(--text);box-shadow:inset 0 -2px var(--mat)}.swatch{width:15px;height:17px;flex-shrink:0;background:var(--mat);box-shadow:inset -4px -4px #0002,inset 3px 3px #fff2;clip-path:polygon(0 0,75% 0,75% 15%,100% 15%,100% 100%,15% 100%,15% 75%,0 75%)}.material span:last-child{white-space:normal;text-align:left}.materialnotes{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted);min-height:23px}.materialnotes strong{color:var(--selected);font-weight:600;white-space:nowrap}.materialnotes .note{flex:1}#colorPicker{height:24px;width:29px;padding:0;border:0;background:transparent;cursor:pointer}.bottom{display:flex;gap:10px;justify-content:space-between;align-items:center;color:#77898d;font-size:10px;letter-spacing:.3px;flex-shrink:0;min-height:15px}.bottom button{font-size:10px;border:0;padding:0;min-height:18px;color:var(--muted)}#toast{position:absolute;left:50%;bottom:20px;transform:translate(-50%,10px);max-width:90%;text-align:center;padding:9px 14px;border:1px solid #718478;border-radius:5px;background:#202e27;color:#ecf6df;font-size:12px;opacity:0;transition:opacity .15s,transform .15s;pointer-events:none;z-index:4}#toast.show{opacity:1;transform:translate(-50%,0)}dialog{color:var(--text);background:#1b2428;border:1px solid #506057;border-radius:10px;padding:24px;width:min(620px,calc(100% - 24px));max-height:85svh;box-shadow:0 20px 70px #0008}dialog::backdrop{background:#050a0bcc;backdrop-filter:blur(4px)}.dialoghead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}.dialoghead h2{font-size:20px;margin:0;letter-spacing:1px}.dialogbody{font-family:system-ui,sans-serif;font-size:15px;line-height:1.55}.dialogbody h3{font-family:ui-monospace,monospace;font-size:14px;color:var(--accent);margin:23px 0 8px}.dialogbody p{color:#bccac8;margin:8px 0}.recipes{display:grid;gap:8px}.recipe{display:block;text-align:left;padding:10px 12px;white-space:normal;font-family:inherit}.recipe b{display:block;color:var(--text);font-size:14px}.recipe span{color:#a6b8b5;font-size:13px}.keyboard{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:13px}.keyboard kbd{background:#364347;padding:2px 6px;border-radius:3px;color:#e4eddf}.files{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}#recipeDetails{display:grid;gap:7px}#recipeDetails p{margin:0;padding:7px 0;border-top:1px solid #344349;font-size:13px}.heatkey{display:none;position:absolute;left:14px;bottom:14px;color:#b2bdb9;font-size:10px}.heatkey i{display:inline-block;width:85px;height:7px;background:linear-gradient(90deg,#6c4fcf,#2689cf,#43bb92,#d7d967,#f49950,#ed523b);margin:0 6px}body.heatview .heatkey{display:block}@media(min-width:1400px){.app{padding-left:28px;padding-right:28px}.top{height:75px}.material{min-height:48px;font-size:13px}.category{font-size:13px}.tool{font-size:13px;padding:7px 10px}.brushcontrol input{width:120px}.bottom{min-height:21px}}@media(max-width:1320px){.tool span{display:none}.tool{width:35px;padding:6px}.controls{gap:6px}.tools{flex:0}.brushcontrol input{width:70px}.topactions .optional{display:none}.materialnotes .note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}@media(max-width:650px){.app{padding:0 8px max(7px,env(safe-area-inset-bottom));gap:6px}.top{height:59px;gap:7px}.brand{gap:7px}.brand h1{font-size:19px;letter-spacing:1px}.brand small{font-size:8px;letter-spacing:1.3px}.brandmark{grid-template-columns:repeat(3,4px);gap:2px}.brandmark i{width:4px;height:4px}.topactions{gap:4px}.topactions button{min-height:33px;width:32px;padding:5px}.topactions select{max-width:111px;font-size:11px;height:33px;padding:3px}.desktoplabel{display:none}.topactions .compactHide{display:none}.readout{font-size:10px;height:20px}.statusleft{gap:10px}.controls{padding-top:6px;gap:5px}.controlgroup{gap:4px}.controlgroup button{min-height:32px;width:32px;padding:5px}.divider{display:none}.tools{flex:1;justify-content:space-between;gap:2px}.tool{width:29px;padding:5px;min-height:32px;border-color:transparent}.tool svg{width:17px;height:17px}.controlmeta{width:100%;margin:0;gap:8px;justify-content:space-between}.brushcontrol{flex:1;gap:8px}.brushcontrol input{min-width:32px;width:65px;flex:1;max-width:130px;margin:0}.controlmeta select{height:29px;font-size:11px}.controlmeta button{min-height:29px;width:31px}.palette{padding:0 7px 6px}.categories{gap:14px;height:37px}.category{font-size:12px;min-height:35px;flex-shrink:0}.materials{grid-template-columns:repeat(auto-fit,minmax(75px,1fr));gap:5px;padding:7px 0}.material{padding:6px;min-height:38px;font-size:11px;gap:6px}.swatch{width:12px;height:14px}.materialnotes{gap:7px;font-size:10px;min-height:29px}.bottom{font-size:9px;gap:4px}.bottom .keyhints{display:none}.worldHint strong{font-size:18px}.worldHint{font-size:12px}.world{min-height:120px}.keyboard{grid-template-columns:1fr}#worldLabel{font-size:9px;right:10px;top:10px}}@media(max-height:600px) and (min-width:651px){.top{height:45px}.app{gap:5px}.brand small,.bottom{display:none}.palette{padding-bottom:5px}.categories{height:32px}.category{min-height:30px}.materials{padding:5px 0;gap:5px}.material{min-height:34px}.materialnotes{min-height:19px}.controls{padding-top:5px}.readout{height:18px}.world{min-height:120px}}
@media(max-width:350px){.brand small{display:none}.brand h1{font-size:17px}.brand{gap:6px}.topactions select{max-width:103px}.categories{gap:11px}.materials{grid-template-columns:repeat(4,minmax(0,1fr))}.material{font-size:10px;padding:5px;gap:4px}.controlmeta{gap:5px}.brushcontrol{gap:4px}.brushcontrol input{width:40px}.controlmeta select{padding:3px 4px}.materialnotes .note{max-height:26px;overflow:hidden}}@media(max-height:700px) and (max-width:650px){.top{height:48px}.brand small{display:none}.app{gap:5px}.bottom{display:none}.materialnotes .note{display:none}.materialnotes{min-height:26px}.materials{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.material{min-height:33px}.categories{height:32px}.category{min-height:31px}.readout{height:18px}.controls{padding-top:5px}.world{min-height:100px}}
@media(max-height:500px) and (min-width:651px){.app{display:grid;grid-template-columns:minmax(0,1fr) 250px;grid-template-rows:42px minmax(0,1fr) 20px 85px;gap:6px}.top{grid-column:1/-1;grid-row:1;height:42px}.world{grid-column:1;grid-row:2;min-height:0}.readout{grid-column:1;grid-row:3;height:20px}.palette{grid-column:2;grid-row:2/4;min-height:0;overflow-y:auto;padding:0 7px 5px}.materials{grid-template-columns:repeat(2,minmax(0,1fr))}.material{min-height:32px;padding:5px 7px}.materialnotes .note{display:none}.materialnotes .iconbtn{min-height:25px;height:25px}.categories{gap:12px;min-height:32px}.controls{grid-column:1/-1;grid-row:4;min-width:0;align-content:start;padding-top:5px}.bottom{display:none}}

/* The field guide is display-only; each pane scrolls without moving the world. */
#infoBtn{width:auto;min-height:29px;padding:3px 8px;margin-left:auto;color:var(--accent);font-size:11px}
#guide{width:min(990px,calc(100% - 28px));height:min(790px,calc(100svh - 32px));max-height:none;padding:22px;overflow:hidden}
#guide[open]{display:flex;flex-direction:column;gap:16px}
#guide [hidden]{display:none!important}
#guide .dialoghead{margin:0;flex-shrink:0}.guide-kicker{display:block;color:var(--muted);font-size:10px;letter-spacing:1.6px;margin-bottom:5px}
.guide-tabs{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding-bottom:12px;flex-shrink:0}.guide-tabs button{font-size:12px}.guide-tabs small{font-size:10px;opacity:.65}.guide-tabs>span{font-size:10px;color:var(--muted);margin-left:auto}
#generalGuide{overflow:auto;min-height:0;overscroll-behavior:contain;padding-right:6px}#generalGuide>p:first-child{margin-top:0}
#elementGuidePanel{display:flex;flex-direction:column;min-height:0;flex:1;gap:9px}.element-layout{display:grid;grid-template-columns:270px minmax(0,1fr);min-height:0;flex:1;gap:25px}
.element-browser{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);padding-right:18px}.element-filters{flex-shrink:0}.element-filters label{font-size:10px;color:var(--muted);letter-spacing:1px}.element-filters input,.element-filters select{display:block;width:100%;height:36px;margin-top:8px;padding:7px 9px;font-size:12px;min-width:0}.element-filters input{background:#121c20;color:var(--text);border:1px solid var(--line);border-radius:5px}.element-filters input::placeholder{color:#829593}#elementCount{font-size:10px;color:var(--muted);margin:9px 0}
.element-list{overflow:auto;min-height:0;padding-right:3px;overscroll-behavior:contain}.element-group{margin-bottom:16px}.element-group h4{margin:8px 0;font-size:10px;font-weight:500;letter-spacing:1.5px;color:#93a4a4;text-transform:uppercase}.element-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}.element-entry{justify-content:flex-start;font-size:11px;padding:7px;min-height:38px;text-align:left;white-space:normal;line-height:1.3;gap:7px}.element-entry .swatch{width:11px;height:13px}.element-entry[aria-pressed=true]{background:color-mix(in srgb,var(--mat) 16%,#182222);color:var(--text);border-color:var(--mat)}
.element-details{overflow:auto;min-width:0;padding-right:6px;overscroll-behavior:contain}.element-heading{display:flex;align-items:center;gap:12px;margin-bottom:16px}.element-heading>.swatch{width:32px;height:36px}.element-heading>div{min-width:0;flex:1}#elementMeta{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:0 0 3px}#elementTitle{font-size:27px;letter-spacing:-.5px;line-height:1.2;margin:0;outline:none}.element-heading button{font-size:11px;padding:6px 9px}#elementDescription{font:15px/1.6 system-ui,sans-serif;margin:0 0 12px;color:#d7e1dd}.motion-note{font:12px/1.6 system-ui,sans-serif;background:#253137;border-left:2px solid #718775;padding:10px 12px;margin:0 0 23px;color:#aec0ba}
#reactionHeading{font-size:11px;letter-spacing:1.2px;color:var(--accent);margin:0}.related-hint{font:12px/1.5 system-ui,sans-serif;color:var(--muted);margin:5px 0 14px}#recipeDetails{gap:10px}.reaction-card{border:1px solid #36464a;border-radius:5px;padding:13px;background:#1e2a2e}.reaction-card h5{font:600 13px/1.45 system-ui,sans-serif;color:#e4ebdf;margin:0 0 6px}.reaction-card .reaction-origin{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#91a9a0;margin-bottom:6px}#recipeDetails .reaction-card p{border:0;padding:0;margin:0;font:13px/1.6 system-ui,sans-serif;color:#b8c9c4}.reaction-links{display:flex;gap:5px;flex-wrap:wrap;margin-top:11px}.reaction-links button{min-height:27px;padding:3px 7px;font-size:10px;color:#d4dfd9;gap:5px}.reaction-links .swatch{width:8px;height:10px}.guide-footnote{font:11px/1.6 system-ui,sans-serif;color:#8fa29c;margin:18px 0 5px}.guide-browse-toggle{display:none}
@media(max-width:650px){#guide{width:calc(100% - 16px);height:calc(100svh - 16px);padding:14px}#guide[open]{gap:11px}#guide .dialoghead h2{font-size:18px}.guide-kicker{font-size:8px;letter-spacing:1px}.guide-tabs{gap:6px;padding-bottom:9px}.guide-tabs button{font-size:11px;min-height:33px;padding:6px 8px}.guide-tabs>span{display:none}.guide-browse-toggle{display:flex;min-height:31px;font-size:11px;justify-content:space-between;color:var(--accent)}.element-layout{grid-template-columns:1fr;grid-template-rows:205px minmax(0,1fr);gap:13px}.element-layout.catalog-collapsed{grid-template-rows:minmax(0,1fr)}.catalog-collapsed .element-browser{display:none}.element-browser{border-right:0;border-bottom:1px solid var(--line);padding:0 0 7px}.element-filters{display:grid;grid-template-columns:minmax(0,1fr) 125px;gap:6px}.element-filters label{display:none}.element-filters input,.element-filters select{margin:0;height:33px;font-size:11px;padding:6px}.element-filters #elementCount{grid-column:1/-1;margin:0 0 3px;font-size:9px}.element-group{margin-bottom:10px}.element-group h4{margin:5px 0}.element-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.element-entry{font-size:10px;min-height:33px;padding:5px;gap:4px}.element-entry .swatch{width:9px;height:11px}.element-details{padding-right:3px}.element-heading{gap:8px;margin-bottom:11px}.element-heading>.swatch{width:23px;height:27px}#elementTitle{font-size:22px}#elementMeta{font-size:9px;letter-spacing:.3px}.element-heading button{font-size:10px;min-height:32px;padding:5px 7px}.element-heading button svg{display:none}#elementDescription{font-size:14px}.motion-note{font-size:11px;margin-bottom:18px}.reaction-card{padding:11px}}
@media(max-width:650px) and (max-height:650px){.element-layout{grid-template-rows:155px minmax(0,1fr)}.element-layout.catalog-collapsed{grid-template-rows:minmax(0,1fr)}}

@media(min-width:651px) and (max-height:500px){#guide{padding:12px 16px;height:calc(100svh - 20px)}#guide[open]{gap:9px}.guide-kicker{display:none}#guide .dialoghead h2{font-size:18px}.guide-tabs{padding-bottom:7px}.guide-tabs button{min-height:31px}.element-layout{grid-template-columns:220px minmax(0,1fr);gap:17px}.element-browser{padding-right:12px}.element-filters label{display:none}.element-filters input,.element-filters select{height:29px;margin-top:0;margin-bottom:5px;padding:4px 6px}#elementCount{margin:5px 0}.element-heading{margin-bottom:10px}#elementTitle{font-size:23px}#elementDescription{font-size:14px}.motion-note{margin-bottom:15px}}

/* Navigation sits beside the wordmark in the existing brand row. */
.hub-back{display:inline-flex;align-items:center;min-height:28px;padding:2px 9px;border:1px solid var(--line);border-radius:5px;color:var(--muted);font-family:inherit;font-size:11px;font-weight:700;line-height:1;text-decoration:none;white-space:nowrap;touch-action:manipulation;pointer-events:auto}
.hub-back:hover{background:#303c40;color:var(--text)}.hub-back:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:650px){.hub-back{font-size:9px;padding:2px 6px;min-height:24px}}
@media(max-width:350px){.hub-back{padding:2px 5px}}

/* Shared site utility; never position it over the playfield. */
[data-feedback-mount]{display:inline-flex;flex:none;pointer-events:auto}

  /* .top's fixed heights all assumed one row; the feedback trigger can force a second
     row on narrow/short viewports, so every breakpoint must grow instead of clip
     against the .world section painted right after it. */
  .top{height:auto;min-height:67px;flex-wrap:wrap;row-gap:6px}
  @media(min-width:1400px){.top{min-height:75px}}
  @media(max-width:650px){.top{height:auto;min-height:59px}}
  @media(max-height:600px) and (min-width:651px){.top{height:auto;min-height:45px}}
  @media(max-height:500px) and (min-width:651px){.app{grid-template-rows:minmax(42px,auto) minmax(0,1fr) 20px 85px}.top{height:auto;min-height:42px}}
  .topactions{flex-wrap:wrap;row-gap:6px}