/* tokens */
:root{
  color-scheme:light dark;
  --bg:#F6F7F8; --bg-glass:rgb(246 247 248 / .72);
  --surface:#FFFFFF; --surface-2:#EEF0F2;
  --ink:#0F1216; --muted:#59636E;
  --line:rgb(15 18 22 / .08); --line-strong:rgb(15 18 22 / .14);
  --accent:#D6620C; --accent-ink:#A54B06;
  --accent-soft:rgb(214 98 12 / .09); --accent-ring:rgb(214 98 12 / .34); --glow:rgb(214 98 12 / .11);
  --btn:#B9530A; --btn-hover:#A54B06; --on-btn:#FFFFFF;
  --tip-bg:#14181D; --tip-ink:#F3F5F7;
  --sec-ink:#0A0C0F;
  --shadow-card:0 0 0 1px rgb(15 18 22 / .06),0 1px 2px rgb(15 18 22 / .04),0 4px 12px -4px rgb(15 18 22 / .06);
  --shadow-lift:0 0 0 1px rgb(15 18 22 / .09),0 2px 4px rgb(15 18 22 / .05),0 14px 28px -10px rgb(15 18 22 / .16);

  --radius:14px; --radius-sm:8px; --gutter:1.25rem;
  --ease-out:cubic-bezier(.23,1,.32,1);

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Cascadia Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0A0C0F; --bg-glass:rgb(10 12 15 / .7);
    --surface:#12151A; --surface-2:#1A1E24;
    --ink:#ECEEF1; --muted:#9AA3AD;
    --line:rgb(255 255 255 / .07); --line-strong:rgb(255 255 255 / .13);
    --accent:#F28A2E; --accent-ink:#FFA95E;
    --accent-soft:rgb(242 138 46 / .12); --accent-ring:rgb(242 138 46 / .4); --glow:rgb(242 138 46 / .13);
    --btn:#F28A2E; --btn-hover:#FF9A42; --on-btn:#170C02;
    --tip-bg:#ECEEF1; --tip-ink:#0A0C0F;
    --shadow-card:0 0 0 1px rgb(255 255 255 / .06),inset 0 1px 0 rgb(255 255 255 / .04),0 8px 24px -12px rgb(0 0 0 / .7);
    --shadow-lift:0 0 0 1px rgb(255 255 255 / .11),inset 0 1px 0 rgb(255 255 255 / .06),0 18px 36px -14px rgb(0 0 0 / .85);
  }
}
@media (prefers-contrast:more){
  :root{--line:rgb(15 18 22 / .22); --line-strong:rgb(15 18 22 / .34); --muted:#454E58}
}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){
  :root{--line:rgb(255 255 255 / .2); --line-strong:rgb(255 255 255 / .32); --muted:#B7BFC8}
}
@media (min-width:40rem){:root{--gutter:2rem}}

/* base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-padding-top:4.5rem}
body{margin:0;background:var(--bg);color:var(--ink);font:1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto}
img{max-width:100%}
::selection{background:var(--accent-ring)}
p{margin:0;max-width:65ch;text-wrap:pretty}
h1,h2,h3{margin:0;font-family:var(--display);color:var(--ink);text-wrap:balance}
h2{font-size:1.75rem;font-weight:650;line-height:1.15;letter-spacing:-.03em}
h3{font-size:1.0625rem;font-weight:600;line-height:1.3;letter-spacing:-.01em}
section{display:grid;gap:1rem;align-content:start}
a{color:var(--accent-ink);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);transition:text-decoration-color 150ms ease}
a,button{touch-action:manipulation}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.label{font:500 .75rem/1.35 var(--mono);letter-spacing:.01em;color:var(--muted)}
.note{font-size:.9375rem;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.wrap{width:100%;max-width:calc(44rem + 2 * var(--gutter));margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px))}

/* chrome */
.skip{position:absolute;top:calc(env(safe-area-inset-top,0px) + .625rem);left:1rem;z-index:20;padding:.5rem .875rem;border-radius:999px;background:var(--ink);color:var(--bg);font-size:.875rem;font-weight:500;text-decoration:none;transform:translateY(-300%)}
.skip:focus-visible{transform:none}
.site-header{position:sticky;top:0;z-index:10;padding-top:env(safe-area-inset-top,0px);background:var(--bg-glass);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%)}
.site-header::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--line-strong)}
@supports (animation-timeline:scroll()){
  .site-header::after{opacity:0;animation:edge linear both;animation-timeline:scroll(root);animation-range:0 4rem}
}
@keyframes edge{to{opacity:1}}
.site-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:3.5rem}
.brand{display:inline-flex;align-items:center;gap:.5rem;font:600 .9375rem/1 var(--display);letter-spacing:-.01em;text-decoration:none}
.brand span{color:var(--muted)}
.brand b{font-weight:inherit;color:var(--ink)}
.mark{flex:none;width:20px;height:20px;fill:var(--accent)}
.lang,.back,.plan button{position:relative;user-select:none;-webkit-user-select:none;transition:transform 160ms var(--ease-out),color 150ms ease,background-color 150ms ease}
.lang::before,.back::before,.plan button::before{content:"";position:absolute;inset:-.375rem}
.lang:active,.back:active,.plan button:active{transform:scale(.97)}
.lang{display:inline-flex;align-items:center;height:2rem;padding-inline:.75rem;border-radius:999px;background:var(--surface);box-shadow:var(--shadow-card);color:var(--muted);font-size:.8125rem;font-weight:500;text-decoration:none}
.site-footer{padding-block:2rem calc(2.5rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.site-footer .wrap{display:grid;gap:.75rem;justify-items:start}
.site-footer p{max-width:60ch;font-size:.8125rem;color:var(--muted)}
main{display:grid;gap:4.5rem;padding-block:3rem 5rem}
@media (min-width:40rem){main{padding-block:4.5rem 6rem}}

/* home */
.hero{position:relative;isolation:isolate;display:grid;gap:1.25rem}
.hero::before{content:"";position:absolute;z-index:-1;inset:-7rem 0 auto;height:24rem;background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none}
@media (min-width:56rem){.hero::before{inset-inline:-5rem}}
.hero-title{font-size:clamp(3rem,11vw,4.75rem);font-weight:700;line-height:.98;letter-spacing:-.045em}
.hero-title span{color:var(--muted);font-weight:600}
.hero .lede{max-width:34ch;font-size:1.1875rem;line-height:1.5;color:var(--muted);text-wrap:balance}
.section-label{font:500 .75rem/1 var(--mono);letter-spacing:.02em;color:var(--muted)}
.home-posts{gap:1rem}
.posts{display:grid;gap:.75rem;margin:0;padding:0;list-style:none}
.post-card{position:relative;display:grid;gap:.5rem;padding:1.25rem 3.75rem 1.375rem 1.25rem;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-card);color:inherit;text-decoration:none;user-select:none;-webkit-user-select:none;transition:transform 160ms var(--ease-out)}
.post-card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--shadow-lift);opacity:0;pointer-events:none;transition:opacity 200ms ease}
.post-card:active{transform:scale(.98)}
.post-meta{display:flex;flex-wrap:wrap;gap:.25rem .5rem;font:500 .75rem/1.4 var(--mono);letter-spacing:.01em;color:var(--muted);font-variant-numeric:tabular-nums}
.post-title{font:650 1.5rem/1.15 var(--display);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.post-desc{max-width:60ch;font-size:.96875rem;line-height:1.55;color:var(--muted)}
.post-go{position:absolute;top:1.125rem;right:1.125rem;display:grid;place-items:center;width:2rem;height:2rem;border-radius:999px;background:var(--surface-2);color:var(--muted);transition:transform 200ms var(--ease-out),color 150ms ease,background-color 150ms ease}

/* post head */
.post,.post-body{display:grid;gap:4rem}
.post-head{display:grid;gap:1.25rem;justify-items:start}
.back{display:inline-flex;align-items:center;gap:.375rem;height:2rem;margin-left:-.625rem;padding-inline:.5rem .75rem;border-radius:999px;color:var(--muted);font-size:.875rem;font-weight:500;text-decoration:none}
.back svg{transition:transform 200ms var(--ease-out)}
h1{font-size:clamp(2.375rem,7vw,3.75rem);font-weight:700;line-height:1.02;letter-spacing:-.04em}
h1 .kicker{display:block;margin-bottom:1rem;font:500 .8125rem/1 var(--mono);letter-spacing:.01em;color:var(--accent-ink)}
h1 .from{color:var(--muted);font-weight:600}
.post-head .lede{max-width:40rem;font-size:1.1875rem;line-height:1.55;color:var(--muted)}
.byline{display:flex;align-items:center;gap:.75rem;font-size:.875rem;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums}
.avatar{display:grid;place-items:center;flex:none;width:2.25rem;height:2.25rem;border-radius:10px;background:var(--surface);box-shadow:var(--shadow-card)}
.byline-text{display:grid}
.author{color:var(--ink);font-weight:500}

/* post body */
.post-body{counter-reset:sec}
.post-body>section:not(.cta,.sources)>h2::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);display:block;margin-bottom:.75rem;font:500 .75rem/1 var(--mono);letter-spacing:.02em;color:var(--accent-ink)}

.route{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem}
.step{display:grid;gap:.375rem;align-content:start;align-self:stretch;padding:1.125rem 1.25rem;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-card)}
.step:last-child{background:linear-gradient(var(--accent-soft),var(--accent-soft)),var(--surface);box-shadow:0 0 0 1px var(--accent-ring),0 10px 24px -14px var(--accent-ring)}
.step .ship{margin-bottom:.25rem;font:650 1.375rem/1.1 var(--display);letter-spacing:-.025em}
.step .meta{font-size:.8125rem;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums}
.step .meta b{font-weight:600;color:var(--ink)}
.arrow{display:grid;place-items:center;width:2rem;height:2rem;border-radius:999px;background:var(--surface);box-shadow:var(--shadow-card);color:var(--accent-ink);font:500 1rem/1 var(--mono)}
@media (max-width:32.5rem){
  .route{grid-template-columns:1fr}
  .arrow{justify-self:center;transform:rotate(90deg)}
}

.fit{margin:0;padding-inline:1.25rem;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-card)}
.fit div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding-block:.875rem;border-bottom:1px solid var(--line)}
.fit div:last-child{border-bottom:0}
.fit dt{padding-top:.125rem;font-size:.875rem;color:var(--muted)}
.fit dd{margin:0}
@media (max-width:26rem){.fit div{grid-template-columns:1fr;gap:.125rem}}

.scroll{overflow-x:auto;overscroll-behavior-x:contain;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-card)}
table{width:100%;min-width:36rem;border-collapse:separate;border-spacing:0;font-size:.9375rem}
th{padding:.875rem 1rem .625rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:bottom;font-size:.75rem;font-weight:500;line-height:1.3;color:var(--muted)}
td{padding:.875rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
th.num,td.num{text-align:right}
td.num{font:.875rem/1.65 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
td.ship{font-weight:600;letter-spacing:-.01em;white-space:nowrap}
td.role{min-width:11rem;font-size:.875rem;color:var(--muted)}
tr.pick td{background-color:var(--accent-soft)}
.chip{display:inline-block;margin-left:.5rem;padding:.125rem .4375rem;border-radius:999px;background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-ring);color:var(--accent-ink);font:600 .6875rem/1.3 var(--mono);letter-spacing:.02em;vertical-align:.1em}
@media (max-width:40rem){
  th:first-child,td:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface);box-shadow:inset -1px 0 var(--line)}
  tr.pick td:first-child{background:linear-gradient(var(--accent-soft),var(--accent-soft)),var(--surface)}
  .chip{display:table;margin:.375rem 0 0}
}

.chart{display:grid;gap:1.5rem;padding:1.25rem;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-card)}
.group{display:grid;gap:.125rem}
.group h3{margin-bottom:.5rem;font:500 .75rem/1 var(--mono);letter-spacing:.01em;color:var(--muted)}
.ore{position:relative;display:grid;grid-template-columns:9.5rem 1fr 3.5rem;gap:.875rem;align-items:center;margin-inline:-.625rem;padding:.5rem .625rem;border-radius:var(--radius-sm);transition:background-color 150ms ease}
.ore:focus{background:var(--surface-2);outline:none}
.ore:focus-visible{outline:2px solid var(--accent);outline-offset:0}
.ore .name{font-weight:600;line-height:1.2;letter-spacing:-.01em}
.ore .where{display:block;margin-top:.125rem;font-size:.75rem;font-weight:400;line-height:1.35;letter-spacing:0;color:var(--muted)}
.bar{position:relative;height:.625rem;border-radius:999px;background:var(--surface-2)}
.bar::before,.bar::after{content:"";position:absolute;top:-.25rem;bottom:-.25rem;pointer-events:none}
.bar::before{left:0;right:0;background:linear-gradient(to right,var(--line-strong) 1px,transparent 1px) 0 0/33.333% 100% repeat-x}
.bar::after{right:0;width:1px;background:var(--line-strong)}
.fill{position:absolute;top:0;bottom:0;left:0;border-radius:inherit;background:var(--accent)}
.fill.hatch{background:repeating-linear-gradient(135deg,var(--accent) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1.5px var(--accent)}
.val{font:500 .875rem/1 var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.tip{position:absolute;right:.625rem;bottom:calc(100% - .25rem);z-index:2;padding:.4375rem .625rem;border-radius:var(--radius-sm);background:var(--tip-bg);color:var(--tip-ink);box-shadow:0 10px 24px -10px rgb(0 0 0 / .4);font:.75rem/1.4 var(--mono);white-space:nowrap;pointer-events:none;opacity:0;transform:scale(.97);transform-origin:bottom right;transition:opacity 100ms var(--ease-out),transform 100ms var(--ease-out)}
.ore:focus .tip{opacity:1;transform:none;transition-duration:125ms}
.axis{display:grid;grid-template-columns:9.5rem 1fr 3.5rem;gap:.875rem;margin-top:-.75rem;font:.6875rem/1 var(--mono);color:var(--muted)}
.ticks{position:relative;height:1rem;font-variant-numeric:tabular-nums}
.ticks span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.ticks span:first-child{transform:none}
.ticks span:last-child{transform:translateX(-100%)}
.axis .unit{text-align:right;white-space:nowrap}
@media (max-width:32.5rem){
  .ore,.axis{grid-template-columns:1fr 3.25rem;gap:.375rem .75rem}
  .ore .name{grid-column:1/-1}
  .axis>span:first-child{display:none}
  .tip{left:.625rem;white-space:normal}
}

.sec{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem;max-width:28rem}
.sec div{display:grid;gap:.375rem;align-content:start}
.sec span{display:block;padding-block:.375rem;border-radius:6px;box-shadow:inset 0 0 0 1px rgb(0 0 0 / .06);color:var(--sec-ink);text-align:center;font:600 .75rem/1.2 var(--mono);font-variant-numeric:tabular-nums}
.sec small{text-align:center;font:.6875rem/1 var(--mono);color:var(--muted)}

ul.rules{display:grid;margin:0;padding:0;list-style:none}
ul.rules li{display:grid;grid-template-columns:1.25rem 1fr;gap:.625rem;padding-block:.875rem;border-bottom:1px solid var(--line)}
ul.rules li:first-child{border-top:1px solid var(--line)}
ul.rules li::before{content:"";width:.5rem;height:.5rem;margin:.5em 0 0 .25rem;border-radius:1px;background:var(--accent);transform:rotate(45deg)}

.plans{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media (max-width:40rem){.plans{grid-template-columns:1fr}}
.plan{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto 1fr;gap:.25rem 1rem;align-items:center;padding:1.125rem;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-card)}
.plan>div{display:contents}
.plan h3{grid-area:1/1;font-size:1rem}
.plan .label{grid-area:2/1/3/3}
.plan pre{grid-area:3/1/4/3;align-self:stretch;margin:.75rem 0 0;padding:.875rem 1rem;border-radius:10px;background:var(--surface-2);font:.8125rem/1.7 var(--mono);white-space:pre;overflow-x:auto}
.plan button{grid-area:1/2;display:inline-grid;align-items:center;height:2rem;padding-inline:.75rem;border:0;border-radius:999px;background:var(--surface);box-shadow:var(--shadow-card);font-size:.8125rem;font-weight:500;cursor:pointer}
.copy-face{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:.375rem;white-space:nowrap;transition:opacity 200ms ease,filter 200ms ease,transform 200ms var(--ease-out)}
.copy-face svg{flex:none}
.copy-done{color:var(--accent-ink);opacity:0;filter:blur(2px);transform:scale(.95)}
.plan button[data-state="done"] .copy-idle{opacity:0;filter:blur(2px);transform:scale(.95)}
.plan button[data-state="done"] .copy-done{opacity:1;filter:none;transform:none}

.sources h2{font-size:1.125rem;letter-spacing:-.015em}

.faq{display:grid;margin:0}
.faq div{display:grid;gap:.375rem;padding-block:1rem;border-bottom:1px solid var(--line)}
.faq div:first-child{border-top:1px solid var(--line)}
.faq dt{font-weight:600;letter-spacing:-.01em}
.faq dd{max-width:65ch;margin:0;color:var(--muted)}

.cta{position:relative;isolation:isolate;overflow:hidden;gap:1.125rem;padding:2rem 1.5rem;border-radius:18px;background:var(--surface);box-shadow:0 0 0 1px var(--accent-ring),0 18px 40px -24px var(--accent-ring)}
.cta::before{content:"";position:absolute;z-index:-1;top:-12rem;right:-8rem;width:26rem;height:26rem;background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none}
.cta h2{font-size:1.875rem}
.cta .go{justify-self:start;display:inline-flex;align-items:center;gap:.5rem;height:2.75rem;padding-inline:1.125rem;border-radius:10px;background:var(--btn);color:var(--on-btn);box-shadow:inset 0 1px 0 rgb(255 255 255 / .18),0 1px 2px rgb(0 0 0 / .14);font-size:.9375rem;font-weight:600;text-decoration:none;user-select:none;-webkit-user-select:none;transition:transform 160ms var(--ease-out),background-color 150ms ease}
.cta .go::after{content:"↗";content:"↗" / "";font-weight:500}
.cta .go:active{transform:scale(.97)}
.cta .url{font:.75rem/1.5 var(--mono);color:var(--muted);word-break:break-all}
.cta .fine{font-size:.8125rem;line-height:1.6;color:var(--muted)}
@media (min-width:40rem){.cta{padding:2.5rem 2.25rem}}

/* hover only where a pointer can hover, so taps don't leave it stuck */
@media (hover:hover) and (pointer:fine){
  a:hover{text-decoration-color:currentColor}
  .brand:hover b{color:var(--accent-ink)}
  .lang:hover{color:var(--ink)}
  .back:hover{background:var(--surface-2);color:var(--ink)}
  .back:hover svg{transform:translateX(-2px)}
  .post-card:hover::after{opacity:1}
  .post-card:hover .post-go{transform:translateX(2px);background:var(--accent-soft);color:var(--accent-ink)}
  .ore:hover{background:var(--surface-2)}
  .ore:hover .tip{opacity:1;transform:none;transition-duration:125ms}
  .plan button:hover{background:var(--surface-2)}
  .cta .go:hover{background:var(--btn-hover)}
}

/* entrance: once per page view, never blocks input */
@keyframes enter{from{opacity:0;transform:translateY(8px)}}
@keyframes fade{from{opacity:0}}
.hero>*,.home-posts,.post-head>*,.post-body{animation:enter 300ms var(--ease-out) backwards}
.hero>:nth-child(2),.post-head>:nth-child(2){animation-delay:50ms}
.home-posts,.post-head>:nth-child(3){animation-delay:100ms}
.post-head>:nth-child(4){animation-delay:150ms}
.post-body{animation-delay:200ms}

@media (prefers-reduced-motion:reduce){
  .hero>*,.home-posts,.post-head>*,.post-body{animation-name:fade;animation-duration:200ms}
  .back svg,.post-go,.tip,.copy-face{transform:none!important}
}
@media (prefers-reduced-transparency:reduce){
  .site-header{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
}