/* OJ skin. Loaded after app.css and overrides it: paper, ink and one pink.
   Windows with title tabs, halftone dots, a sky of clouds over the hero.
   The engine's ids are never restyled by id, only by the classes around them. */

:root{
  --oj-bg:#fefefe;--oj-ink:#1e1e1e;--oj-ink-muted:#1e1e1edb;--oj-accent:#f386a1;--oj-magenta:#e85aa8;--oj-sky:#f4c2e0;
  --oj-line:#dedede;--oj-chrome:#c4c4c4;--oj-win-body:#dedede;--oj-hairline:1.2px;--oj-cta:#000;--oj-cta-fg:#fff;
  --oj-tint:#fde4ec;
  --oj-vt:"VT323",ui-monospace,monospace;

  /* ROUTA's own tokens, remapped */
  --paper:#fefefe;--paper-2:#f1f1f1;--card:#fefefe;--white:#fff;
  --ink:#1e1e1e;--ink-2:#333;--muted:#5c5c5c;--faint:#6e6e6e;
  --line:#dedede;--line-2:#c4c4c4;--dark:#161616;
  --sans:"Host Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

html{scrollbar-color:var(--oj-chrome) transparent}
body{font-family:var(--sans)}
::selection{background:var(--oj-accent);color:var(--oj-ink)}
::-webkit-scrollbar-thumb{background:var(--oj-chrome);border-radius:0;border:2px solid var(--oj-bg)}
:focus-visible{outline:2px solid var(--oj-ink);outline-offset:2px;border-radius:0}
code{border-radius:0;background:var(--oj-win-body);border:0;color:var(--oj-ink)}

/* ============================================================ primitives */
.oj-halftone{background-image:radial-gradient(#1e1e1e38 .7px,#0000 .72px);background-size:4px 4px}
.oj-stipple{background-image:radial-gradient(#1e1e1e52 .45px,#0000 .45px);background-size:2.75px 2.75px}
.oj-abs{position:absolute;inset:0;pointer-events:none}
.oj-noise{width:100%;height:100%;mix-blend-mode:multiply;opacity:.35}
.oj-halftone-blob{fill:var(--oj-ink)}
.oj-blob{display:block}
.oj-blob-slot{position:absolute;pointer-events:none;line-height:0;z-index:0}
.oj-blob-bl{bottom:-6rem;left:-4rem;opacity:.55}
.oj-blob-tr{top:6rem;right:-5rem;opacity:.5}
@media (min-width:1024px){.oj-blob-bl{left:8%;bottom:-6rem}.oj-blob-tr{right:-2rem;top:18%}}
.oj-wallpaper-drift-left{animation:22s ease-in-out infinite oj-wallpaper-drift-left}
.oj-wallpaper-drift-right{animation:28s ease-in-out -9s infinite oj-wallpaper-drift-right}
@keyframes oj-wallpaper-drift-left{0%,to{transform:translate(0) scale(1)}33%{transform:translate(48px,-40px) scale(1.08)}66%{transform:translate(-20px,-64px) scale(.96)}}
@keyframes oj-wallpaper-drift-right{0%,to{transform:translate(0) scale(1)}33%{transform:translate(-56px,32px) scale(.95)}66%{transform:translate(-20px,-36px) scale(1.1)}}

.oj-lab-chip{background:var(--oj-ink);color:var(--oj-accent);font-family:var(--oj-vt);letter-spacing:.01em;padding:3px 6px 5px 4px;font-size:18px;line-height:1;display:inline-block;text-transform:none}
.oj-bar-chip{background:var(--oj-ink);color:var(--oj-win-body);padding:2px 4px 3px;display:inline-block}
.oj-frame-corners{pointer-events:none;position:absolute;inset:1.25rem}
.oj-frame-corners span{border:0 solid #fefefe8c;width:18px;height:18px;position:absolute}
.oj-frame-corners span:first-child{border-top-width:1px;border-left-width:1px;top:0;left:0}
.oj-frame-corners span:nth-child(2){border-top-width:1px;border-right-width:1px;top:0;right:0}
.oj-frame-corners span:nth-child(3){border-bottom-width:1px;border-left-width:1px;bottom:0;left:0}
.oj-frame-corners span:nth-child(4){border-bottom-width:1px;border-right-width:1px;bottom:0;right:0}

/* ------------------------------------------------------------ OS window */
.oj-os-window{font-family:var(--oj-vt);letter-spacing:.01em;font-size:18px;font-weight:400;line-height:1;min-width:0}
.oj-os-tab{background:var(--oj-ink);border:var(--oj-hairline) solid var(--oj-ink);color:var(--oj-win-body);padding:2px 0 5px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oj-os-rim{background:var(--oj-chrome);border:var(--oj-hairline) solid var(--oj-ink);border-top:0;padding:0 3px 3px}
.oj-os-body{background:var(--oj-win-body);border:var(--oj-hairline) solid var(--oj-ink)}
.oj-os-body-paper{background:var(--oj-bg)}
.oj-os-heading{background:var(--oj-ink);border-bottom:var(--oj-hairline) solid var(--oj-ink);color:var(--oj-win-body);letter-spacing:.01em;padding:2px 4px 4px;font-size:36px;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oj-os-content{color:var(--oj-ink);padding:4px}
.oj-os-content-flush{padding:0}
.oj-os-content p{margin:0}
.oj-os-content p+p{margin-top:8px}
.oj-os-badge{pointer-events:none;z-index:31;background:var(--oj-ink);color:var(--oj-accent);font-family:var(--oj-vt);letter-spacing:.01em;padding:3px 6px 5px 4px;font-size:18px;line-height:1;position:absolute;top:0;left:0;margin:0}
.oj-os-kicker{background:var(--oj-win-body);margin:-4px -4px 8px;padding:6px 4px 8px}
.oj-os-time{margin-top:6px;font-size:18px;line-height:1}
.oj-os-chips{flex-wrap:wrap;gap:4px;margin-top:8px;display:flex}
.oj-os-content .oj-os-chip{color:var(--oj-ink);letter-spacing:0;text-transform:none;background:#0000001a;padding:3px 5px 4px;font-family:var(--sans);font-size:14px;font-weight:500;line-height:1;display:inline-block;position:relative}
.oj-os-ledger{border-collapse:collapse;width:100%;margin-top:4px;font-size:18px}
.oj-os-ledger td{border-bottom:var(--oj-hairline) solid var(--oj-ink);vertical-align:middle;padding:8px 4px;white-space:nowrap}
.oj-os-ledger tr:last-child td{border-bottom:0}
.oj-os-ledger td.oj-r{text-align:right}
.oj-os-ledger em{display:block;font-style:normal;font-size:14px;color:var(--oj-ink-muted);opacity:.7;margin-top:3px}
.oj-os-ledger-mark{background:var(--oj-ink);width:6px;height:6px;margin:0 auto;display:block}
.oj-glider{grid-template-rows:repeat(5,12px);grid-template-columns:repeat(5,12px);gap:2px;padding:2px 0 4px;display:grid}
.oj-glider span{border:var(--oj-hairline) solid var(--oj-ink);background:0 0}
.oj-glider span[data-on=true]{background:var(--oj-ink)}
.oj-pulse{display:grid;grid-template-columns:repeat(6,8px);gap:3px;margin-top:8px}
.oj-pulse span{width:8px;height:8px;background:var(--oj-ink);animation:1.4s ease-in-out infinite oj-pulse}
@keyframes oj-pulse{0%,to{opacity:.18}50%{opacity:1}}
.oj-os-text{font-family:var(--sans);font-size:15px;line-height:1.5;letter-spacing:0}
.oj-os-text.tight{font-size:14px}

/* ------------------------------------------------------------- buttons */
.btn,.icon-btn,.x-btn,.ca-chip,.ca-tag,.chip,.seg,.seg button,input,.dd-btn,.dd-list,.dd-opt,.tag,.score-pill,.mkt-btn,.mkt-pop,.mkt-opt,
.tok-pill,.eyebrow,.hero-card,.step-card,.proof-card,.panel,.swap,.swap-field,.sf-tok,.verdict,.headline-grid,.hcell,.ins-pool,.cmp-col,.snap,
.call,.call button,.wallet-opt,.wallet-opt img,.wallet-blank,.pal-box,.sheet-box,.tour-tip,.tour-tip button,.tour-hole,.toast,.ca-panel,.ca-panel-btn,
.ca-panel-state,.toc a,.doc pre,.doc .note,.swap-arrow svg,.exec-receipt,.ladder-row,.pal-row,.leg .bar,.leg .bar-wrap,.swap-msg,.check .mark,
.feed-row .side,.score-pill,.rs-n,.step-n,.tour-tip .bar,.exec-list .step-n{border-radius:0}

.btn{font:500 15px/1 var(--sans);letter-spacing:.03em;padding:.6rem 1rem;border:var(--oj-hairline) solid var(--oj-ink);background:var(--oj-bg);color:var(--oj-ink);transition:background .15s var(--ease),color .15s var(--ease)}
.btn:hover{background:var(--oj-win-body);border-color:var(--oj-ink)}
.btn.primary{background:var(--oj-ink);border-color:var(--oj-ink);color:var(--oj-bg)}
.btn.primary:hover{background:var(--oj-cta);border-color:var(--oj-cta)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--oj-win-body);color:var(--oj-ink)}
.btn.lg{padding:.9rem 1.4rem;font-size:17px}
.btn.tiny{padding:.35rem .65rem;font-size:13px}
.btn[disabled],.btn.primary[disabled]{background:var(--oj-win-body);border-color:var(--oj-chrome);color:var(--faint)}
.ripple{background:rgba(30,30,30,.12)}
.btn.primary .ripple{background:rgba(254,254,254,.25)}
.icon-btn,.x-btn{border:var(--oj-hairline) solid var(--oj-ink);background:var(--oj-bg);width:36px;height:36px}
.icon-btn:hover,.x-btn:hover{background:var(--oj-win-body)}

/* the pair of hero buttons, joined at the hip */
.oj-hero-pair{background:var(--oj-bg);border:var(--oj-hairline) solid var(--oj-ink);align-items:stretch;width:max-content;max-width:100%;display:flex}
.oj-hero-pair a,.oj-hero-pair button{letter-spacing:.03em;cursor:pointer;place-items:center;padding:1.1rem 1.55rem;font:500 clamp(1.1875rem,2.8vw,1.75rem)/1 var(--sans);text-decoration:none;display:grid;position:relative;appearance:none;border-radius:0}
.oj-hero-pair-fill{color:var(--oj-bg);background:var(--oj-ink);border:0}
.oj-hero-pair-ghost{color:var(--oj-ink);background:var(--oj-bg);border:0;border-left:var(--oj-hairline) solid var(--oj-ink)}
.oj-hero-pair-ghost:hover{background:var(--oj-win-body)}
.oj-hero-pair-fill:hover{background:var(--oj-cta)}

/* ------------------------------------------------------------ nav pair */
.lnav{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:var(--oj-hairline) solid transparent;padding:14px clamp(18px,4vw,48px)}
.lnav.stuck{background:rgba(254,254,254,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--oj-ink)}
.lnav-links a{font:500 15px var(--sans);color:var(--oj-ink);padding:8px 10px;border-radius:0}
.lnav-links a:hover{background:transparent;text-decoration:underline;text-underline-offset:4px}
.lnav-acts{gap:0}
.lnav-acts .x-btn{margin-right:10px}
.ca-chip{border:var(--oj-hairline) solid var(--oj-ink);background:var(--oj-bg);height:36px;font:500 14px var(--sans);gap:8px}
.ca-chip:hover{background:var(--oj-win-body);border-color:var(--oj-ink)}
.ca-tag{background:var(--oj-ink);color:var(--oj-accent);font:400 15px/1 var(--oj-vt);letter-spacing:.01em;padding:2px 4px 4px}
.ca-chip.live .ca-tag{background:var(--oj-ink);color:var(--oj-accent)}
.ca-chip.copied{background:var(--oj-tint);border-color:var(--oj-ink)}
.ca-chip.copied .ca-val{color:var(--oj-ink)}
.ca-val{font-family:var(--mono);font-size:13px;color:var(--oj-ink)}
.lnav-acts .btn.primary{border-left:0;height:36px;padding:0 .9rem;font-size:15px}
.wordmark{font-family:var(--word);letter-spacing:.07em}

/* ================================================================= SKY */
.oj-sky{position:relative;isolation:isolate;overflow:hidden;margin-top:-66px;padding-top:66px;display:flex;flex-direction:column;min-height:100svh}
.oj-sky-doc{min-height:72svh}
.oj-atmo{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.oj-atmo-grad{position:absolute;inset:0;background:linear-gradient(to bottom,#f6c6e4,color-mix(in oklab,var(--oj-magenta) 55%,transparent),var(--oj-bg))}
.oj-cloud{position:absolute;border-radius:50%;filter:blur(64px)}
.oj-cloud-l{top:-6rem;left:-8rem;width:42rem;height:42rem;background:color-mix(in oklab,var(--oj-magenta) 70%,transparent)}
.oj-cloud-r{top:0;right:-8rem;width:36rem;height:36rem;background:color-mix(in oklab,#c23d8f 55%,transparent)}
.oj-cloud-c{top:8%;left:50%;width:36rem;height:36rem;translate:-50% 0;background:#f8eef6}
.oj-cloud-tex{position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 25%}
.oj-atmo-dots{position:absolute;inset:0;mix-blend-mode:multiply;opacity:.4}
.oj-atmo-fade{position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(to bottom,transparent,var(--oj-bg))}
@media (prefers-reduced-motion:no-preference){
  .oj-cloud-l{animation:28s ease-in-out infinite oj-drift-left}
  .oj-cloud-r{animation:34s ease-in-out infinite oj-drift-right}
  .oj-cloud-c{animation:31s ease-in-out infinite oj-breathe}
  .oj-cloud-tex{animation:35s ease-in-out infinite oj-texture-drift}
}
@keyframes oj-drift-left{0%,to{transform:translate(0) scale(1)}50%{transform:translate(5%,3%) scale(1.06)}}
@keyframes oj-drift-right{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-6%,4%) scale(1.08)}}
@keyframes oj-breathe{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-2%,-3%) scale(1.07)}}
@keyframes oj-texture-drift{0%,to{transform:translate(0) scale(1)}50%{transform:translate(1%,1%) scale(1.04)}}

.oj-sky-inner{position:relative;width:100%;max-width:72rem;margin:0 auto;padding:0 20px;flex:1;display:flex;flex-direction:column}
.oj-side-label{position:absolute;left:0;top:6rem;margin:0;writing-mode:vertical-rl;transform:rotate(180deg);
  font:400 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:color-mix(in oklab,var(--oj-ink) 55%,transparent);white-space:nowrap}
.oj-hero{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:auto;padding:clamp(120px,20vh,190px) 0 clamp(48px,7vh,80px);min-height:0;grid-template-columns:none;gap:0}
.oj-kicker{font:400 12px/1 var(--mono);letter-spacing:.06em;color:color-mix(in oklab,var(--oj-ink) 72%,transparent);margin:0 0 20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.oj-kicker .oj-dots{letter-spacing:.1em;opacity:.7}
.oj-hero h1{font:600 clamp(46px,8.2vw,110px)/.95 var(--sans);letter-spacing:-.035em;margin:0;max-width:15ch;text-wrap:balance;color:var(--oj-ink)}
.oj-hero h1 em{font-style:normal;color:inherit}
.oj-hero .lede{margin:26px auto 0;max-width:640px;text-align:center;font-size:clamp(17px,1.4vw,20px);line-height:1.65;color:var(--oj-ink)}
.oj-hero .oj-hero-pair{margin-top:40px}
.oj-hero .route-steps{margin:44px auto 0;width:min(560px,100%);text-align:left}
.tok-pill{border:var(--oj-hairline) solid var(--oj-ink);background:var(--oj-bg);font:600 14px/1 var(--sans);letter-spacing:.02em;padding:3px 10px 3px 3px}
.tok-pill:hover{transform:translateY(-2px);box-shadow:3px 3px 0 var(--oj-ink);border-color:var(--oj-ink)}
.tok-pill .mlogo{border-radius:0}
.route-steps::before{background:color-mix(in oklab,var(--oj-ink) 30%,transparent)}
.route-steps::after{background:var(--oj-magenta);box-shadow:0 0 0 4px color-mix(in oklab,var(--oj-magenta) 22%,transparent)}
.rs-n{border:var(--oj-hairline) solid var(--oj-ink);background:var(--oj-bg);color:var(--oj-ink);font:400 15px/1 var(--oj-vt)}
.route-steps li:last-child .rs-n{background:var(--oj-ink);color:var(--oj-bg)}
.route-steps li{font:500 15px/1.3 var(--sans);color:var(--oj-ink)}

/* ================================================================ DESK */
.oj-os-band{position:relative;overflow:clip;background:var(--oj-accent)}
.oj-desk{position:relative;max-width:1180px;margin:0 auto;width:100%}
.oj-desk-grid{display:flex;flex-direction:column;gap:20px;padding:48px 20px 20px}
.oj-win-pos{width:var(--w);max-width:100%;position:relative;z-index:1}
@media (min-width:1024px){
  .oj-desk{height:800px}
  .oj-desk-grid{display:block;padding:0}
  .oj-win-pos{position:absolute;top:var(--t);left:var(--l);z-index:var(--z,20)}
}

/* the quote window: a price and a tape */
.hero-card{background:transparent;border:0;padding:0;box-shadow:none}
.hero-card .oj-os-heading{font-variant-numeric:tabular-nums;font-size:36px}
.hero-card .oj-os-heading.up{color:var(--oj-accent)}
.hero-card .oj-os-heading.down{color:var(--oj-win-body)}
.hc-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0;padding:6px 4px 7px;border-top:var(--oj-hairline) solid var(--oj-ink);background:var(--oj-win-body);font:400 16px var(--oj-vt);color:var(--oj-ink);min-width:0}
.hc-live #hc-sym{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-live{gap:7px;font:400 16px var(--oj-vt);letter-spacing:.01em;text-transform:uppercase;color:var(--oj-ink)}
.hc-blk{font:400 16px var(--oj-vt);color:var(--oj-ink)}
.live-dot{background:var(--oj-magenta);animation:ping 2.2s var(--ease) infinite;width:7px;height:7px}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--oj-magenta) 45%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
#hc-spark{margin:0;height:104px;position:relative;background-image:repeating-linear-gradient(to bottom,transparent 0 23px,color-mix(in oklab,var(--oj-ink) 20%,transparent) 23px 24px);background-origin:content-box;padding:10px 10px 0;box-sizing:border-box;overflow:hidden}
#hc-spark svg{display:block;width:100%;height:72px;overflow:visible}
#hc-spark:empty{background-image:none}
#hc-spark:empty::before{content:"reading the pool oracle";display:block;font:400 15px var(--oj-vt);color:var(--oj-ink);opacity:.6;padding-top:36px;text-align:center}
#hc-spark[data-span]::after{content:attr(data-span);display:block;font:400 13px var(--oj-vt);color:var(--oj-ink);padding:4px 0 0;margin:0;background:none}
.sp-line{stroke:var(--oj-ink)!important;stroke-width:1.6!important}
.sp-area{fill:var(--oj-accent)!important}
.sp-dot{fill:var(--oj-ink)!important}
.hc-sub{font:400 16px var(--oj-vt);color:var(--oj-ink);white-space:normal;line-height:1.15;overflow:visible;text-overflow:clip}
#hc-bars{display:block;width:100%;height:60px;margin:6px 0 2px}
#hc-bars rect{fill:var(--oj-chrome);rx:0}
#hc-bars rect.best{fill:var(--oj-ink)}
.hc-foot{grid-template-columns:1fr;gap:6px;border-top:var(--oj-hairline) solid var(--oj-ink);padding-top:8px;margin-top:6px}
.hc-foot .k{font:400 15px var(--oj-vt);letter-spacing:.01em;text-transform:none;color:var(--oj-ink-muted);margin-bottom:2px}
.hc-foot .v{font:400 20px var(--oj-vt);white-space:normal}
.hc-foot .v.good{color:var(--oj-ink)}
.hc-go{margin-top:8px;padding-top:8px;border-top:var(--oj-hairline) solid var(--oj-ink);font:400 18px var(--oj-vt);color:var(--oj-ink)}

/* the $ROUTA window: the address, and one button to copy it */
.ca-panel{margin:0;max-width:none;border:0;background:transparent;padding:4px}
.ca-panel-head{margin-bottom:6px}
.ca-panel-tag{font:400 16px/1 var(--oj-vt);letter-spacing:.01em;text-transform:none;color:var(--oj-ink)}
.ca-panel-state{font:400 15px/1 var(--oj-vt);color:var(--oj-ink);border:var(--oj-hairline) solid var(--oj-ink);padding:2px 5px 3px;background:var(--oj-bg)}
.ca-panel.live .ca-panel-state{color:var(--oj-ink);border-color:var(--oj-ink);background:var(--oj-tint)}
.ca-panel-btn{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0;background:var(--oj-bg);border:var(--oj-hairline) solid var(--oj-ink);padding:0;align-items:stretch}
.ca-panel.live .ca-panel-btn:hover{border-color:var(--oj-ink)}
.ca-panel-addr{font:400 15px/1.35 var(--oj-vt);color:var(--oj-ink);padding:6px 6px 7px;overflow-wrap:anywhere;align-self:center}
.ca-panel.live .ca-panel-addr{color:var(--oj-ink)}
.ca-panel-act{border-left:var(--oj-hairline) solid var(--oj-ink);padding:0 9px;background:var(--oj-win-body);color:var(--oj-ink);font:400 16px var(--oj-vt);gap:5px;display:inline-flex;align-items:center}
.ca-panel.live .ca-panel-act{color:var(--oj-ink)}
.ca-panel-btn.copied{background:var(--oj-tint)}
.ca-panel-btn.copied .ca-panel-act{color:var(--oj-ink);background:var(--oj-accent)}
.ca-panel-btn.nope{background:var(--amber-bg);border-color:var(--oj-ink)}
.ca-panel-link{font:400 15px var(--oj-vt);color:var(--oj-ink);margin-top:8px}

/* =========================================================== LANDING */
.oj-band{position:relative;overflow:clip}
.oj-band-paper{background:var(--oj-bg)}
.oj-band-accent{background:var(--oj-accent)}
.oj-band-ink{background:var(--oj-ink);color:var(--oj-bg)}
.oj-band .land{position:relative;z-index:1}
.lsec{padding:clamp(80px,9vw,120px) 0}
.lsec-head h2{font:600 clamp(34px,4.2vw,58px)/1 var(--sans);letter-spacing:-.03em;margin:18px 0 16px}
.lsec-head p{font-size:17px;line-height:1.65;color:var(--oj-ink);max-width:600px}
.label{font:400 15px/1 var(--oj-vt);letter-spacing:.01em;text-transform:none;color:var(--oj-accent);background:var(--oj-ink);padding:3px 6px 5px 4px;display:inline-block}
.oj-band-ink .lsec-head p{color:color-mix(in oklab,var(--oj-bg) 78%,transparent)}
.oj-band-ink .label{background:var(--oj-bg);color:var(--oj-ink)}
.oj-band-accent .label{background:var(--oj-ink);color:var(--oj-accent)}

/* three steps, three windows */
.steps3{gap:20px;margin-top:40px;align-items:start}
.step-card{padding:0;border:0;background:transparent;gap:0;display:block}
.step-card:hover{transform:translateY(-3px);box-shadow:none;border-color:transparent}
.step-card:hover .oj-os-rim{box-shadow:6px 6px 0 var(--oj-ink)}
.step-card .oj-os-rim{transition:box-shadow .25s var(--ease)}
.step-card h3{font:400 36px/1 var(--oj-vt);margin:0;letter-spacing:.01em}
.step-card p{margin:0 0 14px;color:var(--oj-ink);font:400 15.5px/1.55 var(--sans);letter-spacing:0}
.step-card .step-link{font:400 18px var(--oj-vt);letter-spacing:.01em;color:var(--oj-ink)}
.step-card .oj-os-content{padding:10px 8px 10px}

/* the market list as a ledger */
.mkt-list{border-top:0}
.mkt-row{padding:16px 8px;border-bottom:var(--oj-hairline) solid var(--oj-ink);grid-template-columns:34px 68px 1fr auto;gap:12px}
.mkt-row:last-child{border-bottom:0}
.mkt-row:hover{background:var(--oj-tint);padding-left:16px}
.mkt-sym{font:400 18px var(--oj-vt);letter-spacing:.01em}
.mkt-name{font:500 24px/1.1 var(--sans);letter-spacing:-.02em}
.mkt-go{font:400 17px var(--oj-vt);color:var(--oj-ink-muted)}
.mkt-row:hover .mkt-go{color:var(--oj-ink)}
.mlogo{background:var(--oj-ink);color:var(--oj-bg)}
.oj-band-accent .btn{background:var(--oj-bg)}
.oj-band-accent .btn:hover{background:var(--oj-win-body)}

/* the execution rail on ink */
.oj-band-ink .exec-list .step-n{border:var(--oj-hairline) solid color-mix(in oklab,var(--oj-bg) 55%,transparent);background:var(--oj-ink);color:var(--oj-bg);font:400 16px/1 var(--oj-vt)}
.oj-band-ink .exec-list li:not(:last-child)::after{background:color-mix(in oklab,var(--oj-bg) 25%,transparent)}
.oj-band-ink .exec-list li:not(:last-child)::before{background:var(--oj-accent)}
.oj-band-ink .exec-list li.lit .step-n{background:var(--oj-accent);border-color:var(--oj-accent);color:var(--oj-ink)}
.oj-band-ink .exec-list h3{color:var(--oj-bg);font:600 18px/1.3 var(--sans)}
.oj-band-ink .exec-list p{color:color-mix(in oklab,var(--oj-bg) 72%,transparent)}
.oj-band-ink code{background:#fefefe22;color:var(--oj-bg)}
.oj-band-ink .exec-receipt{background:var(--oj-bg);color:var(--oj-ink);border:var(--oj-hairline) solid var(--oj-bg)}
.oj-band-ink .exec-receipt strong{color:var(--oj-ink)}
.oj-band-ink .exec-receipt svg{stroke:var(--oj-ink)}
.oj-band-ink .btn.primary{background:var(--oj-bg);color:var(--oj-ink);border-color:var(--oj-bg)}
.oj-band-ink .btn.primary:hover{background:var(--oj-accent);border-color:var(--oj-accent)}
.oj-band-ink .lsec-head h2{color:var(--oj-bg)}

/* proof: four windows, one per contract */
.proof-grid{gap:20px;margin-top:40px;align-items:start}
.proof-card{padding:0;border:0;background:transparent;gap:0;display:block}
.proof-card:hover .oj-os-rim{box-shadow:6px 6px 0 var(--oj-ink)}
.proof-card .oj-os-rim{transition:box-shadow .25s var(--ease)}
.proof-card h3{font:400 30px/1 var(--oj-vt);margin:0;letter-spacing:.01em}
.proof-card .addr{font:400 15px/1.45 var(--oj-vt);color:var(--oj-ink);letter-spacing:.01em}
.proof-card .oj-os-content{padding:8px}
.proof-card .label{margin:0}

/* footer on the wallpaper */
.foot{position:relative;z-index:1}
.oj-foot{background:var(--oj-accent);position:relative;overflow:clip}
.foot-top{border-bottom:var(--oj-hairline) solid var(--oj-ink)}
.foot-brand p{color:var(--oj-ink)}
.foot-links a{color:var(--oj-ink);font:500 15px var(--sans)}
.foot-note,.foot-note a{color:var(--oj-ink)}
.foot-note.mono{font-family:var(--oj-vt);font-size:15px;letter-spacing:.01em}

/* ================================================================= APP */
body.in-app{background:var(--oj-accent)}
#app{position:relative;z-index:1;background:transparent}
.oj-desk-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--oj-accent);overflow:hidden}
.oj-desk-bg .oj-blob-slot{opacity:.22}
.oj-desk-bg .oj-blob-bl{left:12%;bottom:-8rem}
.oj-desk-bg .oj-blob-tr{right:-3rem;top:10%}
#app>*{position:relative;z-index:1}
#app>.oj-desk-bg{position:fixed;z-index:0}

.side{background:transparent;border-right:0;gap:14px;padding:16px 14px}
.side-brand{padding:6px 6px 4px}
.side .oj-os-window{width:100%}
.side-nav{gap:0;background:var(--oj-bg);padding:4px}
.side-nav a{padding:9px 10px;border-radius:0;font:500 15px var(--sans);color:var(--oj-ink);gap:10px}
.side-nav a:hover{background:var(--oj-tint);color:var(--oj-ink)}
.side-nav a.on{background:var(--oj-ink);color:var(--oj-bg);box-shadow:none}
.side-foot{padding:0 4px}
.side-foot a{font:400 17px var(--oj-vt);color:var(--oj-ink);letter-spacing:.01em}
.oj-side-status{margin-top:auto}
.oj-side-status .oj-os-content{padding:6px}

.topbar{background:var(--oj-ink);color:var(--oj-bg);border-bottom:var(--oj-hairline) solid var(--oj-ink);backdrop-filter:none;-webkit-backdrop-filter:none;padding:9px clamp(16px,3vw,36px)}
.stat .k{font:400 14px/1 var(--oj-vt);letter-spacing:.01em;text-transform:uppercase;color:color-mix(in oklab,var(--oj-bg) 60%,transparent)}
.stat .v,.stat .v.mono{font:400 19px/1.1 var(--oj-vt);color:var(--oj-bg);letter-spacing:.01em}
.stat .v.live{color:var(--oj-accent)}
#quote-ring .rg-bg{stroke:#fefefe33}
#quote-ring .rg-fill{stroke:var(--oj-accent)}
@keyframes tick{0%{color:var(--oj-accent)}100%{color:inherit}}
.topbar .x-btn{background:transparent;color:var(--oj-bg);border-color:color-mix(in oklab,var(--oj-bg) 45%,transparent)}
.topbar .x-btn:hover{background:#fefefe22}
.topbar .ca-chip{background:transparent;border-color:color-mix(in oklab,var(--oj-bg) 45%,transparent);color:var(--oj-bg)}
.topbar .ca-chip:hover{background:#fefefe22}
.topbar .ca-chip .ca-val{color:var(--oj-bg)}
.topbar .ca-tag{background:var(--oj-bg);color:var(--oj-ink)}
.topbar .btn.primary{background:var(--oj-bg);color:var(--oj-ink);border-color:var(--oj-bg)}
.topbar .btn.primary:hover{background:var(--oj-accent);border-color:var(--oj-accent)}
#btn-wallet.connected{background:var(--oj-bg);color:var(--oj-ink);border-color:var(--oj-bg);font-family:var(--oj-vt);font-size:17px}

.screen-head h1{font:600 clamp(32px,3.4vw,46px)/1.02 var(--sans);letter-spacing:-.03em;color:var(--oj-ink)}
.sec-num{font:400 16px/1 var(--oj-vt);color:var(--oj-accent);background:var(--oj-ink);padding:3px 5px 4px 4px;min-width:0;height:max-content}
.sec-head h2{font:600 19px/1.3 var(--sans);letter-spacing:-.01em;color:var(--oj-ink)}
.sec-head p{color:var(--oj-ink);opacity:.8}
.sec-head.inner{display:none}      /* the window tab carries the title */
.hint,.hint a{color:var(--oj-ink);opacity:.85}
.hint.err{color:var(--red);opacity:1}

/* every panel is now the body of a window (oj.js wraps it) */
.oj-app-win+.oj-app-win,.grid-2+.oj-app-win,.grid-3+.oj-app-win,.grid-wide+.oj-app-win,.oj-app-win+.grid-2{margin-top:18px}
.oj-app-win .panel{padding:18px;border:var(--oj-hairline) solid var(--oj-ink);background:var(--oj-bg);margin:0;font-family:var(--sans);letter-spacing:0;font-size:16px;line-height:1.6}
.oj-app-win .swap{padding:14px;border:var(--oj-hairline) solid var(--oj-ink);background:var(--oj-bg);box-shadow:none;font-family:var(--sans);letter-spacing:0;font-size:16px;line-height:1.6}
.oj-app-win .swap .btn,.oj-app-win .panel .btn{letter-spacing:.02em}
body.spin .panel::after{background:linear-gradient(100deg,transparent 30%,rgba(243,134,161,.18) 50%,transparent 70%);background-size:220% 100%}
.grid-2,.grid-3,.grid-wide{gap:18px}
.trade-grid{gap:24px}

/* controls */
.field>label{font:400 15px/1 var(--oj-vt);letter-spacing:.01em;text-transform:uppercase;color:var(--oj-ink)}
.chip{font:500 13px/1 var(--sans);padding:8px 11px;border:var(--oj-hairline) solid var(--oj-ink);background:var(--oj-bg);color:var(--oj-ink)}
.chip:hover{background:var(--oj-win-body);border-color:var(--oj-ink);color:var(--oj-ink)}
.chip.on{background:var(--oj-ink);border-color:var(--oj-ink);color:var(--oj-bg)}
.chip.more{border-style:dashed;color:var(--oj-ink)}
input{font:400 15px var(--sans);border:var(--oj-hairline) solid var(--oj-ink);background:var(--oj-bg);color:var(--oj-ink)}
input:focus{border-color:var(--oj-ink);box-shadow:0 0 0 3px color-mix(in oklab,var(--oj-accent) 70%,transparent)}
input::placeholder{color:#8a8a8a}
.seg{padding:0;background:var(--oj-bg);border:var(--oj-hairline) solid var(--oj-ink)}
.seg button{padding:8px 14px;font:500 14px/1 var(--sans);color:var(--oj-ink)}
.seg button+button{border-left:var(--oj-hairline) solid var(--oj-ink)}
.seg button:hover{background:var(--oj-win-body)}
.seg button.on{background:var(--oj-ink);color:var(--oj-bg);box-shadow:none}
.seg.small button{padding:7px 12px;font-size:13.5px}
input[type=range]::-webkit-slider-runnable-track{border-radius:0;background:linear-gradient(90deg,var(--oj-ink) var(--pct,50%),var(--oj-chrome) var(--pct,50%))}
input[type=range]::-moz-range-track{border-radius:0;background:var(--oj-chrome)}
input[type=range]::-moz-range-progress{border-radius:0;background:var(--oj-ink)}
input[type=range]::-webkit-slider-thumb{border-radius:0;background:var(--oj-bg);border:var(--oj-hairline) solid var(--oj-ink);width:16px;height:16px;margin-top:-6px}
input[type=range]::-moz-range-thumb{border-radius:0;background:var(--oj-bg);border:var(--oj-hairline) solid var(--oj-ink)}

/* decision */
.headline-grid{gap:var(--oj-hairline);background:var(--oj-ink);border:var(--oj-hairline) solid var(--oj-ink)}
.hcell{background:var(--oj-bg)}
.hcell .k{font:400 15px/1.2 var(--oj-vt);letter-spacing:.01em;text-transform:uppercase;color:var(--oj-ink)}
.hcell .sub{color:var(--oj-ink);opacity:.65}
.verdict{border:var(--oj-hairline) solid var(--oj-ink);background:var(--oj-tint);color:var(--oj-ink)}
.verdict.warn{background:var(--amber-bg);color:#5B400B;border-color:var(--oj-ink)}
.verdict.bad{background:var(--red-bg);color:#6B2518;border-color:var(--oj-ink)}

/* charts keep their data colours, lose their curves */
#routemap .link{stroke:var(--oj-chrome)}
#routemap .link.best{stroke:var(--oj-ink)}
#routemap .flow{fill:var(--oj-magenta)}
#routemap .node{fill:var(--oj-bg);stroke:var(--oj-ink)}
#routemap .node.best{fill:var(--oj-accent);stroke:var(--oj-ink)}
#routemap text{font-family:var(--oj-vt);font-size:15px;fill:var(--oj-ink)}
#routemap text.lbl{fill:var(--oj-ink);font-size:16px}
#curve .grid{stroke:color-mix(in oklab,var(--oj-ink) 14%,transparent)}
#curve .axis{fill:var(--oj-ink);font-family:var(--oj-vt);font-size:15px}
#curve .here{stroke:var(--oj-magenta)}

/* tables */
th{font:400 15px/1 var(--oj-vt);letter-spacing:.01em;text-transform:uppercase;color:var(--oj-ink);border-bottom:var(--oj-hairline) solid var(--oj-ink)}
td{border-bottom:var(--oj-hairline) solid color-mix(in oklab,var(--oj-ink) 16%,transparent)}
tbody tr.clickable:hover td{background:var(--oj-tint)}
tbody tr.best td{background:var(--oj-tint)}
th[data-sort]:hover,th[data-sort].sorted{color:var(--oj-magenta)}
.tag{font:400 14px/1 var(--oj-vt);letter-spacing:.01em;padding:2px 5px 3px;border:var(--oj-hairline) solid var(--oj-ink);color:var(--oj-ink)}
.tag.best{background:var(--oj-ink);color:var(--oj-bg)}
.tag.hop{background:var(--oj-win-body)}
.pair{font-family:var(--oj-vt);font-size:16px;letter-spacing:.01em}
.scroller::before{background:linear-gradient(90deg,var(--oj-bg),rgba(254,254,254,0))}
.scroller::after{background:linear-gradient(270deg,var(--oj-bg),rgba(254,254,254,0))}
.score-pill{font:400 16px/1 var(--oj-vt);padding:3px 7px 4px;border:var(--oj-hairline) solid var(--oj-ink);color:var(--oj-ink);background:var(--oj-bg)}
.score-pill.good{border-color:var(--oj-ink)}
.score-pill.warn{border-color:var(--oj-ink)}
.score-pill.bad{border-color:var(--oj-ink)}
.star{color:var(--oj-chrome)}
.star:hover,.star.on{color:var(--oj-magenta)}
.leg,.kv,.check,.feed-row,.ladder-row{border-bottom-color:color-mix(in oklab,var(--oj-ink) 16%,transparent)}
.leg .bar-wrap{background:var(--oj-win-body)}
.leg .bar{background:var(--oj-ink)}
.leg .pct{font:400 20px var(--oj-vt)}
.kv .k{color:var(--oj-ink);opacity:.7}
.ladder-row:hover{background:var(--oj-tint)}
.ladder-row.here{background:var(--oj-tint)}
.ins-pool,.cmp-col,.snap,.call{border:var(--oj-hairline) solid var(--oj-ink);background:var(--oj-bg)}
.ins-h{font:400 15px var(--oj-vt);letter-spacing:.01em;text-transform:uppercase;color:var(--oj-ink)}
.call button{border:var(--oj-hairline) solid var(--oj-ink);background:var(--oj-bg);color:var(--oj-ink)}
.call button:hover{background:var(--oj-win-body)}
.score-big .n{font:400 64px/1 var(--oj-vt)}
.check .mark{font-family:var(--oj-vt);font-size:16px;font-weight:400;border:var(--oj-hairline) solid var(--oj-ink)}
.check .mark.ok{background:var(--oj-tint);color:var(--oj-ink)}
.check .mark.no{background:var(--amber-bg);color:var(--oj-ink)}
.check .note{font-family:var(--oj-vt);font-size:15px;letter-spacing:.01em;color:var(--oj-ink);opacity:.75}
.sim-head .k{font:400 15px var(--oj-vt);letter-spacing:.01em;text-transform:uppercase;color:var(--oj-ink)}
.sim-head .v{font:400 22px var(--oj-vt)}
.feed-row .side{font:400 14px var(--oj-vt);letter-spacing:.02em;border:var(--oj-hairline) solid var(--oj-ink)}
.feed-row .side.good{color:var(--oj-ink);background:var(--oj-tint)}
.feed-row .side.bad{color:var(--oj-ink);background:var(--oj-win-body)}

/* dropdowns, pickers */
.dd-btn{border:var(--oj-hairline) solid var(--oj-ink);background:var(--oj-bg);font:500 14px var(--sans)}
.dd-btn:hover{border-color:var(--oj-ink);background:var(--oj-win-body)}
.dd.open .dd-btn{box-shadow:0 0 0 3px color-mix(in oklab,var(--oj-accent) 70%,transparent)}
.dd-list{border:var(--oj-hairline) solid var(--oj-ink);box-shadow:5px 5px 0 var(--oj-ink);padding:4px;background:var(--oj-bg);scrollbar-color:var(--oj-chrome) transparent}
.dd-opt{font:14px var(--sans);color:var(--oj-ink)}
.dd-opt:hover,.dd-opt.active{background:var(--oj-tint);color:var(--oj-ink)}
.dd-dot{background:var(--oj-chrome)}
.dd-opt.on .dd-dot{background:var(--oj-magenta)}
.mkt-btn{border:var(--oj-hairline) solid var(--oj-ink);background:var(--oj-bg)}
.mkt-btn:hover{border-color:var(--oj-ink);background:var(--oj-win-body)}
.mkt-picker.open .mkt-btn{box-shadow:0 0 0 3px color-mix(in oklab,var(--oj-accent) 70%,transparent)}
.mkt-btn-sym{font:400 19px/1 var(--oj-vt)}
.mkt-btn-name{color:var(--oj-ink);opacity:.7}
.mkt-pop{border:var(--oj-hairline) solid var(--oj-ink);box-shadow:6px 6px 0 var(--oj-ink);background:var(--oj-bg)}
.mkt-search{border-bottom:var(--oj-hairline) solid var(--oj-ink)}
.mkt-options{scrollbar-color:var(--oj-chrome) transparent}
.mkt-opt.active{background:var(--oj-tint)}
.mkt-opt-sym{font:400 18px/1 var(--oj-vt)}
.mkt-opt-name{color:var(--oj-ink);opacity:.7}
.mkt-check{stroke:var(--oj-magenta)}
.mkt-foot{border-top:var(--oj-hairline) solid var(--oj-ink);font:400 15px/1 var(--oj-vt);letter-spacing:.01em;color:var(--oj-ink)}

/* swap */
.swap-title{font:600 16px var(--sans)}
.swap-field{border:var(--oj-hairline) solid var(--oj-ink);background:var(--oj-bg)}
.swap-field:focus-within{box-shadow:0 0 0 3px color-mix(in oklab,var(--oj-accent) 70%,transparent)}
.sf-top{color:var(--oj-ink);opacity:.75}
.sf-tok{border:var(--oj-hairline) solid var(--oj-ink);background:var(--oj-bg);font:400 18px/1 var(--oj-vt);letter-spacing:.01em}
.sf-input,.sf-out{font:500 32px/1.15 var(--sans);letter-spacing:-.03em}
.sf-usd{color:var(--oj-ink);opacity:.7}
.swap-arrow svg{border:var(--oj-hairline) solid var(--oj-ink);background:var(--oj-bg);stroke:var(--oj-ink)}
.swap-slip-row{color:var(--oj-ink)}
.swap-steps{border-top:var(--oj-hairline) solid var(--oj-ink)}
.st-dot{border-radius:0;border:var(--oj-hairline) solid var(--oj-ink)}
.st.done .st-dot{background:var(--oj-ink);border-color:var(--oj-ink)}
.st.skip .st-dot{background:var(--oj-chrome);border-color:var(--oj-chrome)}
.swap-msg.good{background:var(--oj-tint);color:var(--oj-ink);border:var(--oj-hairline) solid var(--oj-ink)}
.swap-msg.bad{border:var(--oj-hairline) solid var(--oj-ink)}
.swap-note{color:var(--oj-ink);opacity:.75}

/* sheets, palette, tour, toast: all windows too */
.palette,.sheet{background:rgba(30,30,30,.4)}
.pal-box,.sheet-box,.tour-tip{border:var(--oj-hairline) solid var(--oj-ink);box-shadow:8px 8px 0 var(--oj-ink);background:var(--oj-bg)}
.sheet-box{padding:0 0 18px}
.sheet-top{background:var(--oj-ink);color:var(--oj-win-body);font:400 20px/1 var(--oj-vt);letter-spacing:.01em;padding:4px 8px 7px;margin:0 0 12px}
.sheet-top strong{font-weight:400}
.sheet-top .btn{background:var(--oj-bg);color:var(--oj-ink);border-color:var(--oj-bg);padding:.3rem .6rem;font:400 15px var(--oj-vt)}
.sheet-box>.kv,.sheet-box>.sheet-p,.sheet-box>.wallet-list,.sheet-box>.sheet-acts,.sheet-box>.sheet-foot,.sheet-box>.wallet-links{margin-left:20px;margin-right:20px}
.sheet-box .kv .k{font-family:var(--oj-vt);font-size:17px;letter-spacing:.01em;opacity:1}
#pal-input{border-bottom:var(--oj-hairline) solid var(--oj-ink);font-family:var(--sans)}
.pal-row.on{background:var(--oj-tint)}
.pal-foot{border-top:var(--oj-hairline) solid var(--oj-ink);font:400 15px var(--oj-vt);letter-spacing:.01em;color:var(--oj-ink)}
.wallet-opt{border:var(--oj-hairline) solid var(--oj-ink);background:var(--oj-bg)}
.wallet-opt:hover{background:var(--oj-tint);border-color:var(--oj-ink)}
.tour-hole{border:var(--oj-hairline) solid var(--oj-bg);box-shadow:0 0 0 9999px rgba(30,30,30,.55)}
.tour-tip .count{font:400 16px var(--oj-vt);letter-spacing:.01em;color:var(--oj-accent);background:var(--oj-ink);display:inline-block;padding:2px 5px 4px 4px}
.tour-tip h4{font:600 26px/1.1 var(--sans);letter-spacing:-.02em}
.tour-tip .bar{background:var(--oj-win-body)}
.tour-tip .bar i{background:var(--oj-ink)}
.tour-tip button{border:var(--oj-hairline) solid var(--oj-ink);background:var(--oj-bg);color:var(--oj-ink);font:500 14px var(--sans)}
.tour-tip button:hover{background:var(--oj-win-body)}
.tour-tip button.go{background:var(--oj-ink);color:var(--oj-bg)}
.tour-tip button.skip{border-color:transparent;background:transparent}
.toast{font:400 19px var(--oj-vt);letter-spacing:.01em;background:var(--oj-ink);color:var(--oj-win-body);box-shadow:5px 5px 0 var(--oj-accent);padding:8px 14px 10px}

/* the opening wipe, on pink */
.intro{background:var(--oj-accent)}
.intro-line{background:color-mix(in oklab,var(--oj-ink) 30%,transparent)}
.intro-line i{background:var(--oj-ink)}

/* ================================================================ DOCS */
.docs-page .oj-sky{margin-top:-66px}
.oj-doc-inner{position:relative;width:100%;max-width:900px;margin:auto auto 0;padding:clamp(120px,18vh,180px) clamp(18px,4vw,40px) 40px}
.doc-hero{padding:0}
.doc-hero h1{font:600 clamp(44px,6.4vw,92px)/.95 var(--sans);letter-spacing:-.035em;margin:18px 0 20px}
.doc-hero p{color:var(--oj-ink);font-size:18px;line-height:1.65}
.toc{border-top:var(--oj-hairline) solid var(--oj-ink);gap:6px}
.toc a{font:400 16px/1 var(--oj-vt);letter-spacing:.01em;color:var(--oj-ink);padding:6px 9px 7px;border:var(--oj-hairline) solid var(--oj-ink);background:var(--oj-bg)}
.toc a:hover{background:var(--oj-ink);color:var(--oj-accent);border-color:var(--oj-ink)}
.docs-page main{padding-top:clamp(40px,6vw,72px)}
.doc h2,.doc .sec-head h2{font:600 32px/1.05 var(--sans);letter-spacing:-.03em}
.doc h3{font:600 18px/1.3 var(--sans)}
.doc p,.doc ul,.doc ol{color:var(--oj-ink)}
.doc p a,.doc li a{text-decoration-color:var(--oj-magenta);text-decoration-thickness:1.5px}
.doc pre{background:var(--oj-bg);border:var(--oj-hairline) solid var(--oj-ink);box-shadow:5px 5px 0 var(--oj-ink);color:var(--oj-ink);margin:0 6px 24px 0}
.doc pre .c{color:#6a6a6a}
.doc pre .g{color:var(--oj-magenta)}
.doc .note{border-left:4px solid var(--oj-ink);background:var(--oj-tint)}
.doc .note p{color:var(--oj-ink)}
.doc .warn-note{border-left-color:var(--oj-ink);background:var(--amber-bg)}
.doc td:first-child{font-family:var(--oj-vt);font-size:16px;letter-spacing:.01em}
.doc-foot{border-top:var(--oj-hairline) solid var(--oj-ink);color:var(--oj-ink)}
.docs-page .sec-head.inner{display:flex}

/* ========================================================== responsive */
@media (max-width:980px){
  .oj-side-label{display:none}
  .oj-hero{padding-top:110px}
}
@media (max-width:900px){
  .side{padding:8px 12px;gap:6px;background:var(--oj-accent);border-bottom:var(--oj-hairline) solid var(--oj-ink)}
  .side .oj-os-window,.side .oj-os-rim{display:contents}
  .side .oj-os-tab,.side .oj-side-status{display:none}
  .side-nav{border:var(--oj-hairline) solid var(--oj-ink);padding:2px}
  .side-nav a{padding:7px 10px}
}
@media (max-width:620px){
  .oj-hero h1{font-size:clamp(40px,11.5vw,58px)}
  .oj-hero-pair a,.oj-hero-pair button{padding:.9rem 1.1rem}
  .oj-app-win .panel{padding:14px}
  .hero-card .oj-os-heading{font-size:32px}
  .oj-os-heading{font-size:30px}
}

/* docs: the closing blob sits behind the last notes */
.docs-page main{position:relative}
.oj-blob-doc{right:-18rem;bottom:2rem;opacity:.14;z-index:-1}
.oj-doc-inner .oj-side-label{left:-1.25rem;top:clamp(120px,18vh,180px)}
@media (max-width:1100px){.oj-doc-inner .oj-side-label{display:none}}

/* footer blob: paper dots, tucked to the right, so the notes stay readable */
.oj-foot .oj-blob-slot{left:auto;right:-4rem;bottom:-8rem;opacity:.5}
.oj-foot .oj-halftone-blob{fill:var(--oj-bg)}

/* the decision grid: six cells have to share a narrower column now */
.hcell .v{font-size:15px}
.hcell .v.big{font-size:19px}
.hcell .v.big.mono{font-size:17px}
.hcell .v.mono{font-size:14.5px}
@media (max-width:1560px){.headline-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* execution on a warm nude: kin to the pink, a step lighter and calmer */
:root{--oj-nude:#f4dcd4;--oj-nude-deep:#e9c9c0}
.oj-band-nude{background:var(--oj-nude);color:var(--oj-ink)}
.oj-band-nude .lsec-head h2{color:var(--oj-ink)}
.oj-band-nude .lsec-head p{color:var(--oj-ink)}
.oj-band-nude .label{background:var(--oj-ink);color:var(--oj-accent)}
.oj-band-nude .oj-frame-corners span{border-color:color-mix(in oklab,var(--oj-ink) 45%,transparent)}
.oj-band-nude .exec-list .step-n{border:var(--oj-hairline) solid var(--oj-ink);background:var(--oj-bg);color:var(--oj-ink);font:400 16px/1 var(--oj-vt)}
.oj-band-nude .exec-list li:not(:last-child)::after{background:color-mix(in oklab,var(--oj-ink) 22%,transparent)}
.oj-band-nude .exec-list li:not(:last-child)::before{background:var(--oj-ink)}
.oj-band-nude .exec-list li.lit .step-n{background:var(--oj-ink);border-color:var(--oj-ink);color:var(--oj-accent)}
.oj-band-nude .exec-list h3{color:var(--oj-ink);font:600 18px/1.3 var(--sans)}
.oj-band-nude .exec-list p{color:color-mix(in oklab,var(--oj-ink) 80%,transparent)}
.oj-band-nude code{background:color-mix(in oklab,var(--oj-ink) 9%,transparent);color:var(--oj-ink)}
.oj-band-nude .exec-receipt{background:var(--oj-bg);color:var(--oj-ink);border:var(--oj-hairline) solid var(--oj-ink);box-shadow:5px 5px 0 var(--oj-ink)}
.oj-band-nude .exec-receipt strong{color:var(--oj-ink)}
.oj-band-nude .exec-receipt svg{stroke:var(--oj-ink)}
.oj-band-nude .btn.primary{background:var(--oj-ink);color:var(--oj-bg);border-color:var(--oj-ink)}
.oj-band-nude .btn.primary:hover{background:var(--oj-cta);border-color:var(--oj-cta)}

/* ------------------------------------------------------------ the mark */
/* the glass tile in the nav, the sidebar and the opening wipe */
.wordmark{letter-spacing:.06em}
.brand,.side-brand{gap:9px}
.mark{width:30px;height:30px;flex:0 0 auto;display:block;border-radius:8px;overflow:hidden;
  border:1px solid rgba(255,255,255,.9);box-shadow:0 4px 12px -4px rgba(232,90,168,.45);transition:transform .25s var(--ease)}
.mark img{width:100%;height:100%;object-fit:cover;display:block}
.brand:hover .mark{transform:rotate(-8deg) scale(1.06)}
.side-brand .mark{width:28px;height:28px;border-radius:7px}
.intro-logo{-webkit-mask:none;mask:none;background:none;width:52px;height:52px;border-radius:14px;object-fit:cover;
  box-shadow:0 14px 30px -14px rgba(232,90,168,.6);clip-path:inset(0 100% 0 0);animation:logoWipe .85s cubic-bezier(.65,0,.35,1) .1s forwards}

/* the hero tile: floats, tilts toward the cursor, with a dashed orbit around it */
.hero-logo{position:relative;width:150px;height:150px;margin:0 0 22px;display:grid;place-items:center;perspective:900px}
.hero-logo::before{content:"";position:absolute;inset:4%;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.95),rgba(255,255,255,.5) 45%,transparent 72%);filter:blur(12px);animation:glowPulse 5s ease-in-out infinite;z-index:-1}
.hero-logo::after{content:"";position:absolute;inset:-12%;border:1px dashed color-mix(in oklab,var(--oj-ink) 40%,transparent);border-radius:50%;animation:orbit 40s linear infinite;pointer-events:none}
.hero-logo img{width:130px;height:130px;border-radius:32px;display:block;object-fit:cover;
  border:1px solid rgba(255,255,255,.9);box-shadow:0 24px 48px -18px rgba(150,40,100,.45),inset 0 1px 0 rgba(255,255,255,.9);
  animation:logoFloat 7s ease-in-out infinite;transform-style:preserve-3d;transition:transform .15s ease-out;will-change:transform}
@keyframes logoFloat{0%,to{transform:translateY(0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}50%{transform:translateY(-4px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}}
@keyframes orbit{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
@keyframes glowPulse{0%,to{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.08)}}

/* the status pill under it */
.hero .chip{display:inline-flex;align-items:center;gap:7px;margin:0 0 18px;padding:6px 12px;border:var(--oj-hairline) solid var(--oj-ink);border-radius:999px;
  background:rgba(255,255,255,.8);color:var(--oj-ink);font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.hero .chip .dot{width:7px;height:7px;border-radius:50%;background:var(--oj-magenta);animation:chipPulse 2.2s infinite}
@keyframes chipPulse{0%,to{box-shadow:0 0 0 0 rgba(232,90,168,.45)}60%{box-shadow:0 0 0 8px rgba(232,90,168,0)}}
.oj-hero{padding-top:clamp(84px,12vh,120px)}
@media (max-width:620px){.hero-logo{width:120px;height:120px}.hero-logo img{width:100px;height:100px;border-radius:26px}}
@media (prefers-reduced-motion:reduce){.hero-logo img,.hero-logo::before,.hero-logo::after,.hero .chip .dot{animation:none}}