@font-face{font-family:system-ui;src:local('Microsoft YaHei')}*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#09141b;color:#e7edf0;font-family:Inter,system-ui,-apple-system,'Segoe UI','Microsoft YaHei',sans-serif;font-size:16px;line-height:1.5;-webkit-tap-highlight-color:transparent}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid #e9c786;outline-offset:4px}button{color:inherit}a{color:inherit;text-decoration:none}.app{max-width:1240px;margin:auto;padding:0 42px 24px}.topbar{height:94px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #23313a}.brand{display:flex;align-items:center;gap:12px;font-size:21px;letter-spacing:3px;font-weight:600}.brand-mark{display:grid;place-items:center;width:36px;height:39px;color:#d8b77e;border:1px solid #9c855c;border-radius:5px;font-size:21px;transform:rotate(-5deg)}.brand-en{display:block;font-size:9px;letter-spacing:2.8px;font-weight:400;color:#71858f}.top-actions{display:flex;gap:19px;align-items:center}.quiet-button,.icon-button,.reference-button{background:none;border:0}.quiet-button{font-size:14px;color:#b7c3ca;padding:10px 5px}.icon-button{font-size:28px;line-height:1;min-width:44px;min-height:44px;color:#bac7ce}.intro{display:flex;justify-content:space-between;align-items:center;padding:38px 0 27px}.eyebrow{font-size:11px;letter-spacing:2.6px;color:#89a0ad;margin:0 0 9px;font-weight:500}.eyebrow span{color:#e5c18a;margin-left:10px}h1{font-size:clamp(25px,3vw,38px);font-weight:500;letter-spacing:.7px;margin:0 0 8px;line-height:1.4}.intro-copy{font-size:15px;color:#91a5b0;margin:0}.progress-ring{--progress:0%;width:79px;height:79px;flex:none;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#e6c58c var(--progress),#283640 0);position:relative}.progress-ring:before{content:'';position:absolute;inset:3px;background:#09141b;border-radius:50%}.progress-ring>div{z-index:1;display:flex;align-items:baseline;gap:4px}.progress-ring strong{font-size:27px;font-weight:400;font-variant-numeric:tabular-nums}.progress-ring span{font-size:12px;color:#849aa6}.steps{display:flex;border-bottom:1px solid #26343d;margin-bottom:24px;gap:0}.step{flex:1;display:flex;align-items:center;gap:9px;padding:14px 4px;color:#647e8d;font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px}.step-number{font-size:11px;letter-spacing:1px}.step.active{color:#e6c68b;border-color:#e6c68b}.step.done{color:#aac9c9}.step.done .step-number{color:#8ed4c5}.workspace{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(280px,.9fr);gap:32px;align-items:start}.assembly{background:linear-gradient(145deg,#10252f,#0d1c25 56%,#12252e);border:1px solid #263b47;border-radius:15px;overflow:hidden}.board-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:17px 21px;color:#8ca5b3;font-size:12px}.tiny-cross{color:#d4b982;margin-right:6px}.reference-button{font-size:12px;color:#b5c9d2;padding:8px 0;white-space:nowrap}.reference-button[aria-pressed=true]{color:#efd29d}.board{position:relative;width:100%;aspect-ratio:1000/760;isolation:isolate;overflow:visible}.board-grid{position:absolute;inset:0;background-image:linear-gradient(#789aaa08 1px,transparent 1px),linear-gradient(90deg,#789aaa08 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse,#000 10%,transparent 72%)}.layer{position:absolute;inset:0;pointer-events:none}.piece{position:absolute;object-fit:fill;pointer-events:none;user-select:none;filter:drop-shadow(0 3px 4px #0004)}#base-layer{z-index:1}#reference-layer{z-index:2;opacity:.45}#placed-layer{z-index:3}#target-layer{z-index:4}.placed-piece{animation:place-in .28s ease-out}.ghost-piece{opacity:.23;filter:grayscale(1) brightness(1.8) drop-shadow(0 0 2px #d6be85);transition:opacity .2s}.slot{position:absolute;min-width:44px;min-height:44px;transform:translate(-50%,-50%);pointer-events:auto;background:transparent;border:1px dashed #c5a96d77;border-radius:8px;transition:background .18s,box-shadow .18s,border-color .18s;z-index:1}.slot:after{content:'＋';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#e7c890;font-size:16px;opacity:.7}.slot.selected-target,.slot.hovered{border-color:#f2d499;background:#e0b9631a;box-shadow:0 0 20px #d9b46622}.slot.selected-target:after{opacity:1}.slot.hinted{animation:hint-pulse .8s ease-in-out 3;background:#dec78833;border-color:#f9dfad}.slot.wrong{animation:shake .26s;border-color:#e1907b;background:#d7776322}.board-corner{position:absolute;width:15px;height:15px;border-color:#506d7b66;pointer-events:none}.top-left{left:20px;top:6px;border-left:1px solid;border-top:1px solid}.bottom-right{right:20px;bottom:24px;border-right:1px solid;border-bottom:1px solid}.board-stamp{position:absolute;bottom:16px;left:22px;font-size:9px;letter-spacing:2px;color:#516f7f}.status-line{border-top:1px solid #2d435044;display:flex;align-items:center;gap:9px;min-height:56px;padding:10px 20px;color:#abbec7}.status-line p{margin:0;font-size:13px}.status-symbol{color:#dfc18b;font-size:22px}.status-line.success{color:#bde1d4}.status-line.error{color:#e7b7a8}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;font-size:14px;color:#a7bdc8;background:#0e222ded;z-index:8}.loading[hidden]{display:none}.loading span{width:18px;height:18px;border:2px solid #455e6c;border-top-color:#e6c38a;border-radius:50%;animation:spin 1s linear infinite}.parts-panel{padding:20px 0 0}.stage-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}.stage-heading h2{margin:0;font-size:23px;font-weight:500;line-height:1.5}.stage-heading .eyebrow{font-size:10px;margin-bottom:7px}.hint-button{background:#d3b47810;border:1px solid #7a704d70;border-radius:20px;color:#dfc58e;padding:8px 16px;font-size:13px;min-height:40px}.hint-button:disabled{opacity:.45;cursor:default}.stage-description{color:#92a8b4;font-size:14px;line-height:1.9;min-height:54px;margin:15px 0 24px}.tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-height:154px}.part-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:0;height:148px;background:linear-gradient(150deg,#1c303c88,#12222d);border:1px solid #304652;border-radius:10px;padding:17px 7px 12px;touch-action:none;user-select:none;-webkit-user-select:none;transition:border-color .18s,background .18s,transform .18s;overflow:hidden}.part-card img{max-width:90%;width:auto;height:80px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 7px 5px #0006);-webkit-user-drag:none}.part-card span{font-size:12px;color:#aebfc9;white-space:nowrap}.part-card .part-index{position:absolute;top:7px;left:9px;font-size:9px;letter-spacing:1px;color:#637c8c}.part-card.selected{border-color:#dbbb7b;background:linear-gradient(140deg,#65533740,#24353d);box-shadow:inset 0 0 0 1px #d9b57133}.part-card.selected span{color:#ecd3a7}.part-card.used{opacity:.28;cursor:default}.part-card.used:after{content:'✓';position:absolute;top:5px;right:9px;color:#b6ddcc;font-size:17px}.part-card.wide{grid-column:1/-1;height:168px}.part-card.wide img{max-width:88%;height:auto;max-height:105px}.part-card.dragging{opacity:.35}.touch-note{display:flex;align-items:center;gap:7px;color:#8299a6;font-size:12px;margin:18px 0 28px}.touch-note>span{color:#c8b286;font-size:17px}.stage-fact{padding-top:23px;border-top:1px solid #243741}.stage-fact>span{font-size:11px;letter-spacing:1px;color:#d4b87e}.stage-fact p{font-size:14px;line-height:1.9;color:#819aa9;margin:9px 0}.app>footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:28px;padding:19px 0 0;border-top:1px solid #22343f;color:#5f7b8b;font-size:11px;letter-spacing:.5px}#drag-ghost{position:fixed;z-index:1000;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 12px 7px #0009) drop-shadow(0 0 4px #d8c29855)}#drag-ghost[hidden]{display:none}#drag-ghost img{width:100%;height:100%;object-fit:contain}.modal{background:#10242e;color:#e4edef;border:1px solid #3e5866;border-radius:20px;width:min(500px,calc(100% - 32px));padding:35px;box-shadow:0 25px 120px #0009;max-height:90dvh;overflow:auto}.modal::backdrop{background:#020b11d9;backdrop-filter:blur(8px)}.modal h2{font-weight:500;font-size:27px;margin:7px 0 17px;line-height:1.5}.modal p,.modal li{font-size:15px;line-height:1.9;color:#a6bdc8}.modal ol{padding-left:21px;margin:23px 0}.modal li{margin:9px 0}.modal-close{position:absolute;right:12px;top:10px;border:0;background:none;font-size:28px;width:44px;height:44px;color:#9cb4c0}.primary-button{background:#e1c28c;color:#13232b;border:0;border-radius:7px;font-weight:600;font-size:15px;padding:13px 23px;min-height:48px}.modal-actions{display:flex;gap:20px;align-items:center;margin-top:22px}.win-modal{text-align:center;width:min(670px,calc(100% - 28px));padding:32px}.win-modal .modal-actions{justify-content:center}.win-emblem{margin:0 auto 14px;border:1px solid #cbb27c;width:53px;height:53px;border-radius:50%;display:grid;place-items:center;font-size:27px;color:#e1c38b;background:#ceb78112}.video-shell{overflow:hidden;border-radius:9px;background:#061118;margin-top:20px}.video-shell video{display:block;width:100%;aspect-ratio:16/9}.confetti{position:absolute;width:6px;height:9px;background:#e4c98d;pointer-events:none;z-index:6;animation:confetti 1.1s ease-out forwards}.reference-layer[hidden]{display:none}@keyframes place-in{from{filter:brightness(1.7) drop-shadow(0 0 14px #f0d092);transform:scale(1.06)}to{filter:drop-shadow(0 3px 4px #0004);transform:scale(1)}}@keyframes hint-pulse{50%{box-shadow:0 0 26px #dabb7966}}@keyframes shake{25%{translate:-3px}75%{translate:3px}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes confetti{to{transform:translate(var(--dx),var(--dy)) rotate(270deg);opacity:0}}
@media(min-width:1100px){.assembly .board{margin-top:0}.parts-panel{padding-top:26px}.stage-fact{margin-top:22px}}
@media(max-width:760px){.app{padding:0 18px max(20px,env(safe-area-inset-bottom))}.topbar{height:66px}.brand{font-size:18px;gap:9px}.brand-mark{width:30px;height:33px;font-size:18px}.brand-en{font-size:8px}.top-actions{gap:9px}.quiet-button{font-size:13px}.intro{padding:23px 0 20px;gap:12px}h1{font-size:26px;letter-spacing:0}.intro-copy{font-size:13px}.eyebrow{font-size:9px;letter-spacing:2px}.progress-ring{width:61px;height:61px}.progress-ring strong{font-size:23px}.progress-ring span{font-size:10px}.steps{margin-bottom:17px}.step{font-size:12px;gap:5px;padding:10px 2px;justify-content:center}.step-number{font-size:9px}.workspace{grid-template-columns:1fr;gap:19px}.board-heading{padding:9px 13px;font-size:11px}.reference-button{font-size:11px;min-height:36px}.assembly{border-radius:12px}.board{aspect-ratio:1000/720}.board .layer{top:-2.5%;height:105.55%;bottom:auto}.board-stamp{font-size:8px;bottom:8px;left:13px}.board-corner{display:none}.status-line{min-height:45px;padding:8px 13px}.status-line p{font-size:12px}.parts-panel{padding:0}.stage-heading h2{font-size:21px}.stage-heading .eyebrow{font-size:9px;margin-bottom:4px}.hint-button{font-size:12px;min-height:38px;padding:6px 15px}.stage-description{font-size:13px;line-height:1.7;margin:8px 0 14px;min-height:0}.tray{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;min-height:112px}.part-card{height:116px;padding:14px 3px 9px;gap:8px;border-radius:8px}.part-card img{height:65px;max-width:85%}.part-card span{font-size:10px}.part-card .part-index{font-size:8px;left:6px;top:5px}.part-card.wide{height:124px}.part-card.wide img{max-height:74px;max-width:88%}.touch-note{font-size:11px;margin:12px 0 0}.stage-fact{padding-top:17px;margin-top:21px}.stage-fact>span{font-size:10px}.stage-fact p{font-size:13px;margin:6px 0}.app>footer{margin-top:20px;font-size:10px;padding-top:15px}.modal{padding:28px 23px}.modal h2{font-size:24px}.win-modal{padding:29px 19px}.win-modal p{font-size:14px}.slot{border-radius:6px}.slot:after{font-size:13px}}
@media(max-width:360px){.app{padding-left:12px;padding-right:12px}h1{font-size:23px}.intro{padding-top:18px}.step{font-size:11px}.tray{gap:5px}.part-card span{font-size:9px}.status-line p{font-size:11px}}
.part-card span{font-size:14px;white-space:normal;line-height:1.35;text-align:center}.stage-description{font-size:15px}.finished-action{grid-column:1/-1;align-self:center}.step{font-size:15px}
@media(max-width:760px){.topbar{height:56px}.intro{padding:17px 0 14px}.intro .eyebrow{display:none}.intro h1{font-size:24px}.intro-copy{font-size:14px}.progress-ring{width:54px;height:54px}.steps{margin-bottom:13px}.step{font-size:14px;padding:8px 1px;gap:4px}.board{aspect-ratio:1000/600}.board .layer{top:-11.6667%;height:126.6667%}.board-heading{padding:5px 13px}.status-line{min-height:42px}.workspace{gap:15px}.stage-description{font-size:14px;margin:7px 0 12px}.part-card span{font-size:12px;line-height:1.25;min-height:15px}.part-card .part-index{min-height:0}.tray{min-height:108px}.part-card{height:110px;gap:6px}.part-card img{height:59px}.part-card.wide{height:112px}.part-card.wide img{max-height:67px}.touch-note{font-size:12px;margin-top:10px}.stage-fact p{font-size:14px}.board-stamp{display:none}.status-line p{font-size:13px}}
@media(max-width:760px) and (max-height:740px){.topbar{height:48px}.intro{padding:10px 0 9px}.intro h1{font-size:22px;margin-bottom:0}.intro-copy{display:none}.progress-ring{width:45px;height:45px}.progress-ring strong{font-size:21px}.steps{margin-bottom:10px}.step{padding:6px 1px;font-size:13px}.board-heading{padding:1px 12px}.reference-button{min-height:33px}.status-line{min-height:37px;padding:6px 12px}.status-line p{font-size:12px}.workspace{gap:12px}.stage-heading h2{font-size:20px}.stage-heading .eyebrow{margin-bottom:1px;font-size:8px}.stage-description{font-size:13px;line-height:1.55;margin:5px 0 9px}.part-card,.part-card.wide{height:99px}.part-card img{height:52px}.part-card.wide img{max-height:54px}.tray{min-height:99px}.touch-note{font-size:11px;margin:7px 0 0}.hint-button{min-height:36px}}
.part-art{height:80px;width:100%;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}.part-card .part-art img{height:var(--part-height,100%);max-height:100%;max-width:90%;width:auto}.part-card.wide .part-art{height:105px;align-items:center}.part-card.wide .part-art img{height:auto;max-height:100%;max-width:88%}
@media(max-width:760px){.part-art{height:59px}.part-card.wide .part-art{height:67px}}
@media(max-width:760px) and (max-height:740px){.part-art{height:52px}.part-card.wide .part-art{height:54px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}