/* Aether presentation site — glassmorphism reskin.
   Concept: Disclosure = looking THROUGH frosted glass at the invisible spectrum
   (a slow spectral aurora of the three brand hues drifting behind the glass). */
:root {
  --surface-0:#09090B; --surface-2:#18181B; --surface-3:#1F1F23; --surface-4:#27272A;
  --border-subtle:rgba(255,255,255,.07); --border-default:rgba(255,255,255,.14);
  --disclosure:#B388FF;   /* reveal the invisible */
  --manipulation:#FF6D00; /* act / alter state */
  --cli:#00E676;          /* raw CLI/tool output ONLY */
  --online:#22c55e; --error:#ef4444;
  --text:#f4f4f5; --text-dim:#a1a1aa; --text-faint:#71717a;
  --veil:rgba(255,255,255,.05); --edge:rgba(255,255,255,.09);
  --font-sans:"Inter",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--surface-0); color:var(--text);
  font-family:var(--font-sans); line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---- signature: spectral aurora seen through the glass ("the invisible spectrum") ---- */
.aurora { position:fixed; inset:-20vmax; z-index:0; pointer-events:none;
          filter:blur(90px) saturate(130%); opacity:.5; }
.aurora span { position:absolute; border-radius:50%; mix-blend-mode:screen;
               animation:drift 26s ease-in-out infinite; }
.aurora .a { width:46vmax; height:46vmax; top:-4%; left:6%;
             background:radial-gradient(circle, var(--disclosure), transparent 62%); }
.aurora .b { width:44vmax; height:44vmax; top:16%; right:2%; animation-delay:-8s;
             background:radial-gradient(circle, var(--manipulation), transparent 60%); }
.aurora .c { width:30vmax; height:30vmax; bottom:-26%; left:46%; animation-delay:-15s;
             opacity:.3; /* green kept low & mostly off-screen — a hint, never a wash */
             background:radial-gradient(circle, var(--cli), transparent 68%); }
@keyframes drift {
  0%,100% { transform:translate3d(0,0,0) scale(1); }
  33%     { transform:translate3d(6vmax,-4vmax,0) scale(1.07); }
  66%     { transform:translate3d(-5vmax,5vmax,0) scale(.95); }
}
.grain { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.35;
         background-image:radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
         background-size:3px 3px; }

/* everything sits above the atmosphere */
.nav, main, footer { position:relative; z-index:2; }

/* ---- glass primitive (nav, hero, cards, screenshot windows) ---- */
.nav, .hero, .card, .shot {
  background:var(--veil);
  -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--edge);
  box-shadow:0 10px 40px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  contain:paint;
}
/* no backdrop-filter support -> solid surfaces so text stays readable */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .nav, .hero, .card, .shot { background:rgba(24,24,27,.92); }
}
/* users who ask for less transparency -> flat surfaces, dimmer atmosphere */
@media (prefers-reduced-transparency:reduce) {
  .nav, .hero, .card, .shot { background:#161618; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .aurora { opacity:.24; }
}
@media (prefers-reduced-motion:reduce) { .aurora span { animation:none; } }

a { color:var(--disclosure); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { line-height:1.2; font-weight:700; }
p { color:var(--text-dim); }

.wrap { max-width:1060px; margin:0 auto; padding:0 1.25rem; }
.mono-label { font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.2em;
              font-size:.7rem; color:var(--text-faint); }
.c-disc { color:var(--disclosure); } .c-manip { color:var(--manipulation); } .c-cli { color:var(--cli); }

/* ---- nav: floating glass bar ---- */
.nav {
  position:sticky; top:.85rem; z-index:20; max-width:1060px; margin:.85rem auto 0;
  display:flex; align-items:center; gap:1.25rem; padding:.6rem 1.1rem; border-radius:14px;
}
.nav .brand { font-family:var(--font-mono); font-weight:700; letter-spacing:.04em; color:#fff; }
.nav .brand .dot { color:var(--disclosure); }
.nav .links { margin-left:auto; display:flex; gap:1.25rem; align-items:center;
              font-family:var(--font-mono); font-size:.82rem; }
.nav .links a { color:var(--text-dim); }
.nav .links a:hover { color:#fff; text-decoration:none; }

/* ---- buttons ---- */
.btn { display:inline-block; padding:.72rem 1.35rem; border-radius:.7rem; font-weight:600;
       font-family:var(--font-mono); font-size:.9rem; border:1px solid var(--border-default);
       transition:transform .12s, box-shadow .2s; }
.btn:hover { text-decoration:none; transform:translateY(-2px); }
.btn-primary { background:var(--manipulation); color:#180c00; border-color:transparent;
               box-shadow:0 8px 26px -8px var(--manipulation); }
.btn-ghost { color:var(--disclosure); border-color:color-mix(in oklab,var(--disclosure) 55%, transparent);
             background:rgba(179,136,255,.06);
             -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.btn-ghost:hover { box-shadow:0 8px 26px -12px var(--disclosure); }

/* ---- hero: glass panel framing the brand image ---- */
.hero { text-align:center; margin-top:2.4rem; padding:clamp(1.5rem,4vw,2.6rem); border-radius:20px;
        background:rgba(255,255,255,.032); /* a touch more transparent — aurora reads through */ }
.hero img { width:100%; max-width:720px; border-radius:14px; border:1px solid var(--edge);
            box-shadow:0 12px 40px -16px rgba(0,0,0,.8); }
.hero h1 { font-family:var(--font-mono); font-size:clamp(2rem,5vw,3.1rem); letter-spacing:-.01em;
           margin:1.6rem 0 .3rem; }
.hero .tag { color:var(--text-dim); font-size:1.1rem; margin:.3rem 0 1.6rem; }
.hero .cta { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }

/* ---- sections ---- */
main { padding-top:1rem; }
/* section.wrap beats .wrap's `padding:0 1.25rem`; keep the horizontal padding,
   set generous vertical rhythm — more above the divider than below, so the rule
   reads as belonging to the section that follows it. */
section.wrap { padding-top:3rem; padding-bottom:4.25rem; }
section + section { border-top:1px solid var(--border-subtle); }
section h2 { font-size:1.6rem; margin:.4rem 0 1.1rem; }
.lead { font-size:1.05rem; max-width:70ch; }

/* ---- cards / grids ---- */
.card { border-radius:16px; padding:1.4rem 1.45rem; position:relative; overflow:hidden; }
.triplet { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:1.25rem; }
.triplet .card h3 { margin:.25rem 0 .45rem; font-size:1.05rem; }
/* colored top-edge glow that carries each card's meaning */
.triplet .card::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; }
.triplet .card.disc::before  { background:var(--disclosure);   box-shadow:0 0 22px -1px var(--disclosure); }
.triplet .card.manip::before { background:var(--manipulation); box-shadow:0 0 22px -1px var(--manipulation); }
.triplet .card.cli::before   { background:var(--cli);          box-shadow:0 0 22px -1px var(--cli); }

/* ---- screenshots as glass "observation windows" ---- */
.shot { border-radius:16px; overflow:hidden; }
.shot img { width:100%; display:block; border-bottom:1px solid var(--edge); }
.shot figcaption { padding:.75rem 1rem; font-size:.85rem; color:var(--text-dim); margin:0; }

/* carousel for the big, full-width screenshots */
.carousel { position:relative; margin-top:1.25rem; }
.carousel-track { display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
                  border-radius:16px; scrollbar-width:none; }
.carousel-track::-webkit-scrollbar { display:none; }
.carousel-track .shot { flex:0 0 100%; scroll-snap-align:center; }
.carousel-btn { position:absolute; top:42%; transform:translateY(-50%);
                width:2.6rem; height:2.6rem; border-radius:50%; cursor:pointer; font-size:1.1rem; line-height:1;
                display:flex; align-items:center; justify-content:center; color:#fff;
                background:rgba(24,24,27,.55); border:1px solid var(--edge);
                -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.carousel-btn:hover { border-color:var(--disclosure); color:var(--disclosure); }
.carousel-btn.prev { left:.6rem; } .carousel-btn.next { right:.6rem; }
.carousel-dots { display:flex; gap:.5rem; justify-content:center; margin-top:.9rem; }
.carousel-dots button { width:.55rem; height:.55rem; border-radius:50%; border:none;
                        background:rgba(255,255,255,.18); cursor:pointer; padding:0; transition:background .2s; }
.carousel-dots button.active { background:var(--manipulation); box-shadow:0 0 12px -2px var(--manipulation); }

/* detail crops carousel: one centered portrait panel per view (reuses the carousel JS) */
.details-carousel .slide { flex:0 0 100%; scroll-snap-align:center; display:flex; justify-content:center; padding:.5rem 0 1.5rem; }
.details-carousel .slide .shot { flex:0 1 auto; width:100%; max-width:440px; }

/* ---- manifesto ---- */
.manifesto p { color:var(--text); max-width:none; } /* fill the wrap like the rest of the page */
.manifesto .intro { font-size:1.15rem; }
.manifesto strong { color:#fff; }

/* ---- command blocks (kept SOLID — code legibility beats the effect) ---- */
.tabs { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.6rem; }
.tab { font-family:var(--font-mono); font-size:.8rem; padding:.4rem .8rem; border-radius:.5rem;
       background:rgba(255,255,255,.04); color:var(--text-dim); border:1px solid var(--edge); cursor:pointer; }
.tab.active { color:var(--manipulation); border-color:var(--manipulation);
              background:color-mix(in oklab,var(--manipulation) 12%, transparent); }
.cmd-block { position:relative; }
.cmd { font-family:var(--font-mono); font-size:.85rem; background:#0b0b0e; color:var(--cli);
       border:1px solid var(--border-subtle); border-radius:.6rem; padding:.85rem 3.5rem .85rem 1rem;
       overflow-x:auto; white-space:pre; margin:0; }
.cmd .prompt { color:var(--text-faint); }
.copy { position:absolute; top:.5rem; right:.5rem; font-family:var(--font-mono); font-size:.7rem;
        padding:.3rem .55rem; border-radius:.45rem; background:var(--surface-4); color:var(--text-dim);
        border:1px solid var(--border-default); cursor:pointer; }
.copy:hover { color:#fff; }
.prereq { font-size:.9rem; color:var(--text-dim); margin:0 0 1rem; }
.prereq code { color:var(--disclosure); }

/* ---- troubleshooting ---- */
.tshoot { display:grid; gap:1rem; margin-top:1.25rem; }
.tshoot .card h3 { margin:0 0 .5rem; font-size:1rem; color:#fff; }
.tshoot code { font-family:var(--font-mono); background:#0b0b0e; border:1px solid var(--border-subtle);
               border-radius:.35rem; padding:.1rem .4rem; color:var(--cli); font-size:.85em; }

/* ---- footer ---- */
footer { border-top:1px solid var(--border-subtle); padding:2.5rem 0 3rem; margin-top:1rem; text-align:center; }
footer .links { margin:.5rem 0; display:flex; gap:1rem; justify-content:center; }
footer .credit { color:var(--text-faint); font-size:.8rem; }

/* ---- "Cosa capisci" concept grid (2x2) ---- */
.concepts { display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; margin-top:1.25rem; }
.concepts .card h3 { margin:.25rem 0 .5rem; font-size:1.08rem; }
.concepts .card::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; }
.concepts .card.c1::before, .concepts .card.c4::before { background:var(--disclosure); box-shadow:0 0 22px -1px var(--disclosure); }
.concepts .card.c2::before { background:var(--manipulation); box-shadow:0 0 22px -1px var(--manipulation); }
.concepts .card.c3::before { background:var(--cli); box-shadow:0 0 22px -1px var(--cli); }

/* ---- "Lezioni dal campo" — quiet numbered notes (not glass) ---- */
.lessons { list-style:none; counter-reset:l; margin:1.25rem 0 0; padding:0; display:grid; gap:.9rem; }
.lessons li { counter-increment:l; position:relative; padding:.2rem 0 .2rem 2.6rem; color:var(--text-dim); max-width:72ch; }
.lessons li::before { content:counter(l,decimal-leading-zero); position:absolute; left:0; top:.15rem;
                     font-family:var(--font-mono); font-size:.85rem; color:var(--text-faint); }
.lessons strong { color:#fff; }

/* ---- "Cosa ancora manca" — honest roadmap (unchecked todos) ---- */
.roadmap { list-style:none; margin:1.25rem 0 0; padding:0; display:grid; gap:.75rem; }
.roadmap li { position:relative; padding:.15rem 0 .15rem 2.5rem; color:var(--text-dim); max-width:74ch; }
.roadmap li::before { content:"[ ]"; position:absolute; left:0; top:.05rem; font-family:var(--font-mono); font-size:.85rem; color:var(--text-faint); letter-spacing:-.05em; }
.roadmap strong { font-family:var(--font-mono); font-weight:500; font-size:.92rem; color:var(--disclosure); }
.roadmap-quote { font-style:italic; color:var(--text-faint); margin:1.5rem 0 0; }

/* ---- friendly download cards (Electron installers, one glass card per OS) ---- */
.downloads { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:1.5rem; }
.downloads .card { display:flex; flex-direction:column; }
/* colored top-accent bar per OS, echoing the "Cosa capisci" concept grid */
.downloads .card::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; }
.downloads .win::before { background:var(--disclosure);   box-shadow:0 0 22px -1px var(--disclosure); }
.downloads .mac::before { background:var(--cli);          box-shadow:0 0 22px -1px var(--cli); }
.downloads .lin::before { background:var(--manipulation); box-shadow:0 0 22px -1px var(--manipulation); }
.downloads h3 { margin:.3rem 0 .35rem; font-size:1.25rem; color:#fff; font-family:var(--font-mono); }
.downloads .dl-sub { font-size:.85rem; color:var(--text-dim); margin:0 0 1.15rem; }
.downloads .dl-sub code { color:var(--disclosure); font-family:var(--font-mono);
                          background:#0b0b0e; border:1px solid var(--border-subtle);
                          border-radius:.35rem; padding:.05rem .35rem; font-size:.85em; }
.dl-btns { display:flex; gap:.55rem; flex-wrap:wrap; margin-top:auto; }
.dl-btns .btn { padding:.55rem .95rem; font-size:.82rem; }

/* ---- responsive ---- */
@media (max-width:720px) {
  .concepts { grid-template-columns:1fr; }
  .downloads { grid-template-columns:1fr; }
  /* let the nav links wrap so the language selector can't be pushed off the
     right edge (where `body{overflow-x:hidden}` would clip it) on narrow phones. */
  .nav .links { gap:.9rem; flex-wrap:wrap; justify-content:flex-end; row-gap:.5rem; }
  /* drop the top-level "Manifesto" link to keep the pill tidy on phones.
     `>` scopes this to a DIRECT child of .links — a bare `a:first-child` also
     matches each language-menu <a> (the sole child of its <li>) and hid the
     dropdown options on mobile. */
  .nav .links > a:first-child { display:none; }
}

/* ---- language selector (native <details> dropdown) ---- */
/* The nav is a glass primitive with `contain:paint` (shared rule above), which
   clips descendants that paint outside its box — that would hide this dropdown,
   which extends below the bar. Drop the nav to layout containment so the menu
   escapes; layout containment keeps the perf hint without the paint clip. */
.nav { contain:layout; }
.nav .links .lang { position:relative; }
.nav .links .lang > summary {
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .5rem; border-radius:.5rem; border:1px solid var(--edge);
  background:rgba(255,255,255,.04); color:var(--text-dim); user-select:none;
}
.nav .links .lang > summary::-webkit-details-marker { display:none; }
.nav .links .lang > summary::marker { content:""; }
.nav .links .lang > summary:hover { color:#fff; }
.nav .links .lang[open] > summary { color:#fff; border-color:var(--disclosure); }
.lang .caret { font-size:.7rem; line-height:1; }
.lang .flag { width:18px; height:12px; border-radius:2px; display:inline-block; flex:0 0 auto;
              box-shadow:0 0 0 1px rgba(255,255,255,.12) inset; }
.lang-menu {
  position:absolute; right:0; top:calc(100% + .4rem); margin:0; padding:.3rem; list-style:none;
  min-width:9.5rem; border-radius:.6rem; border:1px solid var(--edge);
  background:rgba(24,24,27,.94);
  -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.8); z-index:30;
}
.lang-menu li { margin:0; }
.lang-menu a {
  display:flex; align-items:center; gap:.55rem; padding:.4rem .5rem; border-radius:.4rem;
  color:var(--text-dim); font-size:.82rem;
}
.lang-menu a:hover { background:rgba(255,255,255,.06); color:#fff; text-decoration:none; }
.lang-menu a[aria-current="page"] { color:#fff; }
.lang-menu a[aria-current="page"]::after { content:"✓"; margin-left:auto; color:var(--cli); }