:root{color:#2f3647;background:#f1f3f8;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans TC,PingFang TC,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--focus: #ffbb4a}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden}button{border:0;color:inherit;font:inherit;touch-action:manipulation}.app-shell{--panel: rgba(255, 255, 255, .92);--panel-strong: #ffffff;--panel-shadow: 0 14px 30px rgba(70, 72, 80, .1);--line: rgba(70, 72, 84, .14);--ink: #2c2d33;--muted: #6a6b76;--slot-tint: #ededf0;--slot-tint-strong: #f7f7f8;--board-gap: #dcdcdf;--candy-tint: #f0f0f2;--app-bg: linear-gradient(170deg, #faf9f6 0%, #f3f2ef 100%);min-height:100vh;padding:max(16px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background:var(--app-bg)}.app-shell.theme-contrast{--panel: rgba(255, 255, 255, .96);--panel-strong: #ffffff;--panel-shadow: 0 14px 30px rgba(36, 44, 62, .18);--line: rgba(54, 64, 86, .26);--ink: #1f2636;--muted: #515a6c;--slot-tint: #eef0f3;--slot-tint-strong: #f8f9fb;--board-gap: #a9afbc;--candy-tint: #eef0f4;--app-bg: linear-gradient(160deg, #eceef4 0%, #e2e6ee 100%)}.topbar{display:flex;align-items:center;justify-content:space-between;max-width:1500px;margin:0 auto 14px}.eyebrow,.panel-label{margin:0;color:var(--muted);font-size:.76rem;font-weight:700;letter-spacing:0;text-transform:uppercase}h1,h2{margin:0;letter-spacing:0}h1{font-size:clamp(1.55rem,4.8vw,2.8rem)}h2{font-size:clamp(1rem,3.2vw,1.5rem)}.archive-pill,.progress-cluster{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;color:var(--ink);background:#ffffffa3;padding:9px 12px;font-weight:800}.workspace{display:grid;grid-template-columns:minmax(220px,280px) minmax(320px,1fr) minmax(240px,320px);gap:14px;max-width:1500px;margin:0 auto;align-items:start}.side-panel,.atelier-stage{border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:var(--panel-shadow)}.side-panel{display:grid;gap:14px;padding:14px}.atelier-stage{min-width:0;padding:14px}.chart-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.progress-cluster{flex-wrap:wrap;justify-content:flex-end;border-radius:8px;font-size:.85rem}.panel-block{display:grid;gap:10px}.choice-grid{display:grid;gap:8px}.choice,.action-row button,.full-button{width:100%;min-height:44px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:#ffffff94;padding:10px;text-align:left;cursor:pointer}.choice{display:grid;gap:4px}.choice span,.selection-strip strong,.archive-level span{overflow-wrap:anywhere}.choice small{color:var(--muted);line-height:1.35}.choice.active,.action-row button:active,.full-button:active{border-color:#ffad42c7;background:#ffd58b6b}.choice:disabled{cursor:not-allowed;opacity:.58}.board-wrap{width:min(100%,calc((100vh - 160px) * (var(--board-aspect))));max-width:min(100%,calc(100vh - 160px));min-width:280px;margin:0 auto}.board-grid{display:grid;grid-template-columns:repeat(var(--board-cols),1fr);grid-template-rows:repeat(var(--board-rows),1fr);gap:2px;padding:7px;width:100%;aspect-ratio:var(--board-cols) / var(--board-rows);border:1px solid rgba(130,136,145,.28);border-radius:8px;overflow:hidden;background:var(--board-gap);box-shadow:inset 0 0 0 2px #ffffffb8,0 8px 22px #6c717a29;touch-action:manipulation}.board-hole{background:transparent}.board-cell{position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:0;border:0;border-radius:4px;background:color-mix(in srgb,var(--target-color) 82%,var(--slot-tint));cursor:pointer;transition:transform .16s ease,background-color .16s ease}.board-cell.empty{background:color-mix(in srgb,var(--target-color) 92%,var(--slot-tint-strong));box-shadow:inset 0 1px #ffffff52,inset 0 -1px #87532e14}.particle{display:block;width:78%;height:auto;aspect-ratio:1 / 1;background:var(--particle-color);border-radius:6px;box-shadow:inset 0 1px #fff6,inset 0 -2px #7043431a,0 1px 2px #68463624;transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease}.medium-sugar-nebula .particle{border-radius:36%;background:color-mix(in srgb,var(--particle-color) 88%,var(--candy-tint));filter:saturate(.96);box-shadow:inset 0 -1px 2px #82584e14,0 1px 2px #885b411f}.medium-pixel-ink .particle{border-radius:2px;width:78%;height:auto;aspect-ratio:1 / 1;box-shadow:inset 0 0 0 1px #3a2e364d,0 1px 1px #5b3c2a1f}.medium-jewel-mosaic .particle{width:82%;height:auto;aspect-ratio:1 / 1;border-radius:4px;clip-path:polygon(14% 0,86% 0,100% 14%,100% 86%,86% 100%,14% 100%,0 86%,0 14%);background:linear-gradient(145deg,#ffffff94 0 22%,#ffffff1f 23% 46%,#0000001a),var(--particle-color);box-shadow:inset 0 1px #ffffffa8,inset 0 -2px #201c2633,0 1px 3px #36373f33}.medium-jewel-mosaic .board-cell{background:color-mix(in srgb,var(--target-color) 88%,#f8f8f8);box-shadow:inset 0 1px #ffffffa3,inset 0 -1px #767c8424}.medium-jewel-mosaic .board-cell.empty{background:color-mix(in srgb,var(--target-color) 90%,#f7f7f7)}.board-cell.selected{z-index:2;transform:translateY(-2px);background:color-mix(in srgb,var(--target-color) 86%,#fbfbfd);box-shadow:inset 0 1px #ffffffa3,0 2px #ffb55699}.board-cell.selected .particle{transform:translateY(-5px) scale(1.2);box-shadow:inset 0 1px #ffffffb8,inset 0 -2px #70434324,0 9px 13px #7f52334d}.board-cell.landed .particle,.tray-slot.landed .particle{animation:stardustLand .28s cubic-bezier(.22,1.3,.36,1)}.medium-sugar-nebula .board-cell.landed .particle,.medium-sugar-nebula .tray-slot.landed .particle{animation:sugarLand .36s cubic-bezier(.18,1.45,.28,1)}.medium-pixel-ink .board-cell.landed .particle,.medium-pixel-ink .tray-slot.landed .particle{animation:pixelLand .16s steps(2,end)}.medium-jewel-mosaic .board-cell.landed .particle,.medium-jewel-mosaic .tray-slot.landed .particle{animation:mosaicLand .24s cubic-bezier(.2,1.12,.32,1)}@keyframes stardustLand{0%{transform:translateY(-5px) scale(1.08)}55%{transform:translateY(1px) scale(.94)}to{transform:translateY(0) scale(1)}}@keyframes sugarLand{0%{transform:translateY(-6px) scale(1.08,.94)}38%{transform:translateY(1px) scale(.92,1.1)}68%{transform:translateY(-1px) scale(1.04,.98)}to{transform:translateY(0) scale(1)}}@keyframes pixelLand{0%{transform:translateY(-3px)}to{transform:translateY(0)}}@keyframes mosaicLand{0%{transform:translateY(-5px) scale(1.06)}48%{transform:translateY(1px) scale(.97)}to{transform:translateY(0) scale(1)}}.board-cell.locked .particle{box-shadow:inset 0 1px #ffffffb3,inset 0 -2px #70434324,0 0 0 2px #ffffffc2,0 0 10px color-mix(in srgb,var(--particle-color) 64%,transparent)}.board-cell.bloomed{background:color-mix(in srgb,var(--target-color) 78%,#fbfbfd)}.lumen-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.lumen-well{position:relative;display:grid;place-items:center;gap:2px;min-height:42px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--particle-color) 38%,#fff4df)}.lumen-well span{color:var(--ink);font-size:.72rem;font-weight:900}.lumen-well small{color:#37405cb8;font-size:.62rem;font-weight:800}.lumen-well.active{outline:2px solid var(--focus);outline-offset:1px}.lumen-well.bloomed:after{content:"";position:absolute;inset:7px;border-radius:50%;border:2px solid rgba(255,255,255,.82)}.full-button,.action-row button{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;font-weight:800}.full-button:disabled{cursor:not-allowed;opacity:.5}.selection-strip{display:grid;gap:4px;min-height:68px;border:1px solid var(--line);border-radius:8px;padding:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--particle-color, #83d4ff) 28%,transparent),transparent),#ffffff9e}.selection-strip span{color:var(--muted)}.tray-grid{display:grid;grid-template-columns:repeat(var(--tray-columns),minmax(28px,1fr));gap:8px;border-radius:12px;padding:10px;background:#eee;box-shadow:inset 0 0 0 1px #82889129,0 6px 14px #6c717a1f}.tray-slot{display:grid;place-items:center;aspect-ratio:1;min-width:0;min-height:34px;border:0;border-radius:8px;background:#f8f8f8;cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background-color .16s ease;box-shadow:inset 0 0 0 1px #82889133,inset 0 -2px #767c841f}.tray-slot.filled{background:color-mix(in srgb,var(--particle-color) 34%,#f7f7f7)}.tray-slot.drop-ready{background:#fff;box-shadow:inset 0 0 0 2px #ffb74d9e,0 5px 12px #6c717a29}.tray-slot.drop-ready:active{transform:scale(.96)}.tray-slot.selected{box-shadow:inset 0 0 0 2px #ffffffb8,0 8px 12px #7f52333d}.tray-slot .particle,.medium-pixel-ink .tray-slot .particle{width:78%;height:auto;aspect-ratio:1 / 1}.well-meter{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:8px;min-height:44px;border:1px solid var(--line);border-radius:8px;padding:10px;background:#ffffff94}.well-meter span{color:var(--muted);font-size:.8rem}.action-row{display:grid;grid-template-columns:1fr;gap:8px}.theme-switch{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:8px}.theme-chip{min-height:38px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:#ffffff80;font-weight:700;font-size:.82rem;cursor:pointer}.theme-chip.active{border-color:var(--focus);background:color-mix(in srgb,var(--focus) 22%,rgba(255,255,255,.7));box-shadow:0 0 0 1px var(--focus) inset}.archive-list{gap:8px}.archive-level{display:grid;gap:6px;border-bottom:1px solid var(--line);padding-bottom:8px;font-size:.83rem}.archive-level div{display:flex;gap:6px}.archive-level i{width:18px;height:18px;border:1px solid var(--line);border-radius:50%;background:#ffffff94}.archive-level i.collected{border-color:transparent;background:var(--focus);box-shadow:0 0 12px #ffb54a6b}@media(max-width:1080px){.workspace{grid-template-columns:1fr}.left-panel,.right-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.board-wrap{width:min(100%,76vh)}}@media(max-width:700px){.app-shell{padding:max(10px,env(safe-area-inset-top)) 10px max(10px,env(safe-area-inset-bottom))}.topbar{margin-bottom:10px}.archive-pill{padding:8px 10px}.left-panel,.right-panel{grid-template-columns:1fr}.atelier-stage,.side-panel{padding:10px}.chart-header{align-items:flex-start}.progress-cluster{padding:8px;font-size:.78rem}.board-wrap{min-width:0;width:100%}.particle{width:86%;height:auto;aspect-ratio:1 / 1}.choice-grid{grid-template-columns:1fr}.lumen-grid{grid-template-columns:repeat(8,1fr)}.lumen-well{min-height:38px}}.completion-overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 30%,#241c409e,#0c0e1ad6);backdrop-filter:blur(6px);animation:overlayIn .32s ease both}.completion-card{width:min(420px,100%);display:flex;flex-direction:column;align-items:center;gap:14px;padding:22px;border-radius:22px;background:#fffffff0;border:1px solid rgba(255,255,255,.7);box-shadow:0 26px 60px #12102873;text-align:center;animation:cardRise .42s cubic-bezier(.18,.9,.26,1.1) both}.completion-card h2{margin:0;font-size:1.18rem}.completion-board{display:grid;grid-template-columns:repeat(var(--board-cols),1fr);grid-template-rows:repeat(var(--board-rows),1fr);width:min(280px,72vw);gap:0;padding:8px;border-radius:16px;background:#0e1120;box-shadow:inset 0 0 0 1px #ffffff14;overflow:hidden}.completion-pixel{background:var(--particle-color);animation:pixelBloom .62s ease both;animation-delay:var(--bloom-delay)}.completion-pixel.hole{background:transparent;animation:none}.completion-note{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:.84rem;color:var(--muted, #6a6b80)}.completion-actions{display:flex;gap:10px;width:100%}.completion-actions button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 12px;border-radius:13px;border:1px solid var(--line);background:#ffffffe6;font-weight:600;cursor:pointer}.completion-actions button.primary{border-color:transparent;background:linear-gradient(135deg,#8a7be0,#f3a7c2);color:#fff;box-shadow:0 10px 22px #8a7be066}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}@keyframes cardRise{0%{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pixelBloom{0%{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.completion-overlay,.completion-card,.completion-pixel{animation-duration:1ms;animation-delay:0ms!important}.particle,.board-cell,.board-cell.landed .particle,.tray-slot.landed .particle{transition:none;animation:none!important}.board-cell.selected .particle{transform:none}}.menu-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;color:var(--ink);background:var(--panel-strong);padding:9px 14px;font-weight:800;cursor:pointer}.menu-pill-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;font-style:normal;font-size:.8rem;background:var(--focus);color:#3a2a07}.menu-overlay{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:18px;background:#14162280;backdrop-filter:blur(5px);animation:overlayIn .22s ease both}.menu-card{width:min(460px,100%);max-height:86vh;display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:18px;background:var(--panel-strong);border:1px solid var(--line);box-shadow:0 26px 60px #12102866;animation:cardRise .3s cubic-bezier(.18,.9,.26,1.05) both}.menu-head{display:flex;align-items:center;justify-content:space-between}.menu-head h2{font-size:1.2rem}.menu-close{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);cursor:pointer}.menu-sub{margin:0;font-size:.82rem;color:var(--muted)}.menu-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding-right:2px}.menu-entry{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:11px 13px;cursor:pointer;text-align:left}.menu-entry.current{border-color:var(--focus);box-shadow:0 0 0 1px var(--focus) inset}.menu-entry-main{display:grid;gap:2px}.menu-entry-main strong{font-size:.96rem;color:var(--ink)}.menu-entry-main small{font-size:.76rem;color:var(--muted)}.menu-dots{display:inline-flex;gap:5px;flex-shrink:0}.menu-dots i{width:14px;height:14px;border-radius:50%;border:1px solid var(--line);background:#ffffff80}.menu-dots i.collected{border-color:transparent;background:var(--focus);box-shadow:0 0 8px #ffb54a73}@media(prefers-reduced-motion:reduce){.menu-overlay,.menu-card{animation-duration:1ms}}.topbar-actions{display:flex;align-items:center;gap:8px}.icon-pill{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:999px;color:var(--ink);background:var(--panel-strong);cursor:pointer}.data-actions{display:grid;gap:10px}.data-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;font-weight:800}