:root{color:#f3e8c1;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#11100c;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;overflow-x:hidden}button,input{font:inherit}.shell{background:#11100c;grid-template-columns:minmax(0,1fr) 340px;gap:0;min-height:100vh;display:grid}.stage{min-height:100vh;padding:18px}#braid-canvas{background:#15140f;border:1px solid #6f6246;width:100%;height:calc(100vh - 36px);display:block;box-shadow:0 18px 44px #0000006b}.panel{background:#1b1912;border-left:1px solid #6f6246;flex-direction:column;gap:12px;min-height:100vh;padding:16px 18px;display:flex}.brief,.controls,.readout{background:#211e16;border:1px solid #756a4d;padding:12px}.brief p{color:#d9cda1;margin:0;font-size:13px;line-height:1.42}.brief strong{color:#f4e8bd}.controls{gap:8px;display:grid}.control{color:#cfc192;letter-spacing:.01em;grid-template-columns:1fr auto;gap:4px 12px;font-size:13px;display:grid}.control input{accent-color:#c7b56f;cursor:pointer;grid-column:1/-1;min-height:44px}.control output{color:#f4e8bd;text-align:right;font-variant-numeric:tabular-nums;min-width:44px}button{color:#f6edc9;cursor:pointer;background:#312918;border:1px solid #c2b27f;min-height:46px;transition:transform .16s cubic-bezier(.4,0,.2,1),opacity .16s cubic-bezier(.4,0,.2,1)}button:hover{opacity:.86}button:active{transform:scale(.97)}button:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #f0d06c}.readout{grid-template-columns:1fr 1fr;gap:8px;display:grid}.readout div{background:#17150f;border:1px solid #4c442f;min-height:46px;padding:8px}.readout span{color:#a99d78;text-transform:uppercase;letter-spacing:.08em;font-size:11px;display:block}.readout strong{color:#f4e8bd;margin-top:3px;font:700 18px ui-monospace,SFMono-Regular,Menlo,monospace;display:block}@media (width<=860px){.shell{grid-template-columns:1fr}.stage{min-height:58vh;padding:12px}#braid-canvas{height:58vh;min-height:460px}.panel{border-top:1px solid #6f6246;border-left:0;min-height:auto;padding:12px}.controls{gap:14px}}@media (width<=460px){.brief,.controls,.readout{padding:12px}.readout{grid-template-columns:1fr}.brief p{font-size:13px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}