:root { --sakura:#8e2130; --ink:#1a1a1a; --ink-2:#333; --muted-1:#555; --muted-3:#888; --bg:#f5f5f5; --surface:#fff; --surface-soft:#f9f5f9; --line:#1a1a1a24; --line-soft:#1a1a1a14;
  --font-display:Inter, system-ui, -apple-system, sans-serif; --font-body:"Noto Sans JP", Inter, system-ui, sans-serif; --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); }
body { font-family:var(--font-body); font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased; min-height:100dvh; position:relative; overflow-x:hidden; }
body::before { content:""; position:fixed; top:0; left:0; right:0; height:3px; background:var(--sakura); z-index:2; }
a { color:var(--muted-1); text-decoration:none; }
a:hover { color:var(--sakura); }
.page { position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:0 28px; min-height:100dvh; display:flex; flex-direction:column; }
.site-head { display:flex; justify-content:space-between; align-items:baseline; gap:18px; flex-wrap:wrap; padding:22px 0; border-bottom:1px solid var(--line-soft); font-family:var(--font-display); font-size:13px; }
.site-head .home { color:var(--ink); font-weight:600; }
.site-head nav { display:flex; gap:20px; white-space:nowrap; }
@media (max-width:480px) { .site-head { padding:18px 0; } .site-head nav { gap:14px; } .meta .dot { display:none; } .meta > span { margin-right:4px; } }
.site-foot { padding:18px 0 24px; border-top:1px solid var(--line-soft); font-size:12px; color:var(--muted-3); }
main { flex:1; }
h1 { font-family:var(--font-display); font-size:clamp(28px, 3.6vw, 40px); font-weight:600; letter-spacing:-0.02em; line-height:1.1; margin:0 0 10px; }
.k { font-family:var(--font-display); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-3); }
.box { border:1px solid var(--line); background:var(--surface); }
.box button, .box .btn { font:inherit; font-family:var(--font-display); font-size:12.5px; font-weight:500; color:var(--ink); background:transparent; border:0; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent; }
.box button:hover, .box .btn:hover { color:var(--sakura); background:var(--surface-soft); }
.box button:focus-visible { outline:2px solid var(--sakura); outline-offset:-2px; }
.box button.on { color:var(--sakura); }
.meta { color:var(--muted-1); font-size:14px; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; }
.meta .dot { color:var(--muted-3); }