:root {
  color-scheme: light;
  --bg:#f2f3ef; --panel:#fafbf9; --line:#dcdfd7; --text:#243d33; --muted:#5d665c;
  --accent:#2e5745; --accent-hover:#224633; --accent-text:#fffef4; --accent-soft:#e7ecdf;
  --track:#dce2d5; --thumb:#365d48; --pill-bg:#e8eae4; --input-bg:#f5f6f2; --pill-on:#fafbf9;
  --dialog-border:#ffffffb0; --dialog-shadow:0 24px 100px #0e241c35;
  --serif: Georgia, 'Times New Roman', serif;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg); color:var(--text); font-synthesis:none;
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#141716; --panel:#1b1f1d; --line:#2b332d; --text:#dce3db; --muted:#97a498;
    --accent:#729c83; --accent-hover:#84ad94; --accent-text:#121814; --accent-soft:#222b25;
    --track:#29342c; --thumb:#7da38d; --pill-bg:#1c221e; --input-bg:#181d1a; --pill-on:#2b332d;
    --dialog-border:#ffffff14; --dialog-shadow:0 24px 100px #00000080;
  }
}
:root[data-theme="night"] {
  color-scheme: dark;
  --bg:#141716; --panel:#1b1f1d; --line:#2b332d; --text:#dce3db; --muted:#97a498;
  --accent:#729c83; --accent-hover:#84ad94; --accent-text:#121814; --accent-soft:#222b25;
  --track:#29342c; --thumb:#7da38d; --pill-bg:#1c221e; --input-bg:#181d1a; --pill-on:#2b332d;
  --dialog-border:#ffffff14; --dialog-shadow:0 24px 100px #00000080;
}
* { box-sizing:border-box }
body { margin:0; min-width:320px; background:var(--bg); -webkit-font-smoothing:antialiased }
button,input,select,textarea { font:inherit }
button { color:inherit; cursor:pointer; background:none; border:0; -webkit-tap-highlight-color:transparent }
button:disabled { cursor:default; opacity:.5 }
button,a,input,select,textarea,summary { touch-action:manipulation }
button,a { transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0 }
.icon-definitions { display:none }
.icon-button { display:grid; place-items:center; width:44px; height:44px; min-width:44px; min-height:44px; border:1px solid transparent; border-radius:50%; padding:9px; color:var(--muted); flex-shrink:0 }
@media(hover:hover) { .icon-button:hover { color:var(--text); background:var(--accent-soft) } }
.text-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; color:var(--accent); font-size:13px; font-weight:500; padding:8px 0; min-height:44px; line-height:1.4 }
@media(hover:hover) { .text-button:hover { color:var(--text) } }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
.skip-link { position:fixed; top:-100px; left:20px; z-index:99; background:var(--accent); color:var(--panel); padding:12px 20px; border-radius:8px }
.skip-link:focus { top:10px }
input[type="range"] { --range-progress:55%; display:block; appearance:none; -webkit-appearance:none; width:100%; height:5px; border-radius:20px; background:linear-gradient(to right,var(--accent) var(--range-progress),var(--track) var(--range-progress)); cursor:pointer; accent-color:var(--accent); margin:8px 0; outline-offset:8px } /* taste-skill-ignore: a hard-stop fill showing the value, not a gradient */
input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:17px; height:17px; border-radius:50%; background:var(--thumb); border:3px solid var(--panel); box-shadow:0 0 0 1px #45634c30,0 2px 5px #18372625; transition:box-shadow .2s }
@media(hover:hover) { input[type="range"]:hover::-webkit-slider-thumb { box-shadow:0 0 0 5px #45634c18 } }
input[type="range"]::-moz-range-thumb { width:12px; height:12px; border:3px solid var(--panel); border-radius:50%; background:var(--thumb); box-shadow:0 0 0 1px #45634c30 }
input[type="range"]::-moz-range-progress { background:var(--accent); height:5px; border-radius:20px }
select,input[type="text"],input[type="email"],input[type="password"],input[name="name"],input[type="number"],textarea { color:var(--text); border:1px solid var(--line); border-radius:14px; background:var(--input-bg); width:100%; font-size:14px; padding:12px; min-height:44px; transition:border-color .2s,box-shadow .2s }
@media(hover:hover) { select:hover,input[type="text"]:hover,input[type="email"]:hover,input[type="password"]:hover,input[type="number"]:hover,textarea:hover { border-color:var(--accent) } }
select { cursor:pointer; padding-right:12px }
input[type="text"],input[type="email"],input[type="password"],input[name="name"] { margin:6px 0 20px }
input::placeholder,textarea::placeholder { color:var(--muted) }
dialog { background:var(--panel); color:var(--text); border:1px solid var(--dialog-border); border-radius:24px; padding:30px; width:min(480px,calc(100vw - 32px)); max-height:85vh; max-height:85svh; overflow-y:auto; box-shadow:var(--dialog-shadow); overscroll-behavior:contain }
dialog::backdrop { background:#0e211aa6 }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:17px }
.dialog-heading h2 { font-family:var(--serif); font-size:29px; font-weight:400; line-height:1.15; letter-spacing:-.9px; margin:0 }
dialog p { font-size:14px; line-height:1.65; color:var(--muted); margin:0 0 20px }
dialog label { font-size:12px; font-weight:500; display:block; margin:0 0 9px }
.dialog-note { font-size:13px; color:var(--muted); margin:15px 0 20px }
.primary-button { display:inline-flex; align-items:center; justify-content:center; background:var(--accent); color:var(--accent-text); border:1px solid transparent; border-radius:100px; padding:13px 21px; min-height:46px; width:100%; font-size:13px; font-weight:550; line-height:1.4 }
@media(hover:hover) { .primary-button:hover { background:var(--accent-hover) } }
.primary-button:active { transform:translateY(1px) }
[hidden] { display:none!important }
/* Dialogs settle in and fade out (the Radix/shadcn Dialog motion, done with native <dialog>); the page behind stays put. */
dialog { opacity:0; transform:translateY(10px) scale(.985); transition:opacity .3s cubic-bezier(0,0,.3,1),transform .4s cubic-bezier(0,0,.3,1),overlay .4s allow-discrete,display .4s allow-discrete }
dialog[open] { opacity:1; transform:none }
/* Leaving is quicker than arriving: about two thirds of the way in. */
dialog:not([open]) { transition-duration:.2s,.26s,.26s,.26s }
@starting-style { dialog[open] { opacity:0; transform:translateY(10px) scale(.985) } }
dialog::backdrop { opacity:0; transition:opacity .35s,overlay .4s allow-discrete,display .4s allow-discrete }
dialog[open]::backdrop { opacity:1 }
@starting-style { dialog[open]::backdrop { opacity:0 } }
html:has(dialog[open]) { overflow:hidden; scrollbar-gutter:stable }
/* A small give under the finger, as on iOS. */
.icon-button:active { transform:scale(.92) }
dialog p,.dialog-note { text-wrap:pretty }
/* Increase Contrast (iOS, macOS, Windows): firmer lines and secondary text. */
@media(prefers-contrast:more) {
  :root { --line:#a3ab9f; --muted:#414a41; --track:#b9c1b3; --dialog-border:var(--line) }
  :root[data-theme="night"] { --line:#5b685e; --muted:#b7c2b7; --track:#4a574d }
}
@media(prefers-contrast:more) and (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) { --line:#5b685e; --muted:#b7c2b7; --track:#4a574d }
}
@media(max-width:600px) { dialog { padding:24px; border-radius:20px } select,input[type="text"],input[type="email"],input[type="password"],input[name="name"],input[type="number"],textarea { font-size:16px } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important } }