:root{--bg:#0a0c10;--panel:#14171d;--panel2:#191d25;--line:#2a2f39;--text:#f7f7f4;--muted:#a0a6b2;--red:#e52b23;--yellow:#ffd500;--blue:#1677ff;--cyan:#42d3c8;--shadow:0 24px 80px rgba(0,0,0,.45)}
[hidden]{display:none!important}
.classroom-logo{width:52px;height:52px;object-fit:contain;display:block}.brand{gap:10px}.topbar{height:86px}
.canvas-wrap{position:relative}.library-status{position:absolute;left:16px;top:16px;z-index:2;background:rgba(7,9,13,.78);border:1px solid var(--line);border-radius:999px;padding:7px 11px;color:var(--muted);font-size:.75rem;font-weight:800;backdrop-filter:blur(10px)}.library-status.ready{color:#69dbab}.library-status.warn{color:#ffb257}.ldraw-credit{display:block;color:var(--muted);font-size:.68rem;margin-top:12px;line-height:1.45}
*{box-sizing:border-box}html{font-size:16px}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:"Nunito","Noto Sans TC",sans-serif;overflow-x:hidden}button,input{font:inherit}button{color:inherit}.ambient{position:fixed;width:40vw;height:40vw;border-radius:50%;filter:blur(120px);opacity:.12;pointer-events:none}.ambient-a{left:-18vw;top:5vh;background:#087e80}.ambient-b{right:-20vw;bottom:-10vw;background:#a92d13}.topbar{height:80px;max-width:1240px;margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:12px;border:0;background:none;font-size:1.15rem;font-weight:900;cursor:pointer}.brand em{font-style:normal;color:var(--muted);font-weight:700}.brand-mark{width:44px;height:36px;background:var(--red);border-radius:7px;display:grid;place-items:center;position:relative;box-shadow:inset 0 -4px rgba(0,0,0,.18)}.brand-mark i{position:absolute;top:-4px;width:9px;height:6px;border-radius:50%;background:#ff6a61}.brand-mark i:nth-child(1){left:7px}.brand-mark i:nth-child(2){left:18px}.brand-mark i:nth-child(3){left:29px}.brand-mark b{font-size:.78rem;background:#fff;color:#111;padding:2px 3px;border-radius:2px}.top-actions{display:flex;align-items:center;gap:14px}.privacy{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:7px}.privacy span{width:7px;height:7px;background:#55d58c;border-radius:50%;box-shadow:0 0 0 4px rgba(85,213,140,.12)}.icon-button{width:40px;height:40px;border:1px solid var(--line);background:var(--panel);border-radius:12px;cursor:pointer;font-size:1.2rem}main{max-width:1180px;margin:0 auto;padding:20px 28px 64px}.start-view{min-height:calc(100vh - 120px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);gap:70px;align-items:center}.intro-card{max-width:610px}.lego-badge{width:84px;height:67px;background:var(--yellow);border-radius:12px;display:grid;place-items:center;position:relative;transform:rotate(-2deg);box-shadow:inset 0 -8px rgba(149,96,0,.17),0 16px 30px rgba(255,213,0,.12)}.lego-badge span{position:absolute;top:-8px;width:18px;height:12px;border-radius:50%;background:#fff38c}.lego-badge span:nth-child(1){left:10px}.lego-badge span:nth-child(2){left:33px}.lego-badge span:nth-child(3){left:56px}.lego-badge strong{background:#111;color:#fff;padding:7px 8px;border-radius:4px}.eyebrow{margin:24px 0 10px;color:var(--cyan);font-size:.76rem;font-weight:900;letter-spacing:.2em}.intro-card h1,.studio-head h1{margin:0;font-size:clamp(2.45rem,5vw,4.4rem);line-height:1.04;letter-spacing:-.045em}.intro-card h1 span{color:var(--yellow)}.lead{max-width:540px;color:var(--muted);font-size:1.05rem;line-height:1.75;margin:22px 0 30px}.code-form label{display:block;font-size:.82rem;color:var(--muted);font-weight:800;margin-bottom:8px}.code-row{display:grid;grid-template-columns:1fr auto;gap:10px}.code-row input,.dialog-card input{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:13px;color:var(--text);padding:15px 18px;text-transform:uppercase;letter-spacing:.14em;font-weight:900;outline:none}.code-row input:focus,.dialog-card input:focus{border-color:var(--yellow);box-shadow:0 0 0 3px rgba(255,213,0,.12)}button.primary,.primary{border:0;background:var(--yellow);color:#111;font-weight:900;border-radius:13px;padding:0 24px;cursor:pointer;box-shadow:inset 0 -4px rgba(143,94,0,.16)}.field-hint{font-size:.78rem;color:var(--muted);margin:9px 0 0}.field-hint button{border:0;background:none;color:var(--yellow);font-weight:900;cursor:pointer}.divider{display:flex;align-items:center;gap:14px;margin:25px 0;color:#6e7480;font-size:.76rem}.divider:before,.divider:after{content:"";height:1px;background:var(--line);flex:1}.upload-row{display:flex;gap:10px;flex-wrap:wrap}.upload-button,.ghost{border:1px solid var(--line);background:var(--panel);border-radius:13px;padding:13px 18px;font-weight:800;cursor:pointer}.upload-button span{color:var(--cyan);font-size:1.2rem}.ghost{background:transparent;color:var(--muted)}.teacher-link{margin-top:20px;background:none;border:0;padding:0;color:var(--muted);text-decoration:underline;text-underline-offset:4px;cursor:pointer}.preview-stack{min-height:530px;display:flex;flex-direction:column;justify-content:center}.brick-art{height:390px;position:relative;perspective:700px;transform:rotate(-3deg)}.brick{position:absolute;height:86px;border-radius:8px;transform:skewY(-5deg);box-shadow:inset 0 -14px rgba(0,0,0,.18),0 34px 50px rgba(0,0,0,.35)}.brick:after{content:"";position:absolute;left:7%;bottom:-17px;width:86%;height:18px;background:inherit;filter:brightness(.58);transform:skewX(-35deg);border-radius:0 0 6px 6px}.brick i{position:relative;display:inline-block;width:44px;height:22px;border-radius:50%;margin:0 4px;top:-13px;background:inherit;filter:brightness(1.3);box-shadow:inset 0 -5px rgba(0,0,0,.18)}.brick.red{background:var(--red)}.brick.yellow{background:var(--yellow)}.brick.blue{background:var(--blue)}.brick.white{background:#ebedf0}.r1{width:260px;left:32px;top:57px;transform:rotate(-8deg) skewY(-5deg)}.r2{width:210px;right:14px;top:155px;transform:rotate(7deg) skewY(-5deg)}.r3{width:150px;left:72px;top:250px;transform:rotate(-3deg) skewY(-5deg)}.r4{width:205px;right:20px;top:18px;transform:rotate(5deg) skewY(-5deg)}.feature-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);padding-top:20px}.feature-strip div{display:flex;flex-direction:column;gap:2px}.feature-strip b{color:var(--yellow);font-size:.8rem}.feature-strip span{font-size:.9rem;color:var(--muted)}
.studio-view{padding-top:24px}.studio-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px}.studio-head .eyebrow{margin-top:0}.studio-head h1{font-size:2.2rem}.model-meta{display:flex;align-items:center;gap:9px}.model-meta>span{background:var(--panel);border:1px solid var(--line);padding:8px 12px;border-radius:999px;color:var(--muted);font-size:.82rem}.small{padding:8px 12px}.studio-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px}.viewer-card,.parts-card{background:rgba(20,23,29,.95);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}.viewer-toolbar{height:60px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.view-tabs,.view-tools{display:flex;gap:5px}.view-tabs button,.view-tools button,.parts-head button{border:0;background:transparent;color:var(--muted);padding:8px 12px;border-radius:9px;cursor:pointer;font-weight:800}.view-tabs .active{background:#2a2f38;color:#fff}.view-tools button{background:#22262e;width:36px;padding:7px}.viewer-card canvas{display:block;width:100%;height:540px;cursor:grab;background:radial-gradient(circle at 50% 48%,#232936 0,#14171d 56%,#101218 100%)}.viewer-card canvas:active{cursor:grabbing}.drag-tip{text-align:center;color:#777e8a;font-size:.76rem;margin-top:-28px;position:relative;pointer-events:none}.step-control{margin-top:12px;height:92px;border-top:1px solid var(--line);display:grid;grid-template-columns:48px 90px 1fr 48px;gap:14px;align-items:center;padding:0 18px}.step-control button{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:#20242c;font-size:1.6rem;cursor:pointer}.step-control div{display:flex;flex-direction:column}.step-control div span{color:var(--muted);font-size:.72rem}.step-control strong{font-size:1.1rem}.step-control input{accent-color:var(--yellow)}.parts-card{display:flex;flex-direction:column;min-height:650px}.parts-head{display:flex;justify-content:space-between;align-items:center;padding:19px;border-bottom:1px solid var(--line)}.parts-head p{margin:0;color:var(--muted);font-size:.72rem}.parts-head h2{margin:2px 0 0;font-size:1.3rem}.parts-head button{font-size:.75rem;color:var(--cyan)}.parts-list{padding:10px;overflow:auto;flex:1;max-height:540px}.part-item{display:grid;grid-template-columns:46px 1fr auto;gap:11px;align-items:center;padding:11px;border-radius:13px}.part-item:hover{background:var(--panel2)}.part-swatch{width:42px;height:34px;border-radius:5px;position:relative;box-shadow:inset 0 -7px rgba(0,0,0,.2)}.part-swatch:before,.part-swatch:after{content:"";position:absolute;top:-4px;width:11px;height:7px;border-radius:50%;background:inherit;filter:brightness(1.28)}.part-swatch:before{left:7px}.part-swatch:after{right:7px}.part-item strong{display:block;font-size:.82rem;word-break:break-all}.part-item small{color:var(--muted);font-size:.7rem}.part-item>b{font-size:1rem}.empty-parts{text-align:center;color:var(--muted);padding:60px 10px;line-height:1.7}.progress-wrap{padding:18px;border-top:1px solid var(--line)}.progress-wrap>div:first-child{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted);margin-bottom:8px}.progress{height:7px;background:#282d36;border-radius:9px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--yellow),#ff9f1a);transition:width .3s}.dialog-card{width:min(440px,calc(100vw - 30px));background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:22px;padding:28px;position:relative;box-shadow:var(--shadow)}dialog{background:transparent;border:0}dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}.dialog-close{position:absolute;right:15px;top:15px;border:0;background:#262a33;width:32px;height:32px;border-radius:50%;cursor:pointer}.dialog-card h2{margin:0;font-size:1.55rem}.dialog-card>p:not(.eyebrow){color:var(--muted);line-height:1.6}.dialog-card label:not(.dialog-upload){display:flex;flex-direction:column;gap:7px;font-size:.78rem;color:var(--muted);margin:20px 0 12px}.dialog-upload{display:inline-block;border:1px solid var(--line);padding:10px 14px;border-radius:10px;cursor:pointer}.dialog-card>span{display:block;color:var(--muted);font-size:.75rem;margin:9px 0 18px}.dialog-card .primary{width:100%;height:48px}.dialog-card .primary:disabled{opacity:.4;cursor:not-allowed}#toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);background:#fff;color:#111;padding:10px 16px;border-radius:999px;font-weight:800;font-size:.85rem;opacity:0;pointer-events:none;transition:.2s;z-index:20}#toast.show{opacity:1;transform:translate(-50%,0)}
.viewer-card canvas{touch-action:none}
.part-item{cursor:pointer;border:1px solid transparent}.part-item:hover,.part-item:focus-visible{background:var(--panel2);border-color:var(--line);outline:none}.part-item:active{transform:scale(.985)}
.part-item.missing{border-color:rgba(255,113,80,.35)}.part-item.missing small{color:#ff9d7c}
body.light{--bg:#f3f4f6;--panel:#fff;--panel2:#f0f2f5;--line:#d7dae0;--text:#13151a;--muted:#646a75;--shadow:0 24px 70px rgba(33,38,50,.12)}body.light .viewer-card canvas{background:radial-gradient(circle,#fff,#eef0f4 68%)}body.light .view-tabs .active,body.light .view-tools button{background:#e7e9ed;color:#191b20}
@media(max-width:900px){.start-view{grid-template-columns:1fr;gap:20px;padding-top:45px}.intro-card{margin:auto}.preview-stack{min-height:360px}.brick-art{transform:scale(.78);transform-origin:center;height:310px}.studio-grid{grid-template-columns:1fr}.parts-card{min-height:400px}.parts-list{max-height:360px}.studio-head{align-items:flex-start;gap:18px;flex-direction:column}.viewer-card canvas{height:470px}}
@media(max-width:600px){.topbar{height:68px;padding:0 17px}.privacy{display:none}main{padding:10px 14px 40px}.start-view{padding-top:20px}.intro-card h1{font-size:2.55rem}.lead{font-size:.98rem}.code-row{grid-template-columns:1fr}.code-row .primary{height:50px}.upload-row>*{flex:1;text-align:center}.preview-stack{display:none}.studio-head{margin-top:8px}.model-meta{flex-wrap:wrap}.studio-grid{gap:12px}.viewer-card canvas{height:400px}.step-control{grid-template-columns:42px 64px 1fr 42px;gap:7px;padding:0 10px}.step-control button{width:38px;height:38px}.parts-card{border-radius:18px}.brand em{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}