/* BOLTRUN, hotshot and power only.
   Direction: Japanese minimal. White paper, sumi ink, indigo, one vermilion accent.
   Radius 0, hairlines only. Fixed left index rail on desktop, vertical type, huge whitespace. */
:root{--ink:#16181d;--indigo:#23356b;--ver:#e8452c;--mute:#5e636e;--hair:#e4e5e8;--paper:#ffffff;--wash:#f7f7f5;--side:300px;--logo-a:#e8452c}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:400 16.5px/1.8 "Zen Kaku Gothic New",system-ui,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:inherit}
.ic{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic .a{stroke:var(--ver)}
:focus-visible{outline:2px solid var(--ver);outline-offset:3px}
.skip{position:absolute;left:-999px;background:var(--ink);color:#fff;padding:8px 12px;z-index:99}.skip:focus{left:8px;top:8px}

/* side rail */
.side{position:fixed;inset:0 auto 0 0;width:var(--side);border-right:1px solid var(--hair);background:#fff;display:flex;flex-direction:column;padding:40px 36px;z-index:30}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:900 22px/1 "Zen Kaku Gothic New",sans-serif;letter-spacing:.16em;color:var(--indigo)}
.brand .mark{width:38px;height:38px}
.snav{display:flex;flex-direction:column;margin-top:64px}
.snav a{display:flex;gap:16px;align-items:baseline;text-decoration:none;padding:11px 0;color:var(--mute);font-weight:500;border-bottom:1px solid transparent;transition:color .2s}
.snav a i{font:400 12px "JetBrains Mono",monospace;font-style:normal;color:#9aa0aa}
.snav a:hover{color:var(--ink)}
.snav a.on{color:var(--ink);font-weight:700}
.snav a.on i{color:var(--ver)}
.side-f{margin-top:auto;font-size:14px;color:var(--mute)}
.side-f a{display:flex;align-items:center;gap:8px;text-decoration:none;font:600 17px "JetBrains Mono",monospace;color:var(--indigo)}
.burger{display:none;background:none;border:0;cursor:pointer;color:var(--ink)}.burger .ic{width:28px;height:28px}

main{margin-left:var(--side)}
.sec,.hero{padding:120px 8vw 100px 7vw;border-bottom:1px solid var(--hair)}
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:80px}
.vt{position:absolute;right:3vw;top:80px;writing-mode:vertical-rl;font:500 13px "JetBrains Mono",monospace;letter-spacing:.4em;color:#9aa0aa}
h1{font:900 clamp(56px,7.4vw,118px)/1.02 "Zen Kaku Gothic New",sans-serif;letter-spacing:-.03em;color:var(--indigo)}
h1 em{font-style:normal;color:var(--ver)}
.lead{max-width:560px;color:var(--mute);font-size:18.5px;margin:34px 0 44px}
.hero-n{display:flex;gap:64px;flex-wrap:wrap}
.hero-n b{display:block;font:600 34px/1 "JetBrains Mono",monospace;color:var(--ink)}
.hero-n span{font-size:13.5px;color:var(--mute)}
.rig{width:100%;max-width:900px;height:auto;margin-top:60px}
.rig .ground{stroke:var(--ink);stroke-width:1.5}
.rig .tr{fill:var(--ink)}
.rig .crg{fill:#fff;stroke:var(--indigo);stroke-width:1.5}
.rig .strap{stroke:var(--ver);stroke-width:2}
.rig .pk{fill:var(--indigo)}
.rig .pkw{fill:#dfe5f4}
.rig .pkb{fill:none;stroke:var(--indigo);stroke-width:4}
.rig .wh circle{fill:#fff;stroke:var(--ink);stroke-width:6}
.rig .speed{stroke:var(--ver);stroke-width:3;stroke-linecap:round;stroke-dasharray:110 220;animation:sp 1.6s linear infinite}
.rig-in{animation:bob 1.6s ease-in-out infinite}
@keyframes sp{to{stroke-dashoffset:-330}}
@keyframes bob{50%{transform:translateY(1.5px)}}

.sh{display:grid;grid-template-columns:70px 1fr;gap:0 20px;margin-bottom:56px;max-width:860px}
.sh i{font:400 14px "JetBrains Mono",monospace;font-style:normal;color:var(--ver);padding-top:14px}
.sh h2{font:700 clamp(32px,3.6vw,52px)/1.15 "Zen Kaku Gothic New",sans-serif;letter-spacing:-.02em;color:var(--indigo)}
.sh p{grid-column:2;color:var(--mute);margin-top:14px;max-width:620px}

.btn{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;text-decoration:none;font:700 15px "Zen Kaku Gothic New",sans-serif;padding:16px 26px;border:0;cursor:pointer;transition:background .2s}
.btn:hover{background:var(--ver)}

/* calculator */
.calc{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hair);max-width:1060px}
.c-in{padding:40px;display:grid;gap:26px;border-right:1px solid var(--hair)}
.c-in label{display:block;font-size:14px;color:var(--mute)}
.c-in input[type=number]{display:block;width:100%;margin-top:6px;border:0;border-bottom:1px solid var(--ink);padding:6px 0;font:600 28px "JetBrains Mono",monospace;color:var(--ink);background:transparent;border-radius:0}
.c-in input:focus{outline:0;border-color:var(--ver)}
.seg{display:grid;grid-template-columns:1fr 1fr;margin-top:8px;border:1px solid var(--ink)}
.seg button{background:#fff;border:0;padding:12px;font:700 15px "Zen Kaku Gothic New",sans-serif;cursor:pointer;color:var(--ink)}
.seg button.on{background:var(--ink);color:#fff}
.chk{display:flex!important;align-items:center;gap:10px;color:var(--ink)!important}
.chk input{width:18px;height:18px;accent-color:var(--ver)}
.c-out{padding:40px;background:var(--wash);display:flex;flex-direction:column}
.c-out>span{font-size:14px;color:var(--mute)}
.c-out>b{font:600 clamp(48px,5vw,72px)/1.1 "JetBrains Mono",monospace;color:var(--indigo);letter-spacing:-.04em}
.c-out dl{margin:20px 0 26px;border-top:1px solid var(--hair)}
.c-out dl div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--hair);font-size:15px}
.c-out dt{color:var(--mute)}
.c-out dd{font:600 15px "JetBrains Mono",monospace}
.warn{color:var(--ver);font-size:14.5px;margin:-10px 0 20px}
.c-out .btn{align-self:flex-start;margin-top:auto}

/* compare */
.cmp{display:grid;grid-template-columns:1fr 1fr;max-width:1060px;border-top:1px solid var(--ink)}
.col{padding:36px 40px 10px 0}
.col+.col{padding-left:40px;border-left:1px solid var(--hair)}
.col .ic{width:64px;height:64px;color:var(--indigo);margin-bottom:22px}
.col h3{font:700 28px "Zen Kaku Gothic New",sans-serif;color:var(--indigo)}
.col p{color:var(--mute);margin:8px 0 22px}
.col ul{list-style:none}
.col li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--hair);font-size:15px}
.col li span{color:var(--mute)}

.uses{list-style:none;counter-reset:u;max-width:1060px}
.uses li{counter-increment:u;display:grid;grid-template-columns:70px 280px 1fr;gap:20px;padding:26px 0;border-top:1px solid var(--hair);align-items:baseline;transition:padding .25s}
.uses li:last-child{border-bottom:1px solid var(--hair)}
.uses li::before{content:counter(u,decimal-leading-zero);font:400 14px "JetBrains Mono",monospace;color:var(--ver)}
.uses li:hover{padding-left:14px}
.uses b{font:700 22px "Zen Kaku Gothic New",sans-serif;color:var(--indigo)}
.uses span{color:var(--mute)}

.usmap{width:100%;max-width:1060px;height:auto}
.usmap .d{fill:#c9ccd3}
.usmap .ring{fill:rgba(232,69,44,.06);stroke:var(--ver);stroke-width:1.2;stroke-dasharray:4 5}
.usmap .base{fill:var(--indigo)}
.usmap .lbl{font:700 22px "Zen Kaku Gothic New",sans-serif;fill:var(--ink)}

.how{display:grid;grid-template-columns:repeat(4,1fr);max-width:1060px;border-top:1px solid var(--ink)}
.how div{padding:26px 22px 0 0}
.how i{display:block;font:600 14px "JetBrains Mono",monospace;font-style:normal;color:var(--ver);margin-bottom:12px}
.how b{display:block;font-size:19px;color:var(--indigo);margin-bottom:6px}
.how span{color:var(--mute);font-size:15px}

.ct{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;max-width:1060px}
.big a{display:block;font:600 clamp(24px,2.6vw,38px)/1.4 "JetBrains Mono",monospace;color:var(--indigo);text-decoration:none;letter-spacing:-.03em;word-break:break-word}
.big a:hover{color:var(--ver)}
.cf{display:grid;gap:18px}
.cf label{font-size:14px;color:var(--mute)}
.cf input{display:block;width:100%;border:0;border-bottom:1px solid var(--ink);padding:8px 0;font:inherit;font-size:17px;color:var(--ink);background:transparent;border-radius:0}
.cf input:focus{outline:0;border-color:var(--ver)}
.cf .btn{justify-self:start;margin-top:8px}
.msg{font-weight:700}.msg.ok{color:#1f7a47}.msg.err{color:var(--ver)}
.ftr{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:100px;padding-top:24px;border-top:1px solid var(--hair);font-size:13px;color:var(--mute);max-width:1060px}

.rv{opacity:0;transform:translateY(12px);transition:opacity .7s,transform .7s}.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

@media (max-width:1100px){
  :root{--side:0px}
  .side{position:sticky;top:0;inset:auto;width:auto;height:auto;flex-direction:row;align-items:center;justify-content:space-between;padding:16px 5vw;border-right:0;border-bottom:1px solid var(--hair)}
  .snav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;margin:0;padding:10px 5vw 20px;border-bottom:1px solid var(--hair)}
  .snav.open{display:flex}
  .side-f{display:none}
  .burger{display:block}
  main{margin-left:0}
  .vt{display:none}
}
@media (max-width:760px){
  .sec,.hero{padding:80px 6vw}
  .hero{min-height:auto}
  .calc,.cmp,.ct{grid-template-columns:1fr}
  .c-in{border-right:0;border-bottom:1px solid var(--hair);padding:26px}
  .c-out{padding:26px}
  .col,.col+.col{padding:28px 0 0;border-left:0}
  .uses li{grid-template-columns:44px 1fr}
  .uses span{grid-column:2}
  .how{grid-template-columns:1fr 1fr;gap:20px}
  .sh{grid-template-columns:44px 1fr}
  .hero-n{gap:32px}
}

/* photography: always darkened */
.hero{color:#fff;border-bottom:0;background:linear-gradient(100deg,rgba(14,18,32,.95) 0%,rgba(22,28,52,.84) 50%,rgba(22,28,52,.6) 100%),url(https://images.unsplash.com/photo-1718380236109-2fd5d2a040c1?w=2000&q=70&auto=format&fit=crop) center/cover no-repeat,var(--ink)}
.hero h1{color:#fff}
.hero .lead{color:#c9cdd8}
.hero .vt{color:#8d93a3}
.hero .hero-n b{color:#fff}
.hero .hero-n span{color:#aab0bf}
.hero .rig .ground{stroke:rgba(255,255,255,.5)}
.hero .rig .tr{fill:#e9ecf3}
.hero .rig .crg{fill:rgba(255,255,255,.12);stroke:#e9ecf3}
.hero .rig .pk{fill:#fff}
.hero .rig .pkw{fill:#23356b}
.hero .rig .pkb{stroke:#fff}
.hero .rig .wh circle{fill:#161c30;stroke:#e9ecf3}
.cimg{display:block;width:100%;height:220px;object-fit:cover;margin-bottom:26px;filter:brightness(.62) saturate(.75) contrast(1.05)}
.quiet{padding:180px 8vw 160px 7vw;color:#fff;background:linear-gradient(90deg,rgba(14,18,32,.95) 20%,rgba(14,18,32,.55)),url(https://images.unsplash.com/photo-1516199423456-1f1e91b06f25?w=2000&q=70&auto=format&fit=crop) center/cover no-repeat,var(--ink)}
.q-k{font:400 13px "JetBrains Mono",monospace;letter-spacing:.3em;text-transform:uppercase;color:var(--ver)}
.q-t{font:700 clamp(36px,4.6vw,68px)/1.12 "Zen Kaku Gothic New",sans-serif;letter-spacing:-.02em;margin:22px 0}
.q-s{max-width:520px;color:#c9cdd8}
@media (max-width:900px){.quiet{padding:110px 6vw}}

/* ==== THEME ==== */
.thm{display:inline-flex;align-items:center;gap:8px;margin-top:28px;align-self:flex-start;padding:9px 14px;border:1px solid var(--hair);background:transparent;color:var(--ink);font:500 13px "JetBrains Mono",monospace;letter-spacing:.06em;cursor:pointer}
.thm:hover{border-color:var(--ver);color:var(--ver)}
.thm .ic{width:17px;height:17px}
html[data-theme="dark"]{--ink:#eceef3;--indigo:#b3c0f0;--mute:#9aa1ae;--hair:#262a33;--paper:#0c0e13;--wash:#12151c}
html[data-theme="dark"] .side,html[data-theme="dark"] .seg button{background:#0c0e13}
html[data-theme="dark"] .snav a i{color:#6d7480}
html[data-theme="dark"] .btn{background:#eceef3;color:#0c0e13}
html[data-theme="dark"] .btn:hover{background:var(--ver);color:#fff}
html[data-theme="dark"] .seg button.on{background:#eceef3;color:#0c0e13}
html[data-theme="dark"] .usmap .d{fill:#2a2f3a}
html[data-theme="dark"] .usmap .ring{fill:rgba(232,69,44,.1)}
html[data-theme="dark"] .msg.ok{color:#5fd68a}
@media (max-width:1100px){.thm{margin:0 14px 0 auto;align-self:center}html[data-theme="dark"] .snav{background:#0c0e13}}
@media (max-width:560px){.thm span{display:none}}