:root{--bg: #f5f7fb;--bg-2: #eef2f8;--card: #ffffff;--card-2: #f2f5f9;--inset: #f4f6fa;--line: #e6ebf2;--line-2: #d6dde8;--ink: #16191f;--muted: #5c6474;--faint: #98a1b0;--accent: #0ea394;--accent-strong: #0a7a6f;--accent-wash: rgba(14, 163, 148, .12);--specimen-ink: #1a1d24;--serif: "Fraunces", Georgia, serif;--sans: "Space Grotesk", system-ui, -apple-system, sans-serif;--mono: "JetBrains Mono", ui-monospace, Menlo, monospace;--shadow-card: 0 1px 2px rgba(20, 30, 50, .04), 0 14px 34px -22px rgba(20, 30, 50, .28)}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;background:radial-gradient(1050px 520px at 82% -12%,rgba(14,163,148,.08),transparent 60%),linear-gradient(180deg,var(--bg),var(--bg-2) 55%);min-height:100vh;padding:60px 22px 90px}.wrap{max-width:1080px;margin:0 auto}.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}.layout-main{min-width:0}.layout-side{position:sticky;top:24px}.controls-panel{margin-bottom:0;padding:16px 18px 18px}.controls-panel .section-head{margin-bottom:12px}.controls-panel .group-label{margin:9px 0 5px;padding-top:9px}.topbar{display:flex;justify-content:flex-end;margin-bottom:18px}.social-links{display:flex;align-items:center;gap:16px}.social-links a{display:inline-flex;color:var(--faint);transition:color .15s,transform .1s}.social-links a:hover{color:var(--accent-strong)}.social-links a:active{transform:translateY(1px)}.masthead{margin-bottom:40px;max-width:640px}.eyebrow{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}.sig{color:var(--accent)}h1{font-family:var(--serif);font-optical-sizing:auto;font-weight:500;font-size:clamp(42px,8vw,66px);line-height:.98;letter-spacing:-.02em;margin:0 0 20px}.thesis{color:var(--muted);font-size:16px;line-height:1.65;max-width:580px;margin:0}.block{margin-bottom:40px}.panel{border:1px solid var(--line);border-radius:18px;padding:22px 22px 24px;margin-bottom:24px;background:var(--card);box-shadow:var(--shadow-card)}.section-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}h2{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0}.tag{font-size:11px;letter-spacing:.02em;color:var(--accent-strong);background:var(--accent-wash);border-radius:999px;padding:3px 10px}.caption{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 16px;max-width:600px}#mode-caption{min-height:4.8em}code{font-family:var(--mono);font-size:.86em;color:var(--accent-strong);background:var(--accent-wash);padding:1px 6px;border-radius:5px}.specimen{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 30px;box-shadow:var(--shadow-card)}.passage{position:relative;font-family:var(--serif);font-optical-sizing:auto;font-weight:400;color:var(--specimen-ink);font-size:24px;line-height:1.92}#demo span{transition:color .1s ease}#demo span.speaking{color:var(--accent)}.audio{display:flex;align-items:center;gap:14px;margin-top:14px;padding:12px 16px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-card)}.audio-btn{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--accent);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .1s}.audio-btn:hover{background:var(--accent-strong)}.audio-btn:active{transform:scale(.94)}.audio-btn svg{width:20px;height:20px;fill:currentColor;grid-area:1 / 1}.audio-btn .i-pause,.audio.is-playing .audio-btn .i-play{display:none}.audio.is-playing .audio-btn .i-pause{display:block}.audio-body{flex:1;min-width:0}.audio-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}.audio-label{font-size:13px;color:var(--ink);font-weight:500}.audio-time{font-family:var(--mono);font-size:11px;color:var(--muted);flex:none}.audio-track{height:5px;border-radius:999px;background:var(--line-2);cursor:pointer}.audio-fill{height:100%;width:0%;background:var(--accent);border-radius:999px}.seg{display:inline-flex;gap:3px;border:1px solid var(--line-2);border-radius:999px;padding:3px;background:var(--card-2)}.seg-btn{font:inherit;font-size:13px;font-weight:500;border:0;background:none;color:var(--muted);padding:6px 15px;border-radius:999px;cursor:pointer;transition:color .16s,background .16s,box-shadow .16s}.seg-btn:hover{color:var(--ink)}.seg-btn.is-active{background:var(--card);color:var(--accent-strong);box-shadow:0 1px 2px #141e321f}.controls{display:flex;flex-direction:column;gap:2px}.group-label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:16px 0 8px;padding-top:14px;border-top:1px solid var(--line)}.controls .group-label:first-child{margin-top:4px}.row{display:grid;grid-template-columns:116px 1fr 52px;align-items:center;gap:14px;min-height:34px}.row label{font-size:13px;color:var(--ink)}.row .val{font-family:var(--mono);font-size:12px;color:var(--accent-strong);text-align:right}.row .hex{font-family:var(--mono);font-size:12px;color:var(--muted)}.controls-panel .row{grid-template-columns:56px 1fr 40px;gap:10px;min-height:24px}.controls-panel input[type=range]{height:22px}.controls-panel .val,.controls-panel .hex{font-size:11px}.controls-panel input[type=color]{width:40px;height:26px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:24px;background:transparent;cursor:pointer;--fill: 50%}input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:999px;background:linear-gradient(90deg,var(--accent) 0 var(--fill),var(--line-2) var(--fill) 100%)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;margin-top:-5.5px;border-radius:50%;background:var(--card);border:1.5px solid var(--accent);box-shadow:0 1px 3px #141e3247;transition:box-shadow .15s}input[type=range]:hover::-webkit-slider-thumb,input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 5px var(--accent-wash),0 1px 3px #141e3247}input[type=range]::-moz-range-track{height:5px;border-radius:999px;background:var(--line-2)}input[type=range]::-moz-range-progress{height:5px;border-radius:999px;background:var(--accent)}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--card);border:1.5px solid var(--accent);box-shadow:0 1px 3px #141e3247}input[type=color]{width:52px;height:30px;border:1px solid var(--line-2);border-radius:8px;background:var(--card);cursor:pointer;padding:3px;justify-self:end;grid-column:3}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}button.ghost,button.mini{font:inherit;font-size:13px;font-weight:500;background:var(--card);color:var(--ink);border:1px solid var(--line-2);border-radius:999px;padding:8px 16px;cursor:pointer;transition:border-color .16s,color .16s,background .16s}button.mini{padding:5px 13px;font-size:12px}button.ghost:hover,button.mini:hover{border-color:var(--accent);color:var(--accent-strong);background:var(--accent-wash)}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.preset-box{border:1px solid var(--line);border-radius:12px;background:var(--inset);overflow:hidden}.preset-box-head{display:flex;align-items:center;justify-content:space-between;padding:9px 10px 9px 14px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}pre{margin:0;padding:14px;font-family:var(--mono);font-size:12px;line-height:1.6;color:#3a4250;white-space:pre;overflow-x:auto}.prompt-list{display:flex;flex-direction:column;gap:14px}.prompt-box{border:1px solid var(--line);border-radius:12px;background:var(--inset);overflow:hidden}.prompt-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 10px 14px;border-bottom:1px solid var(--line)}.prompt-title{font-size:13px;font-weight:500;color:var(--ink)}.prompt-sub{font-size:12px;font-weight:400;color:var(--faint);margin-left:6px}.prompt-box pre{max-height:210px;overflow:auto;white-space:pre-wrap;word-break:break-word}footer{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--faint);font-size:12.5px;letter-spacing:.02em;margin-top:46px}footer .dot{color:var(--line-2)}.masthead,.layout-main>section,footer{animation:rise .5s cubic-bezier(.22,.61,.36,1) both}.layout-side{animation:fade .5s ease both;animation-delay:.1s}footer{animation-delay:.12s}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes fade{0%{opacity:0}to{opacity:1}}@media(max-width:900px){.layout{grid-template-columns:1fr}.layout-side{position:static}.controls-panel{margin-bottom:24px}.controls-panel .row{grid-template-columns:116px 1fr 52px;gap:14px}.controls-panel input[type=color]{width:52px}}@media(max-width:560px){body{padding:40px 16px 70px}.preset-grid{grid-template-columns:1fr}.specimen{padding:20px}.passage{font-size:21px}.row{grid-template-columns:104px 1fr 46px;gap:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}