:root{color-scheme:dark;font-family:'Inter Variable',sans-serif;background:#0a151a;color:#eaf0e8;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;height:100%;width:100%;overflow:hidden;overscroll-behavior:none}canvas{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;touch-action:none;outline-offset:-4px}.hud{position:fixed;z-index:2;pointer-events:none}.identity{top:38px;left:44px}.identity p{font:11px 'JetBrains Mono Variable',monospace;letter-spacing:1.4px;color:#aec6c4;margin:0 0 16px}.identity p span{margin-left:30px;color:#7fa39e}.identity h1{font:500 31px 'Space Grotesk Variable',sans-serif;letter-spacing:-1px;margin:0 0 9px}.identity>div{font-size:12px;color:#b7c9c5}.dimensions{top:43px;right:44px;font:11px 'JetBrains Mono Variable',monospace;color:#c2d5cc;letter-spacing:.5px}.reading{left:44px;bottom:170px;text-shadow:0 2px 10px #07131a}.reading>span{font:11px 'JetBrains Mono Variable',monospace;letter-spacing:1.7px;color:#b8cfc4}.reading strong{display:block;font:400 49px 'Space Grotesk Variable',sans-serif;letter-spacing:-2px;font-variant-numeric:tabular-nums;margin-top:10px}.reading small{font:14px 'JetBrains Mono Variable',monospace;letter-spacing:0}.reading p{font:11px 'JetBrains Mono Variable',monospace;color:#c3d2c4;margin:8px 0}.reading>div{font-size:11px;color:#a6bdb9;max-width:260px;line-height:1.5}.legend{right:44px;bottom:175px;width:240px}.gradient{height:9px;border-radius:8px;background:linear-gradient(90deg,#122e49,#245768,#3a8e8d,#a8bd87,#f3d38c,#fff4c3);border:1px solid #aec8be66}.legend>div+div{display:flex;justify-content:space-between;font:11px 'JetBrains Mono Variable',monospace;color:#bacfc8;margin-top:9px}.legend p{font-size:11px;color:#9fb8af;margin-top:12px}.controls{right:44px;bottom:83px;display:flex;gap:7px;pointer-events:auto}button,select{min-height:44px;border:1px solid #50645e;border-radius:4px;padding:0 17px;background:#14292e;color:#e7f0e7;font:12px 'Inter Variable',sans-serif;cursor:pointer}button:hover{background:#274147}button[aria-pressed=true],#settings-toggle{background:#e8d5a7;border-color:#e8d5a7;color:#1b3034}#settings-toggle span{margin-left:15px}button:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #e8d5a7;outline-offset:4px}.note{left:44px;right:44px;bottom:24px;margin:0;padding-top:17px;border-top:1px solid #365052;font:11px 'JetBrains Mono Variable',monospace;color:#a8bfb6}.note span{float:right}.panel{right:44px;bottom:142px;width:350px;background:#10272bed;border:1px solid #49655d;border-radius:8px;padding:19px;backdrop-filter:blur(16px);pointer-events:auto}.panel[hidden],#fallback[hidden]{display:none}.panel-head{display:flex;align-items:center;gap:12px;font-size:12px;margin-bottom:13px}.panel-head select{min-height:32px;padding:0 10px;flex:1}.panel-head output{font:11px 'JetBrains Mono Variable',monospace;color:#cbd9c5}.xy{display:grid;grid-template-columns:1fr 1fr;gap:15px}.panel label{font-size:12px}.panel output{float:right;color:#e8d5a7;font-variant-numeric:tabular-nums}.panel input[type=range]{display:block;width:100%;height:20px;accent-color:#e8d5a7;margin:7px 0 13px}.check{display:flex;gap:8px;align-items:center;margin:0 0 14px}.check input{accent-color:#e8d5a7;width:17px;height:17px}.exports{display:flex;gap:8px}.exports button{flex:1;min-height:40px;padding:0 8px}.panel p{font-size:11px;line-height:1.4;color:#aec4b9;margin:12px 0 0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#fallback{position:fixed;left:20%;right:20%;top:35%;background:#173035;padding:25px;font-size:18px;line-height:1.6}.capture *{transition:none!important}
@media(max-width:600px){.identity{top:26px;left:20px}.identity p{font-size:11px;letter-spacing:1px;margin-bottom:11px}.identity p span{display:none}.identity h1{font-size:26px;max-width:350px}.identity>div{font-size:12px}.dimensions{top:134px;right:20px;font-size:11px}.reading{left:20px;bottom:205px}.reading strong{font-size:35px;margin-top:6px}.reading>span{font-size:11px}.reading p{margin:5px 0}.reading>div{display:none}.legend{right:20px;bottom:212px;width:145px}.legend p{font-size:11px;line-height:1.4;max-width:145px}.legend>div+div{font-size:11px}.controls{left:20px;right:20px;bottom:65px;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.controls button{padding:0 8px;min-height:44px}#settings-toggle{grid-column:span 2}.note{left:20px;right:20px;bottom:17px;font-size:11px;line-height:1.4;padding-top:11px}.note span{display:none}.panel{left:20px;right:20px;bottom:169px;width:auto;padding:10px}.panel-head{margin-bottom:9px}.panel input[type=range]{margin:3px 0 7px}.panel .check{margin-bottom:9px}.panel p{font-size:11px;margin-top:9px}.exports button{min-height:44px}.settings-open .identity,.settings-open .dimensions,.settings-open .reading,.settings-open .legend,.settings-open .note{display:none}#fallback{left:20px;right:20px;top:30%;font-size:14px}}