/* ================================================================
   ninja-crashgame.com
   Palette borrowed from sumi-e: grey washi paper, ink, indigo
   as the carrying colour, vermilion reserved for the 0x.
   Mobile-first. Signature: the slice sequence.
   ================================================================ */

:root{
  --washi:   #F0F0EC;
  --washi-2: #E2E3DD;
  --paper:   #FAFAF7;
  --sumi:    #14161A;
  --sumi-2:  #1F2329;
  --sumi-3:  #2C323A;
  --ai:      #2B4B7C;   /* indigo */
  --ai-h:    #1F3960;
  --ai-l:    #7C9CC4;
  --shu:     #D94F30;   /* vermilion — reserved for 0x and risk */
  --matcha:  #5E8A52;
  --text:    #191B1E;
  --text-2:  #5D646B;
  --rule:    #CBCCC5;
  --rule-d:  rgba(255,255,255,.13);

  --w: 1150px;
  --p: 20px;

  --disp: "Syne", "Trebuchet MS", system-ui, sans-serif;
  --body: "Manrope", -apple-system, "Segoe UI", sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.68;
  color:var(--text);
  background:var(--washi);
  padding-bottom:76px;
}

.wrap{ width:100%; max-width:var(--w); margin-inline:auto; padding-inline:var(--p); }

.jump{ position:absolute; left:-9999px; background:var(--shu); color:#fff; padding:10px 16px; z-index:99; }
.jump:focus{ left:0; top:0; }

/* ---------- type ---------- */
h1,h2{
  font-family:var(--disp); font-weight:800;
  line-height:1.1; letter-spacing:-.025em;
  margin:0 0 .48em; text-wrap:balance; color:var(--sumi);
}
h1{ font-size:clamp(1.85rem,5.6vw,3rem); }
h2{ font-size:clamp(1.42rem,4.2vw,2.15rem); }
h3{
  font-family:var(--body); font-weight:600;
  font-size:clamp(1.02rem,2.7vw,1.16rem);
  margin:2.2em 0 .45em; color:var(--sumi);
}

p{ margin:0 0 1.12em; }
a{ color:var(--ai); }
strong{ font-weight:600; }

.eye{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ai); margin-bottom:1.1em;
}
.eye--n{ color:var(--shu); }

.lede{ font-size:1.02rem; color:var(--text-2); max-width:64ch; }
.small{ font-size:.86rem; color:var(--text-2); border-top:1px solid var(--rule); padding-top:13px; }

.upd{
  font-family:var(--mono); font-size:.71rem;
  color:var(--text-2);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin:-.1em 0 1.2em;
}
.upd time{ color:var(--sumi); font-weight:600; border-bottom:2px solid var(--shu); padding-bottom:1px; }
.upd__n{ opacity:.64; }

/* ---------- ink bands ---------- */
.band--ink{ background:var(--sumi); color:#BFC3C7; }
.band--ink h2,.band--ink h3{ color:#FAFAF7; }
.band--ink .lede{ color:#939AA1; }
.band--ink .eye--n{ color:var(--ai-l); }
.band--ink a{ color:var(--ai-l); }
.band--ink .small{ border-top-color:var(--rule-d); color:#939AA1; }

/* ---------- head ---------- */
.head{ background:var(--paper); border-bottom:1px solid var(--rule); }
.head__i{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:54px; flex-wrap:wrap; }
.logo{ font-family:var(--disp); font-weight:800; font-size:.94rem; letter-spacing:-.03em; display:flex; align-items:center; gap:9px; color:var(--sumi); }
.logo__c{ width:13px; height:13px; flex:none; border-radius:50%; background:var(--shu); }
.nav{ display:none; gap:17px; font-size:.85rem; font-weight:600; }
.nav a{ color:var(--text-2); text-decoration:none; }
.nav a:hover{ color:var(--shu); }

/* ---------- dock with progress ---------- */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:var(--sumi);
  padding:11px var(--p);
  padding-bottom:calc(11px + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  transition:opacity .2s ease;
}
.dock__p{
  position:absolute; left:0; top:0; height:3px;
  background:var(--shu); width:0;
  transition:width .1s linear;
}
.dock__t{ font-size:.82rem; color:#BFC3C7; line-height:1.3; font-weight:600; }

/* ---------- buttons: offset frame ---------- */
.cta-b{
  position:relative;
  display:inline-flex; flex-direction:column; align-items:center; gap:1px;
  font-family:var(--disp); font-weight:600; font-size:.95rem; line-height:1.25;
  letter-spacing:-.02em;
  text-decoration:none; text-align:center;
  padding:13px 25px; border-radius:2px;
  transition:background .14s ease;
}
.cta-b::after{
  content:""; position:absolute; inset:-5px;
  border:1px solid currentColor; border-radius:3px; opacity:.4;
  transition:inset .14s ease, opacity .14s ease;
  pointer-events:none;
}
.cta-b:hover::after{ inset:-2px; opacity:.85; }
.cta-b--ink{ background:var(--sumi); color:#fff; }
.cta-b--ink:hover{ background:var(--ai-h); }
.cta-b--pale{ background:var(--washi); color:var(--sumi); }
.cta-b--pale:hover{ background:#fff; }
.cta-b--lg{ padding:16px 30px; font-size:1.03rem; }
.cta-b--sm{ padding:9px 18px; font-size:.86rem; }
.cta-b__s{ font-family:var(--body); font-weight:400; font-size:.7rem; letter-spacing:0; opacity:.8; }

.cta-b:focus-visible,a:focus-visible,summary:focus-visible{
  outline:3px solid var(--matcha); outline-offset:4px;
}

/* ---------- hero ---------- */
.hero{ background:var(--paper); padding:34px 0 42px; border-bottom:1px solid var(--rule); }
.hero__l{ font-size:1.03rem; color:var(--text-2); max-width:57ch; }
.hero__n{ font-size:.81rem; color:#828A8F; margin:13px 0 0; }

/* signature: slice sequence */
.seq{ margin-top:32px; background:var(--washi); border:1px solid var(--rule); border-top:4px solid var(--sumi); }
.seq__h{
  font-family:var(--mono); font-size:.65rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-2); margin:0; padding:12px 15px; border-bottom:1px solid var(--rule);
}
.seq__l{ list-style:none; margin:0; padding:0; counter-reset:sq; }
.sl{
  counter-increment:sq;
  display:flex; align-items:baseline; gap:12px;
  padding:11px 15px 11px 44px;
  border-bottom:1px solid var(--rule);
  position:relative;
}
.sl::before{
  content:counter(sq);
  position:absolute; left:15px; top:12px;
  font-family:var(--mono); font-size:.7rem; color:#9AA0A5;
}
.sl__v{
  font-family:var(--mono); font-weight:600; font-size:1.02rem;
  color:var(--ai); min-width:52px; flex:none;
}
.sl__r{ font-size:.84rem; color:var(--text-2); }
.sl--low .sl__v{ color:#8A7F6E; }
.sl--good{ background:rgba(94,138,82,.09); }
.sl--good .sl__v{ color:var(--matcha); }
.sl--zero{ background:rgba(217,79,48,.1); border-bottom:0; }
.sl--zero .sl__v{ color:var(--shu); }
.seq__f{ margin:0; padding:12px 15px; font-size:.79rem; color:var(--text-2); font-style:italic; }

/* ---------- bands ---------- */
.band{ padding:44px 0; }
.band--pale{ background:var(--washi-2); }
.band--close{ text-align:center; }
.close{ max-width:660px; }

.ans{ background:var(--paper); border-left:5px solid var(--ai); padding:19px 20px 5px; }
.ans__m{ font-family:var(--mono); font-size:.64rem; letter-spacing:.17em; text-transform:uppercase; color:var(--ai); margin-bottom:.6em; }
.ans__t{ font-size:1.03rem; }

/* ---------- operator list ---------- */
.list{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px; }
.list__e{ color:var(--text-2); font-size:.9rem; }

.op{ background:var(--paper); border:1px solid var(--rule); padding:18px 17px; display:grid; gap:12px; }
.op--1{ border-color:var(--sumi); border-left:5px solid var(--shu); }
.op__h{ display:flex; align-items:flex-start; gap:11px; }
.op__n{
  font-family:var(--mono); font-weight:600; font-size:.79rem;
  background:var(--sumi); color:#fff;
  width:27px; height:27px; flex:none; display:grid; place-items:center; border-radius:2px;
}
.op--1 .op__n{ background:var(--shu); }
.op__t{ font-family:var(--disp); font-weight:800; font-size:1.16rem; letter-spacing:-.03em; margin:0 0 1px; }
.op__a{ font-size:.86rem; color:var(--text-2); margin:0; }

.op__d{ margin:0; display:grid; gap:1px; background:var(--rule); }
.op__d > div{ background:var(--washi); padding:8px 12px; display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.op__d dt{ font-size:.77rem; color:var(--text-2); }
.op__d dd{ margin:0; font-family:var(--mono); font-size:.74rem; font-weight:600; text-align:right; }

.op__p{ margin:0; padding-left:17px; font-size:.87rem; color:var(--text-2); }
.op__p li{ margin-bottom:4px; }
.op .cta-b{ width:100%; }

/* ---------- tables ---------- */
.tw{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:18px 0 22px; border:1px solid var(--rule); background:var(--paper); }
.band--ink .tw{ border-color:var(--rule-d); background:var(--sumi-2); }

table{ width:100%; border-collapse:collapse; font-size:.88rem; min-width:400px; }
.tw--wide{ min-width:600px; }

caption{
  text-align:left; font-family:var(--mono);
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-2); padding:12px 14px 6px;
}
.band--ink caption{ color:var(--ai-l); }

th,td{ text-align:left; padding:10px 14px; border-top:1px solid var(--rule); vertical-align:top; }
.band--ink th,.band--ink td{ border-top-color:var(--rule-d); }

thead th{ font-family:var(--disp); font-weight:600; font-size:.82rem; letter-spacing:-.02em; background:var(--washi-2); color:var(--sumi); }
.band--ink thead th{ background:var(--sumi-3); color:#FAFAF7; }

tbody tr:nth-child(even) td{ background:rgba(43,75,124,.04); }
.band--ink tbody tr:nth-child(even) td{ background:rgba(255,255,255,.028); }

/* ---------- lists ---------- */
.ticks{ list-style:none; margin:15px 0 0; padding:0; display:grid; gap:9px; }
.ticks li{ position:relative; padding-left:24px; font-size:.94rem; }
.ticks li::before{
  content:""; position:absolute; left:1px; top:.66em;
  width:13px; height:2px; background:var(--ai); transform:rotate(-32deg);
}
.band--ink .ticks li::before{ background:var(--ai-l); }

.steps{ counter-reset:s; list-style:none; margin:17px 0 0; padding:0; display:grid; gap:14px; }
.steps--tight{ gap:11px; }
.steps li{ counter-increment:s; position:relative; padding-left:38px; font-size:.94rem; }
.steps li::before{
  content:counter(s);
  position:absolute; left:0; top:.05em; width:26px; height:26px;
  border:2px solid var(--shu); color:var(--shu); border-radius:50%;
  font-family:var(--mono); font-size:.75rem; font-weight:600;
  display:grid; place-items:center;
}
.band--ink .steps li::before{ border-color:var(--ai-l); color:var(--ai-l); }

/* ---------- note ---------- */
.note{
  background:var(--paper); border:1px solid var(--rule);
  border-left:5px solid var(--ai);
  padding:14px 17px; font-size:.92rem; margin-top:19px;
}
.note--red{ border-left-color:var(--shu); }
.band--ink .note{ background:var(--sumi-2); border-color:var(--rule-d); border-left-color:var(--ai-l); }
.band--ink .note--red{ border-left-color:var(--shu); }

/* ---------- cta box ---------- */
.cta{ margin-top:28px; border-top:2px solid var(--sumi); padding-top:19px; display:grid; gap:14px; justify-items:start; }
.band--ink .cta{ border-top-color:var(--ai-l); }
.cta__t{ margin:0; font-size:.96rem; }
.cta .cta-b{ width:100%; }

/* ---------- cards ---------- */
.cards{ display:grid; gap:12px; margin-top:24px; }
.card{ background:var(--paper); border:1px solid var(--rule); padding:18px 17px; }
.band--ink .card{ background:var(--sumi-2); border-color:var(--rule-d); }
.card h3{ margin:0 0 4px; font-size:1rem; }
.band--ink .card h3{ color:#FAFAF7; }
.card__n{ font-family:var(--mono); font-weight:600; font-size:.98rem; color:var(--ai); margin:0 0 .55em; }
.band--ink .card__n{ color:var(--ai-l); }
.card p:last-child{ margin-bottom:0; font-size:.89rem; color:var(--text-2); }
.band--ink .card p:last-child{ color:#939AA1; }

/* ---------- faq ---------- */
.faq{ margin-top:22px; border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{ cursor:pointer; list-style:none; padding:15px 36px 15px 0; font-family:var(--disp); font-weight:600; font-size:1rem; letter-spacing:-.02em; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:10px; top:50%; margin-top:-1px;
  width:14px; height:2px; background:var(--shu);
}
.faq summary::before{
  content:""; position:absolute; right:16px; top:50%; margin-top:-7px;
  width:2px; height:14px; background:var(--shu); transition:opacity .15s;
}
.faq details[open] summary::before{ opacity:0; }
.faq details p{ margin:0 0 16px; font-size:.92rem; color:var(--text-2); max-width:72ch; }

/* ---------- footer ---------- */
.foot{ background:var(--sumi); color:#8B9298; padding:32px 0 28px; font-size:.85rem; }
.foot__a{ display:flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:600; color:#fff; }
.foot__a span{ background:var(--shu); color:#fff; padding:2px 9px; font-family:var(--mono); font-size:.77rem; border-radius:2px; }
.foot strong{ color:#fff; }
.foot a{ color:var(--ai-l); }
.foot__u{ font-size:.81rem; border-top:1px solid var(--rule-d); padding-top:13px; margin-top:16px; }
.foot__u time{ color:#fff; font-family:var(--mono); font-size:.78rem; }
.foot__m{ font-size:.77rem; color:#666D72; margin-bottom:0; }

/* ================================================================
   TABLET
   ================================================================ */
@media (min-width:720px){
  .band{ padding:60px 0; }
  .hero{ padding:50px 0 58px; }
  .cta-b{ flex-direction:row; align-items:baseline; gap:9px; }
  .op .cta-b,.cta .cta-b{ width:auto; }
  .cta{ grid-template-columns:1fr auto; align-items:center; gap:20px; }
  .cards{ grid-template-columns:repeat(3,1fr); }
  .ans{ padding:23px 26px 7px; }
  .sl{ padding:13px 18px 13px 48px; }
  .op{
    padding:22px 21px;
    grid-template-columns:1fr 244px;
    grid-template-areas:"h d" "p c";
    column-gap:24px; align-items:start;
  }
  .op__h{ grid-area:h; } .op__d{ grid-area:d; }
  .op__p{ grid-area:p; } .op__c{ grid-area:c; align-self:end; }
}

/* ================================================================
   DESKTOP — CTA stays in the first screen
   ================================================================ */
@media (min-width:980px){
  .nav{ display:flex; }
  body{ padding-bottom:56px; }
  .hero{ padding:56px 0 64px; }
  .hero__i{ display:grid; grid-template-columns:1.14fr .86fr; gap:50px; align-items:start; }
  .seq{ margin-top:0; }
  .dock{ padding:13px 32px; }
  .dock__t{ font-size:.88rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}
@media print{ .dock,.head,.cta-b{ display:none; } body{ padding:0; } }