:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#24324a;background:#f5efdf;font-synthesis:none;--ink:#39312c;--accent:#276c5c;--line:#d9cab3}
*{box-sizing:border-box}body{margin:0}[hidden]{display:none!important}button,input,select,textarea{font:inherit}button,.button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #c9d5e7;border-radius:8px;padding:8px 12px;background:white;color:var(--ink);cursor:pointer;text-decoration:none;font-weight:600;font-size:14px}button:hover,.button:hover{background:#eef5ff;border-color:#7f9fc5}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--accent);color:white;border-color:var(--accent)}button.danger{color:#a43148}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #efad38;outline-offset:2px}input,select{max-width:100%;border:1px solid #c9d5e7;border-radius:6px;padding:7px;background:white;color:var(--ink)}label{display:flex;gap:6px;align-items:center;font-size:13px}label input[type=checkbox]{width:auto}input[type=number]{width:72px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;background:var(--ink);color:white}.brand{display:flex;gap:12px;align-items:center;color:white;text-decoration:none}.brand b{background:#66d9c0;color:var(--ink);border-radius:9px;font-size:24px;padding:7px 12px}.brand span{font-size:16px;font-weight:750}.brand small{display:block;color:#b5c8df;font-weight:400;font-size:12px;margin-top:2px}.topbar nav{display:flex;align-items:center;gap:12px}.topbar nav>a{color:#dbe9ff;font-size:14px}.topbar button{background:#4b433b;color:white;border-color:#4a5d79}#status{min-height:32px;padding:7px 28px;font-size:13px;color:#415978;background:#eae0cc}main{max-width:1600px;margin:auto;padding:0 24px 30px}.welcome{padding:32px 0 20px;max-width:720px}.eyebrow{text-transform:uppercase;letter-spacing:.14em;color:#326c79;font-size:12px;font-weight:750}h1{font-size:clamp(30px,4vw,48px);letter-spacing:-.04em;line-height:1.08;color:var(--ink);margin:12px 0}h2{font-size:19px;color:var(--ink)}p{line-height:1.5}.template-grid,.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.template-card,.project-card{border:1px solid var(--line);border-radius:14px;background:white;padding:22px;text-align:left;display:block;box-shadow:0 4px 10px #39312c05}.template-card strong{display:block;font-size:19px;margin:12px 0 8px}.template-card span{font-size:13px;font-weight:400;color:#526582}.template-card .symbol{font-size:32px;color:#326c79}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 12px}.project-card h3{margin:0 0 8px}.project-card p{font-size:12px;color:#66778d}.project-card button{margin-right:6px}.project-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:16px 0}.title-field{display:block;color:#65758b;font-size:11px}.title-field input{display:block;font-size:18px;font-weight:700;width:220px}#save-status{font-size:12px;color:#526582;margin-right:auto}.editor-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);padding-bottom:10px}.editor-tabs button{padding:10px 22px}.editor-tabs button[aria-selected=true]{background:var(--ink);color:white;border-color:var(--ink)}.editor-layout{display:grid;grid-template-columns:225px minmax(0,1fr);gap:18px;margin-top:16px}#asset-sidebar{background:white;border:1px solid var(--line);border-radius:12px;padding:14px;align-self:start}#asset-sidebar .section-title{margin:0 0 12px}#asset-list{display:grid;gap:6px;max-height:340px;overflow:auto}.asset-row{justify-content:flex-start;text-align:left;width:100%;overflow-wrap:anywhere}.asset-row.selected{background:#e0edff;border-color:#276c5c}.asset-row canvas{image-rendering:pixelated;width:32px;height:32px;flex-shrink:0}.asset-details{border-top:1px solid var(--line);margin-top:18px;padding-top:12px}.asset-details label{display:block;margin:8px 0}.asset-details input{display:block;width:100%;margin-top:4px}.asset-details button{margin:3px}.working-area{min-width:0;background:white;border:1px solid var(--line);border-radius:12px;padding:18px}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}.toolbar label{white-space:nowrap}.toolbar input[type=color]{width:38px;padding:3px;height:34px}.palette{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}.palette button{width:28px;height:28px;padding:0;border:2px solid #adb8c8}.palette button.active{outline:3px solid #276c5c;outline-offset:1px}.canvas-scroll{max-width:100%;max-height:60vh;overflow:auto;border:1px solid var(--line);border-radius:8px;background:#dce3ed;overscroll-behavior:contain}.canvas-scroll canvas{display:block;touch-action:none;image-rendering:pixelated}.preview-row{display:flex;align-items:center;gap:18px;margin:14px 0;font-size:13px}.preview-row canvas{image-rendering:pixelated;background:repeating-conic-gradient(#d9cab3 0% 25%,#fff 0% 50%) 0/8px 8px}.hint{font-size:12px;color:#607087;line-height:1.5}.map-scroll{background:#282625}#map-coordinates{font:12px monospace;color:#607087}details{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}summary{cursor:pointer;font-weight:650;font-size:14px}.marker-row{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:13px;border-bottom:1px solid var(--line);padding:8px}.sound-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin:24px 0}.sound-controls label{display:flex;flex-direction:column;align-items:stretch;gap:8px}.sound-controls output{font-size:12px;color:#607087}.sound-controls input{width:100%}.preset-row{display:flex;gap:8px;flex-wrap:wrap}#sound-wave{width:100%;height:140px;border-radius:12px;background:#39312c;margin-bottom:20px}.code-split{display:grid;grid-template-columns:minmax(280px,1fr) minmax(240px,1fr);gap:18px}#code{width:100%;height:470px;font:16px/1.6 ui-monospace,Consolas,monospace;tab-size:2;white-space:pre;overflow:auto;padding:16px;background:#252526;color:#eef5ff;border:1px solid #454545;border-radius:8px;resize:vertical;margin-top:8px}#game-frame{width:100%;height:380px;border:1px solid var(--line);background:#282625;border-radius:8px}#diagnostic{white-space:pre-wrap;font:13px/1.5 monospace;color:#a43148;max-height:140px;overflow:auto}#asset-reference{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}#asset-reference code{font-size:12px;background:#f5efdf;padding:5px 8px;border-radius:5px}dialog{width:min(480px,90vw);padding:28px;border:0;border-radius:16px;box-shadow:0 20px 80px #28262555}dialog::backdrop{background:#101f37aa}dialog label{display:block;margin:16px 0}dialog input,dialog select{display:block;width:100%;margin-top:8px}#access-error{color:#a43148}#editor.code-tab .editor-layout{grid-template-columns:1fr}#editor.code-tab #asset-sidebar{display:none}@media(max-width:950px){main{padding:0 12px 20px}.topbar{padding:12px;gap:12px}.topbar nav{gap:6px;flex-wrap:wrap}.editor-layout{grid-template-columns:180px minmax(0,1fr)}.working-area{padding:12px}.code-split{grid-template-columns:1fr}.editor-tabs button{padding:9px 12px}}@media(max-width:620px){.editor-layout{grid-template-columns:1fr}#asset-list{grid-template-columns:repeat(2,1fr);max-height:160px}.asset-details{display:none}.topbar .brand small{display:none}.project-bar{gap:5px}.preview-row{flex-wrap:wrap}}

.code-with-lines{display:flex;margin-top:8px;background:#252526;border-radius:8px;overflow:hidden}.code-with-lines #code{margin:0;border-radius:0;border:0;flex:1;min-width:0}.code-with-lines #code-lines{margin:0;padding:16px 8px;font:16px/1.6 ui-monospace,Consolas,monospace;color:#8195b3;text-align:right;max-height:470px;overflow:hidden;min-width:40px;border-right:1px solid #454545;user-select:none}

/*
 * Workshop viewport contract: chrome reserves its own rows, while the active
 * editor and each of its panels own their scrolling instead of growing under
 * the viewport.
 */
html{min-height:100%;min-height:100dvh}
body{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.topbar,#status{flex:0 0 auto}
main{display:flex;flex:1 1 auto;min-height:0;min-width:0;width:100%;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
main>#gate,main>#project-browser{width:100%}
#editor:not([hidden]){display:flex;flex:1 1 auto;min-height:0;min-width:0;flex-direction:column;overflow:hidden;width:100%}
.project-bar,.editor-tabs{flex:0 0 auto}
.editor-layout{flex:1 1 auto;min-height:0;min-width:0;overflow:hidden}
#asset-sidebar{min-height:0;max-height:100%;align-self:stretch;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.working-area{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.working-area>[role=tabpanel]:not([hidden]){min-height:0}
.canvas-scroll{max-height:min(60dvh,100%)}
#editor.code-tab .working-area{display:flex;min-height:0;flex-direction:column}
#panel-code:not([hidden]){display:flex;min-height:0;flex:1 1 auto;flex-direction:column}
#panel-code>.toolbar,#panel-code>details{flex:0 0 auto}
.code-split{flex:1 1 auto;min-height:0}
.code-split>div{min-width:0;min-height:0}
.code-with-lines{height:clamp(260px,48dvh,470px)}
#code,.code-with-lines #code{height:100%;min-height:0;resize:none}
.code-with-lines #code-lines{max-height:none}
dialog{max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}

@media(max-width:950px){
  body{height:auto;min-height:100dvh;overflow:auto}
  main{display:block;overflow:visible}
  #editor:not([hidden]){display:block;overflow:visible}
  .editor-layout{overflow:visible}
  #asset-sidebar{max-height:none;overflow:visible}
}