:root{--bg:#f7f1e3;--paper:#fffaf0;--ink:#1d2340;--muted:#6b6a7a;--line:#d9cdb0;--accent:#d2452f;--teal:#147a7a;--glyph:#1d2340}
body.ink{--bg:#14132b;--paper:#1d1c3d;--ink:#efe6cf;--muted:#9c97b8;--line:#35335e;--accent:#ff7a59;--teal:#5fd3c4;--glyph:#e8c25a}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:'IBM Plex Mono',monospace;transition:background .4s,color .4s}
body{background-image:radial-gradient(circle at 20% 10%,rgba(210,69,47,.07),transparent 40%),radial-gradient(circle at 90% 80%,rgba(20,122,122,.08),transparent 45%),repeating-linear-gradient(0deg,rgba(0,0,0,.015) 0 1px,transparent 1px 3px);background-attachment:fixed;min-height:100vh}
.serif{font-family:'Cormorant Garamond',serif}
.glyphfont{font-family:'Noto Serif','Noto Serif Tibetan','Noto Sans Thai','Noto Sans Khmer','Noto Sans Mongolian','Noto Sans Runic','Noto Sans Georgian','Noto Sans Devanagari','Noto Naskh Arabic','Noto Sans KR','Noto Sans JP',serif}
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 0 var(--line),0 8px 24px -16px rgba(0,0,0,.35)}
.btn{border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem;font-size:.75rem;background:transparent;color:var(--ink);cursor:pointer;transition:all .15s}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn-solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-solid:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.field{background:transparent;border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem;color:var(--ink);font-family:inherit;outline:none}
.field:focus{border-color:var(--teal)}
select.field option{background:var(--paper);color:var(--ink)}
.muted{color:var(--muted)}
.accent{color:var(--accent)}
.teal{color:var(--teal)}
.glyph-out{color:var(--glyph)}
.tile{transition:transform .2s}
.tile:hover{animation:wobble .5s}
@keyframes wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg) scale(1.05)}75%{transform:rotate(4deg) scale(1.05)}}
.script-card.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.morph{animation:morph .45s ease}
@keyframes morph{0%{opacity:0;filter:blur(6px);transform:translateY(6px)}100%{opacity:1;filter:none;transform:none}}
.rise{animation:rise .6s ease both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.confetti{position:fixed;pointer-events:none;z-index:60;font-size:22px;color:var(--accent);animation:fly 1.2s ease-out forwards}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
body.ink .glyph-img{filter:invert(84%) sepia(40%) saturate(600%) hue-rotate(5deg)}
.glyph-img{height:1em;display:inline-block;vertical-align:-0.12em}
.chip{border:1px dashed var(--line);border-radius:6px;padding:0 .35rem;font-size:.75rem}
.collide{border-color:var(--accent)!important;background:rgba(210,69,47,.08)}
.scrollx{overflow-x:auto;scrollbar-width:thin}
.pix{touch-action:none}
.ipa-kb{border:1px dashed var(--line);border-radius:10px;padding:.5rem .6rem}
.ipa-key{padding:.15rem .5rem;font-size:1rem;min-width:2rem}