:root:not([data-theme]) {
  color-scheme: light;
  --color-base-100: #fff;
  --color-base-200: #e9e9e9;
  --color-base-300: #dfe2e8;
  --color-base-content: #20252b;
  --color-primary: #570df8;
  --color-secondary: #00aab2;
  --color-accent: #a586ec;
  --color-neutral: #343a46;
  --color-success: #18844a;
  --color-error: #d34856;
}
:root {
  --role-pronoun: #2675d8;
  --role-predicate: #078b78;
  --role-determiner: #7754db;
  --role-number: #ba7617;
  --role-name: #cc4e88;
  --role-particle: #4887ad;
  --role-structure: #7b5acb;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
:root:is([data-theme="dark"], [data-theme="synthwave"], [data-theme="halloween"], [data-theme="forest"], [data-theme="black"], [data-theme="luxury"], [data-theme="dracula"], [data-theme="business"], [data-theme="night"], [data-theme="dim"], [data-theme="sunset"]) { --role-pronoun: #7bb8ff; --role-predicate: #58d7ba; --role-determiner: #bca1ff; --role-number: #f5bb64; --role-name: #f398c0; --role-particle: #7ac4e4; --role-structure: #bda8f5; }
body { margin: 0; background: var(--color-base-200); color: var(--color-base-content); font: 13px/1.5 Inter, system-ui, sans-serif; }
button, select, textarea { font: inherit; }
button, select { cursor: pointer; }
a { color: inherit; }
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.navbar { height: 68px; position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--color-base-100) 95%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-base-300); box-shadow: 0 2px 12px #00000012; }
.navbar-inner { width: 100%; max-width: 960px; height: 100%; margin: auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.identity { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.identity-icon { width: 36px; height: 36px; }
.identity strong { display: block; font-size: 14px; line-height: 1.2; }
.identity small { display: block; opacity: .58; font-size: 10px; }
.navbar-actions { display: flex; align-items: center; gap: 18px; }
.theme-toggle { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--color-base-content); font-size: 11px; font-weight: 600; }
.theme-toggle:hover, .theme-toggle[aria-expanded="true"] { background: var(--color-base-200); }
.theme-toggle svg { width: 15px; height: 15px; }
.dashboard { max-width: 912px; margin: 22px auto 32px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-content: start; }
.card { min-width: 0; overflow: hidden; background: var(--color-base-100); border: 1px solid color-mix(in srgb, var(--color-base-300) 76%, transparent); border-radius: 8px; box-shadow: 0 3px 12px #00000012, 0 1px 2px #0000000b; }
.card-drag-handle { touch-action: none; cursor: grab; }
.card-drag-handle:active { cursor: grabbing; }
#card-layout .card-layout-item.sortable-chosen { box-shadow: 0 8px 24px color-mix(in srgb, var(--color-base-content) 17%, transparent); }
#card-layout .card-layout-item.sortable-ghost { opacity: .35; }
#card-layout .card-layout-item.sortable-drag { opacity: 1; }
.foldable-card[data-folded="true"] .card-fold-btn svg { transform: rotate(-90deg); }
.card[hidden], .card-body[hidden], [hidden] { display: none !important; }
.card-full { grid-column: 1/-1; }
.card-header { height: 40px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--color-base-300); padding: 0 12px; min-width: 0; }
.foldable-card .card-header { cursor: pointer; }
.card-header h2, .card-header .card-icon, .card-header .card-subtitle { user-select: none; }
.card-icon { display: grid; place-items: center; min-width: 17px; color: var(--color-secondary); }
.card-icon svg { width: 15px; height: 15px; }
#tree-card .card-icon { color: var(--color-secondary); }
#analysis-card .card-icon { color: var(--color-primary); }
#morph-card .card-icon { color: var(--color-accent); }
#diagnostic-card .card-icon { color: var(--color-warning, #bc7b17); }
.raw-card .card-icon { color: var(--color-success); }
.card-header h2 { font-size: 12px; line-height: 1; margin: 0; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; color: var(--color-base-content); opacity: .73; white-space: nowrap; }
.card-subtitle { font-size: 10px; opacity: .52; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; min-width: 0; }
.example-toggle, .control-toggle { display: flex; align-items: center; gap: 5px; min-height: 27px; padding: 4px 7px; border: 0; border-radius: 5px; color: var(--color-base-content); background: transparent; font-size: 11px; opacity: .76; white-space: nowrap; }
.example-toggle:hover, .control-toggle:hover, .example-toggle[aria-expanded="true"], .control-toggle[aria-expanded="true"] { background: var(--color-base-200); opacity: 1; }
.example-toggle svg, .control-toggle svg { width: 13px; height: 13px; flex: none; }
.example-menu { position: fixed; z-index: 50; min-width: 220px; max-width: min(360px,calc(100vw - 24px)); max-height: 65vh; overflow: auto; list-style: none; margin: 0; padding: 5px; border: 1px solid var(--color-base-300); border-radius: 7px; background: var(--color-base-100); box-shadow: 0 8px 24px #0003; }
.example-menu-heading { padding: 6px 8px 4px; color: var(--color-base-content); font-size: 10px; font-style: italic; opacity: .55; }
.example-menu-item { width: 100%; padding: 6px 8px; border: 0; border-radius: 4px; background: transparent; color: var(--color-base-content); text-align: left; font: 11px 'JetBrains Mono',ui-monospace,monospace; white-space: nowrap; }
.example-menu-item:hover, .example-menu-item:focus-visible { background: var(--color-base-200); }
.inline-toggle { font-size: 11px; opacity: .68; white-space: nowrap; }
.inline-toggle { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.inline-toggle input { accent-color: var(--color-primary); width: 13px; height: 13px; margin: 0; }
.icon-button { border: 0; background: transparent; color: var(--color-base-content); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; opacity: .8; }
.icon-button:hover { background: var(--color-base-200); opacity: 1; }
.icon-button svg { width: 17px; height: 17px; }
.card-body { padding: 12px; min-height: 112px; }
.input-body { padding: 8px; }
.input-body textarea { display: block; width: 100%; min-height: 90px; max-height: 360px; resize: vertical; border: 1px solid var(--color-base-300); border-radius: 5px; outline: none; padding: 11px 12px; color: var(--color-base-content); background: var(--color-base-100); font: 12px/1.6 'JetBrains Mono',ui-monospace,monospace; }
.input-body textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb,var(--color-primary) 15%,transparent); }
.input-body textarea::selection { background: var(--color-primary); color: var(--color-primary-content, #fff); }
.input-body textarea::placeholder { opacity: .45; }
.control-row { display: flex; align-items: center; gap: 9px; padding: 10px 2px 1px; flex-wrap: wrap; }
.control-group { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 11px; white-space: nowrap; }
.control-group > span { opacity: .68; }
.placeholder { margin: 0; opacity: .55; font-size: 12px; }
.lexeme-list, .morph-list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.morph-entry { display: grid; gap: 6px; min-width: 75px; max-width: 100%; }
.morph-explanation { padding: 7px 8px; border-left: 2px solid var(--role-color); background: color-mix(in srgb,var(--role-color) 5%,var(--color-base-100)); font-size: 10px; }
.morph-verdict { font-weight: 600; color: var(--color-error); }
.morph-explanation p { margin: 4px 0 0; }
.morph-notes { margin: 4px 0 0; padding-left: 14px; }
.morph-notes li+li { margin-top: 3px; }
.lexeme, .morph-token { --role-color: var(--role-particle); min-width: 75px; border: 1px solid color-mix(in srgb,var(--role-color) 32%,var(--color-base-300)); background: color-mix(in srgb,var(--role-color) 9%,var(--color-base-100)); border-radius: 6px; padding: 7px 9px; box-shadow: inset 3px 0 var(--role-color); }
.lexeme strong, .morph-token strong { display: block; color: var(--color-base-content); font: 12px 'JetBrains Mono',ui-monospace,monospace; overflow-wrap: anywhere; }
.lexeme small, .morph-token small { display: block; color: var(--role-color); font: 10px 'JetBrains Mono',ui-monospace,monospace; margin-top: 2px; font-weight: 600; }
[data-kind="pronoun"] { --role-color: var(--role-pronoun); }
[data-kind="predicate"] { --role-color: var(--role-predicate); }
[data-kind="determiner"] { --role-color: var(--role-determiner); }
[data-kind="number"] { --role-color: var(--role-number); }
[data-kind="name"] { --role-color: var(--role-name); }
[data-kind="particle"] { --role-color: var(--role-particle); }
[data-kind="structure"] { --role-color: var(--role-structure); }
.morph-token.rejected { --role-color: var(--color-error); }
.minor-note { font-size: 11px; opacity: .62; margin: 10px 0 0; }
.diagnostic-list { display: grid; gap: 9px; margin: 0; padding-left: 18px; }
.diagnostic-item { padding-left: 2px; font-size: 11px; line-height: 1.55; }
.diagnostic-message { display: block; }
.cll-reference-link { color: var(--color-primary); text-decoration: underline; text-decoration-color: color-mix(in srgb,var(--color-primary) 45%,transparent); text-underline-offset: 2px; }
.cll-reference-link:hover { text-decoration-color: currentColor; }
.cll-reference-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; }
.diagnostic-jump { margin-top: 4px; padding: 2px 5px; border: 1px solid var(--color-base-300); border-radius: 4px; background: var(--color-base-100); color: var(--color-primary); font-size: 10px; }
.diagnostic-jump:hover { border-color: var(--color-primary); }
.tree-body { max-height: 350px; overflow: auto; background: color-mix(in srgb,var(--color-base-100) 95%,var(--color-base-200)); }
.syntax-tree, .syntax-tree ul { list-style: none; margin: 0; padding-left: 16px; border-left: 1px solid var(--color-base-300); }
.syntax-tree { border: 0; padding-left: 0; }
.syntax-tree li { margin: 1px 0; }
.tree-node { display: inline-flex; gap: 7px; align-items: baseline; border-radius: 4px; padding: 2px 5px; color: var(--role-color); background: color-mix(in srgb,var(--role-color) 7%,transparent); font: 11px/1.5 'JetBrains Mono',ui-monospace,monospace; }
.tree-node:is(button) { border: 0; cursor: pointer; }
.tree-node.tree-selected { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.tree-node .span { color: var(--color-base-content); opacity: .45; font-size: 9px; }
.tree-node .surface { color: var(--role-color); font-weight: 600; }
.tree-node.terminal { background: color-mix(in srgb,var(--role-color) 13%,var(--color-base-100)); }
.tree-node.tree-evidence { outline: 2px solid var(--color-warning,#bc7b17); outline-offset: 2px; }
.syntax-tree details>summary { cursor: pointer; width: max-content; max-width: 100%; list-style: none; }
.syntax-tree details>summary::-webkit-details-marker { display: none; }
.syntax-tree details>summary:before { content: '▸'; display: inline-block; opacity: .55; margin-right: 5px; }
.syntax-tree details[open]>summary:before { transform: rotate(90deg); }
.syntax-tree details>ul { margin-left: 7px; }
.raw-card .card-body { padding: 0; min-height: 0; }
.raw-card pre { margin: 0; max-height: 350px; overflow: auto; padding: 14px; background: var(--color-base-200); color: var(--color-base-content); font: 11px/1.55 'JetBrains Mono',ui-monospace,monospace; }
#theme-menu { position: fixed; z-index: 100; width: min(560px,calc(100vw - 32px)); max-height: calc(100vh - 90px); overflow: auto; padding: 14px; background: var(--color-base-100); border: 1px solid var(--color-base-300); border-radius: 12px; box-shadow: 0 16px 48px #0004; }
.theme-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.theme-card { display: flex; flex-direction: column; gap: 7px; text-align: left; padding: 9px; border: 1px solid var(--color-base-300); border-radius: 8px; color: var(--color-base-content); background: var(--color-base-100); cursor: pointer; }
.theme-card:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.theme-card[aria-pressed="true"] { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.theme-card-name { font-size: 11px; font-weight: 600; text-transform: capitalize; }
.theme-swatches { display: flex; gap: 3px; }
.theme-swatches i { display: block; flex: 1; height: 10px; border-radius: 3px; }
.theme-swatches i:nth-child(1) { background: var(--color-primary); }
.theme-swatches i:nth-child(2) { background: var(--color-secondary); }
.theme-swatches i:nth-child(3) { background: var(--color-accent); }
.theme-swatches i:nth-child(4) { background: var(--color-neutral); }
.theme-swatches i:nth-child(5) { background: var(--color-base-300); }
.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; }
button:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media(max-width:950px) { .navbar-inner,.dashboard { margin-left: 16px; margin-right: 16px; } .dashboard { margin-top: 16px; } }
@media(max-width:680px) { .dashboard { grid-template-columns: 1fr; } .card-full { grid-column: 1; } .navbar { height: 60px; } .identity small { font-size: 9px; } .card-subtitle { display: none; } .control-group { width: 100%; justify-content: space-between; } .theme-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior: auto!important; transition: none!important; } }