:root { --paper:#f3eddb; --paper-light:#fbf8ee; --ink:#243127; --sage:#768c69; --sage-dark:#465b48; --coral:#d85b4d; --charcoal:#242824; --line:rgba(36,49,39,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Aptos","Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
main { overflow:hidden; }
.nav-shell { position:relative; z-index:10; height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,5vw,76px); border-bottom:1px solid var(--line); background:rgba(243,237,219,.92); }
.brand { display:flex; align-items:center; gap:11px; font-family:Georgia,serif; font-size:20px; font-weight:700; letter-spacing:-.02em; }
.brand img { width:36px; height:36px; border-radius:10px; object-fit:cover; }
.nav-links { display:flex; gap:36px; font-size:13px; }
.nav-links a,.text-link { border-bottom:1px solid transparent; transition:.2s; }
.nav-links a:hover,.text-link:hover { border-color:currentColor; }
.nav-download { padding:12px 17px; background:var(--ink); color:var(--paper-light); font-size:13px; }
.nav-download span { margin-left:14px; }
.hero { min-height:720px; display:grid; grid-template-columns:1.02fr .98fr; border-bottom:1px solid var(--line); background-color:var(--paper); background-image:radial-gradient(rgba(36,49,39,.07) .6px,transparent .6px); background-size:7px 7px; }
.hero-copy { padding:clamp(70px,9vw,130px) clamp(28px,6vw,92px); }
.eyebrow,.kicker { display:flex; align-items:center; gap:10px; font:700 11px "Courier New",monospace; letter-spacing:.16em; }
.eyebrow span { width:9px; height:9px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 4px rgba(216,91,77,.14); }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:690px; margin:30px 0; font:400 clamp(52px,6.2vw,94px)/.92 Georgia,serif; letter-spacing:-.055em; }
h1 em { color:var(--coral); font-weight:400; }
.hero-copy > p { max-width:610px; color:#526054; font:400 clamp(16px,1.45vw,20px)/1.65 Georgia,serif; }
.hero-actions { display:flex; align-items:center; gap:30px; margin-top:38px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; min-width:230px; padding:17px 20px; font-size:13px; font-weight:700; }
.button.primary { background:var(--coral); color:#fff9ee; }
.button b { font-size:17px; }
.text-link { font-size:13px; }
.text-link span { margin-left:8px; }
.trust-line { display:flex; gap:30px; margin-top:56px; color:#697268; font:11px "Courier New",monospace; text-transform:uppercase; }
.trust-line span::before { content:"✓"; margin-right:7px; color:var(--sage-dark); }
.hero-art { position:relative; display:grid; place-items:center; min-height:620px; padding:60px; border-left:1px solid var(--line); background:var(--sage); }
.coordinate-window { position:relative; width:min(100%,610px); aspect-ratio:1.08; padding:46px 24px 24px; background:var(--charcoal); box-shadow:24px 28px 0 rgba(36,49,39,.18); transform:rotate(1.2deg); }
.window-top { position:absolute; inset:0 0 auto; height:38px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border-bottom:1px solid rgba(255,255,255,.2); color:#dce4d5; font:9px "Courier New",monospace; letter-spacing:.08em; }
.hero-grid { height:100%; display:grid; grid-template-columns:repeat(10,1fr); grid-template-rows:repeat(6,1fr); }
.hero-grid i { display:grid; place-items:center; border-right:1px solid rgba(243,237,219,.18); border-bottom:1px solid rgba(243,237,219,.18); color:#fff; font:normal 12px "Courier New",monospace; }
.hero-grid i.focus { background:var(--coral); font-weight:700; }
.nested-grid { position:absolute; left:35%; top:48%; width:44%; display:grid; grid-template-columns:repeat(10,1fr); grid-template-rows:repeat(3,1fr); background:var(--paper-light); box-shadow:0 10px 26px rgba(0,0,0,.28); }
.nested-grid i { aspect-ratio:1; display:grid; place-items:center; border-right:1px solid var(--line); border-bottom:1px solid var(--line); font:normal clamp(5px,.55vw,9px) "Courier New",monospace; }
.nested-grid i.focus { color:white; background:var(--coral); }
.crosshair { position:absolute; left:54.5%; top:68%; width:44px; height:44px; border:1px solid var(--paper-light); border-radius:50%; transform:translate(-50%,-50%); }
.crosshair::before,.crosshair::after { content:""; position:absolute; background:var(--paper-light); }
.crosshair::before { width:64px; height:1px; left:-11px; top:21px; }
.crosshair::after { height:64px; width:1px; top:-11px; left:21px; }
.crosshair i { position:absolute; width:7px; height:7px; left:18px; top:18px; border-radius:50%; background:var(--coral); }
.paper-tag { position:absolute; right:5%; bottom:8%; padding:16px 20px; background:var(--paper); transform:rotate(-5deg); font:10px/1.4 "Courier New",monospace; box-shadow:4px 6px 0 rgba(36,49,39,.12); }
.paper-tag strong { font-size:18px; }
.manifesto { display:flex; align-items:center; justify-content:space-between; padding:28px clamp(24px,6vw,90px); background:var(--ink); color:var(--paper-light); }
.manifesto > p { margin:0; font:italic 17px Georgia,serif; }
.manifesto > div { display:flex; align-items:center; gap:14px; font:11px "Courier New",monospace; text-transform:uppercase; }
.manifesto strong { font-size:22px; color:#cbd6c2; }
.manifesto i { width:44px; height:1px; background:rgba(255,255,255,.35); }
.how-section { padding:110px clamp(24px,6vw,90px) 130px; background:var(--paper-light); }
.section-intro { max-width:730px; margin-bottom:54px; }
.section-intro h2,.privacy-section h2,.download-section h2 { margin:18px 0; font:400 clamp(42px,5vw,72px)/1 Georgia,serif; letter-spacing:-.04em; }
.section-intro p { max-width:610px; color:#657065; font:17px/1.6 Georgia,serif; }
.demo-card { border:1px solid var(--line); background:var(--paper); box-shadow:12px 14px 0 rgba(36,49,39,.08); }
.demo-head { display:flex; justify-content:space-between; align-items:end; padding:30px 34px; border-bottom:1px solid var(--line); }
.demo-head h2 { margin:10px 0 0; font:400 clamp(26px,3vw,42px) Georgia,serif; }
.reset { padding:8px 12px; border:1px solid var(--line); background:transparent; cursor:pointer; font:10px "Courier New",monospace; text-transform:uppercase; }
.screen-grid { position:relative; height:360px; display:grid; grid-template-columns:repeat(10,1fr); overflow:hidden; background:var(--sage-dark); }
.region { border:0; border-right:1px solid rgba(255,255,255,.2); background:transparent; color:#eef2e9; cursor:pointer; }
.region span { display:inline-grid; place-items:center; width:30px; height:30px; border:1px solid rgba(255,255,255,.35); font:12px "Courier New",monospace; }
.region.chosen:hover,.step-1 .region.chosen,.step-2 .region.chosen,.step-3 .region.chosen { background:rgba(216,91,77,.55); }
.target-panel,.precision-panel { position:absolute; inset:12% 10%; display:grid; grid-template-columns:repeat(10,1fr); grid-template-rows:repeat(3,1fr); opacity:0; pointer-events:none; background:var(--paper-light); box-shadow:0 16px 40px rgba(0,0,0,.25); transition:.3s; }
.target-panel button,.precision-panel button { border:0; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:transparent; font:11px "Courier New",monospace; cursor:pointer; }
.step-1 .target-panel { opacity:1; pointer-events:auto; }
.target-panel button.chosen:hover,.step-2 .target-panel button.chosen { background:var(--coral); color:white; }
.precision-panel { inset:24% 27%; z-index:2; }
.step-2 .precision-panel { opacity:1; pointer-events:auto; }
.precision-panel button.chosen:hover,.step-3 .precision-panel button.chosen { background:var(--coral); color:white; }
.target-dot { position:absolute; left:50%; top:50%; width:72px; height:72px; opacity:0; border:1px solid white; border-radius:50%; transform:translate(-50%,-50%); transition:.3s; }
.step-3 .target-dot { opacity:1; }
.target-dot::before,.target-dot::after { content:""; position:absolute; background:white; }
.target-dot::before { width:100px; height:1px; left:-14px; top:35px; }
.target-dot::after { height:100px; width:1px; left:35px; top:-14px; }
.target-dot i { position:absolute; inset:30px; border-radius:50%; background:var(--coral); }
.demo-steps { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.demo-steps button { display:grid; grid-template-columns:auto 1fr auto; gap:15px; align-items:center; padding:21px 24px; border:0; border-right:1px solid var(--line); background:transparent; text-align:left; cursor:pointer; }
.demo-steps button:last-child { border-right:0; }
.demo-steps button.active { background:#eee7d2; }
.demo-steps button.done { background:#dce4d5; }
.demo-steps small { font:10px "Courier New",monospace; color:#7f887b; }
.demo-steps kbd,.action-grid kbd { padding:5px 8px; border:1px solid var(--line); background:var(--paper-light); font:11px "Courier New",monospace; box-shadow:0 2px 0 var(--line); }
.demo-note { margin:0; padding:15px 24px; border-top:1px solid var(--line); color:#667064; font:12px "Courier New",monospace; text-align:center; }
.actions-section { padding:110px clamp(24px,6vw,90px); color:var(--paper-light); background:var(--charcoal); }
.section-intro.light p { color:#aeb9aa; }
.action-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.18); border-left:1px solid rgba(255,255,255,.18); }
.action-grid article { min-height:240px; padding:28px; border-right:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); }
.action-grid kbd { display:inline-block; margin:18px 0 24px; color:var(--paper-light); background:transparent; border-color:rgba(255,255,255,.25); box-shadow:none; }
.action-number { display:block; color:#8f9c8e; font:10px "Courier New",monospace; }
.action-grid h3 { margin:0 0 10px; font:400 28px Georgia,serif; }
.action-grid p { max-width:270px; color:#aeb9aa; line-height:1.55; }
.privacy-section { display:grid; grid-template-columns:.4fr 1fr .8fr; gap:7vw; align-items:center; padding:120px clamp(24px,6vw,90px); background:var(--paper); }
.privacy-seal { width:190px; height:190px; display:grid; align-content:center; justify-items:center; border:1px solid var(--coral); outline:1px solid var(--coral); outline-offset:7px; border-radius:50%; color:var(--coral); transform:rotate(-7deg); }
.privacy-seal span { font:48px Georgia,serif; }
.privacy-seal small { font:11px "Courier New",monospace; letter-spacing:.2em; }
.privacy-section > div:nth-child(2) p { color:#657065; font:17px/1.7 Georgia,serif; }
.privacy-section ul { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.privacy-section li { padding:16px 0; border-bottom:1px solid var(--line); font-size:14px; }
.privacy-section li span { display:inline-block; width:42px; color:#8d9488; font:10px "Courier New",monospace; }
.download-section { position:relative; display:grid; grid-template-columns:.55fr 1.1fr; gap:8vw; padding:120px clamp(24px,8vw,130px); color:#f8f3e5; background:var(--coral); }
.release-stamp { align-self:start; justify-self:center; width:220px; height:220px; display:grid; place-content:center; border:2px dashed #fff5e4; border-radius:50%; text-align:center; font:12px/1.5 "Courier New",monospace; transform:rotate(-8deg); }
.release-stamp strong { font:50px Georgia,serif; }
.download-copy { max-width:700px; }
.download-copy > p { font:13px "Courier New",monospace; }
.download-button { margin:25px 0; min-width:290px; color:var(--ink); background:var(--paper-light); }
.beta-notice { display:flex; gap:14px; max-width:600px; padding:16px; border:1px solid rgba(255,255,255,.35); }
.beta-notice strong { white-space:nowrap; }
.beta-notice span { line-height:1.45; opacity:.86; }
.download-copy details { margin-top:20px; font:11px "Courier New",monospace; }
.download-copy summary { cursor:pointer; }
.download-copy code { display:block; margin-top:12px; padding:12px; overflow-wrap:anywhere; background:rgba(65,24,19,.2); }
footer { height:110px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,6vw,90px); background:var(--paper); }
footer p,footer > a:last-child { margin:0; font:12px "Courier New",monospace; }
@media (max-width:900px) {
  .nav-links { display:none; }
  .hero { grid-template-columns:1fr; }
  .hero-art { border-left:0; border-top:1px solid var(--line); }
  .trust-line { flex-wrap:wrap; }
  .privacy-section { grid-template-columns:1fr; }
  .privacy-seal { justify-self:center; }
  .action-grid { grid-template-columns:repeat(2,1fr); }
  .download-section { grid-template-columns:1fr; }
  .release-stamp { justify-self:start; }
}
@media (max-width:600px) {
  .nav-shell { height:70px; }
  .nav-download { padding:10px 12px; }
  .nav-download span { display:none; }
  .hero-copy { padding-top:70px; }
  .hero-actions { align-items:flex-start; flex-direction:column; }
  .hero-art { min-height:430px; padding:35px 24px; }
  .coordinate-window { width:100%; }
  .manifesto { align-items:flex-start; flex-direction:column; gap:20px; }
  .demo-head { align-items:flex-start; gap:20px; }
  .screen-grid { height:300px; }
  .demo-steps { grid-template-columns:1fr; }
  .demo-steps button { border-right:0; border-bottom:1px solid var(--line); }
  .action-grid { grid-template-columns:1fr; }
  .privacy-section,.actions-section,.how-section,.download-section { padding-top:80px; padding-bottom:80px; }
  .release-stamp { width:160px; height:160px; }
  .download-button { min-width:100%; }
  .beta-notice { flex-direction:column; }
  footer { height:auto; padding-top:35px; padding-bottom:35px; flex-direction:column; gap:22px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  * { transition:none !important; }
}