/* Maker's archive — tear-tab theme: paper, ink, red stamps. */

@font-face{
  font-family:'Space Grotesk';
  src:url('../assets/fonts/space-grotesk-var.woff2') format('woff2-variations');
  font-weight:300 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Space Mono';
  src:url('../assets/fonts/space-mono-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Space Mono';
  src:url('../assets/fonts/space-mono-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}

:root{
  --paper:#ece1cc; --card-a:#f8f1e2; --card-b:#f2e9d6;
  --ink:#241c12; --ink2:#4a3a26; --ink3:#544128;
  --line:rgba(80,50,20,.4); --ring:rgba(80,50,20,.14);
  --red:#c2452d; --blue:#2b4d9c;
  --disp:'Space Grotesk',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  interpolate-size:allow-keywords;
}

*{margin:0;padding:0;box-sizing:border-box}
button{-webkit-appearance:none;appearance:none}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  background:var(--paper);
  background-image:repeating-linear-gradient(0deg,rgba(120,90,50,.035) 0 1px,transparent 1px 3px);
  color:var(--ink);font:400 15.5px/1.6 var(--disp);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
::selection{background:var(--red);color:var(--card-a)}

h1{font:700 clamp(30px,4.6vw,44px)/1.14 var(--disp);letter-spacing:-.03em}
h2{font:700 clamp(17px,2vw,20px)/1.2 var(--disp);letter-spacing:-.005em;text-transform:none}
h3{font:500 18.5px/1.35 var(--disp)}
p{color:var(--ink2)}
main section{max-width:64rem;margin:0 auto;padding:40px 24px 8px}
[id]{scroll-margin-top:72px}
.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:var(--card-a);padding:10px 16px;border-radius:8px;z-index:99}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2.5px solid var(--red);outline-offset:2px;border-radius:6px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  background:rgba(236,225,204,.88);border-bottom:1px dashed var(--line);width:100%;
  padding-top:env(safe-area-inset-top, 0px)}
.nav-inner{max-width:64rem;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:16px;min-width:0;width:100%;overflow:hidden}
.brand{font:700 17px var(--mono);letter-spacing:.18em;color:var(--ink);text-decoration:none;flex-shrink:0;position:relative}
.brand::before,.brand::after{content:attr(data-text);position:absolute;inset:0;opacity:0;pointer-events:none}
.brand::before{color:var(--red);clip-path:inset(0 0 55% 0)}
.brand::after{color:var(--ink3);clip-path:inset(45% 0 0 0)}
.brand:hover::before,.brand:focus-visible::before{animation:brand-glitch-a 3.2s steps(1) infinite}
.brand:hover::after,.brand:focus-visible::after{animation:brand-glitch-b 3.2s steps(1) infinite}
@keyframes brand-glitch-a{
  0%,12%,20%,55%,100%{transform:translate(0);opacity:0}
  13%{transform:translate(-3px,-1.5px);opacity:.9}
  16%{transform:translate(2.5px,1px);opacity:.9}
  48%{transform:translate(-2px,1.5px);opacity:.9}
  51%{transform:translate(1.5px,-1px);opacity:.9}
}
@keyframes brand-glitch-b{
  0%,14%,22%,60%,100%{transform:translate(0);opacity:0}
  15%{transform:translate(3px,1.5px);opacity:.9}
  18%{transform:translate(-2.5px,-1px);opacity:.9}
  52%{transform:translate(2px,-1.5px);opacity:.9}
  56%{transform:translate(-1.5px,1px);opacity:.9}
}
@media (prefers-reduced-motion:reduce){
  .brand::before,.brand::after{display:none}
  .brand:hover::before,.brand:focus-visible::before,.brand:hover::after,.brand:focus-visible::after{animation:none!important}
}
.links{margin-left:auto;display:flex;align-items:center;gap:18px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-width:0;flex:1 1 auto}
.links::-webkit-scrollbar{display:none}
.links a{font:700 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink2);text-decoration:none;border-bottom:1px dashed transparent;
  padding-bottom:3px;min-height:38px;display:inline-flex;align-items:center;white-space:nowrap;flex-shrink:0}
.links a:hover{color:var(--ink);border-bottom-color:rgba(80,50,20,.5)}
@media (max-width:640px){
  .nav-inner{padding:8px 16px;gap:12px}
  .links{gap:14px}
  .links a{font-size:10px;letter-spacing:.1em;min-height:36px}
}

/* ---------- hero ---------- */
.hero{padding-top:64px}
.hero .eyebrow{font:700 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.hero .sub{margin-top:18px;font-size:16.5px;max-width:44rem;color:var(--ink2);line-height:1.65}
.hero-manifesto{margin-top:14px;font-size:18px;line-height:1.55;color:var(--ink);max-width:44rem;font-weight:450}
.hero-ledger{margin-top:22px;display:grid;gap:10px;max-width:44rem;background:rgba(255,250,238,.55);border:1px dashed var(--line);border-radius:4px;padding:14px 18px}
.hero-ledger p{margin:0;font-size:13.5px;line-height:1.65;color:var(--ink2)}
.ledger-row{display:grid;grid-template-columns:72px 1fr;gap:12px;font-size:13.5px;line-height:1.55;color:var(--ink2)}
.ledger-tag{font:700 10.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.ledger-desc{color:var(--ink2)}
@media (max-width:560px){
  .hero-manifesto{font-size:16px}
  .hero-ledger{padding:12px 14px;gap:10px}
  .ledger-row{grid-template-columns:1fr;gap:2px}
}
.hero-links{margin-top:24px;display:flex;flex-wrap:wrap;gap:9px 14px;align-items:center;
  font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.hero-links a,.linkbtn{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--red);
  background:none;border:none;cursor:pointer;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.hero-links a span,.linkbtn span,.foot-links a span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--red)}
.hero-links a:hover span,.linkbtn:hover span,.foot-links a:hover span{text-decoration-color:transparent}

/* ---------- hero CTA row ---------- */
.cta-row{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta-primary{font:700 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--card-a);
  background:var(--red);border:1px solid var(--red);border-radius:4px;padding:14px 22px;min-height:44px;
  display:inline-flex;align-items:center;text-decoration:none;cursor:pointer;
  box-shadow:0 2px 0 rgba(40,26,10,.25);transition:transform .15s ease}
.cta-primary:hover{transform:translateY(-1px);color:var(--card-a)}
.cta-ghost{font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  background:rgba(255,250,238,.55);border:1px dashed var(--line);border-radius:4px;padding:13px 18px;min-height:44px;
  display:inline-flex;align-items:center;text-decoration:none;cursor:pointer;transition:all .15s ease}
.cta-ghost:hover{color:var(--red);border-color:var(--red);transform:translateY(-1px)}
.cta-note{margin-top:10px;font:400 11px/1.6 var(--mono);letter-spacing:.04em;color:var(--ink3)}

/* ---------- archive utility bar ---------- */
.utilbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px dashed var(--line);padding-top:18px;margin-bottom:32px}
.util-title{display:flex;align-items:center}
.util-actions{display:flex;gap:10px;align-items:center}
.utilbtn{font:700 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);
  background:rgba(255,250,238,.55);border:1px dashed var(--line);border-radius:3px;
  padding:9px 13px;min-height:36px;cursor:pointer;transition:all .15s ease}
.utilbtn:hover{color:var(--red);border-color:var(--red);transform:translateY(-1px)}
.utilbtn[aria-pressed="false"]{text-decoration:line-through;color:var(--ink3)}
.help-dot{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:10px;border:1.5px solid var(--ink3);border-radius:50%;font:700 11px/1 var(--mono);color:var(--ink2);cursor:help;vertical-align:middle;background:transparent;padding:0;line-height:1}
.help-dot:hover{border-color:var(--red);color:var(--red)}
.help-dot:focus-visible{outline:2.5px solid var(--red);outline-offset:2px;border-color:var(--red);color:var(--red)}
.help-dot .help-tip{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%) translateY(-4px);width:max-content;max-width:250px;padding:8px 12px;background:var(--ink);color:#f5eee0;font:400 11.5px/1.55 var(--mono);letter-spacing:.02em;border-radius:4px;text-align:left;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60;box-shadow:0 6px 18px rgba(40,25,10,.18)}
.help-dot .help-tip::before{content:'';position:absolute;left:50%;top:-4px;width:8px;height:8px;background:var(--ink);transform:translateX(-50%) rotate(45deg)}
.help-dot:hover .help-tip,.help-dot:focus .help-tip,.help-dot:focus-visible .help-tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
@media (max-width:640px){
  .help-dot .help-tip{left:auto;right:-8px;transform:translateY(-4px)}
  .help-dot:hover .help-tip,.help-dot:focus .help-tip,.help-dot:focus-visible .help-tip{transform:translateY(0)}
}
.archnote{font:400 10.5px var(--mono);letter-spacing:.1em;color:var(--ink3);margin:10px 0 26px}
.archdesc{margin:10px 0 4px;font-size:14px;line-height:1.6;color:var(--ink2);max-width:44rem}

/* ---------- shelf: 2-up grid ---------- */
.shelf{display:grid;grid-template-columns:repeat(2,1fr);gap:48px 30px;
  padding-bottom:48px;align-items:start}
.shelf > *{min-width:0;max-width:100%}
@media (max-width:720px){.shelf{grid-template-columns:1fr;gap:40px}}

/* slotted content inside opened boxes */
.milestones ul{display:grid;gap:10px;font-size:15px;line-height:1.55;color:var(--ink2);
  list-style:none;margin-top:2px}
.milestones li{padding-left:14px;position:relative}
.milestones li::before{content:'▸';position:absolute;left:0;top:4px;color:var(--red);font-size:10px}
.milestones strong{color:var(--ink);font-weight:600;display:block}
.actions-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tag-link{font:700 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);border:1px solid rgba(43,77,156,.45);border-radius:2px;padding:3.5px 8px;
  text-decoration:none;background:rgba(255,250,238,.6);display:inline-flex;align-items:center;min-height:24px;
  transition:all .15s ease}
.tag-link:hover{background:rgba(43,77,156,.1);transform:translateY(-1px)}
.pipe{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px;
  font:700 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.pipe span{border:1px solid var(--line);padding:3px 6px;background:rgba(255,250,238,.5);border-radius:2px}
.pipe em{color:var(--red);font-style:normal}

/* screenshots inside boxes — polaroid prints */
.shots{display:flex;justify-content:center;gap:12px;margin-top:12px;padding:0}
.shots figure{background:#fbf8f0;padding:4px 4px 12px;box-shadow:0 1px 2px rgba(40,26,10,.2),0 4px 10px -4px rgba(40,26,10,.35);width:45%;max-width:145px}
.shots figure:nth-child(1){transform:rotate(-2deg)}
.shots figure:nth-child(2){transform:rotate(1.5deg)}
.shots img{width:100%;height:80px;object-fit:cover;object-position:top;display:block;
  filter:saturate(.95) contrast(1.02)}
.shots figcaption{font:400 9.5px var(--mono);letter-spacing:.08em;color:#555;
  padding-top:4px;text-align:center;text-transform:lowercase}

/* quotes inside cards */
.quote-pull{margin-top:10px;padding:7px 11px;background:rgba(255,250,238,.65);border-left:2px solid var(--red);
  font:400 13px/1.45 var(--disp);color:var(--ink);border-radius:0 2px 2px 0}
.quote-pull cite{display:block;margin-top:2px;font:700 9px var(--mono);color:var(--ink3);letter-spacing:.08em;font-style:normal;text-transform:uppercase}

/* mini terminal code preview */
.term-box{margin-top:12px;background:#1e1812;border-radius:3px;padding:7px 9px;border:1px solid rgba(80,50,20,.3);box-shadow:0 1px 3px rgba(0,0,0,.2);min-width:0;max-width:100%;overflow:hidden}
.term-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.08);min-width:0}
.term-bar-left{display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden}
.t-dot{width:5px;height:5px;border-radius:50%;background:#c2452d;display:inline-block;opacity:.8;flex-shrink:0}
.t-dot:nth-child(2){background:#d3ac74}
.t-dot:nth-child(3){background:#4a8258}
.t-title{font:400 8.5px var(--mono);color:#9e8a70;letter-spacing:.12em;text-transform:uppercase;margin-left:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.term-box pre{margin:0;font:400 11px/1.45 var(--mono);color:#e2d6c1;max-width:100%;white-space:pre-wrap;word-break:break-word}
.term-box .k{color:#d3ac74;font-weight:700}
.term-box .o{color:#5cb87a;font-weight:700}
.term-box .dim{color:#8a7c66}

/* ---------- Box 01: Enterprise AI Trace Hero Visual ---------- */
.trace-hero{position:relative;margin-top:12px;background:rgba(255,250,238,.6);border:1px dashed var(--line);border-radius:4px;padding:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);min-width:0;max-width:100%}
.trace-channels{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;padding-bottom:10px;padding-right:36px;border-bottom:1px dashed rgba(80,50,20,.2)}
.trace-channels-label{font:700 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.channel-chips{display:inline-flex;gap:5px;flex-wrap:wrap}
.channel-chip{font:700 10px/1.2 var(--mono);letter-spacing:.04em;color:var(--ink);background:rgba(255,255,255,.8);border:1px solid rgba(80,50,20,.22);border-radius:2px;padding:2px 6px;white-space:nowrap}
.trace-channels-note{font:400 10px/1.3 var(--mono);color:var(--ink3);letter-spacing:.02em}

.trace-replay-btn{position:absolute;top:8px;right:8px;width:30px;height:30px;padding:0;background:rgba(255,250,238,.9);border:1px dashed var(--line);border-radius:3px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink2);cursor:pointer;transition:all .15s ease;z-index:2}
.trace-replay-btn::before{content:"";position:absolute;inset:-7px}
.trace-replay-btn:hover{color:var(--red);border-color:var(--red);background:#fff;transform:scale(1.05)}
.trace-replay-btn:active{transform:scale(.95)}
.trace-replay-btn:focus-visible{outline:2.5px solid var(--red);outline-offset:2px}
.replay-icon{font-size:15px;line-height:1;display:inline-block}

.trace-visual-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:10px;margin-top:10px;min-width:0}

/* Phone chat panel */
.phone-panel{background:#fdfbf7;border:1px solid rgba(80,50,20,.22);border-radius:5px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(40,26,10,.06);min-width:0;height:162px;box-sizing:border-box}
.phone-bar{display:flex;align-items:center;justify-content:space-between;padding:5px 8px;background:rgba(80,50,20,.06);border-bottom:1px solid rgba(80,50,20,.12);font:700 9px var(--mono);letter-spacing:.1em;color:var(--ink2);height:24px;box-sizing:border-box}
.phone-bar-brand{display:flex;align-items:center;gap:5px}
.phone-dot{width:6px;height:6px;border-radius:50%;background:#4a8258}
.phone-status{font:400 8.5px var(--mono);color:var(--ink3)}
.phone-screen{padding:8px 8px;display:flex;flex-direction:column;justify-content:space-between;height:138px;box-sizing:border-box}
.chat-bubble{border-radius:4px;padding:5px 7px;max-width:94%}
.chat-bubble-sender{display:block;font:700 8px var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.chat-bubble-text{font:500 11.5px/1.35 var(--disp);margin:0}
.chat-user{align-self:flex-end;background:#eedec4;border:1px solid rgba(80,50,20,.25);color:var(--ink)}
.chat-user .chat-bubble-sender{color:var(--ink3)}
.chat-reply-slot{position:relative;min-height:46px}
.chat-bot{align-self:flex-start;background:#fff;border:1px solid rgba(80,50,20,.2);border-left:2.5px solid var(--red);color:var(--ink);opacity:0;transform:translateY(4px);transition:opacity .28s ease,transform .28s cubic-bezier(.16,1,.3,1)}
.chat-bot.is-visible{opacity:1;transform:translateY(0)}
.chat-bot .chat-bubble-sender{color:var(--red)}
.chat-typing{position:absolute;left:0;top:3px;display:none;padding:5px 8px;background:rgba(80,50,20,.07);border-radius:8px;gap:3px;align-items:center}
.chat-typing.is-active{display:inline-flex}
.chat-typing span{width:4px;height:4px;border-radius:50%;background:var(--ink3);animation:typing-bounce 1s infinite alternate}
.chat-typing span:nth-child(2){animation-delay:.2s}
.chat-typing span:nth-child(3){animation-delay:.4s}
@keyframes typing-bounce{0%{transform:translateY(0);opacity:.35}100%{transform:translateY(-3px);opacity:1}}

/* 4-step Pipeline panel */
.pipeline-panel{background:#fdfbf7;border:1px solid rgba(80,50,20,.22);border-radius:5px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(40,26,10,.06);min-width:0;height:162px;box-sizing:border-box}
.pipeline-bar{display:flex;align-items:center;justify-content:space-between;padding:5px 8px;background:rgba(80,50,20,.06);border-bottom:1px solid rgba(80,50,20,.12);font:700 9px var(--mono);letter-spacing:.1em;color:var(--ink2);height:24px;box-sizing:border-box}
.pipeline-status{font:700 8.5px var(--mono);color:var(--red);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.pipeline-steps{list-style:none;padding:6px 6px;margin:0;display:flex;flex-direction:column;gap:1px}
.pipeline-step{display:flex;align-items:center;gap:6px;padding:2.5px 5px;border-radius:3px;transition:background .2s ease;min-width:0}
.pipeline-step.is-active{background:rgba(194,69,45,.14)}
.pipeline-step.is-done{background:rgba(80,50,20,.05)}
.step-badge{width:15px;height:15px;border-radius:50%;font:700 8.5px/15px var(--mono);text-align:center;background:rgba(80,50,20,.14);color:var(--ink2);flex-shrink:0;transition:all .2s ease}
.pipeline-step.is-active .step-badge{background:var(--red);color:#fff;transform:scale(1.08);box-shadow:0 0 5px rgba(194,69,45,.4)}
.pipeline-step.is-done .step-badge{background:#2e2216;color:#f2e9d6}
.step-text{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.step-name{font:700 9.5px/1.2 var(--mono);color:var(--ink);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pipeline-step.is-active .step-name{color:var(--red)}
.step-sub{font:400 8px/1.2 var(--mono);color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pipeline-connector{width:1.5px;height:3px;background:rgba(80,50,20,.2);margin-left:12px}
.pipeline-step.is-done + .pipeline-connector{background:var(--ink)}

/* ---------- Box 02: Global Platforms & Data Sovereignty Hero Visual ---------- */
.sovereignty-hero{position:relative;margin-top:12px;background:rgba(255,250,238,.6);border:1px dashed var(--line);border-radius:4px;padding:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);min-width:0;max-width:100%}
.sovereignty-stage{position:relative;background:#fdfbf7;border:1px solid rgba(80,50,20,.22);border-radius:5px;padding:6px 4px;box-shadow:0 1px 3px rgba(40,26,10,.06);cursor:pointer;overflow:hidden}
.sovereignty-svg{display:block;width:100%;height:auto;user-select:none}

.region-node{cursor:pointer;outline:none}
.region-node:focus-visible .region-boundary{outline:2.5px solid var(--red);outline-offset:2px}
.region-boundary{transition:stroke .2s ease,stroke-width .2s ease,fill .2s ease}
.region-node:hover .region-boundary{stroke:var(--ink);stroke-width:2px;fill:#fff8ed}
.region-boundary.is-active{stroke:var(--blue)!important;stroke-width:2px!important;fill:#f5f8ff!important}
.region-boundary.is-blocked{stroke:var(--red)!important;stroke-width:2.5px!important;animation:boundary-flash .35s ease 2}

@keyframes boundary-flash{
  0%,100%{stroke:var(--red)}
  50%{stroke:#d3ac74}
}

.sovereignty-footer{display:flex;align-items:center;gap:8px;margin-top:8px}
.sovereignty-caption{flex:1;padding:6px 10px;background:rgba(80,50,20,.05);border-radius:3px;font:700 10.5px/1.35 var(--mono);color:var(--ink2);letter-spacing:.02em;text-align:center;min-height:30px;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease}
.sovereignty-play-btn{position:relative;width:30px;height:30px;min-width:30px;min-height:30px;padding:0;background:rgba(255,250,238,.9);border:1px dashed var(--line);border-radius:3px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink2);cursor:pointer;transition:all .15s ease;flex-shrink:0}
.sovereignty-play-btn::before{content:"";position:absolute;inset:-7px}
.sovereignty-play-btn:hover{color:var(--red);border-color:var(--red);background:#fff;transform:scale(1.05)}
.sovereignty-play-btn:active{transform:scale(.95)}
.sovereignty-play-btn:focus-visible{outline:2.5px solid var(--red);outline-offset:2px}
.play-icon{font-size:13px;line-height:1;display:inline-block}

@media (max-width:560px){
  .trace-visual-grid{grid-template-columns:1fr;gap:8px}
  .phone-panel{height:140px}
  .phone-screen{height:116px}
  .pipeline-panel{height:162px}
  .sovereignty-caption{font-size:9.5px;padding:5px 6px}
  .shots figure{width:47%;padding:3px 3px 10px;max-width:130px}
  .shots img{height:68px}
  .pipe{font-size:9px;gap:4px}
  .pipe span{padding:2px 4px}
  .milestones ul{gap:8px;font-size:13.5px}
}

@media (prefers-reduced-motion:reduce){
  .chat-bot{opacity:1!important;transform:none!important;transition:none!important}
  .chat-typing{display:none!important}
  .pipeline-step{transition:none!important}
  .anim-packet{display:none!important}
  .boundary-event{opacity:1!important}
  #event-tick{display:block!important}
  #event-stop{display:none!important}
  .region-boundary.is-blocked{animation:none!important}
}

/* ---------- footer ---------- */
.foot{border-top:1px dashed var(--line);margin-top:28px}
.foot-grid{max-width:64rem;margin:0 auto;padding:26px 24px 8px;display:flex;flex-wrap:wrap;
  gap:12px 26px;align-items:center;justify-content:space-between}
.foot-id{font:700 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.foot-avail{margin-bottom:6px;font-size:13.5px;line-height:1.55;color:var(--ink2);max-width:38rem}
.foot-links{display:flex;gap:20px;align-items:center}
.foot-links a,.foot-links .linkbtn{font:700 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);background:none;border:none;cursor:pointer;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.foot-fine{max-width:64rem;margin:0 auto;padding:6px 24px calc(24px + env(safe-area-inset-bottom, 10px));
  font:400 10px var(--mono);letter-spacing:.08em;color:var(--ink3)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);opacity:0;pointer-events:none;
  background:var(--ink);color:#f2e9d6;font:700 10.5px var(--mono);letter-spacing:.12em;
  text-transform:uppercase;padding:13px 19px;border-radius:4px;
  box-shadow:0 2px 0 rgba(40,26,10,.35);
  transition:opacity .25s ease,transform .25s ease;z-index:90;max-width:88vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media print{
  .nav,.toast,.skip,.grain,.util-actions{display:none}
  body{background:#fff}
}