/* KATA UI — site chrome. Components use tokens.css (--k-*), not these. */
:root{
  --paper:#fdfdfd; --soft:#f7f7f7; --ink:#18181b; --ink2:#52525b; --ink3:#a1a1aa;
  --hair:#e4e4e7; --acc:#0e9594;
  --font:"Inter","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:14px}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,3.5vw,40px)}
header.top{position:sticky;top:0;z-index:50;background:rgba(253,253,253,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.top-in{display:flex;align-items:center;gap:12px;height:58px}
.logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;text-decoration:none}
.logo .cube{width:26px;height:26px;border-radius:7px;background:var(--ink);display:flex;align-items:center;justify-content:center}
.logo small{font-weight:500;color:var(--ink3);font-size:11px;border:1px solid var(--hair);border-radius:99px;padding:2px 8px}
.top nav{margin-left:22px;display:flex;gap:20px;font-size:13.5px;color:var(--ink2)}
.top nav a{text-decoration:none}
.top nav a:hover{color:var(--ink)}
.top .gh{margin-left:auto;font-size:13px;color:var(--ink2);text-decoration:none}
.hero{padding:64px 0 8px}
.hero .eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--ink2);border:1px solid var(--hair);border-radius:99px;padding:5px 12px;background:#fff}
.hero .eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--acc)}
.hero h1{margin-top:22px;font-size:clamp(34px,5vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.hero h1 .dim{color:var(--ink3)}
.hero p{margin-top:16px;color:var(--ink2);font-size:15.5px;line-height:1.8;max-width:56ch}
.hero .cta{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap}
.hero .stats{margin-top:40px;display:flex;gap:38px;flex-wrap:wrap}
.hero .stats b{display:block;font-size:24px;font-weight:600;letter-spacing:-.02em}
.hero .stats span{font-size:12px;color:var(--ink3)}
.catsec{margin-top:52px}
.catsec h2{font-size:13px;letter-spacing:.14em;color:var(--ink3);font-weight:600;text-transform:uppercase}
.cards{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{display:block;text-decoration:none;border:1px solid var(--hair);border-radius:14px;padding:20px;background:#fff;transition:box-shadow .15s,transform .15s}
.card:hover{box-shadow:0 12px 32px -14px rgba(16,24,40,.18);transform:translateY(-1px)}
.card h3{font-size:15.5px;font-weight:600;display:flex;align-items:center;gap:9px}
.card p{margin-top:8px;font-size:13px;color:var(--ink2);line-height:1.7}
.card .tags{margin-top:13px;display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:11px;color:var(--ink3);background:var(--soft);border-radius:99px;padding:3px 9px;font-family:var(--mono)}
.st{font-size:10.5px;font-weight:600;letter-spacing:.05em;border-radius:99px;padding:2.5px 8px;text-transform:uppercase}
.st-stable{background:rgba(14,149,148,.1);color:#0b7372}
.st-beta{background:rgba(245,158,11,.12);color:#b45309}
footer.site{margin-top:76px;border-top:1px solid var(--hair);padding:26px 0 42px;color:var(--ink3);font-size:12.5px;display:flex;gap:12px;flex-wrap:wrap}
/* detail layout */
.layout{display:grid;grid-template-columns:200px 1fr;gap:clamp(22px,3.5vw,48px);margin-top:34px;padding-bottom:70px}
.layout>*{min-width:0}
.side{position:sticky;top:84px;align-self:start;max-height:calc(100vh - 110px);overflow-y:auto;padding-right:4px;scrollbar-width:thin}
.side h4{font-size:11px;letter-spacing:.14em;color:var(--ink3);font-weight:600;margin:18px 0 8px;text-transform:uppercase}
.side h4:first-child{margin-top:0}
.side a{display:block;padding:6.5px 10px;border-radius:7px;color:var(--ink2);text-decoration:none;font-size:13.5px}
.side a:hover{background:var(--soft);color:var(--ink)}
.side a.on{background:var(--soft);color:var(--ink);font-weight:500}
.crumb{font-size:12.5px;color:var(--ink3)}
.crumb a{color:var(--ink2);text-decoration:none}
.detail h1{margin-top:10px;font-size:30px;font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.detail .desc{margin-top:10px;color:var(--ink2);font-size:14.5px;line-height:1.8;max-width:66ch}
.stagebar{margin-top:22px;display:flex;align-items:center;gap:8px}
.stagebar .lbl{font-size:11px;letter-spacing:.12em;color:var(--ink3);font-weight:600;text-transform:uppercase;margin-right:auto}
.seg{display:inline-flex;background:#ececee;border-radius:9px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;font:inherit;font-size:12px;font-weight:500;color:var(--ink2);padding:5px 11px;border-radius:7px;cursor:pointer}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(16,24,40,.14)}
.stage{margin-top:10px;border:1px solid var(--hair);border-radius:14px;padding:30px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;background:radial-gradient(circle,#00000010 1px,transparent 1px) 0 0/18px 18px,var(--soft);transition:max-width .25s}
.stage.narrow{max-width:420px}
.stage[data-theme="dark"]{background:radial-gradient(circle,#ffffff14 1px,transparent 1px) 0 0/18px 18px,#1c1c1f;border-color:#3f3f46}
.stage.col{flex-direction:column;align-items:stretch}
.deps{margin-top:12px;font-size:12.5px;color:var(--ink3)}
.deps a{color:var(--ink2)}
.codebox{margin-top:14px;background:#18181b;border-radius:14px;overflow:hidden}
.codetabs{display:flex;gap:2px;padding:8px 10px 0}
.codetabs button{border:0;background:transparent;color:#a1a1aa;font-family:var(--mono);font-size:12px;padding:7px 13px;border-radius:8px 8px 0 0;cursor:pointer}
.codetabs button.on{background:#27272a;color:#fff}
.codebox .pane{display:none}
.codebox .pane.on{display:block}
.codebox pre{padding:16px 18px;overflow-x:auto;color:#e4e4e7;font-family:var(--mono);font-size:12.3px;line-height:1.75;max-height:520px;overflow-y:auto}
.copyrow{display:flex;justify-content:flex-end;padding:0 10px 10px}
.copybtn{background:#ffffff12;color:#e4e4e7;border:0;border-radius:7px;font-family:var(--mono);font-size:11.5px;padding:6px 12px;cursor:pointer}
.copybtn:hover{background:#ffffff22}
.doc{margin-top:30px}
.doc h2{font-size:16px;font-weight:600;letter-spacing:-.01em}
.doc p{margin-top:8px;color:var(--ink2);font-size:14px;line-height:1.85;max-width:68ch}
.prevnext{margin-top:44px;display:flex;gap:12px}
.prevnext a{flex:1;border:1px solid var(--hair);border-radius:12px;padding:15px 18px;text-decoration:none}
.prevnext a:hover{background:var(--soft)}
.prevnext .dir{font-size:11px;color:var(--ink3);letter-spacing:.1em;text-transform:uppercase}
.prevnext .nm{margin-top:4px;font-weight:600;font-size:14.5px}
.prevnext a.next{text-align:right}

/* mobile (must stay last so it wins over base rules) */
html,body{overflow-x:clip}
@media(max-width:820px){
  .layout{grid-template-columns:1fr;gap:18px;margin-top:22px}
  .side{display:none}
  .top nav{display:none}
  .logo{white-space:nowrap}
  .top .gh{font-size:12.5px}
  .detail h1{font-size:25px}
  .stagebar{flex-wrap:wrap}
  .stage{padding:20px 16px}
  .codebox pre{font-size:11.5px}
  .hero{padding-top:42px}
  .prevnext{flex-direction:column}
}

/* mobile nav: header button + drawer (shadcn/Flux pattern) */
.menubtn{display:none}
@media(max-width:820px){
  .menubtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--hair);background:#fff;border-radius:8px;height:34px;padding:0 12px;font:inherit;font-size:13px;font-weight:550;color:var(--ink);cursor:pointer}
}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(284px,86vw);background:var(--paper);z-index:80;transform:translateX(-103%);transition:transform .19s cubic-bezier(.3,.7,.3,1);overflow-y:auto;padding:14px 12px 30px;box-shadow:0 0 60px rgba(9,9,11,.25)}
body.dopen .drawer{transform:none}
.drawer .side{display:block;position:static;max-height:none;overflow:visible;padding-right:0}
.drawer .dhead{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 10px;font-weight:600;font-size:14px;color:var(--ink)}
.drawer .dclose{border:1px solid var(--hair);background:#fff;border-radius:7px;width:30px;height:30px;cursor:pointer;font-size:13px;color:var(--ink)}
.scrim{position:fixed;inset:0;background:rgba(9,9,11,.42);z-index:79;opacity:0;pointer-events:none;transition:opacity .19s}
body.dopen .scrim{opacity:1;pointer-events:auto}
body.dopen{overflow:hidden}