:root {
  --bg: #fbf6fb;
  --bg-2: #f4ecf7;
  --surface: rgba(255, 255, 255, .72);
  --surface-solid: #ffffff;
  --border: rgba(120, 80, 140, .14);
  --text: #2a1f33;
  --muted: #7a6b85;
  --accent: #c0306f;
  --accent-2: #7048d8;
  --accent-soft: #fde4ef;
  --ring: rgba(192, 48, 111, .35);
  --shadow: 0 1px 2px rgba(60, 20, 80, .05), 0 8px 24px -12px rgba(90, 40, 120, .18);
  --shadow-hi: 0 2px 4px rgba(60, 20, 80, .06), 0 18px 40px -14px rgba(200, 60, 130, .35);
  --blob-1: #ffd1e4;
  --blob-2: #e3d8ff;
  --blob-3: #d6f1ff;
  --radius: 18px;
  --emoji: ui-sans-serif, -apple-system, "Hiragino Sans", "Segoe UI", "Segoe UI Symbol", "Meiryo", Roboto, "Noto Sans", "Noto Sans JP", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #14111c; --bg-2: #1a1624; --surface: rgba(34, 28, 46, .72); --surface-solid: #221c2e;
  --border: rgba(220, 190, 255, .12); --text: #f3ecf8; --muted: #a99bb8;
  --accent: #ff7eb3; --accent-2: #a993ff; --accent-soft: rgba(255, 126, 179, .14); --ring: rgba(255, 126, 179, .4);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-hi: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 40px -14px rgba(255, 90, 160, .35);
  --blob-1: rgba(255, 100, 170, .22); --blob-2: rgba(140, 110, 255, .22); --blob-3: rgba(80, 180, 255, .14);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; font: 16px/1.6 var(--sans); color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 28px; } }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface-solid); padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.ic { font-family: var(--emoji); white-space: nowrap; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 40; backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid var(--border); }
.top-in { display: flex; align-items: center; gap: 16px; height: 62px; }
.logo { display: inline-flex; align-items: center; gap: 9px; font: 600 19px/1 var(--serif); color: var(--text); letter-spacing: -.01em; }
.logo:hover { text-decoration: none; }
.logo em { font-style: italic; color: var(--accent); }
.logo-mark { width: 30px; height: auto; flex: none; filter: drop-shadow(0 3px 6px rgba(90, 60, 30, .18)); }
.nav { margin-left: auto; display: flex; gap: 4px; }
.nav a { white-space: nowrap; color: var(--muted); font-size: 14.5px; font-weight: 500; padding: 7px 12px; border-radius: 999px; }
.nav a:hover, .nav a[aria-current] { color: var(--text); background: var(--accent-soft); text-decoration: none; }
.lang { position: relative; flex: none; }
.lang summary { list-style: none; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 11px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-size: 13px; font-weight: 600; }
.lang summary::-webkit-details-marker { display: none; }
.lang svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 170px; padding: 6px; border-radius: 14px; background: var(--surface-solid); border: 1px solid var(--border); box-shadow: var(--shadow-hi); z-index: 60; }
.lang-menu a { display: block; padding: 8px 12px; border-radius: 9px; color: var(--text); font-size: 14.5px; }
.lang-menu a:hover { background: var(--accent-soft); text-decoration: none; }
.lang-menu a[aria-current] { color: var(--accent); font-weight: 600; }
.theme { flex: none; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-size: 16px; }
.theme .moon { display: none; }
:root[data-theme="dark"] .theme .sun { display: none; }
:root[data-theme="dark"] .theme .moon { display: inline; }
@media (max-width: 1000px) { .nav { display: none; } .lang { margin-left: auto; } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 44px 0 0; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: -40% -10% auto; height: 520px; z-index: -1; filter: blur(60px);
  background: radial-gradient(40% 50% at 20% 40%, var(--blob-1), transparent 70%), radial-gradient(35% 45% at 75% 30%, var(--blob-2), transparent 70%), radial-gradient(30% 40% at 55% 75%, var(--blob-3), transparent 70%); }
.hero-bg span { position: absolute; z-index: -1; font-family: var(--emoji); color: var(--accent); opacity: .22; font-size: 28px; animation: float 9s ease-in-out infinite; }
.hero-bg span:nth-child(1) { left: 7%; top: 22%; }
.hero-bg span:nth-child(2) { left: 88%; top: 18%; animation-delay: -2s; font-size: 34px; }
.hero-bg span:nth-child(3) { left: 16%; top: 70%; animation-delay: -4s; color: var(--accent-2); }
.hero-bg span:nth-child(4) { left: 80%; top: 64%; animation-delay: -1s; color: var(--accent-2); }
.hero-bg span:nth-child(5) { left: 52%; top: 8%; animation-delay: -6s; font-size: 22px; }
.hero-bg span:nth-child(6) { left: 64%; top: 82%; animation-delay: -3s; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(8deg); } }
@media (max-width: 640px) { .hero-bg span:nth-child(n+5) { display: none; } }
.hero-in { text-align: center; }
.hero h1 { font: 650 clamp(38px, 7vw, 68px)/1.04 var(--serif); letter-spacing: -.025em; margin: 6px 0 14px; text-wrap: balance; }
.h1-deco { font-family: var(--emoji); font-size: .62em; font-weight: 400; color: var(--accent); white-space: nowrap; vertical-align: .1em; }
.sub { max-width: 640px; margin: 0 auto 24px; color: var(--muted); font-size: clamp(16px, 2.2vw, 18px); text-wrap: pretty; }
.sub strong { color: var(--text); }
.hero-sm { padding-bottom: 12px; }
.crumbs { font-size: 13.5px; color: var(--muted); display: flex; gap: 8px; justify-content: center; }
.crumbs a { color: var(--muted); }

.search { position: relative; max-width: 620px; margin: 0 auto; }
.search svg { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.search input { width: 100%; height: 56px; padding: 0 56px 0 50px; font: inherit; font-size: 16px; color: var(--text); background: var(--surface-solid); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow); outline: none; transition: box-shadow .2s, border-color .2s; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--muted); opacity: .85; }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring), var(--shadow); }
.search kbd { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font: 12px var(--sans); color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; }
@media (hover: none) { .search kbd { display: none; } }

.chips { margin-top: 26px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface-solid) 40%, transparent); }
.chips-in { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px; max-width: 1180px; margin: 0 auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.chips-in::-webkit-scrollbar { display: none; }
.chip { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--text); background: var(--surface-solid); border: 1px solid var(--border); white-space: nowrap; transition: transform .15s, border-color .15s; }
.chip span { font-family: var(--emoji); color: var(--accent); }
.chip:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); }
.chip.on { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-color: transparent; }
.chip.on span { color: #fff; }

/* ---------- content ---------- */
.page { padding-top: 28px; padding-bottom: 60px; }
.block { margin: 0 0 40px; }
.block-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.block h2, .results h2, .recent h2, .faq h2, .related h2 { font: 600 clamp(22px, 3vw, 28px)/1.2 var(--serif); letter-spacing: -.015em; margin: 0; }
.block h2 a { color: var(--text); }
.h-ico { font-family: var(--emoji); font-size: .75em; color: var(--accent); font-weight: 400; }
.more { flex: none; font-size: 14.5px; font-weight: 600; }
.count { flex: none; font-size: 13px; color: var(--muted); background: var(--accent-soft); padding: 2px 10px; border-radius: 999px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.grid.single { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 480px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .grid.single { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.wide { grid-template-columns: 1fr; } }

.tile { position: relative; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s, border-color .18s; content-visibility: auto; contain-intrinsic-size: auto 104px; }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-hi); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.t-copy { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 104px; padding: 18px 12px 14px; text-align: center; border-radius: var(--radius); -webkit-tap-highlight-color: transparent; }
.t-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.t-e { font-family: var(--emoji); font-size: 22px; line-height: 1.35; color: var(--text); word-break: break-word; overflow-wrap: anywhere; }
.single .t-e { font-size: 30px; }
.wide .t-e { font-size: 19px; }
.t-l { font-size: 12px; color: var(--muted); line-height: 1.3; text-transform: lowercase; }
.t-add { position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-solid); color: var(--muted); font: 600 16px/1 var(--sans); cursor: pointer; opacity: 0; transition: opacity .15s, color .15s, border-color .15s; }
.tile:hover .t-add, .t-add:focus-visible { opacity: 1; }
.t-add:hover { color: var(--accent); border-color: var(--accent); }
@media (hover: none) { .t-add { opacity: .75; } }
.tile.copied { border-color: var(--accent); background: var(--accent-soft); }
.tile.copied .t-l::before { content: var(--copied, "copied ✓ "); color: var(--accent); font-weight: 600; }
.tile.copied .t-l { font-size: 0; }
.tile.copied .t-l::before { font-size: 12px; }
.tile.pop { animation: pop .35s ease; }
@keyframes pop { 40% { transform: scale(.96); } 100% { transform: scale(1); } }
.t-cat { display: block; font-size: 11px; color: var(--accent); opacity: .8; }

.results, .recent { margin-top: 28px; }
.results h2, .recent h2 { margin-bottom: 14px; }
.recent h2 { font-size: 18px; color: var(--muted); font-family: var(--sans); font-weight: 600; }
.recent .grid { display: flex; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 8px; }
.recent .grid::-webkit-scrollbar { display: none; }
.recent .tile { flex: none; min-width: 96px; max-width: 220px; }
.recent .tile .t-copy { min-height: 64px; padding: 10px 26px 10px 14px; }
.recent .t-e { font-size: 18px; white-space: nowrap; }
.recent .t-l { display: none; }
.empty { color: var(--muted); }
body.searching #content, body.searching .intro, body.searching .toc, body.searching .howto, body.searching .prose, body.searching .faq, body.searching .related, body.searching .recent { display: none; }

.intro { max-width: 820px; margin: 0 auto 26px; font-size: 17px; color: var(--text); text-align: center; }
.intro p { margin: 0 0 10px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 32px; }
.toc a { font-size: 14px; color: var(--muted); border: 1px dashed var(--border); padding: 5px 13px; border-radius: 999px; }
.toc a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

.howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 4px 0 40px; }
.howto > div { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.howto .mascot { flex: none; width: 56px; height: auto; }
.howto p { margin: 0; font-size: 14.5px; color: var(--muted); }
.howto strong { color: var(--text); }
@media (max-width: 760px) { .howto { grid-template-columns: 1fr; } }
.plus { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--border); font-weight: 700; font-size: 13px; color: var(--accent); background: var(--surface-solid); vertical-align: 1px; }

.prose { max-width: 760px; margin: 24px auto 48px; font-size: 17px; }
.prose h2 { font: 600 clamp(24px, 3vw, 30px)/1.25 var(--serif); letter-spacing: -.015em; margin: 40px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: color-mix(in srgb, var(--text) 86%, var(--muted)); }
.prose li { margin-bottom: 6px; }
.prose ol, .prose ul { padding-left: 22px; }
.note { text-align: center; color: var(--muted); }

.faq { max-width: 820px; margin: 0 auto 48px; }
.faq h2 { text-align: center; margin-bottom: 18px; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 10px; padding: 0 18px; transition: border-color .15s; }
.faq details[open] { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 28px 16px 0; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--accent); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq p { margin: 0 0 16px; color: var(--muted); }

.related h2 { margin-bottom: 16px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.card { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--text); transition: transform .18s, box-shadow .18s, border-color .18s; }
.card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-hi); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.card-i { font-family: var(--emoji); font-size: 26px; color: var(--accent); }
.card-t { font: 600 18px/1.25 var(--serif); }
.card-n { font-size: 13.5px; color: var(--muted); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--border); background: var(--bg-2); padding: 44px 0 110px; font-size: 14.5px; }
.foot-in { display: grid; grid-template-columns: minmax(220px, 1fr) 3.2fr; gap: 40px; }
.foot-brand p { color: var(--muted); max-width: 320px; }
.foot-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.foot-cols h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 10px; }
.foot-cols a { display: block; color: var(--text); padding: 4px 0; line-height: 1.4; }
.foot-cols a:hover { color: var(--accent); }
.foot-base { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center; }
.foot-base .linkish { display: inline; color: var(--muted); padding: 0; }
@media (max-width: 1100px) { .foot-in { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 760px) { .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; } }

/* ---------- builder + toast ---------- */
.builder { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); pointer-events: none; }
.builder-in { pointer-events: auto; max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-radius: 20px; background: var(--surface-solid); border: 1px solid var(--border); box-shadow: 0 20px 50px -14px rgba(80, 30, 110, .45); animation: up .25s ease; }
@keyframes up { from { transform: translateY(20px); opacity: 0; } }
.b-lbl { flex: none; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
#b-text { flex: 1; min-width: 0; height: 42px; border: 0; background: transparent; color: var(--text); font: 20px var(--emoji); outline: none; }
.btn { flex: none; height: 42px; padding: 0 18px; border-radius: 14px; border: 0; cursor: pointer; font: 600 15px var(--sans); color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.btn.ghost { background: transparent; color: var(--muted); padding: 0 12px; }
.btn.ghost:hover { color: var(--text); }
@media (max-width: 480px) { .b-lbl { display: none; } }

.toast { position: fixed; left: 50%; bottom: 96px; z-index: 60; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 11px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; color: #fff; background: #2a1f33; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .4); transition: opacity .2s, transform .2s; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; font-family: var(--emoji); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
:root[data-theme="dark"] .toast { background: #f3ecf8; color: #2a1f33; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }
.search input:not(:placeholder-shown) ~ kbd { display: none; }
.search input::-webkit-search-cancel-button { cursor: pointer; }
.foot-base a { color: var(--muted); }

/* ---------- blog ---------- */
.post-card { gap: 8px; }
.post-cover { display: grid; place-items: center; height: 120px; margin: -4px -4px 6px; border-radius: 14px; font: 28px/1.2 var(--emoji); color: var(--accent); background: linear-gradient(135deg, var(--blob-1), var(--blob-2)); text-align: center; padding: 0 12px; overflow: hidden; }
.post-cover.big { height: auto; padding: 18px 22px; margin: 14px auto 6px; display: inline-block; font-size: 34px; }
.post-card .card-n { color: var(--muted); font-size: 14px; line-height: 1.45; }
.post-meta { font-size: 13px; color: var(--muted); margin: 0; }
.post-hero h1 { font-size: clamp(32px, 5.4vw, 52px); max-width: 860px; margin-left: auto; margin-right: auto; }
.post-hero .sub { margin-bottom: 10px; }
.post { max-width: 900px; }
.post-toc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); font-size: 14px; }
.post-toc strong { margin-right: 4px; }
.post-toc a { color: var(--muted); border: 1px dashed var(--border); padding: 3px 11px; border-radius: 999px; }
.post-toc a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.post-body { max-width: none; }
.post-body h2 { scroll-margin-top: 80px; }
.post-body h3 { font: 600 20px/1.3 var(--serif); margin: 28px 0 10px; }
.post-body .grid { margin: 16px 0 24px; }
.post-body .tip { padding: 14px 18px; border-radius: 14px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.post-body table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 12px 0 24px; }
.post-body th, .post-body td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.post-body th { color: var(--muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.related .block-h { margin-bottom: 16px; }

/* ---------- updated date ---------- */
.updated { margin: 14px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- mobile menu ---------- */
.menu-btn { display: none; flex: none; width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.menu-btn span { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .2s, opacity .2s; }
.top.open .menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.top.open .menu-btn span:nth-child(2) { opacity: 0; }
.top.open .menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1000px) {
  .menu-btn { display: flex; margin-left: auto; }
  .lang { margin-left: 0 !important; }
  .top-in { position: relative; gap: 8px; }
  .top.open .nav { display: flex; flex-direction: column; gap: 2px; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 10px 16px 16px; background: var(--surface-solid); border-bottom: 1px solid var(--border); box-shadow: 0 18px 30px -18px rgba(60, 20, 80, .35); }
  .top.open .nav a { font-size: 16px; padding: 12px 14px; border-radius: 12px; color: var(--text); }
}

/* ---------- scroll progress ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; pointer-events: none; }
.progress span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

/* ---------- back to top ---------- */
.to-top { position: fixed; right: 16px; bottom: 20px; z-index: 45; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-solid); color: var(--accent); font: 600 20px/1 var(--sans); cursor: pointer; box-shadow: var(--shadow-hi); transition: transform .15s; }
.to-top:hover { transform: translateY(-2px); }
.to-top[hidden] { display: none; }
body:has(.builder:not([hidden])) .to-top { bottom: 92px; }

/* ---------- cookie banner ---------- */
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80; max-width: 560px; margin: 0 auto; padding: 16px 18px; border-radius: 18px; background: var(--surface-solid); border: 1px solid var(--border); box-shadow: 0 24px 60px -18px rgba(60, 20, 80, .45); font-size: 14.5px; }
.cookie[hidden] { display: none; }
.cookie p { margin: 0 0 12px; color: var(--text); }
.cookie-btns { display: flex; gap: 8px; justify-content: flex-end; }
.cookie .btn.ghost { border: 1px solid var(--border); }
.linkish { all: unset; display: block; padding: 3px 0; color: var(--text); cursor: pointer; }
.linkish:hover { text-decoration: underline; }
.linkish:focus-visible { outline: 2px solid var(--accent); }

/* ---------- print ---------- */
@media print {
  :root { --bg: #fff; --surface: #fff; --surface-solid: #fff; --text: #000; --muted: #444; --border: #bbb; --accent: #000; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .top, .progress, .chips, .search, .hero-bg, .hero::before, .builder, .toast, .to-top, .cookie, .t-add, .toc, .post-toc, .howto, .related, .foot-cols, .lang, .theme, .menu-btn, .skip, .recent, .results { display: none !important; }
  .hero { padding: 0; }
  .hero h1 { font-size: 24pt; }
  .tile { box-shadow: none !important; border: 1px solid #bbb; break-inside: avoid; transform: none !important; }
  .grid { gap: 6px; }
  .t-copy { min-height: 0; padding: 8px; }
  .faq details { border: 0; padding: 0; }
  .faq details > p { display: block; }
  .faq summary::after { display: none; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .foot { padding: 12px 0 0; background: none; border-top: 1px solid #bbb; }
  h2, h3 { break-after: avoid; }
}

/* ---------- mascot ---------- */
.mascot { display: inline-block; height: auto; user-select: none; }
.hero-mascot { display: block; margin: 0 auto -4px; width: clamp(96px, 22vw, 150px); filter: drop-shadow(0 10px 18px rgba(120, 70, 110, .14)); animation: bob 5s ease-in-out infinite; }
.post-hero .hero-mascot, .hero-sm .hero-mascot { width: clamp(96px, 20vw, 130px); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.post-cover { gap: 6px; flex-direction: column; height: 150px; font-size: 18px; }
.post-cover .mascot { width: 80px; }
.empty { display: flex; align-items: center; gap: 14px; }
.empty .mascot { width: 84px; flex: none; }
.cookie { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; align-items: start; }
.cookie .mascot { width: 56px; grid-row: span 2; }
.cookie-btns { grid-column: 2; }
@media (max-width: 420px) { .cookie { grid-template-columns: 1fr; } .cookie .mascot { display: none; } .cookie-btns { grid-column: 1; } }
@media print { .hero-mascot { animation: none; width: 80px; } .cookie .mascot { display: none; } }

/* ---------- ad spaces ---------- */
.ad { margin: 44px auto; padding: 14px 0 18px; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); min-height: 140px; text-align: center; }
.ad-label { display: block; margin-bottom: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media print { .ad { display: none !important; } }

/* ---------- category guide ---------- */
.guide { margin: 8px auto 36px; padding: 22px 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.guide h2 { margin-top: 0; }
.tips { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.tips li { position: relative; padding-left: 26px; margin: 0; }
.tips li::before { content: "✿"; position: absolute; left: 0; color: var(--accent); }