:root{font-family:system-ui,sans-serif;color:#233b32;background:#f5f4ed}*{box-sizing:border-box}body{margin:0}header{height:88px;display:flex;align-items:center;gap:16px;padding:16px 28px;border-bottom:1px solid #ccd5ca}h1{font-size:23px;margin:0}header p{margin:4px 0;font-size:13px;color:#68776b}.mark{background:#2d6553;color:white;font-size:28px;border-radius:14px;padding:8px 16px}#status{margin-left:auto;font-size:13px;max-width:40%}main{display:flex;height:calc(100vh - 88px)}aside{width:250px;flex-shrink:0;padding:22px;overflow:auto}h2{font-size:16px;margin:0 0 20px}label{display:block;font-size:13px;margin:12px 0}select,button{font:inherit;border:1px solid #bccabc;background:#fffef8;color:#234536;border-radius:7px;padding:9px}select{display:block;width:100%;margin-top:7px}aside button{display:block;width:100%;margin:8px 0;cursor:pointer}#load{background:#2d6553;color:white}hr{border:0;border-top:1px solid #ccd5ca;margin:24px 0}.help{font-size:12px;line-height:1.8;color:#67776d}#progress{font-weight:600;font-size:14px}#details{font-size:12px}.work{flex:1;min-width:0;display:flex;flex-direction:column;padding:18px;gap:14px}canvas{width:100%;flex:1;min-height:100px;min-width:0;touch-action:none;border-radius:10px;background:#dfe6e2}#palette{height:100px;overflow:auto;display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px}#palette button{min-width:40px;cursor:pointer}button:hover{background:#e1ebdf}:focus-visible{outline:3px solid #d68e3c;outline-offset:2px}@media(max-width:700px){aside{width:180px;padding:12px}header{padding:10px}#status{font-size:11px}.work{padding:8px}}

:root{color-scheme:dark;--bg:#191d1f;--panel:#242a2d;--panel-raised:#2c3336;--text:#edf0eb;--muted:#adb9b8;--line:#3d484b;--accent:#fa875e;--accent-ink:#271b17;--teal:#64c9b6;--teal-bg:#213e3b;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,sans-serif}
:root[data-theme=light]{color-scheme:light;--bg:#f2f2eb;--panel:#fafaf4;--panel-raised:#e4e9e3;--text:#20352f;--muted:#50655d;--line:#b9c9bd;--accent:#ab421f;--accent-ink:#fff;--teal:#176958;--teal-bg:#d6e8df}
body{background:var(--bg);color:var(--text)}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid var(--line);background:var(--panel-raised);color:var(--text);border-radius:8px;padding:10px 14px;line-height:1.4;font-size:13px;transition:background .15s,border-color .15s}button:hover{background:var(--teal-bg);border-color:var(--teal)}button:disabled{opacity:.45;cursor:default}button[aria-pressed=true]{border-color:var(--teal);background:var(--teal-bg);outline:1px solid var(--teal)}button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}button.primary:hover{filter:brightness(1.1)}button.secondary{width:100%;background:transparent}a{color:var(--teal)}input,select{font:inherit;border:1px solid var(--line);border-radius:7px;padding:11px 12px;background:var(--bg);color:var(--text);width:100%;margin-top:8px}input[type=file]{font-size:12px;padding:8px}label{font-size:13px;color:var(--muted);line-height:1.6;margin:14px 0}h2,h3{color:var(--text)}p{line-height:1.6}small,.help{color:var(--muted);font-size:12px;line-height:1.7}small{display:block;margin-top:5px}details{font-size:13px}summary{cursor:pointer;font-weight:600;line-height:1.6;padding:8px 0;color:var(--text)}:focus-visible{outline:3px solid var(--accent);outline-offset:4px}progress{accent-color:var(--teal);width:100%;height:7px;border:0;border-radius:6px;overflow:hidden}progress::-webkit-progress-bar{background:var(--line)}progress::-webkit-progress-value{background:var(--teal)}.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-size:10px;font-weight:700;color:var(--teal)}.loading{padding:60px;text-align:center;color:var(--muted)}.notice{padding:14px 24px;background:var(--teal-bg);border:1px solid var(--line);border-radius:10px;margin:12px 0}.notice p{margin:6px 0;font-size:13px}.notice.error,.form-error{color:#ffb5a1;background:#3e2926}.form-error{padding:12px;border-radius:7px;font-size:13px}:root[data-theme=light] .notice.error{color:#84260c;background:#ffe0d7}
.auth-page{height:auto;min-height:100vh;max-width:1200px;margin:auto;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;padding:64px;gap:90px}.auth-story{position:relative}.auth-story h1{font:900 clamp(40px,6vw,72px)/1.08 Consolas,monospace;letter-spacing:-.06em;color:var(--accent);margin:24px 0;text-shadow:3px 4px 0 #492b24}.auth-story h1 span{color:var(--text)}.auth-story>p{font-size:24px;color:var(--muted);font-weight:300}.auth-story p.auth-caption{font-size:12px;margin-top:30px}.pixel-art{display:grid;grid-template-columns:repeat(7,15px);gap:5px;transform:rotate(-8deg);margin:36px 0}.pixel-art i{width:15px;height:15px;background:var(--panel)}.pixel-art .lit{background:var(--teal);opacity:.7}.auth-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:40px;box-shadow:0 24px 60px #0002}.auth-card h2{font-size:26px;line-height:1.3;margin:18px 0 12px;letter-spacing:-.035em}.auth-card>p{font-size:14px;color:var(--muted);margin-bottom:26px}.auth-card .primary{width:100%;margin-top:14px;padding:13px}.auth-card .text-button{display:block;margin:16px auto 0;background:transparent;border:0;color:var(--teal)}
.topbar{height:78px;padding:0 5%;border-bottom:1px solid var(--line);justify-content:space-between;background:var(--bg)}.wordmark{color:var(--accent);font:900 25px Consolas,monospace;text-decoration:none;letter-spacing:-.1em;display:flex;align-items:center}.wordmark>span:first-child{color:var(--teal)}.wordmark .wordmark-name{font:600 13px Segoe UI,sans-serif;letter-spacing:0;color:var(--text);margin-left:14px}.account-tools{display:flex;align-items:center;gap:16px}.username{font-size:12px;color:var(--muted)}.theme-button{font-size:18px;width:40px;height:40px;padding:0}.library-home{display:block;height:auto;max-width:1440px;padding:32px 5% 0;margin:auto}.home-hero{background:var(--panel);border:1px solid var(--line);border-radius:18px;min-height:205px;padding:34px 42px;display:flex;justify-content:space-between;align-items:center;position:relative;overflow:hidden}.home-hero h1{font:900 clamp(28px,4.3vw,60px)/1.2 Consolas,monospace;letter-spacing:-.06em;color:var(--accent);margin:10px 0;text-shadow:2px 3px 0 #492b24}.home-hero h1 span{color:var(--text)}.home-hero p{font-size:13px;color:var(--muted);margin:10px 0 0}.hero-pixels{display:grid;grid-template-columns:repeat(3,28px);gap:8px;transform:rotate(-12deg);margin-right:30px}.hero-pixels i{width:28px;height:28px;background:var(--line);border-radius:3px}.hero-pixels i:nth-child(3n){background:var(--teal)}.hero-pixels i:nth-child(5){background:var(--accent)}.library-top{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:38px 0 22px}.library-top h2{font-size:25px;margin:8px 0 0;letter-spacing:-.04em}.scope-tabs{display:flex;gap:4px;padding:5px;background:var(--panel);border:1px solid var(--line);border-radius:11px}.scope-tabs button{border-color:transparent;background:transparent;font-size:12px}.scope-tabs button[aria-pressed=true]{background:var(--teal-bg);color:var(--teal);outline:none}.library-tabs{display:flex;overflow-x:auto;gap:10px;padding:3px 3px 12px}.library-tabs button{display:flex;align-items:center;gap:15px;white-space:nowrap;background:var(--panel);padding:12px 17px}.library-tabs button[aria-pressed=true]{background:var(--teal-bg)}.tab-badge{color:var(--muted);font-size:10px}.library-actions{display:flex;gap:20px;align-items:start;margin:6px 0 24px;border-bottom:1px solid var(--line);padding:0 0 12px;flex-wrap:wrap}.library-actions>details{flex:0 1 270px}.library-actions>details:not([open]){flex:0 1 auto}.library-actions>button{margin-left:auto;background:transparent;font-size:11px;padding:7px 10px}.library-actions details[open]{padding:0 16px 16px;background:var(--panel);border-radius:9px;border:1px solid var(--line)}.library-actions details[open]>summary{padding-top:10px}.library-actions details[open]>button{margin-top:6px}.library-actions .sharing-library{border-top:1px solid var(--line);margin-top:14px}
.gallery-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:start}.gallery-layout.has-detail{grid-template-columns:minmax(0,1fr) 330px}.gallery-heading{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px;margin:4px 0 18px}.gallery-heading h3{font-size:14px;font-weight:500;margin:0}.catalog.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px;max-height:none;overflow:visible}.image-tile{padding:0 0 15px;text-align:left;overflow:hidden;background:var(--panel);border-radius:12px;min-width:0}.image-tile[aria-pressed=true]{background:var(--panel)}.tile-image{height:170px;position:relative;background:#202628;margin:0 0 15px;display:grid;place-items:center;border-bottom:1px solid var(--line)}.tile-image img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;filter:grayscale(1);image-rendering:pixelated;padding:12px;transition:filter .25s}.image-tile:hover img{filter:grayscale(.65)}.image-tile>strong,.image-tile>small,.tile-progress{margin-left:15px;margin-right:15px}.image-tile>strong{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.image-tile>small{font-size:10px}.visibility-badge{position:absolute;right:8px;top:8px;background:#171c1ee8;border:1px solid #475451;color:#d4e1dd;border-radius:4px;padding:3px 7px;font-size:9px}.tile-progress{display:flex;align-items:center;gap:10px;margin-top:14px;color:var(--muted);font-size:10px}.tile-progress span{min-width:28px;text-align:right}.tile-progress progress{height:4px}.pages{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:11px;color:var(--muted);margin:24px 0}.pages button{font-size:11px;padding:7px 12px}.empty-library{background:var(--panel);border:1px dashed var(--line);border-radius:15px;padding:50px 30px;text-align:center}.empty-library>span{font-size:40px;color:var(--teal)}.empty-library h3{font-size:20px;margin:12px}.empty-library p{font-size:13px;color:var(--muted);max-width:390px;margin:12px auto 25px}.image-detail{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--teal);border-radius:14px;padding:22px;position:sticky;top:16px;min-width:0}.detail-heading{display:flex;justify-content:space-between;align-items:center}.close-detail{font-size:20px;border:0;background:transparent;padding:0 5px;line-height:1}.image-detail h3{font-size:21px;margin:14px 0 22px;line-height:1.4;overflow-wrap:anywhere}.grayscale-preview{display:block;width:100%;height:245px;object-fit:contain;filter:grayscale(1);image-rendering:pixelated;background:#191f21;border:1px solid var(--line);border-radius:8px;padding:8px}.image-stats{display:grid;grid-template-columns:1.3fr 1fr .8fr;gap:8px;margin:22px 0}.image-stats strong{display:block;font-size:14px;white-space:nowrap}.image-stats span{display:block;font-size:10px;color:var(--muted);margin-top:6px}.preview-palette{display:flex;flex-wrap:wrap;gap:4px;margin:10px 0 24px;max-height:135px;overflow:auto}.preview-palette>span{width:22px;height:22px;border-radius:3px;border:1px solid #ffffff25}.play-button{width:100%;padding:13px;margin-bottom:10px}.detail-management{border-top:1px solid var(--line);margin-top:22px;padding-top:12px}.detail-management button{width:100%;font-size:12px}.visibility-status{font-size:12px;color:var(--teal)}footer{border-top:1px solid var(--line);margin-top:30px;padding:24px 0;display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted)}
.play-header{height:auto;min-height:80px;background:var(--panel);border-color:var(--line);gap:20px}.play-header h1{font-size:19px}.play-header p{color:var(--muted);font-size:12px}.play-header #save-state{margin-left:auto;font-size:12px;color:var(--muted);max-width:35%}#save-state[data-state=saved]{color:var(--teal)}#save-state[data-state=conflict],#save-state[data-state=error]{color:var(--accent)}.game-layout{height:calc(100dvh - 81px);min-height:500px}.play-screen:has(.notice) .game-layout{height:calc(100dvh - 230px)}.game-layout aside{width:240px;background:var(--panel);border-right:1px solid var(--line);padding:22px}.game-layout aside button{width:100%;display:block;margin:8px 0}.game-layout aside h2{font-size:15px}.game-layout aside .help{font-size:11px}.game-layout .work{padding:16px;gap:12px;min-height:0}.canvas-wrap{flex:1;min-height:100px;position:relative;display:flex}.canvas-wrap canvas{height:100%;position:absolute;inset:0;background:var(--bg)}.canvas-wrap.busy{pointer-events:none;opacity:.6}.palette-pages{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted)}.palette-pages button{font-size:11px;padding:6px}#palette{height:100px;flex-shrink:0}#palette button{padding:7px;min-width:42px}#palette small{font-size:10px;color:var(--muted)}.copies{border-top:1px solid var(--line);padding-top:14px}.copies button{font-size:11px}.final-preview{width:min(1000px,calc(100vw - 32px));max-height:92vh;overflow:auto;border:1px solid var(--line);border-radius:15px;background:var(--panel);color:var(--text);padding:22px}.final-preview::backdrop{background:#080d10cc}.final-preview header{height:auto;padding:0 0 14px;justify-content:space-between;gap:20px;border-color:var(--line)}.final-preview h2{margin:0;font-size:18px}.final-preview img{display:block;width:100%;max-height:65vh;object-fit:contain;margin-top:12px}.preview-options{display:flex;gap:8px;margin-top:12px}
@media(min-width:1500px){.gallery-layout.has-detail{grid-template-columns:minmax(0,1fr) 360px}.catalog.gallery{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}}
@media(max-width:1000px){.auth-page{padding:40px;gap:40px}.gallery-layout.has-detail{grid-template-columns:minmax(0,1fr) 300px}.home-hero{padding:28px}.library-top{align-items:start;flex-direction:column;gap:18px}.hero-pixels{margin:0}.catalog.gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.image-stats strong{font-size:12px}}
@media(max-width:700px){.auth-page{grid-template-columns:1fr;padding:30px 22px;gap:25px;max-width:470px}.auth-story h1{font-size:38px;margin:12px 0}.auth-story>p,.pixel-art,.auth-caption{display:none}.auth-card{padding:26px}.topbar{height:66px;padding:0 20px}.wordmark .wordmark-name{display:none}.account-tools{gap:10px}.library-home{padding:20px 18px 0}.home-hero{min-height:160px;padding:22px}.home-hero .eyebrow{font-size:9px}.home-hero h1{font-size:30px}.home-hero p{font-size:11px}.hero-pixels{grid-template-columns:repeat(3,12px);gap:4px}.hero-pixels i{width:12px;height:12px}.gallery-layout.has-detail{grid-template-columns:1fr}.image-detail{position:static;grid-row:1}.grayscale-preview{height:220px}.gallery .tile-image{height:150px}.catalog.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.library-top{margin:26px 0 18px}.library-top h2{font-size:23px}.scope-tabs{width:100%}.scope-tabs button{flex:1;font-size:11px}.library-actions{gap:10px;font-size:11px}.library-actions>details{flex:1 1 100%}.library-actions>details:not([open]){flex:1 1 auto}.library-actions>button{margin-left:0}footer{display:block;line-height:1.8}footer span{display:block}.play-header{padding:10px;gap:10px;flex-wrap:wrap}.play-header h1{font-size:14px}.play-header #save-state{font-size:10px;max-width:100%;margin:0}.play-header p{font-size:10px}.game-layout aside{width:170px;padding:12px}.game-layout .work{padding:7px;gap:6px}.palette-pages{font-size:9px}.palette-pages button{padding:5px;font-size:9px}.game-layout{height:calc(100dvh - 110px)}#palette{height:110px}.final-preview{padding:14px}.image-tile>strong,.image-tile>small,.tile-progress{margin-left:10px;margin-right:10px}}

.image-tile.completed .tile-image img{filter:none}.image-tile.completed:hover img{filter:none}.completed-badge{display:block;color:var(--teal);font-size:11px;margin:8px 15px 0}.danger{color:#ffb4a6;border-color:#96594e;background:#402c29}button.danger:hover{background:#65372f;border-color:#ff8f79}:root[data-theme=light] .danger{color:#8a2414;background:#ffe9e3}.delete-image{max-width:480px;width:calc(100vw - 32px);border:1px solid var(--line);border-radius:14px;padding:26px;background:var(--panel);color:var(--text)}.delete-image::backdrop{background:#080d10cc}.delete-image h2{margin:0 0 18px;font-size:21px}.delete-image p{font-size:14px}.dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}.folder-report{margin-top:18px;border-top:1px solid var(--line);padding-top:10px}.folder-report ul{padding-left:20px;max-height:180px;overflow:auto;overflow-wrap:anywhere;font-size:12px}.folder-progress p{font-size:12px;overflow-wrap:anywhere}.game-layout .navigator-panel{width:240px;padding:20px 16px;border-right:0;border-left:1px solid var(--line)}.navigator-panel h2{margin-bottom:10px}.navigator-panel .help{font-size:11px}.navigator-image{position:relative;width:100%;margin:18px 0;background:var(--bg)}.navigator-image canvas{display:block;position:static;width:100%;height:auto;min-height:0;flex:none;border-radius:0;cursor:crosshair;touch-action:manipulation}.navigator-image svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.navigator-image [aria-disabled=true]{cursor:wait;opacity:.6}
@media(max-width:1050px) and (min-width:701px){.game-layout .navigator-panel{width:180px;padding:14px 10px}.game-layout>aside:first-of-type{width:200px}}@media(max-width:700px){.game-layout{display:grid;grid-template-columns:150px minmax(0,1fr);grid-template-rows:minmax(280px,1fr) auto;min-height:600px}.game-layout>aside:first-of-type{width:150px;grid-column:1;grid-row:1 / 3}.game-layout>.work{grid-column:2;grid-row:1}.game-layout .navigator-panel{width:auto;grid-column:2;grid-row:2;padding:12px;border-top:1px solid var(--line);border-left:0;max-height:220px;overflow:auto}.navigator-panel .navigator-image{max-width:140px;margin:8px auto}.navigator-panel h2{font-size:12px}.navigator-panel .help{font-size:10px;margin:4px 0}.dialog-actions{flex-direction:column}.completed-badge{margin-left:10px}}