:root { --ink:#0c0c0d; --ink-2:#131315; --paper:#f2f2ee; --mute:#bcbcbc; --dim:#a2a2a2; --highlight:#f2f2ee; --secondary-highlight:#f2f2ee; --trim:#434345; }
body { background:var(--ink); }
.nav { background:linear-gradient(#0c0c0ded,#0c0c0d99); }
.brand-mark,.hero .kicker,.label .idx,.step-n,.legal .label {color:var(--highlight)}
.btn-solid {color:#0c0c0d;background:var(--highlight);border-color:var(--highlight)}
.btn-solid:hover {background:#ffffff;color:#111;border-color:#ffffff}
.btn-ghost {background:#151517cc;color:var(--paper)}
.hero {min-height:clamp(620px,88svh,960px);grid-template-columns:minmax(0,1fr);align-content:end;gap:24px}
.hero-bg img {object-position:50% 70%}
.hero-bg::after {background:linear-gradient(0deg,#0c0c0d 0%,transparent 46%),linear-gradient(90deg,#0c0c0dce,transparent 80%)}
.hero-inner {max-width:850px}
.hero-title {font-stretch:85%;font-style:italic;letter-spacing:-.07em;font-size:clamp(66px,9vw,150px);line-height:.87;margin:18px 0 22px}
.hero-lead {color:#f2f2ee;max-width:480px;text-shadow:0 2px 12px #000}
.hero-meta {display:flex;width:fit-content;min-width:0;background:#131315dc;border-left:3px solid var(--highlight)}
.meta-price,.meta-discord {padding:9px 16px}.meta-price {border-bottom:0;border-right:1px solid var(--line-2)}.meta-num{font-size:32px}.meta-sub{font-size:10px}.hero-scroll{display:none}
.sector-bar {display:flex;border-block:1px solid var(--trim);background:#131315;padding-inline:var(--pad)}
.sector-bar a {flex:1;padding:16px 0;text-decoration:none;display:flex;align-items:center;gap:12px;font:12px var(--mono);text-transform:uppercase}
.sector-bar b {color:var(--highlight)}.sector-bar a:nth-child(2) b {color:var(--secondary-highlight)}.sector-bar a:hover span{text-decoration:underline}
.section {padding-top:clamp(65px,8vw,112px)}.section-head{margin-bottom:34px}.section-head h2,.cta h2{font-stretch:86%;letter-spacing:-.055em}
.tool {--accent:var(--highlight);border:1px solid var(--trim);background:#18181a;scroll-margin-top:85px}
.tool-flip{--accent:var(--secondary-highlight)}.tool + .tool{margin-top:18px;border-top:1px solid var(--trim)}
.tool-id {position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(145deg,#303032,#171719);border-top:3px solid var(--accent)}
.tool-flip .tool-id{background:linear-gradient(145deg,#303032,#171719)}
.tool-id::after{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(125deg,transparent 0 23px,#ffffff0c 24px 25px);mask-image:linear-gradient(180deg,#000,transparent)}
.tool-mark,.tool-name span,.price-num{color:var(--accent)}.tool .btn-solid{background:var(--accent);border-color:var(--accent)}
.tool .btn-solid:hover{background:var(--paper)}
.steps {gap:12px;border:0}.steps li,.steps li + li{border:1px solid var(--trim);padding:24px;background:#18181b}
.media {border:1px solid var(--trim);background:#232325}.media-video figcaption{background:#171719ee;color:var(--highlight);width:fit-content}
.review-form,.faq details,.changelog article{background:#131315;border-color:var(--trim)}.review-form{border-top:3px solid var(--secondary-highlight)}
.faq details {padding-inline:16px}.stars-input label:hover{color:var(--highlight)}
.cta{background:linear-gradient(110deg,#29292b,#171719 65%);border-block:1px solid var(--trim)}.cta-mark{color:var(--highlight)}
:focus-visible{outline:2px solid var(--secondary-highlight);outline-offset:3px}
@media(max-width:720px){
 .hero{min-height:740px;align-content:end;padding:200px var(--pad) 35px;gap:20px}
 .hero-bg img{object-position:50% 70%}.hero-bg::after{background:linear-gradient(0deg,#0c0c0d 0%,#0c0c0dd9 37%,transparent 78%)}
 .hero-title{font-size:clamp(55px,13vw,90px)}.hero-actions{gap:8px}.hero-actions .btn{padding:13px 16px}
 .sector-bar{gap:10px}.sector-bar a{flex-wrap:wrap;gap:4px;font-size:10px}.sector-bar b{width:100%}
 .nav{gap:10px}.nav-right{gap:8px}.nav .btn-sm{padding:8px;font-size:9px}.nav .brand{gap:6px}.nav .brand-word{font-size:12px}
 .tool .tool-id{order:0}.steps li,.steps li + li{padding:18px}
}
@media(max-width:360px){.nav .brand-word{display:none}.meta-price,.meta-discord{padding:8px}}

/* Film titles belong to the frame below the picture. */
.motion-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--ink);
  color: var(--mute);
  font: 10px var(--mono);
  cursor: pointer;
}
.motion-switch i { width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; }
.motion-switch[aria-pressed="true"] { color: var(--paper); }
.motion-switch[aria-pressed="true"] i { background: currentColor; }
html[data-motion="off"], html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html[data-motion="off"] :is(.reveal, .reveal-on-scroll, .hero-bg img) { opacity: 1; transform: none; }
html[data-motion="off"] .tool:hover .tool-mark, html[data-motion="off"] .tool .btn:hover svg { transform: none; }
.media-video {
  aspect-ratio: auto;
  background: #080809;
  border: 0;
}
.media-video video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}
.media.media-video figcaption {
  position: static;
  width: auto;
  margin: 0;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: #121213;
}
.media-grid.screening-room {
  display: block;
  width: min(100%, 1024px);
  margin-inline: auto;
  background: #080809;
  border: 1px solid var(--trim);
  border-radius: 14px;
  overflow: hidden;
}
.film-picker {
  display: flex;
  flex-wrap: wrap;
  background: #171719;
  border-bottom: 1px solid var(--line-2);
}
.film-picker button {
  flex: 1 1 135px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px clamp(12px, 2vw, 28px);
  color: var(--mute);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.film-picker button[aria-pressed="true"] {
  color: #121212;
  background: var(--paper);
}
.film-picker button:focus-visible { outline-offset: -4px; outline-color: currentColor; }
.film-picker button:hover strong { text-decoration: underline; }
.film-index, .film-picker small, .file-spec {
  font: 11px var(--mono);
  letter-spacing: .08em;
}
.film-picker small { margin-left: auto; }
.film-picker strong { font-weight: 600; font-size: 16px; }
.file-spec { text-align: center; color: var(--mute); }

.section-head .label {
  display: flex;
  gap: 10px;
  align-items: center;
}
.section-head .label::after {
  content: "";
  height: 1px;
  flex: 1;
  margin-left: 10px;
  background: linear-gradient(90deg, var(--trim), transparent);
}
.tool, .review-form, .review, .steps li { border-radius: 12px; }
.tool { overflow: hidden; }
.tool-id, .tool-flip .tool-id {
  background: radial-gradient(ellipse at top right, #333335, #171719 72%);
  border-top: 0;
}
.tool-id::after {
  background: url("/assets/terrain.svg") center / cover no-repeat;
  opacity: .44;
  mask-image: linear-gradient(to bottom, #000 48%, transparent 83%);
}
.tool-flip .tool-id::after { background-image: url("/assets/signal.svg"); }
.tool-mark { width: 42px; height: auto; }
.tool-name { letter-spacing: -.045em; }
.tool-name span { font-size: .8em; letter-spacing: -.035em; }
.tool .btn, .hero-actions .btn { border-radius: 6px; }
.tool .btn:hover svg { transform: translateY(2px); }
.steps li, .steps li + li, .steps li:nth-child(3) {
  border: 1px solid var(--line-2);
  padding: clamp(18px, 2vw, 28px);
  background: linear-gradient(155deg, #1f1f21, #131314);
}
.step-n { display: inline-block; padding-bottom: 5px; border-bottom: 1px solid currentColor; }
.faq details { border-radius: 8px; margin-bottom: 6px; }
.cta { background: #efefeb; color: #111113; border-radius: 14px; }
.cta-mark { color: #101012; }
.nav-right { margin-left: auto; }
@media (min-width: 1081px) { .nav-links { margin-inline: auto 0; } .nav-right { margin-left: 0; } }
@media (max-width: 1080px) {
  .tool-id::after { background-size: auto 215%; background-position: right; mask-image: linear-gradient(90deg, transparent 25%, #000); }
  .nav:has(.nav-links) { flex-wrap: wrap; row-gap: 8px; }
  .nav-links {
    display: flex;
    width: 100%;
    order: 3;
    gap: clamp(12px, 3vw, 30px);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav-links a { flex: none; font-size: 10px; }
  html { scroll-padding-top: 110px; }
}
@media (max-width: 760px) {
  .hero { min-height: clamp(630px, 88svh, 810px); }
  .film-picker button { gap: 8px; }
  .film-index, .film-picker small { font-size: 10px; }
  .cta { margin-inline: var(--pad); }
  .cta h2 { max-width: none; }
}


@media (hover: hover) and (pointer: fine) {
  body { cursor: url("/assets/vault-pointer.svg") 3 2, auto; }
  a[href], button:not(:disabled), summary, label[for], .stars-input label { cursor: url("/assets/vault-action.svg") 3 2, pointer; }
  input:not([type]), input[type="text"], input[type="search"], textarea { cursor: text; }
  video, video * { cursor: auto; }
  :disabled { cursor: not-allowed; }
}
.screening-room .media-video video { aspect-ratio: 1400 / 960; }

/* Graph-paper field below the mountain photograph. */
main {
  background-color:#0c0c0e;
  background-image: url("/assets/circuit-field.svg"), radial-gradient(circle at 1px 1px,#ffffff20 1px,transparent 1.6px),
    linear-gradient(90deg,#ffffff06 1px,transparent 1px),
    linear-gradient(#ffffff06 1px,transparent 1px);
  background-size:720px 480px,48px 48px,48px 48px,48px 48px;
}
.hero {background:var(--ink)}
.review-deck {min-width:0}
.review-list {position:relative;display:flex;align-items:flex-start;gap:16px;max-height:none;padding:0 0 12px;overflow:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.review-list > * {flex:0 0 100%;min-width:0;scroll-snap-align:start}
.review-nav {display:flex;justify-content:flex-end;gap:8px}
.review-nav[hidden] {display:none}
.review-nav button {width:42px;height:38px;border:1px solid var(--trim);border-radius:5px;background:var(--ink-2);color:var(--paper)}

.shop-link {display:inline-flex;gap:6px;align-items:center;text-decoration:none;color:var(--paper);font:12px var(--mono);white-space:nowrap}
.shop-link b {padding:1px 6px;border:1px solid var(--trim);border-radius:5px}
.shop-main {min-height:80vh;padding:clamp(120px,12vw,170px) var(--pad) 80px}
.shop-main > * {max-width:1024px;margin-inline:auto}
.shop-main h1 {font-size:clamp(44px,7vw,90px);line-height:1;letter-spacing:-.06em;margin:15px 0 35px}
.shop-main h2 {font-size:clamp(22px,3vw,32px);line-height:1.15;margin:14px 0}
.shop-columns {display:grid;grid-template-columns:1.25fr 1fr;gap:16px;align-items:start}
.shop-panel {min-width:0;background:#171719;border:1px solid var(--trim);border-radius:12px;padding:clamp(20px,3vw,38px);overflow-wrap:anywhere}
.shop-panel p {color:var(--mute)}
.shop-row {display:flex;gap:12px;align-items:center;padding:15px 0;border-bottom:1px solid var(--trim)}
.shop-row>span,.shop-row.total strong:last-child {margin-left:auto}
.shop-row button,.copy-note {background:transparent;border:1px solid var(--trim);border-radius:4px;padding:4px 10px;color:var(--paper);cursor:pointer}
.shop-choices {display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.shop-field {display:grid;gap:7px;margin:16px 0;font:12px var(--mono)}
.shop-field input,.shop-field textarea,.shop-field select {padding:12px;background:#0e0e10;color:var(--paper);border:1px solid var(--trim);border-radius:5px;width:100%;font:15px var(--mono)}
.shop-panel form .btn {margin:16px 0}
.shop-panel small {margin-left:8px}
.shop-panel hr {border:0;border-top:1px solid var(--trim);margin:26px 0}
.shop-panel summary {cursor:pointer}
@media(max-width:760px){.shop-columns{grid-template-columns:1fr}.shop-link{font-size:11px}.shop-panel{padding:18px}}
@media(max-width:430px){.nav:has(.shop-link) .brand-word{display:none}}
.page-actions {display:flex;align-items:center;flex:none;gap:3px}
.page-actions :is(a,button) {display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--trim);border-radius:6px;background:#151517;color:var(--paper)}
.page-actions :is(a,button):hover {background:var(--paper);color:var(--ink)}
.page-actions svg {width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:380px){.nav {padding-inline:10px}.nav.scrolled {padding-inline:10px}.nav-right {gap:5px}}
@media(min-width:1081px) and (max-width:1240px){.nav {gap:14px}.nav-links {gap:12px}}