:root{
  color-scheme:dark;
  --bg:#010305;
  --bg2:#040910;
  --panel:rgba(7,13,20,.91);
  --panel-hi:rgba(12,22,32,.95);
  --line:rgba(130,218,240,.19);
  --line-hot:rgba(91,232,255,.58);
  --cyan:#52edff;
  --cyan2:#b9faff;
  --mint:#83ffc1;
  --violet:#a78cff;
  --amber:#ffd36f;
  --red:#ff6679;
  --chrome:#e7f5fb;
  --muted:#748b96;
  --muted2:#9aadb5;
  --radius:18px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;min-height:100%;background:#000;color:var(--chrome);overscroll-behavior:none}
body{overflow:hidden}
button,input{font:inherit}
button{touch-action:manipulation}
button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.prime-viewport{
  position:fixed;
  inset:0 auto auto 0;
  width:var(--pv-w,100vw);
  height:var(--pv-h,100dvh);
  transform:translate(var(--pv-left,0),var(--pv-top,0));
  overflow:hidden;
  background:
    radial-gradient(circle at 50% -8%,rgba(62,221,255,.17),transparent 34%),
    radial-gradient(circle at 92% 18%,rgba(135,81,255,.10),transparent 27%),
    radial-gradient(circle at 4% 62%,rgba(31,192,211,.08),transparent 35%),
    linear-gradient(180deg,#04080d 0%,#010305 57%,#000 100%);
}
.prime-scroll{
  position:absolute;inset:0;
  overflow-x:hidden;overflow-y:auto;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.prime-scroll::-webkit-scrollbar{display:none}
.ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden;opacity:.8}
.grid-glow{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(89,220,245,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(89,220,245,.035) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom,black,transparent 74%);
}
.beam{position:absolute;width:55vw;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);filter:drop-shadow(0 0 8px var(--cyan));opacity:.18}
.beam-a{top:17%;left:-10%;transform:rotate(-18deg)}
.beam-b{top:47%;right:-12%;transform:rotate(23deg)}

.shell{
  position:relative;z-index:2;
  width:min(800px,100%);
  margin:0 auto;
  padding:
    max(16px,env(safe-area-inset-top))
    max(12px,env(safe-area-inset-right))
    max(28px,env(safe-area-inset-bottom))
    max(12px,env(safe-area-inset-left));
}
.hero{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  min-height:86px;
  padding:4px 2px 14px;
}
.icon-frame{
  position:relative;
  width:68px;height:68px;padding:2px;
  border:1px solid rgba(130,228,255,.42);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(240,252,255,.16),rgba(35,70,82,.08));
  box-shadow:0 0 0 1px rgba(0,0,0,.7),0 12px 34px rgba(0,0,0,.48),0 0 25px rgba(64,223,255,.14);
  overflow:hidden;
}
.app-icon{display:block;width:100%;height:100%;object-fit:cover;border-radius:16px}
.icon-scan{
  position:absolute;left:8%;right:8%;top:10%;height:1px;
  background:linear-gradient(90deg,transparent,#fff,transparent);
  box-shadow:0 0 9px var(--cyan);
  animation:scan 4.6s ease-in-out infinite;
}
.hero-copy{min-width:0}
.eyebrow{margin:0 0 5px;color:var(--cyan);font:800 9px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.17em}
h1,h2,p{margin:0}
h1{
  font-size:clamp(22px,6vw,35px);
  line-height:.98;
  letter-spacing:-.025em;
  font-weight:900;
  background:linear-gradient(102deg,#71858f 0%,#f7ffff 19%,#95aab3 36%,#fff 51%,#7b919b 69%,#e8fbff 84%,#82969e 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 8px 32px rgba(81,232,255,.08);
}
h1 span{background:linear-gradient(90deg,#9bf8ff,#49e7fa);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:17px;line-height:1.1;letter-spacing:.035em}
.subtitle{margin-top:7px;color:#8aa0aa;font-size:11px;letter-spacing:.08em}
.icon-button,.install-button,.mini-button{
  border:1px solid #2d4b58;
  background:rgba(4,10,15,.8);
  color:#b5c8d0;
  border-radius:999px;
  min-height:38px;
  padding:0 11px;
  font:800 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
}
.icon-button[aria-pressed="true"]{color:var(--cyan);border-color:#347484;box-shadow:inset 0 0 15px rgba(56,224,244,.06)}
.hero-actions{display:flex;flex-direction:column;gap:6px;align-items:stretch;min-width:92px}
.hero-actions .icon-button,.hero-actions .install-button{position:static;min-height:36px;white-space:nowrap;padding-inline:10px}

.command-strip{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:38px;margin:0 0 10px;padding:0 12px;
  border:1px solid rgba(92,212,236,.24);border-radius:12px;
  background:linear-gradient(90deg,rgba(11,25,34,.88),rgba(3,9,14,.84));
  color:#8da2ab;font:800 9px/1 ui-monospace,monospace;letter-spacing:.12em;
}
.command-strip>div{display:flex;align-items:center;gap:8px}
.command-strip strong{color:#dffcff;font-size:11px}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px var(--mint)}
.pulse-dot.live{animation:pulse 1.4s ease-in-out infinite;background:var(--cyan)}
.pulse-dot.paused{background:var(--amber);box-shadow:0 0 12px var(--amber)}

.status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:9px}
.metric,.panel,.runtime-note{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  background:
    linear-gradient(145deg,rgba(13,24,34,.92),rgba(4,8,13,.94));
  box-shadow:
    inset 0 1px rgba(255,255,255,.028),
    0 10px 34px rgba(0,0,0,.29);
}
.metric:before,.panel:before{
  content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;
  background:linear-gradient(transparent,var(--cyan),transparent);
  opacity:.7;
}
.metric{min-height:88px;padding:13px;border-radius:14px}
.metric.wide{grid-column:1/-1;min-height:74px}
.metric-label{display:block;color:#70858f;font:800 8px/1 ui-monospace,monospace;letter-spacing:.14em}
.metric strong{display:block;margin:9px 0 5px;color:var(--cyan2);font-size:16px;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metric small{display:block;color:#60747e;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.panel{padding:16px 14px;border-radius:var(--radius);margin:9px 0}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.badge{
  flex:0 0 auto;
  border:1px solid #3b4b53;border-radius:999px;
  padding:6px 9px;
  color:#9badb5;
  font:800 9px/1 ui-monospace,monospace;
  letter-spacing:.07em;
}
.badge.cyan{color:var(--cyan);border-color:#2b7382}
.badge.good{color:var(--mint);border-color:#2d6f50}
.badge.amber{color:var(--amber);border-color:#725f35}
.badge.bad{color:var(--red);border-color:#753644}
label{display:block;color:#92a6af;font-size:11px;line-height:1.35;margin-bottom:7px}
.input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
input[type="text"],input[type="number"],select{
  width:100%;min-width:0;min-height:46px;
  border:1px solid #263d49;border-radius:11px;
  background:#040b11;color:#eafcff;
  padding:0 12px;
  outline:none;
}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#75dff0 50%),linear-gradient(135deg,#75dff0 50%,transparent 50%);background-position:calc(100% - 17px) 19px,calc(100% - 12px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
input::placeholder{color:#4e626c}
input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(82,237,255,.07)}
button{
  min-height:46px;
  border:1px solid #2c4754;border-radius:11px;
  background:linear-gradient(180deg,#0b151d,#071017);
  color:#c8dbe3;padding:0 14px;
  font-weight:850;font-size:11px;letter-spacing:.04em;
  cursor:pointer;
}
button:active{transform:translateY(1px);filter:brightness(1.18)}
button:disabled{opacity:.38;cursor:not-allowed;transform:none}
button.primary{border-color:#3edcf1;background:linear-gradient(135deg,#0c5260,#082833);color:#d8fcff;box-shadow:0 0 18px rgba(56,223,245,.09)}
button.danger{border-color:#66313b;color:#ff8998;background:linear-gradient(180deg,#1a0d11,#0d080a)}
button.ghost{background:transparent}
.hint{margin-top:9px;color:#6e838d;font-size:10px;line-height:1.5}

.thermal-readout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.thermal-readout>div{
  border:1px solid #17303a;border-radius:12px;padding:11px;
  background:rgba(3,8,12,.55);
}
.thermal-readout span{display:block;color:#647a84;font:800 8px/1 ui-monospace,monospace;letter-spacing:.11em}
.thermal-readout strong{display:block;margin-top:7px;color:#cffaff;font-size:15px}
.thermal-readout .danger-readout{border-color:#542a33}.danger-readout strong{color:#ff92a0}
.thermal-scale{margin:16px 0 13px}
.thermal-track{height:8px;border-radius:99px;background:linear-gradient(90deg,#16454b 0 35%,#39654e 50%,#84682d 76%,#852c38 100%);box-shadow:inset 0 0 0 1px #2b4148;overflow:hidden}
.thermal-track span{display:block;height:100%;width:53%;border-right:2px solid #fff;background:linear-gradient(90deg,transparent,rgba(255,255,255,.24));transition:width .3s ease}
.ticks{display:flex;justify-content:space-between;gap:6px;margin-top:7px;color:#566d77;font:700 8px/1.3 ui-monospace,monospace}
.ticks b{font-weight:800;color:#7c949e}
.temp-row{grid-template-columns:minmax(0,1fr) auto}

.toggle-grid{display:grid;gap:8px}
.toggle-row{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:11px;
  margin:0;padding:11px;
  border:1px solid #172c36;border-radius:12px;
  background:rgba(3,8,12,.48);
}
.toggle-row input{appearance:none;-webkit-appearance:none;width:42px;height:24px;margin:0;border-radius:99px;background:#111b21;border:1px solid #2a3d46;position:relative;transition:.2s}
.toggle-row input:before{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;border-radius:50%;background:#61737c;transition:.2s}
.toggle-row input:checked{background:#0b4d58;border-color:#2ecde1;box-shadow:0 0 12px rgba(67,225,245,.11)}
.toggle-row input:checked:before{left:20px;background:#baf9ff;box-shadow:0 0 8px var(--cyan)}
.toggle-row b{display:block;color:#bed0d7;font-size:11px}.toggle-row small{display:block;color:#637781;font-size:9px;margin-top:3px}
.worker-control{margin-top:14px;padding-top:13px;border-top:1px solid rgba(117,191,210,.12)}
.worker-copy{display:flex;align-items:center;justify-content:space-between;color:#657a84;font:800 9px/1 ui-monospace,monospace;letter-spacing:.1em}
.worker-copy strong{color:var(--cyan2);font-size:16px}
input[type="range"]{width:100%;height:30px;accent-color:var(--cyan)}

.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.profile-field{margin:0}
.profile-field>span{display:block;margin-bottom:7px;color:#70858f;font:800 8px/1 ui-monospace,monospace;letter-spacing:.12em}
.profile-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-top:10px}
.profile-actions button{min-width:0;padding-inline:8px}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.progress{height:6px;margin:14px 0 10px;border-radius:99px;background:#020506;border:1px solid #152a34;overflow:hidden}
.progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,#2aaabd,var(--cyan),#bafaff);transition:width .22s ease}
.mono{min-height:36px;color:#8bc8d1;font:600 10px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}
.readout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:13px}
.readout>div{min-width:0;padding:10px;border:1px solid #162d37;border-radius:11px;background:#03080c}
.readout span{display:block;color:#617782;font:800 8px/1 ui-monospace,monospace;letter-spacing:.1em}
.readout strong{display:block;margin-top:7px;color:#c8f7fb;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-button{min-height:32px;padding:0 10px}
.log-actions{display:flex;gap:6px;align-items:center}

.log{
  max-height:230px;min-height:134px;
  overflow:auto;border:1px solid #132a34;border-radius:12px;
  background:#010406;padding:8px;
  font:600 9px/1.52 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#7faeb8;
}
.log-line{display:grid;grid-template-columns:58px minmax(0,1fr);gap:8px;padding:5px 4px;border-bottom:1px solid rgba(112,190,209,.07)}
.log-line:last-child{border-bottom:0}
.log-time{color:#455d67}.log-line.good .log-message{color:#85dcb3}.log-line.warn .log-message{color:#e1bc6d}.log-line.bad .log-message{color:#ef7f8d}.log-line.info .log-message{color:#86cbd5}

.runtime-note{border-radius:14px;margin:9px 0;padding:13px 14px;color:#687d86;font-size:9px;line-height:1.5}
.runtime-note strong{display:block;color:#8398a1;font:800 8px/1 ui-monospace,monospace;letter-spacing:.13em;margin-bottom:6px}
footer{display:flex;justify-content:space-between;gap:12px;padding:13px 3px 2px;color:#465c65;font:800 8px/1.35 ui-monospace,monospace;letter-spacing:.08em}

body.oled .prime-viewport{background:#000}
body.oled .ambient{opacity:.28}
body.oled .metric,body.oled .panel,body.oled .runtime-note{background:rgba(2,5,8,.96)}

[data-pressure="tight"] .shell{padding-left:8px;padding-right:8px}
[data-pressure="tight"] .hero{gap:9px}
[data-pressure="tight"] .icon-frame{width:56px;height:56px;border-radius:16px}
[data-pressure="tight"] .app-icon{border-radius:13px}
[data-pressure="tight"] h1{font-size:21px}
[data-pressure="tight"] .panel{padding:13px 11px}

@media(min-width:640px){
  .status-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .metric.wide{grid-column:auto}
  .thermal-readout{grid-template-columns:repeat(4,minmax(0,1fr))}
  .toggle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .actions{grid-template-columns:repeat(4,minmax(0,1fr))}
  .readout{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:520px){
  .profile-grid{grid-template-columns:1fr}
  .profile-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile-actions .danger{grid-column:1/-1}
  .hero{grid-template-columns:58px minmax(0,1fr)}
  .icon-frame{width:58px;height:58px;border-radius:17px}
  .app-icon{border-radius:14px}
  .hero-actions{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-width:0}
  .hero-actions .icon-button,.hero-actions .install-button{width:100%;min-width:0}
  .subtitle{font-size:10px}
  .input-row{grid-template-columns:1fr}
  .input-row button{width:100%}
  .temp-row{grid-template-columns:minmax(0,1fr) auto}
  .temp-row button{width:auto}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
}
@keyframes scan{0%,100%{top:9%;opacity:.25}50%{top:88%;opacity:.75}}
@keyframes pulse{0%,100%{opacity:.55;transform:scale(.88)}50%{opacity:1;transform:scale(1.12)}}

.compute-panel .fabric-readout strong{font-size:11px}

.install-guide{max-width:min(420px,calc(100vw - 32px));box-sizing:border-box;max-height:85dvh;overflow:auto;background:#08131c;color:#e4edf5;border:1px solid #769eaf;border-radius:18px;padding:24px;box-shadow:0 0 34px #00cfff25}
.install-guide::backdrop{background:#000c}
.install-guide img{border-radius:16px}
.install-guide h2{font-size:18px;letter-spacing:1px}
.install-guide p{line-height:1.6;font-size:15px}
.install-guide .install-note{color:#a5b6c7;font-size:13px}
.install-guide a{color:#55dbff;display:block;margin:16px 0}
.install-guide button{min-height:44px}
.install-button{white-space:normal;min-height:40px}