:root {
  color-scheme: light;
  --ink: #1e293b;
  --muted: #64748b;
  --line: #e2e8f0;
  --surface: #fff;
  --page: #f5f6f8;
  --accent: #3659d9;
  --accent-dark: #2446c4;
  --green: #15835e;
  --shadow: 0 14px 36px rgba(28, 40, 69, .055);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.5 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input, select, textarea { font: inherit; }
button:focus-visible, summary:focus-visible, label.folder-button:focus-within { outline: 3px solid #78b2a3; outline-offset: 3px; }
.shell { width: min(1140px, calc(100% - 36px)); margin: 0 auto; padding: 42px 0 28px; }
.topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 750; letter-spacing: .12em; margin: 0 0 7px; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(30px, 4vw, 42px); letter-spacing: -.04em; line-height: 1.1; margin: 0 0 9px; }
h2 { font-size: 21px; letter-spacing: -.025em; line-height: 1.15; margin: 0; }
.lede { color: var(--muted); font-size: 16px; margin: 0; }
.status-pill, .model-state, .raw-label { align-items: center; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); display: inline-flex; font-size: 12px; font-weight: 650; gap: 8px; padding: 7px 11px; white-space: nowrap; }
.status-pill { background: rgba(255,255,255,.75); margin-bottom: 3px; }
.status-dot { background: #f0a543; border-radius: 50%; height: 7px; width: 7px; }
.status-pill.ready { color: var(--green); border-color: #bfe7d5; background: #f2fbf7; }
.status-pill.ready .status-dot { background: #20a66f; }
.status-pill.error { color: #aa3c49; border-color: #f1c9ce; background: #fff8f8; }
.status-pill.error .status-dot { background: #d84758; }
.privacy-note { align-items: center; background: #eef2ff; border: 1px solid #dce4ff; border-radius: 13px; color: #405174; display: flex; gap: 12px; margin-bottom: 17px; padding: 12px 16px; }
.privacy-note p { font-size: 13px; margin: 0; }
.privacy-note strong { color: #243a78; }
.note-icon { align-items: center; background: #dce5ff; border-radius: 50%; color: var(--accent); display: inline-flex; flex: 0 0 auto; font-weight: 800; height: 27px; justify-content: center; width: 27px; }
.panel { background: var(--surface); border: 1px solid #e8ebf0; border-radius: 17px; box-shadow: var(--shadow); }
.model-panel { margin-bottom: 17px; padding: 21px 23px 17px; }
.section-heading { align-items: flex-start; display: flex; justify-content: space-between; gap: 14px; margin-bottom: 19px; }
.model-state { font-weight: 600; }
.model-state.loaded { background: #f2fbf7; border-color: #ccebdd; color: var(--green); }
.load-row { align-items: center; display: flex; flex-wrap: wrap; gap: 11px; }
.folder-button, .primary-button, .secondary-button, .quiet-button { align-items: center; border: 0; border-radius: 10px; cursor: pointer; display: inline-flex; font-weight: 700; justify-content: center; min-height: 40px; padding: 0 15px; transition: background .15s ease, transform .15s ease, opacity .15s ease; }
.folder-button { background: #f1f4fa; color: #334155; cursor: pointer; }
.folder-button:hover { background: #e9eef8; }
#pack-folder { height: 1px; opacity: 0; position: absolute; width: 1px; z-index: -1; }
.file-summary { color: var(--muted); flex: 1 1 180px; font-size: 12px; min-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.language-id-field, .select-label { color: #526077; display: flex; flex-direction: column; font-size: 11px; font-weight: 700; gap: 5px; letter-spacing: .025em; }
.language-id-field input, select, .text-input { background: #fff; border: 1px solid #dce2eb; border-radius: 9px; color: var(--ink); outline: none; }
.language-id-field input { padding: 8px 10px; width: 100px; }
input:focus, select:focus { border-color: #8295e7; box-shadow: 0 0 0 3px rgba(54,89,217,.1); }
.primary-button { background: var(--accent); color: white; }
.primary-button:hover:not(:disabled), .secondary-button:hover:not(:disabled) { background: var(--accent-dark); transform: translateY(-1px); }
.primary-button:disabled, .secondary-button:disabled { cursor: not-allowed; opacity: .43; }
.help-text { color: #778398; font-size: 11px; margin: 12px 0 0; }
code { background: #f1f3f7; border-radius: 4px; color: #3b4f83; padding: 1px 4px; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 17px; align-items: start; }
.experiment-panel { min-width: 0; padding: 22px 23px; }
.raw-label { background: #fafbfc; font-size: 10px; padding: 5px 8px; }
.field-label { color: #536177; display: block; font-size: 12px; font-weight: 700; margin: 15px 0 6px; }
.optional { color: #8b96a8; font-size: 11px; font-weight: 500; margin-left: 3px; }
.text-input { height: 42px; padding: 0 12px; width: 100%; }
.options-row { display: flex; gap: 12px; margin-top: 13px; }
.select-label { flex: 1; min-width: 0; }
.select-label select { font-size: 12px; font-weight: 550; letter-spacing: 0; min-width: 0; padding: 8px; width: 100%; }
.check-row { align-items: center; color: #536177; display: flex; font-size: 12px; gap: 8px; margin: 13px 0 15px; }
.check-row input { accent-color: var(--accent); height: 15px; margin: 0; width: 15px; }
.secondary-button { background: var(--accent); color: white; }
.run-button { width: 100%; }
.flow-instructions { color: var(--muted); font-size: 12px; margin: -7px 0 13px; }
.canvas-wrap { background: linear-gradient(180deg, #f2f5fa, #edf1f7); border: 1px solid #e2e7ef; border-radius: 12px; overflow: hidden; position: relative; }
#flow-canvas { cursor: crosshair; display: block; height: auto; touch-action: none; width: 100%; }
.canvas-hint { color: #a1aabd; font-size: 12px; left: 50%; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%,-50%); }
.flow-actions { display: flex; gap: 9px; margin-top: 14px; }
.flow-actions .secondary-button { flex: 1; }
.quiet-button { background: #f1f4f8; color: #59677d; }
.quiet-button:hover { background: #e8edf4; }
.results { display: grid; gap: 7px; margin-top: 16px; }
.empty-state { background: #f8f9fb; border: 1px dashed #dce2ea; border-radius: 10px; color: #8792a3; font-size: 12px; padding: 16px; text-align: center; }
.candidate { align-items: center; background: #fff; border: 1px solid #e6eaf0; border-radius: 10px; display: grid; gap: 8px; grid-template-columns: 25px minmax(0,1fr) auto; padding: 9px 10px; }
.rank { align-items: center; background: #f0f3f8; border-radius: 7px; color: #6b778b; display: inline-flex; font-size: 11px; font-weight: 750; height: 24px; justify-content: center; width: 24px; }
.candidate:first-child .rank { background: #e9edff; color: var(--accent); }
.candidate-text { font-size: 14px; font-weight: 720; overflow-wrap: anywhere; }
.candidate-meta { color: #8993a3; font-size: 10px; text-align: right; white-space: nowrap; }
.candidate-tags { color: #7d70b1; font-size: 10px; grid-column: 2 / 4; margin-top: -5px; }
.candidate-tags:empty { display: none; }
.footer { align-items: flex-start; color: #8791a1; display: flex; font-size: 11px; justify-content: space-between; gap: 20px; margin-top: 20px; }
.footer p { margin: 0; max-width: 660px; }
.footer-right { text-align: right; white-space: nowrap; }
@media (max-width: 840px) {
  .workspace { grid-template-columns: 1fr; }
  .experiment-panel { padding: 19px; }
}
@media (max-width: 600px) {
  .shell { padding-top: 27px; width: min(100% - 22px, 540px); }
  .topbar { align-items: flex-start; flex-direction: column; gap: 13px; }
  .status-pill { margin: 0; }
  .model-panel { padding: 18px; }
  .load-row { align-items: stretch; }
  .folder-button { flex: 1 0 calc(50% - 6px); }
  .file-summary { flex: 1 0 calc(50% - 6px); order: 3; }
  .language-id-field { flex: 1 0 calc(35% - 6px); }
  .primary-button { flex: 1 0 calc(65% - 6px); align-self: end; }
  .footer { flex-direction: column; }
  .footer-right { text-align: left; }
}

/* The everyday typing surface. Research controls remain below the demo. */
:root { --page: #f5f5f0; --ink: #263b36; --muted: #71807a; --accent: #28715e; --accent-dark: #1d5949; }
.shell { width: min(1220px, calc(100% - 64px)); padding-top: 34px; }
.topbar { border-bottom: 1px solid #dee3db; padding-bottom: 26px; margin-bottom: 40px; }
.topbar h1 { font-size: clamp(29px, 3.4vw, 42px); font-weight: 650; letter-spacing: -.045em; }
.topbar .eyebrow { font-size: 10px; letter-spacing: .15em; margin-bottom: 13px; }
.topbar .lede { font-size: 14px; }
.status-pill { font-size: 11px; max-width: 310px; overflow: hidden; text-overflow: ellipsis; }
.status-pill span:last-child { overflow: hidden; text-overflow: ellipsis; }
.typing-workspace { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(0, 400px) minmax(190px, .85fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.typing-intro { padding-bottom: 40px; }
.demo-label { display: inline-flex; align-items: center; gap: 7px; color: #65796c; font-size: 11px; }
.demo-label .status-dot { width: 6px; height: 6px; background: #6b9a7d; }
.typing-intro h2 { font-size: clamp(27px, 2.8vw, 37px); line-height: 1.18; font-weight: 550; letter-spacing: -.04em; margin: 22px 0 17px; }
.typing-intro > p { font-size: 14px; color: var(--muted); line-height: 1.8; max-width: 270px; }
.typing-tips { padding: 0; margin: 32px 0; list-style: none; display: grid; gap: 23px; }
.typing-tips li { display: flex; gap: 13px; }
.typing-tips li > span { font: 11px/25px ui-monospace, monospace; color: #8b9b8f; }
.typing-tips strong { font-size: 12px; font-weight: 650; }
.typing-tips p { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 4px 0 0; max-width: 210px; }
.typing-intro .local-note { font-size: 11px; display: flex; gap: 8px; align-items: center; color: #849087; }
.phone-column { min-width: 0; }
.phone { background: #fcfcf8; border: 7px solid #293a34; border-radius: 40px; overflow: hidden; box-shadow: 0 25px 55px -20px #374c3840, 0 0 0 1px #172c26; display: flex; flex-direction: column; height: 694px; }
.phone-status { height: 42px; flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 22px; font-size: 11px; font-weight: 700; position: relative; }
.camera-pill { position: absolute; left: 50%; transform: translateX(-50%); width: 87px; height: 20px; border-radius: 20px; background: #293a34; top: 7px; }
.note-toolbar { display: flex; align-items: center; justify-content: space-between; margin: 0 21px; border-bottom: 1px solid #e9ece4; height: 53px; flex-shrink: 0; }
.notes-brand { color: #3b6d54; font-size: 14px; font-weight: 650; display: flex; gap: 8px; align-items: center; }
.notes-brand > span { font-size: 23px; font-weight: 400; }
.note-actions { display: flex; gap: 4px; }
.icon-button { border: none; background: transparent; color: #758277; width: 35px; height: 36px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.icon-button:hover { background: #eaf0e6; color: var(--accent); }
.icon-button svg { width: 17px; height: 17px; }
.note-paper { padding: 21px 23px 13px; flex: 1; min-height: 150px; display: flex; flex-direction: column; }
.note-date { color: #929a8b; font-size: 10px; letter-spacing: .04em; margin-bottom: 9px; }
.note-title { font-size: 25px; font-weight: 650; letter-spacing: -.05em; margin-bottom: 11px; }
#note-editor { flex: 1; min-height: 80px; width: 100%; padding: 0; border: none; resize: none; background: transparent; color: #3c4941; font-size: 17px; line-height: 1.8; outline: none; caret-color: #28715e; border-radius: 0; }
#note-editor::placeholder { color: #adb3a6; }
.note-bottom { display: flex; justify-content: space-between; gap: 8px; color: #9aA18f; font-size: 9px; padding-top: 8px; }
#note-feedback { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#word-count { white-space: nowrap; }
.phone-keyboard { background: #e2e7de; border-top: 1px solid #d4ddcf; padding: 0 5px; user-select: none; -webkit-user-select: none; flex-shrink: 0; }
.suggestion-bar { height: 49px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; padding: 0 3px; }
.suggestion { border: none; border-right: 1px solid #cbd4c6; background: transparent; color: #405341; font-size: 14px; height: 28px; padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.suggestion:last-child { border-right: none; }
.suggestion.best { font-weight: 750; color: #245944; }
.suggestion:hover:enabled { background: #d2decc; border-radius: 5px; }
.suggestion:disabled { opacity: .4; cursor: default; }
.keyboard-keys { position: relative; touch-action: none; }
.key-row { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 4px; margin-bottom: 8px; }
.key-row.middle { padding: 0 5%; grid-template-columns: repeat(18, minmax(0, 1fr)); }
.key { grid-column: span 2; position: relative; min-width: 0; height: 45px; padding: 0; border: none; border-radius: 6px; background: #fcfdf9; color: #2f3e33; box-shadow: 0 1px 1px #596f4e44; cursor: pointer; font-size: 21px; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.key:hover { background: #f4f8ee; }
.key.pressed { background: #bbd4b1; transform: translateY(1px); box-shadow: none; }
.key.utility { background: #cad5c3; font-size: 19px; }
.key.wide { grid-column: span 3; }
.key.mode { font-size: 12px; font-weight: 650; }
.key.space { grid-column: span 10; font-size: 11px; letter-spacing: .04em; color: #7c8977; }
.key.return { background: #34735c; color: #fff; font-size: 24px; }
.key.active { background: #6a9260; color: white; }
.key .key-preview { position: absolute; background: #fff; box-shadow: 0 3px 12px #263b3630; border: 1px solid #d6dfd0; border-radius: 9px; bottom: calc(100% + 5px); height: 52px; width: 43px; display: none; align-items: center; justify-content: center; font-size: 29px; z-index: 4; pointer-events: none; }
.key.pressed .key-preview { display: flex; }
#swipe-trail { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
#swipe-trail polyline { fill: none; stroke: #4b9e79; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.keyboard-bottom { display: flex; justify-content: space-between; padding: 1px 8px 4px; gap: 8px; font-size: 8px; color: #7f8e77; }
#keyboard-state { max-width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-indicator { height: 4px; width: 105px; background: #62705a; border-radius: 4px; margin: 9px auto 7px; }
.editor-help { margin: 16px 0 0; text-align: center; color: #8a9487; font-size: 10px; line-height: 1.7; }
.typing-settings { padding-bottom: 42px; }
.typing-settings .eyebrow { font-size: 9px; letter-spacing: .1em; color: #8a9787; }
.typing-settings h3 { font-size: 16px; font-weight: 550; letter-spacing: -.025em; margin: 8px 0 22px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0; font-size: 12px; cursor: pointer; }
.setting-row small { display: block; color: #8a9487; font-size: 10px; margin-top: 4px; line-height: 1.5; }
.setting-row input { appearance: none; -webkit-appearance: none; flex: 0 0 30px; width: 30px; height: 18px; border-radius: 20px; background: #c7cfc1; cursor: pointer; position: relative; transition: background .15s; }
.setting-row input::after { content: ''; position: absolute; top: 3px; left: 3px; height: 12px; width: 12px; background: #fff; border-radius: 50%; transition: transform .15s; }
.setting-row input:checked { background: #568b69; }
.setting-row input:checked::after { transform: translateX(12px); }
.settings-note { color: #81907c; font-size: 11px; line-height: 1.8; border-top: 1px solid #dfe5d9; padding-top: 21px; margin-top: 25px; }
.inline-button { background: none; border: none; color: var(--accent); font: inherit; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.engine-caption { color: #9aA293; font-size: 10px; line-height: 1.8; margin: 22px 0 0; }
.research-tools { margin-top: 37px; border-top: 1px solid #dce3d5; border-bottom: 1px solid #dce3d5; }
.research-tools > summary { padding: 20px 2px; cursor: pointer; font-size: 12px; color: #53684f; }
.research-tools > summary > span:first-child { margin-left: 8px; font-weight: 650; }
.research-summary { float: right; font-size: 11px; color: #909b87; }
.research-content { padding-bottom: 22px; }
.footer { color: #929b89; font-size: 10px; }
.privacy-note { background: #eef3e9; border-color: #dce7d5; color: #586b50; }
.privacy-note strong { color: #425a39; }
.note-icon { background: #dde8d4; }
@media (max-width: 1050px) {
  .typing-workspace { grid-template-columns: minmax(170px, 1fr) minmax(0, 390px); gap: 35px; max-width: 850px; margin: auto; }
  .typing-settings { grid-column: 1; grid-row: 1; align-self: end; padding: 0; margin-top: 330px; }
  .typing-intro { grid-column: 1; grid-row: 1; align-self: start; padding: 15px 0 0; }
  .typing-tips { display: none; }
  .typing-intro .local-note { margin-top: 20px; }
  .typing-settings .engine-caption { display: none; }
}
@media (max-width: 680px) {
  .shell { width: min(100% - 28px, 470px); padding-top: 22px; }
  .topbar { gap: 16px; align-items: flex-start; margin-bottom: 24px; padding-bottom: 21px; }
  .topbar h1 { font-size: 30px; }
  .topbar .lede { font-size: 12px; }
  .topbar .eyebrow { font-size: 9px; }
  .typing-workspace { display: flex; flex-direction: column; gap: 23px; }
  .typing-intro { display: none; }
  .phone-column { width: 100%; max-width: 400px; }
  .phone { height: min(694px, calc(100svh - 220px)); min-height: 560px; border-width: 5px; border-radius: 32px; }
  .typing-settings { margin-top: 0; width: 100%; padding: 0 8px; }
  .typing-settings .eyebrow, .typing-settings h3 { display: none; }
  .setting-row { margin: 13px 0; }
  .settings-note { margin: 18px 0 0; padding-top: 13px; }
  .research-tools { margin-top: 23px; }
  .research-summary { display: none; }
  .editor-help { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
.active-languages { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 18px; }
.active-languages label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.active-languages input { width: 18px; height: 18px; accent-color: #176b5b; }