:root{color-scheme:dark;--paper:#eae7dc;--muted:#9baba6;--gold:#d3bb8c;--mint:#00b4c9;--line:#ffffff24}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:#0c1111;color:var(--paper);font-family:Arial,'Noto Sans KR',sans-serif;font-size:16px;line-height:1.85}button,input{font:inherit}a{color:inherit;text-underline-offset:5px}button{min-height:46px;border:1px solid var(--line);border-radius:26px;padding:10px 23px;color:var(--paper);background:#17201d;cursor:pointer}button:hover,button[aria-pressed=true]{border-color:var(--gold);background:#28342c}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:5px}.primary{background:var(--gold);color:#151b18;border-color:var(--gold)}input[type=range]{accent-color:var(--gold);cursor:pointer;min-width:0;max-width:100%}.skip{position:absolute;top:-100px;left:20px;z-index:1000}.skip:focus{top:75px;background:#111;padding:10px}main{max-width:1680px;margin:auto}.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--gold);text-transform:uppercase}h1,h2,h3,blockquote{font-family:'Noto Serif KR',Georgia,serif;font-weight:400;line-height:1.35;letter-spacing:-.055em}h1{font-size:clamp(45px,4.3vw,76px);margin:25px 0}h2{font-size:clamp(38px,4vw,64px);margin:20px 0 35px}h3{font-size:clamp(32px,3.1vw,48px);margin:15px 0 26px}p{overflow-wrap:anywhere}.hero{position:relative;padding:40px 4% 0;min-height:790px}.invitation{position:absolute;top:60px;left:4%;width:32%;z-index:2;pointer-events:none}.hero-stage{height:clamp(360px,60vh,580px);position:relative}.hero-stage canvas{width:100%;height:100%;display:block;touch-action:pan-y}.hero-note{font-size:12px;color:var(--muted);margin-top:28px;display:flex;gap:9px;align-items:center}.signal-dot{width:5px;height:5px;background:var(--mint);border-radius:50%;flex-shrink:0}.model-note{position:absolute;bottom:0;right:0;font-size:10px;letter-spacing:.05em;color:var(--muted)}.controls,.experiment-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:20px 0}.controls{border-top:1px solid var(--line)}label{display:grid;font-size:12px;color:var(--muted);gap:2px}label output{color:var(--gold)}.controls label{margin-left:15px;min-width:130px}.transport{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:11px}.next{border-bottom:1px solid var(--line);padding:25px 0 35px;text-align:right;font-size:13px}.next a{text-decoration:none}.next span{color:var(--gold);margin-left:20px}.opening{max-width:950px;margin:100px auto;padding:20px 6%;text-align:center}blockquote{font-size:clamp(27px,3vw,42px);margin:30px 0}.quote-author{font-size:13px;color:var(--gold)}details{color:var(--muted);font-size:13px;border-top:1px solid var(--line);padding:16px 0;margin-top:30px}summary{cursor:pointer;font-size:12px}details a{color:var(--gold)}.inside,.making{padding:70px 6%;border-top:1px solid var(--line)}.lead{max-width:740px;color:var(--muted);font-size:18px}.record{font-size:12px;border-left:2px solid var(--gold);padding:15px 20px;background:#17201a;margin:30px 0;color:var(--gold)}.chapter-links{display:flex;gap:10px 30px;flex-wrap:wrap;padding:15px 0;font-size:12px}.chapter-links a{color:var(--gold)}.chapter{padding:75px 0 35px;scroll-margin-top:80px;border-bottom:1px solid var(--line)}.chapter>p:not(.eyebrow):not(.reading){max-width:760px;color:var(--muted)}.diagram{height:330px;background:radial-gradient(ellipse,#18251d,#0c1111);margin-top:35px;border:1px solid #ffffff0b;border-radius:3px}.diagram canvas{display:block;width:100%;height:100%}.experiment-tools label{min-width:180px;flex:1;max-width:360px}.reading{font-size:13px;color:var(--gold);min-height:25px}.speed-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin:40px 0}.speed-facts>div{border-top:1px solid var(--line);padding-top:20px}.speed-facts small{display:block;color:var(--muted);font-size:12px}.speed-facts strong{font-size:clamp(24px,4vw,45px);font-family:Georgia,serif;font-weight:400;color:var(--gold)}.motor-stage{height:480px}.motor-stage canvas{width:100%;height:100%;touch-action:pan-y;display:block}.making{max-width:1100px;margin:auto}.making>p:not(.eyebrow){color:var(--muted)}footer{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;padding:60px 6%;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}footer b{display:block;color:var(--paper);font-size:28px}footer b span{font-size:15px;font-weight:400;margin-left:10px}footer small{display:block;font-size:11px}footer b small{display:inline-flex;align-items:center;gap:5px;margin-left:12px;font-weight:400}footer p{margin:10px 0}body .visual-stories-section{max-width:none}noscript{display:block;padding:20px}.render-error{position:absolute;bottom:70px;right:20px;max-width:300px;color:var(--gold);font-size:13px}
@media(max-width:999px){.hero{padding-top:20px;min-height:0}.invitation{position:relative;top:auto;left:auto;width:auto;pointer-events:auto}h1 br{display:none}.hero-stage{height:460px}.hero-note{margin-top:16px}.controls label{margin-left:0}.model-note{right:4px}.opening{margin:70px auto}.inside,.making{padding-top:50px}.chapter{padding-top:55px}}
@media(max-width:600px){body{font-size:15px}.hero{padding-inline:6%}.hero-stage{height:340px;margin-top:-15px}.eyebrow{font-size:10px}h1{font-size:42px;max-width:300px;margin:18px 0}h1 br{display:block}.hero-note{margin-top:12px}.controls{gap:9px}.controls button{padding:9px 14px;font-size:12px}.controls label{width:calc(50% - 8px);min-width:0;margin:10px 0 0}.transport{font-size:10px}.transport span:last-child{width:100%}.next{text-align:left;font-size:12px}.next span{display:block;margin:5px 0 0}.opening{margin:50px auto}.inside,.making{padding-inline:6%}.lead{font-size:16px}.diagram{height:280px}.experiment-tools{gap:12px}.experiment-tools label{min-width:40%;max-width:none}.speed-facts{gap:12px}.speed-facts strong{font-size:23px}.speed-facts small{font-size:10px}.motor-stage{height:330px}.chapter-links{gap:10px 22px}footer{padding:40px 6%}.model-note{font-size:9px}.chapter{scroll-margin-top:75px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.related a{display:block;text-decoration:none;border-top:1px solid var(--line);padding:25px 0}.related small{color:var(--gold);font-size:11px}.related h3{font-family:Arial,"Malgun Gothic",sans-serif;font-size:24px;line-height:1.5;letter-spacing:-.04em;margin:15px 0}.related p{color:var(--muted);font-size:14px}.related span{font-size:12px;color:var(--gold)}

button:disabled{opacity:.35;cursor:default}input[type=range]{min-height:32px}

select{font:inherit;background:#17201d;color:var(--paper);border:1px solid var(--line);border-radius:7px;padding:9px 15px;min-height:44px}#pedal{touch-action:none;user-select:none;-webkit-user-select:none}#pedal[aria-pressed=true]{background:#28473c;border-color:var(--mint)}.key-hint{font-size:12px;color:var(--muted)}.study-stage{height:520px;position:relative;background:radial-gradient(ellipse,#1c2b27,#0c1111)}.study-stage canvas{display:block;width:100%;height:100%;touch-action:pan-y}.thread-key{position:absolute;bottom:10px;left:15px;display:flex;gap:20px;font-size:11px}.thread-key span:first-child{color:var(--mint)}.thread-key span:last-child{color:var(--gold)}.phase-buttons{display:flex;gap:8px;flex-wrap:wrap}.phase-buttons button{font-size:11px;padding:7px 16px;min-height:44px}button:active{transform:translateY(1px)}.hero-note{max-width:320px;line-height:1.8}.controls label{min-width:90px}button:disabled{opacity:.4;cursor:default}.model-note{pointer-events:none}.controls{position:relative;z-index:3}.hero{min-height:0}.controls button{font-size:13px}.experiment-tools input[type=range]{min-width:90px}body{word-break:keep-all}p{overflow-wrap:break-word}h1,h2,h3{word-break:keep-all}.diagram{height:340px}.phase-buttons button[aria-pressed=true]{background:#1e3832;border-color:var(--mint)}
@media(max-width:600px){.study-stage{height:350px}.controls{gap:8px}.controls button{font-size:12px}.controls label{width:calc(50% - 8px);min-width:0}.diagram{height:310px}.hero-stage{height:300px}.key-hint{font-size:11px}.hero-note{font-size:11px}h1{margin:12px 0}.invitation p:not(.eyebrow){margin:10px 0}.experiment-tools label{min-width:100%}.chapter-links{font-size:11px}.phase-buttons button{flex:1 0 28%;padding:7px 5px}#sound{font-size:11px;padding:7px 13px}.transport span:last-child{font-size:10px}}

.part-label{position:absolute;top:0;left:0;pointer-events:none;color:#c5d2c8;background:#0c1111c9;border-left:1px solid #00b4c9;padding:3px 7px;font-size:10px;line-height:1.5;white-space:nowrap}.part-label[hidden]{display:none}

#pedal{-webkit-touch-callout:none}

.hero-stage canvas,.study-stage canvas{height:calc(100% - 64px)}
.hero-stage>.inspect-controls,.study-stage>.inspect-controls{margin-top:8px;position:relative;z-index:4}
.study-stage .thread-key{bottom:70px}.hero-stage .model-note{bottom:65px}
@media(max-width:600px){.hero-stage{height:370px}.study-stage{height:420px}.hero-stage>.inspect-controls,.study-stage>.inspect-controls{font-size:10px}.diagram{height:340px}}

.sewing-focus{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 0}.sewing-focus button{min-height:44px;font-size:12px;padding:8px 16px}.sewing-focus button[aria-pressed=true]{color:#d9efe5;border-color:#00b4c9;background:#17312c}@media(max-width:600px){.sewing-focus{gap:6px}.sewing-focus button{font-size:11px;padding:8px 11px}}

.inspect-controls{gap:6px}.inspect-controls button:last-child{border-color:#91a594;color:#e6dfcf}.hero-stage>.inspect-controls{min-height:52px;align-content:start}.diagram canvas,.study-stage canvas,.motor-stage canvas,.hero-stage canvas{color-scheme:only light}.vns-carousel,.vns-carousel *{color-scheme:only light}.vns-carousel-copy,.vns-carousel-copy strong,.vns-carousel-copy small,.vns-carousel-copy i{background:transparent}@media(max-width:600px){.hero-stage{height:430px}.hero-stage canvas{height:calc(100% - 100px)}.hero-stage>.inspect-controls button{font-size:10px;padding:7px 10px;min-height:40px}.hero-stage .model-note{bottom:104px}}

@media(min-width:1000px){.hero>.hero-stage{margin-left:34%;width:66%;height:540px}.invitation{width:30%;top:58px}.hero-stage>.inspect-controls{font-size:11px}.hero-stage .model-note{max-width:70%;font-size:9px}}

.primary:hover,.primary[aria-pressed="true"]{color:var(--paper)}