:root{
  --lacquer:#17120F;--lacquer-2:#211A15;--lacquer-3:#2C231C;
  --gold:#C9A063;--gold-2:#E2C891;--gold-dim:#6E5838;
  --paper:#F4EEE3;--paper-2:#ECE3D4;--paper-3:#E3D8C5;
  --ink:#1E1915;--ink-2:#55493F;--ink-3:#6E6155;--line:#D8CCB8;
  --kaki:#8E5532;--on-dark:#F3EADB;--on-dark-2:#BFB19B;--on-dark-3:#9C8F7B;
  --serif:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --latin:"Cormorant Garamond","Shippori Mincho B1",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic UI",system-ui,sans-serif;
  --mono:ui-monospace,"BIZ UDGothic","MS Gothic","Osaka-Mono",monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --crest-gap:var(--lacquer);
  color-scheme:light;
}
/* each tool: --a accent on paper, --ad accent on lacquer, --tb its own background */
.t-shiro{--a:#2E5E9E;--a2:#2E5E9E;--ad:#8FB0E0;--ad2:#8FB0E0;--tb:#E9EDF3}
.t-hirameki{--a:#8A5A00;--a2:#D9A43B;--ad:#E2B04A;--ad2:#C98F2A;--tb:#F3ECDC}
.t-koyomi{--a:#4A5FA8;--a2:#4A5FA8;--ad:#8A9EE0;--ad2:#8A9EE0;--tb:#E7EBF2}
.t-tsudoi{--a:#5B4BA0;--a2:#B88A2E;--ad:#A99BE6;--ad2:#E2B857;--tb:#ECE8F3}
.t-kiku{--a:#2A736B;--a2:#C27C4A;--ad:#74BDB3;--ad2:#E0A273;--tb:#E5EEEA}
.t-fumi{--a:#8E3B5A;--a2:#8E3B5A;--ad:#D79AB2;--ad2:#D79AB2;--tb:#F1E6E8}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.9 var(--sans);-webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1;font-variant-numeric:lining-nums;word-break:auto-phrase;line-break:strict}
a{color:inherit}
h1,h2,h3,h4,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 40px}
.sp{display:none}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gold);color:var(--lacquer);padding:8px 14px;border-radius:8px;text-decoration:none}
.skip:focus{top:12px}

/* ---------------- header / dock ---------------- */
.bar{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.bar.solid{background:rgb(23 18 15 / .86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgb(201 160 99 / .18)}
.bar-in{max-width:1200px;margin:0 auto;padding:12px 40px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--on-dark);font:600 22px/1 var(--latin);letter-spacing:.14em}
.brand-mark{width:32px;height:32px;color:var(--gold);--crest-gap:var(--lacquer);flex-shrink:0}
.dock{display:flex;gap:6px}
.dock-i{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--on-dark-2);--a:var(--ad);--a2:var(--ad2);transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.dock-i svg{width:26px;height:26px}
.dock-i:hover,.dock-i:focus-visible{background:rgb(255 255 255 / .08);color:var(--on-dark);transform:translateY(-1px)}
.dock-i .tip{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,-4px);background:var(--paper);color:var(--ink);font:500 12px/1 var(--sans);padding:6px 9px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.dock-i:hover .tip,.dock-i:focus-visible .tip{opacity:1;transform:translate(-50%,0)}

/* ---------------- hero ---------------- */
.hero{position:relative;background:var(--lacquer);color:var(--on-dark);padding:132px 0 72px;overflow:hidden;isolation:isolate}
.hero-weave{position:absolute;inset:0;z-index:-1;opacity:.55;
  background:
    repeating-linear-gradient(45deg,rgb(201 160 99 / .07) 0 22px,transparent 22px 26px),
    repeating-linear-gradient(-45deg,rgb(201 160 99 / .05) 0 22px,transparent 22px 26px);
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 78% 30%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse 70% 80% at 78% 30%,#000 0%,transparent 70%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgb(201 160 99 / .4),transparent)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center}
.eyebrow{font:italic 500 17px/1 var(--latin);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:26px}
.hero h1{font:600 clamp(32px,4.5vw,64px)/1.36 var(--serif);letter-spacing:.04em;color:var(--on-dark);word-break:keep-all}
.hero h1 ruby rt{font:500 .2em/1 var(--sans);letter-spacing:.3em;color:var(--gold)}
.lead{margin-top:28px;font-size:16px;line-height:2.1;color:var(--on-dark-2);max-width:36em}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.badges li{font-size:13px;color:var(--gold-2);border:1px solid rgb(201 160 99 / .35);border-radius:999px;padding:5px 14px;line-height:1.5}
.hero-crest{display:flex;flex-direction:column;align-items:center;gap:18px}
.crest{width:min(400px,100%);height:auto;overflow:visible}
.crest .ring{fill:none;stroke:var(--gold);stroke-dasharray:180;stroke-dashoffset:180;animation:ring 1.6s .1s var(--ease) forwards}
.crest .ring-o{stroke-width:2.6}
.crest .ring-i{stroke-width:.9;animation-delay:.35s}
.crest .band{fill:var(--gold);stroke:var(--lacquer);stroke-width:2.2}
.crest .ba{animation:inA 1.2s var(--ease) backwards}
.crest .bb{animation:inB 1.2s var(--ease) backwards}
.crest [data-band="1"]{animation-delay:.25s}.crest [data-band="4"]{animation-delay:.4s}
.crest [data-band="2"]{animation-delay:.55s}.crest [data-band="5"]{animation-delay:.7s}
.crest [data-band="3"]{animation-delay:.85s}.crest [data-band="6"]{animation-delay:1s}
.crest .over{opacity:0;animation:fade .5s 1.5s var(--ease) forwards}
.crest .over rect{fill:var(--gold)}
.crest .over path{fill:none;stroke:var(--lacquer);stroke-width:2.2}
.crest[data-hl] .band,.crest[data-hl] .over rect{fill:var(--gold-dim)}
.crest[data-hl="1"] [data-band="1"]{fill:#8FB0E0}
.crest[data-hl="2"] [data-band="2"]{fill:#E2B04A}
.crest[data-hl="3"] [data-band="3"]{fill:#8A9EE0}
.crest[data-hl="4"] [data-band="4"]{fill:#A99BE6}
.crest[data-hl="5"] [data-band="5"]{fill:#74BDB3}
.crest[data-hl="6"] [data-band="6"]{fill:#D79AB2}
.crest-cap{font:italic 500 16px/1.4 var(--latin);letter-spacing:.06em;color:var(--on-dark-3);min-height:1.4em;text-align:center}
@keyframes ring{to{stroke-dashoffset:0}}
@keyframes inA{from{transform:translateX(-64px);opacity:0}to{transform:none;opacity:1}}
@keyframes inB{from{transform:translateY(-64px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{to{opacity:1}}

/* quick launcher */
.launch{margin-top:64px}
.launch-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-bottom:18px}
.launch-head h2{font:600 20px/1.4 var(--serif);letter-spacing:.12em;color:var(--on-dark)}
.launch-head p{font-size:13px;color:var(--on-dark-3)}
kbd{display:inline-block;min-width:22px;padding:1px 6px;border:1px solid rgb(201 160 99 / .4);border-bottom-width:2px;border-radius:5px;font:500 12px/1.5 var(--sans);color:var(--gold-2);text-align:center;margin:0 2px}
.launch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(156px,1fr));gap:12px}
.tile{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"no . o" "m m m" "n n n" "c c c";gap:0;padding:16px 18px 18px;border-radius:16px;background:rgb(255 255 255 / .035);border:1px solid rgb(201 160 99 / .2);text-decoration:none;color:var(--on-dark);--a:var(--ad);--a2:var(--ad2);overflow:hidden;transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}
.tile::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ad);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.tile:hover,.tile:focus-visible{transform:translateY(-4px);border-color:color-mix(in srgb,var(--ad) 60%,transparent);background:rgb(255 255 255 / .06)}
.tile:hover::before,.tile:focus-visible::before{transform:none}
.tile .no{grid-area:no;font:500 15px/1 var(--latin);letter-spacing:.1em;color:var(--gold)}
.tile-o{grid-area:o;width:18px;height:18px;fill:none;stroke:var(--on-dark-3);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.tile:hover .tile-o{stroke:var(--ad)}
.tile-m{grid-area:m;width:44px;height:44px;margin:18px 0 14px;color:var(--on-dark)}
.tile-n{grid-area:n;font:600 26px/1.1 var(--latin);letter-spacing:.04em}
.tile-c{grid-area:c;font-size:12px;color:var(--on-dark-2);margin-top:4px}

/* ---------------- sections ---------------- */
.kicker{font:500 13px/1 var(--sans);letter-spacing:.2em;color:var(--kaki);margin-bottom:16px}
.sec-title{font:600 clamp(28px,3.4vw,44px)/1.45 var(--serif);letter-spacing:.04em}
.sec-lead{margin-top:14px;color:var(--ink-2)}

.principles{padding:120px 0 110px}
.p-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:56px;border-top:1px solid var(--line)}
.p-item{padding:30px 28px 8px 0}
.p-item+.p-item{padding-left:28px;border-left:1px solid var(--line)}
.p-no{display:block;font:600 30px/1 var(--serif);color:var(--kaki);margin-bottom:18px}
.p-item h3{font:600 18px/1.6 var(--serif);margin-bottom:10px}
.p-item p{font-size:14px;line-height:1.95;color:var(--ink-2)}

/* tool chapters */
.tool{padding:120px 0;border-top:1px solid var(--line)}
.tool.alt{background:var(--paper-2)}
.tool-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:center}
.tool.alt .tool-copy{order:2}
.tool-no{display:flex;align-items:baseline;gap:14px;font-size:14px;letter-spacing:.14em;color:var(--ink-3)}
.tool-no span{font:500 48px/1 var(--latin);letter-spacing:0;color:var(--a)}
.tool-name{display:flex;align-items:center;gap:16px;margin-top:18px;font:600 clamp(48px,5.4vw,72px)/1 var(--latin);letter-spacing:.02em;color:var(--ink)}
.tool-name svg{width:52px;height:52px;flex-shrink:0;color:var(--ink)}
.tool-name small{font:600 20px/1 var(--serif);color:var(--a);margin-left:4px;align-self:flex-end;margin-bottom:10px}
.tool-tag{margin-top:26px;font:600 clamp(20px,2.1vw,26px)/1.6 var(--serif);letter-spacing:.03em}
.tool-desc{margin-top:14px;color:var(--ink-2);line-height:2}
.feats{margin-top:22px;display:grid;gap:10px}
.feats li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.7}
.feats svg{width:20px;height:20px;flex-shrink:0;margin-top:2px;fill:none;stroke:var(--a);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cta{display:inline-flex;align-items:center;gap:10px;margin-top:34px;padding:15px 26px;border-radius:999px;background:var(--a);color:#fff;text-decoration:none;font:500 15px/1 var(--sans);letter-spacing:.04em;box-shadow:0 10px 24px -12px var(--a);transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s}
.cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cta:hover,.cta:focus-visible{transform:translateY(-2px);box-shadow:0 14px 28px -12px var(--a);filter:brightness(1.08)}
.url{margin-top:12px;font:400 13px/1 var(--mono);color:var(--ink-3);letter-spacing:.02em}

/* tool visual frame */
.tool-vis{background:var(--tb);border-radius:28px;padding:34px;position:relative}
.tool-vis::before{content:"";position:absolute;inset:14px;border-radius:20px;border:1px dashed color-mix(in srgb,var(--a) 22%,transparent);pointer-events:none}
.win{position:relative;background:#fff;border-radius:14px;box-shadow:0 1px 0 rgb(0 0 0 / .04),0 24px 48px -24px rgb(40 30 20 / .35);overflow:hidden;color:#1E1E22;font-size:13px;line-height:1.6}
.win-bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-bottom:1px solid #ECE8E2;background:#FAF8F5}
.win-bar i{width:9px;height:9px;border-radius:50%;background:#E2DCD3}
.win-bar span{margin-left:10px;font:400 11px/1 var(--mono);color:#8A8178}

/* Shiro */
.v-shiro{position:relative;height:300px;background:#fff radial-gradient(#D5DAE2 1.1px,transparent 1.1px) 0 0/20px 20px}
.vs-tools{position:absolute;left:12px;top:14px;display:flex;flex-direction:column;gap:6px;padding:6px;background:#fff;border:1px solid #D9DEE6;border-radius:10px;box-shadow:0 6px 16px rgb(0 0 0 / .06);z-index:2}
.vs-tools b{width:20px;height:20px;border-radius:5px;background:#EEF1F5}
.vs-tools b.on{background:#E6EDF7;box-shadow:inset 0 0 0 2px #2E5E9E}
.vs-draw{position:absolute;inset:0;width:100%;height:100%}
.vs-draw .d{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:640;stroke-dashoffset:640}
.d1{stroke:#2E5E9E;stroke-width:4}.d2{stroke:#C24B3A;stroke-width:3}.d3{stroke:#1C2330;stroke-width:3}.d4{stroke:#2F7D4F;stroke-width:3}
.in .d{animation:draw 1.6s var(--ease) forwards}
.in .d2{animation-delay:.5s}.in .d3{animation-delay:.9s}.in .d4{animation-delay:1.2s}
@keyframes draw{to{stroke-dashoffset:0}}
.vs-note{position:absolute;right:26px;top:26px;width:118px;padding:10px 12px;background:#FCEFC9;color:#2A2416;border-radius:6px;font-size:12px;line-height:1.55;box-shadow:0 3px 8px rgb(0 0 0 / .1);transform:rotate(2deg)}
.vs-cur{position:absolute;left:0;top:0;z-index:3}
.vs-cur svg{width:16px;height:16px;display:block;stroke:#fff;stroke-width:1.2}
.vs-cur b{position:absolute;left:13px;top:13px;font:500 10px/1 var(--sans);color:#fff;padding:3px 7px;border-radius:999px;white-space:nowrap}
.c1 svg{fill:#C24B3A}.c1 b{background:#C24B3A}
.c2 svg{fill:#2F7D4F}.c2 b{background:#2F7D4F}
.c1{animation:cur1 7s ease-in-out infinite}
.c2{animation:cur2 8s ease-in-out infinite}
@keyframes cur1{0%,100%{transform:translate(250px,190px)}35%{transform:translate(320px,150px)}70%{transform:translate(200px,230px)}}
@keyframes cur2{0%,100%{transform:translate(110px,80px)}40%{transform:translate(180px,110px)}75%{transform:translate(90px,190px)}}

/* Hirameki */
.v-hira{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:16px;background:#F6F2E7;min-height:300px}
.lane{background:#fff;border:1px solid #E3D9C1;border-radius:10px;padding:10px}
.lane h4{font:500 12px/1.4 var(--sans);color:#5C523D;margin:0 0 8px}
.n{border-radius:6px;padding:8px 9px;margin:0 0 7px;font-size:12px;line-height:1.5;color:#2A2416;border:1px solid rgb(42 36 22 / .08)}
.n em{display:block;font-style:normal;color:#8A5A00;letter-spacing:.2em;font-size:8px;line-height:1.4;margin-top:5px}
.n-y{background:#FCEFC9}.n-l{background:#E3EDCF}.n-a{background:#F6DCCB}.n-s{background:#DCE8F2}.n-k{background:#F5DDE6}
.pop{opacity:0;transform:translateY(8px) scale(.96)}
.in .pop{animation:pop .6s 1s var(--ease) forwards}
@keyframes pop{to{opacity:1;transform:none}}

/* Koyomi */
.v-koyo{padding:18px 18px 20px;background:#fff;min-height:300px}
.v-koyo table{width:100%;border-collapse:collapse;font-size:12.5px}
.v-koyo th,.v-koyo td{padding:9px 6px;text-align:center;border-bottom:1px solid #E3E7EE;white-space:nowrap}
.v-koyo thead th{font-weight:500;color:#5D6575;font-size:12px}
.v-koyo tbody th{text-align:left;font-weight:500;color:#232838}
.v-koyo .o{color:#4A5FA8;font-weight:700}.v-koyo .t{color:#A5711C;font-weight:700}.v-koyo .x{color:#A8434F;font-weight:700}
.v-koyo .best{background:#E8ECF8}
.v-koyo .best th{box-shadow:inset 3px 0 0 #4A5FA8}
.vk-fix{display:inline-block;margin-top:16px;padding:7px 14px;border-radius:999px;background:#4A5FA8;color:#fff;font-size:12px;opacity:0;transform:translateY(6px)}
.in .vk-fix{animation:pop .5s 1s var(--ease) forwards}

/* Tsudoi */
.v-tsu{padding:22px 22px 20px;background:#F1EFF6;min-height:300px}
.vt-q{font:600 16px/1.5 var(--serif);color:#26233A;margin-bottom:16px}
.vt-row{display:grid;grid-template-columns:110px 1fr 46px;align-items:center;gap:10px;background:#fff;border:1px solid #DDD8EA;border-radius:10px;padding:10px 12px;margin-bottom:8px}
.vt-row span{font-size:12.5px;color:#26233A}
.vt-row b{font:600 13px/1 var(--sans);color:#5B4BA0;text-align:right}
.vt-row .vbar{display:block;height:8px;border-radius:999px;background:#D7D1EC;width:0;transition:width 1.2s var(--ease)}
.vt-row.win1{border-color:#B88A2E;box-shadow:0 0 0 1px #B88A2E}
.vt-row.win1 .vbar{background:#5B4BA0}
.in .b1{width:100%}.in .b2{width:56%;transition-delay:.15s}.in .b3{width:33%;transition-delay:.3s}
.vt-meta{font-size:11.5px;color:#6A6580;margin-top:12px}

/* Kiku */
.v-kiku{padding:16px;background:#EEF3F1;min-height:300px;display:grid;gap:8px}
.vq{background:#fff;border:1px solid #D5E2DD;border-radius:10px;padding:10px 12px}
.vq>p{font-size:12.5px;font-weight:500;color:#1E2B28;margin-bottom:6px}
.vq>p span{display:inline-block;font:600 11px/1 var(--sans);color:#2A736B;background:#E1EEEA;border-radius:4px;padding:3px 5px;margin-right:6px}
.stars{display:flex;gap:4px;align-items:center}
.stars i{width:18px;height:18px;background:#D5E2DD;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.stars i.on{background:#C27C4A}
.stars em{font-style:normal;font-size:11.5px;color:#4A5A55;margin-left:8px}
.vbars{display:grid;gap:5px}
.vbars div{display:grid;grid-template-columns:64px 1fr 34px;gap:8px;align-items:center;font-size:11.5px;color:#33423E}
.vbars i{display:block;height:7px;border-radius:999px;background:#2A736B;width:0;transition:width 1.1s var(--ease)}
.vbars b{font-weight:500;text-align:right}
.in .w1{width:82%}.in .w2{width:64%;transition-delay:.15s}.in .w3{width:41%;transition-delay:.3s}
.vfree{font-size:12px;color:#4A5A55;background:#F4F8F6;border-radius:6px;padding:6px 8px}

/* Fumi */
.v-fumi{padding:16px;background:#F5F0F1;min-height:300px;display:grid;gap:10px}
.vf-text{background:#fff;border:1px solid #E2D7DB;border-radius:10px;padding:10px 12px;font-size:12.5px;color:#221A1E;line-height:1.75}
.vf-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.vf-tiles div{background:#fff;border:1px solid #E2D7DB;border-radius:8px;padding:6px 9px}
.vf-tiles .key{border-color:#D7AFC0}
.vf-tiles small{display:block;font-size:10.5px;color:#6E6167}
.vf-tiles b{font:600 20px/1.2 var(--latin);color:#221A1E}
.vf-tiles .key b{color:#8E3B5A}
.vf-tiles em{font:400 11px var(--sans);font-style:normal;color:#6E6167;margin-left:2px}
.vf-wrap{margin:0;background:#fff;border:1px solid #E2D7DB;border-radius:10px;padding:10px 12px;font:13px/1.7 var(--mono);color:#221A1E;white-space:pre;overflow:hidden}

/* ---------------- flow ---------------- */
.flow{padding:120px 0;border-top:1px solid var(--line);background:var(--paper)}
.flow-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:52px;counter-reset:f;position:relative}
.flow-list::before{content:"";position:absolute;left:4%;right:4%;top:41px;height:1px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px)}
.flow-list li{counter-increment:f;position:relative}
.flow-list a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;text-decoration:none;padding:0 4px 8px;border-radius:14px}
.flow-list svg{width:56px;height:56px;padding:6px;border-radius:50%;background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px var(--line),0 0 0 8px var(--paper);transition:transform .25s var(--ease),box-shadow .25s var(--ease);margin-bottom:10px}
.flow-list a:hover svg,.flow-list a:focus-visible svg{transform:translateY(-3px);box-shadow:0 0 0 2px var(--a),0 0 0 8px var(--paper)}
.flow-list b{font:600 16px/1.5 var(--serif)}
.flow-list span{font:500 18px/1 var(--latin);color:var(--a);letter-spacing:.04em}
.flow-list b::before{content:counter(f) ". ";font:500 15px var(--latin);color:var(--ink-3)}

/* ---------------- closing ---------------- */
.close{background:var(--lacquer);color:var(--on-dark);padding:120px 0}
.close-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center}
.close-mark{width:64px;height:64px;color:var(--gold);--crest-gap:var(--lacquer);margin-bottom:26px}
.close h2{font:600 clamp(30px,3.4vw,44px)/1.5 var(--serif);letter-spacing:.04em}
.close-grid>div>p{margin-top:18px;color:var(--on-dark-2);line-height:2}
.index{border-top:1px solid rgb(201 160 99 / .25)}
.index li{border-bottom:1px solid rgb(201 160 99 / .25)}
.index a{display:grid;grid-template-columns:28px 34px 120px 1fr auto;align-items:center;gap:14px;padding:16px 10px;text-decoration:none;color:var(--on-dark);--a:var(--ad);--a2:var(--ad2);border-radius:10px;transition:background .2s var(--ease),padding .25s var(--ease)}
.index a:hover,.index a:focus-visible{background:rgb(255 255 255 / .05);padding-left:16px}
.ix-no{font:500 16px/1 var(--latin);color:var(--gold)}
.index svg{width:30px;height:30px}
.index b{font:600 24px/1 var(--latin);letter-spacing:.04em}
.ix-c{font-size:13px;color:var(--on-dark-2)}
.ix-u{font:400 12px/1 var(--mono);color:var(--on-dark-3)}
.index a:hover .ix-u{color:var(--ad)}

.foot{background:#100C0A;color:var(--on-dark-3);font-size:12px;padding:26px 0}
.foot-in{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.brand.small{font-size:17px;color:var(--on-dark-2)}
.brand.small .brand-mark{width:24px;height:24px;--crest-gap:#100C0A}

/* Cormorant defaults to old-style figures ("01" reads as "OI"); the font shorthand resets this, so set it last */
.tool-no span,.tile .no,.ix-no,.flow-list b::before,.vf-tiles b,.tile-n,.tool-name,.index b,.eyebrow{font-variant-numeric:lining-nums}

/* reveal on scroll (only when JS runs) */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .p-item.reveal:nth-child(2),.js .flow-list li:nth-child(2){transition-delay:.08s}
.js .p-item.reveal:nth-child(3),.js .flow-list li:nth-child(3){transition-delay:.16s}
.js .p-item.reveal:nth-child(4),.js .flow-list li:nth-child(4){transition-delay:.24s}
.js .flow-list li:nth-child(5){transition-delay:.32s}
.js .flow-list li:nth-child(6){transition-delay:.4s}
.js .tool-vis.reveal{transition-delay:.12s}

/* ---------------- responsive ---------------- */
@media (max-width:1080px){
  .launch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tool-grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .tool.alt .tool-copy{order:0}
  .p-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-item:nth-child(3){padding-left:0;border-left:0}
  .flow-list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:36px}
  .flow-list::before{display:none}
  .close-grid{grid-template-columns:minmax(0,1fr);gap:44px}
}
@media (max-width:760px){
  html{scroll-padding-top:64px}
  .wrap{padding:0 20px}
  .sp{display:inline}.pc{display:none}
  .bar-in{padding:10px 16px}
  .brand{font-size:19px;gap:8px}
  .brand-mark{width:28px;height:28px}
  .dock{gap:0}
  .dock-i{width:34px;height:34px}
  .dock-i svg{width:23px;height:23px}
  .dock-i .tip{display:none}
  .hero{padding:96px 0 48px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .hero-crest{display:none}
  .eyebrow{font-size:14px;margin-bottom:18px}
  .lead{font-size:15px;margin-top:20px}
  .badges{margin-top:22px}
  .badges li{font-size:12px;padding:4px 11px}
  .launch{margin-top:40px}
  .launch-head p{display:none}
  .launch-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile{grid-template-columns:auto 1fr;grid-template-areas:"m n" "c c";column-gap:10px;padding:13px 14px;align-items:center}
  .tile .no,.tile-o{display:none}
  .tile-m{width:32px;height:32px;margin:0}
  .tile-n{font-size:21px;white-space:nowrap}
  .tile-c{margin-top:6px;font-size:11px;white-space:nowrap}
  .principles,.tool,.flow,.close{padding:80px 0}
  .p-grid{grid-template-columns:minmax(0,1fr);margin-top:36px}
  .p-item,.p-item+.p-item{padding:24px 0 18px;border-left:0;border-bottom:1px solid var(--line)}
  .tool-no span{font-size:38px}
  .tool-name svg{width:42px;height:42px}
  .tool-vis{padding:18px;border-radius:20px}
  .tool-vis::before{inset:8px;border-radius:14px}
  .v-shiro{height:240px}
  .v-hira{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v-hira .lane:nth-child(3){display:none}
  .v-koyo{padding:12px;overflow-x:auto}
  .v-koyo th,.v-koyo td{padding:8px 4px}
  .vt-row{grid-template-columns:92px 1fr 40px}
  .vf-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .index a{grid-template-columns:22px 30px 1fr;row-gap:2px;padding:14px 6px}
  .index b{font-size:21px}
  .ix-c{grid-column:3}
  .ix-u{display:none}
  .index a{grid-template-areas:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .c1,.c2{animation:none}
  .c1{transform:translate(250px,190px)}.c2{transform:translate(110px,80px)}
}