:root{font-family:Inter,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif;color:#ecf4f4;background:#081c26;font-synthesis:none;--muted:#8fa9b1;--line:#28404a;--accent:#c4ed78}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid var(--line);background:transparent;color:inherit;border-radius:5px;min-height:40px;padding:8px 12px;font-size:14px}button:hover{border-color:#b7d99c;background:#ffffff08}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}header{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:#0b202a}.brand{text-decoration:none;color:inherit;font-size:16px;letter-spacing:2px;display:flex;align-items:center;gap:13px;font-weight:600}.brandmark{font-size:40px;color:var(--accent);line-height:1}.brandnote{font-size:13px;letter-spacing:0;font-weight:400;color:var(--muted);border-left:1px solid #45606b;margin-left:12px;padding-left:22px}.version{font-size:12px;color:var(--muted);letter-spacing:1.5px}.version i{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--accent);vertical-align:middle;margin:0 14px}main{display:grid;grid-template-columns:minmax(0,1fr) 330px;height:calc(100dvh - 184px);min-height:660px}.viewport{position:relative;overflow:hidden;background:radial-gradient(ellipse at 35% 20%,#1d5660,#061a25 80%)}#canvas{position:absolute;inset:0}#canvas canvas{display:block;width:100%;height:100%;touch-action:none}.view-heading{position:absolute;top:34px;left:36px;pointer-events:none}.eyebrow{font-size:12px;letter-spacing:2.2px;color:var(--accent);font-weight:500}h1{font-size:38px;font-weight:400;letter-spacing:1px;margin:12px 0 9px}h1 b{font-weight:300;color:#afc3c9}.view-heading p{color:#abc3ca;font-size:13px;margin:0}#loading{position:absolute;inset:46% 8% auto;text-align:center;font-size:15px;background:#08232ce8;border:1px solid #385b64;padding:20px;border-radius:6px;z-index:5}#loading[hidden]{display:none}.depth-scale{position:absolute;left:36px;top:205px;bottom:105px;display:flex;flex-direction:column;font-size:12px;color:#8eafb8;gap:12px;pointer-events:none}.depth-track{flex:1;width:22px;border-left:1px solid #92bec744;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(10% - 1px),#91b6bf44 calc(10% - 1px),#91b6bf44 10%);position:relative}.depth-track i{position:absolute;left:-4px;width:29px;height:2px;background:var(--accent);top:33%;box-shadow:0 0 14px #c4ed7880}.view-tools{position:absolute;right:24px;top:34px;display:flex;gap:3px;background:#08202acf;padding:4px;border:1px solid #52727a55;border-radius:7px}.view-tools button{border:0;font-size:13px;padding:7px 10px;min-height:32px}.selected{color:var(--accent);background:#c4ed7812!important;border-color:#c4ed7866!important}.view-footer{position:absolute;bottom:24px;left:36px;right:25px;display:flex;justify-content:space-between;gap:14px;font-size:12px;color:#a0bcc3;pointer-events:none}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:9px;box-shadow:0 0 12px #c4ed7880}aside{background:#0b202a;border-left:1px solid var(--line);padding:26px 25px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#34545c transparent}.panel-title h2{font-size:21px;letter-spacing:1px;font-weight:500;margin:9px 0 23px}.mode-card{position:relative;border:1px solid #45655e;background:linear-gradient(135deg,#203b37,#112c32);padding:18px;border-radius:7px;overflow:hidden}.mode-card>span{font-size:11px;color:var(--accent);letter-spacing:1.6px}.mode-card h3{font-size:20px;font-weight:500;letter-spacing:1px;margin:9px 0}.mode-card p{font-size:13px;color:#b1c8c7;line-height:1.7;margin:0;max-width:210px}.wave{position:absolute;right:-6px;top:1px;font-size:50px;color:#bce98715;letter-spacing:-9px;transform:rotate(-22deg);pointer-events:none}.presets{display:flex;gap:6px;margin:13px 0 25px}.presets button{flex:1;font-size:13px;padding:8px 5px}.control{margin:20px 0}.control label{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:#bbced3}.control output{color:#edf5ed;font-variant-numeric:tabular-nums;font-size:16px}.control small{font-size:12px;color:var(--muted)}input[type=range]{width:100%;height:4px;accent-color:var(--accent);margin:20px 0 8px;cursor:pointer}.range-labels{display:flex;justify-content:space-between;font-size:11px;color:#7d9ba5}.primary{width:100%;background:var(--accent);color:#14261d;border:none;font-weight:600;margin:0 0 3px}.primary:hover{background:#d7f4a6}.primary span{margin-right:10px}.options{border-top:1px solid var(--line);padding-top:18px;display:flex;gap:14px;font-size:12px;color:#b4c9cd;margin-top:25px}.options input{accent-color:var(--accent);margin-right:4px}.playback{display:flex;gap:5px;margin:20px 0}.playback button,.playback select{font-size:11px;flex:1;padding:7px 5px;min-height:34px}.playback select{background:#102932;color:#d4e4e8;border:1px solid var(--line);border-radius:5px}details{border-top:1px solid var(--line);padding-top:15px;font-size:12px;color:var(--muted);line-height:1.7}summary{cursor:pointer;color:#b4c9cf}details a{color:var(--accent)}footer{height:108px;display:flex;align-items:center;border-top:1px solid var(--line);background:#091c25;padding:18px 36px;gap:44px}.metric{min-width:105px}.metric>span{font-size:10px;letter-spacing:1.5px;color:var(--muted);display:block;margin-bottom:9px}.metric strong{font-size:29px;font-weight:400;font-variant-numeric:tabular-nums}.metric small{font-size:13px;color:var(--muted)}.metric.accent strong{color:var(--accent)}.footer-note{margin-left:auto;font-size:10px;letter-spacing:1.5px;color:#74929c;line-height:1.9;text-align:right}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(min-height:980px){main{min-height:760px}aside{padding-top:36px}.control{margin:29px 0}}@media(max-width:1100px){.brandnote,.version{display:none}.view-tools{top:auto;bottom:63px}.view-footer>span:last-child{display:none}footer{gap:25px}.footer-note{display:none}h1{font-size:30px}}@media(max-width:720px){header{height:60px;padding:0 20px}.brand{font-size:13px}main{display:flex;flex-direction:column;height:auto;min-height:0}.viewport{height:57dvh;min-height:380px}.view-heading{top:22px;left:21px}.view-heading p{font-size:11px}h1{font-size:27px}.depth-scale{left:21px;top:155px;bottom:84px}.view-footer{left:21px;bottom:16px}.view-tools{right:16px;bottom:47px}aside{border-left:0;border-top:1px solid var(--line);padding:24px;overflow:visible}.panel-title h2{margin-bottom:18px}.mode-card{padding:15px}.control{margin:23px 0}.playback button,.playback select,.options{font-size:14px}footer{height:auto;flex-wrap:wrap;gap:22px;padding:24px}.metric{min-width:calc(33% - 22px)}.metric strong{font-size:24px}.metric>span{font-size:9px;letter-spacing:.6px}}.view-footer,.depth-scale{text-shadow:0 1px 4px #031820,0 0 8px #031820}.view-footer{background:#061b2466;padding:8px 12px;border-radius:4px}.depth-scale{color:#bdd2d8}