:root { color-scheme:dark; font-family:Inter,"Segoe UI",sans-serif; color:#e7ebed; background:#111315; font-synthesis:none; letter-spacing:0; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button,a { color:inherit; }
button { width:44px; height:44px; padding:11px; border:1px solid transparent; border-radius:50%; background:transparent; cursor:pointer; flex-shrink:0; transition:color .15s,background .15s,border-color .15s; }
button:hover,button:focus-visible { background:#272c2e; border-color:#667173; color:#fff; outline:none; }
button:disabled { opacity:.35; cursor:default; }
button[aria-pressed=true] { color:#86edd6; background:#203332; border-color:#3c6e62; }
button.power[aria-pressed=true] { color:#111d18; background:#a1edcc; border-color:#a1edcc; }
svg { width:22px; height:22px; stroke-width:1.5; display:block; flex:none; }
a { text-decoration:none; }
a:hover { color:#a1edcc; }
#viewport { position:fixed; inset:0; }
#viewport canvas { display:block; width:100%; height:100%; touch-action:none; }
#interface { position:fixed; inset:0; pointer-events:none; }
#interface button,#interface a,#interface input,#reactors { pointer-events:auto; }
header { position:absolute; top:28px; left:32px; right:32px; }
.brand { font-size:12px; font-weight:650; display:flex; align-items:center; gap:10px; width:max-content; }
.brand-mark { width:16px; height:16px; border:1px solid #a1edcc; border-radius:50%; position:relative; }
.brand-mark:after { content:""; position:absolute; inset:3px -4px; border:1px solid #a1edcc; border-radius:50%; transform:rotate(-45deg); }
.edition { color:#7c898d; font-size:10px; margin-left:20px; font-weight:400; }
.identity { margin-top:37px; max-width:485px; }
#family { font-size:10px; color:#96d9c5; text-transform:uppercase; }
h1 { font-size:36px; line-height:1.14; font-weight:450; margin:9px 0 10px; }
#principle { font-size:12px; color:#99a3a7; line-height:1.7; max-width:425px; margin:0; }
.session-tools { position:absolute; right:0; top:-7px; display:flex; gap:9px; }
.split-audio { display:flex; align-items:center; }
.split-audio button { width:35px; padding:8px; border-radius:0; }
.split-audio button+button { border-left:1px solid #45545a; }
#opacity { color:#72dfee; } #view { color:#ffc477; } #fields,#fields[aria-pressed=true] { color:#ff8ec6; } #reset { color:#9ccfff; } #pause { color:#b8ee87; } #audio,#audio[aria-pressed=true] { color:#ffd58c; } #machine,#machine[aria-pressed=true] { color:#7ee7df; }
#current { color:#86dfff; } #heat { color:#ff9c73; } #inject { color:#c8a6ff; } #plots { color:#80c8ff; } #speed { color:#a8edb2; }
.split-audio button[aria-pressed=false] { opacity:.4; }
.session-tools .accent { border-color:#6c8c81; color:#a1edcc; width:52px; height:52px; padding:13px; }
.session-tools .accent svg { width:24px; height:24px; }
#reactors { position:absolute; left:27px; top:50%; transform:translateY(-32%); display:grid; grid-template-columns:repeat(2,48px); gap:9px; }
#reactors button { width:48px; height:44px; border-radius:6px; padding:8px 10px; color:#869498; position:relative; }
#reactors button svg { width:28px; height:28px; }
#reactors button[aria-pressed=true] { color:#b6f4de; border-color:#3e6e62; }
#reactors button:hover:after,#reactors button:focus-visible:after { content:attr(data-name); position:absolute; left:56px; top:8px; padding:7px 11px; white-space:nowrap; font-size:11px; background:#252b2d; border-radius:3px; z-index:5; pointer-events:none; }
#readout { position:absolute; left:50%; bottom:193px; transform:translateX(-50%); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:9px; width:max-content; max-width:calc(100% - 48px); font-size:11px; text-transform:uppercase; color:#cae5dc; }
#phase-dot { height:5px; width:5px; border-radius:50%; background:#a1edcc; }
#sequence-index { flex-basis:100%; text-align:center; color:#92aaa2; font-size:10px; }
#operation { position:absolute; bottom:143px; left:50%; transform:translateX(-50%); max-width:540px; width:calc(100% - 72px); min-height:28px; text-align:center; color:#929e9f; font-size:12px; line-height:1.65; }
#parameters { position:absolute; right:32px; top:49%; display:flex; flex-direction:column; gap:25px; }
#parameters label { display:flex; align-items:center; gap:11px; }
#parameters svg { width:17px; height:17px; color:#87ad9f; }
input[type=range] { width:100px; height:22px; accent-color:#a1edcc; cursor:pointer; }
output { color:#7f8f8d; font-size:10px; width:31px; text-align:right; font-variant-numeric:tabular-nums; }
footer { position:absolute; left:28px; right:28px; bottom:max(17px,env(safe-area-inset-bottom)); }
.toolbar { display:flex; gap:8px; align-items:center; justify-content:center; margin-bottom:27px; }
.divider { width:1px; height:22px; background:#39403f; margin:0 7px; flex-shrink:0; }
.bottomline { display:flex; gap:15px; align-items:center; font-size:9px; color:#6e7d7c; }
.bottomline #counter { margin-right:auto; color:#9ca8a6; font-variant-numeric:tabular-nums; }
.bottomline svg { width:15px; height:15px; }
#notice { position:fixed; top:85px; right:25px; max-width:min(390px,calc(100% - 50px)); padding:13px 17px; border:1px solid #6b7872; background:#202a27; color:#e9f6ee; font-size:13px; line-height:1.5; border-radius:4px; z-index:100; }
#loading { position:fixed; inset:0; display:grid; place-items:center; background:#111315; z-index:80; }
.loading-ring { width:30px; height:30px; border:1px solid #3d4d48; border-top-color:#a1edcc; border-radius:50%; animation:load 1s linear infinite; }
@keyframes load { to { transform:rotate(360deg); } }
[hidden] { display:none!important; }
body.in-xr #interface,body.in-xr #notice { display:none; }
@media(max-height:750px) and (min-width:761px) { .identity { margin-top:22px; } h1 { font-size:30px; } #reactors { top:44%; gap:3px; } #reactors button { height:36px; padding:4px 10px; } #readout { bottom:179px; } #operation { bottom:140px; } .toolbar { margin-bottom:16px; } }
@media(max-width:760px) {
 header { top:21px; left:20px; right:20px; } .edition { display:none; } .brand { font-size:10px; }
 .identity { margin-top:26px; max-width:calc(100% - 8px); } h1 { font-size:25px; margin:7px 0; } #family { font-size:9px; } #principle { font-size:10px; line-height:1.5; max-width:320px; }
 .session-tools { top:-7px; gap:0; } .session-tools .accent { width:42px; height:42px; padding:9px; } .session-tools #audio { width:38px; height:42px; padding:10px 8px; }
 #reactors { top:182px; left:12px; right:12px; display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; transform:none; padding:1px 4px; } #reactors::-webkit-scrollbar { display:none; } #reactors button { width:39px; height:39px; padding:6px; } #reactors button:hover:after,#reactors button:focus-visible:after { display:none; }
 #parameters { top:auto; bottom:179px; left:20px; right:20px; flex-direction:row; justify-content:center; gap:13px; } #parameters label { gap:6px; } #parameters input { width:58px; } #parameters output { display:none; }
 #readout { bottom:175px; font-size:9px; } #operation { bottom:122px; font-size:10px; line-height:1.5; width:calc(100% - 40px); min-height:38px; }
 footer { left:16px; right:16px; bottom:max(15px,env(safe-area-inset-bottom)); } .toolbar { max-width:380px; margin:0 auto 18px; display:grid; grid-template-columns:repeat(6,40px); justify-content:center; gap:7px 13px; } .toolbar button { width:40px; height:40px; padding:9px; } .divider { display:none; } .bottomline { gap:10px; font-size:8px; } .bottomline span:nth-child(2) { max-width:210px; }
}
@media(max-height:700px) and (max-width:760px) { #principle { display:none; } #reactors { top:137px; } #readout { bottom:158px; } #operation { bottom:106px; } .toolbar { gap:2px 13px; margin-bottom:9px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; } }