:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;background:#0b0c0c;color:#f2eee3}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:320px;background:radial-gradient(circle at 50% 52%,rgba(177,138,67,.18),transparent 32rem),linear-gradient(140deg,#111313,#090a0a 58%,#141210)}button,input{font:inherit}#watch-canvas{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none}.topbar,.statusbar,.panel{position:fixed;z-index:2;color:#f5efe1;background:#0e0f0ead;border:1px solid rgba(234,210,158,.18);box-shadow:0 16px 40px #00000047;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.topbar{top:18px;left:18px;right:18px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-radius:8px}.topbar h1{margin:0;font-size:clamp(18px,2.2vw,30px);line-height:1;font-weight:780;letter-spacing:0}.topbar p{margin:7px 0 0;color:#d9c896;font-variant-numeric:tabular-nums;font-size:14px}.mode-pill{min-width:190px;padding:9px 12px;border-radius:999px;border:1px solid rgba(213,175,93,.36);color:#f0d898;background:#6c4b1c42;font-size:12px;text-align:center;white-space:nowrap}.panel{top:112px;width:232px;padding:14px;border-radius:8px}.panel-left{left:18px}.panel-right{right:18px}.panel section+section{margin-top:18px;padding-top:16px;border-top:1px solid rgba(238,217,174,.12)}.panel h2{margin:0 0 10px;color:#efe6cd;font-size:12px;line-height:1.2;font-weight:720;text-transform:uppercase;letter-spacing:0}.icon-grid{display:grid;grid-template-columns:repeat(3,44px);gap:8px}.icon-btn,.wide-btn,.segmented button{border:1px solid rgba(229,202,144,.22);color:#f2ead6;background:#ffffff0e;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease}.icon-btn:hover,.wide-btn:hover,.segmented button:hover{transform:translateY(-1px);border-color:#eecc8080;background:#d5a64a24}.icon-btn{width:44px;height:44px;display:grid;place-items:center;border-radius:8px}.icon-btn svg,.wide-btn svg{width:18px;height:18px;stroke-width:1.8}.selected,.icon-btn.active{border-color:#ffcf74b8;background:#b8852847;color:#ffe4a5}label{display:block;color:#dacdaa;font-size:12px}input[type=range]{width:100%;margin:12px 0 0;accent-color:#d5a13e}.toggle{display:flex;align-items:center;gap:9px;min-height:28px}.toggle+.toggle{margin-top:6px}.toggle input{width:16px;height:16px;accent-color:#d7a444}.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border:1px solid rgba(229,202,144,.16);background:#00000038;border-radius:8px}.segmented button{min-width:0;height:34px;border-radius:6px;font-size:12px}.wide-btn{display:flex;width:100%;height:38px;align-items:center;justify-content:center;gap:8px;margin-top:14px;border-radius:8px;font-size:12px}.ratio-card dl{margin:0}.ratio-card div{display:grid;grid-template-columns:1fr auto;gap:10px;padding:8px 0;border-bottom:1px solid rgba(238,217,174,.1)}.ratio-card div:last-child{border-bottom:0}.ratio-card dt,.ratio-card dd{margin:0;font-size:12px;line-height:1.25}.ratio-card dt{color:#cfc1a0}.ratio-card dd{color:#f5df9f;font-variant-numeric:tabular-nums;text-align:right}.statusbar{left:18px;right:18px;bottom:18px;min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;border-radius:8px;color:#d9c99f;font-size:12px}.statusbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:860px){.topbar{height:66px}.mode-pill,.panel-right .ratio-card,.statusbar #gear-readout{display:none}.panel{top:auto;bottom:76px;width:calc(50% - 27px);max-height:260px;overflow:auto}.panel-left{left:18px}.panel-right{right:18px}.icon-grid{grid-template-columns:repeat(3,minmax(38px,1fr))}.icon-btn{width:100%}}@media(max-width:560px){.topbar{left:10px;right:10px;top:10px;padding:12px}.topbar h1{font-size:17px}.panel{left:10px;right:10px;width:auto}.panel-right{display:none}.panel-left section:nth-of-type(3){display:none}.statusbar{left:10px;right:10px;bottom:10px}}
