:root{--ink:#140d09;--lacquer:#1b120d;--lacquer-panel:#251a13;--lacquer-panel-raised:#2d2016;--gold:#d3a94a;--gold-bright:#eecb7a;--gold-dim:#d3a94a59;--cream:#f1e6d2;--cream-dim:#b9a888;--vermillion:#c1503a;--vermillion-bright:#e2734f;--jade:#5fa088;--jade-bright:#86c2ab;--rust:#9c6a4a;--font-display:"Chonburi", "IBM Plex Sans Thai", serif;--font-body:"IBM Plex Sans Thai", sans-serif;--editor-font-size:1.4rem;--editor-line-height:2.5;--editor-pad-x:28px;--editor-pad-y:26px}*,:before,:after{box-sizing:border-box}body{min-height:100vh;font-family:var(--font-body);color:var(--cream);background:radial-gradient(ellipse 120% 80% at 15% -10%, #d3a94a14, transparent 60%), radial-gradient(ellipse 100% 70% at 100% 110%, #c1503a1a, transparent 55%), repeating-linear-gradient(115deg, #ffffff03 0 2px, transparent 2px 6px), var(--lacquer);background-attachment:fixed;margin:0}#app{max-width:1180px;margin:0 auto;padding:48px 24px 72px}.site-header{text-align:center;margin-bottom:40px}.kicker{letter-spacing:.16em;color:var(--gold-dim);text-transform:uppercase;margin:0 0 6px;font-size:.78rem}.brand{font-family:var(--font-display);color:var(--gold-bright);text-shadow:0 1px #00000080,0 0 28px #d3a94a40;letter-spacing:.01em;margin:0;font-size:clamp(2.1rem,5vw,3.2rem);font-weight:400}.brand .accent{color:var(--vermillion-bright)}.tagline{max-width:46ch;color:var(--cream-dim);margin:12px auto 0;font-size:.98rem;line-height:1.6}.control-bar{flex-wrap:wrap;justify-content:center;align-items:center;gap:28px;margin-bottom:28px;display:flex}.control{align-items:center;gap:10px;display:inline-flex}.control-label{letter-spacing:.08em;color:var(--cream-dim);font-size:.78rem}.form-select{appearance:none;font-family:var(--font-body);color:var(--cream);background:var(--lacquer-panel) url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"6\"><path d=\"M0 0 L5 6 L10 0\" fill=\"none\" stroke=\"%23d3a94a\" stroke-width=\"1.4\"/></svg>") no-repeat right 14px center;border:1px solid var(--gold-dim);cursor:pointer;border-radius:8px;padding:8px 34px 8px 14px;font-size:.95rem;transition:border-color .15s}.form-select:hover,.form-select:focus-visible{border-color:var(--gold);outline:none}.lens-toggle{align-items:center;gap:8px;display:inline-flex}.lens-btn{font-family:var(--font-body);color:var(--cream-dim);border:1px solid var(--gold-dim);cursor:pointer;background:0 0;border-radius:999px;padding:7px 16px;font-size:.88rem;transition:all .15s}.lens-btn:hover{border-color:var(--gold);color:var(--cream)}.lens-btn.is-active{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:600}.rules-btn{font-family:var(--font-body);color:var(--ink);background:var(--gold-bright);border:1px solid var(--gold-bright);cursor:pointer;border-radius:999px;padding:7px 18px;font-size:.88rem;font-weight:600;transition:filter .15s}.rules-btn:hover{filter:brightness(1.08)}.workspace{grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);align-items:start;gap:24px;display:grid}@media (width<=860px){.workspace{grid-template-columns:1fr}}.editor-panel{background:linear-gradient(180deg, var(--lacquer-panel-raised), var(--lacquer-panel));border:1px solid var(--gold-dim);border-radius:16px;padding:4px;box-shadow:0 20px 50px -20px #0009,inset 0 1px #ffffff08}.editor-stage{background:#0000002e;border-radius:12px;position:relative;overflow:visible}.editor,.overlay-text{padding:var(--editor-pad-y) var(--editor-pad-x);font-family:var(--font-body);font-size:var(--editor-font-size);line-height:var(--editor-line-height);letter-spacing:.01em;white-space:pre-wrap;word-wrap:break-word;border:0;margin:0}.overlay-text{pointer-events:none;color:var(--cream-dim);position:absolute;inset:0;overflow:hidden}.arcs{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.editor{resize:none;color:#0000;width:100%;caret-color:var(--gold-bright);background:0 0;outline:none;display:block;position:relative}.editor::selection{background:#d3a94a4d}.syl{transition:color .15s,opacity .15s}.overlay-text[data-lens=livedead] .syl[data-livedead=เป็น]{color:var(--gold-bright);font-weight:500}.overlay-text[data-lens=livedead] .syl[data-livedead=ตาย]{color:var(--rust)}.overlay-text[data-lens=weight] .syl[data-weight=ครุ]{color:var(--gold-bright);font-weight:600}.overlay-text[data-lens=weight] .syl[data-weight=ลหุ]{color:var(--cream-dim);opacity:.75;font-weight:400}.syl.is-blocking{-webkit-text-decoration:underline wavy var(--vermillion-bright);text-decoration:underline wavy var(--vermillion-bright);text-underline-offset:5px;cursor:help;text-decoration-thickness:2px}.syl.is-hint{-webkit-text-decoration:underline dotted var(--jade-bright);text-decoration:underline dotted var(--jade-bright);text-underline-offset:5px;cursor:help}.arc{fill:none;stroke-width:1.6px}.arc-ok{stroke:var(--jade-bright);filter:drop-shadow(0 0 3px #86c2ab80)}.arc-broken{stroke:var(--vermillion-bright);filter:drop-shadow(0 0 4px #e2734f99)}.arc-dot{r:2.6}.arc-dot-ok{fill:var(--jade-bright)}.arc-dot-broken{fill:var(--vermillion-bright)}.legend{color:var(--cream-dim);flex-wrap:wrap;gap:16px;margin:0;padding:14px 24px 18px;font-size:.82rem;list-style:none;display:flex}.legend li{align-items:center;gap:6px;display:inline-flex}.legend .swatch{border-radius:50%;width:10px;height:10px;display:inline-block}.legend .swatch-live{background:var(--gold-bright)}.legend .swatch-dead{background:var(--rust)}.legend .swatch-heavy{background:var(--gold-bright)}.legend .swatch-light{background:var(--cream-dim);opacity:.75}.diagnostics-panel{background:linear-gradient(180deg, var(--lacquer-panel-raised), var(--lacquer-panel));border:1px solid var(--gold-dim);border-radius:16px;padding:22px;box-shadow:0 20px 50px -20px #0009}.panel-title{font-family:var(--font-display);color:var(--gold-bright);margin:0 0 14px;font-size:1.1rem;font-weight:400}.diagnostics-summary{border-radius:8px;margin-bottom:14px;padding:10px 14px;font-size:.9rem;font-weight:600}.diagnostics-summary.is-ok{color:var(--jade-bright);background:#5fa0881f;border:1px solid #5fa08859}.diagnostics-summary.is-error{color:var(--vermillion-bright);background:#c1503a1f;border:1px solid #c1503a59}.diagnostics-list{flex-direction:column;gap:10px;max-height:460px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.diagnostic{opacity:0;animation:.32s forwards diag-in;animation-delay:calc(var(--i,0) * 45ms);background:#00000026;border-left:3px solid;border-radius:8px;padding:10px 14px}@keyframes diag-in{0%{opacity:0;transform:translate(-6px)}to{opacity:1;transform:translate(0)}}.diagnostic.is-blocking{border-color:var(--vermillion-bright)}.diagnostic.is-hint{border-color:var(--jade-bright);opacity:.9}.diagnostic-rule{letter-spacing:.06em;text-transform:uppercase;color:var(--cream-dim);margin-bottom:4px;font-size:.68rem;display:block}.diagnostic.is-hint .diagnostic-rule{color:var(--jade-bright)}.diagnostic-message{color:var(--cream);margin:0;font-size:.88rem;line-height:1.55}.diagnostic.is-hint .diagnostic-message{color:var(--cream-dim);font-style:italic}.diagram-details{border:1px solid var(--gold-dim);background:#00000026;border-radius:10px;margin-bottom:18px;padding:10px 14px}.diagram-summary{cursor:pointer;color:var(--gold-bright);font-size:.92rem;font-weight:600;list-style:none}.diagram-summary::-webkit-details-marker{display:none}.diagram-summary:before{content:"▸ "}.diagram-details[open] .diagram-summary:before{content:"▾ "}.diagram{margin-top:12px}.diagram-title{font-family:var(--font-display);color:var(--gold-bright);margin:0 0 8px;font-size:.95rem;font-weight:400}.diagram-scroll{overflow-x:auto}.diagram-svg{display:block}.diagram-svg .diagram-label{fill:var(--cream-dim);font-family:var(--font-body);font-size:12px}.diagram-dot{stroke:var(--gold-dim);stroke-width:1px}.diagram-dot.is-mandatory{fill:var(--gold-bright)}.diagram-dot.is-optional{fill:#0000;stroke-dasharray:2 2}.diagram-arc{fill:none;stroke:var(--jade-bright);stroke-width:1.4px;opacity:.85}.diagram-svg .diagram-tone{font-family:var(--font-body);text-anchor:middle;font-size:10px;font-weight:600}.diagram-svg .diagram-tone.is-ek{fill:var(--vermillion-bright)}.diagram-svg .diagram-tone.is-tho{fill:var(--jade-bright)}.diagram-note{color:var(--cream-dim);margin:10px 0 0;font-size:.8rem;font-style:italic}.diagram-legend{color:var(--cream-dim);flex-wrap:wrap;gap:12px;margin:10px 0 0;padding:0;font-size:.74rem;list-style:none;display:flex}.suggest-panel{border:1px solid var(--gold-dim);background:#00000038;border-radius:10px;margin:0 16px 16px;padding:14px 16px}.suggest-panel-head{justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;display:flex}.suggest-panel-title{color:var(--gold-bright);font-size:.86rem;font-weight:600}.suggest-panel-close,.rules-drawer-close{color:var(--cream-dim);cursor:pointer;background:0 0;border:none;padding:2px 6px;font-size:1.2rem;line-height:1}.suggest-panel-close:hover,.rules-drawer-close:hover{color:var(--cream)}.suggest-panel-empty{color:var(--cream-dim);margin:0;font-size:.84rem;font-style:italic}.suggest-panel-list{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.suggest-word{font-family:var(--font-body);color:var(--cream);background:var(--lacquer-panel-raised);border:1px solid var(--gold-dim);cursor:pointer;border-radius:8px;padding:5px 12px;font-size:.92rem;transition:all .15s}.suggest-word:hover{border-color:var(--gold);background:var(--gold);color:var(--ink);font-weight:600}.rules-backdrop{z-index:20;background:#00000080;position:fixed;inset:0}.rules-drawer{background:linear-gradient(180deg, var(--lacquer-panel-raised), var(--lacquer-panel));border-left:1px solid var(--gold-dim);z-index:21;width:min(420px,92vw);padding:26px;position:fixed;top:0;bottom:0;right:0;overflow-y:auto;box-shadow:-20px 0 50px -20px #000000b3}.rules-drawer-head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.rules-drawer-heading{font-family:var(--font-display);color:var(--gold-bright);margin:0;font-size:1.2rem;font-weight:400}.rules-drawer-body p{color:var(--cream);margin:0 0 16px;font-size:.94rem;line-height:1.75}