@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Nunito:wght@500;600;700;800;900&display=swap');
:root{--ink:#33362f;--muted:#898b82;--paper:#f6f5ee;--purple:#7761b0;--light-purple:#f0ebf8;--line:#ebece4;--green:#718f72;--yellow:#f5c96a;--radius:23px}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px 'DM Sans',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0;background:none}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #a18acb;outline-offset:4px}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.header{height:104px;padding:0 4.5%;display:flex;align-items:center;border-bottom:1px solid #e5e6dd;gap:22px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);font:900 42px 'Nunito',sans-serif;letter-spacing:-2px}.brand-dot{color:var(--purple)}.brand-block{width:38px;height:40px;position:relative;transform:rotate(-8deg)}.brand-block i{position:absolute;width:23px;height:23px;border-radius:6px;box-shadow:inset -4px -4px #00000012}.brand-block i:nth-child(1){background:#a99acb;left:0;top:0}.brand-block i:nth-child(2){background:#f1c867;right:0;top:13px}.brand-block i:nth-child(3){background:#95b3a0;left:0;bottom:0}.brand-tag{font-size:11px;line-height:1.5;color:#8b8d82;padding-left:22px;border-left:1px solid #dedfd5}.top-nav{display:flex;margin:auto;gap:33px;height:100%;align-items:center}.nav-item{height:100%;position:relative;font-size:13px;color:#85877e;font-weight:600}.nav-item.active{color:var(--ink)}.nav-item.active:after{content:'';position:absolute;bottom:24px;left:0;right:0;height:3px;border-radius:5px;background:var(--purple)}.header-tools{display:flex;align-items:center;gap:12px}.test-badge{font-size:9px;letter-spacing:1.7px;font-weight:700;color:#838978;margin-right:13px}.round{height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:13px;background:#fff;border:1px solid #e7e8df;position:relative;font-size:23px;transition:background .15s,transform .15s}.round:hover:not(:disabled){background:var(--light-purple);transform:translateY(-1px)}.mute-line{position:absolute;width:26px;height:2px;transform:rotate(-45deg);background:#85877e;box-shadow:0 0 0 2px #fff}main{max-width:1610px;margin:auto;padding:36px 4.5% 0}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:29px;gap:20px}.eyebrow{font-size:9px;letter-spacing:1.8px;font-weight:700;color:#8c957a;display:flex;align-items:center;gap:7px;margin:0 0 13px}.eyebrow span{height:6px;width:6px;border-radius:50%;background:#a4b08b}h1{font:900 clamp(25px,2.4vw,37px)/1.25 'Nunito',sans-serif;letter-spacing:-1px;margin:0 0 9px}h1 span{font-weight:600}.intro-text{color:#929389;font-size:12px;margin:0}.mode-switch{display:flex;background:#eaeae0;padding:5px;border-radius:15px;flex-shrink:0;gap:4px}.mode-switch button{display:flex;align-items:center;gap:8px;padding:12px 15px;font-size:11px;font-weight:600;border-radius:11px;color:#85877a}.mode-switch svg{height:16px;width:16px}.mode-switch .selected{background:#fff;color:var(--purple);box-shadow:0 2px 7px #34362e08}.workspace{display:grid;grid-template-columns:211px minmax(320px,1fr) 270px;gap:19px;align-items:stretch}.panel{background:#fff;border:1px solid #e9eae1;border-radius:var(--radius)}.parts,.guide{padding:22px 19px;min-width:0}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:5px}h2{font:800 15px 'Nunito',sans-serif;margin:0}.tiny-tag{font-size:7px;color:#999c8e;letter-spacing:1px;font-weight:700;white-space:nowrap}.subtle{color:#a0a195;font-size:10px;margin:7px 0 20px}.parts-list{display:flex;flex-direction:column;gap:9px}.piece-card{display:flex;align-items:center;width:100%;min-height:76px;border:1.5px solid #eeeee7;border-radius:15px;text-align:left;background:#fdfdfa;padding:5px 9px 5px 4px;position:relative;transition:all .18s}.piece-card:hover{border-color:#c7bbdf;transform:translateY(-2px)}.piece-card.selected{border-color:#9b83c2;background:#f6f1fc;box-shadow:0 3px 12px #7761b00b}.piece-card canvas{width:65px;height:60px;flex-shrink:0}.piece-card .piece-name{font:800 11px 'Nunito',sans-serif;display:block}.piece-card .piece-meta{color:#a3a394;font-size:9px;display:block;margin-top:5px}.piece-key{position:absolute;right:7px;top:6px;color:#b9b7af;font-size:8px}.part-tip{display:flex;align-items:center;gap:10px;margin-top:22px;padding:15px 0 0;border-top:1px dashed #e8e7dc}.tip-face{display:inline-flex;background:#fff0c9;color:#ba9248;border-radius:50%;width:33px;height:33px;align-items:center;justify-content:center;font-size:24px}.part-tip p{margin:0;font-size:10px;line-height:1.6;color:#a2a08e}.play{display:flex;flex-direction:column;position:relative;min-width:0;overflow:hidden;background:#fbfcf7}.stage-top{display:flex;justify-content:space-between;align-items:center;padding:19px 22px 0;position:relative;z-index:1}.stage-label{display:flex;gap:7px;align-items:center;font-size:10px;font-weight:600;color:#858d76}.live-dot{height:6px;width:6px;border-radius:50%;background:#a4b58b}.soft-button{display:flex;align-items:center;gap:6px;color:#a2a794;font-size:9px}.soft-button svg{width:13px;height:13px}.soft-button:hover{color:var(--purple)}.canvas-wrap{position:relative;flex:1;min-height:424px;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#f1f5e8 0,transparent 70%)}#scene{display:block;width:100%;height:100%;position:absolute;inset:0;touch-action:none;cursor:grab}#scene:active{cursor:grabbing}.island-caption{pointer-events:none;position:absolute;bottom:19px;width:100%;text-align:center;font:600 12px 'Nunito',sans-serif;color:#9eaa87;letter-spacing:.1px}.welcome{position:absolute;top:18px;left:50%;transform:translateX(-50%);display:flex;gap:9px;align-items:center;font-size:10px;white-space:nowrap;background:#fff9e9;padding:9px 13px;border:1px solid #efe3c5;border-radius:11px;color:#a28b54;pointer-events:none;transition:opacity .3s}.welcome span{display:inline-flex;align-items:center;justify-content:center;border-radius:6px;width:18px;height:18px;background:#f4e4b9;font-size:9px}.welcome svg{width:13px;height:13px;transform:rotate(180deg)}.scene-spark{position:absolute;pointer-events:none;color:#c9d4b9;font-size:25px}.spark-one{right:13%;top:23%}.spark-two{left:13%;bottom:24%;font-size:20px;color:#d8ceac}.orientation{position:absolute;left:24px;bottom:22px;color:#c3c8b8;font-size:8px;text-align:center;pointer-events:none}.orientation i{display:block;border:1px solid #d4d9cb;width:25px;height:25px;border-radius:50%;margin-top:4px}.orientation i:after{content:'';display:block;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:10px solid #abb69d;position:relative;top:5px;left:7px;width:0}.stage-toolbar{margin:0 20px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e8eddf;padding:12px 0 10px;gap:5px}.tool-group,.view-controls{display:flex;align-items:center;gap:5px}.stage-toolbar .round{min-width:32px;height:33px;font-size:23px;border-radius:10px;background:#fff}.stage-toolbar svg{width:15px;height:15px}.tool-divider{height:18px;width:1px;background:#e2e6da;margin:0 4px}.tool-text{font-size:9px;color:#909783;margin-left:3px}.view-home{color:#8e9680;font-size:9px;padding:5px}.hint-button{display:flex;align-items:center;gap:4px;padding:8px;border-radius:10px;background:#f4efdf;color:#a28b49;font-size:9px;white-space:nowrap}.status{min-height:32px;text-align:center;font-size:10px;padding:0 18px 13px;color:#9a9e8e;transition:color .2s}.status.warn{color:#ba795d}.plan-number{color:#afabbb;font-size:10px;background:#f2f0f7;padding:5px 7px;border-radius:7px}.model-preview{height:181px;background:#f6f3ed;border-radius:15px;margin-top:18px;position:relative;overflow:hidden}.model-preview canvas{width:100%;height:153px;display:block}.model-label{position:absolute;bottom:13px;left:0;right:0;text-align:center;font-size:10px;font-weight:600;color:#918979;display:flex;gap:5px;align-items:center;justify-content:center}.model-label svg{width:13px;height:13px}.preview-expand{position:absolute;right:8px;top:8px;border-radius:6px;width:24px;height:24px;color:#b5afa2;background:#fff8;font-size:19px}.difficulty{display:flex;justify-content:space-between;align-items:center;margin:15px 0 25px;font-size:8px;color:#a6a396}.difficulty span:first-child{display:flex;align-items:center;gap:4px}.difficulty i{height:5px;width:5px;border-radius:50%;background:#99ad89}.progress-info{display:flex;justify-content:space-between;align-items:center}.progress-info h3{font:800 11px 'Nunito',sans-serif;margin:0}.progress-info>span{font-size:10px;color:#a9a698;white-space:nowrap}.progress-info b{color:var(--purple)}.progress-track{margin-top:12px;height:5px;background:#eeece4;border-radius:5px;overflow:hidden}.progress-track div{background:#ad9acb;width:0;height:100%;border-radius:5px;transition:width .4s}.steps{margin-top:22px;display:flex;flex-direction:column;gap:17px}.step{display:flex;align-items:center;gap:11px;color:#b0afa4}.step-number{height:24px;min-width:24px;border-radius:8px;background:#f5f4ee;display:flex;align-items:center;justify-content:center;font-size:10px}.step b{font-size:10px;display:block;font-weight:500}.step small{font-size:8px;display:block;margin-top:3px;color:#bdbbad}.step.active{color:#6f5b9c}.step.active .step-number{background:#eee8f7;color:#8b72b6}.step.done .step-number{background:#e8efe1;color:#849b71}.step.done b{color:#819273}.step svg{width:13px;height:13px}.guide-note{margin-top:23px;border-top:1px dashed #e9e6dd;padding-top:16px;display:flex;gap:9px;color:#b3aa8c;align-items:start}.guide-note svg{width:16px;height:16px}.guide-note p{font-size:9px;line-height:1.6;margin:0;color:#aaa798}.bottom-strip{display:flex;align-items:center;justify-content:space-between;margin-top:22px;padding:17px 0 22px;gap:20px}.bottom-strip>div:first-child{display:flex;gap:12px;align-items:center}.small-house{width:37px;height:37px;display:flex;align-items:center;justify-content:center;border:1px solid #e5e3d5;border-radius:13px;color:#9c9d85;font-size:25px}.bottom-strip b{font:800 11px 'Nunito',sans-serif}.bottom-strip small{font-size:9px;color:#a5a494;display:inline-block;margin-top:4px}.shortcuts{display:flex;gap:17px;flex-wrap:wrap;justify-content:flex-end}.shortcuts span{display:flex;align-items:center;gap:5px;font-size:8px;color:#a6a794}kbd{min-width:22px;padding:4px;font:9px 'DM Sans',sans-serif;background:#fff;border:1px solid #e4e5d9;border-radius:5px;text-align:center}footer{max-width:1610px;margin:0 auto;padding:16px 4.5% 22px;display:flex;justify-content:space-between;border-top:1px solid #e6e6db;font-size:8px;color:#b0b0a2;gap:15px}dialog{border:1px solid #e3dfd2;border-radius:26px;width:min(620px,92vw);padding:35px;color:var(--ink);box-shadow:0 30px 100px #292b3740;background:#fffdf7}dialog::backdrop{background:#34323f55;backdrop-filter:blur(4px)}.modal-close{position:absolute;right:15px;top:15px;z-index:2}.modal-close svg{width:17px;height:17px}#modal-content h2{font:900 27px 'Nunito',sans-serif;margin:5px 40px 12px 0}#modal-content>p{font-size:13px;color:#939384;line-height:1.7}.help-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:23px 0}.help-steps>div{padding:17px;background:#f3f0e7;border-radius:15px}.help-steps b{font:800 14px 'Nunito',sans-serif;display:block;margin-bottom:6px}.help-steps p{font-size:11px;line-height:1.6;color:#919180;margin:0}.primary-button{padding:13px 21px;background:var(--purple);color:white;border-radius:12px;font-weight:600;display:inline-flex;align-items:center;gap:8px;margin-top:15px}.secondary-button{margin-left:10px;padding:13px;color:#949582}.plan-large{height:250px;width:100%;background:#f2f3e9;border-radius:17px;display:block;margin:20px 0}.plan-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.plan-stages button{background:#f0ede5;border:2px solid transparent;border-radius:12px;padding:10px 3px;font-size:10px}.plan-stages button.active{border-color:#a995c6;background:#eee8f7;color:var(--purple)}.plan-stages span{display:block;font-size:8px;color:#a6a494;margin-top:6px}.success-symbol{font-size:55px;display:block;margin-bottom:12px}.celebrate{text-align:center}.celebrate h2{margin-right:0!important}.confetti-piece{position:fixed;z-index:100;top:-30px;pointer-events:none;border-radius:3px;animation:fall 2.6s ease-in forwards}@keyframes fall{to{transform:translate(var(--drift),105vh) rotate(650deg);opacity:0}}@media(min-width:1550px){.workspace{grid-template-columns:225px minmax(400px,1fr) 290px}.canvas-wrap{min-height:480px}.piece-card{min-height:84px}}@media(max-width:1180px){.workspace{grid-template-columns:180px minmax(320px,1fr) 230px;gap:12px}.parts,.guide{padding:19px 13px}.piece-card canvas{width:54px}.piece-card .piece-name{font-size:10px}.tool-text{display:none}.header{gap:15px}.header-tools{gap:8px}.test-badge{display:none}.brand-tag{padding-left:15px}.intro{gap:10px}.mode-switch button{padding:11px 10px}.shortcuts{gap:9px}}@media(max-width:960px){.header{height:85px}.brand-tag{display:none}.workspace{grid-template-columns:155px minmax(300px,1fr)}.guide{grid-column:1 / -1;display:grid;grid-template-columns:210px 1fr;column-gap:25px;position:relative}.guide>.panel-heading{grid-column:1;grid-row:1}.model-preview{grid-column:1;grid-row:2 / 7;margin-top:10px}.difficulty{grid-column:1;margin:10px 0 0}.progress-info{grid-column:2;grid-row:1}.progress-track{grid-column:2;grid-row:2;margin-top:12px;height:6px}.steps{grid-column:2;grid-row:3 / 6;gap:14px;margin-top:15px}.guide-note{grid-column:2;grid-row:6 / 8;margin-top:14px;padding-top:11px}.piece-card{flex-direction:column;justify-content:center;gap:0;min-height:85px;padding:4px}.piece-card canvas{height:48px;width:65px}.piece-card .piece-meta{display:inline;margin:0 0 0 5px;font-size:8px}.piece-card .piece-name{display:inline}.piece-card>span{padding-bottom:5px}.subtle{font-size:9px}.panel-heading h2{font-size:13px}.tiny-tag{display:none}.intro{align-items:start}.mode-switch{margin-top:15px}.bottom-strip{align-items:start}.shortcuts{max-width:290px}.model-preview{height:180px}}@media(max-width:640px){.header{height:76px;padding:0 5%;gap:12px}.brand{font-size:34px}.brand-block{transform:scale(.8) rotate(-8deg);width:34px}.top-nav{gap:16px;margin-left:auto;margin-right:5px}.nav-item{font-size:10px}.nav-item.active:after{bottom:14px}.header-tools{gap:5px}.header-tools .round{min-width:31px;height:32px;border-radius:11px}.header-tools svg{width:17px;height:17px}main{padding:26px 4% 0}.intro{display:block;margin-bottom:17px}.eyebrow{font-size:8px;margin-bottom:10px}h1{font-size:27px;max-width:350px}h1 span{display:block}.intro-text{font-size:10px;max-width:290px;line-height:1.6}.mode-switch{display:inline-flex;margin-top:18px}.mode-switch button{font-size:10px;padding:10px 15px}.workspace{display:flex;flex-direction:column;gap:12px}.play{order:0}.parts{order:1;padding:15px 12px}.guide{order:2;grid-template-columns:135px 1fr;column-gap:14px;padding:17px 14px}.parts .panel-heading{margin-bottom:12px}.parts .subtle,.part-tip{display:none}.parts-list{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.piece-card{min-height:90px;border-radius:12px;padding:2px 0}.piece-card canvas{width:100%;height:45px}.piece-card .piece-name{display:block;font-size:8px;text-align:center}.piece-card .piece-meta{display:block;margin:4px 0 0;text-align:center;font-size:7px}.piece-key{display:none}.canvas-wrap{min-height:350px}.stage-top{padding:16px 16px 0}.stage-toolbar{margin:0 13px}.welcome{font-size:9px;padding:7px 10px;top:17px}.model-preview{height:160px}.model-preview canvas{height:130px}.model-label{font-size:8px;bottom:12px}.model-label svg{width:10px;height:10px}.difficulty{font-size:7px;gap:4px;flex-wrap:wrap;justify-content:flex-start}.progress-info h3{font-size:9px;max-width:110px}.progress-info>span{font-size:9px}.steps{gap:13px}.step{gap:8px}.step b{font-size:9px}.step small{font-size:7px}.guide-note p{font-size:8px}.bottom-strip{display:block;margin-top:13px;padding-bottom:18px}.shortcuts{display:none}footer{font-size:7px;line-height:1.6;padding:12px 5% 18px;flex-direction:column;gap:4px}.help-steps{gap:8px}.help-steps>div{padding:12px}.help-steps b{font-size:12px}.help-steps p{font-size:10px}dialog{padding:26px 22px}.plan-stages button{font-size:8px}.tool-text{display:none}.status{font-size:9px}.plan-large{height:220px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Comfortable reading and a compact workbench on shorter desktop screens. */
.piece-card .piece-name{font-size:12px}.piece-card .piece-meta{font-size:10px}.status{font-size:12px}.stage-label{font-size:12px}.hint-button,.view-home,.tool-text{font-size:11px}.soft-button{font-size:11px}.step b{font-size:11px}.step small{font-size:9px}
@media(min-width:961px) and (max-height:850px){.header{height:78px}main{padding-top:23px}.intro{margin-bottom:22px}.parts,.guide{padding:18px 15px}.piece-card{min-height:63px}.piece-card canvas{height:50px}.parts-list{gap:7px}.part-tip{display:none}.canvas-wrap{min-height:330px}.model-preview{height:154px;margin-top:13px}.model-preview canvas{height:132px}.model-label{bottom:9px}.difficulty{margin:12px 0 18px}.steps{gap:13px;margin-top:17px}.guide-note{margin-top:16px;padding-top:12px}.stage-toolbar{padding-top:9px;padding-bottom:8px}.bottom-strip{margin-top:8px;padding-top:12px;padding-bottom:15px}.subtle{margin-bottom:14px}.status{font-size:11px}h1{font-size:29px}.eyebrow{margin-bottom:10px}}
@media(max-width:1180px){.piece-card .piece-name{font-size:11px}}
@media(max-width:960px){.piece-card .piece-name{font-size:10px}.piece-card .piece-meta{font-size:9px}}
@media(max-width:640px){.parts{order:0;position:sticky;top:0;z-index:3;box-shadow:0 5px 20px #33362f06}.play{order:1}.piece-card .piece-name{font-size:9px}.piece-card .piece-meta{font-size:8px}.status{font-size:11px}.stage-label{font-size:11px}.step b{font-size:10px}.step small{font-size:8px}.parts .panel-heading{margin-bottom:8px}.piece-card{min-height:82px}.piece-card canvas{height:42px}}