:root{color-scheme:light;--ink:#172a28;--muted:#61716b;--paper:#f6f5ee;--line:#dcded4;--green:#215c47;--lime:#d5ec93;--radius:20px}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:white;border-radius:10px;min-height:44px;padding:9px 16px}button:hover{background:#edf1e6}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #bd7926;outline-offset:4px}a{color:inherit}.topbar{max-width:1280px;padding:23px 40px;margin:auto;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-size:13px;font-weight:800;letter-spacing:2px;display:flex;align-items:center;gap:12px}.brand span{display:grid;place-items:center;background:var(--ink);color:var(--lime);border-radius:50%;width:34px;height:34px;font-size:24px}.edition{font-size:11px;letter-spacing:2px;color:var(--muted)}main{max-width:1200px;margin:auto;padding:40px 32px 24px}.intro{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:38px}.eyebrow{font-size:11px;letter-spacing:1.8px;font-weight:750;color:var(--green);margin:0}h1{font-family:Georgia,serif;font-size:clamp(40px,5vw,68px);letter-spacing:-2.5px;line-height:1.12;font-weight:500;margin:13px 0}h1 span{color:#bc763e}.subtitle{color:var(--muted);margin:12px 0 0}.materials{display:flex;flex-direction:column;gap:7px;font-size:13px;white-space:nowrap;border-left:1px solid var(--line);padding-left:28px}.workspace{display:grid;grid-template-columns:230px minmax(0,1fr);gap:32px;align-items:start}aside{position:sticky;top:24px}.rail-heading{font-size:10px;letter-spacing:1.4px;font-weight:750;margin:0 8px 16px;display:flex;justify-content:space-between}#steps{display:flex;flex-direction:column;gap:4px}#steps button{border:0;background:transparent;text-align:left;display:flex;align-items:center;gap:12px;padding:8px;font-size:13px;line-height:1.3}#steps button:hover{background:#eaece3}#steps .step-dot{flex:none;width:27px;height:27px;display:grid;place-items:center;border:1px solid #cfd4c8;border-radius:50%;font-size:11px}#steps button[aria-current="step"]{background:#e4ebd8;font-weight:700;color:var(--green)}#steps button[aria-current="step"] .step-dot{background:var(--green);color:white;border-color:var(--green)}#steps .done .step-dot{background:#e3ebd4;border-color:#c1d5a7}.text-button{background:transparent;border:0;font-size:12px;padding:6px 10px;min-height:40px}.saved{font-size:11px;color:var(--muted);margin:0 10px}#restart{margin-top:18px}.lesson{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 45px #24352c06}.progress-track{height:5px;background:#edf0e7}#progress{height:100%;background:#98b964;transition:width .3s}.lesson-top{display:flex;justify-content:space-between;align-items:center;padding:17px 30px 0}.step-heading{padding:8px 30px 22px}.step-number{font-size:11px;color:var(--muted);margin:0 0 5px}h2{font-family:Georgia,serif;font-size:32px;line-height:1.15;font-weight:500;letter-spacing:-.6px;margin:0 0 13px}#instruction{margin:0;max-width:650px;font-size:16px;line-height:1.75}figure{margin:0 22px 22px;background:#f2f3ef;border:1px solid #e7e9e1;border-radius:12px;overflow:hidden}.photo-tools{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:8px 12px}#photo-label{font-size:9px;letter-spacing:1.3px;font-weight:650;color:var(--muted)}#panels{display:flex;gap:3px}#panels button{border:0;background:transparent;font-size:11px;min-height:36px;padding:5px 9px}#panels button[aria-pressed="true"]{background:white;box-shadow:0 1px 4px #0001}.photo{display:block;width:100%;border:0;padding:0;border-radius:0;position:relative;overflow:hidden;background:#e9ebeb;aspect-ratio:2}.photo img{display:block;width:100%;height:100%;object-fit:contain}.photo.detail{aspect-ratio:1.3}.photo.detail img{width:200%;max-width:none;height:auto;position:absolute;top:50%;transform:translateY(-50%)}.photo.right img{left:-100%}.photo.left img{left:0}.zoom-label{position:absolute;bottom:10px;right:10px;background:#fffE;border:1px solid #d5d9d3;border-radius:6px;padding:3px 8px;font-size:10px}figcaption{font-size:12px;color:var(--muted);padding:10px 13px;line-height:1.5}.checkpoint{display:flex;gap:13px;background:#edf3e3;margin:0 30px 16px;padding:16px;border-radius:10px}.checkpoint>span{display:grid;place-items:center;background:#d9e7c6;border-radius:50%;width:25px;height:25px;flex:none}.checkpoint strong{font-size:12px}.checkpoint p{font-size:13px;margin:3px 0 0;color:#3c5546}details{margin:0 30px 22px;font-size:13px}summary{cursor:pointer;padding:8px 0;font-weight:600}details p{margin:5px 0 0;color:var(--muted)}.navigation{border-top:1px solid var(--line);padding:20px 30px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fafbf7}.primary{background:var(--green);color:white;border-color:var(--green);font-weight:650}.primary:hover{background:#194b39}#nav-count{font-size:11px;color:var(--muted)}footer{font-size:11px;color:var(--muted);margin:28px 0 0;padding-left:262px;line-height:1.8}.keyboard{display:block;margin-top:12px;color:#788477}#celebration{text-align:center;margin:16px 30px 28px;padding:25px;background:#172a28;color:#e8f5cc;border-radius:12px}#celebration>span{font-size:48px}#celebration h3{font-family:Georgia,serif;font-size:29px;margin:4px 0}#celebration p{font-size:14px}dialog{max-width:1100px;width:95vw;max-height:92dvh;padding:18px;border:0;border-radius:15px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#10221edb;backdrop-filter:blur(5px)}.viewer-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.viewer-top p{font-weight:650;margin:0}.viewer-hint{font-size:12px;color:var(--muted)}.viewer-image{overflow:auto}.viewer-image img{display:block;width:100%;min-width:700px}body:has(dialog[open]){overflow:hidden}[hidden]{display:none!important}
@media(min-width:1500px){main{padding-top:55px}.intro{margin-bottom:45px}}
@media(max-width:800px){.topbar{padding:18px 22px}main{padding:27px 18px}.intro{align-items:start;flex-direction:column;gap:18px;margin-bottom:24px}.materials{border:0;padding:0;flex-direction:row;flex-wrap:wrap;gap:8px 18px;font-size:11px}.workspace{display:block}aside{position:static;margin-bottom:18px}.rail-heading{margin:0 0 8px}#steps{flex-direction:row;overflow-x:auto;padding:2px 0 8px;scrollbar-width:thin}#steps button{flex:none;padding:6px;min-height:40px}#steps .step-name{display:none}#steps button[aria-current="step"] .step-name{display:inline;padding-right:7px}#restart{margin:0;min-height:30px;padding:0 4px}.saved{display:inline;font-size:10px}.lesson-top{padding:12px 20px 0}.step-heading{padding:10px 20px 20px}h2{font-size:29px}#instruction{font-size:15px}figure{margin:0 12px 18px}.checkpoint{margin:0 20px 13px}details{margin:0 20px 18px}.navigation{padding:16px 20px;position:sticky;bottom:0}.lesson{overflow:clip}footer{padding:0}.edition{font-size:9px;letter-spacing:1px}.eyebrow{font-size:9px}.photo-tools{padding:6px 8px}#photo-label{font-size:8px;letter-spacing:.5px}#panels button{font-size:10px;padding:4px 6px}#nav-count{display:none}.subtitle{font-size:14px}.photo.detail{aspect-ratio:1}.brand{font-size:11px;letter-spacing:1.3px}#celebration{margin:15px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.photo.detail{aspect-ratio:1}
@media(max-width:800px){.navigation{position:static}}
.animation-lab{margin:0 22px 22px;border:1px solid #d7e1ce;border-radius:12px;overflow:hidden;background:#f7faf3}.animation-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 8px}.schematic-label{font-size:10px;color:var(--muted)}#action-tabs{display:flex;gap:6px;padding:6px 18px;flex-wrap:wrap}#action-tabs button{font-size:12px;padding:5px 10px;min-height:38px;background:transparent;border-color:#d7e1ce}#action-tabs button[aria-pressed="true"]{background:var(--green);color:white;border-color:var(--green)}#animation-instruction{font-size:14px;margin:8px 18px;min-height:45px;line-height:1.6}.diagram-wrap{position:relative;max-width:600px;margin:auto}#fold-diagram{display:block;width:100%;max-height:390px;touch-action:pan-y}.diagram-hint{position:absolute;bottom:8px;left:0;width:100%;text-align:center;font-size:11px;color:var(--muted)}.animation-controls{display:flex;align-items:center;gap:16px;padding:15px 18px;background:#fff;border-top:1px solid #e1e7db}#play-fold{font-size:12px;min-width:112px;padding:8px 10px}.scrub{flex:1;min-width:0}.scrub label{display:flex;justify-content:space-between;font-size:10px;font-weight:650;color:var(--muted)}#fold-progress{display:block;width:100%;margin:4px 0 0;min-height:30px;accent-color:var(--green);cursor:ew-resize;touch-action:pan-y}#replay-fold{font-size:23px;padding:3px 11px}.animation-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 18px;font-size:10px}.animation-bottom>span{display:flex;align-items:center;gap:5px}.animation-bottom i{display:inline-block;width:10px;height:10px;margin-left:6px;border-radius:2px}.legend-paper{background:#527f72}.legend-moving{background:#eac56e}.animation-bottom .legend-crease{border-top:2px dashed #254f43;height:0;width:15px}.schematic-note{font-size:10px;color:var(--muted);margin:0;padding:0 18px 14px;line-height:1.6}
@media(max-width:800px){.animation-lab{margin:0 12px 18px}.animation-heading{padding:13px 12px 6px}.schematic-label{font-size:8px}#action-tabs{padding:5px 12px;gap:5px}#action-tabs button{font-size:11px;padding:5px 8px}#animation-instruction{margin:8px 12px;font-size:13px}#fold-diagram{max-height:300px}.animation-controls{padding:12px;gap:10px}#play-fold{min-width:98px;font-size:11px}.animation-bottom{padding:5px 10px;flex-wrap:wrap}.schematic-note{padding:0 12px 12px}.diagram-hint{font-size:9px}#replay-fold{padding:3px 9px}.animation-bottom .text-button{font-size:11px}}
.view-mode{display:flex;background:#e5ecdF;border-radius:8px;padding:3px;gap:2px}.view-mode button{font-size:11px;min-height:30px;padding:3px 12px;border:0;background:transparent}.view-mode button[aria-pressed="true"]{background:white;box-shadow:0 1px 4px #0001}.camera-presets{display:flex;gap:5px;padding:5px 18px;flex-wrap:wrap}.camera-presets button{font-size:10px;min-height:34px;padding:4px 10px;background:transparent}.camera-presets button[aria-pressed="true"]{background:#e2ecd6;border-color:#b6cda2}.camera-presets #reset-camera{margin-left:auto}#three-viewport{height:400px;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#eff4e9,#f7faf3 70%);cursor:grab}#three-viewport:active{cursor:grabbing}#three-viewport canvas{display:block;width:100%;height:100%;touch-action:none}#three-status{position:absolute;inset:40% 12px auto;text-align:center;font-size:13px;color:var(--muted)}.orbit-help{text-align:center;font-size:11px;color:var(--muted);padding:0 10px 12px}.layer-control{display:flex;gap:16px;align-items:center;padding:8px 18px 12px}.layer-control label{font-size:11px;font-weight:600;white-space:nowrap}.layer-control label span{font-size:9px;display:block;color:var(--muted);font-weight:400}.layer-control input{width:100%;min-width:0;accent-color:var(--green);min-height:28px;cursor:ew-resize}
@media(max-width:800px){#three-viewport{height:320px}.camera-presets{padding:5px 12px;gap:4px}.camera-presets button{font-size:9px;padding:4px 7px}.orbit-help{font-size:9px}.layer-control{padding:8px 12px 12px}.view-mode button{min-height:30px}}
#film-panel{position:relative;background:#e7e4dc;aspect-ratio:4/3}#fold-film{display:block;width:100%;height:100%;object-fit:contain}.film-badge{position:absolute;bottom:12px;left:14px;font-size:8px;font-weight:650;letter-spacing:1.8px;color:#43504a;background:#f6f5eee0;padding:5px 9px;border-radius:4px;pointer-events:none}#film-status{position:absolute;bottom:35px;left:15px;right:15px;padding:10px;background:#fffE;border-radius:8px;font-size:12px}.speed-control{display:flex;align-items:center;gap:8px;color:var(--muted)}.speed-control select{border:1px solid var(--line);border-radius:6px;background:white;color:var(--ink);font:inherit;min-height:34px;padding:3px 8px}.studio-links{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 18px 10px;flex-wrap:wrap}.studio-links a{font-size:10px;color:var(--muted)}.studio-links button{padding-left:0}.animation-lab .schematic-note{border-top:1px solid #e3e8dd;padding-top:10px}#full-film{display:block;width:100%;max-height:73dvh;margin-top:16px}.view-mode button{white-space:nowrap}#three-viewport{height:470px}.animation-lab{background:#f8faf4}#action-tabs button{font-size:11px}#animation-instruction{min-height:0;margin-bottom:14px}
@media(max-width:800px){.animation-heading .eyebrow{font-size:8px;letter-spacing:1.2px}.view-mode button{padding:3px 8px;font-size:10px}.studio-links{padding:2px 12px 10px;gap:0}.studio-links button{font-size:11px}.film-badge{font-size:6px;bottom:8px;left:8px;letter-spacing:1px}#three-viewport{height:350px}#action-tabs button{font-size:10px}}