/* ────────────────────────────────────────────────────────────────
   Omarchy Store — relaunch preview
   Two skins, one catalog:  Linux (terminal, wears any Omarchy theme)
                            Glass (colour, depth, dark/light/glass)
   ──────────────────────────────────────────────────────────────── */

:root{
  /* overridden at runtime from the chosen Omarchy theme's colors.toml */
  --bg:#1a1b26; --bg-dark:#13141c; --bg-darker:#0e0e14; --bg-light:#24283b;
  --fg:#a9b1d6; --muted:#414868; --accent:#7aa2f7; --sel:#292e42;
  --border:color-mix(in oklab, var(--fg) 14%, transparent);
  --border-strong:color-mix(in oklab, var(--fg) 26%, transparent);
  --dim:color-mix(in oklab, var(--fg) 55%, transparent);

  --g-bg:#0b0d12; --g-bg2:#11151d; --g-card:#151a23; --g-line:#222834;
  --g-fg:#e8edf7; --g-dim:#98a2b6; --g-accent:#5b9dff; --g-accent2:#8b7bff;

  --font-ui:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"JetBrainsMono Nerd Font", "JetBrains Mono", ui-monospace, monospace;

  --r:10px;
  --sp:clamp(14px, 2.2vw, 26px);
  --maxw:1380px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased}
body{min-height:100vh}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
[hidden]{display:none !important}
::selection{background:var(--sel); color:var(--fg)}

/* ══════════════════════════ chooser ══════════════════════════ */
.chooser{
  min-height:100vh; display:grid; place-items:center; padding:6vh 4vw;
  background:
    radial-gradient(1200px 700px at 20% -10%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(900px 600px at 90% 110%, color-mix(in oklab, #8b7bff 14%, transparent), transparent 60%),
    linear-gradient(180deg, #07090f, #0b0d12 60%, #07090f);
  color:#e8edf7; font-family:var(--font-ui);
}
.chooser-inner{width:min(1180px, 100%)}
.chooser-head{display:flex; gap:22px; align-items:center; margin-bottom:34px}
.chooser-mark{width:74px; height:74px; filter:drop-shadow(0 12px 26px rgba(47,107,255,.35))}
.chooser-head h1{font-size:clamp(28px, 3.4vw, 46px); line-height:1.05; margin:0 0 8px; letter-spacing:-.02em}
.chooser-sub{margin:0; color:#9aa5ba; font-size:15px; max-width:62ch}

.chooser-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
@media (max-width:900px){ .chooser-grid{grid-template-columns:1fr} }

.choose-card{
  position:relative; text-align:left; border-radius:18px; overflow:hidden;
  border:1px solid #1e2532;
  background:linear-gradient(180deg, #10141c, #0b0e14);
  box-shadow:0 2px 0 #05070b, 0 26px 60px -30px rgba(0,0,0,.9);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), border-color .25s, box-shadow .25s;
  display:flex; flex-direction:column;
}
.choose-card:hover{transform:translateY(-4px); border-color:#33405a; box-shadow:0 3px 0 #05070b, 0 36px 70px -30px rgba(0,0,0,1)}
.choose-card:focus-visible{outline:2px solid #5b9dff; outline-offset:3px}
.choose-shot{
  display:block; aspect-ratio:16/10.4; overflow:hidden; position:relative;
  background:
    radial-gradient(600px 300px at 30% 0%, #1b2233, transparent 70%),
    repeating-linear-gradient(180deg, #0e1219 0 22px, #0c1016 22px 44px);
  border-bottom:1px solid #1b2230;
}
.choose-shot img{width:100%; height:100%; object-fit:cover; object-position:top center; opacity:.96}
.choose-shot::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(7,9,15,.55))}
.choose-meta{display:flex; flex-direction:column; gap:6px; padding:18px 20px 22px}
.choose-key{
  position:absolute; top:14px; left:14px; width:26px; height:26px; display:grid; place-items:center;
  border-radius:7px; background:rgba(9,12,18,.8); border:1px solid #2a3444; font:600 12px/1 var(--font-mono); color:#c9d4e6;
}
.choose-name{font-size:22px; font-weight:650; letter-spacing:-.01em}
.choose-desc{color:#98a3b8; font-size:14px; line-height:1.5}
.choose-desc b{color:#c9d4e6; font-weight:600}
.chooser-foot{margin:26px 0 0; color:#5f6b80; font-size:12.5px}

/* ── how everyone shops ── */
.stats{position:fixed; inset:0; display:grid; place-items:center; padding:24px; z-index:60;
  background:rgba(5,7,11,.82); backdrop-filter:blur(10px); font-family:var(--font-ui)}
.stats-card{width:min(560px,100%); background:linear-gradient(180deg,#121620,#0c0f15); border:1px solid #232c3b;
  border-radius:16px; padding:26px 26px 22px; box-shadow:0 2px 0 #05070b, 0 40px 90px -40px #000; color:#e8edf7}
.stats-card h2{margin:0 0 6px; font-size:22px; letter-spacing:-.01em}
.stats-sub{margin:0 0 20px; color:#98a3b8; font-size:14px}
.stats-sub b{color:#e8edf7}
.bar{display:grid; grid-template-columns:74px 1fr 52px; gap:12px; align-items:center; margin:12px 0}
.bar-label{font:500 13px/1 var(--font-mono); color:#c9d4e6}
.bar-track{height:12px; border-radius:99px; background:#1a2029; overflow:hidden; border:1px solid #232b38}
.bar-fill{display:block; height:100%; width:0; border-radius:99px; transform-origin:left center; animation:barGrow .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){.bar-fill{animation:none}}
.bar[data-look="linux"] .bar-fill{background:linear-gradient(90deg,#2f6bff,#4cc2ff)}
.bar[data-look="glass"] .bar-fill{background:linear-gradient(90deg,#8b7bff,#ff7ab8)}
.bar-pct{text-align:right; font:600 14px/1 var(--font-mono); color:#e8edf7}
.stats-note{margin:14px 0 0; color:#6d7a90; font-size:12px}
.stats-actions{display:flex; gap:10px; margin-top:20px}
.btn{border-radius:9px; padding:10px 16px; font:600 13.5px/1 var(--font-ui); transition:transform .15s, background .2s, border-color .2s}
.btn.primary{background:linear-gradient(180deg,#3f7bff,#2f62e6); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 10px 24px -12px #2f6bff}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{background:#161b24; border:1px solid #2a3342; color:#c9d4e6}

/* ══════════════════════════ store shell ══════════════════════════ */
.store{min-height:100vh; display:flex; flex-direction:column}
.main{flex:1; width:100%}
.foot{
  border-top:1px solid var(--border); padding:18px var(--sp); display:flex; gap:14px;
  justify-content:space-between; flex-wrap:wrap; color:var(--dim); font-size:12.5px;
}
.foot-mark{width:14px; height:14px; display:inline-block; vertical-align:-2px; opacity:.8}
.foot-links a{text-decoration:none; border-bottom:1px dotted var(--border-strong); padding-bottom:1px}

/* ─────────────────────────── LINUX SKIN ─────────────────────────── */
html.skin-linux body{font-family:var(--font-mono); background:var(--bg)}

.top{
  position:sticky; top:0; z-index:30;
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--border);
}
.top-in{max-width:var(--maxw); margin:0 auto; padding:0 var(--sp); display:flex; align-items:center; gap:18px; height:60px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto}
.brand img{width:30px; height:30px}
.brand-txt{display:flex; flex-direction:column; line-height:1.05}
.brand-txt b{font-size:13px; letter-spacing:.14em; font-weight:700}
.brand-txt i{font-style:normal; font-size:9.5px; letter-spacing:.3em; color:var(--accent)}

.nav{display:flex; gap:2px; margin-left:6px}
.nav a{
  text-decoration:none; padding:8px 11px; border-radius:7px; font-size:12.5px; color:var(--dim);
  display:inline-flex; gap:7px; align-items:baseline; transition:background .15s,color .15s;
}
.nav a b{font-weight:600; color:var(--muted); font-size:10px}
.nav a:hover{background:var(--bg-light); color:var(--fg)}
.nav a.on{color:var(--fg); background:var(--sel)}
.nav a.on b{color:var(--accent)}

.search{flex:1 1 auto; max-width:460px; margin-left:auto; display:flex; align-items:center; gap:9px;
  background:var(--bg-dark); border:1px solid var(--border); border-radius:8px; padding:0 11px; height:36px;
  transition:border-color .18s, box-shadow .18s}
.search:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent)}
.search span{color:var(--accent); font-weight:700}
.search input{flex:1; background:none; border:0; outline:0; color:var(--fg); font:13px var(--font-mono)}
.search input::placeholder{color:var(--muted)}
.kbd{font:10.5px var(--font-mono); color:var(--muted); border:1px solid var(--border); border-radius:4px; padding:2px 5px}

.top-right{display:flex; align-items:center; gap:8px; margin-left:auto}
.skin-pill{
  display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 10px; border-radius:7px;
  border:1px solid var(--border); background:var(--bg-dark); font-size:12px; color:var(--fg);
  transition:border-color .18s, background .18s;
}
.skin-pill:hover{border-color:var(--accent); background:var(--bg-light)}
.skin-dot{width:10px; height:10px; border-radius:3px; background:linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 55%, var(--fg)))}
.lookswitch{display:flex; border:1px solid var(--border); border-radius:7px; overflow:hidden; background:var(--bg-dark)}
.lookswitch button{padding:7px 10px; font-size:11.5px; color:var(--dim)}
.lookswitch button+button{border-left:1px solid var(--border)}
.lookswitch button.on{background:var(--sel); color:var(--fg)}
.lookswitch button:hover{color:var(--fg)}

/* hero */
.hero{max-width:var(--maxw); margin:0 auto; padding:calc(var(--sp) * 1.15) var(--sp) 6px}
.hero-card{
  position:relative; overflow:hidden; border-radius:var(--r);
  border:1px solid var(--border);
  background:
    radial-gradient(700px 260px at 8% -30%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%),
    linear-gradient(160deg, var(--bg-light), var(--bg-dark) 62%, var(--bg-darker));
  box-shadow:inset 0 1px 0 color-mix(in oklab, var(--fg) 8%, transparent), 0 2px 0 var(--bg-darker), 0 22px 48px -30px #000;
  padding:clamp(20px,3vw,34px);
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(16px,3vw,34px); align-items:center;
}
@media (max-width:860px){ .hero-card{grid-template-columns:1fr} .hero-art{order:-1} }
.eyebrow{font-size:10.5px; letter-spacing:.26em; color:var(--accent); text-transform:uppercase; margin:0 0 12px}
.hero h1{margin:0 0 10px; font-size:clamp(24px,3.2vw,40px); line-height:1.06; letter-spacing:-.02em}
.hero h1 .dim{color:color-mix(in oklab, var(--fg) 62%, transparent)}
.hero p{margin:0 0 18px; color:color-mix(in oklab, var(--fg) 78%, transparent); font-size:13.5px; line-height:1.65; max-width:52ch}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.cmd{
  display:inline-flex; align-items:center; gap:10px; background:var(--bg-darker); border:1px solid var(--border);
  border-radius:8px; padding:9px 12px; font-size:12.5px; color:var(--fg);
}
.cmd em{font-style:normal; color:var(--accent)}
.cmd button{font-size:11px; color:var(--muted); border-left:1px solid var(--border); padding-left:10px}
.cmd button:hover{color:var(--fg)}
.hero-art{position:relative; display:grid; place-items:center; min-height:180px}
.hero-art img{width:clamp(120px, 15vw, 190px); aspect-ratio:1/1; height:auto; filter:drop-shadow(0 26px 34px rgba(0,0,0,.55)) drop-shadow(0 2px 0 rgba(255,255,255,.06)); transform:rotate(-3deg); transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.hero-card:hover .hero-art img{transform:rotate(0) translateY(-4px) scale(1.03)}
.hero-chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.chip{font-size:11px; padding:4px 8px; border-radius:5px; border:1px solid var(--border); color:var(--dim); background:var(--bg-dark)}

/* rows */
.rows{max-width:var(--maxw); margin:0 auto; padding:0 var(--sp) calc(var(--sp) * 1.6)}
.row{margin-top:calc(var(--sp) * 1.15)}
.row-head{display:flex; align-items:baseline; gap:12px; margin-bottom:12px}
.row-head h2{margin:0; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg)}
.row-head .n{font-size:10.5px; color:var(--muted)}
.row-head .more{margin-left:auto; font-size:11.5px; color:var(--dim); text-decoration:none; border-bottom:1px dotted var(--border-strong)}
.row-head .more:hover{color:var(--fg)}

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(258px, 1fr)); gap:12px}
.card{
  position:relative; display:flex; gap:12px; padding:13px; border-radius:var(--r); text-align:left;
  border:1px solid var(--border);
  background:linear-gradient(180deg, var(--bg-light), var(--bg-dark));
  box-shadow:inset 0 1px 0 color-mix(in oklab, var(--fg) 7%, transparent), 0 1px 0 var(--bg-darker), 0 14px 26px -22px #000;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), border-color .2s, box-shadow .2s;
  width:100%;
}
.card:hover{transform:translateY(-2px); border-color:var(--border-strong);
  box-shadow:inset 0 1px 0 color-mix(in oklab, var(--fg) 10%, transparent), 0 2px 0 var(--bg-darker), 0 20px 34px -22px #000}
.card-ico{width:46px; height:46px; flex:0 0 46px; display:grid; place-items:center}
.card-ico img{width:42px; height:42px; aspect-ratio:1/1; object-fit:contain; filter:drop-shadow(0 8px 12px rgba(0,0,0,.45))}
.card-ico img.mark3d{width:46px; height:46px}
.card-body{min-width:0; display:flex; flex-direction:column; gap:3px}
.card-name{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--fg)}
.card-name .dev{font-size:10.5px; color:var(--muted); font-weight:400}
.card-sub{font-size:11.5px; color:var(--dim); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card-foot{display:flex; align-items:center; gap:8px; margin-top:6px; font-size:10.5px; color:var(--muted)}
.pkg{font-size:10.5px; color:var(--accent); background:color-mix(in oklab, var(--accent) 12%, transparent); border:1px solid color-mix(in oklab, var(--accent) 26%, transparent); border-radius:4px; padding:2px 6px}
.get{margin-left:auto; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}

/* theme row */
.themes-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:12px}
.tcard{border-radius:var(--r); overflow:hidden; border:1px solid var(--border); background:var(--bg-dark); text-align:left;
  transition:transform .2s, border-color .2s; box-shadow:0 1px 0 var(--bg-darker)}
.tcard:hover{transform:translateY(-2px); border-color:var(--accent)}
.tcard img{aspect-ratio:16/10; object-fit:cover; width:100%}
.tcard .tmeta{padding:9px 11px; display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.tcard b{font-size:12px; font-weight:600}
.tcard span{font-size:10.5px; color:var(--muted)}
.tcard.on{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset}

/* sponsor */
.sponsor{max-width:var(--maxw); margin:calc(var(--sp) * 1.2) auto 0; padding:0 var(--sp)}
.sponsor-inner{position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--border)}
.sponsor-inner img{width:100%; max-height:300px; object-fit:cover}
.sponsor-tag{position:absolute; top:12px; left:12px; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  background:rgba(8,10,15,.72); border:1px solid rgba(255,255,255,.18); color:#fff; padding:4px 8px; border-radius:5px}
.sponsor-name{position:absolute; left:16px; bottom:14px; font-size:13px; color:#fff; text-shadow:0 2px 10px #000}
.sponsor-bar{display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--bg-dark); border-top:1px solid var(--border); font-size:11.5px; color:var(--dim)}
.sponsor-bar .play{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:#1ed760; color:#06220f; font-size:12px}
.sponsor-bar b{color:var(--fg); font-weight:600}
.sponsor-bar .cta{margin-left:auto; color:#1ed760}

/* skins drawer */
.skins{position:fixed; top:0; right:0; bottom:0; width:min(760px, 94vw); z-index:70; display:flex; flex-direction:column;
  background:color-mix(in oklab, var(--bg) 96%, #000); border-left:1px solid var(--border-strong);
  box-shadow:-40px 0 80px -40px #000}
.skins-head{display:flex; align-items:flex-start; gap:14px; padding:18px var(--sp) 12px; border-bottom:1px solid var(--border)}
.skins-head h2{margin:0 0 3px; font-size:15px; letter-spacing:.1em; text-transform:uppercase}
.skins-head p{margin:0; font-size:11.5px; color:var(--dim)}
.icon-btn{margin-left:auto; width:30px; height:30px; border-radius:7px; border:1px solid var(--border); color:var(--dim); display:grid; place-items:center}
.icon-btn:hover{color:var(--fg); border-color:var(--border-strong)}
.skins-search{margin:12px var(--sp) 8px; padding:9px 12px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg-dark); color:var(--fg); font:12.5px var(--font-mono); outline:0}
.skins-search:focus{border-color:var(--accent)}
.skins-grid{overflow:auto; padding:6px var(--sp) 24px; display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px}
.skin-card{border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--bg-dark); text-align:left; transition:transform .15s, border-color .15s}
.skin-card:hover{transform:translateY(-2px); border-color:var(--border-strong)}
.skin-card.on{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset}
.skin-card img{aspect-ratio:16/10; object-fit:cover; width:100%}
.skin-card .sm{padding:7px 9px; display:flex; justify-content:space-between; gap:6px; align-items:baseline}
.skin-card b{font-size:11.5px; font-weight:600}
.skin-card i{font-style:normal; font-size:9.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}

/* sheet (app detail) — man page style */
.sheet-wrap{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:24px}
.sheet-scrim{position:absolute; inset:0; background:rgba(4,6,10,.7); backdrop-filter:blur(6px)}
.sheet{position:relative; width:min(760px, 100%); max-height:86vh; overflow:auto; border-radius:12px;
  border:1px solid var(--border-strong); background:linear-gradient(180deg, var(--bg-dark), var(--bg-darker));
  box-shadow:0 40px 90px -40px #000; padding:clamp(18px,3vw,30px); font-family:var(--font-mono)}
.man h2{margin:0 0 4px; font-size:19px; letter-spacing:-.01em}
.man .sub{color:var(--dim); font-size:12px; margin:0 0 18px}
.man h3{margin:20px 0 7px; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--accent)}
.man p{margin:0 0 10px; font-size:12.5px; line-height:1.7; color:color-mix(in oklab, var(--fg) 84%, transparent)}
.man dl{display:grid; grid-template-columns:110px 1fr; gap:6px 14px; margin:0; font-size:12px}
.man dt{color:var(--muted)}
.man dd{margin:0; color:var(--fg)}
.man pre{margin:10px 0 0; background:var(--bg-darker); border:1px solid var(--border); border-radius:8px; padding:12px 14px;
  overflow:auto; font-size:12px; color:var(--fg)}
.man .actions{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap}
.man .art{float:right; width:96px; margin:0 0 12px 16px; filter:drop-shadow(0 16px 22px rgba(0,0,0,.5))}

/* toast */
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:90;
  background:var(--bg-light); border:1px solid var(--border-strong); color:var(--fg);
  padding:9px 14px; border-radius:8px; font:12px var(--font-mono); box-shadow:0 20px 40px -20px #000}

/* ─────────────────────────── GLASS SKIN ─────────────────────────── */
html.skin-glass body{font-family:var(--font-ui); background:var(--g-bg); color:var(--g-fg)}

html.skin-glass.mode-dark{ --g-bg:#0a0c11; --g-bg2:#0f131b; --g-card:#141922; --g-line:#212836; --g-fg:#e9eef8; --g-dim:#96a1b6; }
html.skin-glass.mode-light{ --g-bg:#eef1f7; --g-bg2:#e3e8f2; --g-card:#ffffff; --g-line:#d6dce8; --g-fg:#141a24; --g-dim:#5c6678; }
html.skin-glass.mode-glass{ --g-bg:#0a0d14; --g-bg2:#0d1119; --g-card:rgba(255,255,255,.06); --g-line:rgba(255,255,255,.14);
  --g-fg:#f2f6ff; --g-dim:#a7b2c6; }

html.skin-glass body{
  background:
    radial-gradient(900px 600px at 12% -8%, color-mix(in oklab, var(--g-accent) 26%, transparent), transparent 62%),
    radial-gradient(760px 520px at 88% 8%, color-mix(in oklab, var(--g-accent2) 22%, transparent), transparent 62%),
    radial-gradient(900px 700px at 60% 110%, #ff7ab81f, transparent 60%),
    var(--g-bg);
  background-attachment:fixed;
}
html.skin-glass .shell{display:grid; grid-template-columns:248px minmax(0,1fr); min-height:100vh}
@media (max-width:900px){ html.skin-glass .shell{grid-template-columns:1fr} html.skin-glass .side{position:static; height:auto} }

.side{position:sticky; top:0; height:100vh; padding:18px 14px; display:flex; flex-direction:column; gap:14px;
  border-right:1px solid var(--g-line); background:color-mix(in oklab, var(--g-bg2) 72%, transparent); backdrop-filter:blur(18px)}
.side-brand{display:flex; align-items:center; gap:10px; padding:2px 6px 8px}
.side-brand img{width:30px; height:30px}
.side-brand b{font-size:13.5px; letter-spacing:.02em}
.side-brand span{display:block; font-size:10px; color:var(--g-dim); letter-spacing:.06em}

.gsearch{display:flex; align-items:center; gap:8px; background:color-mix(in oklab, var(--g-card) 80%, transparent);
  border:1px solid var(--g-line); border-radius:10px; padding:9px 11px; color:var(--g-dim)}
.gsearch input{flex:1; border:0; outline:0; background:none; color:var(--g-fg); font:13px var(--font-ui)}
.gnav{display:flex; flex-direction:column; gap:2px}
.gnav a{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; text-decoration:none; font-size:13.5px; color:var(--g-dim)}
.gnav a:hover{background:color-mix(in oklab, var(--g-fg) 7%, transparent); color:var(--g-fg)}
.gnav a.on{background:color-mix(in oklab, var(--g-accent) 16%, transparent); color:var(--g-fg)}
.dot{width:8px; height:8px; border-radius:50%; flex:0 0 8px; box-shadow:0 0 10px currentColor}
.side-spacer{flex:1}
.sponsor-mini{border:1px solid var(--g-line); border-radius:12px; padding:11px; background:color-mix(in oklab, var(--g-card) 90%, transparent)}
.sponsor-mini span{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--g-dim)}
.sponsor-mini b{display:block; font-size:12.5px; margin-top:4px}
.sponsor-mini p{margin:3px 0 0; font-size:11px; color:var(--g-dim)}
.modes{display:flex; gap:6px; border-top:1px solid var(--g-line); padding-top:12px}
.modes button{flex:1; padding:7px 0; border-radius:8px; border:1px solid var(--g-line); font-size:11px; color:var(--g-dim)}
.modes button.on{background:color-mix(in oklab, var(--g-accent) 22%, transparent); color:var(--g-fg); border-color:transparent}
.lookswitch.g{border-color:var(--g-line); background:transparent}
.lookswitch.g button{padding:7px 9px; color:var(--g-dim); font-size:11px}
.lookswitch.g button.on{background:color-mix(in oklab, var(--g-fg) 12%, transparent); color:var(--g-fg)}

.gmain{min-width:0; padding:20px clamp(16px,2.4vw,34px) 40px}
.gtop{display:flex; align-items:center; gap:12px; margin-bottom:18px}
.gtop h1{margin:0; font-size:19px; letter-spacing:-.01em}
.gtop .crumb{color:var(--g-dim); font-size:12.5px}
.gtop-right{margin-left:auto; display:flex; gap:8px; align-items:center}

.ghero{position:relative; border-radius:20px; overflow:hidden; padding:clamp(20px,3vw,34px);
  border:1px solid var(--g-line);
  background:
    radial-gradient(600px 320px at 85% 10%, color-mix(in oklab, var(--g-accent2) 34%, transparent), transparent 65%),
    linear-gradient(140deg, color-mix(in oklab, var(--g-accent) 34%, var(--g-bg2)), var(--g-bg2) 63%);
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:20px; align-items:center;
  box-shadow:0 30px 60px -40px #000;
}
@media (max-width:820px){ .ghero{grid-template-columns:1fr} }
html.skin-glass.mode-glass .ghero{backdrop-filter:blur(18px) saturate(1.5)}
.ghero .eyebrow{color:color-mix(in oklab, var(--g-fg) 70%, transparent); letter-spacing:.22em}
.ghero h2{margin:0 0 8px; font-size:clamp(24px,3.1vw,38px); line-height:1.05; letter-spacing:-.025em}
.ghero p{margin:0 0 16px; font-size:14px; line-height:1.6; color:color-mix(in oklab, var(--g-fg) 78%, transparent); max-width:46ch}
.ghero .gbuttons{display:flex; gap:9px; flex-wrap:wrap}
.gbtn{border-radius:999px; padding:10px 18px; font-size:13px; font-weight:600; border:1px solid transparent}
.gbtn.solid{background:var(--g-fg); color:var(--g-bg)}
.gbtn.line{border-color:color-mix(in oklab, var(--g-fg) 30%, transparent); color:var(--g-fg)}
.ghero-art{display:grid; place-items:center}
.ghero-art img{width:clamp(110px,14vw,168px); aspect-ratio:1/1; height:auto; filter:drop-shadow(0 24px 32px rgba(0,0,0,.55))}
.ghero-art img.mark3d{width:clamp(110px,14vw,168px)}

.grow{margin-top:26px}
.grow-head{display:flex; align-items:baseline; gap:10px; margin-bottom:12px}
.grow-head h3{margin:0; font-size:16px; letter-spacing:-.01em}
.grow-head span{font-size:12px; color:var(--g-dim)}
.grow-head .more{margin-left:auto; font-size:12px; color:var(--g-accent); text-decoration:none}

.gshelf{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.gcard{display:flex; gap:12px; padding:13px; border-radius:16px; border:1px solid var(--g-line);
  background:color-mix(in oklab, var(--g-card) 92%, transparent); text-align:left; width:100%;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s;
  box-shadow:inset 0 1px 0 color-mix(in oklab, #fff 8%, transparent), 0 16px 30px -26px #000;
}
html.skin-glass.mode-glass .gcard{backdrop-filter:blur(16px) saturate(1.4); background:rgba(255,255,255,.06)}
.gcard:hover{transform:translateY(-3px); box-shadow:inset 0 1px 0 color-mix(in oklab,#fff 12%,transparent), 0 24px 40px -26px #000; border-color:color-mix(in oklab, var(--g-fg) 26%, transparent)}
.gcard .ico{width:52px; height:52px; flex:0 0 52px; display:grid; place-items:center; border-radius:13px;
  background:color-mix(in oklab, var(--g-fg) 7%, transparent); border:1px solid var(--g-line)}
.gcard .ico img{width:34px; height:34px; aspect-ratio:1/1; object-fit:contain}
.gcard .ico img.mark3d{width:46px; height:46px}
.gcard .body{min-width:0; display:flex; flex-direction:column; gap:2px}
.gcard b{font-size:13.5px}
.gcard .cat{font-size:11px; color:var(--g-dim)}
.gcard .sum{font-size:11.5px; color:var(--g-dim); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:2px}
.gcard .get{margin-top:7px; align-self:flex-start; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  padding:5px 12px; border-radius:999px; background:color-mix(in oklab, var(--g-accent) 26%, transparent); color:var(--g-fg)}
.gcard:hover .get{background:var(--g-accent); color:#fff}

.gthemes{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px}
.gtheme{border-radius:16px; overflow:hidden; border:1px solid var(--g-line); background:var(--g-card); text-align:left;
  transition:transform .2s, border-color .2s}
.gtheme:hover{transform:translateY(-3px); border-color:color-mix(in oklab, var(--g-fg) 26%, transparent)}
.gtheme img{aspect-ratio:16/10; object-fit:cover; width:100%}
.gtheme .m{padding:10px 12px; display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.gtheme b{font-size:13px}
.gtheme span{font-size:11px; color:var(--g-dim)}

/* glass sheet */
html.skin-glass .sheet{font-family:var(--font-ui); border-radius:20px; background:var(--g-card);
  border:1px solid var(--g-line); color:var(--g-fg)}
html.skin-glass.mode-glass .sheet{backdrop-filter:blur(22px) saturate(1.5); background:rgba(16,20,28,.86)}
html.skin-glass .man h2{font-size:22px; letter-spacing:-.02em}
html.skin-glass .man .sub{color:var(--g-dim); font-size:13px}
html.skin-glass .man h3{color:var(--g-accent); letter-spacing:.18em}
html.skin-glass .man p{color:color-mix(in oklab, var(--g-fg) 82%, transparent); font-size:13.5px; font-family:var(--font-ui)}
html.skin-glass .man dt{color:var(--g-dim); font-family:var(--font-ui); font-size:12.5px}
html.skin-glass .man dd{font-family:var(--font-ui); font-size:12.5px}
html.skin-glass .man pre{font-family:var(--font-mono); background:color-mix(in oklab, var(--g-fg) 6%, transparent); border-color:var(--g-line)}
html.skin-glass .man .actions .btn.primary{background:var(--g-accent); box-shadow:0 12px 26px -14px var(--g-accent)}
html.skin-glass .man .actions .btn.ghost{background:color-mix(in oklab, var(--g-fg) 8%, transparent); border-color:var(--g-line); color:var(--g-fg)}

/* small screens: keep the linux top bar usable */
@media (max-width:760px){
  .nav{display:none}
  .search{max-width:none}
  .hero-card{grid-template-columns:1fr}
  .brand-txt i{display:none}
}