:root{--ink:#3b382d;--muted:#89816d;--paper:#f3eddf;--line:#ded4c0;--green:#496958;--gold:#a47c35}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif}button,input,summary{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #b68b35;outline-offset:4px}main{display:grid;grid-template-columns:minmax(0,1fr) 326px;min-height:100dvh}#stage{height:100dvh;min-height:620px;position:sticky;top:0;overflow:hidden;background:#e6dcc8}canvas{display:block;width:100%;height:100%;touch-action:none}.masthead{position:absolute;left:40px;top:34px;pointer-events:none;z-index:2}.eyebrow{font:10px/1.5 ui-monospace,monospace;letter-spacing:.23em;color:#7e775e;text-decoration:none;pointer-events:auto}h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:500;font-size:clamp(28px,3.1vw,42px);letter-spacing:.15em;line-height:1.6;margin:10px 0 7px}h1 span{display:block;font:9px/1.6 ui-monospace,monospace;letter-spacing:.24em;color:#82775e}header p{font-size:11px;letter-spacing:.09em;color:#80765d;margin-top:12px}.scene-note{position:absolute;bottom:55px;left:40px;display:flex;align-items:center;gap:9px;font-size:11px;color:#746d57}.dot{height:5px;width:5px;border-radius:50%;background:#78976d;box-shadow:0 0 0 4px #8299731c}.hint{position:absolute;left:40px;bottom:29px;font-size:10px;letter-spacing:.04em;color:#8c826a}aside{position:relative;padding:35px 28px 25px;background:#f4eee2;border-left:1px solid #d8cbb5;min-height:100dvh}.chapter{display:flex;justify-content:space-between;font:9px ui-monospace,monospace;letter-spacing:.14em;color:#7c6f57;border-bottom:1px solid var(--line);padding-bottom:16px}h2{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:24px;font-weight:500;letter-spacing:.06em;margin:29px 0 12px}.intro{font-size:12px;line-height:1.95;color:#827b68;margin-bottom:27px}.flow-label{display:flex;align-items:center;justify-content:space-between}.flow-label label{font-size:12px}.flow-label output{font-family:Georgia,serif;font-size:32px;color:#53664b}.flow-label output span{font-family:system-ui,sans-serif;font-size:11px;margin-left:5px;color:#8d8e76}input[type=range]{appearance:none;width:100%;height:3px;background:#d2c7ad;cursor:pointer;margin:23px 0 14px;accent-color:var(--green)}input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;background:#5c7556;border:4px solid #f4eee2;border-radius:50%;box-shadow:0 0 0 1px #77896e}input[type=range]::-moz-range-thumb{width:13px;height:13px;background:#5c7556;border:3px solid #f4eee2;border-radius:50%}.range-labels{display:flex;justify-content:space-between;font-size:9px;color:#827762}.micro{font-size:10px;color:#7b725e;line-height:1.8;margin:13px 0 20px}.readout{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0;margin-bottom:21px}.readout div>span{display:block;font-size:9px;color:#7b725e;margin-bottom:6px}.readout strong{font-size:11px;font-weight:500}.readout b{font-family:Georgia,serif;font-size:20px;font-weight:400;color:#5d7153}.readout small{font-size:9px;color:#92896f}button{cursor:pointer;border:1px solid #cfc5b1;background:transparent;color:#5e604e;border-radius:4px;padding:12px 9px;font-size:11px;transition:background .2s,border-color .2s,transform .2s}button:hover{background:#e7e3d3;border-color:#9d9e80}button:active{transform:translateY(1px)}.primary{width:100%;display:flex;gap:12px;align-items:center;justify-content:center;background:#536e58;border-color:#536e58;color:#fff9ec;font-size:12px;letter-spacing:.08em;height:43px}.primary:hover{background:#415e47;color:#fff}.section-label{font-size:9px;letter-spacing:.08em;color:#7b725e;margin:25px 0 10px}.views{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}.views button{padding:10px 3px;font-size:9px;white-space:nowrap}.views button.active{background:#e4e5d4;border-color:#a4af93;color:#476043}.check{display:flex;gap:8px;align-items:center;font-size:10px;margin:19px 0 13px;color:#7a7762}.check input{accent-color:#607c56}.quiet{border:0;padding:8px 0;color:#89836c;font-size:10px}details{margin-top:22px;border-top:1px solid var(--line);padding-top:16px;font-size:10px;color:#88806b;line-height:1.85}summary{cursor:pointer;color:#696b55}details a{color:#65795b}footer{font:8px/1.8 ui-monospace,monospace;letter-spacing:.14em;color:#8e8269;margin-top:26px}footer span{font-size:9px;letter-spacing:.04em}#loading{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);font-size:12px;color:#6e7159}#error{position:absolute;z-index:5;inset:30% 12%;padding:24px;background:#fff7e9;box-shadow:0 10px 50px #60533330;border:1px solid #caba9b;border-radius:8px;font-size:13px;line-height:1.8}#error small{display:block;font-size:10px;overflow-wrap:anywhere}#error[hidden],#loading[hidden]{display:none}
@media(min-width:1500px){aside{padding:45px 36px}main{grid-template-columns:minmax(0,1fr) 360px}.masthead{left:50px;top:40px}}
@media(max-width:900px){main{grid-template-columns:minmax(0,1fr) 286px}aside{padding:27px 20px}.masthead{left:25px;top:27px}h1{font-size:29px}.scene-note,.hint{left:25px}}
@media(max-width:680px){main{display:block}#stage{height:65dvh;min-height:460px;max-height:650px;position:relative}.masthead{left:22px;top:22px}h1{font-size:29px;margin:7px 0}header p{font-size:10px;margin:9px 0}.scene-note{left:22px;bottom:35px;font-size:10px}.hint{left:22px;bottom:16px;font-size:9px}aside{min-height:0;padding:25px 24px 28px;border-left:0;border-top:1px solid #d8cbb5}.chapter{padding-bottom:13px}h2{margin:20px 0 7px;font-size:23px}.intro{margin:0 0 17px;font-size:11px}.intro br{display:none}.flow-label output{font-size:29px}.micro{margin:10px 0 15px}.readout{margin-bottom:16px;padding:12px 0}.section-label{margin-top:20px}.views button{font-size:11px;padding:12px 4px}.check{font-size:11px}details{margin-top:16px}footer{margin-top:18px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}

.save{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:10px;margin-top:11px;color:#667052}.save span{font:8px ui-monospace,monospace;letter-spacing:.08em;color:#85795e}#save-status:empty{display:none}

/* Close-up views keep labels off the machinery; portrait views retain the whole model. */
.is-close .masthead h1,.is-close .masthead p{opacity:0;pointer-events:none}.scene-note,.hint{background:#f4eee2d9;border-radius:4px;padding:4px 7px}.scene-note{margin-left:-7px}.hint{margin-left:-7px}