@font-face{font-family:Dela;src:url(fonts/dela.woff2) format("woff2");font-display:swap}
@font-face{font-family:JB;src:url(fonts/jbmono.woff2) format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:Inst;src:url(fonts/instrument.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(fonts/vazirmatn-arabic.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0600-06FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}

:root{
  --you:#FFE14D; --you-2:#FFF4A8; --you-ink:#15130B; --paper:#FFFDF2;
  --ai:#2A1A8C; --ai-2:#3A28B4; --ai-3:#1C1068; --ai-ink:#ECE8FF; --ai-hi:#A996FF;
  --seam:#0D0B12; --stamp:#FF3B1F; --ok:#17A34A;
  --disp:Dela,"Arial Black",Impact,sans-serif;
  --body:Inst,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:JB,ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --fs:14px; --lh:24px; --pad:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--seam);color:var(--you-ink);font:16px/1.55 var(--body);overflow-x:hidden}
html[lang=fa] body{font-family:Vazirmatn,var(--body)}
code,pre,kbd{font-family:var(--mono)}
a{color:inherit}
button{font:inherit;cursor:pointer}
.skip{position:absolute;left:8px;top:-80px;background:var(--stamp);color:#fff;padding:8px 12px;z-index:50}
.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--stamp);outline-offset:2px}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px clamp(14px,3vw,32px);background:var(--seam);color:#fff;border-bottom:1px solid #26222f}
.brand{font:28px/1 var(--disp);text-decoration:none;letter-spacing:-.02em;display:inline-flex;direction:ltr}
.brand-y{color:var(--you)} .brand-v{color:var(--ai-hi)}
.top-nav{display:flex;align-items:center;gap:clamp(8px,2vw,22px);font-size:14px}
.top-nav a{text-decoration:none;opacity:.85} .top-nav a:hover{opacity:1;text-decoration:underline}
.lang{background:var(--you);color:var(--you-ink);border:0;border-radius:999px;padding:4px 12px;font-weight:700;font-family:Vazirmatn,var(--body)}
html[lang=fa] .lang{font-family:var(--body)}

/* ---------- the split ---------- */
.split{display:grid;grid-template-columns:1fr 14px 1fr}
.side{padding:clamp(22px,4vw,56px) clamp(16px,4vw,56px);min-width:0}
.side.you{background:var(--you);color:var(--you-ink)}
.side.ai{background:var(--ai);color:var(--ai-ink)}
.seam{background:var(--seam);position:relative}
.seam::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 10px,#2b2638 10px 14px);
  width:4px;margin:auto}

/* ---------- hero ---------- */
.hero{min-height:min(72vh,640px)}
.hero .side{display:flex;flex-direction:column;justify-content:flex-end}
.hero .side.ai{justify-content:flex-start}
.who{display:flex;align-items:center;gap:8px;margin:0 0 14px;font:600 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
html[lang=fa] .who{font-family:Vazirmatn;letter-spacing:0;font-size:15px}
.who .dot{width:10px;height:10px;border-radius:50%;background:currentColor}
.big{margin:0;font:clamp(34px,6.2vw,88px)/.98 var(--disp);letter-spacing:-.025em;max-width:9.5em}
html[lang=fa] .big{font-family:Vazirmatn;font-weight:900;line-height:1.25;letter-spacing:0}
.hero .ai .big{color:var(--ai-ink)}
.hero .ai .big::after{content:"";display:block;width:2.2em;height:.12em;margin-top:.25em;background:var(--ai-hi)}
.seal{position:absolute;top:50%;left:50%;width:132px;height:132px;transform:translate(-50%,-50%) rotate(-12deg);
  border-radius:50%;background:var(--stamp);border:5px solid var(--seam);display:grid;place-items:center;z-index:2;
  box-shadow:0 0 0 4px var(--stamp),0 10px 0 4px rgba(0,0,0,.35);animation:seal 1.1s cubic-bezier(.2,1.6,.4,1) .25s both}
.seal span{font:34px/1 var(--disp);color:#fff;letter-spacing:-.02em}
.seal::after{content:"";position:absolute;inset:8px;border-radius:50%;border:2px dashed rgba(255,255,255,.7)}
@keyframes seal{from{transform:translate(-50%,-50%) rotate(-40deg) scale(2.4);opacity:0}to{transform:translate(-50%,-50%) rotate(-12deg) scale(1);opacity:1}}

.pitch{background:var(--seam);color:#f3f1f8;text-align:center;padding:clamp(36px,6vw,72px) 18px}
.pitch h1{font:clamp(24px,3.4vw,42px)/1.15 var(--disp);letter-spacing:-.02em;margin:0 auto 18px;max-width:22em}
html[lang=fa] .pitch h1{font-family:Vazirmatn;font-weight:900;line-height:1.5;letter-spacing:0}
.pitch p{max-width:40em;margin:0 auto 14px;color:#c9c4d6;font-size:clamp(16px,1.6vw,18px)}
.pitch .agents{font:13px/1.6 var(--mono);color:var(--you);letter-spacing:.04em}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}

.btn{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--seam);background:#fff;color:var(--seam);
  padding:12px 18px;border-radius:0;font-weight:700;text-decoration:none;box-shadow:4px 4px 0 var(--seam);transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--seam)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--seam)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:2px 2px 0 var(--seam)}
.btn-stamp{background:var(--stamp);color:#fff;border-color:#fff;box-shadow:4px 4px 0 #fff}
.btn-stamp:hover{box-shadow:5px 5px 0 #fff}
.btn-line{background:transparent;color:inherit;border-color:currentColor;box-shadow:none}
.btn-line:hover{box-shadow:none;background:rgba(255,255,255,.08)}
.btn-small{padding:7px 12px;font-size:14px;box-shadow:3px 3px 0 var(--seam)}
.pitch .btn-line{color:#fff}

/* ---------- arena ---------- */
.arena{background:var(--seam);color:#fff;padding:clamp(28px,4vw,48px) 0 0}
.arena-h{margin:0 clamp(14px,3vw,32px) 8px;font:clamp(26px,3.6vw,44px)/1.1 var(--disp);letter-spacing:-.02em;color:var(--you)}
html[lang=fa] .arena-h{font-family:Vazirmatn;font-weight:900}
.arena-h small{display:block;font:500 14px/1.5 var(--body);color:#b9b3c9;letter-spacing:0;margin-top:6px}
html[lang=fa] .arena-h small{font-family:Vazirmatn}
.steps{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:12px clamp(14px,3vw,32px) 18px;padding:0;font-size:14px;color:#d8d3e6}
.steps li{display:flex;align-items:center;gap:8px;transition:color .2s}
.steps b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid #57506a;font:700 12px var(--mono)}
.steps li.on{color:#fff}.steps li.on b{background:var(--you);border-color:var(--you);color:var(--seam)}
.steps li.done b{background:var(--ok);border-color:var(--ok);color:#fff}
.steps code{background:#211d2b;padding:1px 5px;border-radius:3px}

.board .side{padding:16px clamp(10px,2vw,22px) 18px}
.pane{display:flex;flex-direction:column;min-height:420px}
.pane-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.tab{font:600 13px var(--mono);background:var(--seam);color:var(--you);padding:5px 10px}
.tab-ai{background:var(--ai-ink);color:var(--ai)}
html[lang=fa] .tab-ai,html[lang=fa] .msg .k{font-family:Vazirmatn}
.pane-who{font-size:13px;opacity:.8}
.board-seam{display:flex;align-items:center;justify-content:center}
.meter{position:relative;z-index:2;background:var(--seam);color:#fff;display:flex;flex-direction:column;align-items:center;padding:10px 4px;
  width:62px;margin-inline:-24px;border:2px solid #fff;text-align:center}
.meter b{font:28px/1 var(--disp);color:var(--you)}
.meter span{font-size:10px;line-height:1.2;margin-top:4px;text-transform:uppercase;letter-spacing:.06em}
html[lang=fa] .meter span{font-family:Vazirmatn;letter-spacing:0;text-transform:none;font-size:11px}
.meter.bump b{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.6);color:#fff}}

/* the editor: a textarea over a highlight layer, no wrapping so lines map 1:1 */
.ed{scroll-margin-top:70px;direction:ltr;display:flex;background:var(--paper);border:2px solid var(--seam);box-shadow:6px 6px 0 var(--seam);font:var(--fs)/var(--lh) var(--mono);
  color:var(--you-ink);position:relative;flex:1}
.gutter{flex:none;padding:var(--pad) 0;background:#f3eecf;border-right:2px solid var(--seam);user-select:none;min-width:58px}
.gutter div{height:var(--lh);display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 6px 0 8px;color:#8a8470;font-size:12px}
.gutter .tg{font-size:9px;font-weight:700;letter-spacing:.04em;padding:0 4px;line-height:14px;border-radius:2px;visibility:hidden}
.gutter .you .tg{visibility:visible;background:var(--seam);color:var(--you)}
.gutter .ai .tg{visibility:visible;background:var(--ai);color:#fff}
.code{position:relative;flex:1;overflow-x:auto;overflow-y:hidden;min-width:0}
.hl,#ta{padding:var(--pad);font:inherit;white-space:pre;tab-size:4;letter-spacing:0}
.hl{position:absolute;inset:0;pointer-events:none;color:transparent}
.hl div{height:var(--lh);margin:0 calc(var(--pad) * -1);padding:0 var(--pad)}
.hl .you{background:var(--you-2);box-shadow:inset 4px 0 0 var(--seam)}
.hl .ai{background:#e3dcff;box-shadow:inset 4px 0 0 var(--ai)}
.hl .boom{animation:boom 1s}
.hl .gone{background:#ffd2c9;box-shadow:inset 4px 0 0 var(--stamp)}
.hl .back{animation:back 1.2s}
@keyframes boom{0%,100%{background:var(--you-2)}20%,60%{background:var(--stamp)}}
@keyframes back{0%{background:var(--ok)}100%{background:var(--you-2)}}
#ta{position:relative;display:block;border:0;outline:0;resize:none;background:transparent;color:inherit;margin:0;overflow:hidden;
  min-width:100%;caret-color:var(--stamp);z-index:1}
#ta[readonly]{cursor:progress}
.ghost{position:absolute;top:0;left:0;height:var(--lh);z-index:3;pointer-events:none;opacity:0;transition:transform .12s linear,opacity .2s}
.ghost.on{opacity:1}
.ghost i{display:block;width:3px;height:var(--lh);background:var(--ai);box-shadow:0 0 0 2px #fff;animation:blink .8s steps(2) infinite}
.ghost span{position:absolute;bottom:100%;left:0;background:var(--ai);color:#fff;font:700 10px/1 var(--mono);padding:3px 5px;white-space:nowrap;border-radius:2px 2px 2px 0}
.ghost.hit{animation:shake .45s}
@keyframes blink{50%{opacity:.2}}
@keyframes shake{20%,60%{margin-left:-7px}40%,80%{margin-left:7px}}
.stamp{position:absolute;z-index:4;left:40%;top:0;pointer-events:none;font:30px/1 var(--disp);color:var(--stamp);border:4px solid var(--stamp);
  padding:4px 10px 2px;border-radius:6px;background:rgba(255,253,242,.85);transform:rotate(-9deg) scale(0);opacity:0}
.stamp.on{animation:stamp 1.6s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes stamp{0%{transform:rotate(-9deg) scale(3);opacity:0}18%{transform:rotate(-9deg) scale(1);opacity:1}80%{opacity:1}100%{transform:rotate(-9deg) scale(1);opacity:0}}

.pane-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:16px;font-size:13px}
.legend{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.legend i{display:inline-block;width:14px;height:14px;border:2px solid var(--seam)}
.lg-you{background:var(--you-2)} .lg-ai{background:#e3dcff}

.mem{direction:ltr;text-align:left;margin:0 0 12px;background:var(--ai-3);color:#cfc6ff;border:2px solid #0d0838;padding:10px 0;font:12.5px/20px var(--mono);
  overflow-x:auto;max-height:260px}
.mem div{padding:0 12px;white-space:pre;min-height:20px}
.mem .stale{background:rgba(255,59,31,.18);color:#fff}
.mem .stale::after{content:"  ← stale";color:#ff9c8a;font-size:11px}
html[lang=fa] .mem .stale::after{content:"  ← کهنه"}
.log{flex:1;min-height:150px;max-height:300px;overflow-y:auto;background:var(--ai-3);border:2px solid #0d0838;padding:10px;font-size:13px;display:flex;flex-direction:column;gap:8px}
.log:empty::before{content:attr(data-empty);opacity:.6;font-style:italic}
.msg{border-inline-start:3px solid var(--ai-hi);padding:4px 10px;background:rgba(255,255,255,.04);animation:in .25s}
.msg .k{display:block;font:700 10px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.1em;opacity:.7;margin-bottom:2px}
html[lang=fa] .msg .k{font-family:Vazirmatn;letter-spacing:0;text-transform:none;font-size:11px}
.msg pre{direction:ltr;text-align:left;margin:4px 0 0;white-space:pre-wrap;word-break:break-word;font-size:12px;line-height:1.45}
.msg.user{border-color:var(--you)} .msg.tool{border-color:#8a80c9;font-family:var(--mono);font-size:12px}
.msg.dibs{border-color:var(--stamp);background:rgba(255,59,31,.14)} .msg.ok{border-color:var(--ok)}
.msg.warn{border-color:#ffb020;background:rgba(255,176,32,.12)}
@keyframes in{from{opacity:0;transform:translateY(6px)}}

.controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:18px clamp(14px,3vw,32px) 28px;background:var(--seam)}
.tasks{display:flex;flex-wrap:wrap;gap:10px}
.task{background:var(--ai-hi);color:var(--seam);border-color:#fff;box-shadow:4px 4px 0 #fff}
.task:hover{box-shadow:5px 5px 0 #fff}
.task.done{background:#3a3546;color:#a9a3b9;box-shadow:none;border-color:#57506a}
.switches{display:flex;align-items:center;gap:14px}
.toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.toggle input{position:absolute;opacity:0;width:1px;height:1px}
.knob{width:52px;height:28px;background:#3a3546;border:2px solid #fff;position:relative;transition:background .2s}
.knob::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;transition:transform .2s}
.toggle input:checked+.knob{background:var(--stamp)}
.toggle input:checked+.knob::after{transform:translateX(24px)}
.toggle input:focus-visible+.knob{outline:3px solid var(--you);outline-offset:2px}
.tg-label b{font-family:var(--mono);color:var(--you)}
html[lang=fa] .tg-label b{font-family:Vazirmatn}
.fix{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:#2a1414;border:2px solid var(--stamp);padding:10px 12px;color:#ffd9d2}
.fix[hidden]{display:none}

/* ---------- beats ---------- */
.band-h{margin:0;background:var(--seam);color:#fff;text-align:center;padding:clamp(34px,5vw,60px) 16px 22px;font:clamp(24px,3.2vw,40px)/1.15 var(--disp);letter-spacing:-.02em}
html[lang=fa] .band-h{font-family:Vazirmatn;font-weight:900}
.beat{border-top:2px solid var(--seam)}
.beat h3{margin:0 0 8px;font:clamp(20px,2.2vw,28px)/1.15 var(--disp);letter-spacing:-.01em}
html[lang=fa] .beat h3{font-family:Vazirmatn;font-weight:800}
.beat p{margin:0;max-width:34em}
.beat .n{display:block;font:14px var(--mono);font-weight:700;margin-bottom:10px;opacity:.6}
.beat code{background:rgba(0,0,0,.08);padding:1px 4px}
.term{direction:ltr;text-align:left;margin:0;background:#0f0a33;color:#e6e0ff;border:2px solid #0d0838;padding:14px 16px;font-size:12.5px;line-height:1.55;overflow-x:auto;white-space:pre}
.term .c{color:#8f86c9}

/* ---------- verified ---------- */
.verified{background:var(--seam);color:#fff;padding-bottom:clamp(30px,5vw,60px)}
.ver-sub{text-align:center;max-width:40em;margin:0 auto 22px;padding:0 16px;color:#c9c4d6}
.tbl-wrap{overflow-x:auto;margin:0 clamp(10px,3vw,32px)}
.tbl{width:100%;min-width:620px;border-collapse:collapse;font-size:14px;max-width:1100px;margin:0 auto}
.tbl th,.tbl td{padding:12px 14px;text-align:start;border-bottom:1px solid #2c2738}
.tbl thead th{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:#a9a3b9}
html[lang=fa] .tbl thead th{font-family:Vazirmatn;letter-spacing:0;text-transform:none;font-size:13px}
.tbl tbody th{background:var(--you);color:var(--you-ink);font-weight:700;white-space:nowrap}
.tbl td:nth-child(2){font-family:var(--mono);color:var(--ai-hi)}
.tbl .y{color:#7ee2a0;font-weight:700} .tbl .n{color:#ffb020} .tbl .m{color:#b9b3c9;font-style:italic}

/* ---------- install / footer ---------- */
.inst-h{margin:0 0 12px;font:clamp(26px,3.4vw,44px)/1.05 var(--disp);letter-spacing:-.02em}
html[lang=fa] .inst-h{font-family:Vazirmatn;font-weight:900;line-height:1.4}
.install .side.you{display:flex;flex-direction:column;justify-content:center}
.install p code{background:rgba(0,0,0,.08);padding:1px 4px}
.term-big{font-size:13.5px}
.copy{margin-top:14px;background:var(--you);border-color:#fff;box-shadow:3px 3px 0 #fff}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:22px clamp(14px,3vw,32px);color:#a9a3b9;font-size:13px;background:var(--seam)}

/* ---------- mobile: the seam turns horizontal ---------- */
@media (max-width:820px){
  :root{--fs:12.5px;--lh:21px;--pad:10px}
  .split{grid-template-columns:1fr;grid-template-rows:auto 12px auto}
  .seam::before{width:auto;height:4px;background:repeating-linear-gradient(90deg,transparent 0 10px,#2b2638 10px 14px)}
  .hero{min-height:0}
  .hero .side{padding-top:34px;padding-bottom:34px}
  .seal{width:92px;height:92px}.seal span{font-size:24px}
  .top-nav a:not([href^="https"]){display:none}
  .board-seam{height:12px}
  .meter{flex-direction:row;gap:8px;width:auto;margin:-18px 0;padding:6px 12px}
  .meter b{font-size:20px}
  .pane{min-height:0}
  .log{max-height:240px;min-height:120px}
  .mem{max-height:180px}
  .controls{flex-direction:column;align-items:stretch}
  .tasks{display:grid;grid-template-columns:1fr}
  .switches{justify-content:space-between}
  .tbl{min-width:0}
  .tbl thead{display:none}
  .tbl tbody tr{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #2c2738;margin-bottom:10px}
  .tbl tbody th{grid-column:1/-1;border:0}
  .tbl td{border:0;padding:8px 6px;font-size:13px}
  .tbl td[colspan]{grid-column:2/-1}
  .tbl td::before{content:attr(data-l);display:block;font:600 9px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#8f89a0;font-style:normal;margin-bottom:3px}
  html[lang=fa] .tbl td::before{font-family:Vazirmatn;font-size:11px;letter-spacing:0}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important;scroll-behavior:auto!important}}