/* TSUNAGI site v3 — shared design system (continues v2 palette) */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#05080e; --bg-surface:#0a0f1a;
  --bg-card:rgba(12,18,30,0.65); --bg-card-hl:rgba(14,22,38,0.75);
  --border:rgba(80,120,180,0.10); --border-hover:rgba(80,120,180,0.28);
  --border-accent:rgba(80,140,220,0.35);
  --text:#d0d6e2; --text-m:#7a8598; --text-d:#4c5668;
  --accent:#4ea1ff; --accent-l:#7ab8ff;
  --gold:#d9a441; --gold-l:#eec06a;
  --ok:#3ecf8e; --warn:#e8b339; --bad:#e25d5d;
  --white:#eceef3;
  --mono:'SF Mono','Cascadia Code','Fira Code','Consolas',monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter',Helvetica,Arial,sans-serif;
}
html { scroll-behavior:smooth; }
body { font-family:var(--sans); background:var(--bg); color:var(--text); line-height:1.7; overflow-x:hidden; }

/* Nav */
.ub { position:fixed; top:0; left:0; right:0; z-index:100; height:48px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; background:rgba(5,8,14,0.92); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
.ub-l { display:flex; align-items:center; gap:20px; }
.ub-brand { font-size:0.82rem; font-weight:700; letter-spacing:0.14em; color:var(--white); text-decoration:none; }
.ub-nav { display:flex; gap:6px; flex-wrap:wrap; }
.ub-nav a { font-size:0.75rem; font-weight:500; letter-spacing:0.03em; color:var(--text-m); text-decoration:none; padding:5px 12px; border-radius:4px; border:1px solid transparent; transition:all 0.2s; }
.ub-nav a:hover, .ub-nav a.active { color:var(--white); border-color:var(--border-accent); background:rgba(78,161,255,0.08); }

/* Layout */
.page { padding-top:48px; }
.hero { padding:80px 28px 48px; text-align:center; max-width:900px; margin:0 auto; }
.hero h1 { font-size:clamp(2.4rem, 6vw, 3.5rem); font-weight:800; color:var(--white); letter-spacing:0.04em; margin-bottom:14px; }
.hero .sub { font-family:var(--mono); font-size:0.9rem; color:var(--accent-l); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:22px; }
.hero .lead { font-size:1.05rem; color:var(--text-m); max-width:660px; margin:0 auto 36px; }
.hero .lead strong { color:var(--text); font-weight:600; }
.btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn { display:inline-block; padding:11px 22px; border-radius:6px; font-size:0.88rem; font-weight:600; letter-spacing:0.04em; text-decoration:none; transition:all 0.2s; border:1px solid transparent; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-l); transform:translateY(-1px); }
.btn-outline { color:var(--text); border-color:var(--border-hover); background:transparent; }
.btn-outline:hover { border-color:var(--accent); background:rgba(78,161,255,0.06); color:var(--white); }

.section { max-width:920px; margin:0 auto; padding:48px 28px; }
.section.wide { max-width:1140px; }
.section-label { font-family:var(--mono); font-size:0.62rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-d); margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.section h2 { font-size:1.6rem; font-weight:700; color:var(--white); letter-spacing:0.04em; margin-bottom:16px; }
.section h3 { font-size:1.05rem; font-weight:650; color:var(--white); margin:26px 0 10px; }
.section p { font-size:0.95rem; line-height:1.85; color:var(--text); margin-bottom:16px; }
.section p.muted { color:var(--text-m); }
.section ul, .section ol { padding-left:1.3rem; margin:12px 0 16px; }
.section li { color:var(--text-m); margin:6px 0; font-size:0.92rem; }
.section li strong { color:var(--text); }

code { font-family:var(--mono); background:var(--bg-surface); padding:2px 7px; border-radius:4px; font-size:0.86em; color:var(--accent-l); border:1px solid var(--border); }
pre { font-family:var(--mono); font-size:0.8rem; background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; padding:18px; overflow-x:auto; color:var(--text); margin:14px 0; line-height:1.6; }
pre code { background:none; border:none; padding:0; }

/* Cards / grids */
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin:20px 0; }
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:20px 22px; transition:border-color 0.2s; }
.card:hover { border-color:var(--border-hover); }
.card .lbl { font-family:var(--mono); font-size:0.58rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent-l); margin-bottom:8px; }
.card h3 { font-size:0.98rem; color:var(--white); margin:0 0 6px; font-weight:600; }
.card p { font-size:0.82rem; color:var(--text-m); line-height:1.65; margin:0; }

/* Stat tiles (dashboard) */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; margin:18px 0; }
.stat { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:16px 18px; }
.stat .k { font-family:var(--mono); font-size:0.58rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-d); margin-bottom:6px; }
.stat .v { font-family:var(--mono); font-size:1.15rem; color:var(--white); word-break:break-all; line-height:1.35; }
.stat .v.sm { font-size:0.8rem; color:var(--text); }
.stat .v .unit { font-size:0.7rem; color:var(--text-m); }
.stat.ok { border-color:rgba(62,207,142,0.35); }
.stat.unavail .v { color:var(--text-d); font-style:italic; font-size:0.85rem; }

.dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px; vertical-align:baseline; }
.dot.ok { background:var(--ok); box-shadow:0 0 8px rgba(62,207,142,0.6); }
.dot.warn { background:var(--warn); }
.dot.bad { background:var(--bad); }
.dot.off { background:var(--text-d); }

/* Tables */
.tbl { width:100%; border-collapse:collapse; font-size:0.82rem; margin:16px 0; }
.tbl th { font-family:var(--mono); font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-d); text-align:left; padding:8px 10px; border-bottom:1px solid var(--border-hover); white-space:nowrap; }
.tbl td { padding:9px 10px; border-bottom:1px solid var(--border); color:var(--text-m); vertical-align:top; }
.tbl td.mono, .mono { font-family:var(--mono); font-size:0.78rem; }
.tbl td .hash { color:var(--accent-l); }
.tbl tr:hover td { background:rgba(78,161,255,0.03); }
.tbl td.num { text-align:right; font-family:var(--mono); color:var(--text); }

/* Pipeline / diagrams */
.pipeline { font-family:var(--mono); font-size:0.9rem; background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; padding:22px; text-align:center; margin:20px 0 8px; letter-spacing:0.04em; color:var(--text); overflow-x:auto; }
.pipeline .arr { color:var(--accent); margin:0 10px; }
.diagram { font-family:var(--mono); font-size:0.74rem; line-height:1.5; background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; padding:20px; overflow-x:auto; color:var(--text-m); margin:16px 0; white-space:pre; }
.diagram b { color:var(--accent-l); font-weight:600; }
.diagram em { color:var(--gold-l); font-style:normal; }

/* Kintsugi story blocks */
.frontier { background:var(--bg-card); border:1px solid var(--border); border-left:3px solid var(--gold); border-radius:8px; padding:22px 26px; margin:18px 0; }
.frontier .f-id { font-family:var(--mono); font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-l); margin-bottom:6px; }
.frontier h3 { margin:0 0 12px; font-size:1.08rem; color:var(--white); }
.frontier dl { display:grid; grid-template-columns:max-content 1fr; gap:6px 18px; font-size:0.88rem; }
.frontier dt { font-family:var(--mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-d); padding-top:4px; }
.frontier dd { color:var(--text-m); line-height:1.7; }
.frontier dd strong { color:var(--text); }
.frontier .lesson { margin-top:12px; padding-top:12px; border-top:1px dashed var(--border-hover); font-size:0.9rem; color:var(--gold-l); }
.frontier .lesson::before { content:"金 "; opacity:0.8; }

.badge { display:inline-block; font-family:var(--mono); font-size:0.6rem; letter-spacing:0.08em; text-transform:uppercase; padding:2px 8px; border-radius:10px; border:1px solid var(--border-accent); color:var(--accent-l); }
.badge.gold { border-color:rgba(217,164,65,0.5); color:var(--gold-l); }
.badge.ok { border-color:rgba(62,207,142,0.45); color:var(--ok); }

.note { font-size:0.8rem; color:var(--text-d); border-left:2px solid var(--border-hover); padding:6px 14px; margin:14px 0; }

footer { border-top:1px solid var(--border); padding:40px 28px 60px; text-align:center; color:var(--text-d); font-size:0.82rem; }
footer .brand { color:var(--text); font-weight:600; }
footer a { color:var(--text-m); }

@media (max-width:768px) {
  .ub { padding:0 12px; }
  .ub-nav { gap:2px; }
  .ub-nav a { padding:5px 7px; font-size:0.68rem; }
  .ub-brand { font-size:0.72rem; }
  .hero { padding:56px 18px 40px; }
  .hero h1 { font-size:2rem; }
  .section { padding:36px 16px; }
  .frontier dl { grid-template-columns:1fr; gap:2px; }
  .tbl { font-size:0.72rem; }
  .tbl th, .tbl td { padding:6px 6px; }
}

/* ---- v3.1 polish: hero logo, proof banner, block cards, svg diagrams ---- */
.hero-logo { display:block; width:100%; max-width:360px; height:auto; margin:0 auto 18px; filter:drop-shadow(0 2px 24px rgba(78,161,255,0.18)); }
.hero h1.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Proof banner — the one number that matters, big */
.proof { display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; margin:6px auto 30px; }
.proof .big { font-family:var(--mono); font-size:clamp(3rem,11vw,5rem); font-weight:800; line-height:1; color:var(--white); text-shadow:0 0 30px rgba(78,161,255,0.25); }
.proof .big .unit { display:block; font-family:var(--sans); font-size:0.78rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent-l); margin-top:10px; }
.proof .pdiv { width:1px; align-self:stretch; background:var(--border-hover); }
.proof .sub2 { text-align:left; max-width:280px; }
.proof .sub2 .row { font-family:var(--mono); font-size:0.82rem; color:var(--text-m); margin:4px 0; }
.proof .sub2 .row b { color:var(--text); }
.proof .sub2 .dot { width:8px; height:8px; }

/* Block cards (mobile alternative to the wide table) */
.bcards { display:none; }
.bcard { background:var(--bg-card); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:8px; padding:14px 16px; margin:10px 0; }
.bcard .bc-top { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.bcard .bc-h { font-family:var(--mono); font-size:1.05rem; color:var(--white); font-weight:700; }
.bcard .bc-d { font-family:var(--mono); font-size:0.7rem; color:var(--text-d); }
.bcard .bc-hash { font-family:var(--mono); font-size:0.74rem; color:var(--accent-l); word-break:break-all; margin:8px 0 6px; }
.bcard .bc-meta { font-size:0.78rem; color:var(--text-m); }
.bcard .bc-meta b { color:var(--text); font-weight:600; }
.bcard a.explore { font-size:0.72rem; color:var(--accent-l); text-decoration:none; border:1px solid var(--border-accent); border-radius:4px; padding:2px 8px; display:inline-block; margin-top:8px; }
.bcard a.explore:hover { background:rgba(78,161,255,0.08); }
a.exlink { color:var(--accent-l); text-decoration:none; border-bottom:1px dotted var(--border-hover); }
a.exlink:hover { border-bottom-color:var(--accent); }

/* Responsive SVG diagrams replace ASCII */
.svgwrap { width:100%; margin:18px 0; background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; padding:18px; overflow:hidden; }
.svgwrap svg { width:100%; height:auto; display:block; }
.svgwrap .s-box { fill:var(--bg-card); stroke:var(--border-hover); }
.svgwrap .s-acc { fill:rgba(78,161,255,0.12); stroke:var(--border-accent); }
.svgwrap .s-gold { fill:rgba(217,164,65,0.12); stroke:rgba(217,164,65,0.5); }
.svgwrap .s-t { fill:var(--white); font-family:var(--sans); font-weight:600; }
.svgwrap .s-tm { fill:var(--text-m); font-family:var(--mono); }
.svgwrap .s-tacc { fill:var(--accent-l); font-family:var(--mono); font-weight:600; }
.svgwrap .s-arrow { stroke:var(--accent); stroke-width:1.5; fill:none; marker-end:url(#ah); }
.svgwrap .s-line { stroke:var(--border-hover); stroke-width:1; fill:none; }

@media (max-width:640px) {
  .tbl.collapsible { display:none; }
  .bcards.on { display:block; }
  .proof { gap:14px; }
  .proof .pdiv { display:none; }
  .proof .sub2 { text-align:center; max-width:none; }
}
.svgwrap.narrow svg { max-width:480px; margin:0 auto; }
.svgwrap .s-pill { fill:var(--bg-card); stroke:var(--border-accent); }
.svgwrap .s-pill-g { fill:rgba(217,164,65,0.10); stroke:rgba(217,164,65,0.45); }
.svgwrap .s-node { fill:rgba(78,161,255,0.08); stroke:var(--border-accent); }
.svgwrap .s-canon { fill:rgba(62,207,142,0.12); stroke:rgba(62,207,142,0.5); }
.svgwrap .s-lbl { fill:var(--white); font-family:var(--sans); font-weight:700; }
.svgwrap .s-sub { fill:var(--text-m); font-family:var(--mono); }
.svgwrap .s-cap { fill:var(--accent-l); font-family:var(--mono); font-weight:600; }
.svgwrap .s-gcap { fill:var(--gold-l); font-family:var(--mono); font-weight:600; }