@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Sans:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap');
:root{--paper:#e9e9e2;--ink:#161b1d;--red:#e4372d;--muted:#8b918c}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#e8e9e3;color:var(--ink);font-family:'DM Sans','Noto Sans SC',sans-serif}button{font:inherit;cursor:pointer}header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 4.2%;border-bottom:1px solid #bdc0b9;position:relative;z-index:3}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:'Barlow Condensed',sans-serif;font-size:17px;font-weight:800;line-height:.8;letter-spacing:.08em}.brand small{font:700 7px 'DM Sans';letter-spacing:.19em}.mark{font-size:35px;color:var(--red)}.header-mid,.text-btn,.overline,.eyebrow,.view-label,.stage-meta,.side-index,.drag-hint,.control-bottom,.ticks,.counter small{font-size:10px;font-weight:700;letter-spacing:.14em}.header-mid{color:#7b817c}.header-mid span{padding:0 8px;color:var(--red)}.text-btn{border:0;background:none}.text-btn span{font-size:16px;margin-left:8px}.stage{min-height:820px;height:calc(100vh - 78px);max-height:1050px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 55% 42%,#f7f8f1 0%,#e7e9e2 52%,#d7dbd5 100%)}.intro{position:absolute;top:8%;left:5%;z-index:2;pointer-events:none}.eyebrow{color:#6d756e}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:8px}h1,h2{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:800;line-height:.9;letter-spacing:-.035em;margin:21px 0}h1{font-size:clamp(46px,6.1vw,98px)}h1 em,h2 em{font-style:normal;color:var(--red)}.intro p{font-size:12px;line-height:1.9;color:#747c76}.stage-meta{position:absolute;right:5%;top:9%;z-index:2;text-align:right;line-height:1.8}.stage-meta span{display:block}.stage-meta span+span{color:#9ba29b;letter-spacing:.07em}.canvas-wrap{position:absolute;inset:0;touch-action:none}canvas{width:100%;height:100%;display:block}.drag-hint{position:absolute;top:70%;left:5%;color:#89918b}.drag-hint span{font-size:16px;margin-right:8px}.view-label{position:absolute;right:5%;top:70%;color:#8c948e}.view-label span{color:var(--red);margin:0 4px 0 12px}.side-index{position:absolute;right:2%;top:40%;display:flex;align-items:center;gap:10px;writing-mode:vertical-rl;color:#929a93;font-size:9px}.side-index div{height:55px;width:1px;background:#abb1aa}.axis{position:absolute;left:5%;top:62%;color:#9aa39c;font:700 9px sans-serif}.axis i{display:block;height:24px;border-left:1px solid #9aa39c;margin-left:3px}.axis b{border-top:1px solid #9aa39c;padding-left:26px}.control{position:absolute;bottom:3%;left:5%;right:5%;background:#191e20;color:#f1f2ec;padding:22px 27px 15px;z-index:2;box-shadow:0 12px 35px #737d7344}.control-top{display:flex;align-items:center;gap:25px}.overline{color:#9aa49d;font-size:9px}.state{font-size:22px;font-weight:700;margin-top:8px}.state small{font:700 10px 'Barlow Condensed',sans-serif;color:#969f99;letter-spacing:.13em;margin-left:12px}.play{width:48px;height:48px;border:1px solid #727b76;border-radius:50%;background:transparent;color:white;margin-left:auto;padding-left:5px;font-size:13px}.play:hover{background:var(--red);border-color:var(--red)}.counter{display:flex;align-items:center;gap:5px;font-family:'Barlow Condensed',sans-serif}.counter b{font-size:37px;line-height:1}.counter span{font-size:8px;line-height:1.4;color:#8f9992;letter-spacing:.12em}input[type=range]{width:100%;height:3px;appearance:none;background:linear-gradient(to right,var(--red) 0%,#59615c 0%);margin:23px 0 0;display:block;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;background:var(--red);border:3px solid #f3f3ed;border-radius:50%}.ticks{display:flex;justify-content:space-between;margin-top:12px}.ticks button{background:none;border:0;color:#858e88;padding:0;font-size:9px;letter-spacing:.08em}.ticks span{color:#cdd2cc;margin-left:7px}.control-bottom{display:flex;justify-content:space-between;border-top:1px solid #3a423e;margin-top:18px;padding-top:13px;color:#9da7a0;letter-spacing:.06em}.control-bottom button{background:none;color:#d6dcd5;border:0;font-size:10px;margin-left:22px}.story{padding:110px 5% 35px;background:#f0f1eb}.story-head{display:flex;justify-content:space-between;align-items:end;gap:40px}.story-head h2,.modal h2{font-family:'Noto Sans SC',sans-serif;font-size:clamp(34px,4.5vw,65px);line-height:1.2;letter-spacing:-.05em}.story-head p{width:320px;font-size:13px;line-height:2;color:#727b74}.notes{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #b9c0b9;margin-top:60px}.notes button{text-align:left;padding:28px 24px 32px 0;background:none;border:0;border-bottom:1px solid #b9c0b9;display:flex;gap:24px;color:inherit}.notes button+button{padding-left:25px;border-left:1px solid #b9c0b9}.notes b{color:var(--red);font:700 15px 'Barlow Condensed'}.notes strong,.notes small{display:block}.notes strong{font-size:17px}.notes small{font:700 10px 'Barlow Condensed';letter-spacing:.15em;color:#929b94;margin-top:8px}.notes p{font-size:12px;line-height:1.8;color:#727b74;max-width:250px}.notes i{margin-left:auto;font-style:normal}footer{display:flex;justify-content:space-between;margin-top:100px;font:700 9px 'DM Sans';letter-spacing:.13em;color:#8b948d}footer a{color:inherit;text-decoration:none}.modal[hidden]{display:none}.modal{position:fixed;inset:0;background:#111a1bba;z-index:10;display:grid;place-items:center;padding:20px}.modal-card{background:#f1f2eb;padding:45px;max-width:520px;position:relative}.modal-card>button:first-child{position:absolute;right:20px;top:15px;border:0;background:none;font-size:28px}.modal p{font-size:13px;line-height:2;color:#67716a}.modal-action{background:#202727;color:white;border:0;padding:15px 22px;margin-top:15px}@media(max-width:700px){header{height:65px}.header-mid{display:none}.stage{height:850px;min-height:0}.intro{top:35px}.intro h1{font-size:49px}.stage-meta{display:none}.canvas-wrap{top:120px;bottom:200px}.drag-hint,.view-label{top:auto;bottom:0}.view-label{display:none}.axis,.side-index{display:none}.control{left:3%;right:3%;bottom:20px;padding:18px}.control-top{gap:12px}.state{font-size:17px}.state small{display:block;margin:5px 0 0}.counter b{font-size:28px}.ticks span{display:none}.control-bottom button{margin-left:8px}.story{padding-top:70px}.story-head{display:block}.story-head p{width:auto}.notes{grid-template-columns:1fr;margin-top:35px}.notes button+button{padding-left:0;border-left:0}footer span:nth-child(2){display:none}}