:root{--ink:#10232c;--muted:#6e7b7e;--fine:#9aabae;--paper:#f8f7f3;--line:#e4e5de;--gold:#a97e43;--copper:#be8b51;--deep:#182f39;--sage:#b7cbbd;}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:#eff0eb}
body{font-size:14px}button,select,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.65}button:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #c3975f;outline-offset:3px}
[hidden]{display:none!important}.app-shell{max-width:1780px;min-height:100vh;background:var(--paper);margin:auto;box-shadow:0 18px 80px #001a2310}
.site-header{height:74px;border-bottom:1px solid #e1e3dd;display:flex;align-items:center;justify-content:space-between;padding:0 41px;gap:16px}.brand{display:flex;align-items:center;gap:13px}.brand-mark{display:flex;width:37px;height:37px;align-items:center;justify-content:center;background:#1d3641;color:#d6ac6f;font-size:24px;transform:rotate(45deg);border:1px solid #b7aa94}.brand-mark::first-letter{transform:rotate(-45deg)}.brand-text strong{display:block;letter-spacing:.10em;font-size:15px}.slash{font-weight:300;color:#ba8f61}.brand-text small{display:block;color:#7c8a8d;font-size:9px;font-weight:700;letter-spacing:.19em;margin-top:4px}.header-right{display:flex;align-items:center;gap:22px}.header-edition{font-size:10px;letter-spacing:.14em;color:#7a8889}.header-edition b{font-weight:700;color:#283e46;margin-left:12px}.running{font-size:10px;letter-spacing:.13em;font-weight:700;color:#3f6260;border:1px solid #d2dfd7;padding:10px 12px}.green-dot,.indicator{display:inline-block;width:6px;height:6px;border-radius:50%;background:#67a98a;margin-right:7px;box-shadow:0 0 0 3px #7fbd9230}
.app-main{display:grid;grid-template-columns:minmax(0,1fr) 355px;min-height:calc(100vh - 74px)}.stage-column{padding:36px 43px 23px;min-width:0}.intro{margin-bottom:23px}.eyebrow{display:flex;align-items:center;gap:11px;color:#986f3e;font-size:10px;font-weight:800;letter-spacing:.17em}.eyebrow-line{display:inline-block;background:#bd9664;width:28px;height:1px}.midpoint{color:#b4aea2}
h1{font-size:clamp(26px,2.65vw,44px);letter-spacing:-.045em;font-weight:520;line-height:1.18;margin:16px 0 12px}h1 em{font-weight:350;font-style:normal;color:#8d956f}.intro p{font-size:13px;color:#68787a;max-width:710px;line-height:1.7;margin:0}.intro i{font-weight:600;color:#44575c}
.viewport{height:clamp(470px,58vh,740px);position:relative;background:#12242c;overflow:hidden;box-shadow:0 17px 35px #12262c22}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}canvas.dragging{cursor:grabbing}.viewport:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 44%,transparent 33%,#09171e40 100%)}
.viewport-top{position:absolute;z-index:1;top:22px;left:25px;right:25px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;color:#e0d0b7;font-size:10px;letter-spacing:.13em;font-weight:700}.kicker{display:flex;gap:10px;align-items:center}.tiny-cube{font-size:20px}.view-side{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#eee7d5}.view-side .muted{color:#8ea0a4}.viewport-left{position:absolute;z-index:1;left:25px;bottom:112px;display:flex;align-items:center;gap:10px;writing-mode:vertical-rl;transform:rotate(180deg);color:#8f9fa1;font-size:9px;letter-spacing:.22em}.vertical-line{width:1px;height:42px;background:#a8bbbc55}.viewbar{position:absolute;z-index:2;bottom:22px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;background:#132c35ec;border:1px solid #43616a;padding:7px 8px;box-shadow:0 9px 20px #001b28a0;max-width:calc(100% - 18px)}.view-button{background:transparent;border:0;color:#b8c6c6;padding:12px 16px;white-space:nowrap;font-size:10px;font-weight:800;letter-spacing:.10em;transition:background .2s,color .2s}.view-button:hover{color:white;background:#42606a}.view-button.active{background:#ddcaa7;color:#183340}.viewbar-spacer{height:20px;border-left:1px solid #637477;margin:0 8px}.help-circle{width:31px;height:31px;border:1px solid #77908e;border-radius:100%;color:#e8dbb5;background:none}.help-circle:hover{background:#46616a}
.help-panel{position:absolute;z-index:5;right:21px;bottom:90px;width:min(350px,calc(100% - 42px));padding:20px 23px;background:#f9f6ec;border:1px solid #c0b5a4;box-shadow:0 12px 28px #00161f8a}.help-heading{display:flex;align-items:center;justify-content:space-between;letter-spacing:.13em;font-size:12px}.help-heading button{background:none;border:0;font-size:22px;color:#59676b}.help-panel p{font-size:12px;line-height:1.6;color:#576769}.help-panel kbd{font-family:monospace;background:#e5e4da;padding:2px 5px}.loading-message,.render-error{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);background:#172d36;border:1px solid #a18b67;color:#e5d6ae;padding:15px 24px;font-size:11px;letter-spacing:.18em}.render-error{color:#ffbeb4;letter-spacing:normal}
.status-strip{display:flex;align-items:center;gap:14px;padding:18px 5px 15px;border-bottom:1px solid var(--line)}.status-icon{font-size:29px;color:#b68f5e;line-height:1}.status-header{display:block;color:#89989b;font-size:9px;font-weight:800;letter-spacing:.15em;margin-bottom:5px}.status-strip strong{font-size:10px;letter-spacing:.10em;color:#395357;font-weight:700}.status-seed{margin-left:auto;font-size:10px;color:#909c9d;letter-spacing:.11em;white-space:nowrap}.status-seed b{font-family:monospace;color:#667c80;font-weight:600}
.scene-notes{display:flex;justify-content:space-between;gap:15px;margin-top:23px}.minor-label{font-size:9px;font-weight:800;color:#a38b6b;letter-spacing:.17em}.scene-notes p{font-size:11px;color:#6a777c;margin:6px 0 0;line-height:1.5}
.control-column{background:#fefdfa;border-left:1px solid #e6e5dd;padding:27px 26px 15px;display:flex;flex-direction:column;overflow:hidden}.panel-intro{padding:7px 0 20px}.panel-top{display:flex;align-items:center;justify-content:space-between;color:#a08459;font-size:10px;font-weight:800;letter-spacing:.16em}.number-pill{border:1px solid #e3ddd1;padding:6px 8px;color:#8b8d87;font-family:serif;font-size:13px}.panel-intro h2{font-size:29px;font-weight:460;letter-spacing:-.05em;margin:17px 0 8px}.panel-intro p{font-size:12px;line-height:1.65;color:#7d8a89;margin:0}.panel-section{border-top:1px solid #e9e7df;padding:20px 0 19px}.section-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}.section-counter{color:#b89467;font-family:Georgia,serif;font-style:italic;font-size:17px}.section-head h3{margin:0;font-size:10px;font-weight:800;letter-spacing:.155em;color:#334f58}.panel-section label:not(.checkline){display:block;margin:14px 0 8px;color:#536b6d;font-size:11px;font-weight:700}.field-extra{float:right;color:#ac9a84;font-weight:600;font-size:9px;letter-spacing:.04em}.panel-section select{width:100%;background:#faf9f5;border:1px solid #dcdfd8;padding:11px 11px;color:#253c45;border-radius:0;font-size:12px;outline-color:#b68e5b;cursor:pointer}.mini-feature{display:flex;gap:11px;margin-top:17px;padding:11px 12px;background:#f2f1e9}.mini-feature .feature-icon{font-size:24px;color:#ae8a58}.mini-feature b{font-size:10px;letter-spacing:.07em;color:#41595a}.mini-feature p{font-size:11px;line-height:1.6;margin:3px 0 0;color:#7d8986}.checkline{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:15px 0;font-size:12px;font-weight:700;color:#536b6d;cursor:pointer}.checkline span{display:block}.checkline small{display:block;color:#a0a9a4;font-size:10px;font-weight:400;margin-top:4px}.checkline input{accent-color:#b58b5a;width:15px;height:15px;cursor:pointer;flex-shrink:0}.slider-label{display:flex;align-items:center;justify-content:space-between;margin-top:13px}.slider-label label{margin:0!important}.slider-label output{font-size:11px;color:#9e7d4f;font-weight:800}input[type="range"]{width:100%;accent-color:#a98050;cursor:pointer;margin:14px 0 0;height:4px}.action-copy{color:#7f8c89;font-size:11px;line-height:1.6;margin:0 0 15px}.primary-action{width:100%;display:flex;align-items:center;gap:10px;justify-content:flex-start;background:#243f48;color:#f2e5c8;border:1px solid #243f48;padding:15px 16px;text-align:left;font-size:12px;font-weight:750;letter-spacing:.06em}.primary-action:hover{background:#3a5b64}.button-icon{font-size:17px}.button-arrow{margin-left:auto;font-size:17px}.stamp-foot{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:800;letter-spacing:.1em;color:#89988f;margin-top:14px}.stamp-foot .indicator{width:5px;height:5px;box-shadow:none}.stamp-foot strong{margin-left:auto;letter-spacing:normal;color:#a78051;font-size:10px}.tool-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.tool-actions button{padding:11px 3px;background:transparent;border:1px solid #d8dfd9;color:#2c4b52;font-size:11px;font-weight:700}.tool-actions button:hover{border-color:#af895a;background:#f7f2e8}.reset-button{margin-top:11px;width:100%;background:transparent;color:#8d7558;border:0;border-bottom:1px solid #e7e4dd;padding:8px 0 14px;text-align:left;font-size:11px}.reset-button:hover{color:#5e4a37}.runtime-data{display:flex;justify-content:space-between;gap:7px;margin-top:14px;font-size:9px;color:#9da8a6;letter-spacing:.09em}.runtime-data strong{color:#627a7c;font-size:10px;letter-spacing:0}.panel-footer{margin-top:auto;font-size:9px;line-height:1.9;letter-spacing:.08em;color:#a3aaa4;padding-top:18px;border-top:1px solid #e9e7df}
@media(max-width:1180px){.app-main{grid-template-columns:minmax(0,1fr) 325px}.stage-column{padding:27px 25px}.control-column{padding:24px 20px}.viewport{height:clamp(430px,57vh,700px)}.view-button{padding:11px 10px}.scene-notes{gap:9px}}
@media(max-width:840px){.app-main{display:flex;flex-direction:column}.site-header{padding:0 18px;height:67px}.header-edition{display:none}.stage-column{padding:23px 18px 28px}.intro{margin-bottom:19px}.viewport{height:clamp(420px,62vw,620px)}.control-column{border-left:0;border-top:1px solid #e6e5dd;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:25px;padding:23px 25px}.panel-intro,.panel-footer{grid-column:1/-1}.panel-intro{padding-bottom:12px}.panel-section{padding:18px 0}.status-seed{display:none}}
@media(max-width:530px){.site-header{padding:0 12px;height:62px}.brand-mark{width:29px;height:29px;font-size:19px}.brand-text strong{font-size:12px}.brand-text small{font-size:8px}.running{font-size:8px;padding:8px}.stage-column{padding:22px 12px}.eyebrow{font-size:8px;gap:5px}.eyebrow-line{width:16px}.intro p{font-size:12px}.viewport{height:450px}.viewport-top{left:12px;right:12px;top:15px;font-size:8px}.viewport-left{left:12px}.view-side .muted{display:none}.viewbar{bottom:11px;padding:5px;gap:1px;width:max-content;max-width:calc(100% - 10px)}.view-button{padding:10px 7px;font-size:8px;letter-spacing:.03em}.viewbar-spacer{margin:0 3px}.help-circle{width:25px;height:25px}.scene-notes{flex-direction:column;gap:8px;margin-top:15px}.scene-notes>div{display:flex;align-items:baseline;gap:15px}.scene-notes p{margin:0}.control-column{display:block;padding:25px 19px}.panel-intro h2{font-size:26px}.panel-footer{margin-top:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}