:root {
  --blue:#1269df; --blue-dark:#0759c7; --blue-pale:#edf4ff;
  --ink:#202632; --muted:#677180; --line:#e3e7ed; --surface:#f5f6f8;
  --green:#19734f; --violet:#7850a3;
  color-scheme:light;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Yu Gothic UI",sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--surface); color:var(--ink); font-size:16px; line-height:1.6; }
button,textarea { font:inherit; }
button,summary { cursor:pointer; touch-action:manipulation; }
[hidden] { display:none !important; }
button:disabled { cursor:default; }
a { color:inherit; text-underline-offset:3px; }
h1,h2,h3 { text-wrap:balance; }
p { text-wrap:pretty; }
:is(button,summary,a,textarea):focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.site-header { max-width:840px; min-height:76px; margin:auto; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:9px; flex-shrink:0; font-size:15px; font-weight:700; text-decoration:none; }
.brand-icon { display:grid; place-items:center; width:30px; height:30px; background:var(--blue); border-radius:9px; color:white; font-size:18px; font-weight:650; }
.header-actions { display:flex; align-items:center; gap:3px; padding:4px; border:1px solid var(--line); border-radius:11px; background:#eceff3; }
.header-link { display:flex; align-items:center; justify-content:center; padding:6px 12px; border-radius:7px; text-decoration:none; color:var(--muted); font-size:13px; font-weight:600; white-space:nowrap; }
.header-link[aria-current="page"] { background:white; color:var(--ink); box-shadow:0 1px 3px #20263212; }
.header-link:hover { color:var(--blue-dark); }
main { max-width:840px; margin:auto; padding:0 24px 36px; }
.demo-page { padding-top:18px; }
.lab { background:white; border:1px solid var(--line); border-radius:16px; box-shadow:0 2px 8px #20263205; }
.lab-head { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 20px; border-bottom:1px solid var(--line); }
.demo-title { margin:0; font-size:13px; font-weight:650; white-space:nowrap; }
.model-bar { display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; }
.model-status-wrap { min-width:0; color:var(--muted); text-align:right; font-size:11px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.model-status-wrap progress { display:block; width:100%; height:3px; margin-top:5px; accent-color:var(--blue); }
progress[value="0"],progress[value="100"] { display:none; }
.workspace { padding:8px 20px 16px; }
.input-head { display:flex; align-items:center; justify-content:space-between; min-height:32px; gap:12px; }
.input-head label { color:var(--muted); font-size:11px; font-weight:500; }
.input-tools { display:flex; align-items:center; gap:12px; }
.quiet { padding:5px 2px; border:0; background:transparent; color:var(--muted); font-size:12px; }
.quiet:hover { color:var(--blue-dark); }
.quiet:disabled { opacity:.45; }
.sample-menu { position:relative; color:var(--muted); font-size:12px; }
.sample-menu summary { list-style:none; display:flex; align-items:center; gap:5px; padding:5px 2px; }
.sample-menu summary::-webkit-details-marker { display:none; }
.sample-menu summary::after { content:"⌄"; font-size:13px; }
.sample-menu[open] summary { color:var(--blue-dark); }
.samples { position:absolute; top:100%; right:0; z-index:10; display:grid; min-width:168px; padding:6px; border:1px solid var(--line); border-radius:10px; background:white; box-shadow:0 4px 12px #20263214; }
.samples>span { display:none; }
.samples button { border:0; border-radius:5px; padding:9px 12px; background:transparent; color:var(--ink); text-align:left; font-size:13px; }
.samples button:hover { background:var(--blue-pale); color:var(--blue-dark); }
textarea { display:block; width:100%; height:64px; min-height:56px; max-height:40dvh; resize:vertical; margin:0; padding:8px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:white; color:var(--ink); caret-color:var(--blue); font-size:21px; line-height:1.5; }
textarea::placeholder { color:#818a98; font-size:18px; }
textarea:focus-visible { border-bottom-color:var(--blue); outline:none; box-shadow:0 1px 0 var(--blue); }
textarea:disabled { opacity:.6; }
.inline-result { display:flex; align-items:baseline; gap:12px; margin:10px 0; }
.output,.conversion,.history-text { white-space:pre-wrap; overflow-wrap:anywhere; }
.output { flex:1; min-width:0; min-height:22px; font:14px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace; }
.output .jp { color:var(--blue-dark); background:#e8f1ff; }
.output .en { color:var(--green); background:#e8f4ed; }
.output .tex { color:var(--violet); background:#f0eaf7; }
.inline-result #status { max-width:40%; color:var(--muted); text-align:right; font-size:11px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.placeholder,.pending { color:var(--muted); font-size:12px; }
.candidate-line { padding:10px 12px; border-radius:8px; background:var(--blue-pale); }
.candidate-number { display:none; }
.conversion { min-height:28px; font-size:22px; line-height:1.5; }
.conversion:not(:has(span)) { color:var(--muted); font-size:13px; }
.candidate-line:has(.conversion:not(:has(span))) { background:var(--surface); }
.conversion[data-stale="true"] { opacity:.45; }
#conversion-state { display:block; margin-top:4px; color:var(--muted); font-size:11px; }
#conversion-state:empty { display:none; }
.commit-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; color:var(--muted); font-size:11px; }
.commit-bar #count { margin-left:auto; font-variant-numeric:tabular-nums; }
.commit-bar button,.model-button { flex-shrink:0; border:0; border-radius:8px; padding:7px 15px; background:var(--blue); color:white; font-size:13px; font-weight:600; }
.commit-bar button:hover:not(:disabled),.model-button:hover:not(:disabled) { background:var(--blue-dark); }
.commit-bar button:disabled,.model-button:disabled { background:#edf0f4; color:#828c99; }
.commit-bar button:active:not(:disabled),.samples button:active { background:var(--blue-dark); color:white; }
.model-button { padding:5px 10px; font-size:12px; }
.history-section { margin-top:16px; padding:16px 20px; border:1px solid var(--line); border-radius:12px; background:#fafbfd; }
.history-section:has(.empty-history),.history-section:has(.document-text:empty) { display:none; }
.document-header { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.empty-history { margin:10px 0 0; color:var(--muted); font-size:12px; }
.history-row { display:flex; align-items:baseline; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.history-row:last-child { border:0; padding-bottom:0; }
.history-row .index { color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; }
.history-text { flex:1; min-width:0; font-size:17px; }
.history-row button { border:0; background:transparent; padding:5px; color:var(--blue-dark); font-size:12px; }
.demo-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; padding:16px 2px 0; color:var(--muted); font-size:11px; }
.demo-footer nav { display:flex; gap:16px; }
.demo-footer a { text-decoration:none; }
.demo-footer a:hover { text-decoration:underline; }
.touch-help { display:none; }
@media(max-width:600px) {
  .site-header { min-height:0; padding:12px; gap:10px; flex-wrap:nowrap; }
  .brand { gap:0; }
  .brand-name { display:none; }
  .brand-icon { width:27px; height:27px; font-size:16px; border-radius:8px; }
  .header-actions { flex:1; }
  .header-link { flex:1; text-align:center; padding:7px 5px; font-size:12px; }
  main { padding:0 12px 24px; }
  .demo-page { padding-top:2px; }
  .lab { border-radius:12px; }
  .lab-head { padding:9px 14px; gap:10px; align-items:baseline; }
  .demo-title { font-size:12px; }
  .workspace { padding:4px 14px 12px; }
  textarea { height:62px; font-size:19px; }
  textarea::placeholder { font-size:16px; }
  .model-status-wrap { font-size:10px; }
  .history-section { margin-top:10px; padding:10px 14px; }
  .conversion { font-size:20px; }
  .commit-bar { gap:8px; }
  .demo-footer { padding:12px 4px 0; font-size:10px; }
}
@media(pointer:coarse) {
  .quiet,.sample-menu summary,.samples button,.commit-bar button,.model-button,.header-link,.history-row button { min-height:44px; }
  .quiet,.sample-menu summary { display:inline-flex; align-items:center; }
  .keyboard-help { display:none; }
  .touch-help { display:inline; }
}
@media(prefers-contrast:more) { :root { --muted:#3d4655; --line:#a2aab6; } }