:root{--font-ui:"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;--font-mono:"SF Mono","Cascadia Code","Consolas","Liberation Mono",monospace;--space-8:8px;--space-16:16px;--space-24:24px;--space-32:32px;--space-40:40px;--radius-2:2px;--border-width:1px;--color-page:#f3f0ea;--color-surface:#fffdf9;--color-surface-strong:#ece6dc;--color-border:#b7b0a5;--color-border-strong:#8d867c;--color-text:#151515;--color-text-muted:#555149;--color-accent:#273d7a;--color-accent-strong:#1c2d5b;--color-highlight:#f6dfbf;--color-highlight-strong:#e8bc7a;--color-warning:#7b2d12;color:var(--color-text);background:var(--color-page);font-family:var(--font-ui);font-weight:400;line-height:1.5}*{box-sizing:border-box}html{scrollbar-gutter:stable;min-width:320px}body{background:var(--color-page);color:var(--color-text);min-height:100vh;margin:0}button,textarea,input{font:inherit}button{color:inherit}#root{min-height:100vh}.app-shell{padding:var(--space-32)var(--space-24)var(--space-40);display:grid;gap:var(--space-32);width:min(1200px,100%);margin:0 auto}.page-header{display:grid;gap:var(--space-8)}.page-title{letter-spacing:-.04em;margin:0;font-size:clamp(2.25rem,3vw,3.5rem);font-weight:700;line-height:1}.page-description{color:var(--color-text-muted);max-width:72ch;margin:0;font-size:1.05rem}.inspector-grid{display:grid;gap:var(--space-24)}.field-block{display:grid;gap:var(--space-8)}.field-label{text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;font-weight:700}.text-input{padding:var(--space-16);border:var(--border-width)solid var(--color-border-strong);border-radius:var(--radius-2);background:var(--color-surface);color:var(--color-text);resize:vertical;overflow-y:auto;width:100%;min-height:240px;font-size:1.125rem;line-height:1.6}.text-input:focus{outline:2px solid var(--color-accent);outline-offset:2px}.status-text{color:var(--color-text-muted);font-size:.95rem}.output-panel{display:grid;gap:var(--space-16);padding:var(--space-16);border:var(--border-width)solid var(--color-border-strong);border-radius:var(--radius-2);background:var(--color-surface);min-height:320px}.output-header{display:grid;gap:var(--space-8);padding-bottom:var(--space-16);border-bottom:var(--border-width)solid var(--color-border)}.output-title{margin:0;font-size:1.25rem;line-height:1.2}.output-description{color:var(--color-text-muted);margin:0}.empty-state{color:var(--color-text-muted);margin:0;font-size:1rem}.explain-table{display:grid;border-top:var(--border-width)solid var(--color-border)}.explain-row{display:grid;grid-template-columns:72px minmax(120px,200px)minmax(0,1fr);gap:var(--space-16);padding:var(--space-16)0;border-bottom:var(--border-width)solid var(--color-border);align-items: start}.explain-row--head{padding:var(--space-8)0;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;font-weight:700}.explain-cell{min-width:0}.explain-cell--index{color:var(--color-text-muted);font-family:var(--font-mono)}.explain-cell--glyph{display:grid}.grapheme-preview{display:inline-block;font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.1;font-family:var(--font-mono);white-space:pre-wrap;word-break:break-word;min-height:48px}.codepoint-list{display:grid;gap:var(--space-8)}.codepoint-row{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--space-16);font-family:var(--font-mono);align-items: start}.codepoint-char{white-space:pre-wrap;font-size:1.125rem}.codepoint-meta{color:var(--color-text-muted);overflow-wrap:anywhere;min-width:0}.hidden-output{display:grid;gap:var(--space-8);font-family:var(--font-mono)}.hidden-line{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--space-16);align-items: start}.line-number{color:var(--color-text-muted);text-align:right}.line-content{display:flex;align-items: center;gap:var(--space-8);padding:var(--space-8);border:var(--border-width)solid var(--color-border);border-radius:var(--radius-2);background:var(--color-surface-strong);white-space:pre-wrap;word-break:break-word;flex-wrap:wrap;min-height:32px}.empty-line{color:var(--color-text-muted)}.token{display:inline-block;white-space:pre}.token--highlighted{padding:0 var(--space-8);border:var(--border-width)solid var(--color-highlight-strong);border-radius:var(--radius-2);border-color:var(--color-highlight-strong);background:var(--color-highlight);min-height:32px;line-height:32px}.token--newline,.token--tab,.token--space,.token--format,.token--control{color:var(--color-warning)}.token--non-ascii{color:var(--color-accent-strong)}@media (max-width:720px){.app-shell{padding:var(--space-24)var(--space-16)var(--space-32)}.explain-row,.explain-row--head{grid-template-columns:48px minmax(88px,128px)minmax(0,1fr);gap:var(--space-8)}.hidden-line,.codepoint-row{grid-template-columns:40px minmax(0,1fr);gap:var(--space-8)}}