/* fennekos.org — one stylesheet.
   Art Deco desert poster: Bodoni display, Josefin letter-spaced caps, gold hairlines on desert night.
   Colours come from the OS logo (violet + sand) and wallpaper (#16122b → #c8743a).
   Order: fonts, tokens, base, type + ornaments, buttons, header, hero, sections, desktop demo, footer, motion. */

/* ── fonts (self-hosted; SIL OFL 1.1) ── */
@font-face { font-family: "Bodoni"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../assets/fonts/bodoni-latin.woff2) format("woff2"); }
@font-face { font-family: "Bodoni"; font-style: italic; font-weight: 400 900; font-display: swap; src: url(../assets/fonts/bodoni-latin-italic.woff2) format("woff2"); }
@font-face { font-family: "Josefin"; font-style: normal; font-weight: 100 700; font-display: swap; src: url(../assets/fonts/josefin-latin.woff2) format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../assets/fonts/geist-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../assets/fonts/geist-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../assets/fonts/geist-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../assets/fonts/geist-mono-latin.woff2) format("woff2"); }

/* ── tokens ── */
:root {
  --bg: #0e0a1c; --bg-2: #120d24; --panel: #171129; --panel-2: #1f1736;
  --line: #f7dca31c; --line-2: #f7dca338; --line-3: #f7dca366;
  --cream: #f3e6cc; --text: #efe6d6; --text-2: #c7bcd2; --text-3: #9387a7; --text-4: #8b80a2;
  --gold: #e9bf74; --gold-2: #f7dca3; --gold-3: #b8873f; --terra: #d2713f; --violet: #2d2150;
  --ink: #241935; --sand: #f2b766; --sand-2: #ffe2b8;
  --ok: #6fcf9a; --unk: #a68bff; --bad: #ff7b72;
  --metal: linear-gradient(180deg, #fff0c8 0%, #f2cf8a 38%, #d9a75a 62%, #f4d491 100%);
  --metal-text: linear-gradient(180deg, #fff3d2 10%, #f2c97c 55%, #c98f46 100%);
  --display: "Bodoni", "Didot", "Bodoni MT", Georgia, serif;
  --caps: "Josefin", "Futura", "Century Gothic", sans-serif;
  --font: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", "Cascadia Code", Consolas, monospace;
  color-scheme: dark;
}

/* ── base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; overflow-x: clip; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.65 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .8 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
h1, h2, h3, p, ul, ol, pre, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
code { font-family: var(--mono); font-size: .85em; padding: .08em .4em; border-radius: 4px; background: #f7dca314; color: var(--gold-2); border: 1px solid var(--line); white-space: nowrap; }

.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.wrap.narrow { width: min(820px, 100% - 40px); }
.center { text-align: center; margin-inline: auto; justify-content: center; }
.i { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--gold); color: var(--ink); padding: 8px 14px; }
.skip:focus { left: 8px; }

/* ── type + ornaments ── */
.display { font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 96; letter-spacing: -.012em; line-height: 1; color: var(--cream); text-wrap: balance; }
.display em { font-style: italic; font-weight: 450; background: var(--metal-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.h1 { font-size: clamp(2.9rem, 7.4vw, 7rem); }
.h2 { font-size: clamp(2.2rem, 4.8vw, 4.1rem); line-height: 1.04; }
.lead { font-size: clamp(1.06rem, 1.45vw, 1.2rem); color: var(--text-2); max-width: 56ch; margin-top: 20px; }
.lead.center { margin-inline: auto; }
.fine { color: var(--text-3); font-size: .86rem; margin-top: 18px; max-width: 58ch; }
.caps { font: 600 .74rem/1.4 var(--caps); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.caps.dim { color: var(--text-3); letter-spacing: .26em; }
.rule { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.rule i { flex: 0 1 90px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-3), transparent); position: relative; }
.rule i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; background: var(--gold); transform: translate(-50%, -50%) rotate(45deg); }
.rule.left { justify-content: flex-start; }
.rule.left i { flex-basis: 120px; background: linear-gradient(90deg, var(--gold-3), transparent); }
.rule.left i::after { left: 0; }
.head { text-align: center; margin-bottom: clamp(32px, 3.4vw, 48px); display: flex; flex-direction: column; align-items: center; }

/* ── buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .7em; padding: 1.15em 1.9em 1.05em; border-radius: 2px; font: 650 .78rem/1 var(--caps); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; transition: transform .2s, box-shadow .3s, background .3s, color .3s; }
.btn .i { margin-top: -.15em; transition: transform .2s; }
.btn:hover .i { transform: translateX(3px); }
.btn-gold { background: var(--metal); color: #2a1c0c; box-shadow: inset 0 1px 0 #fff8, inset 0 -1px 0 #0003, 0 0 0 1px #b8873f, 0 0 0 4px var(--bg), 0 0 0 5px #e9bf7455, 0 18px 40px -16px #e9bf7499; }
.btn-gold:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff8, inset 0 -1px 0 #0003, 0 0 0 1px #b8873f, 0 0 0 4px var(--bg), 0 0 0 5px #e9bf74aa, 0 24px 50px -14px #e9bf74bb; }
.btn-line { color: var(--gold-2); box-shadow: inset 0 0 0 1px var(--line-3); }
.btn-line:hover { background: #f7dca312; box-shadow: inset 0 0 0 1px var(--gold); }
.btn-sm { padding: .95em 1.3em .85em; font-size: .7rem; }
.btn-lg { padding: 1.35em 2.4em 1.25em; font-size: .86rem; }
.cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--gold-2); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .2s, box-shadow .2s; }
.icon-btn:hover { background: #f7dca314; box-shadow: inset 0 0 0 1px var(--gold); }

/* ── header ── */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .4s, box-shadow .4s; }
.hdr.solid { background: #0e0a1cd9; backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--line); }
.hdr-in { display: flex; align-items: center; gap: 22px; height: 74px; }
.brand { display: flex; align-items: center; gap: 11px; font: 600 1.34rem var(--display); font-variation-settings: "opsz" 48; color: var(--cream); letter-spacing: .01em; }
.brand em { font-style: italic; background: var(--metal-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav { display: flex; gap: 30px; margin-left: auto; margin-right: 6px; }
.nav a { font: 600 .7rem var(--caps); letter-spacing: .24em; text-transform: uppercase; color: var(--text-2); position: relative; padding: 6px 0; transition: color .2s; }
.nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 1px; background: var(--gold); transition: left .25s, right .25s; }
.nav a:hover { color: var(--gold-2); }
.nav a:hover::after { left: 0; right: 0; }
@media (max-width: 960px) { .nav { display: none; } .hdr-in > .icon-btn { margin-left: auto; } }

/* ── hero: the poster ── */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: hidden; }
.poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.poster .dune { will-change: transform; }
.sunset { animation: sunrise 3.2s cubic-bezier(.2,.7,.2,1) both; }
.rays { animation: rays 7s ease-in-out infinite alternate; }
.spark { animation: spark 3.2s ease-in-out infinite; } .spark.s2 { animation-delay: 1.4s; }
@keyframes sunrise { from { transform: translateY(70px); opacity: .4; } }
@keyframes rays { from { opacity: .7; } to { opacity: 1; } }
.rays path { animation: ray 6s ease-in-out infinite alternate; }
.rays path:nth-child(3n) { animation-duration: 7.4s; animation-delay: -2s; } .rays path:nth-child(3n+1) { animation-duration: 5.2s; animation-delay: -3.5s; } .rays path:nth-child(4n) { animation-duration: 8.6s; animation-delay: -1s; }
@keyframes ray { from { opacity: .45; } to { opacity: 1; } }
@keyframes spark { 50% { opacity: .25; } }
.hero-in { position: relative; z-index: 2; text-align: center; padding-top: clamp(116px, 17vh, 176px); }
.hero h1 { font-size: clamp(3rem, 7.6vw, 7.6rem); text-shadow: 0 4px 40px #0b091899; }
.hero h1 em { display: inline-block; margin-top: .06em; }
.kw { margin-right: -.07em; }   /* Bodoni's W leaves a hole before the i */
.scroll-cue { position: absolute; left: 50%; bottom: 22px; z-index: 3; width: 22px; height: 56px; translate: -50% 0; display: grid; justify-items: center; }
.scroll-cue span { width: 1px; height: 100%; background: linear-gradient(var(--gold-2), transparent); transform-origin: top; animation: cue 2.4s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ── the ground under the dunes: lead + boarding pass ── */
.ground { position: relative; padding: clamp(28px, 3.5vw, 48px) 0 clamp(40px, 4.5vw, 64px); }
.ground .lead { margin-top: 0; font-size: clamp(1.12rem, 1.7vw, 1.36rem); color: var(--text); }

.pass { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 250px; max-width: 940px; margin: clamp(36px, 4.5vw, 56px) auto 0; color: var(--ink); border-radius: 16px; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2,.8,.2,1); box-shadow: 0 50px 90px -40px #000, 0 0 0 1px #f7dca322; }
.pass-main, .pass-stub { position: relative; background: radial-gradient(ellipse at 20% 0%, #fff8e8, transparent 60%), linear-gradient(160deg, #f7ecd6, #ecdcbc); }
.pass-main { padding: 30px 38px 32px; border-radius: 16px 0 0 16px; overflow: hidden; }
.pass-main::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: repeating-linear-gradient(90deg, var(--violet) 0 26px, var(--terra) 26px 52px, var(--gold) 52px 78px); }
.pass-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.pass .caps { color: var(--terra); }
.pass .caps.dim { color: #7d6a5b; }
.route { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin: 22px 0 26px; }
.port b { display: block; font: 600 clamp(2.4rem, 5vw, 3.8rem)/1 var(--display); font-variation-settings: "opsz" 96; letter-spacing: -.01em; color: var(--ink); }
.port span { font: 600 .7rem var(--caps); letter-spacing: .22em; text-transform: uppercase; color: #7d6a5b; }
.port.to { text-align: right; }
.port.to b { color: var(--violet); }
.arc { position: relative; height: 70px; color: #b9a07c; }
.arc svg { width: 100%; height: 100%; }
.arc img { position: absolute; left: 50%; top: -6px; width: 34px; height: 34px; translate: -50% 0; animation: bob 3s ease-in-out infinite; filter: drop-shadow(0 6px 8px #2d215040); }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-4deg); } }
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 22px; padding-top: 22px; border-top: 1px dashed #24193533; }
.fields dt { font: 600 .64rem var(--caps); letter-spacing: .24em; text-transform: uppercase; color: #8b7766; }
.fields dd { font: 500 1.14rem/1.25 var(--display); font-variation-settings: "opsz" 24; color: var(--ink); margin-top: 3px; }
.status { display: flex; align-items: center; gap: 8px; color: var(--terra) !important; }
.blink { width: 8px; height: 8px; border-radius: 50%; background: var(--terra); animation: blink 1.6s steps(1) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.pass-stub { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 18px; padding: 30px 22px; border-radius: 0 16px 16px 0; border-left: 2px dashed #24193540; text-align: center; }
.pass-stub::before, .pass-stub::after { content: ""; position: absolute; left: -15px; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); }
.pass-stub::before { top: -14px; } .pass-stub::after { bottom: -14px; }
.barcode { width: 100%; height: 88px; background:
  repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 5px, var(--ink) 5px 6px, transparent 6px 9px, var(--ink) 9px 12px, transparent 12px 14px, var(--ink) 14px 15px, transparent 15px 19px); opacity: .88; }
.pass-stub .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.3; }
.pass-stub .btn-gold { box-shadow: inset 0 1px 0 #fff8, 0 0 0 1px #b8873f, 0 10px 24px -12px #8a5a2088; }
.shine { position: absolute; inset: 0; border-radius: 16px; pointer-events: none; background: linear-gradient(115deg, transparent 30%, #ffffff55 48%, transparent 62%); background-size: 260% 100%; background-position: 120% 0; mix-blend-mode: soft-light; transition: background-position .9s ease; }
.pass:hover .shine { background-position: -40% 0; }
@media (max-width: 760px) {
  .pass { grid-template-columns: 1fr; }
  .pass-main { border-radius: 16px 16px 0 0; padding: 26px 22px; }
  .pass-stub { border-radius: 0 0 16px 16px; border-left: 0; border-top: 2px dashed #24193540; flex-direction: row; flex-wrap: wrap; }
  .pass-stub::before, .pass-stub::after { top: -15px; bottom: auto; }
  .pass-stub::before { left: -14px; } .pass-stub::after { left: auto; right: -14px; }
  .barcode { height: 54px; flex: 1 1 100%; }
  .fields { grid-template-columns: 1fr 1fr; }
  .route { gap: 10px; }
}

/* ── sections ── */
.sect { position: relative; padding: clamp(56px, 6.5vw, 92px) 0; }
.sect + .sect::before { content: ""; position: absolute; left: 50%; top: 0; width: min(1200px, 100% - 40px); height: 1px; translate: -50% 0; background: linear-gradient(90deg, transparent, var(--line-2), transparent); }

/* why: three arches */
.arches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.arch { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 10px 34px; border-radius: 999px 999px 8px 8px; background: linear-gradient(180deg, #f7dca30c, #f7dca303 55%, transparent); box-shadow: inset 0 0 0 1px var(--line-2); transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }
.arch::before { content: ""; position: absolute; inset: 7px; border-radius: 999px 999px 5px 5px; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.arch:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--line-3), 0 34px 70px -34px #e9bf7455; }
/* the apex: a half sunburst, like light through an arched window */
.fan { position: relative; width: 100%; aspect-ratio: 2 / 1; }
.fan::before { content: ""; position: absolute; inset: 0; border-radius: 999px 999px 0 0;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, #e9bf7430, transparent 70%), repeating-conic-gradient(from -90deg at 50% 100%, #f7dca31c 0deg 3deg, transparent 3deg 12deg);
  -webkit-mask-image: radial-gradient(circle at 50% 100%, #000 30%, transparent 75%); mask-image: radial-gradient(circle at 50% 100%, #000 30%, transparent 75%);
  transition: opacity .5s; opacity: .8; }
.arch:hover .fan::before { opacity: 1; }
.fan::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-3), transparent); }
.medal { position: absolute; left: 50%; bottom: 0; width: 96px; height: 96px; translate: -50% 50%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 30%, #2a1f45, var(--bg) 70%); box-shadow: inset 0 0 0 1px var(--gold-3), 0 0 0 6px var(--bg), 0 0 0 7px var(--line-3), 0 14px 40px -10px #e9bf7466; z-index: 1; transition: box-shadow .5s, transform .5s; }
.arch:hover .medal { transform: scale(1.05); box-shadow: inset 0 0 0 1px var(--gold), 0 0 0 6px var(--bg), 0 0 0 7px var(--gold-3), 0 18px 50px -8px #e9bf7499; }
.glyph { width: 46px; height: 46px; fill: none; stroke: var(--gold-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.arch h3 { margin-top: 74px; font: 500 1.8rem/1.1 var(--display); font-variation-settings: "opsz" 48; color: var(--cream); padding: 0 24px; }
.arch p { color: var(--text-2); margin-top: 12px; padding: 0 26px; max-width: 34ch; }
.arch .num { margin-top: auto; padding-top: 26px; display: flex; align-items: center; gap: 12px; color: var(--gold-3); letter-spacing: .3em; }
.arch .num::before, .arch .num::after { content: ""; width: 28px; height: 1px; background: var(--line-3); }
@media (max-width: 860px) { .arches { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* tour: framed desktop + scene picker */
.frame { position: relative; padding: clamp(10px, 1.6vw, 20px); box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 6px; max-width: 940px; margin: 0 auto; }
.frame::before { content: ""; position: absolute; inset: 5px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.corner { position: absolute; width: 26px; height: 26px; border-color: var(--gold); border-style: solid; border-width: 0; z-index: 2; }
.corner::after { content: ""; position: absolute; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.corner.tl { left: -4px; top: -4px; border-left-width: 1.5px; border-top-width: 1.5px; } .corner.tl::after { left: -4px; top: -4px; }
.corner.tr { right: -4px; top: -4px; border-right-width: 1.5px; border-top-width: 1.5px; } .corner.tr::after { right: -4px; top: -4px; }
.corner.bl { left: -4px; bottom: -4px; border-left-width: 1.5px; border-bottom-width: 1.5px; } .corner.bl::after { left: -4px; bottom: -4px; }
.corner.br { right: -4px; bottom: -4px; border-right-width: 1.5px; border-bottom-width: 1.5px; } .corner.br::after { right: -4px; bottom: -4px; }
.scenes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 940px; margin: 34px auto 0; border-top: 1px solid var(--line-2); }
.scene { position: relative; align-self: start; padding: 18px 10px 4px; text-align: left; color: var(--text-3); transition: color .25s; }
.scene b { display: block; font: 500 1.5rem/1 var(--display); font-variation-settings: "opsz" 48; color: var(--text-2); transition: color .25s; }
.scene span { display: block; margin-top: 8px; font: 600 .64rem/1.4 var(--caps); letter-spacing: .2em; text-transform: uppercase; }
.scene::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.scene:hover { color: var(--text-2); } .scene:hover b { color: var(--cream); }
.scene.on { color: var(--gold); } .scene.on b { color: var(--gold-2); }
.scene.on::before { transform: scaleX(1); transition: transform .3s; }
.scenes.auto .scene.on::before { animation: scene var(--dur, 7s) linear both; }
@keyframes scene { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.scene-note { max-width: 640px; margin: 30px auto 0; text-align: center; font: italic 450 clamp(1.15rem, 1.7vw, 1.4rem)/1.45 var(--display); font-variation-settings: "opsz" 24; color: var(--text-2); min-height: 2.9em; }
@media (max-width: 860px) { .scenes { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; } }
@media (max-width: 480px) { .scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .scene b { font-size: 1.25rem; } }

/* security: facts under the ears */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 36px; margin-top: 48px; }
.facts div { position: relative; padding-top: 22px; border-top: 1px solid var(--line-2); }
.facts div::before { content: ""; position: absolute; left: 0; top: -4px; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.facts h3 { font: 500 1.32rem/1.15 var(--display); font-variation-settings: "opsz" 36; color: var(--cream); margin-bottom: 10px; }
.facts p { color: var(--text-3); font-size: .95rem; }
@media (max-width: 960px) { .facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }

/* battery gauge */
.bat-in { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 7vw, 100px); align-items: center; }
@media (max-width: 900px) { .bat-in { grid-template-columns: 1fr; } .gauge { max-width: 460px; margin-inline: auto; } }
.gauge { position: relative; }
.gauge svg { width: 100%; height: auto; overflow: visible; }
.g-track { fill: none; stroke: #f7dca314; stroke-width: 16; stroke-linecap: round; }
.g-fill { fill: none; stroke: url(#gg); stroke-width: 16; stroke-linecap: round; stroke-dasharray: 534.07; stroke-dashoffset: 534.07; transition: stroke-dashoffset 2.6s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 0 10px #e9bf7466); }
.g-ticks line { stroke: var(--line-3); stroke-width: 1.2; }
.g-ticks line.major { stroke: var(--gold); stroke-width: 2; }
.g-needle { transform-box: view-box; transform-origin: 200px 200px; transform: rotate(-90deg); transition: transform 2.6s cubic-bezier(.2,.8,.2,1); }
.g-needle path { fill: var(--gold-2); } .g-needle circle { fill: var(--gold-3); } .g-needle .hub { fill: var(--bg); }
.g-lbl { font: 600 13px var(--caps); letter-spacing: .14em; fill: var(--text-3); }
.gauge.go .g-fill { stroke-dashoffset: 0; }
.gauge.go .g-needle { transform: rotate(90deg); }
.g-read { text-align: center; margin-top: 14px; }
.g-read b { display: block; font: 500 clamp(3.4rem, 7vw, 5rem)/1 var(--display); font-variation-settings: "opsz" 96; background: var(--metal-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: lining-nums tabular-nums; }
.g-read span { font: 600 .7rem var(--caps); letter-spacing: .28em; text-transform: uppercase; color: var(--text-3); }
.goals { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.goals div { padding: 18px 20px; box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 4px; }
.goals b { display: block; font: 500 2rem/1 var(--display); color: var(--gold-2); }
.goals span { display: block; margin-top: 6px; color: var(--text-3); font-size: .9rem; }

/* privacy manifest */
.manifest { max-width: 980px; margin: 0 auto; box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 6px; padding: 8px 34px; background: linear-gradient(180deg, #f7dca307, transparent); }
.mrow { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.5fr) 150px; gap: 8px 28px; align-items: baseline; padding: 20px 0; border-bottom: 1px dotted var(--line-3); }
.mrow:last-child { border-bottom: 0; }
.mhead span { font: 600 .66rem var(--caps); letter-spacing: .26em; text-transform: uppercase; color: var(--text-4); }
.mrow .host { font: 500 .9rem var(--mono); color: var(--cream); overflow-wrap: anywhere; }
.mrow > span:nth-child(2) { color: var(--text-2); }
.mrow em { font: 600 .68rem var(--caps); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); text-align: right; }
.mrow.nil .host, .mrow.nil em { color: var(--ok); }
@media (max-width: 760px) {
  .manifest { padding: 4px 20px; }
  .mhead { display: none; }
  .mrow { grid-template-columns: 1fr auto; }
  .mrow > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: .94rem; }
}

/* itinerary route map */
.route-map { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; }
.route-map::before { content: ""; position: absolute; left: 15px; right: 0; top: 15px; height: 2px; background: linear-gradient(90deg, var(--gold) 0 30%, transparent 30%), repeating-linear-gradient(90deg, var(--line-3) 0 6px, transparent 6px 12px); }
.stop { position: relative; }
.stop .dot { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line-3); }
.stop .dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--text-4); }
.stop.done .dot { box-shadow: inset 0 0 0 1.5px var(--gold); } .stop.done .dot::after { background: var(--gold); }
.stop.now .dot { width: 54px; height: 54px; margin: -11px 0 0 -11px; background: var(--panel-2); box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 0 6px #e9bf7418, 0 0 40px #e9bf7455; animation: halo 2.6s ease-in-out infinite; }
.stop.now .dot::after { display: none; }
@keyframes halo { 50% { box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 0 10px #e9bf7410, 0 0 60px #e9bf7477; } }
.stop em { display: block; margin-top: 22px; font: 600 .66rem var(--caps); font-style: normal; letter-spacing: .26em; text-transform: uppercase; color: var(--text-4); }
.stop.done em { color: var(--ok); } .stop.now em { color: var(--gold); margin-top: 11px; }
.stop h3 { font: 500 1.5rem/1.15 var(--display); font-variation-settings: "opsz" 48; color: var(--cream); margin: 8px 0; }
.stop p { color: var(--text-3); font-size: .95rem; }
@media (max-width: 900px) {
  .route-map { grid-template-columns: 1fr; gap: 40px; padding-left: 58px; }
  .route-map::before { left: 15px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, var(--gold) 0 22%, transparent 22%), repeating-linear-gradient(180deg, var(--line-3) 0 6px, transparent 6px 12px); }
  .stop .dot { position: absolute; left: -58px; top: 0; }
  .stop.now .dot { left: -69px; margin: -11px 0 0; }
  .stop em, .stop.now em { margin-top: 4px; }
}

/* open source */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
@media (max-width: 960px) { .split { grid-template-columns: 1fr; } }
.code { border-radius: 6px; background: #09061a; box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 80px -40px #000; overflow: hidden; }
.code-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.copy-btn { font: 600 .64rem var(--caps); letter-spacing: .2em; text-transform: uppercase; padding: 7px 12px 6px; border-radius: 2px; color: var(--gold-2); box-shadow: inset 0 0 0 1px var(--line-3); }
.copy-btn:hover { background: #f7dca314; }
.code pre { padding: 24px 22px; font: .92rem/1.85 var(--mono); color: var(--text); overflow-x: auto; }
.c-dim { color: var(--text-4); } .c-gold { color: var(--gold); }
.code-warn { padding: 13px 18px; font-size: .84rem; color: var(--sand-2); background: #d2713f14; border-top: 1px solid #d2713f33; }

/* faq */
.qs { border-top: 1px solid var(--line-2); }
.qs details { border-bottom: 1px solid var(--line-2); }
.qs summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 4px; font: 500 clamp(1.2rem, 2vw, 1.5rem)/1.25 var(--display); font-variation-settings: "opsz" 36; color: var(--cream); transition: color .2s; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: ""; flex: none; width: 10px; height: 10px; border: 1.5px solid var(--gold); transform: rotate(45deg); transition: transform .3s, background .3s; }
.qs summary:hover { color: var(--gold-2); }
.qs details[open] summary::after { background: var(--gold); transform: rotate(225deg); }
.qs details p { padding: 0 4px 26px; color: var(--text-2); max-width: 64ch; }

/* community */
.caravan { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; max-width: 1080px; margin: 0 auto; }
@media (max-width: 900px) { .caravan { grid-template-columns: 1fr; } }
.discord { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 22px 24px; align-items: center; padding: 36px; border-radius: 6px; overflow: hidden; background: radial-gradient(ellipse 70% 120% at 0% 0%, #5865f22e, transparent 60%), linear-gradient(180deg, #f7dca30a, transparent); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .3s, transform .3s; }
.discord:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-3), 0 30px 60px -30px #5865f266; }
.d-ico { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: #5865f2; color: #fff; box-shadow: 0 0 0 6px #5865f222, 0 14px 30px -10px #5865f2aa; }
.d-ico .i { width: 38px; height: 38px; }
.d-txt { display: grid; gap: 4px; }
.d-txt b { font: 500 clamp(1.5rem, 2.6vw, 2.1rem)/1.1 var(--display); font-variation-settings: "opsz" 48; color: var(--cream); }
.d-txt > span:last-child { color: var(--text-2); }
.discord .btn { grid-column: 1 / -1; justify-self: start; }
.contact { display: grid; align-content: center; gap: 12px; padding: 36px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line-2); }
.mail { display: inline-flex; align-items: center; gap: 12px; font: 500 clamp(1.15rem, 2vw, 1.4rem) var(--display); color: var(--cream); margin-bottom: 14px; width: fit-content; border-bottom: 1px solid var(--line-3); padding-bottom: 4px; transition: color .2s, border-color .2s; overflow-wrap: anywhere; }
.mail .i { color: var(--gold); }
.mail:hover { color: var(--gold-2); border-color: var(--gold); }
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.socials a, .ftr-social a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--gold-2); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .25s, color .25s, box-shadow .25s, transform .25s; }
.socials a:hover, .ftr-social a:hover { background: var(--metal); color: #2a1c0c; box-shadow: none; transform: translateY(-2px); }
.socials .i { width: 18px; height: 18px; }

/* final */
.final { position: relative; overflow: hidden; padding: clamp(32px, 3.5vw, 56px) 0 clamp(220px, 24vw, 290px); text-align: center; }
.final-sun { position: absolute; left: 50%; bottom: calc(-1 * min(330px, 56vw)); width: min(540px, 82vw); aspect-ratio: 1; translate: -50% 0; pointer-events: none; }
.final-sun i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff1cf 0%, #f7c47a 35%, #d9773d 70%); box-shadow: 0 0 120px 40px #d2713f55, 0 0 300px 120px #d2713f22; opacity: .9; }
.final-sun::before { content: ""; position: absolute; inset: -60%; background: repeating-conic-gradient(from 0deg, #f7dca31c 0deg 3deg, transparent 3deg 12deg); -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 85%); mask-image: radial-gradient(closest-side, #000 30%, transparent 85%); }
.final .wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.final h2 { text-shadow: 0 4px 40px #0e0a1c; }

/* ── footer ── */
.ftr { border-top: 1px solid var(--line-2); padding: 44px 0 50px; background: var(--bg); position: relative; }
.ftr-in { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 40px; }
.ftr nav { display: flex; flex-wrap: wrap; gap: 26px; margin-left: auto; }
.ftr nav a { font: 600 .68rem var(--caps); letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); }
.ftr nav a:hover { color: var(--gold-2); }
.ftr-social { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.ftr-social a { width: 36px; height: 36px; }
.ftr-social .i { width: 16px; height: 16px; }
.maker { width: 100%; color: var(--text-3); font-size: .9rem; }
.maker a { color: var(--gold-2); border-bottom: 1px solid var(--line-2); }
.maker a:hover { border-color: var(--gold); }
.legal { width: 100%; font-size: .78rem; color: var(--text-4); }

/* security: ears: files arrive, get heard, and go to their lane (js builds the chips) */
.ears { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 30px; margin-top: 8px; min-height: 360px; padding: 30px; border-radius: 6px; border: 1px solid var(--line-2); background: radial-gradient(ellipse 50% 70% at 50% 50%, #f2b7661a, transparent 70%), linear-gradient(180deg, #f7dca307, transparent); overflow: hidden; }
.ears-in { align-self: stretch; display: flex; align-items: flex-start; }
.ears > svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ears path { fill: none; stroke: var(--line-3); stroke-width: 1.5; stroke-dasharray: 3 7; animation: flow 1.1s linear infinite; }
.ears path.ok { stroke: color-mix(in srgb, var(--ok) 55%, transparent); } .ears path.unk { stroke: color-mix(in srgb, var(--unk) 60%, transparent); } .ears path.bad { stroke: color-mix(in srgb, var(--bad) 55%, transparent); }
@keyframes flow { to { stroke-dashoffset: -10; } }
.ears-core, .ears-out, .ears-in { position: relative; z-index: 1; }
.ears-core { position: relative; width: 190px; height: 190px; display: grid; place-items: center; }
.ears-core img { position: relative; z-index: 2; width: 84px; height: 84px; transition: filter .3s, transform .3s; filter: drop-shadow(0 10px 30px #00000080); }
.ears-core.hit img { transform: scale(1.08); }
.ears-core.ok img { filter: drop-shadow(0 0 26px var(--ok)); } .ears-core.unk img { filter: drop-shadow(0 0 26px var(--unk)); } .ears-core.bad img { filter: drop-shadow(0 0 26px var(--bad)); }
.ears-core .cap { position: absolute; bottom: -12px; white-space: nowrap; }
.ring { position: absolute; inset: 22%; border-radius: 50%; border: 1.5px solid var(--sand); opacity: 0; animation: ping 3s cubic-bezier(.2,.7,.3,1) infinite; }
.ring:nth-child(2) { animation-delay: 1s; } .ring:nth-child(3) { animation-delay: 2s; }
@keyframes ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
.ears-out { display: grid; gap: 12px; }
.lane { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 12px 16px; border-radius: 4px; background: #ffffff06; border: 1px solid var(--line-2); border-left: 3px solid var(--lc); transition: background .3s, transform .3s; }
.lane b { font: 500 1.2rem/1.2 var(--display); color: var(--lc); } .lane span { grid-row: 2; color: var(--text-3); font-size: .86rem; }
.lane i { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 700 1.1rem var(--mono); font-style: normal; color: var(--cream); font-variant-numeric: tabular-nums; }
.lane.ok { --lc: var(--ok); } .lane.unk { --lc: var(--unk); } .lane.bad { --lc: var(--bad); }
.lane.got { background: color-mix(in srgb, var(--lc) 18%, transparent); transform: translateX(4px); }
.chip { position: absolute; left: 0; top: 0; z-index: 3; padding: 8px 12px; border-radius: 10px; background: #1a1430; border: 1px solid #ffffff2a; box-shadow: 0 12px 30px -10px #000c; font: 600 .8rem/1.25 var(--mono); color: #f8f2ea; white-space: nowrap; transition: border-color .3s, box-shadow .3s; }
.chip small { display: block; font: 400 .7rem var(--font); color: #9d92b1; }
.chip.ok { border-color: var(--ok); box-shadow: 0 0 20px -4px var(--ok); } .chip.unk { border-color: var(--unk); box-shadow: 0 0 20px -4px var(--unk); } .chip.bad { border-color: var(--bad); box-shadow: 0 0 20px -4px var(--bad); }
@media (max-width: 760px) {
  .ears { grid-template-columns: 1fr; justify-items: center; gap: 22px; padding: 24px 16px; }
  .ears-in { width: 100%; height: 56px; justify-content: center; }
  .ears-core { width: 150px; height: 150px; }
  .ears-out { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
  .lane { padding: 10px; grid-template-columns: 1fr; text-align: center; } .lane span { display: none; } .lane i { grid-row: auto; grid-column: auto; }
  .chip small { display: none; }
}


/* ── the desktop demo ── */
.desk { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; user-select: none; -webkit-user-select: none; color: #f6f1ea; font-family: "Segoe UI", var(--font); line-height: 1.45;
  background: radial-gradient(ellipse 60% 50% at 78% 85%, #f2b76655, transparent 60%), linear-gradient(135deg, #16122b 0%, #2d2150 38%, #7a3f45 72%, #c8743a 100%);
  box-shadow: 0 0 0 1px #f7dca322, 0 40px 90px -30px #000; container-type: inline-size; }
.desk::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("../assets/fennek.svg") no-repeat 50% 44% / 18% auto; opacity: .07; filter: grayscale(1) brightness(3); }
.desk-icons { position: absolute; left: 1.6%; top: 2.4%; display: grid; gap: 4px; z-index: 1; }
.dico { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 78px; padding: 6px 2px; border-radius: 6px; font-size: 12px; color: #fff; text-shadow: 0 1px 3px #000c; border: 1px solid transparent; }
.dico:hover { background: #ffffff1c; border-color: #ffffff20; }
.dico.sel { background: #f2b76638; border-color: #f2b76670; }

.ic { display: block; width: 34px; height: 34px; position: relative; flex: none; }
.ic-pc { background: linear-gradient(#7ec8ff, #3d7fd6); border-radius: 4px; height: 24px; margin: 4px 0 6px; box-shadow: 0 8px 0 -5px #c9d3e0; }
.ic-folder { background: linear-gradient(#ffd77a, #f2b23a); border-radius: 3px 6px 4px 4px; height: 26px; margin-top: 6px; }
.ic-folder::before { content: ""; position: absolute; left: 0; top: -5px; width: 45%; height: 8px; background: #e9a62e; border-radius: 3px 3px 0 0; }
.ic-exe { background: linear-gradient(#fafafa, #d9d4e6); border-radius: 3px; width: 28px; margin-inline: 3px; }
.ic-exe::after { content: "EXE"; position: absolute; left: 50%; bottom: 4px; translate: -50% 0; font: 700 8px/1 var(--mono); color: #fff; background: #6d4bd6; padding: 2px 3px; border-radius: 2px; }
.ic-trash { background: linear-gradient(#e7ecf2, #aeb8c6); border-radius: 2px 2px 6px 6px; width: 24px; margin: 6px 5px 0; height: 28px; }
.ic-trash::before { content: ""; position: absolute; left: -3px; right: -3px; top: -4px; height: 3px; background: #d5dbe4; border-radius: 2px; }
.ic-term { background: #120d20; border: 1px solid #ffffff40; border-radius: 4px; }
.ic-term::after { content: ">_"; position: absolute; left: 5px; top: 6px; font: 700 12px/1 var(--mono); color: var(--sand); }
.ic-clock { border-radius: 50%; border: 3px solid currentColor; }
.ic-clock::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 10px; border-left: 3px solid currentColor; border-bottom: 3px solid currentColor; translate: -2px -9px; }
.ic-shield { background: currentColor; clip-path: polygon(50% 0, 100% 15%, 100% 50%, 50% 100%, 0 50%, 0 15%); }
.ic-upd { border-radius: 50%; border: 3px solid var(--sand); border-right-color: transparent; }

.bar { position: absolute; left: 0; right: 0; bottom: 0; height: 42px; display: flex; align-items: center; background: #0d0a18e6; backdrop-filter: blur(20px); border-top: 1px solid #ffffff12; z-index: 5; }
.bar-start { width: 48px; height: 100%; display: grid; place-items: center; transition: background .15s; flex: none; }
.bar-start:hover, .bar-start[aria-expanded="true"] { background: #ffffff18; }
.bar-search { width: 46px; height: 100%; display: grid; place-items: center; color: #d4cadf; flex: none; transition: background .15s; }
.bar-search .i { width: 17px; height: 17px; }
.bar-search:hover { background: #ffffff14; }
.bar-pins, .bar-apps { display: flex; height: 100%; min-width: 0; }
.bar-apps { overflow: hidden; }
.bar-app { position: relative; width: 46px; height: 100%; display: grid; place-items: center; flex: none; transition: background .15s; }
.bar-app:hover { background: #ffffff14; }
.bar-app .ic { transform: scale(.6); margin: -7px; }
.bar-app .ic-shield { color: #5fd39a; }
.bar-app::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 0; height: 2px; background: var(--sand); transform: scaleX(0); transition: transform .2s; }
.bar-app.run::after { transform: scaleX(1); }
.bar-app.run { background: #ffffff0a; }
.bar-apps .bar-app { animation: pop .25s ease-out; }
.bar-tray { margin-left: auto; display: flex; align-items: center; gap: 12px; padding: 0 14px; color: #d4cadf; font-size: 12px; flex: none; }
.tray-ic { display: grid; }
.tray-ic:first-child { color: #5fd39a; }
.clock { font-variant-numeric: tabular-nums; }

.start { position: absolute; left: 0; bottom: 42px; width: min(560px, 76%); height: min(430px, 78%); background: #120d22f2; backdrop-filter: blur(30px); border: 1px solid #ffffff14; border-bottom: 0; z-index: 6; display: flex; flex-direction: column; animation: rise .22s cubic-bezier(.2,.8,.2,1); }
.start[hidden] { display: none; }
.start-search { display: flex; align-items: center; gap: 10px; margin: 14px; padding: 9px 12px; background: #ffffff12; border: 1px solid #ffffff14; border-radius: 4px; color: #9d92b1; }
.start-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #f6f1ea; font-size: 13px; }
.start-body { flex: 1; display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px; padding: 0 14px 14px; min-height: 0; }
.start-list { overflow: auto; font-size: 13px; scrollbar-width: thin; }
.start-list li button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; text-align: left; border-radius: 3px; color: #d4cadf; }
.start-list li button:hover { background: #ffffff14; color: #fff; }
.start-list .ic { width: 22px; height: 22px; transform: scale(.65); margin: -3px; }
.start-list .lbl { font: 600 10px/1 var(--mono); letter-spacing: .12em; color: #75688a; padding: 10px 8px 4px; text-transform: uppercase; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 6px; min-height: 0; }
.tile { min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 10px; text-align: left; font-size: 12px; color: #fff; transition: filter .15s, transform .15s; }
.tile:hover { filter: brightness(1.15); transform: scale(.98); }
.tile .ic { transform: scale(.8); transform-origin: left top; }
.tile small { display: block; opacity: .75; font-size: 10px; }
.tile.wide { grid-column: span 2; }
.t1 { background: #6a4a1f; } .t2 { background: #2a2148; } .t3 { background: #3d2d6b; color: var(--sand-2); } .t4 { background: #1f4d3b; color: #5fd39a; } .t5 { background: linear-gradient(120deg, #3d2d6b, #7a3f45); }

.wins { position: absolute; inset: 0 0 42px; z-index: 3; pointer-events: none; }
.win { position: absolute; pointer-events: auto; background: #17122a; border: 1px solid #ffffff1c; box-shadow: 0 30px 70px -20px #000d; display: flex; flex-direction: column; animation: open .24s cubic-bezier(.2,.8,.2,1); min-width: 0; }
.win.closing { animation: close .16s ease-in forwards; }
.win-bar { display: flex; align-items: center; height: 32px; padding-left: 12px; font-size: 12px; color: #d4cadf; background: #0f0b1d; cursor: grab; flex: none; }
.win-bar:active { cursor: grabbing; }
.win-bar .t { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; }
.win-bar .x { width: 44px; height: 100%; display: grid; place-items: center; color: #9d92b1; }
.win-bar .x:hover { background: #e81123; color: #fff; }
.win-body { flex: 1; overflow: auto; padding: 16px; font-size: 13px; color: #d4cadf; min-height: 0; }
.win-body code { background: #ffffff14; color: var(--sand-2); }
.win.sbx { border-color: #a68bff70; box-shadow: 0 0 0 1px #a68bff40, 0 0 40px -6px #a68bff60, 0 30px 70px -20px #000d; }
.win.sbx .win-bar { background: linear-gradient(90deg, #2a1f55, #0f0b1d); }
.sbx-tag { font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #a68bff; border: 1px solid #a68bff60; padding: 3px 6px; border-radius: 4px; }
.setup h4 { margin: 0 0 6px; font-size: 17px; color: #fff; }
.prog { height: 6px; border-radius: 3px; background: #ffffff14; overflow: hidden; margin: 14px 0; }
.prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffe2b8, #f2b766, #e08a4a); animation: fill 3.2s ease-out forwards; }
.walls { display: grid; gap: 6px; margin-top: 10px; }
.walls div { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; background: #ffffff08; border: 1px solid #ffffff0d; font-size: 12px; }
.walls b { margin-left: auto; font: 600 11px var(--mono); white-space: nowrap; }
.walls .y { color: #5fd39a; } .walls .n { color: #ff7b72; }
.flist { display: grid; gap: 2px; font-size: 12px; }
.flist div { display: grid; grid-template-columns: 1fr 90px 60px; gap: 8px; padding: 5px 8px; border-radius: 3px; transition: background .3s, color .3s; }
.flist div:first-child { color: #75688a; font-size: 11px; border-bottom: 1px solid #ffffff14; border-radius: 0; }
.flist div:not(:first-child):hover, .flist div.hl { background: #f2b76626; }
.flist .enc { color: #ff7b72; }
.flist .back { color: #5fd39a; }
.ctx { position: absolute; z-index: 8; min-width: 190px; padding: 4px; background: #1a1430; border: 1px solid #ffffff24; box-shadow: 0 16px 40px -10px #000c; font-size: 12px; animation: open .14s ease-out; }
.ctx div { padding: 6px 10px; border-radius: 3px; color: #d4cadf; }
.ctx div.hot { background: #f2b76630; color: #fff; }
.drives { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.drive { padding: 10px; border-radius: 6px; background: #ffffff08; border: 1px solid #ffffff0d; }
.drive b { display: block; color: #fff; font-size: 12.5px; }
.drive .meter { height: 6px; background: #ffffff18; border-radius: 3px; margin: 7px 0 4px; overflow: hidden; }
.drive .meter i { display: block; height: 100%; background: #3d8cff; }
.drive small { color: #75688a; font-size: 11px; }
.wterm { background: #0a0714; margin: -16px; padding: 14px; min-height: calc(100% + 32px); font: 12px/1.65 var(--mono); color: #e7e0f5; white-space: pre-wrap; }
.wterm .p { color: var(--sand); } .wterm .c { color: #8d81a3; }
.toast { position: absolute; right: 12px; bottom: 54px; width: min(320px, 60%); padding: 12px 14px; background: #1a1430f2; border: 1px solid #ffffff1f; border-left: 3px solid var(--sand); box-shadow: 0 20px 50px -10px #000c; z-index: 7; font-size: 12.5px; color: #d4cadf; animation: slidein .3s cubic-bezier(.2,.8,.2,1); }
.toast b { display: block; color: #fff; margin-bottom: 2px; font-size: 13px; }
.toast.out { animation: slideout .3s ease-in forwards; }

@container (max-width: 640px) {
  .dico { width: 58px; font-size: 10px; padding: 3px 2px; }
  .ic { width: 24px; height: 24px; }
  .ic-pc { height: 17px; } .ic-folder { height: 18px; } .ic-exe { width: 20px; } .ic-exe::after { font-size: 6px; } .ic-trash { width: 17px; height: 20px; }
  .bar { height: 34px; } .wins { bottom: 34px; } .start { bottom: 34px; width: 100%; height: 92%; } .toast { bottom: 42px; width: auto; left: 10px; right: 10px; padding: 8px 10px; font-size: 11px; }
  .bar-app, .bar-search { width: 38px; }
  .win { left: 3% !important; top: 3% !important; width: 94% !important; height: 92% !important; }
  .win-body { padding: 10px; font-size: 11px; }
  .walls div { padding: 4px 8px; font-size: 10.5px; } .walls { gap: 3px; margin-top: 6px; }
  .setup h4 { font-size: 14px; } .setup p { display: none; } .prog { margin: 8px 0; }
  .start-body { grid-template-columns: 1fr; }
  .tiles { display: none; }
  .flist div { grid-template-columns: 1fr 70px; } .flist div span:nth-child(3) { display: none; }
  .wterm { margin: -10px; padding: 10px; min-height: calc(100% + 20px); font-size: 10.5px; }
}

/* ── motion ── */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes open { from { opacity: 0; transform: scale(.94); } }
@keyframes close { to { opacity: 0; transform: scale(.94); } }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }
@keyframes fill { to { width: 100%; } }
@keyframes slidein { from { opacity: 0; transform: translateX(30px); } }
@keyframes slideout { to { opacity: 0; transform: translateX(30px); } }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1.1s cubic-bezier(.2,.8,.2,1), transform 1.1s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}
.bat-in .h2 { font-size: clamp(2.1rem, 3.7vw, 3.3rem); }
@media (max-width: 560px) { .hero .rule { gap: 10px; } .hero .rule i { flex-basis: 22px; } .hero .caps { font-size: .62rem; letter-spacing: .22em; } }
@media (max-width: 640px) { .desk { aspect-ratio: 4 / 5; } }

/* ── round 5: menu, dust, light, progress ── */
.hdr::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); box-shadow: 0 0 10px #e9bf7499; opacity: 0; transition: opacity .4s; }
.hdr.solid::after { opacity: 1; }

.menu-btn { display: none; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); position: relative; }
.menu-btn span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--gold-2); transition: transform .35s cubic-bezier(.6,0,.2,1), top .35s; }
.menu-btn span:first-child { top: 17px; } .menu-btn span:last-child { top: 25px; }
.menu-btn[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
@media (max-width: 960px) { .menu-btn { display: block; } .hdr-in > .btn-gold { display: none; } }
@media (max-width: 960px) and (min-width: 520px) { .hdr-in > .btn-gold { display: inline-flex; } }
.menu { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; justify-content: center; gap: 46px; padding: 100px 28px 40px; background: radial-gradient(ellipse 120% 60% at 50% 100%, #d2713f33, transparent 60%), #0e0a1cf7; backdrop-filter: blur(18px); animation: menuin .45s cubic-bezier(.2,.8,.2,1); }
.menu[hidden] { display: none; }
.menu nav { display: grid; gap: 6px; }
.menu nav a { display: flex; align-items: baseline; gap: 18px; padding: 10px 0; border-bottom: 1px solid var(--line); font: 500 clamp(2rem, 9vw, 3rem)/1.1 var(--display); font-variation-settings: "opsz" 72; color: var(--cream); opacity: 0; transform: translateY(16px); animation: menuitem .5s cubic-bezier(.2,.8,.2,1) forwards; }
.menu nav a i { font: 600 .7rem var(--caps); font-style: normal; letter-spacing: .2em; color: var(--gold); min-width: 2.4em; }
.menu nav a:nth-child(2) { animation-delay: .05s; } .menu nav a:nth-child(3) { animation-delay: .1s; } .menu nav a:nth-child(4) { animation-delay: .15s; } .menu nav a:nth-child(5) { animation-delay: .2s; }
.menu-foot { display: grid; gap: 22px; justify-items: start; }
@keyframes menuin { from { opacity: 0; } }
@keyframes menuitem { to { opacity: 1; transform: none; } }
html.menu-open { overflow: hidden; }

.dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* rims of the dunes draw themselves once */
.poster .dune path[stroke] { stroke-dasharray: 1800; stroke-dashoffset: 1800; animation: draw 2.6s cubic-bezier(.6,0,.2,1) .5s forwards; }
.poster .d2 path[stroke] { animation-delay: .75s; } .poster .d3 path[stroke] { animation-delay: 1s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* surfaces catch a little gold light under the pointer */
.lit { position: relative; isolation: isolate; }
.lit::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), #f7dca31c, transparent 60%); }
.lit:hover::after { opacity: 1; }
.arch.lit::after { z-index: 0; border-radius: 999px 999px 8px 8px; }
@media (prefers-reduced-motion: reduce) { .poster .dune path[stroke] { stroke-dashoffset: 0; } }

.manifest-more { margin: 22px auto 0; max-width: 64ch; }
.manifest-more a, .legal a { color: var(--gold-2); border-bottom: 1px solid var(--line-2); }
.manifest-more a:hover, .legal a:hover { border-color: var(--gold); }

/* ── phrasebook: an open pocket book, two pages ── */
.book { position: relative; max-width: 1060px; margin: 0 auto; padding: 26px clamp(18px, 3vw, 44px) 40px; border-radius: 10px;
  background: radial-gradient(ellipse 50% 90% at 50% 50%, #f7dca30a, transparent 70%), linear-gradient(180deg, #1a1430, #130e25);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 0 0 8px var(--bg-2), inset 0 0 0 9px var(--line), 0 50px 90px -50px #000; }
.book-head { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(40px, 6vw, 90px); padding: 8px 0 18px; border-bottom: 1px solid var(--line-2); }
.book-head span:last-child { text-align: right; }
.pages { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(40px, 6vw, 90px); }
.pages::before { content: ""; position: absolute; left: 50%; top: 0; bottom: -14px; width: 1px; translate: -50% 0; background: linear-gradient(transparent, var(--line-3) 15%, var(--line-3) 85%, transparent); box-shadow: 0 0 30px 8px #0006; }
.pb-page { position: relative; padding-bottom: 26px; }
.phrase { padding: 22px 0; border-bottom: 1px dotted var(--line-3); }
.phrase:last-of-type { border-bottom: 0; }
.phrase dt { font: italic 450 1.32rem/1.25 var(--display); font-variation-settings: "opsz" 36; color: var(--gold-2); }
.phrase dt b { font-style: normal; font-weight: 600; }
.phrase dd { margin-top: 8px; color: var(--text-2); font-size: .97rem; }
.phrase kbd { display: inline-block; min-width: 1.9em; text-align: center; padding: .1em .45em; margin: 0 .05em; border-radius: 5px; font: 600 .62em/1.6 var(--caps); letter-spacing: .1em; font-style: normal; color: var(--cream); background: #ffffff08; box-shadow: inset 0 0 0 1px var(--line-3), inset 0 -2px 0 var(--line-2); vertical-align: .15em; }
.phrase code { font-size: .7em; font-style: normal; vertical-align: .15em; }
.folio { position: absolute; bottom: 0; left: 0; color: var(--text-4); letter-spacing: .3em; }
.pb-page + .pb-page .folio { left: auto; right: 0; }
@media (max-width: 820px) {
  .book-head { grid-template-columns: 1fr; } .book-head span:last-child { display: none; }
  .pages { grid-template-columns: 1fr; } .pages::before { display: none; }
  .pb-page + .pb-page { border-top: 1px solid var(--line-2); padding-top: 4px; }
  .folio { display: none; }
}

/* finale sun: the rays sway slowly around the sun, a second set fades in and out between them */
.final-sun::before { animation: fsway 34s ease-in-out infinite alternate; }
.final-sun::after { content: ""; position: absolute; inset: -60%; pointer-events: none; background: repeating-conic-gradient(from 6deg, #f7dca314 0deg 2deg, transparent 2deg 12deg); -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 85%); mask-image: radial-gradient(closest-side, #000 30%, transparent 85%); animation: fsway 46s ease-in-out infinite alternate-reverse, fshimmer 7s ease-in-out infinite alternate; }
.final-sun i { z-index: 1; }
@keyframes fsway { from { rotate: -3deg; } to { rotate: 3deg; } }
@keyframes fshimmer { from { opacity: .2; } to { opacity: 1; } }