/* Shelly Launchpad — same look as the Shelly app and pavi44m.github.io/pavibamunu */
:root{color-scheme:dark;
  --void:#070b12;--panel:#0f1622;--panel-2:#141e2c;--etch:#1f2a38;--etch-2:#172230;
  --ink:#eaf0f6;--ink-2:#b0bac8;--ink-3:#7d8a9c;--accent:#63b6d8;
  --ok:#3fb87f;--warn:#e0a53a;--bad:#e66767;--new:#b69cf2;
  --mono:"JetBrains Mono",ui-monospace,monospace}
*{box-sizing:border-box}
html,body{background:var(--void)}
body{margin:0;padding:env(safe-area-inset-top,0) 20px calc(40px + env(safe-area-inset-bottom,0));color:var(--ink-2);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.wrap{max-width:1080px;margin:0 auto}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3)}
header{padding-block:64px 8px}
h1{font-size:clamp(32px,6.2vw,56px);font-weight:300;letter-spacing:-.03em;line-height:1.05;margin:16px 0 0;color:var(--ink);text-wrap:balance}
h1 b{font-weight:600}
.sub{font-size:clamp(16px,2.2vw,18px);max-width:60ch;margin:18px 0 0}
.who{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:20px;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.05em}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:12px;margin-top:40px;padding-top:32px;border-top:1px solid var(--etch-2)}
.card{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:18px 18px 16px;border:1px solid var(--etch);border-radius:3px;
  background:linear-gradient(165deg,var(--panel-2),var(--panel) 62%);color:inherit;text-decoration:none;transition:border-color .2s,transform .2s}
a.card:hover,a.card:focus-visible{border-color:var(--accent);transform:translateY(-2px);outline:none}
a.card:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.card.wide{grid-column:span 2}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grid{grid-template-columns:minmax(0,1fr)}.card.wide{grid-column:auto}}
.top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.top .tag{letter-spacing:.16em;font-size:9.5px}
.chip{font-family:var(--mono);font-size:10px;padding:2px 8px;border-radius:10px;border:1px solid var(--etch);color:var(--ink-3);white-space:nowrap}
.chip.live{color:var(--ok);border-color:currentColor}.chip.new{color:var(--new);border-color:currentColor}.chip.warn{color:var(--warn);border-color:currentColor}
.card h2{margin:4px 0 0;font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.card p{margin:0;font-size:14px;line-height:1.5;max-width:60ch}
.fig{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.fig div{display:grid;gap:2px;min-width:0}
.fig b{font-family:var(--mono);font-weight:500;font-size:26px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
.fig span{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.go{position:absolute;right:16px;bottom:14px;font-family:var(--mono);color:var(--ink-3);transition:color .2s,transform .2s}
a.card:hover .go{color:var(--accent);transform:translateX(3px)}
.card.wide .go{display:none}
.spark{width:150px;height:36px;flex:none}
.spark .sa{fill:var(--accent);fill-opacity:.12}.spark .sl{fill:none;stroke:var(--accent);stroke-width:1.5}.spark .se{fill:var(--accent)}
.shelves{display:flex;gap:2px;align-items:flex-end;height:36px;flex:none}
.shelves i{width:5px;height:100%;border-radius:2px}.shelves .bad{background:var(--bad)}.shelves .warn{background:var(--warn);height:70%}.shelves .ok{background:var(--ok);height:45%}
.ring{width:56px;height:56px;flex:none}
.ring .rc{fill:none;stroke:var(--new);stroke-width:1.5;opacity:.7}
.ring .d{animation:blink 2.4s ease-in-out infinite}
.ring .ok{fill:var(--ok)}.ring .warn{fill:var(--warn)}.ring .bad{fill:var(--bad)}
@keyframes blink{0%,100%{opacity:.35}12%{opacity:1}}
@media (prefers-reduced-motion:reduce){.ring .d{animation:none}a.card,.go{transition:none}}
#boot{position:fixed;inset:0;z-index:50;background:var(--void);display:grid;place-items:center;padding:24px;transition:opacity .6s ease,visibility .6s}
#boot.done{opacity:0;visibility:hidden}
.boot-in{width:min(560px,100%)}
.boot-h{margin:14px 0 0;font-size:clamp(22px,4.6vw,32px);font-weight:300;color:var(--ink);letter-spacing:-.02em}.boot-h b{font-weight:600}
.boot-orbs{display:flex;gap:10px;margin-top:20px}
.boot-orbs i{width:12px;height:12px;border-radius:50%;opacity:.25;animation:orb 1.2s ease-in-out infinite}
.boot-orbs .a{background:var(--accent)}.boot-orbs .b{background:var(--new);animation-delay:.2s}.boot-orbs .c{background:var(--ok);animation-delay:.4s}
@keyframes orb{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
#bootLog{font-family:var(--mono);font-size:12.5px;line-height:1.9;color:var(--ink-2);white-space:pre-wrap;min-height:170px;margin:14px 0 0}
#bootLog .ok{color:var(--accent)}
#skipBoot{font-family:var(--mono);font-size:11px;background:none;border:1px solid var(--etch);color:var(--ink-3);border-radius:3px;padding:6px 12px;cursor:pointer}
#skipBoot:hover{color:var(--ink);border-color:var(--accent)}
@media (prefers-reduced-motion:reduce){.boot-orbs i{animation:none;opacity:1}}
footer{margin-top:48px;padding-top:20px;border-top:1px solid var(--etch-2);display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12.5px;color:var(--ink-3)}