/* Tree Whisper — dusk forest canvas, cream type, one amber accent.
   Colors are drawn from icon.png: evergreen gradient, cream needles, amber trunk. */
:root{
 color-scheme:dark;
 --bg:#0c211b;--bg-top:#153f34;
 --ink:#fff5dd;--muted:#b9cbb9;--rule:#fff5dd1f;
 --amber:#e9b872;--on-amber:#14261f;
 --paper:#fbfaf6;--paper-ink:#1d1d1f;--paper-muted:#606066;--paper-line:#e3e2dd;
 font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Helvetica,Arial,sans-serif;
 font-synthesis:none;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:linear-gradient(180deg,var(--bg-top) 0,#0f2c24 42%,var(--bg) 78%);color:var(--ink);font-size:1rem;line-height:1.6}
/* One soft ambient light behind the window; nothing else decorative. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(55% 45% at 72% 38%,#2c6f5840,transparent 72%)}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
h1,h2,h3,p,dl,dd,figure{margin:0}
h1,h2,h3{overflow-wrap:anywhere}
.wrap{width:min(1180px,calc(100% - 96px));margin-inline:auto}

/* Header */
.site-header{min-height:76px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;padding-block:12px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:1.0625rem;font-weight:600;letter-spacing:-.02em}
.brand img{width:32px;height:32px;border-radius:8px;box-shadow:0 2px 6px #0006}
.version{font-size:.8125rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(40px,6vw,88px);padding:24px 0 44px}
h1{font-size:clamp(3rem,5.6vw,4.75rem);font-weight:650;line-height:.98;letter-spacing:-.045em}
.intro{margin-top:26px;font-size:1.125rem;line-height:1.55;color:var(--muted);max-width:32ch}
.intro b{color:var(--ink);font-weight:600;white-space:normal}
.essentials{margin-top:22px;font-size:.9375rem;font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:0;max-width:100%;min-height:52px;padding:12px 22px;border-radius:12px;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;white-space:normal;text-align:center}
.button:hover{text-decoration:none}
.download-button{background:var(--amber);color:var(--on-amber);box-shadow:inset 0 1px 0 #fff5dd66,0 12px 28px -12px #e9b87280}
.download-button:hover{background:#f2c47f}
.download-button span{font-size:1.125rem}
.source-button{border:1px solid #fff5dd66;color:var(--ink);background:transparent}
.source-button:hover{border-color:var(--ink);background:#fff5dd0a}
.compat{margin-top:14px;font-size:.875rem;line-height:1.5;color:var(--muted)}

/* Mail window (illustration) */
.preview-area{min-width:0;position:relative}
.mac-window{position:relative;background:var(--paper);color:var(--paper-ink);border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px #ffffff2b,0 44px 90px -30px #000000d9,0 18px 36px -18px #000000a6}
.titlebar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;min-height:44px;padding:0 14px;background:linear-gradient(#f7f6f2,#ebeae5);border-bottom:1px solid #d3d2cc;font-size:.8125rem}
.lights{display:flex;gap:8px}
.lights i{display:block;width:12px;height:12px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px #00000024}
.lights i:nth-child(2){background:#febc2e}
.lights i:nth-child(3){background:#28c840}
.title{font-weight:600;color:#3a3a3c;text-align:center}
.draft-state{justify-self:end;text-align:right;color:var(--paper-muted)}
.fields{padding:2px 18px 0;font-size:.9375rem}
.field{display:flex;gap:10px;align-items:baseline;min-height:36px;padding:7px 0;border-bottom:1px solid var(--paper-line)}
.field span{color:var(--paper-muted);min-width:5.5ch}
.field b{font-weight:500}
.paper-body{padding:18px 18px 62px;min-height:196px;font-size:1.0625rem;line-height:1.6}
.note-lead{margin-bottom:12px}
.dictated-line{min-height:3.2em}
.placeholder{color:var(--paper-muted)}
/* Insertion point: before the placeholder while idle, after the text once inserted. */
.dictated-line::before,.dictated-line::after{content:"";display:inline-block;width:2px;height:1.05em;margin:0 3px 0 1px;vertical-align:-.16em;background:#0a84ff;animation:caret 1.1s steps(2,jump-none) 4}
.dictated-line::after{display:none;margin:0 0 0 2px}
.preview-area[data-phase=complete] .dictated-line::before{display:none}
.preview-area[data-phase=complete] .dictated-line::after{display:inline-block}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}

/* Floating recognition HUD, overlapping the window edge */
.voice-stage{display:flex;justify-content:center;position:relative;z-index:2;margin-top:-32px}
.app-indicator{width:280px;max-width:calc(100% - 24px);min-height:64px;border-radius:32px;padding:10px 20px 10px 14px;display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;background:linear-gradient(#ffffff14,transparent 50%),#0d221be6;-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border:1px solid #ffffff2e;box-shadow:0 16px 32px -8px #000000b3,inset 0 1px 0 #ffffff14;transition:border-color .25s,box-shadow .25s}
.app-indicator[data-state=listening]{border-color:#e9b87280;box-shadow:0 16px 32px -8px #000000b3,0 0 0 4px #e9b87226,inset 0 1px 0 #ffffff14}
.app-indicator[data-state=complete]{border-color:#a3d9ba66}
.voice-meter{width:72px;height:40px;display:flex;justify-content:center;align-items:center;gap:3px;border-radius:12px;background:linear-gradient(#0005,#0001);box-shadow:inset 0 -1px 0 #ffffff14}
.voice-meter i{display:block;width:4px;flex:0 0 4px;height:4px;border-radius:3px;background:linear-gradient(#fff2c7,#ffc46e 55%,#d17a36);box-shadow:inset 0 0 0 .5px #ffffff44;opacity:.62}
.indicator-copy{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.25;color:#fff;overflow-wrap:anywhere}
.indicator-copy strong{font-size:.9375rem;font-weight:600}
.indicator-copy span{font-size:.875rem;color:#d7e2dc}
.voice-meter i:nth-child(1){--crest:19px;--delay:-.20s}.voice-meter i:nth-child(2){--crest:25px;--delay:-.31s}.voice-meter i:nth-child(3){--crest:30px;--delay:-.42s}.voice-meter i:nth-child(4){--crest:22px;--delay:-.53s}.voice-meter i:nth-child(5){--crest:28px;--delay:-.64s}.voice-meter i:nth-child(6){--crest:24px;--delay:-.75s}.voice-meter i:nth-child(7){--crest:20px;--delay:-.86s}.voice-meter i:nth-child(8){--crest:27px;--delay:-.97s}.voice-meter i:nth-child(9){--crest:18px;--delay:-1.08s}
.app-indicator[data-state=listening] .voice-meter i{animation:illustrated-voice .85s ease-in-out infinite;animation-delay:var(--delay);opacity:1;filter:drop-shadow(0 0 2px #ffb95935)}
.app-indicator[data-state=processing] .voice-meter i{height:7px;background:linear-gradient(#ebfff5,#a3d9ba);animation:processing-sweep 1.5s ease-in-out infinite;animation-delay:var(--delay)}
.app-indicator[data-state=complete] .voice-meter i{height:5px;background:#a3d9ba;opacity:.85}
.preview-area[data-paused=true] .voice-meter i,.preview-area[data-paused=true] .dictated-line::before,.preview-area[data-paused=true] .dictated-line::after{animation-play-state:paused}
@keyframes illustrated-voice{0%,100%{height:6px}28%{height:var(--crest)}57%{height:9px}77%{height:calc(var(--crest)*.74)}}
@keyframes processing-sweep{0%,100%{opacity:.4;transform:scaleY(.75)}50%{opacity:1;transform:scaleY(1.75)}}

/* Demo controls */
.demo-console{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:20px;min-height:44px}
.play-demo{min-height:44px;padding:10px 16px;border-radius:10px;border:1px solid #fff5dd40;background:#fff5dd12;font-size:.9375rem;font-weight:600;white-space:nowrap}
.play-demo:hover{background:#fff5dd24}
.demo-step{display:flex;gap:6px}
.key{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:4px 9px;border-radius:7px;border:1px solid #fff5dd33;background:#fff5dd0f;font-size:.9375rem;line-height:1;box-shadow:inset 0 1px 0 #fff5dd1a,0 2px 0 #00000066;transition:transform .12s,background .12s,box-shadow .12s}
.key small{font-size:.875rem;color:var(--muted)}
.key.held{background:var(--amber);border-color:var(--amber);color:var(--on-amber);transform:translateY(2px);box-shadow:none}
.key.held small{color:var(--on-amber)}
#demo-status{flex:1;min-width:12ch;font-size:.9375rem;line-height:1.4;color:var(--muted)}
.spoken-example{margin-top:14px;font-size:1rem;line-height:1.5;color:var(--muted)}
.spoken-example>span{margin-right:8px;font-size:.875rem;font-weight:600;color:var(--ink)}
.spoken-example q{quotes:none;transition:color .3s}
.preview-area[data-phase=listening] .spoken-example q{color:var(--ink)}
.demo-disclosure{margin-top:8px;font-size:.75rem;color:var(--muted)}

/* Footer */
.footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 20px;border-top:1px solid var(--rule);padding-block:14px 26px;font-size:.8125rem;color:var(--muted)}
.footer nav{display:flex;flex-wrap:wrap;gap:0 24px;font-size:.875rem}
.footer nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}

/* Privacy dialog */
dialog{width:min(500px,calc(100% - 32px));max-height:calc(100dvh - 64px);padding:28px;border:1px solid #fff5dd26;border-radius:16px;background:#123e35;color:var(--ink);box-shadow:0 30px 90px #000000a6}
dialog::backdrop{background:#05110dcc;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body:has(dialog[open]){overflow:hidden}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.dialog-heading h2{font-size:1.375rem;font-weight:650;letter-spacing:-.025em}
.close-dialog{flex-shrink:0;width:44px;height:44px;border:0;border-radius:50%;background:#fff5dd1a;font-size:1.5rem;line-height:1}
.close-dialog:hover{background:#fff5dd2e}
.privacy-copy h3{font-size:1rem;font-weight:600;margin-bottom:6px}
.privacy-copy p{font-size:1rem;line-height:1.6;color:#c3d3c2;margin-bottom:20px}
.privacy-copy p:last-child{margin-bottom:0}
.privacy-copy .source-note{font-size:.9375rem;padding-top:16px;border-top:1px solid var(--rule)}

/* Accessibility helpers */
.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip:focus{position:fixed;left:16px;top:16px;z-index:20;padding:12px 18px;border-radius:8px;background:var(--amber);color:var(--on-amber);font-weight:600}

/* Responsive */
@media(max-width:1040px){
 .wrap{width:calc(100% - 48px)}
 .hero{grid-template-columns:1fr;gap:44px;padding-top:8px}
 .hero-copy{max-width:560px}
}
@media(max-width:700px){
 .wrap{width:calc(100% - 32px)}
 .site-header{min-height:64px}
 .version{text-align:right;line-height:1.4}
 h1{font-size:clamp(2.6rem,12vw,3.5rem)}
 .intro{margin-top:20px;font-size:1.0625rem}
 .intro b{white-space:normal}
 .actions .button{flex:1 1 100%}
 .titlebar{grid-template-columns:auto 1fr auto;padding:0 12px}
 .title{text-align:left}
 .fields,.paper-body{padding-inline:14px}
 .paper-body{min-height:180px;padding-bottom:58px}
 .app-indicator{width:256px}
 .demo-console{gap:10px}
 #demo-status{flex-basis:100%}
 .footer{padding-block:12px 22px}
 .footer nav{gap:0 18px}
 dialog{padding:22px}
}

@media(max-width:480px){
 .titlebar{grid-template-columns:auto minmax(0,1fr);gap:2px 12px;padding-block:8px}
 .draft-state{grid-column:2;justify-self:start;text-align:left}
}

/* Reduced motion: no animation anywhere; meter shows static shapes per state. */
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .app-indicator[data-state=listening] .voice-meter i{height:var(--crest)}
 .app-indicator[data-state=processing] .voice-meter i{height:7px}
}