/* sea-shell site, 7.0. The page is built from the shell's own parts: the nav is the bar, the
   page sits on the wallpaper, and every section is a frosted panel with a dropdown-style
   header. The accent is the matugen accent (site.js can swap it).
   Inter and JetBrains Mono are the shell's fonts since 7.0 (SIL OFL, see fonts/). */
@font-face{font-family:Inter; src:url(fonts/inter.woff2) format('woff2'); font-weight:100 900; font-display:swap}
@font-face{font-family:"JetBrains Mono"; src:url(fonts/jetbrains-mono.woff2) format('woff2'); font-weight:500; font-display:swap}

:root{
  --accent:#535a92; --accent-ink:#ffffff; --accent-wash:#e2e3f6;
  --bg:#eceaf4; --surface:#fbfaff; --sunken:#ecebf4; --ink:#16171f; --ink-2:#464a5c; --ink-3:#73768a;
  --rule:rgba(30,32,60,.10); --rim:rgba(255,255,255,.65); --glass:rgba(251,250,255,.74);
  --shadow:0 1px 2px rgba(20,22,40,.06),0 12px 34px rgba(20,22,40,.10);
  --veil:linear-gradient(180deg,rgba(236,234,244,.30),rgba(236,234,244,.82) 55%,rgba(236,234,244,.94));
  /* the logo's layers, rewritten by site.js from the accent */
  --sky-top:#c9ccff; --sky-low:#f6c9dc; --moon:#fff6f2;
  --sea0:#9aa1ea; --sea1:#7179cf; --sea2:#535a92; --sea3:#3a3f72; --outline:#2b2f5a;
  --sans:Inter,system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --accent:#bcc2ff; --accent-ink:#1c2050; --accent-wash:#2a2d4b;
  --bg:#0d0e14; --surface:#17181f; --sunken:#22232e; --ink:#e8e8f0; --ink-2:#a9aabb; --ink-3:#7d7e90;
  --rule:rgba(255,255,255,.08); --rim:rgba(255,255,255,.09); --glass:rgba(22,23,31,.72);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 36px rgba(0,0,0,.4);
  --veil:linear-gradient(180deg,rgba(13,14,20,.45),rgba(13,14,20,.86) 55%,rgba(13,14,20,.95));
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --accent:#bcc2ff; --accent-ink:#1c2050; --accent-wash:#2a2d4b;
  --bg:#0d0e14; --surface:#17181f; --sunken:#22232e; --ink:#e8e8f0; --ink-2:#a9aabb; --ink-3:#7d7e90;
  --rule:rgba(255,255,255,.08); --rim:rgba(255,255,255,.09); --glass:rgba(22,23,31,.72);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 14px 36px rgba(0,0,0,.4);
  --veil:linear-gradient(180deg,rgba(13,14,20,.45),rgba(13,14,20,.86) 55%,rgba(13,14,20,.95));
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:64px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--bg); color:var(--ink); font:400 15px/1.6 var(--sans); -webkit-font-smoothing:antialiased}
/* the wallpaper, blurred, under everything; a veil keeps the text readable further down */
body::before,body::after{content:""; position:fixed; inset:0; z-index:-2; pointer-events:none}
body::before{background:url(images/v7/backdrop.webp) center/cover no-repeat}
body::after{z-index:-1; background:var(--veil)}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
img,video{display:block; max-width:100%; height:auto}
code,kbd,.mono{font-family:var(--mono); font-size:.88em}
code{background:var(--sunken); padding:.1em .4em; border-radius:6px}
.ms{font-family:"Material Symbols Rounded"; font-weight:400; font-style:normal; font-size:20px; line-height:1;
  letter-spacing:normal; text-transform:none; white-space:nowrap; direction:ltr; font-feature-settings:"liga"}
.wrap{width:min(1120px,100% - 32px); margin-inline:auto}

/* ---------- glass: the shell's panel ---------- */
.glass{background:var(--glass); -webkit-backdrop-filter:blur(22px) saturate(1.5); backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--rim); border-radius:22px; box-shadow:var(--shadow)}

/* ---------- the bar ---------- */
.bar{position:sticky; top:8px; z-index:20; margin:8px 8px 0; height:42px; display:flex; align-items:center; gap:8px;
  padding:0 7px; border-radius:16px}
.bar .brand{display:flex; align-items:center; gap:8px; padding:0 6px 0 2px; color:var(--ink); font-weight:650; letter-spacing:-.01em}
.bar .brand:hover{text-decoration:none}
.bar .brand svg{width:26px; height:26px}
.ws{display:flex; gap:5px; margin-left:4px}
.ws a{display:grid; place-items:center; height:24px; min-width:24px; padding:0 8px; border-radius:99px;
  background:var(--sunken); color:var(--ink-2); font-size:12px; font-weight:600; transition:background .2s,color .2s,min-width .25s}
.ws a:hover{text-decoration:none; color:var(--ink)}
.ws a.on{background:var(--accent); color:var(--accent-ink); min-width:44px}
.bar .grow{flex:1}
.pill{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px; border-radius:99px;
  background:var(--sunken); color:var(--ink-2); font:500 13px var(--sans); border:0; cursor:pointer}
.pill:hover{color:var(--ink); text-decoration:none; filter:brightness(.97)}
.pill .ms{font-size:17px}
.pill.ver{background:var(--accent-wash); color:var(--accent); font-family:var(--mono); font-size:12px}
.clock{font-family:var(--mono); font-size:12px; color:var(--ink-2); padding:0 8px; height:28px; display:inline-flex; align-items:center;
  border-radius:99px; background:var(--sunken); white-space:nowrap}
@media (max-width:760px){ .clock,.ws,.bar .hide-s{display:none} }

/* ---------- type ---------- */
.eyebrow{font:650 11px/1 var(--sans); letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin:0}
h1,h2,h3{letter-spacing:-.025em; line-height:1.1; margin:0}
h1{font-size:clamp(40px,6.4vw,72px); font-weight:730}
h2{font-size:clamp(28px,3.8vw,42px); font-weight:700}
h3{font-size:16px; font-weight:650; letter-spacing:-.01em; line-height:1.3}
.lede{font-size:clamp(16px,1.8vw,18px); color:var(--ink-2); max-width:600px; margin:0}
.muted{color:var(--ink-3)}
section{padding-top:84px}
.head{display:grid; gap:12px; margin-bottom:26px; max-width:720px}

/* ---------- hero: the page as a desktop ---------- */
.hero{display:grid; grid-template-columns:1.35fr 1fr; gap:28px; align-items:center; padding-top:64px}
.hero .logo-big{width:76px; height:76px; margin-bottom:22px; filter:drop-shadow(0 10px 22px rgba(30,30,80,.25))}
.hero h1{margin:12px 0 16px}
.install{display:flex; align-items:center; gap:6px; max-width:100%; margin-top:26px; padding:5px 5px 5px 16px; border-radius:99px}
.install code{background:none; padding:0; overflow-x:auto; white-space:nowrap; font-size:12.5px; color:var(--ink-2); flex:1; min-width:0; scrollbar-width:none}
.copy{flex:none; height:34px; padding:0 14px; border-radius:99px; border:0; cursor:pointer; background:var(--accent); color:var(--accent-ink);
  font:600 13px var(--sans); display:inline-flex; align-items:center; gap:6px}
.copy .ms{font-size:17px}
.note{font-size:12.5px; color:var(--ink-3); margin:12px 0 0}
.hero > *{min-width:0}
.widgets{display:grid; gap:14px; min-width:0}
/* the clock widget, as the shell draws it */
.wclock{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px}
.wclock .day{font:650 11px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.wclock .time{font:650 46px/1 var(--sans); letter-spacing:-.03em; margin:6px 0 4px; font-feature-settings:"tnum"}
.wclock .date{font-size:12.5px; color:var(--ink-2)}
.wclock svg{width:108px; height:108px; flex:none}
.wsys{padding:16px 20px 18px}
.wsys .gauges{display:flex; justify-content:space-between; gap:8px; margin-top:12px; flex-wrap:wrap}
.gauge{position:relative; width:84px; height:84px}
.gauge svg{width:100%; height:100%}
.gauge b{position:absolute; inset:0; display:grid; place-content:center; text-align:center; font:650 18px/1.1 var(--sans); font-feature-settings:"tnum"}
.gauge b small{display:block; font:650 9px var(--sans); color:var(--ink-3); letter-spacing:.04em; margin-top:3px}
.monitor{margin-top:44px; padding:8px; border-radius:22px}
.monitor video,.monitor img{border-radius:15px; width:100%}
@media (max-width:900px){ .hero{grid-template-columns:1fr} .widgets{grid-template-columns:1fr 1fr} .wclock svg{display:none} }
@media (max-width:560px){ .widgets{grid-template-columns:1fr} }

/* ---------- panel header: DropHeader ---------- */
.ph{display:flex; align-items:center; gap:10px}
.ph .ic{flex:none; width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--accent-wash); color:var(--accent)}
.ph .ic .ms{font-size:19px}
.ph .tt{display:grid; gap:1px; min-width:0}
.ph .tt span{font-size:12.5px; color:var(--ink-3)}
.chip{margin-left:auto; flex:none; font:700 10px var(--sans); letter-spacing:.07em; text-transform:uppercase; padding:4px 8px; border-radius:7px;
  background:var(--accent-wash); color:var(--accent)}
.sect{font:650 11px var(--sans); letter-spacing:.04em; color:var(--ink-3); margin:18px 0 6px}

/* ---------- feature panels: words beside the footage ---------- */
.feats{display:grid; gap:16px}
.feat{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:26px; align-items:center; padding:22px}
.feat.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.feat.flip .copytext{order:2}
.feat .copytext p{color:var(--ink-2); margin:12px 0 0}
.feat .copytext ul{margin:12px 0 0; padding:0; list-style:none; display:grid; gap:7px}
.feat .copytext li{display:grid; grid-template-columns:18px 1fr; gap:8px; color:var(--ink-2)}
.feat .copytext li::before{content:""; width:6px; height:6px; margin:9px 0 0 5px; border-radius:50%; background:var(--accent)}
.media video,.media img{border-radius:14px; border:1px solid var(--rule); width:100%; background:var(--sunken)}
.pair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.pair.wide-left{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.drops{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; align-items:start; margin-top:16px}
.drops img{border-radius:12px; border:1px solid var(--rule)}
@media (max-width:860px){ .feat,.feat.flip{grid-template-columns:1fr} .feat.flip .copytext{order:0} .pair,.pair.wide-left{grid-template-columns:1fr} .drops{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- rows: a Settings list ---------- */
.rows{overflow:hidden}
.row{display:grid; grid-template-columns:34px 150px minmax(0,1fr); gap:14px; align-items:center; padding:13px 18px; border-top:1px solid var(--rule)}
.row:first-child{border-top:0}
.row .ic{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--accent-wash); color:var(--accent)}
.row .ic .ms{font-size:17px}
.row b{font-weight:650}
.row span.t{color:var(--ink-2)}
@media (max-width:640px){ .row{grid-template-columns:30px minmax(0,1fr); align-items:start} .row span.t{grid-column:2} }

/* ---------- colour ---------- */
.swatches{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.sw{width:38px; height:38px; border-radius:50%; border:3px solid var(--surface); outline:2px solid transparent; cursor:pointer; padding:0; transition:outline-color .2s,transform .2s}
.sw:hover{transform:scale(1.08)}
.sw[aria-pressed="true"]{outline-color:var(--ink)}
.logo-demo{width:96px; height:96px; margin-top:18px}

/* ---------- install ---------- */
.steps{counter-reset:s; display:grid; gap:14px; padding:0; margin:16px 0 0}
.steps li{list-style:none; counter-increment:s; display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; align-items:start}
.steps li::before{content:counter(s); width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-wash); color:var(--accent); font:600 12px var(--mono)}
.steps p{margin:3px 0 0; color:var(--ink-2)}
pre{margin:8px 0 0; padding:12px 14px; background:var(--sunken); border-radius:12px; overflow-x:auto; font:500 12.5px/1.6 var(--mono); color:var(--ink-2); white-space:pre; scrollbar-width:thin}
.req{margin:12px 0 0; padding:0; list-style:none; display:grid; gap:8px}
.req li{display:flex; align-items:center; gap:10px; color:var(--ink-2)}
.req li .ms{font-size:18px; color:var(--accent)}

/* ---------- footer ---------- */
footer{margin:90px 8px 8px; padding:16px 18px; border-radius:16px; color:var(--ink-3); font-size:13.5px}
footer .in{display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center}
footer .brand{display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:650}
footer .brand svg{width:22px; height:22px}
footer a{color:var(--ink-2)}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(12px); transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} }

/* ---------- changelog ---------- */
.log{display:grid; grid-template-columns:190px minmax(0,1fr); gap:20px; align-items:start; margin-top:26px}
.toc{position:sticky; top:64px; display:flex; flex-direction:column; gap:2px; max-height:calc(100vh - 80px); overflow:auto; padding:8px}
.toc a{display:flex; justify-content:space-between; gap:8px; padding:6px 10px; border-radius:10px; color:var(--ink-2); font-size:13.5px}
.toc a:hover{background:var(--sunken); text-decoration:none; color:var(--ink)}
.toc a span{font-family:var(--mono); font-size:11.5px; color:var(--ink-3)}
.rel{padding:22px 26px; margin-bottom:14px}
.rel > header{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.rel > header h2{font-size:24px; font-family:var(--mono); letter-spacing:-.02em}
.rel > header time{color:var(--ink-3); font-family:var(--mono); font-size:12.5px}
.rel h3{margin:20px 0 8px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.rel h4{margin:16px 0 6px; font-size:15px}
.rel p,.rel li{color:var(--ink-2)}
.rel ul{padding-left:20px; margin:6px 0}
.rel li{margin:5px 0}
.rel strong{color:var(--ink); font-weight:620}
.rel blockquote{margin:10px 0; padding:2px 14px; border-left:3px solid var(--accent-wash)}
.rel details > summary{cursor:pointer; color:var(--accent); font-weight:600; font-size:13.5px; margin-top:4px}
@media (max-width:820px){ .log{grid-template-columns:1fr} .toc{position:static; flex-direction:row; flex-wrap:wrap; max-height:none} .rel{padding:18px} }