/* ============ DITDAH design system — Gen-Z neon, dark-first ============ */
:root{
  --bg:#08080f; --bg-2:#0e0e1a; --bg-3:#141428;
  --glass:rgba(255,255,255,.055); --glass-brd:rgba(255,255,255,.12);
  --ink:#f4f2ff; --ink-dim:#b9b4d6; --ink-faint:#7d78a0;
  --purple:#a855f7; --pink:#ec4899; --cyan:#22d3ee; --lime:#a3e635;
  --grad:linear-gradient(120deg,var(--purple),var(--pink) 55%,var(--cyan));
  --r-lg:24px; --r-md:16px; --r-sm:12px;
  --font-d:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-b:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --shadow:0 18px 50px -18px rgba(168,85,247,.45);
}
[data-theme="light"]{
  --bg:#faf6ff; --bg-2:#f3ecff; --bg-3:#ffffff;
  --glass:rgba(255,255,255,.72); --glass-brd:rgba(120,80,220,.16);
  --ink:#241d3d; --ink-dim:#5b5480; --ink-faint:#8f89b3;
  --shadow:0 18px 45px -20px rgba(168,85,247,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:var(--font-b); background:var(--bg); color:var(--ink);
  min-height:100vh; line-height:1.65; overflow-x:clip;
  transition:background .35s ease,color .35s ease;
}
/* ambient gradient blobs */
.blob-wrap{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.blob{position:absolute;border-radius:50%;filter:blur(110px);opacity:.34;pointer-events:none;animation:drift 22s ease-in-out infinite alternate}
.blob.b1{width:520px;height:520px;background:var(--purple);top:-160px;left:-120px}
.blob.b2{width:460px;height:460px;background:var(--pink);bottom:-140px;right:-100px;animation-delay:-8s}
.blob.b3{width:380px;height:380px;background:var(--cyan);top:38%;left:55%;opacity:.2;animation-delay:-14s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,40px) scale(1.12)}}
[data-theme="light"] .blob{opacity:.22}

.wrap{max-width:1120px;margin:0 auto;padding:0 20px;position:relative;z-index:1}
::selection{background:var(--pink);color:#fff}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:50;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  background:color-mix(in srgb,var(--bg) 72%,transparent);border-bottom:1px solid var(--glass-brd)}
.nav{display:flex;align-items:center;gap:18px;height:66px}
.logo{font-family:var(--font-d);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-decoration:none}
.logo .dot{color:var(--cyan);-webkit-text-fill-color:var(--cyan)}
nav.links{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
nav.links::-webkit-scrollbar{display:none}
nav.links a{color:var(--ink-dim);text-decoration:none;font-weight:600;font-size:.92rem;padding:8px 13px;border-radius:999px;white-space:nowrap;transition:.2s}
nav.links a:hover,nav.links a.active{color:var(--ink);background:var(--glass)}
.theme-btn{margin-left:6px;border:1px solid var(--glass-brd);background:var(--glass);color:var(--ink);
  border-radius:999px;width:40px;height:40px;cursor:pointer;font-size:1.05rem;transition:.2s;flex:none}
.theme-btn:hover{transform:rotate(18deg) scale(1.06)}
.cta-nav{background:var(--grad);color:#fff!important;font-weight:700}

/* ---------- hero / tool ---------- */
.hero{padding:52px 0 8px;text-align:center}
.kicker{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);border:1px solid var(--glass-brd);background:var(--glass);
  padding:7px 16px;border-radius:999px;margin-bottom:18px}
h1{font-family:var(--font-d);font-size:clamp(2rem,5.4vw,3.4rem);line-height:1.08;letter-spacing:-.03em;font-weight:700}
h1 .grad,h2 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--ink-dim);max-width:640px;margin:14px auto 0;font-size:1.06rem}

.tool-card{margin:30px auto 0;background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r-lg);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow);padding:26px;position:relative;overflow:hidden}
.tool-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)}
.panels{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:820px){.panels{grid-template-columns:1fr 1fr}}
.panel label{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.86rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:8px}
.mode-badge{font-size:.72rem;background:var(--grad);color:#fff;padding:4px 12px;border-radius:999px;letter-spacing:.08em}
textarea{width:100%;min-height:150px;resize:vertical;background:rgba(0,0,0,.28);border:1px solid var(--glass-brd);
  border-radius:var(--r-md);color:var(--ink);font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:1.02rem;padding:14px 16px;line-height:1.7;transition:.2s}
[data-theme="light"] textarea{background:rgba(255,255,255,.8)}
textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(168,85,247,.28)}
textarea#out{background:rgba(168,85,247,.07)}
.hint{font-size:.82rem;color:var(--ink-faint);margin-top:8px;min-height:1.2em}
.hint.warn{color:#fbbf24}

/* in-input unsupported-character highlight (backdrop technique) */
.hl-wrap{position:relative;background:rgba(0,0,0,.28);border:1px solid var(--glass-brd);
  border-radius:var(--r-md);transition:border-color .2s,box-shadow .2s}
[data-theme="light"] .hl-wrap{background:rgba(255,255,255,.8)}
.hl-wrap:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px rgba(168,85,247,.28)}
.hl-back{position:absolute;top:0;left:0;right:0;bottom:0;padding:14px 16px;overflow:hidden;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:1.02rem;line-height:1.7;
  white-space:pre-wrap;overflow-wrap:break-word;color:transparent;pointer-events:none;display:none}
.hl-back mark{background:rgba(236,72,153,.55);color:transparent;border-radius:4px;outline:1px solid var(--pink)}
textarea.hl-front{position:relative;background:transparent!important;border-color:transparent!important;
  box-shadow:none!important;margin:0}
textarea.hl-front:focus{box-shadow:none!important}

/* prosign chips */
.prosigns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.prosign{border:1px solid var(--glass-brd);background:var(--glass);border-radius:12px;padding:8px 13px;
  cursor:pointer;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;color:var(--ink);transition:.2s}
.prosign:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:var(--shadow)}
.prosign b{color:var(--cyan);font-weight:700}

/* trust strip: no ads / private positioning */
.trust{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.trust span{font-size:.85rem;font-weight:700;color:var(--ink-dim);background:var(--glass);
  border:1px solid var(--glass-brd);padding:9px 17px;border-radius:999px}
.trust span i{font-style:normal;margin-right:7px}

/* transport bar */
.transport{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-top:18px;
  padding-top:18px;border-top:1px dashed var(--glass-brd)}
.btn{border:none;cursor:pointer;font-family:var(--font-d);font-weight:700;font-size:.95rem;
  padding:12px 22px;border-radius:999px;transition:transform .15s,box-shadow .2s,filter .2s;color:#fff;background:var(--grad)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.1);box-shadow:var(--shadow)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:var(--glass);border:1px solid var(--glass-brd);color:var(--ink);box-shadow:none}
.btn.ghost:hover{background:rgba(168,85,247,.16)}
.btn.small{padding:8px 16px;font-size:.84rem}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn .ic{margin-right:6px}

/* sliders */
.ctl{display:flex;align-items:center;gap:10px;background:var(--glass);border:1px solid var(--glass-brd);
  border-radius:999px;padding:8px 16px;font-size:.86rem;font-weight:600;color:var(--ink-dim)}
.ctl output{font-family:var(--font-d);color:var(--ink);min-width:64px;text-align:right}
input[type=range]{-webkit-appearance:none;appearance:none;width:130px;height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--purple),var(--pink));cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:#fff;border:3px solid var(--pink);box-shadow:0 2px 10px rgba(236,72,153,.6);cursor:grab}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--pink);cursor:grab}

/* output modes + lamp */
.modes{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.mode{border:1px solid var(--glass-brd);background:var(--glass);color:var(--ink-dim);border-radius:999px;
  padding:8px 16px;font-size:.85rem;font-weight:700;cursor:pointer;transition:.2s;font-family:var(--font-b)}
.mode.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:var(--shadow)}
.lamp-wrap{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px}
.lamp{width:46px;height:46px;border-radius:50%;background:#1c1c30;border:2px solid var(--glass-brd);transition:.05s}
[data-theme="light"] .lamp{background:#e8e2f7}
.lamp.lit{background:radial-gradient(circle at 35% 35%,#fff,var(--cyan) 45%,var(--purple));border-color:#fff;
  box-shadow:0 0 34px 8px rgba(34,211,238,.75)}
.lamp-label{font-size:.82rem;color:var(--ink-faint);font-weight:600}

/* share row */
.share-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}

/* ---------- content sections ---------- */
section.block{margin:54px 0}
.card{background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r-lg);padding:30px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
h2{font-family:var(--font-d);font-size:clamp(1.4rem,3.4vw,2rem);letter-spacing:-.02em;margin-bottom:14px}
h3{font-family:var(--font-d);font-size:1.15rem;margin:22px 0 8px}
p{color:var(--ink-dim);margin-bottom:12px}
.card p:last-child{margin-bottom:0}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-top:18px}
.tile{background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r-md);padding:20px;
  text-decoration:none;color:var(--ink);transition:.22s;display:block}
.tile:hover{transform:translateY(-4px);border-color:var(--purple);box-shadow:var(--shadow)}
.tile b{font-family:var(--font-d);display:block;margin-bottom:6px}
.tile span{color:var(--ink-dim);font-size:.9rem}

/* chart table */
table.chart{width:100%;border-collapse:collapse;margin-top:14px;font-size:.95rem}
table.chart th,table.chart td{padding:10px 12px;border-bottom:1px solid var(--glass-brd);text-align:left}
table.chart th{color:var(--ink-faint);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
table.chart td.m{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.15rem;color:var(--cyan);white-space:nowrap}
table.chart tr{transition:.15s}
table.chart tr:hover td{background:rgba(168,85,247,.08);cursor:pointer}
table.chart td.ch{font-family:var(--font-d);font-weight:700;font-size:1.1rem}

/* breadcrumb */
.crumb{font-size:.84rem;color:var(--ink-faint);margin:22px 0 6px}
.crumb a{color:var(--ink-dim);text-decoration:none}
.crumb a:hover{color:var(--cyan)}

/* faq */
.faq{margin-top:14px}
.faq details{background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r-md);
  margin-bottom:10px;overflow:hidden;transition:.2s}
.faq details[open]{border-color:var(--purple)}
.faq summary{cursor:pointer;padding:16px 20px;font-weight:700;font-family:var(--font-d);list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;flex:none}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 20px 18px;color:var(--ink-dim)}

/* content slot marker (visible lightly in dev, invisible-ish) */
.slot{border:1.5px dashed rgba(168,85,247,.4);border-radius:var(--r-md);padding:18px;margin:18px 0;
  background:rgba(168,85,247,.05);font-size:.9rem;color:var(--ink-dim)}
.slot b{color:var(--purple);font-family:var(--font-d)}

/* big display (phrase/letter pages) */
.display{text-align:center;padding:34px 10px}
.display .big{font-family:var(--font-d);font-size:clamp(3rem,12vw,6rem);font-weight:700;letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.display .code{font-family:ui-monospace,Menlo,monospace;font-size:clamp(1.6rem,6vw,2.6rem);color:var(--cyan);
  letter-spacing:.35em;margin:16px 0;word-break:break-all}
.display .word{font-size:1.1rem;color:var(--ink-dim)}

/* footer */
footer.site{margin-top:70px;border-top:1px solid var(--glass-brd);padding:40px 0 30px;position:relative;z-index:1}
.foot-grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.foot-grid h4{font-family:var(--font-d);font-size:.9rem;margin-bottom:12px;color:var(--ink)}
.foot-grid a{display:block;color:var(--ink-dim);text-decoration:none;font-size:.9rem;padding:4px 0}
.foot-grid a:hover{color:var(--cyan)}
.copyright{margin-top:28px;padding-top:18px;border-top:1px solid var(--glass-brd);
  color:var(--ink-faint);font-size:.82rem;text-align:center}

/* toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--grad);
  color:#fff;font-weight:700;padding:12px 26px;border-radius:999px;z-index:99;transition:.3s;box-shadow:var(--shadow);
  font-size:.92rem;opacity:0}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* 404 */
.nf{text-align:center;padding:90px 0}
.nf .big{font-family:var(--font-d);font-size:clamp(4rem,16vw,8rem);background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}

/* reveal animation */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.blob{animation:none}*{scroll-behavior:auto}}

/* print (printable chart page) */
@media print{
  header.site,footer.site,.blob,.toast,.no-print,.transport,.share-row{display:none!important}
  body{background:#fff;color:#111}
  .card,.tool-card{background:#fff;border:1px solid #ccc;box-shadow:none}
  table.chart td.m{color:#111}
}
@media(max-width:560px){
  .tool-card{padding:18px}
  .ctl{width:100%;justify-content:space-between}
  input[type=range]{flex:1}
}

/* ---- F2: live counters ---- */
.count{font-size:.72rem;font-weight:600;color:var(--ink-faint);letter-spacing:.04em;text-transform:none}

/* ---- F3: karaoke per-letter highlight ---- */
.karaoke-wrap{position:relative}
.karaoke{position:absolute;inset:0;overflow:auto;pointer-events:none;opacity:0;transition:opacity .25s;
  white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word;color:var(--ink);z-index:2}
.karaoke.show{opacity:1}
.karaoke .kch{border-radius:6px;padding:0 2px;transition:background .08s,box-shadow .08s,color .08s}
.karaoke .kch.active{background:rgba(168,85,247,.38);box-shadow:0 0 14px rgba(168,85,247,.85);color:#fff}
[data-theme="light"] .karaoke .kch.active{color:#1a1030}
textarea.karaoke-on{color:transparent!important;caret-color:transparent}

/* ---- F5/F4/F9: transport extras ---- */
.transport2{margin-top:10px;border-top:none;padding-top:0}
select#timbre{background:var(--glass);border:1px solid var(--glass-brd);color:var(--ink);border-radius:10px;
  padding:8px 10px;font:inherit;font-size:.85rem;font-weight:600;min-height:44px;cursor:pointer}
select#timbre option{background:#1c1c30;color:#fff}
.btn.tgl.on{background:linear-gradient(90deg,var(--purple),var(--pink));color:#fff;border-color:transparent}

/* ---- F8: waveform visualizer ---- */
.wave-wrap{margin-top:12px}
#wave{width:100%;height:64px;display:none;border-radius:12px;background:rgba(0,0,0,.25);
  border:1px solid var(--glass-brd)}
[data-theme="light"] #wave{background:rgba(255,255,255,.6)}

/* ---- F6: tap-key ---- */
.tap-panel{margin-top:14px;text-align:center}
.tapkey{width:100%;min-height:96px;border-radius:18px;border:2px solid var(--pink);
  background:linear-gradient(180deg,rgba(236,72,153,.16),rgba(168,85,247,.16));color:var(--ink);
  font-family:var(--font-d);font-size:1.35rem;font-weight:700;letter-spacing:.12em;cursor:pointer;
  touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .05s,box-shadow .1s}
.tapkey.down{background:linear-gradient(180deg,var(--pink),var(--purple));color:#fff;
  box-shadow:0 0 26px rgba(236,72,153,.7);transform:scale(.99)}
.tap-read{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.35rem;color:var(--cyan);
  min-height:2.1rem;margin-top:8px;letter-spacing:.25em;overflow-wrap:break-word}

/* ---- mobile: tool UI must never overflow at 360px; touch targets >=44px ---- */
@media(max-width:560px){
  .transport .btn,.transport2 .btn{min-height:44px}
  .btn.small{min-height:44px;padding:10px 16px}
  .mode{min-height:44px}
  .prosign{min-height:44px;padding:10px 14px}
  select#timbre{width:100%}
  .transport2 .ctl{width:100%;justify-content:space-between}
  #wave{height:56px}
  .karaoke{font-size:.92rem}
  .tapkey{min-height:110px;font-size:1.5rem}
  .panels .panel{min-width:0}
  .tool-card{overflow-wrap:break-word}
  img,canvas,textarea,select{max-width:100%}
}

/* ============ v2: global nav, header search, related, blog/all-pages (additive) ============ */
/* header search */
.search-box{position:relative;margin-left:12px;flex:none}
.search-wrap{position:relative;display:flex;align-items:center}
.search-box input{height:40px;width:190px;border:1px solid var(--glass-brd);background:rgba(0,0,0,.28);
  color:var(--ink);border-radius:999px;padding:0 14px 0 38px;font-size:.9rem;font-family:var(--font-b);
  transition:width .25s,border-color .2s,box-shadow .2s}
.search-box input::placeholder{color:var(--ink-faint)}
.search-box input:focus{width:250px;border-color:var(--cyan);outline:none;box-shadow:0 0 0 3px rgba(34,211,238,.18)}
.search-ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ink-faint);
  pointer-events:none;font-size:.95rem;z-index:1}
.search-results{position:absolute;top:calc(100% + 10px);right:0;width:min(380px,calc(100vw - 40px));
  background:var(--bg-3);border:1px solid var(--glass-brd);border-radius:var(--r-md);
  box-shadow:0 24px 60px -12px rgba(0,0,0,.65);z-index:80;display:none;overflow:hidden;
  max-height:60vh;overflow-y:auto}
.search-results.open{display:block}
.search-results a{display:block;padding:11px 16px;text-decoration:none;border-bottom:1px solid var(--glass-brd)}
.search-results a:last-child{border-bottom:none}
.search-results a.sel,.search-results a:hover{background:rgba(168,85,247,.16)}
.sr-t{display:block;font-weight:700;font-size:.9rem;color:var(--ink)}
.sr-d{display:block;font-size:.78rem;color:var(--ink-dim);line-height:1.45;margin-top:2px}
/* related articles */
.rel-block h2{font-size:1.45rem;margin-bottom:6px}
.rel-row{margin-top:44px;padding:18px 20px;background:var(--glass);border:1px solid var(--glass-brd);
  border-radius:var(--r-md);font-size:.92rem;color:var(--ink-dim);text-align:center}
.rel-row .rel-label{font-weight:700;color:var(--cyan);margin-right:8px}
.rel-row a{color:var(--ink);text-decoration:none;font-weight:600}
.rel-row a:hover{color:var(--cyan);text-decoration:underline}
.rel-row .sep{margin:0 10px;color:var(--ink-faint)}
.prev-next{display:flex;justify-content:space-between;gap:12px;margin-top:22px;flex-wrap:wrap}
.prev-next a{flex:1 1 0;min-width:200px;min-height:44px;display:flex;align-items:center;
  padding:12px 18px;background:var(--glass);border:1px solid var(--glass-brd);
  border-radius:var(--r-md);text-decoration:none;color:var(--ink);font-weight:600;font-size:.92rem;transition:.2s}
.prev-next a:hover{border-color:var(--purple);transform:translateY(-2px);box-shadow:var(--shadow)}
.prev-next a[rel="prev"]{justify-content:flex-start}
.prev-next a[rel="next"]{justify-content:flex-end;margin-left:auto}
/* blog + all-pages */
.cat-block{margin:46px 0}
.cat-block>h2{font-size:1.5rem;margin-bottom:4px}
.cat-block>p{color:var(--ink-dim)}
.post-list{display:grid;gap:12px;margin-top:18px}
.post-list a.post{display:block;background:var(--glass);border:1px solid var(--glass-brd);
  border-radius:var(--r-md);padding:16px 20px;text-decoration:none;transition:.2s}
.post-list a.post:hover{border-color:var(--purple);transform:translateY(-2px);box-shadow:var(--shadow)}
.post-list a.post b{display:block;color:var(--ink);font-size:1.02rem;margin-bottom:3px}
.post-list a.post span{color:var(--ink-dim);font-size:.9rem;line-height:1.5}
.alpha-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:18px}
.alpha-grid a{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:64px;
  padding:10px 6px;background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r-sm);
  text-decoration:none;color:var(--ink);font-weight:700;font-size:1.05rem;transition:.2s}
.alpha-grid a:hover{border-color:var(--cyan);transform:translateY(-2px)}
.alpha-grid a small{font-weight:400;font-size:.72rem;color:var(--ink-dim);margin-top:2px}
.idx-list{margin-top:16px;display:grid;gap:8px}
.idx-list a.idx{display:flex;gap:12px;align-items:baseline;background:var(--glass);
  border:1px solid var(--glass-brd);border-radius:var(--r-sm);padding:10px 16px;text-decoration:none;transition:.2s}
.idx-list a.idx:hover{border-color:var(--purple)}
.idx-list a.idx b{color:var(--ink);font-size:.95rem;white-space:nowrap}
.idx-list a.idx span{color:var(--ink-dim);font-size:.85rem}
/* (removed: dead two-row header block — hamburger owns everything <=1100px) */

/* ---------- hamburger menu (<=1100px): owns phones, tablets, and zoomed viewports ---------- */
.menu-btn{display:none}
.mobile-menu{display:none}
@media(max-width:1100px){
  .menu-btn{display:inline-flex!important;order:0;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:44px;height:44px;flex:none;border:1px solid var(--glass-brd);background:var(--glass);
    border-radius:12px;cursor:pointer;padding:0}
  .menu-btn span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:.25s}
  .menu-btn.x span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-btn.x span:nth-child(2){opacity:0}
  .menu-btn.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .logo{order:1}
  .theme-btn{order:2;margin-left:auto;width:44px;height:44px}
  .search-box{order:3;flex:1 1 100%;min-width:0;margin-left:0}
  .search-box input{width:100%;height:44px;font-size:16px}
  .search-box input:focus{width:100%}
  nav.links{display:none}
  .mobile-menu{position:absolute;top:100%;left:0;right:0;z-index:60;
    background:color-mix(in srgb,var(--bg) 94%,transparent);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--glass-brd);box-shadow:var(--shadow);
    max-height:72vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mobile-menu.open{display:block;animation:mmIn .22s ease}
  @keyframes mmIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .mm-in{padding:14px 20px 24px}
  .mm-head{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin:16px 0 8px}
  .mm-head:first-child{margin-top:2px}
  .mm-grp{display:flex;flex-wrap:wrap;gap:8px}
  .mm-grp a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.92rem;padding:10px 16px;
    border:1px solid var(--glass-brd);background:var(--glass);border-radius:999px;min-height:44px;
    display:inline-flex;align-items:center}
  .mm-grp a.active{background:var(--grad);color:#fff;border-color:transparent}
}
@media(min-width:1101px){
  .menu-btn,.mobile-menu{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .mobile-menu.open{animation:none}
  .menu-btn span{transition:none}
}

/* v4 proactive: wide tables scroll inside their container on mobile — never push the page sideways */
@media(max-width:760px){
  main table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ---------- blog pills / cards ---------- */
.pill{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cyan);border:1px solid var(--glass-brd);background:rgba(34,211,238,.1);
  padding:5px 14px;border-radius:999px}
.blog-card{background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r-lg);
  overflow:hidden;transition:transform .22s,border-color .22s,box-shadow .22s;display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-5px);border-color:var(--purple);box-shadow:var(--shadow)}
.blog-img{display:flex;align-items:center;justify-content:center;min-height:130px;text-decoration:none;
  background:linear-gradient(135deg,rgba(168,85,247,.16),rgba(34,211,238,.10));border-bottom:1px solid var(--glass-brd)}
.blog-img .mdeco{font-family:ui-monospace,Menlo,monospace;font-size:2rem;color:var(--cyan);letter-spacing:.2em}
.blog-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.blog-body h3{margin:0;font-size:1.12rem;line-height:1.35}
.blog-body h3 a{color:var(--ink);text-decoration:none}
.blog-body h3 a:hover{color:var(--cyan)}
.byline{font-size:.8rem;color:var(--ink-faint);font-weight:600;margin:0}
.excerpt{font-size:.92rem;color:var(--ink-dim);margin:0;flex:1}
.read-more{font-size:.82rem;font-weight:700;letter-spacing:.1em;color:var(--ink);text-decoration:none}
.read-more:hover{color:var(--cyan)}
.blog-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-top:26px}

/* ---------- post featured images (16:9, responsive, no layout shift) ---------- */
.post-hero-img{margin:26px auto 0;max-width:900px}
.post-hero-img img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  border-radius:var(--r-lg);border:1px solid var(--glass-brd);box-shadow:var(--shadow)}
.blog-img{display:block;overflow:hidden;border-bottom:1px solid var(--glass-brd);text-decoration:none}
.blog-img img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:transform .3s ease}
.blog-card:hover .blog-img img{transform:scale(1.04)}
/* shared content helpers for posts */
.table-wrap{overflow-x:auto;margin:14px 0;border-radius:12px;-webkit-overflow-scrolling:touch}
.data-table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px}
.data-table th,.data-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.1);text-align:left}
.data-table th{font-size:12px;text-transform:uppercase;letter-spacing:1px;opacity:.6}
.data-table code{font-family:ui-monospace,Menlo,monospace;color:var(--cyan,#22d3ee)}
.tip{border-left:3px solid var(--cyan,#22d3ee);padding:10px 14px;margin:14px 0;
  background:rgba(34,211,238,.06);border-radius:0 10px 10px 0;font-size:15px}

/* ===== merged from nav.css (v6) ===== */
/* nav.css — Track B: desktop dropdown navigation + mobile menu refinements.
   Loaded AFTER style.css on all 64 pages. Do not edit style.css for nav work. */

/* ============ desktop dropdowns (nav.links is hidden <=760px by style.css) ============ */
nav.links{overflow:visible;align-items:center}

.nav-drop{position:relative;flex:none}

.nav-drop-btn{
  appearance:none;-webkit-appearance:none;background:none;border:0;cursor:pointer;
  font:inherit;font-weight:600;font-size:.92rem;color:var(--ink-dim);
  padding:8px 13px;border-radius:999px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
  transition:color .2s,background .2s;
}
.nav-drop-btn:hover,
.nav-drop.open .nav-drop-btn{color:var(--ink);background:var(--glass)}
.nav-drop-btn.active{
  color:var(--ink);
  background:linear-gradient(120deg,rgba(168,85,247,.22),rgba(34,211,238,.16));
  box-shadow:inset 0 0 0 1px var(--glass-brd);
}
.nav-drop-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.nav-drop-btn .car{font-size:.7em;line-height:1;color:var(--ink-faint);transition:transform .22s ease}
.nav-drop.open .nav-drop-btn .car{transform:rotate(180deg)}

/* glassy dropdown panel — flush with the button (no hover gap), no top strip */
.nav-drop-menu{
  position:absolute;top:calc(100% - 2px);left:50%;z-index:70;
  --mx:-50%;
  transform:translate(var(--mx),0);
  min-width:232px;max-width:min(320px,calc(100vw - 32px));
  max-height:min(72vh,600px);overflow-y:auto;overscroll-behavior:contain;
  background:color-mix(in srgb,var(--bg-3) 86%,transparent);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  border:1px solid var(--glass-brd);border-radius:var(--r-md);
  box-shadow:0 30px 70px -18px rgba(0,0,0,.7),var(--shadow);
  padding:8px;margin:0;list-style:none;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease,visibility .22s;
}
/* (top accent strip removed per user request — it read as a border line) */
/* right-align the trailing dropdown so it never clips the viewport edge */
.nav-drop.drop-right .nav-drop-menu{left:auto;right:0;--mx:0}

/* open states: click toggle (.open), hover + keyboard focus (fine pointers only) */
.nav-drop.open .nav-drop-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(var(--mx),0);
}
@media(hover:hover) and (pointer:fine){
  .nav-drop:hover .nav-drop-menu,
  .nav-drop:focus-within .nav-drop-menu{
    opacity:1;visibility:visible;pointer-events:auto;transform:translate(var(--mx),0);
  }
  .nav-drop:hover .nav-drop-btn .car{transform:rotate(180deg)}
}

.nav-drop-menu a{
  display:flex;align-items:center;min-height:42px;
  padding:9px 14px;border-radius:10px;
  color:var(--ink-dim);text-decoration:none;font-weight:600;font-size:.9rem;
  white-space:nowrap;
  transition:background .16s,color .16s,transform .16s;
}
.nav-drop-menu a:hover,
.nav-drop-menu a:focus-visible{
  color:var(--ink);background:var(--glass);transform:translateX(3px);outline:none;
}
.nav-drop-menu a.active{
  color:var(--ink);
  background:linear-gradient(120deg,rgba(168,85,247,.25),rgba(34,211,238,.18));
}
.nav-drop-menu .menu-sep{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);padding:10px 14px 4px;
}
.nav-drop-menu .menu-first{
  background:linear-gradient(120deg,rgba(168,85,247,.28),rgba(236,72,153,.20));
  color:var(--ink);border:1px solid var(--glass-brd);margin-bottom:6px;
  justify-content:space-between;
}
.nav-drop-menu .menu-first:hover{transform:none}

/* <=1100px: desktop dropdown nav is OFF — the hamburger owns this entire range.
   (The old 761-1100px two-row compromise broke under pinch-zoom; killed.) */
@media(max-width:1100px){
  nav.links{display:none!important}
}

/* ============ mobile menu refinements (<=1100px) ============ */
@media(max-width:1100px){
  .mobile-menu{overflow-x:hidden;max-width:100vw}
  .mm-in{min-width:0}
  .mm-grp a{max-width:100%}
}

@media(prefers-reduced-motion:reduce){
  .nav-drop-menu,.nav-drop-btn .car{transition:none}
}

/* ===== merged from anim.css (v6) ===== */
/* ============================================================
   ditdah — card motion layer (anim.css)
   ------------------------------------------------------------
   Additive only. This file introduces NO new HTML classes and
   edits nothing that exists: it only refines the card classes
   already in the tree. Load AFTER style.css / nav.css so these
   rules win same-specificity ties.

   What it does
   - Hover : lift (translateY) + neon glow on content cards.
   - Scroll: staggers the site's existing .rv reveal system
             (site.js IntersectionObserver) via nth-child
             transition-delays — no competing JS, no new system.
             Cards that carry no .rv get a progressive-enhancement
             CSS-only fade-up (visible by default; only runs where
             scroll-driven animations are supported).
   - Honors prefers-reduced-motion.
   - transform/opacity only — no layout shift, mobile-safe.
   ============================================================ */

/* ---------- 1. smooth transition baseline for hoverable cards ----------
   (.tile, .alpha-card, .blog-card, .quiz-opt, .prosign already have
    their own hover styles — left untouched.) */
.card,
.cta-card,
.rule-card,
.gloss-card,
.lang-card,
.fun-card,
.contact-card,
.tier-card {
  transition: transform .28s cubic-bezier(.22,.61,.36,1),
              box-shadow .28s ease,
              border-color .28s ease;
}

/* .tile already lifts on hover in style.css but snaps instantly —
   give it the same smooth curve without changing its values. */
.tile {
  transition: transform .28s cubic-bezier(.22,.61,.36,1),
              box-shadow .28s ease,
              border-color .28s ease;
}

/* ---------- 2. hover: lift + neon glow ---------- */
.card:hover,
.cta-card:hover,
.rule-card:hover,
.gloss-card:hover,
.lang-card:hover,
.fun-card:hover,
.contact-card:hover,
.tier-card:hover {
  transform: translateY(-6px);
  border-color: rgba(168,85,247,.55);
  box-shadow: 0 18px 45px -14px rgba(168,85,247,.55),
              0 0 0 1px rgba(168,85,247,.28);
}

/* Refine the existing .tile hover glow (this stylesheet loads later,
   so it wins the tie; transform stays at style.css's -4px). */
.tile:hover {
  border-color: rgba(168,85,247,.55);
  box-shadow: 0 18px 45px -14px rgba(168,85,247,.55),
              0 0 0 1px rgba(168,85,247,.28);
}

/* ---------- 3. scroll: stagger the existing .rv reveal ----------
   site.js adds .in on intersection; delaying by sibling order
   produces the staggered cascade. */
.rv:nth-child(2)  { transition-delay: .07s; }
.rv:nth-child(3)  { transition-delay: .14s; }
.rv:nth-child(4)  { transition-delay: .21s; }
.rv:nth-child(5)  { transition-delay: .28s; }
.rv:nth-child(6)  { transition-delay: .35s; }
.rv:nth-child(7)  { transition-delay: .42s; }
.rv:nth-child(8)  { transition-delay: .49s; }
.rv:nth-child(9)  { transition-delay: .56s; }
.rv:nth-child(10) { transition-delay: .63s; }

/* ---------- 4. scroll: CSS-only reveal for cards WITHOUT .rv ----------
   Progressive enhancement — cards stay fully visible where
   scroll-driven animations are unsupported. fill-mode is
   `backwards` (not `both`) so the finished animation never
   overrides the hover transforms above. */
@supports (animation-timeline: view()) {
  .alpha-card:not(.rv),
  .gloss-card:not(.rv),
  .lang-card:not(.rv),
  .fun-card:not(.rv),
  .tier-card:not(.rv),
  .rule-card:not(.rv),
  .cta-card:not(.rv),
  .contact-card:not(.rv),
  .tile:not(.rv),
  .card:not(.rv) {
    animation: dd-fade-up .7s cubic-bezier(.22,.61,.36,1) backwards;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }

  /* stagger by sibling order */
  .alpha-card:nth-child(2):not(.rv), .gloss-card:nth-child(2):not(.rv),
  .lang-card:nth-child(2):not(.rv), .fun-card:nth-child(2):not(.rv),
  .tier-card:nth-child(2):not(.rv), .tile:nth-child(2):not(.rv),
  .card:nth-child(2):not(.rv) { animation-delay: .06s; }
  .alpha-card:nth-child(3):not(.rv), .gloss-card:nth-child(3):not(.rv),
  .lang-card:nth-child(3):not(.rv), .fun-card:nth-child(3):not(.rv),
  .tier-card:nth-child(3):not(.rv), .tile:nth-child(3):not(.rv),
  .card:nth-child(3):not(.rv) { animation-delay: .12s; }
  .alpha-card:nth-child(4):not(.rv), .gloss-card:nth-child(4):not(.rv),
  .lang-card:nth-child(4):not(.rv), .fun-card:nth-child(4):not(.rv),
  .tier-card:nth-child(4):not(.rv), .tile:nth-child(4):not(.rv),
  .card:nth-child(4):not(.rv) { animation-delay: .18s; }
  .alpha-card:nth-child(5):not(.rv), .gloss-card:nth-child(5):not(.rv),
  .lang-card:nth-child(5):not(.rv), .fun-card:nth-child(5):not(.rv),
  .tier-card:nth-child(5):not(.rv), .tile:nth-child(5):not(.rv),
  .card:nth-child(5):not(.rv) { animation-delay: .24s; }
  .alpha-card:nth-child(6):not(.rv), .gloss-card:nth-child(6):not(.rv),
  .lang-card:nth-child(6):not(.rv), .fun-card:nth-child(6):not(.rv),
  .tier-card:nth-child(6):not(.rv), .tile:nth-child(6):not(.rv),
  .card:nth-child(6):not(.rv) { animation-delay: .30s; }
  .alpha-card:nth-child(n+7):not(.rv), .gloss-card:nth-child(n+7):not(.rv),
  .lang-card:nth-child(n+7):not(.rv), .fun-card:nth-child(n+7):not(.rv),
  .tier-card:nth-child(n+7):not(.rv), .tile:nth-child(n+7):not(.rv),
  .card:nth-child(n+7):not(.rv) { animation-delay: .36s; }

  @keyframes dd-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- 5. reduced motion: everything static ---------- */
/* ---------- 4. tool action buttons (Swap / Copy input / Clear) ----------
   Staggered entrance, hover lift + neon glow + shine sweep, press-down.
   Scoped by ID so no other .btn on the site is affected. */
#btnSwap,#btnCopyIn,#btnClear{
  position:relative;overflow:hidden;
  transition:transform .25s cubic-bezier(.22,.61,.36,1),
             box-shadow .25s ease,border-color .25s ease,background .25s ease;
  animation:btnIn .55s cubic-bezier(.22,.61,.36,1) backwards;
}
#btnCopyIn{animation-delay:.09s}
#btnClear{animation-delay:.18s}
@keyframes btnIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#btnSwap:hover,#btnCopyIn:hover,#btnClear:hover{
  transform:translateY(-2px);
  border-color:rgba(34,211,238,.55);
  box-shadow:0 10px 26px -10px rgba(34,211,238,.5),0 0 0 1px rgba(34,211,238,.22);
}
#btnSwap:active,#btnCopyIn:active,#btnClear:active{transform:translateY(0) scale(.96)}
#btnSwap::after,#btnCopyIn::after,#btnClear::after{
  content:"";position:absolute;top:0;bottom:0;left:-70px;width:44px;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-20deg);transition:left .55s ease;pointer-events:none;
}
#btnSwap:hover::after,#btnCopyIn:hover::after,#btnClear:hover::after{left:calc(100% + 24px)}

@media (prefers-reduced-motion: reduce) {
  .card, .tile, .alpha-card, .blog-card, .gloss-card, .lang-card,
  .fun-card, .cta-card, .tier-card, .rule-card, .contact-card,
  .quiz-opt, .prosign, .tool-card,
  #btnSwap, #btnCopyIn, #btnClear {
    transition: none !important;
    animation: none !important;
  }
  .card:hover, .tile:hover, .cta-card:hover, .rule-card:hover,
  .gloss-card:hover, .lang-card:hover, .fun-card:hover,
  .contact-card:hover, .tier-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .rv { transition-delay: 0s !important; }
}