/* Base reset (matches the preview environment) */
:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;font:14px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
img{max-width:100%}
[hidden]{display:none!important}
:root{
  /* Layout: a two-colour riso specimen sheet. Wordmark bar, proof-style input, sticky category rail, glyph card grid, then reference sections. */
  --paper:#F4F5F7;
  --sheet:#FFFFFF;
  --ink:#15162B;
  --ink-2:#4A4C66;
  --ink-3:#71758E;
  --rule:#DDE0E8;
  --blue:#2B4BD6;
  --pink:#FF3EA5;
  --pink-ink:#C2186E;
  --pink-soft:#FFE6F2;
  --blue-soft:#E8ECFC;
  --scrim:rgba(21,22,43,.48);
  --ok:#1D8A54;
  --warn:#B7791F;
  --risk:#D0453A;
  --risk-ink:#B3362C;
  --knob:#FFFFFF;
  /* game-lobby mock keeps one dark look in both themes */
  --g-bg:#121327;
  --g-panel:#1E2140;
  --g-ink:#ECEDF5;
  --g-dim:#8A8EA7;
  --g-acc:#FF4FAE;
  --g-blue:#3D5BEA;
  --f-display:"Unbounded","Schibsted Grotesk",system-ui,sans-serif;
  --f-body:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Devanagari","Noto Sans Arabic",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --f-glyph:"Schibsted Grotesk","Cambria Math","STIX Two Math","Noto Sans Math","Segoe UI Symbol","Noto Sans Symbols 2","Segoe UI Historic","Noto Sans Old Italic","Noto Sans Runic","Noto Sans Cherokee","Noto Sans Ethiopic","Noto Sans Yi","Noto Sans Canadian Aboriginal","Noto Sans Javanese","Noto Sans Lisu","Apple Symbols",system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji";
  --radius:6px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F1017; --sheet:#171826; --ink:#ECEDF5; --ink-2:#B6B9CE; --ink-3:#8A8EA7; --rule:#2B2D40;
    --blue:#8EA3FF; --pink:#FF4FAE; --pink-ink:#FF8FCB; --pink-soft:#3A1630; --blue-soft:#1D2447; --scrim:rgba(0,0,0,.6); --ok:#4CC98A; --warn:#E8B04A; --risk:#FF7A6E; --risk-ink:#FF9A90;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0F1017; --sheet:#171826; --ink:#ECEDF5; --ink-2:#B6B9CE; --ink-3:#8A8EA7; --rule:#2B2D40;
  --blue:#8EA3FF; --pink:#FF4FAE; --pink-ink:#FF8FCB; --pink-soft:#3A1630; --blue-soft:#1D2447; --scrim:rgba(0,0,0,.6); --ok:#4CC98A; --warn:#E8B04A; --risk:#FF7A6E; --risk-ink:#FF9A90;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--paper)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.wrap{max-width:1180px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:720px){.wrap{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}

/* Top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.wm{display:inline-flex;align-items:baseline;gap:3px;color:var(--ink);text-decoration:none;white-space:nowrap}
.wm-a{font:800 21px/1 var(--f-display);letter-spacing:-.01em}
.wm-b{display:inline-block;min-width:5.4em;font:400 25px/1 var(--f-glyph);color:var(--pink-ink)}
.wm-b.swap{animation:wmIn .35s ease}
@keyframes wmIn{from{opacity:0;transform:translateY(.25em)}to{opacity:1;transform:none}}
.lang{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2)}
.lang svg{flex:none}
.lang select{height:36px;padding:0 8px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--sheet);color:var(--ink);font:500 14px var(--f-body);cursor:pointer;max-width:46vw}
.top{flex-wrap:nowrap}
.top .wm{min-width:0;overflow:hidden}
.lang{flex:none}
@media (max-width:440px){.lang svg{display:none}.lang select{max-width:128px;font-size:13px}.wm-b{min-width:4.6em}}

/* Hero */
.hero{display:grid;gap:16px;padding-block:20px 36px}
.eyebrow{margin:0;font:500 12px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
h1{margin:0;max-width:21ch;font:700 clamp(1.8rem,1.05rem + 3.1vw,3.2rem)/1.1 var(--f-display);letter-spacing:-.02em;color:var(--blue);text-shadow:.05em .045em 0 var(--pink);text-wrap:balance;overflow-wrap:break-word}
html[lang="ar"] h1,html[lang="hi"] h1{letter-spacing:0;line-height:1.35}
.lede{margin:0;max-width:62ch;font-size:clamp(16px,.6vw + 13px,19px);color:var(--ink-2);text-wrap:pretty}
.input-panel{margin-top:10px;background:var(--sheet);border:1.5px solid var(--ink);border-radius:10px}
.input-panel:focus-within{outline:3px solid var(--pink);outline-offset:3px}
#src{display:block;width:100%;min-height:136px;max-height:42vh;resize:none;border:0;outline:0;background:transparent;color:var(--ink);font:400 clamp(18px,.8vw + 14px,22px)/1.5 var(--f-glyph);padding:18px 20px;overflow-y:auto}
#src::placeholder{color:var(--ink-3)}
.input-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:8px 10px 8px 20px;border-top:1px solid var(--rule);font:500 12px/1.3 var(--f-mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.input-meta .grow{flex:1}
.nolimit{display:inline-flex;align-items:center;gap:6px}
.nolimit::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pink)}
.btn-text{height:34px;padding:0 12px;border:1px solid transparent;border-radius:var(--radius);background:transparent;color:var(--ink);font:600 14px var(--f-body);cursor:pointer}
.btn-text:hover{border-color:var(--rule);background:var(--paper)}

/* Category rail */
.rail{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);border-block:1px solid var(--rule)}
.chips{display:flex;gap:8px;overflow-x:auto;padding-block:10px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 28px),transparent);padding-inline:10px 28px;margin-inline:-10px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border:1px solid var(--rule);border-radius:999px;background:var(--sheet);color:var(--ink);font:500 14px/1 var(--f-body);cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--ink-3)}
.chip .n{font:500 11px/1 var(--f-mono);color:var(--ink-3)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip[aria-pressed="true"] .n{color:inherit;opacity:.7}
.chip svg{width:14px;height:14px}

/* Results */
.results{padding-block:28px 64px}
.results-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 24px;margin-bottom:16px}
.results-head h2{margin:0;font:600 clamp(18px,.8vw + 14px,22px)/1.2 var(--f-display);letter-spacing:-.01em}
html[lang="ar"] .results-head h2,html[lang="hi"] .results-head h2{letter-spacing:0}
.hint{margin:6px 0 0;font-size:14px;color:var(--ink-3)}
.find{position:relative;width:min(100%,250px)}
.find svg{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.find input{width:100%;height:40px;padding-inline:36px 12px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--sheet);color:var(--ink);font:400 15px var(--f-body)}
.find input::placeholder{color:var(--ink-3)}
@media (max-width:640px){.find{width:100%}.toggle{margin-inline-start:0;width:100%}}
.toggle{display:inline-flex;align-items:center;gap:10px;margin-inline-start:auto;min-height:40px;font-size:14px;color:var(--ink-2);cursor:pointer;user-select:none}
.toggle input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:36px;height:22px;margin:0;border-radius:999px;background:var(--rule);cursor:pointer;transition:background-color .15s}
.toggle input::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:var(--knob);transition:inset-inline-start .15s}
.toggle input:checked{background:var(--blue)}
.toggle input:checked::after{inset-inline-start:17px}
.badge{display:inline-flex;align-items:center;gap:6px;font:500 12px/1.2 var(--f-body);color:var(--ink-3);white-space:nowrap}
.badge::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--ok)}
.badge[data-tier="2"]::before{background:var(--warn)}
.badge[data-tier="3"]::before{background:var(--risk)}
.badge[data-tier="3"]{color:var(--risk-ink)}
.card-foot{display:flex;align-items:center;margin-top:auto}

/* Surprise mix */
.mix{display:grid;gap:10px;margin-bottom:16px;padding:14px 14px 14px 20px;border:1.5px solid var(--ink);border-radius:10px;background:var(--sheet);scroll-margin-top:72px;transition:background-color .15s,border-color .15s}
.mix.is-copied{background:var(--pink-soft);border-color:var(--pink)}
.mix-top{display:flex;align-items:center;gap:8px}
.mix-eyebrow{font:500 11px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--pink-ink)}
.mix-close{display:grid;place-items:center;width:32px;height:32px;margin-inline-start:auto;border:0;border-radius:50%;background:transparent;color:var(--ink-3);cursor:pointer}
.mix-close:hover{background:var(--paper);color:var(--ink)}
.mix-out{margin:0;max-height:calc(1.45em * 4);overflow:hidden;font:400 clamp(22px,1vw + 17px,28px)/1.45 var(--f-glyph);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;cursor:pointer}
.mix-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.mix-recipe{min-width:0;font:500 12px/1.4 var(--f-mono);color:var(--ink-3);overflow-wrap:anywhere}
.mix-foot .grow{flex:1}
.btn-sm{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1.5px solid var(--ink);border-radius:var(--radius);background:var(--ink);color:var(--paper);font:600 14px var(--f-body);cursor:pointer}
.btn-sm.ghost{background:transparent;color:var(--ink)}
.btn-sm:hover{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.btn-dice{display:inline-flex;align-items:center;gap:7px;color:var(--pink-ink)}

/* Recently copied */
.recent{margin-bottom:16px}
.recent-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.recent-t{font:500 11px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.recent-head .btn-text{height:28px;margin-inline-start:auto;font-size:13px}
.recent-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.rtile{flex:none;display:grid;gap:3px;max-width:240px;padding:8px 12px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--sheet);color:var(--ink);text-align:start;cursor:pointer;transition:border-color .15s,background-color .15s}
.rtile:hover{border-color:var(--ink-3)}
.rtile.flash{background:var(--pink-soft);border-color:var(--pink)}
.rname{overflow:hidden;font:600 11px/1.2 var(--f-body);color:var(--ink-3);white-space:nowrap;text-overflow:ellipsis}
.rout{overflow:hidden;font:400 17px/1.4 var(--f-glyph);white-space:nowrap;text-overflow:ellipsis}
.notes{display:grid;gap:8px;margin-bottom:16px}
.note{margin:0;padding:10px 14px;border-radius:var(--radius);background:var(--blue-soft);color:var(--ink-2);font-size:14px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:12px}
.card{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:12px 12px 16px 16px;background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius);cursor:pointer;text-align:start;transition:border-color .15s,background-color .15s}
.card:hover{border-color:var(--ink-3)}
.card:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.card.is-copied{background:var(--pink-soft);border-color:var(--pink)}
.card-top{display:flex;align-items:center;gap:10px;min-width:0;min-height:30px}
.card-name{flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 13px/1.2 var(--f-body);color:var(--ink-2)}
.card-tag{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 11px/1.2 var(--f-mono);color:var(--ink-3)}
.card-copied{display:none;flex:1;font:600 13px/1.2 var(--f-body);color:var(--pink-ink)}
.card.is-copied .card-tag{display:none}
.card.is-copied .card-copied{display:block}
.card-ico{flex:none;color:var(--ink-3);opacity:0;transition:opacity .15s}
.card:hover .card-ico,.card:focus-visible .card-ico{opacity:1}
@media (hover:none){.card-ico{opacity:.6}}
.fav{flex:none;display:grid;place-items:center;width:30px;height:30px;margin-inline-end:-4px;border:0;border-radius:50%;background:transparent;color:var(--ink-3);cursor:pointer}
.fav:hover{background:var(--paper);color:var(--pink-ink)}
.fav[aria-pressed="true"]{color:var(--pink)}
.fav[aria-pressed="true"] path{fill:currentColor}
.card-out{margin:0;padding-block:2px 4px;font:400 22px/1.5 var(--f-glyph);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;max-height:calc(22px * 1.5 * 5 + 6px);overflow:hidden}
.card.is-long .card-out{-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.empty{grid-column:1/-1;margin:0;padding:36px 20px;border:1px dashed var(--rule);border-radius:var(--radius);color:var(--ink-3);text-align:center}

.more-row{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 26px;border:1.5px solid var(--ink);border-radius:var(--radius);background:var(--ink);color:var(--paper);font:600 15px var(--f-body);cursor:pointer}
.btn:hover{background:var(--blue);border-color:var(--blue)}
.showing{font:500 12px var(--f-mono);color:var(--ink-3);font-variant-numeric:tabular-nums}

/* Sections */
.section{padding-block:56px;border-top:1px solid var(--rule)}
.section h2{margin:0 0 8px;font:700 clamp(22px,1.2vw + 16px,30px)/1.2 var(--f-display);letter-spacing:-.015em;text-wrap:balance}
html[lang="ar"] .section h2,html[lang="hi"] .section h2{letter-spacing:0}
.section .sub{margin:0 0 24px;max-width:62ch;color:var(--ink-2)}

.sym-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:18px}
.sym-bar .lbl{font-size:14px;color:var(--ink-2)}
.seg{display:inline-flex;padding:3px;border:1px solid var(--rule);border-radius:999px;background:var(--sheet)}
.seg button{height:32px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font:500 14px var(--f-body);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.sym-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.sym-grid{display:flex;flex-wrap:wrap;gap:8px}
.sym{display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:52px;padding:0 12px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--sheet);color:var(--ink);font:400 24px/1 var(--f-glyph);cursor:pointer;white-space:nowrap;transition:border-color .15s,background-color .15s}
.sym.wide{font-size:17px}
.sym:hover{border-color:var(--ink-3)}
.sym.flash{background:var(--pink-soft);border-color:var(--pink)}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:28px;margin:0;padding:0;list-style:none}
.step{padding-top:16px;border-top:2px solid var(--ink)}
.step .num{display:block;margin-bottom:10px;font:700 28px/1 var(--f-display);color:var(--blue)}
.step h3{margin:0 0 6px;font:600 18px/1.3 var(--f-body)}
.step p{margin:0;color:var(--ink-2)}

.platforms{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.platforms li{padding:8px 14px;border:1px solid var(--rule);border-radius:999px;background:var(--sheet);font:400 18px/1.3 var(--f-glyph);overflow-wrap:anywhere}

.faq #faqList{max-width:780px}
#resT{scroll-margin-top:72px}

/* Fancy text guide */
.guide-head{display:grid;gap:12px;max-width:68ch}
.guide-head h2{margin:0}
.guide-head p:not(.eyebrow){margin:0;font-family:var(--f-glyph);color:var(--ink-2)}
.guide-sub{margin:40px 0 16px;font:600 18px/1.3 var(--f-body);color:var(--ink)}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px;margin:0;padding:0;list-style:none}
.gcard{display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--sheet)}
.gsample{padding-bottom:10px;border-bottom:1px dashed var(--rule);overflow:hidden;font:400 22px/1.7 var(--f-glyph);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.gcard h3{margin:4px 0 0;font:600 16px/1.3 var(--f-body);color:var(--ink)}
.gcard p{flex:1;margin:0;font-size:15px;color:var(--ink-2)}
.glink{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;margin-top:4px;padding:4px 0;border:0;background:none;color:var(--blue);font:600 14px var(--f-body);cursor:pointer}
.glink:hover{text-decoration:underline;text-underline-offset:3px}
html[dir="rtl"] .glink svg{transform:scaleX(-1)}
.tips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:28px;margin:0;padding:0;list-style:none}
.tips li{padding-top:14px;border-top:2px solid var(--ink)}
.tips h4{margin:0 0 6px;font:600 16px/1.3 var(--f-body);color:var(--ink)}
.tips p{margin:0;font-size:15px;color:var(--ink-2)}
.lp-more{margin:28px 0 0;color:var(--ink-2)}
.lp-more a{color:var(--blue);font-weight:600;text-underline-offset:3px}
.lp-faq{max-width:780px}

/* Landing hero + live preview */
.hero{align-items:start}
.hero-main{display:grid;gap:16px;min-width:0}
.hero.has-pv{gap:24px}
.hero.has-pv h1{max-width:none;font-size:clamp(1.8rem,1rem + 2.3vw,2.75rem)}
@media (min-width:980px){.hero.has-pv{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px}}
.pv{display:grid;gap:12px;min-width:0;padding:14px;border:1.5px solid var(--ink);border-radius:12px;background:var(--sheet)}
.pv-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.pv-eyebrow{font:500 11px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--pink-ink)}
.pv-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-inline-start:auto}
.pv-tabs button{height:30px;padding:0 11px;border:1px solid var(--rule);border-radius:999px;background:var(--paper);color:var(--ink-2);font:500 13px var(--f-body);cursor:pointer}
.pv-tabs button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pv-stage{display:grid;place-items:center;min-height:310px;padding:18px 12px;border-radius:10px;background:var(--paper)}
.pv-styles{display:flex;flex-wrap:wrap;gap:6px}
.pv-styles button{height:30px;padding:0 10px;border:1px dashed var(--rule);border-radius:var(--radius);background:transparent;color:var(--ink-2);font:500 13px var(--f-body);cursor:pointer}
.pv-styles button:hover{border-color:var(--ink-3)}
.pv-styles button[aria-pressed="true"]{border-style:solid;border-color:var(--pink);background:var(--pink-soft);color:var(--pink-ink)}
.pv-hint{margin:0;font-size:13px;color:var(--ink-3)}
.mk{display:grid;gap:10px;width:100%;max-width:360px;min-width:0;padding:16px;border:1px solid var(--rule);border-radius:14px;background:var(--sheet)}
.mk-av{display:grid;flex:none;place-items:center;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--blue));color:var(--knob);font:700 24px/1 var(--f-display)}
.mk-av.sm{width:36px;height:36px;font-size:15px}
.mk-row,.mk-headrow{display:flex;align-items:center;gap:14px;min-width:0}
.mk-headrow{gap:10px}
.mk-headrow > div{display:grid;gap:6px;flex:1;min-width:0}
.mk-stats{display:flex;flex:1;justify-content:space-around;gap:8px}
.mk-stat{display:grid;justify-items:center;gap:6px;font:700 15px/1 var(--f-body);color:var(--ink);font-variant-numeric:tabular-nums}
.sk{display:block;height:7px;border-radius:4px;background:var(--rule)}
.mk-name{overflow:hidden;font:600 17px/1.35 var(--f-glyph);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.mk-name.sm{font-size:15px}
.mk-handle{margin-top:-6px;overflow:hidden;font:500 12px/1.3 var(--f-mono);color:var(--ink-3);text-overflow:ellipsis;white-space:nowrap}
.mk-text{display:-webkit-box;overflow:hidden;font:400 15px/1.5 var(--f-glyph);color:var(--ink);overflow-wrap:anywhere;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:pre-line}
.mk-btns{display:flex;gap:8px}
.mk-btn{flex:1;height:28px;border-radius:7px;background:var(--rule)}
.mk-btn.pri{background:var(--blue)}
.mk-media{width:100%;max-width:100%;aspect-ratio:16/8;border-radius:10px;background:linear-gradient(135deg,var(--blue-soft),var(--pink-soft))}
.mk-actions{display:flex;gap:18px;color:var(--ink-3);font:500 12px/1 var(--f-body)}
.mk-actions span{display:inline-flex;align-items:center;gap:5px}
.mk-chat{gap:8px}
.bub{display:grid;gap:6px;max-width:84%;min-width:0;padding:8px 11px;border-radius:14px}
.bub.in{justify-self:start;background:var(--paper);border-end-start-radius:4px}
.bub.out{justify-self:end;background:var(--pink-soft);border-end-end-radius:4px}
.bub-t{display:-webkit-box;overflow:hidden;font:400 15px/1.45 var(--f-glyph);color:var(--ink);overflow-wrap:anywhere;-webkit-line-clamp:4;-webkit-box-orient:vertical;white-space:pre-line}
.bub-n{overflow:hidden;font:600 12px/1.3 var(--f-glyph);color:var(--pink-ink);white-space:nowrap;text-overflow:ellipsis}
.bub-time{justify-self:end;font:500 10px/1 var(--f-mono);color:var(--ink-3)}
.mk-thumb{position:relative;display:grid;place-items:center;width:100%;max-width:100%;aspect-ratio:16/9;padding:14px;border-radius:10px;background:linear-gradient(135deg,var(--g-bg),var(--g-blue));overflow:hidden}
.mk-thumbtext{display:-webkit-box;overflow:hidden;font:700 22px/1.3 var(--f-glyph);color:var(--g-ink);text-align:center;overflow-wrap:anywhere;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mk-dur{position:absolute;inset-inline-end:8px;bottom:8px;padding:2px 5px;border-radius:4px;background:var(--g-bg);color:var(--g-ink);font:500 11px/1.2 var(--f-mono)}
.mk-vtitle{display:-webkit-box;overflow:hidden;font:600 15px/1.4 var(--f-glyph);color:var(--ink);overflow-wrap:anywhere;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mk-game{gap:8px;border-color:var(--g-bg);background:var(--g-bg);color:var(--g-ink)}
.g-head{display:flex;align-items:center;justify-content:space-between;font:500 11px/1 var(--f-mono);letter-spacing:.08em;color:var(--g-dim)}
.g-head .sk{width:70px;background:var(--g-panel)}
.g-row{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 10px;border-radius:8px;background:var(--g-panel)}
.g-row.me{box-shadow:inset 0 0 0 1.5px var(--g-acc)}
.g-lvl{display:grid;flex:none;place-items:center;width:30px;height:24px;border-radius:5px;background:var(--g-bg);color:var(--g-dim);font:600 11px/1 var(--f-mono)}
.g-name{flex:1;min-width:0;overflow:hidden;font:500 15px/1.4 var(--f-glyph);color:var(--g-ink);white-space:nowrap;text-overflow:ellipsis}
.g-row:not(.me) .g-name{color:var(--g-dim)}
.g-ping{display:flex;flex:none;align-items:flex-end;gap:2px;height:12px}
.g-ping i{display:block;width:3px;border-radius:1px;background:var(--g-acc)}
.g-feed{display:flex;align-items:center;gap:8px;min-width:0;padding-top:8px;border-top:1px solid var(--g-panel);font:500 13px/1.3 var(--f-glyph);color:var(--g-ink)}
.g-feed b{overflow:hidden;font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.g-feed .x{flex:none;color:var(--g-acc)}
.g-feed .v{flex:none;color:var(--g-dim)}

/* Zalgo / glitch controls */
.zt{padding-block:0 32px}
.zt-card{display:grid;gap:14px;padding:18px;border:1.5px solid var(--ink);border-radius:12px;background:var(--sheet)}
.zt-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.zt-title{margin:0;font:600 18px/1.3 var(--f-display);color:var(--ink)}
.zt-body{display:grid;gap:14px}
.zt-sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:14px}
.zt-sl{display:grid;gap:6px;font-size:14px;color:var(--ink-2)}
.zt-sl b{color:var(--ink);font-variant-numeric:tabular-nums}
.zt-sl input{width:100%;accent-color:var(--pink)}
.zt-out{margin:0;min-height:3.6em;max-height:16em;overflow:hidden;padding:44px 14px;border-radius:8px;background:var(--paper);font:400 26px/1.9 var(--f-glyph);color:var(--ink);overflow-wrap:anywhere;white-space:pre-wrap}

/* A–Z alphabet charts */
.alpha-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 18px}
.alpha-grid{display:grid;gap:22px}
.alpha-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.alpha-head h3{margin:0;font:500 11px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.alpha-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.acell{display:grid;place-items:center;gap:3px;min-width:0;height:66px;padding:4px;border:1px solid var(--rule);border-radius:6px;background:var(--sheet);color:var(--ink);cursor:pointer;transition:border-color .15s,background-color .15s}
.acell .g{overflow:hidden;max-width:100%;font:400 26px/1.15 var(--f-glyph);white-space:nowrap}
.acell small{font:500 10px/1 var(--f-mono);color:var(--ink-3)}
.acell:hover{border-color:var(--ink-3)}
.acell.flash{border-color:var(--pink);background:var(--pink-soft)}

/* Generator directory */
.dir-groups{display:grid;gap:30px;margin-top:22px}
.dir-g h3{display:flex;align-items:baseline;gap:8px;margin:0 0 12px;font:600 17px/1.3 var(--f-body);color:var(--ink)}
.dir-g h3 .n{font:500 12px/1 var(--f-mono);color:var(--ink-3)}
.dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:8px;margin:0;padding:0;list-style:none}
.dtile{display:grid;gap:2px;min-width:0;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--sheet);color:var(--ink);text-decoration:none;transition:border-color .15s,background-color .15s}
.dtile:hover{border-color:var(--ink-3)}
.dtile[aria-current="page"]{border-color:var(--pink);background:var(--pink-soft)}
.dt-s{height:1.6em;overflow:hidden;font:400 19px/1.6 var(--f-glyph);white-space:nowrap;text-overflow:ellipsis}
.dt-l{overflow:hidden;font:500 12.5px/1.3 var(--f-body);color:var(--ink-3);white-space:nowrap;text-overflow:ellipsis}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{position:relative;padding:18px 0;padding-inline-end:40px;list-style:none;cursor:pointer;font:600 17px/1.4 var(--f-body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;inset-inline-end:6px;top:15px;font:500 22px/1 var(--f-mono);color:var(--ink-3)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 20px;max-width:65ch;color:var(--ink-2)}

.section{scroll-margin-top:60px}

/* Header nav */
.topnav{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
.topnav a{padding:8px 12px;border-radius:var(--radius);color:var(--ink-2);text-decoration:none;font:500 14px var(--f-body)}
.topnav a:hover{color:var(--ink);background:var(--sheet)}
.topnav a[aria-current="page"]{color:var(--ink);font-weight:600}
@media (max-width:600px){.topnav{display:none}}

/* Footer */
.foot-wrap{border-top:1px solid var(--rule);background:var(--sheet)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:28px 32px;padding-block:40px 28px}
@media (min-width:860px){.foot-grid{grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr))}}
.foot-brand{display:grid;gap:10px;align-content:start;max-width:36ch}
.foot-brand p{margin:0;color:var(--ink-3);font-size:14px}
.foot-brand .wm-b{min-width:0;font-size:22px}
.foot-col h2{margin:0 0 12px;font:500 11px/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.foot-col ul{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.foot-col a{color:var(--ink);text-decoration:none;font-size:15px}
.foot-col a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.foot-col a[aria-current="page"]{color:var(--blue);font-weight:600}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:16px 32px;border-top:1px solid var(--rule);color:var(--ink-3);font-size:13px}

/* Pages */
.page{padding-block:8px 72px}
.doc h1{font-size:clamp(1.9rem,1.2rem + 2.4vw,2.9rem);max-width:24ch}
.doc-head{display:grid;gap:12px;padding-block:28px 32px;border-bottom:1px solid var(--rule)}
.doc-meta{margin:0;font:500 12px/1.4 var(--f-mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.en-note{margin:0;max-width:70ch;padding:10px 14px;border-radius:var(--radius);background:var(--blue-soft);color:var(--ink-2);font-size:14px}
.ph{padding:0 4px;border-radius:3px;background:var(--pink-soft);color:var(--pink-ink);font:500 .92em var(--f-mono)}
.glance{max-width:780px;margin-top:28px;padding:20px 22px;border:1.5px solid var(--ink);border-radius:10px;background:var(--sheet)}
.glance h2{margin:0 0 12px;font:600 18px/1.3 var(--f-display)}
.glance ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.glance li{position:relative;padding-inline-start:26px;color:var(--ink-2)}
.glance li::before{content:"✓";position:absolute;inset-inline-start:0;top:0;color:var(--ok);font-weight:700}
.legal{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding-top:32px}
@media (min-width:900px){.legal{grid-template-columns:220px minmax(0,1fr);gap:56px}}
.toc{align-self:start;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--sheet)}
@media (min-width:900px){.toc{position:sticky;top:calc(24px + env(safe-area-inset-top,0px));max-height:calc(100vh - 48px);overflow-y:auto;padding:0;border:0;background:transparent}}
.toc summary{font:500 11px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);cursor:pointer}
.toc ol{display:grid;gap:1px;margin:10px 0 0;padding:0;list-style:none;border-inline-start:1px solid var(--rule)}
.toc a{display:block;margin-inline-start:-1px;padding:5px 12px;border-inline-start:2px solid transparent;color:var(--ink-2);text-decoration:none;font-size:14px;line-height:1.35}
.toc a:hover{color:var(--ink);border-color:var(--ink-3)}
.prose{min-width:0;max-width:70ch}
.prose h2{margin:40px 0 10px;font:600 21px/1.3 var(--f-display);letter-spacing:-.01em;scroll-margin-top:24px;text-wrap:balance}
.prose h2:first-child{margin-top:0}
.prose h3{margin:22px 0 6px;font:600 16px/1.4 var(--f-body)}
.prose p,.prose li{color:var(--ink-2)}
.prose p{margin:0 0 14px}
.prose ul{display:grid;gap:7px;margin:0 0 16px;padding-inline-start:20px}
.prose a{color:var(--blue);text-underline-offset:2px}
.prose strong{color:var(--ink);font-weight:600}
.prose code{padding:1px 5px;border-radius:4px;background:var(--paper);color:var(--ink);font:500 .86em var(--f-mono)}
.table-wrap{margin:6px 0 16px;overflow-x:auto;border:1px solid var(--rule);border-radius:var(--radius)}
.table-wrap table{width:100%;min-width:560px;border-collapse:collapse;font-size:14px}
.table-wrap th,.table-wrap td{padding:10px 12px;border-bottom:1px solid var(--rule);text-align:start;vertical-align:top;color:var(--ink-2)}
.table-wrap th{background:var(--paper);font:500 11px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.table-wrap tr:last-child td{border-bottom:0}

/* About */
.about-hero{display:grid;gap:14px;padding-block:28px 32px}
.spec-fig{display:grid;gap:10px;margin:0}
.spec{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1.5px solid var(--ink);border-radius:10px;background:var(--sheet);overflow:hidden}
.spec-cell{display:grid;justify-items:center;gap:6px;min-width:0;padding:22px 6px 16px;border-inline-start:1px solid var(--rule)}
.spec-cell:first-child{border-inline-start:0}
.spec-g{font:400 clamp(40px,5vw + 16px,76px)/1 var(--f-glyph);color:var(--ink)}
.spec-cell:nth-child(2) .spec-g{color:var(--pink-ink)}
.spec-cell:nth-child(4) .spec-g{color:var(--blue)}
.spec-cp{font:500 11px/1.2 var(--f-mono);color:var(--ink-3)}
.spec-n{max-width:100%;overflow:hidden;font:500 12px/1.2 var(--f-body);color:var(--ink-2);text-overflow:ellipsis;white-space:nowrap}
@media (max-width:520px){.spec-n{display:none}.spec-cp{font-size:9px}}
.spec-cap{font-size:14px;color:var(--ink-3)}
.facts{display:flex;flex-wrap:wrap;gap:16px 44px;margin-top:32px;padding-block:22px;border-block:1px solid var(--rule)}
.fact{display:grid;gap:2px}
.fv{font:700 30px/1.1 var(--f-display);color:var(--blue);font-variant-numeric:tabular-nums}
.fl{font-size:14px;color:var(--ink-2)}
.about-body{display:grid;gap:48px;padding-block:44px 8px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:36px 48px}
.about h2{margin:0 0 10px;font:700 clamp(21px,1vw + 16px,27px)/1.2 var(--f-display);letter-spacing:-.015em;text-wrap:balance}
html[lang="ar"] .about h2,html[lang="hi"] .about h2{letter-spacing:0}
.about p{margin:0;max-width:62ch;color:var(--ink-2)}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:28px;margin:18px 0 0;padding:0;list-style:none}
.values li{padding-top:16px;border-top:2px solid var(--ink)}
.values h3{margin:0 0 6px;font:600 18px/1.3 var(--f-body)}
.cta-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;padding:28px;border-radius:10px;background:var(--ink)}
.cta-band h2{color:var(--paper)}
.cta-band p{color:var(--paper);opacity:.8}
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.btn.inv{background:var(--paper);border-color:var(--paper);color:var(--ink);text-decoration:none}
.btn.inv:hover{background:var(--pink);border-color:var(--pink);color:var(--ink)}
.cta-link{color:var(--paper);font-weight:600;text-underline-offset:3px}

/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-top:32px}
@media (min-width:900px){.contact-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px}}
.c-main,.c-side{display:grid;gap:20px;align-content:start;min-width:0}
.c-card{display:grid;gap:18px;padding:22px;border:1px solid var(--rule);border-radius:10px;background:var(--sheet)}
.c-card h2,.quick h2{margin:0;font:600 19px/1.3 var(--f-display)}
.email-card{gap:10px;border:1.5px solid var(--ink)}
.email-big{margin:0;font:600 clamp(16px,.8vw + 13px,20px)/1.35 var(--f-mono);color:var(--ink);overflow-wrap:anywhere;user-select:all}
.email-card .btn-sm{justify-self:start}
.c-hint{margin:0;font-size:14px;color:var(--ink-3)}
.field{display:grid;gap:7px;min-width:0;margin:0;padding:0;border:0}
.lbl{padding:0;font:600 14px/1.3 var(--f-body);color:var(--ink)}
.opt{font-weight:400;color:var(--ink-3)}
.inp{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--f-body)}
textarea.inp{min-height:150px;resize:vertical}
.inp::placeholder{color:var(--ink-3)}
.inp:focus{outline:3px solid var(--pink);outline-offset:1px}
.inp[aria-invalid="true"]{border-color:var(--risk)}
.err{margin:0;font-size:13px;color:var(--risk-ink)}
.topic-row{display:flex;flex-wrap:wrap;gap:8px}
.topic{position:relative}
.topic input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.topic span{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:1px solid var(--rule);border-radius:999px;background:var(--paper);font:500 14px var(--f-body);color:var(--ink)}
.topic input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.topic input:focus-visible + span{outline:3px solid var(--pink);outline-offset:2px}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ready{display:grid;gap:12px;padding:20px;border-radius:10px;background:var(--blue-soft)}
.ready h3,.sent h3{margin:0;font:600 18px/1.3 var(--f-body)}
.ready p,.sent p{margin:0;color:var(--ink-2)}
.ready .inp{min-height:180px;background:var(--sheet);font-size:15px}
.btn-sm.ghost{text-decoration:none}
.sent{display:grid;gap:6px;padding:20px;border:1.5px solid var(--ok);border-radius:10px;background:var(--sheet)}
.quick{display:grid;gap:12px}
.quick dl{display:grid;gap:14px;margin:0}
.quick dt{font:600 15px/1.4 var(--f-body);color:var(--ink)}
.quick dd{margin:4px 0 0;color:var(--ink-2);font-size:15px}
.quick a{color:var(--blue);font-weight:600;text-underline-offset:3px}

/* Toast + manual copy */
/* Cookie message */
.ck{position:fixed;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;display:grid;gap:12px;max-width:520px;margin-inline:auto;padding:16px 18px;border:1.5px solid var(--ink);border-radius:12px;background:var(--sheet);color:var(--ink);box-shadow:0 10px 30px var(--scrim)}
.ck[hidden]{display:none}
.ck p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.ck-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.ck-actions a{color:var(--blue);font-size:14px;font-weight:600;text-underline-offset:3px}
.ck-open{height:auto;padding:0;font-size:13px;font-weight:500;color:var(--ink-3)}
.ck-open:hover{background:transparent;color:var(--ink);text-decoration:underline}
.ck-open[hidden]{display:none}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:20;max-width:calc(100% - 32px);padding:10px 18px;border-radius:999px;background:var(--ink);color:var(--paper);font:500 14px/1.4 var(--f-body);opacity:0;transform:translate(-50%,16px);pointer-events:none;transition:opacity .18s,transform .18s}
.toast.on{opacity:1;transform:translate(-50%,0)}
.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:var(--scrim)}
.modal-card{display:grid;gap:12px;width:min(560px,100%);padding:20px;border:1px solid var(--rule);border-radius:10px;background:var(--sheet)}
.modal-card h3{margin:0;font:600 18px var(--f-body)}
.modal-card p{margin:0;color:var(--ink-2);font-size:14px}
.modal-card textarea{width:100%;min-height:140px;max-height:50vh;padding:12px;border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper);color:var(--ink);font:400 18px/1.5 var(--f-glyph);resize:vertical}
.modal-card .btn{justify-self:end}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}