@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/landing/0e949ea5-21db-48ed-8b20-141853fc9f67.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/landing/c22f668c-41df-47fb-9818-2ad50049a0e9.woff2") format("woff2");
}

:root { --ink:#111; --paper:#fff; --panel:#d9d9d7; --acid:#00ff00; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
html, body { margin:0; min-height:100%; }
body { background:var(--paper); color:var(--ink); font-family:"IBM Plex Mono",ui-monospace,monospace; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
::selection { background:var(--acid); color:var(--ink); }

.landing { height:100svh; min-height:640px; overflow:hidden; }
.system-header { height:34px; display:flex; align-items:baseline; justify-content:space-between; padding:7px 14px 4px; font-size:12px; font-weight:700; letter-spacing:1px; }
.wordmark span { font-weight:400; opacity:.55; }
.system-header nav { display:flex; gap:18px; font-weight:500; letter-spacing:.6px; }
.system-header a:hover { color:var(--acid); }
.text-field { height:calc(100svh - 34px); min-height:606px; padding:0 14px 6px; display:grid; grid-template-rows:minmax(0,1fr) 168px minmax(0,1fr); gap:0; }
.copy-grid { display:grid; grid-template-columns:1fr 1fr 1.8fr 1fr 1fr; column-gap:14px; overflow:hidden; min-height:0; }
.copy-grid--top { padding-top:4px; }
.clip-cell { min-height:0; overflow:hidden; }
.clip-cell p { margin:0; font-size:11px; font-weight:400; line-height:1.28; letter-spacing:.1px; text-align:justify; hyphens:auto; }
.word { font-weight:400; transition:font-weight 90ms linear; }
.word:hover { font-weight:700; }
.portal { display:inline; margin:0; padding:0; border:0; background:none; color:inherit; text-align:inherit; cursor:pointer; }
.portal:hover, .portal:focus-visible { color:var(--acid); font-weight:700; }
.start-void { display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; text-align:center; }
.start-frame { position:relative; width:240px; }
.start-frame i { position:absolute; width:7px; height:7px; pointer-events:none; }
.start-frame i:nth-child(1) { top:-5px; left:-5px; border-top:1px solid; border-left:1px solid; }
.start-frame i:nth-child(2) { top:-5px; right:-5px; border-top:1px solid; border-right:1px solid; }
.start-frame i:nth-child(3) { bottom:-5px; left:-5px; border-bottom:1px solid; border-left:1px solid; }
.start-frame i:nth-child(4) { right:-5px; bottom:-5px; border-right:1px solid; border-bottom:1px solid; }
.start-button { display:block; padding:14px 26px; background:var(--ink); color:var(--paper); font-size:14px; font-weight:700; letter-spacing:2px; text-align:center; }
.start-button:hover { transform:translate(1px,1px); }
.signal { width:240px; margin:9px 0 0; padding:0 3px; overflow:hidden; background:#2200ff; color:#6fff00; font-size:10px; font-weight:700; line-height:1.4; letter-spacing:.5px; text-align:center; white-space:nowrap; animation:blink 1.1s steps(1,end) infinite; }

.window-layer { position:fixed; inset:0; z-index:10; pointer-events:none; }
.feature-window { position:fixed; width:min(560px,calc(100vw - 40px)); max-height:80vh; display:flex; flex-direction:column; border:1px solid var(--ink); background:var(--paper); pointer-events:auto; }
.window-bar { flex:none; display:flex; align-items:center; justify-content:space-between; min-height:32px; padding:5px 6px 5px 11px; border-bottom:1px solid var(--ink); background:var(--panel); font-size:11px; font-weight:700; letter-spacing:1.2px; cursor:move; touch-action:none; }
.window-close { min-width:32px; min-height:32px; margin:-5px -4px -5px 0; border:0; background:transparent; cursor:pointer; }
.window-close:hover { background:var(--acid); }
.window-body { padding:16px 16px 18px; overflow:auto; }
.window-body h2 { margin:0 0 14px; font-size:15px; line-height:1.35; letter-spacing:.4px; text-transform:uppercase; }
.demo-media { aspect-ratio:16/9; display:grid; place-items:center; margin-bottom:14px; border:1px solid var(--ink); background:#f2f2f0; font-size:11px; letter-spacing:2px; }
.window-body > p { margin:0 0 14px; font-size:12px; line-height:1.55; }
.feature-list { padding:0; margin:0 0 16px; list-style:none; }
.feature-list li { padding:5px 0; border-top:1px solid var(--panel); font-size:11.5px; letter-spacing:.6px; }
.feature-list b { display:inline-block; min-width:30px; }
.try-row { display:flex; justify-content:flex-end; }
.try-link { padding:9px 18px; background:var(--ink); color:var(--paper); font-size:12px; font-weight:700; letter-spacing:1.5px; }
.try-link:hover { background:var(--acid); color:var(--ink); }
:focus-visible { outline:2px solid var(--acid); outline-offset:2px; }
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

@media (max-width:760px) {
  .landing { height:auto; min-height:100svh; overflow:visible; padding-bottom:env(safe-area-inset-bottom); }
  .system-header { position:sticky; top:0; z-index:2; height:auto; padding:calc(10px + env(safe-area-inset-top)) 14px 10px; border-bottom:1px solid var(--ink); background:rgba(255,255,255,.96); }
  .system-header nav { gap:12px; font-size:10px; }
  .text-field { height:auto; min-height:0; display:block; padding:0 14px 24px; }
  .copy-grid { display:block; overflow:visible; }
  .clip-cell p { padding:13px 0; border-bottom:1px solid #d9d9d7; font-size:12px; line-height:1.45; text-align:left; }
  .start-void { min-height:210px; border-bottom:1px solid var(--ink); }
  .start-button { min-height:48px; padding:15px 30px; }
  .signal { border:0!important; font-size:9px!important; }
  .portal { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
  .feature-window { inset:0!important; width:100%; max-height:none; height:100svh; border:0; }
  .window-bar { min-height:48px; padding-top:calc(5px + env(safe-area-inset-top)); cursor:default; }
  .window-close { min-width:44px; min-height:44px; }
  .window-body { padding:20px 16px calc(24px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .signal { animation:none; }
}