:root{color:#172033;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f8f4ea;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{min-height:100svh}button,input,textarea,select{font:inherit}button:focus-visible{outline-offset:2px;outline:3px solid #4cc9f08c}img{max-width:100%}.app-shell{color:#172033;background:radial-gradient(circle at 12% 8%,#ffd8572e,#0000 30%),radial-gradient(circle at 84% 18%,#4cc9f02e,#0000 32%),linear-gradient(135deg,#f8f4ea 0%,#edf7f1 48%,#eef3fb 100%);min-height:100svh}.topbar{z-index:20;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#fffdf6d1;border-bottom:1px solid #2730411a;justify-content:space-between;align-items:center;gap:18px;min-height:72px;padding:12px 24px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:12px;min-width:0;display:flex}.brand-mark{color:#fff;background:linear-gradient(135deg,#ff6f61,#4cc9f0);border-radius:14px;place-items:center;width:44px;height:44px;display:grid;box-shadow:0 12px 26px #2e46642e}.brand strong,.brand span{white-space:nowrap;display:block}.brand strong{font-size:18px;line-height:1.2}.brand span{color:#657286;margin-top:3px;font-size:12px}.tool-group{background:#ffffffbf;border:1px solid #2730411a;border-radius:12px;align-items:center;gap:6px;padding:5px;display:flex}.tool-group button,.mobile-actions button,.export-button,.admin-hero button,.plain-link-button{color:#283448;min-height:36px;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:9px;justify-content:center;align-items:center;gap:7px;font-size:13px;font-weight:700;transition:transform .18s,background .18s,color .18s,box-shadow .18s;display:inline-flex}.tool-group button:hover,.mobile-actions button:hover,.plain-link-button:hover{background:#1f29370f}.tool-group button.active{color:#fff;background:#172033;box-shadow:0 8px 18px #17203329}.plain-link-button{background:#ffffffbd;border:1px solid #2730411a;padding:0 14px}.admin-mark{background:linear-gradient(135deg,#172033,#4cc9f0)}.compact-stats{justify-items:end;gap:2px;min-width:76px;display:grid}.compact-stats span{color:#657286;font-size:12px;font-weight:800}.compact-stats strong{color:#172033;white-space:nowrap;font-size:15px}.tool-group button:disabled{color:#a3adbb;cursor:not-allowed;box-shadow:none;background:0 0}.studio-layout{grid-template-columns:minmax(220px,280px) minmax(360px,1fr) minmax(220px,300px);gap:16px;height:calc(100svh - 73px);padding:16px;display:grid}.focus-layout{grid-template-columns:minmax(320px,1fr);max-width:1120px;margin:0 auto;padding:12px}.focus-layout .canvas-stage{min-height:0}.reference-strip{background:#fffdf6e6;border-bottom:1px solid #27304114;grid-template-columns:minmax(118px,18%) minmax(0,1fr);gap:12px;padding:10px;display:grid}.reference-preview{background:#ffffffad;border:1px solid #2730411a;border-radius:8px;min-height:110px;position:relative;overflow:hidden}.reference-preview canvas{width:100%;height:100%;display:block}.reference-meta{align-content:center;gap:8px;min-width:0;display:grid}.reference-meta span{color:#657286;font-size:11px;font-weight:800}.reference-meta strong{color:#172033;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-size:18px;line-height:1.15;display:block;overflow:hidden}.reference-stats,.template-chips{scrollbar-width:none;gap:6px;display:flex;overflow-x:auto}.reference-stats::-webkit-scrollbar{display:none}.template-chips::-webkit-scrollbar{display:none}.reference-stats span{background:#ffffffb8;border-radius:999px;flex:none;padding:5px 8px}.reference-controls{gap:7px;display:grid}.reference-options{min-width:0}.reference-options summary{color:#455266;cursor:pointer;background:#ffffffad;border:1px solid #2730411a;border-radius:999px;width:fit-content;padding:5px 9px;font-size:12px;font-weight:850;list-style:none}.reference-options summary::-webkit-details-marker{display:none}.reference-options[open] summary{color:#fff;background:#172033;margin-bottom:7px}.template-chips button{color:#455266;min-height:30px;font:inherit;cursor:pointer;background:#ffffffad;border:1px solid #2730411a;border-radius:999px;flex:none;padding:0 10px;font-size:12px;font-weight:850}.template-chips button.active{color:#fff;background:#172033}.side-panel{flex-direction:column;gap:12px;min-height:0;display:flex;overflow:auto}.panel-block,.admin-section,.metric-card{background:#fffdf6d1;border:1px solid #2730411a;border-radius:8px;box-shadow:0 18px 45px #363e4c17}.panel-block{padding:14px}.panel-heading,.section-title{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.panel-heading span,.section-title h2{color:#172033;font-size:15px;font-weight:800}.panel-heading svg{color:#7a879a}.status-title{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;display:flex}.status-title span{color:#172033;font-size:18px;font-weight:850;line-height:1.2}.status-title small,.cloud-list small,.template-item small,.work-admin-list small,.metric-card small,.section-title span,.platform-grid span{color:#6c788a;font-size:12px}.progress-track{background:#17203317;border-radius:999px;height:10px;overflow:hidden}.progress-track span{border-radius:inherit;background:linear-gradient(90deg,#ff6f61,#ffd857,#66d9a8);height:100%;display:block}.status-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;display:grid}.status-grid span{color:#677386;text-align:center;background:#ffffffa6;border-radius:8px;min-width:0;padding:10px 8px;font-size:11px}.status-grid strong{color:#172033;font-size:19px;line-height:1.1;display:block}.sync-pill{color:#365044;background:#66d9a82e;border-radius:999px;align-items:center;gap:7px;min-width:0;padding:9px 10px;font-size:12px;font-weight:750;display:flex}.sync-pill.saving{color:#6b541c;background:#ffd8573d}.sync-pill.queued{color:#1f5570;background:#4cc9f02e}.template-list,.cloud-list,.work-admin-list,.usage-list,.template-admin-list{gap:9px;display:grid}.size-selector{grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px;display:grid}.size-selector button{color:#455266;min-height:32px;font:inherit;cursor:pointer;background:#ffffffad;border:1px solid #2730411a;border-radius:8px;font-size:12px;font-weight:850}.size-selector button.active{color:#fff;background:#172033}.size-selector.compact{scrollbar-width:none;gap:6px;margin-bottom:0;display:flex;overflow-x:auto}.size-selector.compact::-webkit-scrollbar{display:none}.size-selector.compact button{flex:none;min-width:42px;min-height:30px}.template-item,.cloud-list button,.work-admin-list button,.work-admin-list a{color:#172033;width:100%;font:inherit;text-align:left;cursor:pointer;background:#ffffffa3;border:1px solid #27304114;border-radius:8px;align-items:center;gap:10px;text-decoration:none;display:flex}.template-item{min-height:56px;padding:8px}.template-item.active{background:#ff6f611c;border-color:#ff6f617a}.template-item span:not(.template-thumb),.cloud-list button span{gap:2px;min-width:0;display:grid}.template-item strong,.cloud-list span,.work-admin-list strong{text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:800;overflow:hidden}.template-thumb{background:#fffaf0;border:1px solid #1720331a;border-radius:7px;flex:none;grid-template-columns:repeat(24,1fr);width:42px;height:42px;display:grid;overflow:hidden}.template-thumb i{display:block}.cloud-list button{padding:10px;display:grid}.cloud-list p,.usage-list p,.empty-note{color:#6c788a;margin:0;font-size:12px;line-height:1.45}.canvas-stage{background:#fffdf6a3;border:1px solid #2730411a;border-radius:8px;flex-direction:column;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden;box-shadow:0 24px 70px #363e4c1f}.stage-toolbar{z-index:5;background:#fffdf6d6;border-bottom:1px solid #27304114;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:12px;display:flex;position:relative}.tool-group button{width:34px;height:34px}.tool-group span{color:#455266;text-align:center;min-width:48px;font-size:12px;font-weight:800}.canvas-wrap{flex:1;min-height:0;position:relative}.canvas-wrap canvas{cursor:crosshair;touch-action:none;width:100%;height:100%;display:block}.gesture-hint{color:#4b596d;pointer-events:none;background:#fffdf6c7;border:1px solid #27304114;border-radius:999px;max-width:calc(100% - 32px);padding:8px 10px;font-size:12px;font-weight:750;position:absolute;bottom:14px;right:16px;box-shadow:0 10px 30px #2b32411a}.cell-readout{color:#172033;pointer-events:none;background:#ffffffc7;border:1px solid #2730411a;border-radius:8px;align-content:center;min-width:78px;min-height:40px;padding:6px 10px;display:inline-grid}.cell-readout span{color:#657286;font-size:11px;font-weight:800}.cell-readout strong{margin-top:2px;font-size:17px;line-height:1}.mobile-color-dock{scrollbar-width:none;background:#fffdf6e6;border-top:1px solid #27304114;gap:10px;padding:10px 12px;display:none;overflow-x:auto}.mobile-color-dock::-webkit-scrollbar{display:none}.mobile-actions{background:#fffdf6e0;border-top:1px solid #27304114;gap:8px;padding:10px;display:none}.mobile-actions button{background:#ffffffb8;flex:1}.mobile-actions .primary-action,.export-button,.admin-hero button{color:#fff;background:#172033}.palette-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.color-swatch{aspect-ratio:1;color:#fff;background:radial-gradient(circle at 35% 28%, #ffffffb8, transparent 24%), var(--swatch);cursor:pointer;border:2px solid #ffffffdb;border-radius:999px;place-items:center;width:100%;min-height:42px;display:grid;position:relative;box-shadow:inset 0 -8px 16px #00000029,0 10px 18px #222c3a1c}.color-swatch.active{outline-offset:2px;outline:3px solid #172033}.usage-list div{background:#fff9;border-radius:8px;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:32px;padding:7px 8px;display:grid}.usage-list i{border-radius:999px;width:18px;height:18px;box-shadow:inset 0 -4px 8px #00000024}.usage-list span{color:#4e5d71;text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.usage-list strong{color:#172033;font-size:13px}.export-block img{border-radius:8px;width:100%;margin-top:12px;display:block;box-shadow:0 14px 30px #262f401f}.export-button{width:100%;min-height:42px}.export-placeholder{color:#6c788a;background:#ffffff75;border:1px dashed #2730412e;border-radius:8px;place-items:center;gap:8px;min-height:160px;margin-top:12px;font-size:12px;display:grid}.hidden-export-canvas{display:none}.smart-shell{flex-direction:column;display:flex;overflow:hidden}.smart-layout{grid-template-rows:auto minmax(0,1fr);gap:10px;height:calc(100svh - 73px);padding:10px;display:grid}.smart-head{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:10px;display:grid}.upload-card,.guide-summary{background:#fffdf6db;border:1px solid #2730411a;border-radius:8px;min-width:0;box-shadow:0 16px 36px #363e4c14}.upload-card{cursor:pointer;align-items:center;gap:10px;min-height:78px;padding:12px;display:flex;position:relative}.upload-card input{opacity:0;cursor:pointer;position:absolute;inset:0}.upload-card svg{color:#172033;flex:none}.upload-card div,.guide-summary-head div{gap:3px;min-width:0;display:grid}.upload-card strong,.guide-summary-head strong{color:#172033;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:850;overflow:hidden}.upload-card span,.guide-summary-head span,.guide-metrics span{color:#657286;font-size:11px;font-weight:750}.guide-summary{gap:8px;padding:12px;display:grid}.guide-summary-head{justify-content:space-between;align-items:center;gap:10px;display:flex}.done-button{color:#fff;cursor:pointer;background:#172033;border:0;border-radius:8px;justify-content:center;align-items:center;gap:6px;min-height:34px;padding:0 12px;font-size:12px;font-weight:850;display:inline-flex}.done-button:disabled{color:#8d98a8;cursor:not-allowed;background:#17203314}.guide-metrics{scrollbar-width:none;gap:6px;display:flex;overflow-x:auto}.guide-metrics::-webkit-scrollbar{display:none}.guide-metrics span{background:#ffffffb8;border-radius:999px;flex:none;padding:5px 8px}.reference-preview img{object-fit:contain;width:100%;height:100%;display:block}.smart-stage{min-height:0}.smart-toolbar{justify-content:space-between;padding:8px 10px}.smart-canvas-wrap{min-height:360px}.guide-grid{scrollbar-width:none;background:#fffdf6e6;border-top:1px solid #27304114;grid-auto-columns:minmax(98px,1fr);grid-auto-flow:column;gap:8px;padding:8px 10px;display:grid;overflow-x:auto}.guide-grid::-webkit-scrollbar{display:none}.guide-chip{color:#283448;min-height:38px;font:inherit;cursor:pointer;background:#ffffffb8;border:1px solid #27304114;border-radius:8px;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:6px;padding:7px 8px;display:grid}.guide-chip.active{color:#fff;background:#172033;border-color:#17203370}.guide-chip.done{opacity:.62}.guide-chip i{border:2px solid #ffffffdb;border-radius:999px;width:20px;height:20px;box-shadow:inset 0 -4px 8px #00000024}.guide-chip span{text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:800;overflow:hidden}.guide-chip strong{font-size:12px}.guide-empty{color:#657286;place-items:center;min-height:38px;font-size:12px;font-weight:750;display:grid}.admin-layout{gap:16px;padding:20px;display:grid}.admin-hero{background:linear-gradient(120deg,#ff6f6129,#66d9a82e),#fffdf6d6;border:1px solid #2730411a;border-radius:8px;justify-content:space-between;align-items:center;gap:16px;padding:28px;display:flex;box-shadow:0 18px 45px #363e4c17}.admin-hero span{color:#657286;font-size:13px;font-weight:800}.admin-hero h1{color:#172033;max-width:680px;margin:8px 0 0;font-size:32px;line-height:1.12}.admin-hero button{flex:none;padding:0 16px}.metric-row{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.metric-card{gap:5px;padding:16px;display:grid}.metric-card span{color:#657286;font-size:12px;font-weight:800}.metric-card strong{color:#172033;font-size:30px;line-height:1}.admin-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.admin-section{padding:18px}.section-title{align-items:flex-start}.section-title h2{margin:0;font-size:18px}.section-title span{text-align:right}.template-admin-item{background:#ffffff9e;border-radius:8px;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px;display:grid}.template-admin-item strong,.template-admin-item span{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.template-admin-item strong{color:#172033;font-size:14px}.template-admin-item span{color:#6c788a;margin-top:3px;font-size:12px}.template-admin-item em,.work-admin-list em{color:#245741;background:#66d9a833;border-radius:999px;padding:5px 8px;font-size:11px;font-style:normal;font-weight:850}.work-admin-list button,.work-admin-list a{justify-content:space-between;padding:11px 12px}.work-admin-list span{gap:3px;min-width:0;display:grid}.platform-grid{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.platform-grid div{background:#ffffff9e;border-radius:8px;align-content:start;gap:6px;min-height:92px;padding:14px;display:grid}.platform-grid strong{color:#172033;font-size:14px}@media (width<=1180px){.studio-layout:not(.focus-layout){grid-template-columns:220px minmax(360px,1fr)}.right-panel{display:none}}@media (width<=860px){.topbar{min-height:60px;padding:8px 10px}.studio-layout{grid-template-columns:1fr;gap:0;height:calc(100svh - 61px);min-height:0;padding:0}.focus-layout{max-width:none;margin:0}.left-panel{background:#fffdf6b8;border-top:1px solid #27304114;order:2;max-height:31svh;padding:10px}.canvas-stage{border-inline:0;border-radius:0;order:1;min-height:0}.reference-strip{grid-template-columns:96px minmax(0,1fr);gap:9px;padding:8px}.reference-preview{min-height:88px}.reference-meta{gap:6px}.reference-meta strong{font-size:15px}.reference-controls{gap:5px}.stage-toolbar{scrollbar-width:none;flex-wrap:nowrap;justify-content:flex-start;padding:8px 10px;overflow-x:auto}.stage-toolbar::-webkit-scrollbar{display:none}.gesture-hint{max-width:calc(100% - 20px);bottom:118px;right:10px}.cell-readout{min-width:74px}.mobile-color-dock{display:flex}.mobile-color-dock .color-swatch{width:42px;min-width:42px;min-height:42px}.mobile-actions{display:flex}.panel-block{padding:12px}.template-list{grid-auto-columns:minmax(160px,1fr);grid-auto-flow:column;padding-bottom:2px;overflow-x:auto}.size-selector{grid-auto-columns:minmax(48px,1fr);grid-auto-flow:column;padding-bottom:2px;overflow-x:auto}.work-status{display:none}.left-panel .panel-block{flex:none}.left-panel .panel-block:last-child{display:none}.metric-row,.admin-grid,.platform-grid{grid-template-columns:1fr}.admin-hero{flex-direction:column;align-items:stretch;padding:18px}.admin-hero h1{font-size:24px}.smart-layout{gap:0;height:calc(100svh - 61px);padding:0}.smart-head{background:#fffdf6c2;grid-template-columns:1fr;gap:6px;padding:8px}.upload-card{min-height:54px;padding:9px 10px}.guide-summary{gap:6px;padding:9px 10px}.smart-stage{border-inline:0;border-radius:0}.smart-toolbar{flex-wrap:nowrap}.smart-canvas-wrap{min-height:0}.guide-grid{grid-auto-columns:minmax(92px,1fr);padding:7px 8px}.smart-actions{display:flex}}@media (width<=560px){.topbar{gap:8px}.brand{gap:9px}.brand-mark{border-radius:12px;width:38px;height:38px}.brand strong{font-size:16px}.brand span{white-space:normal}.canvas-stage{min-height:0}.reference-strip{grid-template-columns:82px minmax(0,1fr)}.reference-preview{min-height:78px}.reference-stats span{padding:4px 7px}.template-chips button,.size-selector.compact button{min-height:28px;font-size:11px}.tool-group{gap:4px;padding:4px}.tool-group button{width:32px;height:32px}.tool-group span{min-width:42px}.status-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.gesture-hint{display:none}.mobile-actions{padding:8px}.mobile-actions button{min-height:40px;font-size:12px}.cell-readout strong{font-size:19px}.compact-stats{min-width:68px}.compact-stats strong{font-size:13px}.admin-layout{padding:10px}.smart-head{padding:7px}.upload-card div span{display:none}.guide-summary-head{align-items:flex-start}.done-button{white-space:nowrap;min-height:32px;padding:0 10px}.guide-metrics span{padding:4px 7px}.guide-chip{grid-template-columns:18px minmax(0,1fr) auto;min-height:36px;padding:6px 7px}.guide-chip i{width:18px;height:18px}}.smart-shell{background:#f4f7f5;min-height:100svh}.mini-topbar{background:#fafcf8f0;border-bottom-color:#1e2a3714;flex:none}.icon-nav-button,.single-icon-button{color:#172033;cursor:pointer;background:#ffffffc7;border:1px solid #24303f1a;border-radius:8px;flex:none;place-items:center;width:40px;height:40px;display:inline-grid}.mini-page{gap:12px;width:min(100%,540px);margin:0 auto;padding:16px;display:grid}.home-page{align-content:start}.flow-grid,.template-choice-list,.history-list{gap:10px;display:grid}.flow-card,.history-item,.template-choice-card,.upload-size-panel,.upload-drop-card{color:#172033;background:#ffffffd6;border:1px solid #24303f17;border-radius:8px;min-width:0;display:grid;box-shadow:0 14px 32px #232f3c14}.history-section{gap:10px;margin-top:4px;display:grid}.home-section-title{justify-content:space-between;align-items:center;gap:10px;padding:0 2px;display:flex}.home-section-title strong{color:#172033;font-size:15px;font-weight:900}.home-section-title span,.history-list p{color:#657286;margin:0;font-size:12px;font-weight:760}.history-item{min-height:74px;font:inherit;text-align:left;cursor:pointer;grid-template-columns:56px minmax(0,1fr) 18px;align-items:center;gap:10px;padding:9px}.history-item span{gap:3px;min-width:0;display:grid}.history-item strong{color:#172033;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:850;overflow:hidden}.history-item small{color:#657286;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:760;overflow:hidden}.flow-card{min-height:72px;font:inherit;text-align:left;cursor:pointer;grid-template-columns:34px minmax(0,1fr) 22px;align-items:center;gap:12px;padding:13px 12px}.continue-card{background:#eefaf4;border-color:#66d9a85c}.primary-flow{background:#fff4ef;border-color:#ff6f6147}.flow-card span,.template-choice-card span{gap:4px;min-width:0;display:grid}.flow-card strong,.template-choice-card strong,.upload-drop-card strong{color:#172033;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:850;line-height:1.2;overflow:hidden}.flow-card small,.template-choice-card small,.upload-drop-card span,.upload-size-panel span{color:#657286;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:760;overflow:hidden}.learn-page{align-content:center;min-height:calc(100svh - 72px)}.lesson-board{aspect-ratio:1;background:#fffdfa;border:1px solid #24303f14;border-radius:8px;justify-self:center;place-items:center;width:min(72vw,260px);padding:20px;display:grid;box-shadow:0 18px 45px #2a36461a}.lesson-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.lesson-steps span{color:#415066;text-align:center;background:#ffffffc2;border:1px solid #24303f14;border-radius:8px;align-content:center;justify-items:center;gap:6px;min-height:70px;padding:10px 6px;font-size:12px;font-weight:800;display:grid}.lesson-steps strong{color:#fff;background:#172033;border-radius:999px;place-items:center;width:26px;height:26px;font-size:13px;display:grid}.big-action-button{color:#fff;cursor:pointer;background:#172033;border:0;border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:48px;font-size:15px;font-weight:850;display:inline-flex}.template-choice-page,.upload-page{align-content:start}.template-choice-card{min-height:92px;font:inherit;text-align:left;cursor:pointer;grid-template-columns:70px minmax(0,1fr) 18px;align-items:center;gap:12px;padding:11px}.target-miniature{aspect-ratio:1;background-color:#fffaf2;background-image:linear-gradient(90deg,#1720330a 1px,#0000 1px),linear-gradient(#1720330a 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:8px 8px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;border:1px solid #1720331a;border-radius:7px;width:100%;display:grid;overflow:hidden}.target-miniature i{display:block}.upload-size-panel{gap:10px;padding:14px}.board-size-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;display:grid}.board-size-row button{color:#455266;cursor:pointer;background:#fff;border:1px solid #24303f1c;border-radius:8px;min-height:38px;font-size:13px;font-weight:850}.board-size-row button.active{color:#fff;background:#172033}.upload-drop-card{cursor:pointer;border-style:dashed;align-content:center;justify-items:center;gap:8px;min-height:220px;padding:24px;position:relative}.upload-drop-card input{opacity:0;cursor:pointer;position:absolute;inset:0}.play-shell{background:#f5f7f6;grid-template-rows:auto auto minmax(0,1fr) auto;height:100svh;min-height:0;display:grid;overflow:hidden}.play-topbar{background:#fafcf8f5;border-bottom:1px solid #24303f14;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:52px;padding:6px 10px;display:grid}.play-topbar div{gap:2px;min-width:0;display:grid}.play-topbar strong{color:#172033;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:900;overflow:hidden}.play-topbar span,.play-topbar em{color:#657286;font-size:11px;font-style:normal;font-weight:780}.play-reference{background:#fff;border-bottom:1px solid #24303f14;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:62px;padding:6px 10px;display:grid}.reference-thumb{background:#fffaf2;border:1px solid #24303f14;border-radius:8px;place-items:center;width:54px;height:50px;display:grid;overflow:hidden}.reference-thumb img{object-fit:contain;width:100%;height:100%;display:block}.reference-progress{gap:7px;min-width:0;display:grid}.reference-progress span{color:#455266;font-size:12px;font-weight:850}.reference-progress .progress-track{height:8px}.reference-progress .progress-track i{border-radius:inherit;background:linear-gradient(90deg,#ff6f61,#66d9a8);height:100%;display:block}.current-color-pill{background:#f6f8f7;border:1px solid #24303f14;border-radius:999px;align-items:center;gap:6px;max-width:82px;padding:6px 7px;display:inline-flex}.current-color-pill i{border:2px solid #fff;border-radius:999px;flex:none;width:18px;height:18px;box-shadow:inset 0 -4px 8px #00000024}.current-color-pill span{color:#2e3a4b;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:850;overflow:hidden}.play-stage{min-height:0;box-shadow:none;background:0 0;border:0;border-radius:0}.play-toolbar{background:#fafcf8f0;border-bottom-color:#24303f14;justify-content:space-between;gap:6px;min-height:44px;padding:6px 8px}.mode-switch{background:#ffffffc7;border:1px solid #24303f1a;border-radius:10px;flex:none;gap:4px;padding:3px;display:inline-flex}.mode-switch button{color:#455266;cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:7px;justify-content:center;align-items:center;gap:5px;min-height:30px;padding:0 8px;font-size:11px;font-weight:850;display:inline-flex}.mode-switch button.active{color:#fff;background:#172033}.mode-switch button.active.remove{background:#8b2f2f}.play-canvas-wrap{background:#f1f3f2;min-height:0}.play-dock{background:#fafcf8fa;border-top:1px solid #24303f14;flex:none;display:grid}.compact-guide-summary{box-shadow:none;border:0;border-radius:0;padding:6px 10px;display:grid}.play-guide-grid{background:0 0;border-top:0}.play-actions{background:0 0;gap:6px;padding:7px 8px;display:flex}.play-actions button{min-height:38px;padding-inline:10px}.play-actions .primary-action{flex:1.25}.play-actions .compact-action{flex:.64;min-width:68px;padding-inline:8px;font-size:12px}.compact-tool-button{width:34px;height:34px}.play-actions button:disabled{color:#8d98a8;cursor:not-allowed;background:#17203314}.play-actions .danger-action{color:#8b2f2f;background:#8b2f2f17}.confirm-backdrop{z-index:40;background:#17203347;place-items:end center;padding:16px;display:grid;position:fixed;inset:0}.confirm-dialog{background:#fff;border:1px solid #24303f1a;border-radius:10px;gap:16px;width:min(100%,420px);padding:18px;display:grid;box-shadow:0 22px 70px #121b2a38}.confirm-dialog div:first-child{gap:6px;display:grid}.confirm-dialog strong{color:#172033;font-size:17px;font-weight:900}.confirm-dialog span{color:#657286;font-size:13px;line-height:1.5}.confirm-actions{grid-template-columns:1fr 1fr;gap:9px;display:grid}.confirm-actions button{color:#283448;cursor:pointer;background:#eef2f0;border:0;border-radius:8px;min-height:42px;font-size:13px;font-weight:850}.confirm-actions .danger-action{color:#fff;background:#8b2f2f}@media (width>=861px){.smart-shell:has(.play-shell){background:linear-gradient(#ffffffa3,#f4f7f5c2),#eef3f0;place-items:center;min-height:100svh;padding:18px;display:grid}.play-shell{background:#f7f9f8;border:1px solid #24303f1a;border-radius:10px;grid-template-rows:auto auto minmax(0,1fr) auto;width:min(100%,1160px);height:min(100svh - 36px,900px);min-height:680px;overflow:hidden;box-shadow:0 22px 70px #232f3c24}.play-topbar{min-height:58px;padding-inline:14px}.play-reference{grid-template-columns:74px minmax(0,1fr) auto;min-height:76px;padding:9px 14px}.reference-thumb{width:74px;height:58px}.current-color-pill{max-width:180px;padding:8px 11px}.play-toolbar{padding:8px 12px}.play-canvas-wrap{background-color:#f2f5f3;background-image:linear-gradient(90deg,#24303f09 1px,#0000 1px),linear-gradient(#24303f09 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:18px 18px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box}.compact-guide-summary{display:none}.play-guide-grid{grid-auto-columns:minmax(112px,132px);padding:8px 12px}.play-actions{justify-content:flex-end;padding:8px 12px 10px}.play-actions button{flex:none;min-width:104px}.play-actions .primary-action{flex:none;min-width:144px}.play-actions .compact-action{flex:none}}@media (width<=860px){.mini-page{width:100%;padding:12px}.learn-page{min-height:calc(100svh - 61px)}.play-guide-grid{grid-auto-columns:minmax(86px,34%);padding:6px 8px}.play-stage,.play-dock{order:0}.play-shell{grid-template-rows:auto auto minmax(0,1fr) auto}.play-reference{grid-template-columns:48px minmax(0,1fr) auto;min-height:58px;padding:5px 8px}.reference-thumb{width:48px;height:46px}.play-toolbar{min-height:42px;padding:5px 7px}.play-canvas-wrap{min-height:0}.compact-guide-summary{display:none}.play-dock{max-height:178px;overflow:hidden}.play-actions{padding:6px 7px 7px}.play-actions button{min-height:38px}.play-actions .compact-action{flex:0 0 64px;min-width:64px}.mode-switch button{padding:0 7px}}@media (width<=420px){.lesson-steps{grid-template-columns:1fr}.lesson-steps span{text-align:left;grid-template-columns:28px minmax(0,1fr);justify-items:start;min-height:52px}.play-reference{grid-template-columns:48px minmax(0,1fr) auto;min-height:58px}.current-color-pill{justify-content:center;max-width:74px;padding:5px 6px}.current-color-pill span{max-width:42px}.reference-thumb{width:48px;height:46px}.play-guide-grid{grid-auto-columns:minmax(78px,31%)}.play-toolbar{flex-wrap:wrap}.mode-switch{flex:auto;order:2;width:auto;min-width:142px}.mode-switch button{flex:1}.cell-readout{min-width:54px;box-shadow:none;padding:5px 7px;position:static}.cell-readout strong{font-size:15px}.play-actions .compact-action{flex:0 0 58px;gap:3px;min-width:58px;padding-inline:5px}.play-actions button{min-height:36px}}