/* The store's look: ORON's "System window" (godot_orb/scripts/ui.gd) on the web. Cut corners top-left and
   bottom-right, cyan light, hairlines, Bahnschrift caps where Windows has it. */
:root {
  --bg: #02070d;
  --bg2: #04101b;
  --panel: rgba(4, 16, 28, 0.86);
  --panel-solid: #051421;
  --sys: #30d6ff;
  --sys-soft: rgba(48, 214, 255, 0.16);
  --sys-line: rgba(48, 214, 255, 0.34);
  --hot: #d6faff;
  --ink: #e4f8ff;
  --muted: #86aec4;
  --dim: #4e7187;
  --amber: #ffb547;
  --red: #ff6a3d;
  --green: #4dffb4;
  --cut: 14px;
  --display: "Bahnschrift", "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --body: "Segoe UI", "Inter", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--body);
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(48, 214, 255, 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(48, 120, 255, 0.07), transparent 60%),
    linear-gradient(rgba(48, 214, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48, 214, 255, 0.035) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
  overflow-x: hidden;
}
a { color: var(--sys); text-decoration: none; }
a:hover { color: var(--hot); }
::selection { background: rgba(48, 214, 255, 0.35); }
img, svg { max-width: 100%; }
.wrap { width: min(1160px, 100% - 32px); margin: 0 auto; }
.caps { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; font-size: 12px; color: var(--muted); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.mono { font-family: var(--mono); font-size: 0.92em; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: 0.02em; line-height: 1.15; margin: 0 0 12px; }
h1 { font-size: clamp(40px, 7vw, 84px); letter-spacing: 0.08em; }
h2 { font-size: clamp(26px, 3.4vw, 38px); }
h3 { font-size: 19px; }
p { margin: 0 0 14px; }

/* ---------------------------------------------------------------- the cut-corner panel, with a 1px lit edge */
.cut {
  position: relative; isolation: isolate; padding: 22px 24px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background: linear-gradient(135deg, rgba(48, 214, 255, 0.55), rgba(48, 214, 255, 0.10) 40%, rgba(48, 214, 255, 0.10) 60%, rgba(48, 214, 255, 0.45));
}
.cut::before {
  content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--panel-solid);
  clip-path: polygon(calc(var(--cut) - 0.5px) 0, 100% 0, 100% calc(100% - var(--cut) + 0.5px), calc(100% - var(--cut) + 0.5px) 100%, 0 100%, 0 calc(var(--cut) - 0.5px));
  background-image: linear-gradient(180deg, rgba(48, 214, 255, 0.07), transparent 120px);
}
.cut.hot { background: linear-gradient(135deg, var(--sys), rgba(48, 214, 255, 0.25) 45%, rgba(48, 214, 255, 0.25) 55%, var(--sys)); box-shadow: 0 0 40px rgba(48, 214, 255, 0.18); }
.cut.amber { background: linear-gradient(135deg, rgba(255, 181, 71, 0.8), rgba(255, 181, 71, 0.12) 45%, rgba(255, 181, 71, 0.12) 55%, rgba(255, 181, 71, 0.6)); }
.cut.red { background: linear-gradient(135deg, rgba(255, 106, 61, 0.8), rgba(255, 106, 61, 0.15)); }

/* ---------------------------------------------------------------- buttons */
.btn {
  --c: var(--sys); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 26px; border: 0; cursor: pointer; color: #021018; background: var(--c);
  font: 600 14px var(--display); letter-spacing: 0.16em; text-transform: uppercase;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: filter 0.15s, transform 0.15s, box-shadow 0.15s; box-shadow: 0 0 24px rgba(48, 214, 255, 0.35);
}
.btn:hover { color: #021018; filter: brightness(1.12); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--sys-line); }
.btn.ghost:hover { color: var(--hot); background: var(--sys-soft); }
.btn.small { min-height: 34px; padding: 0 16px; font-size: 12px; }
.btn.danger { --c: var(--red); box-shadow: none; }
.btn.danger.ghost { color: var(--red); box-shadow: inset 0 0 0 1px rgba(255, 106, 61, 0.5); background: transparent; }
.btn.amber { --c: var(--amber); box-shadow: 0 0 24px rgba(255, 181, 71, 0.3); }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn.wide { width: 100%; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--sys); font: inherit; cursor: pointer; }
.linkbtn:hover { color: var(--hot); }

/* ---------------------------------------------------------------- header and footer */
.top { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px); background: rgba(2, 7, 13, 0.72); border-bottom: 1px solid rgba(48, 214, 255, 0.12); }
.top .wrap { display: flex; align-items: center; gap: 20px; height: 64px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); font: 600 18px var(--display); letter-spacing: 0.32em; }
.brand svg { width: 30px; height: 30px; filter: drop-shadow(0 0 8px rgba(48, 214, 255, 0.6)); }
.nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav a, .nav .linkbtn { color: var(--muted); font: 600 12px var(--display); letter-spacing: 0.16em; text-transform: uppercase; }
.nav a:hover, .nav .linkbtn:hover, .nav a.on { color: var(--hot); }
.nav a.btn, .nav a.btn:hover { color: #021018; }
.nav form { margin: 0; }
.menu-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--sys-line); color: var(--ink); width: 42px; height: 38px; cursor: pointer; }
.foot { margin-top: 90px; border-top: 1px solid rgba(48, 214, 255, 0.12); padding: 34px 0 44px; color: var(--muted); font-size: 14px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 18px 34px; align-items: center; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot .right { margin-left: auto; }

/* ---------------------------------------------------------------- messages */
.flash { margin: 18px 0 0; padding: 12px 18px; border-left: 2px solid var(--sys); background: var(--sys-soft); color: var(--hot); font-size: 15px; }
.flash.warn { border-color: var(--amber); background: rgba(255, 181, 71, 0.10); color: #ffe2b8; }
.flash.err { border-color: var(--red); background: rgba(255, 106, 61, 0.10); color: #ffd2c4; }
.devbar { background: repeating-linear-gradient(135deg, rgba(255, 181, 71, 0.16) 0 12px, rgba(255, 181, 71, 0.06) 12px 24px); color: #ffd9a0; text-align: center; font: 600 11px var(--display); letter-spacing: 0.2em; text-transform: uppercase; padding: 6px 12px; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; min-height: min(760px, 92vh); display: grid; align-items: center; overflow: hidden; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero .wrap { position: relative; z-index: 1; padding: 80px 0 90px; }
.hero h1 { text-shadow: 0 0 34px rgba(48, 214, 255, 0.5); margin-bottom: 8px; }
.hero h1.brand-title { font-size: clamp(34px, 7.4vw, 84px); letter-spacing: 0.04em; overflow-wrap: anywhere; }
.hero .lead { font-size: clamp(18px, 2.2vw, 23px); color: #bfe9fb; max-width: 600px; margin-bottom: 30px; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero .meta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 26px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--sys); box-shadow: 0 0 8px var(--sys); }

/* ---------------------------------------------------------------- sections */
section.block { padding: 70px 0 10px; }
.section-head { max-width: 640px; margin-bottom: 30px; }
.grid { display: grid; gap: 18px; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.feature h3 { display: flex; align-items: center; gap: 12px; }
.feature p { color: var(--muted); margin: 0; font-size: 15px; }
.icon { width: 34px; height: 34px; flex: none; stroke: var(--sys); fill: none; stroke-width: 1.6; filter: drop-shadow(0 0 6px rgba(48, 214, 255, 0.55)); }
.product { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; padding: 30px; }
.product .art { aspect-ratio: 16 / 10; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 55%, rgba(48, 214, 255, 0.35), transparent 55%), #030c15; }
.product .art .ring { position: absolute; left: 50%; top: 55%; width: 58%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(214, 250, 255, 0.85); box-shadow: 0 0 30px var(--sys), inset 0 0 30px var(--sys); }
.product .art .ring::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed rgba(48, 214, 255, 0.7); }
.product .art .label { position: absolute; left: 18px; bottom: 14px; }
.product.soon .art { background: radial-gradient(circle at 50% 55%, rgba(255, 181, 71, 0.25), transparent 55%), #0c0a06; }
.product.soon .art .ring { border-color: rgba(255, 220, 170, 0.6); box-shadow: 0 0 26px rgba(255, 181, 71, 0.5); }
.tag { display: inline-block; padding: 3px 10px; font: 600 11px var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--sys); box-shadow: inset 0 0 0 1px var(--sys-line); background: rgba(48, 214, 255, 0.07); }
.tag.amber { color: var(--amber); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, 0.45); background: rgba(255, 181, 71, 0.07); }
.tag.red { color: var(--red); box-shadow: inset 0 0 0 1px rgba(255, 106, 61, 0.5); background: rgba(255, 106, 61, 0.08); }
.tag.green { color: var(--green); box-shadow: inset 0 0 0 1px rgba(77, 255, 180, 0.4); background: rgba(77, 255, 180, 0.07); }

/* launcher mock-up */
.mock { padding: 0; }
.mock .bar { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px; border-bottom: 1px solid rgba(48, 214, 255, 0.14); }
.mock .bar i { width: 9px; height: 9px; background: var(--dim); display: block; }
.mock .body { display: grid; grid-template-columns: 56px 1fr; min-height: 280px; }
.mock .rail { border-right: 1px solid rgba(48, 214, 255, 0.14); display: grid; align-content: start; gap: 14px; padding: 16px 0; justify-items: center; }
.mock .rail span { width: 22px; height: 22px; box-shadow: inset 0 0 0 1px var(--sys-line); }
.mock .rail span.on { background: var(--sys-soft); box-shadow: inset 0 0 0 1px var(--sys); }
.mock .stage { padding: 26px; background: radial-gradient(500px 220px at 70% 30%, rgba(48, 214, 255, 0.14), transparent 70%); }
.mock .stage .big { font: 600 34px var(--display); letter-spacing: 0.3em; }
.mock .shelf { display: flex; gap: 12px; margin-top: 26px; }
.mock .shelf div { flex: 1; height: 64px; box-shadow: inset 0 0 0 1px rgba(48, 214, 255, 0.2); background: rgba(48, 214, 255, 0.04); }
.mock .shelf div.on { box-shadow: inset 0 0 0 1px var(--sys); background: rgba(48, 214, 255, 0.12); }
.mock .progress { margin-top: 20px; height: 4px; background: rgba(48, 214, 255, 0.14); }
.mock .progress i { display: block; width: 64%; height: 100%; background: var(--sys); box-shadow: 0 0 12px var(--sys); }

/* ---------------------------------------------------------------- pricing */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: 30px 28px; }
.plan .price { font: 600 46px var(--display); letter-spacing: 0.02em; margin: 6px 0 2px; color: var(--hot); }
.plan .per { color: var(--muted); font-size: 14px; }
.plan ul { list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; align-items: baseline; color: #cdeefc; }
.plan li::before { content: ""; width: 7px; height: 7px; flex: none; transform: translateY(-2px) rotate(45deg); background: var(--sys); box-shadow: 0 0 8px var(--sys); }
.plan form { margin-top: auto; }
.plan .ribbon { position: absolute; top: 18px; right: 20px; }

/* ---------------------------------------------------------------- FAQ */
.faq details { border-bottom: 1px solid rgba(48, 214, 255, 0.14); padding: 16px 4px; }
.faq summary { cursor: pointer; font: 600 17px var(--display); letter-spacing: 0.03em; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--sys); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--muted); margin: 10px 0 0; }

/* ---------------------------------------------------------------- forms */
.auth { min-height: calc(100vh - 230px); display: grid; place-items: center; padding: 50px 0; }
.auth .cut { width: min(440px, 100%); padding: 34px 32px; }
.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field label { font: 600 12px var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
input[type=email], input[type=password], input[type=text], input[type=number], select {
  width: 100%; height: 46px; padding: 0 14px; color: var(--ink); font: 16px var(--body); background: rgba(3, 14, 26, 0.92);
  border: 1px solid rgba(48, 214, 255, 0.28); outline: none; transition: border-color 0.15s, box-shadow 0.15s; border-radius: 0;
}
input:hover, select:hover { border-color: rgba(48, 214, 255, 0.55); }
input:focus, select:focus { border-color: var(--sys); box-shadow: 0 0 0 3px rgba(48, 214, 255, 0.15); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); margin-bottom: 20px; }
.check input { margin-top: 4px; accent-color: var(--sys); width: 16px; height: 16px; }
.formfoot { margin-top: 20px; display: flex; justify-content: space-between; gap: 12px; font-size: 14px; flex-wrap: wrap; }
.inline { display: inline; margin: 0; }

/* ---------------------------------------------------------------- the account page */
.page-head { padding: 46px 0 6px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.page-head .right { margin-left: auto; display: flex; gap: 12px; flex-wrap: wrap; }
.cards { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-top: 26px; }
.span-12 { grid-column: span 12; } .span-8 { grid-column: span 8; } .span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; } .span-5 { grid-column: span 5; } .span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.big-status { font: 600 30px var(--display); letter-spacing: 0.04em; color: var(--hot); }
.rows { display: grid; gap: 0; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(48, 214, 255, 0.10); }
.row:first-child { border-top: 0; }
.row .what { display: grid; gap: 2px; min-width: 0; }
.row .what b { font-weight: 600; overflow-wrap: anywhere; }
.meter { height: 6px; background: rgba(48, 214, 255, 0.12); margin: 10px 0 8px; }
.meter i { display: block; height: 100%; background: var(--sys); box-shadow: 0 0 10px var(--sys); }
.meter.amber i { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font: 600 11px var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid rgba(48, 214, 255, 0.2); }
td { padding: 10px; border-bottom: 1px solid rgba(48, 214, 255, 0.08); vertical-align: top; overflow-wrap: anywhere; }
.table-scroll { overflow-x: auto; }
.stat { display: grid; gap: 4px; }
.stat b { font: 600 30px var(--display); color: var(--hot); letter-spacing: 0.03em; }
.legal { max-width: 780px; }
.legal h2 { margin-top: 34px; font-size: 22px; }
.legal p, .legal li { color: #c3e3f2; }
.notice { padding: 14px 18px; margin: 20px 0; border-left: 2px solid var(--amber); background: rgba(255, 181, 71, 0.08); color: #ffe2b8; font-size: 15px; }

/* ---------------------------------------------------------------- small helpers (no inline styles: the CSP forbids them) */
.mt-8 { margin-top: 8px; } .mt-14 { margin-top: 14px; } .mt-24 { margin-top: 24px; } .mb-0 { margin-bottom: 0; }
.lead-sm { font-size: 18px; }
.center-items { align-items: center; }
.bar-dots { margin-left: auto; display: flex; gap: 8px; }
.hidden { display: none; }
.w-0 { width: 0%; } .w-5 { width: 5%; } .w-10 { width: 10%; } .w-15 { width: 15%; } .w-20 { width: 20%; } .w-25 { width: 25%; } .w-30 { width: 30%; } .w-35 { width: 35%; } .w-40 { width: 40%; } .w-45 { width: 45%; } .w-50 { width: 50%; } .w-55 { width: 55%; } .w-60 { width: 60%; } .w-65 { width: 65%; } .w-70 { width: 70%; } .w-75 { width: 75%; } .w-80 { width: 80%; } .w-85 { width: 85%; } .w-90 { width: 90%; } .w-95 { width: 95%; } .w-100 { width: 100%; }
.right-text { text-align: right; }
.gap-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------------------------------------------------------------- reveal on scroll (only when JS ran) */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.seen { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- the store */
.filters { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-top: 22px; }
.filters input[type=text] { width: min(320px, 100%); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 7px 14px; font: 600 12px var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); box-shadow: inset 0 0 0 1px rgba(48, 214, 255, 0.22); }
.chip:hover { color: var(--hot); box-shadow: inset 0 0 0 1px var(--sys-line); }
.chip.on { color: #021018; background: var(--sys); box-shadow: none; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.item-card { display: grid; gap: 4px; align-content: start; color: var(--ink); padding: 16px 16px 18px; }
.item-card:hover { color: var(--ink); }
.item-card:hover .item-art { filter: brightness(1.25); }
.item-card b { font: 600 18px var(--display); letter-spacing: 0.02em; }
.item-card .muted { font-size: 14px; min-height: 42px; }
.item-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; font-size: 13px; }
.item-foot .price { font: 600 14px var(--display); color: var(--hot); letter-spacing: 0.06em; }
.item-art, .item-hero { position: relative; display: block; aspect-ratio: 16 / 9; margin-bottom: 10px; overflow: hidden; transition: filter 0.2s;
  background: radial-gradient(circle at 50% 60%, rgba(48, 214, 255, 0.32), transparent 60%), #030c15; }
.item-hero { aspect-ratio: 21 / 9; }
.item-art i, .item-hero i { position: absolute; left: 50%; top: 58%; width: 40%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 2px solid rgba(214, 250, 255, 0.8); box-shadow: 0 0 22px var(--sys), inset 0 0 18px var(--sys); }
.kind-theme .item-art, .kind-theme .item-hero, .item-hero.kind-theme { background: conic-gradient(from 200deg at 50% 60%, #30d6ff, #5b8fff, #cc85ff, #ffc247, #4dffb4, #30d6ff); }
.kind-theme .item-art i, .item-hero.kind-theme i { border-radius: 50%; background: rgba(2, 7, 13, 0.55); }
.kind-design .item-art i, .item-hero.kind-design i { clip-path: polygon(14% 0, 100% 0, 100% 86%, 86% 100%, 0 100%, 0 14%); border-radius: 0; }
.kind-skill .item-art, .item-hero.kind-skill { background: radial-gradient(circle at 50% 60%, rgba(77, 255, 180, 0.3), transparent 60%), #03100c; }
.kind-skill .item-art i, .item-hero.kind-skill i { border-color: rgba(200, 255, 230, 0.8); box-shadow: 0 0 22px rgba(77, 255, 180, 0.8); transform: translate(-50%, -50%) rotate(45deg); width: 30%; }
.kind-plugin .item-art, .item-hero.kind-plugin { background: radial-gradient(circle at 50% 60%, rgba(255, 181, 71, 0.3), transparent 60%), #0d0904; }
.kind-plugin .item-art i, .item-hero.kind-plugin i { border-color: rgba(255, 225, 180, 0.85); box-shadow: 0 0 22px rgba(255, 181, 71, 0.8); border-radius: 30%; }
.prose p { color: #c9e9f7; }
.perms ul { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.perms li { display: flex; gap: 10px; align-items: baseline; }
.perms li::before { content: "!"; flex: none; width: 18px; height: 18px; display: inline-grid; place-items: center; font: 700 11px var(--display); color: #021018; background: var(--amber); }
pre.code { margin: 10px 0; padding: 14px 16px; overflow-x: auto; background: rgba(3, 14, 26, 0.92); border: 1px solid rgba(48, 214, 255, 0.2); font: 13px/1.5 var(--mono); color: #bfeaff; }
.span-2 { grid-column: span 2; }
.hero.hero-short { min-height: min(520px, 70vh); }
textarea { width: 100%; padding: 12px 14px; color: var(--ink); font: 15px/1.5 var(--body); background: rgba(3, 14, 26, 0.92); border: 1px solid rgba(48, 214, 255, 0.28); outline: none; resize: vertical; border-radius: 0; }
textarea:focus { border-color: var(--sys); box-shadow: 0 0 0 3px rgba(48, 214, 255, 0.15); }
input[type=file] { color: var(--muted); font: 14px var(--body); }

/* the admin logs page */
.logbox { max-height: 62vh; overflow: auto; padding: 12px 14px; background: #01070d;
  border: 1px solid rgba(48, 214, 255, 0.16); }
.logline { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; font-size: 12.5px; color: var(--muted); }
.logline.bad { color: var(--red); }
.logtools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0; }
.logtools input[type=text] { min-width: 240px; flex: 1; }

@media (max-width: 900px) {
  .grid.three { grid-template-columns: 1fr 1fr; }
  .product { grid-template-columns: 1fr; }
  .span-8, .span-7, .span-6, .span-5, .span-4 { grid-column: span 12; }
  .span-3 { grid-column: span 6; }
}
@media (max-width: 680px) {
  .menu-toggle { display: block; }
  .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 16px 16px; background: rgba(2, 7, 13, 0.97); border-bottom: 1px solid rgba(48, 214, 255, 0.16); }
  .nav.open { display: flex; }
  .nav a, .nav .linkbtn { padding: 12px 0; }
  .grid.three, .grid.two { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .cut { padding: 20px 18px; }
  .hero .wrap { padding: 60px 0 70px; }
  .hero canvas { opacity: 0.5; }
  .foot .right { margin-left: 0; }
  .mock .body { grid-template-columns: 44px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}