:root{color-scheme:dark;--bg:#050505;--fg:#f5f5f1;--muted:#9aa097;--line:#252925;--accent:#d4f99a;font-family:"Helvetica Neue",Helvetica,Arial,"Apple SD Gothic Neo",sans-serif}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg)}body{-webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom)}button,input{font:inherit;-webkit-tap-highlight-color:transparent}.wrap{width:min(1500px,calc(100% - 40px));margin:auto}.header{height:76px;display:flex;align-items:center;border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}.logo{font-size:28px;font-weight:650;letter-spacing:-.07em}.lab{font:9px ui-monospace,SFMono-Regular,monospace;color:var(--muted);margin-left:22px;padding-left:22px;border-left:1px solid #414641}.hero{padding:54px 0 46px}.kicker,.mono{font:9px ui-monospace,SFMono-Regular,monospace;letter-spacing:.09em;color:var(--muted)}h1{font-size:clamp(42px,8.8vw,96px);line-height:.94;letter-spacing:-.065em;font-weight:400;margin:22px 0 24px}.hero p{color:#b0b5ae;font-size:13px;line-height:1.8;max-width:620px}.bar{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;margin-bottom:22px}.bar h2{font-size:22px;font-weight:400;margin:0;letter-spacing:-.03em}.motion{border:1px solid #3a4238;background:#0b0e0b;color:#c9d0c5;padding:10px 14px;border-radius:2px;min-height:44px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 20px}.card{min-width:0}.thumb{position:relative;aspect-ratio:1.6;background:#000;border:1px solid #202620;overflow:hidden}.thumb canvas{display:block;width:100%;height:100%}.open{position:absolute;inset:0;border:0;background:transparent;color:inherit;text-align:left;padding:0;width:100%;height:100%}.meta{position:absolute;left:12px;top:10px;font:8px ui-monospace,SFMono-Regular,monospace;color:#b8bdb6;pointer-events:none}.meta b{color:var(--c);font-weight:400}.corner{position:absolute;right:12px;bottom:9px;color:var(--c);font-size:19px;pointer-events:none}.card h3{font-size:20px;font-weight:400;letter-spacing:-.035em;margin:14px 0 7px}.card p{margin:0;color:#a4aaa1;font-size:11px;line-height:1.75}.tag{margin-top:10px;font:8px ui-monospace,SFMono-Regular,monospace;color:var(--c)}.footer{margin-top:70px;padding:30px 0 50px;border-top:1px solid var(--line);color:#8e958b;font:9px ui-monospace,SFMono-Regular,monospace}.modal{position:fixed;inset:0;background:#050705;z-index:30;display:none;overflow:auto;-webkit-overflow-scrolling:touch}.modal.on{display:block}.mhead{position:sticky;top:0;z-index:2;background:#050705f3;border-bottom:1px solid var(--line);padding:calc(12px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 12px max(18px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between}.mhead button{width:44px;height:44px;border:1px solid #3b4439;background:#0b0e0b;color:#fff;font-size:25px}.mbody{width:min(1100px,calc(100% - 36px));margin:auto;padding:30px 0 calc(45px + env(safe-area-inset-bottom))}.mtop h2{font-size:clamp(32px,8vw,52px);font-weight:400;letter-spacing:-.055em;margin:0 0 7px}.mtop p{margin:0;color:#aeb5aa;line-height:1.75;font-size:12px}.stage{margin-top:25px;aspect-ratio:1.6;border:1px solid #293127;background:#000;position:relative}.stage canvas{width:100%;height:100%;display:block}.play{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border:1px solid #465043;background:#000c;color:var(--c);font-size:20px}.controls{padding:18px 0 20px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:20px}.ctl{min-width:0}.ctl label{display:flex;justify-content:space-between;gap:8px;margin-bottom:5px;font:9px ui-monospace,SFMono-Regular,monospace;color:#bec6ba}.ctl input[type=range]{width:100%;height:34px;accent-color:var(--c);touch-action:pan-y}.ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--c);border:1px solid white;margin-top:-11px}.ctl input[type=range]::-webkit-slider-runnable-track{height:4px;background:#424942;border-radius:4px}.info{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:27px}.info section{border-top:1px solid var(--line);padding-top:16px}.info .label{font:8px ui-monospace,SFMono-Regular,monospace;color:var(--c);letter-spacing:.09em}.info h4{font-size:18px;font-weight:400;margin:10px 0}.info p{font-size:12px;color:#b0b9aa;line-height:1.9;margin:0}.nature{border-left:2px solid var(--c)!important;padding-left:14px}.notice{display:none;margin:18px 0;padding:12px;border:1px solid #485244;color:#cad2c5;font-size:11px;line-height:1.6}.notice.on{display:block}@media(max-width:850px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.wrap{width:calc(100% - 36px)}.lab{display:none}.hero{padding:38px 0 32px}.grid{grid-template-columns:1fr;gap:31px}.card h3{font-size:21px}.card p{font-size:12px}.controls{grid-template-columns:1fr}.info{grid-template-columns:1fr}.mbody{width:calc(100% - 34px)}.stage{margin-top:18px}.bar h2{font-size:20px}}
:root{--bg:#000;--fg:#fff;--muted:#a8a8a8;--line:#292929;--c:#d4f99a}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
a{color:inherit;text-decoration:none}
button,a,input{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--c);outline-offset:5px}
.lab,.kicker,.mono,.footer{font-size:12px}
.hero p{font-size:16px;color:#b6b6b6;max-width:none;word-break:keep-all}
.bar{min-height:82px}
.motion{font-size:12px;color:#eee;background:#0b0b0b;border-color:#3b3b3b}
.thumb{border-color:#242424}
.open{display:block;cursor:pointer}
.poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.thumb canvas,.stage canvas{position:relative;opacity:0;transition:opacity .15s linear}
.thumb canvas.ready,.stage canvas.ready{opacity:1}
.meta{font-size:12px;color:#bdbdbd;line-height:1.5}
.card h3 a:hover,.card h3 a:focus-visible{color:var(--c)}
.card p{font-size:14px;color:#b4b4b4}
.tag{font-size:12px;line-height:1.6}
.footer{color:#999;line-height:1.8}
body[data-page=study]{min-height:100vh;min-height:100svh}
.mhead{background:#000f}
.mhead .mono{color:var(--c)}
.close{display:grid;place-items:center;width:44px;height:44px;border:1px solid #3b3b3b;background:#0b0b0b;color:#fff;font-size:28px;line-height:1}
.mtop h1{font-size:clamp(32px,8vw,52px);font-weight:400;letter-spacing:-.055em;line-height:1.06;margin:0 0 10px}
.mtop p{font-size:16px;color:#b8b8b8}
.stage{border-color:#292929;overflow:hidden}
.play{border-color:#464646}
.controls{gap:18px 26px}
.ctl label{font-size:12px;line-height:1.6;color:#e0e0e0}
.ctl output{color:var(--c);white-space:nowrap}
.ctl input[type=range]{-webkit-appearance:none;appearance:none;display:block;height:44px;margin:0;width:100%;background:transparent;cursor:ew-resize;touch-action:pan-y}
.ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-11px;border-radius:50%;background:var(--c);border:1px solid #fff;box-shadow:0 0 0 6px transparent}
.ctl input[type=range]::-webkit-slider-runnable-track{height:4px;background:#424242;border-radius:4px}
.ctl input[type=range]::-moz-range-thumb{width:24px;height:24px;border:1px solid #fff;border-radius:50%;background:var(--c)}
.ctl input[type=range]::-moz-range-track{height:4px;background:#424242;border-radius:4px}
.control-note p{font-size:14px;line-height:1.7;color:#aaa;margin:0}
.parameter-hint{margin:2px 0 0;color:#aaa;font-size:14px;line-height:1.7;word-break:keep-all;overflow-wrap:break-word}
.experiment-presets{margin-top:22px;padding:20px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(160px,1fr) minmax(180px,1fr);align-items:center;gap:10px 26px}
.experiment-presets .label{margin:0}
.experiment-presets select{width:100%;min-height:44px;padding:9px 12px;border:1px solid #3b3b3b;background:#0a0a0a;color:var(--c);font:16px/1.4 "Helvetica Neue",Helvetica,Arial,sans-serif;border-radius:2px;color-scheme:dark}
.experiment-presets select:focus-visible{outline:2px solid var(--c);outline-offset:4px}
.experiment-presets p{grid-column:1/-1;font-size:14px;line-height:1.75;color:#b8b8b8;margin:0;word-break:keep-all}
@media(max-width:560px){.experiment-presets{grid-template-columns:1fr;gap:10px}.parameter-hint,.experiment-presets p{word-break:normal}.controls{gap:22px}}
.control-note button{border:0;border-bottom:1px solid #555;padding:8px 0;background:none;color:#ddd;font-size:14px;min-height:44px}
.notice{font-size:14px;color:#ddd;border-color:#555}
.info{gap:32px 36px;margin-top:32px}
.info section{padding-top:20px;min-width:0}
.label,.info h2.label{display:block;font:12px ui-monospace,SFMono-Regular,monospace;line-height:1.7;letter-spacing:.065em;color:var(--c);margin:0 0 16px}
.info p,.parameters{font-size:16px;color:#c3c3c3;line-height:1.95;word-break:keep-all;overflow-wrap:anywhere}
.wide{grid-column:1/-1}
.formula{white-space:pre-wrap;overflow-wrap:anywhere;font:clamp(14px,1.7vw,19px)/1.9 ui-monospace,SFMono-Regular,monospace;margin:0;color:#eee}
.parameters{padding-left:19px;margin:0}
.parameters li+li{margin-top:8px}
.parameters li::marker{color:var(--c)}
.info p+p{margin-top:16px}
.experiment-steps{padding-left:24px;margin:16px 0 0;color:#c3c3c3;font-size:16px;line-height:1.95;word-break:keep-all;overflow-wrap:break-word}
.experiment-steps li+li{margin-top:12px}
.experiment-steps li::marker{color:var(--c)}
.info .experiment-focus{color:#eee}
.source-links,.related{display:grid}
.source-links a,.related a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;min-height:44px;font-size:15px;line-height:1.7;color:#d0d0d0;border-bottom:1px solid #232323;overflow-wrap:anywhere}
.source-links a>span,.related a>span{color:var(--c)}
.source-links a:hover,.related a:hover{color:var(--c)}
.source-entry{padding-bottom:16px;border-bottom:1px solid #232323}
.source-entry a{border:0;padding-bottom:5px}
.source-entry p{font-size:14px;color:#999;line-height:1.8}
.related a>span:first-child{font:12px ui-monospace,SFMono-Regular,monospace}
.related a>span:last-child{margin-left:auto}
.invalid-title{font-size:clamp(30px,6vw,52px);line-height:1.2}
.back-link{color:var(--c);text-decoration:underline}
@media(max-width:560px){.card p{font-size:15px}.hero p{font-size:16px}.info{gap:28px}.controls{gap:12px}.control-note{padding-top:3px}.mtop p{font-size:15px}.meta{font-size:12px}.source-links a,.related a{font-size:15px}.wide{grid-column:auto}.info p,.parameters{word-break:normal}.bar{gap:12px}.bar h2{line-height:1.3}.motion{flex:none}.header{min-height:76px;height:auto;padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.thumb canvas,.stage canvas{transition:none}}
@media(max-width:560px){.controls{gap:22px}.experiment-steps{word-break:normal}}

.mtop-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:28px}
.mtop-copy{flex:1;min-width:0}
.mtop-heading h1{overflow-wrap:anywhere}
.mtop-copy p{word-break:keep-all;overflow-wrap:break-word}
.field-note{flex:0 0 168px;padding-top:3px}
.field-note-label{display:block;margin:0 0 8px;font:12px/1.6 ui-monospace,SFMono-Regular,monospace;letter-spacing:.08em;color:#a8a8a8;text-align:right}
.field-note [hidden]{display:none!important}
.field-note .progress-display{display:block;min-height:44px;padding:9px 10px;border:1px solid #292929;border-radius:2px;color:var(--c);font:16px/1.4 "Helvetica Neue",Helvetica,Arial,sans-serif}
.field-note select{display:block;width:100%;min-height:44px;padding:9px 10px;border:1px solid #3b3b3b;border-radius:2px;background:#0a0a0a;color:var(--c);font:16px/1.4 "Helvetica Neue",Helvetica,Arial,sans-serif;cursor:pointer;color-scheme:dark}
.field-note select:focus-visible{outline:2px solid var(--c);outline-offset:4px}
.field-note select:disabled{color:#aaa;cursor:wait;opacity:.7}
.field-note .progress-account{margin-top:18px}
.field-note .progress-message{display:block;margin:0;color:#aaa;font-size:12px;line-height:1.6;text-align:right}
.field-note .progress-message:empty{display:none}
.field-note button,.field-note .progress-auth{display:block;padding:10px 0;min-height:44px;background:transparent;border:0;color:var(--c);font:inherit;font-size:14px;line-height:1.5;text-decoration:underline;text-underline-offset:3px}
.field-note .progress-auth{width:fit-content;margin-left:auto;padding-top:2px;padding-bottom:21px;text-align:right}
@media(max-width:560px){.mtop-heading{gap:16px}.field-note{flex-basis:128px}.field-note-label{font-size:12px;letter-spacing:.035em}.field-note select,.field-note .progress-display{padding:9px 6px}.mtop-heading h1{font-size:clamp(28px,8vw,36px)}}
