/* Ask Donna hero. Every selector lives under .donna-hero so the block can drop into the real homepage. */
@font-face{font-family:"DonnaSerif";src:url(donna-serif.woff?v=20261106) format("woff");font-style:italic;font-weight:400;font-display:swap}

.dh-symbols{position:absolute;width:0;height:0;overflow:hidden}

.donna-hero{
  --dh-bg:#0a0a0c;--dh-text:#f5f5f7;--dh-text-2:rgba(245,245,247,.68);--dh-text-3:rgba(245,245,247,.46);
  --dh-copper:#c17f59;--dh-copper-light:#d4a574;--dh-line:rgba(255,255,255,.08);--dh-card:rgba(255,255,255,.035);
  --dh-ok:#5cb85c;--dh-err:#e57373;
  --dh-ring:clamp(290px,calc(100svh - 470px),500px);
  --dh-lvl:0;
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;padding-top:52px;display:flex;flex-direction:column;align-items:center;
  background:radial-gradient(ellipse 60% 50% at 50% 38%,rgba(193,127,89,.08),transparent 70%),var(--dh-bg);
  color:var(--dh-text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:400;
  -webkit-font-smoothing:antialiased;color-scheme:dark;
}
.donna-hero *,.donna-hero *::before,.donna-hero *::after{box-sizing:border-box}
.donna-hero [hidden]{display:none!important}
.donna-hero h1,.donna-hero h2,.donna-hero p,.donna-hero dl,.donna-hero dd,.donna-hero dt{margin:0}
.donna-hero button,.donna-hero input,.donna-hero textarea{font:inherit;color:inherit}
.donna-hero button{cursor:pointer;border:0;background:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.donna-hero a{color:inherit;text-decoration:none}
.donna-hero :focus-visible{outline:2px solid var(--dh-copper-light);outline-offset:4px;border-radius:6px}
.donna-hero ::selection{background:var(--dh-copper);color:var(--dh-bg)}
.donna-hero .dh-icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.donna-hero .dh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* mute */
.donna-hero .dh-sound{position:absolute;top:66px;right:clamp(16px,3vw,40px);z-index:5;display:flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid rgba(255,255,255,.14);border-radius:999px;font-size:12px;color:var(--dh-text-2);transition:border-color .2s,color .2s}
.donna-hero .dh-sound:hover{border-color:var(--dh-copper);color:var(--dh-text)}
.donna-hero .dh-sound .dh-icon{width:14px;height:14px}

/* stack */
.donna-hero .dh-stack{width:min(760px,100%);padding:clamp(48px,7svh,76px) 24px clamp(28px,5svh,56px);display:flex;flex-direction:column;align-items:center;text-align:center;margin:auto 0}
.donna-hero .dh-title{position:relative;font-size:clamp(40px,6.4vw,84px);font-weight:500;letter-spacing:-.045em;line-height:1;margin-bottom:calc(var(--dh-ring) * -.07)}
.donna-hero .dh-title em{font-family:DonnaSerif,Georgia,serif;font-weight:400;font-size:1.16em;letter-spacing:-.05em;color:var(--dh-copper-light);padding-right:.06em}
.donna-hero .dh-title em span{color:var(--dh-copper)}

/* split-flap headline: JetBrains Mono tiles (DESIGN.md's techie texture; fixed advance keeps a Solari grid), copper on warm black.
   All phrases sit stacked in one grid cell as hidden ghosts, so the title always reserves the tallest phrase's height. */
.donna-hero .dh-line.is-board{display:grid}
.donna-hero .dh-line.is-board>.dh-row{grid-area:1/1;align-self:start;line-height:.7}
.donna-hero .dh-ghost{visibility:hidden}
.donna-hero .dh-title em.dh-flap{--fl-h:1.22em;font:500 .5em/1 "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0;color:var(--dh-copper-light);padding:0;word-spacing:-.1em;vertical-align:.06em}
.donna-hero .dh-title em.dh-flap span{color:inherit}
.donna-hero .dh-flap .w{display:inline-block;white-space:nowrap}
.donna-hero .fl{display:inline-block;position:relative;width:.68em;height:var(--fl-h);margin:.08em .04em;perspective:420px;vertical-align:middle;border-radius:.1em;box-shadow:0 .08em .2em rgba(0,0,0,.5)}
.donna-hero .fl b{position:absolute;left:0;right:0;overflow:hidden;font-weight:inherit;background:linear-gradient(#1b1512,#120e0c);backface-visibility:hidden}
.donna-hero .fl b.t,.donna-hero .fl b.ft{top:0;height:50%;border-radius:.1em .1em 0 0;transform-origin:50% 100%;border-top:1px solid rgba(212,165,116,.16)}
.donna-hero .fl b.b,.donna-hero .fl b.fb{bottom:0;height:50%;border-radius:0 0 .1em .1em;transform-origin:50% 0;background:linear-gradient(#0f0b09,#171210)}
.donna-hero .fl b.ft{z-index:2}
.donna-hero .fl b.fb{z-index:2;transform:rotateX(90deg)}
.donna-hero .fl i{position:absolute;left:0;right:0;height:var(--fl-h);font-style:normal;line-height:var(--fl-h);text-align:center;text-shadow:0 0 .6em rgba(193,127,89,.25)}
.donna-hero .fl b.b i,.donna-hero .fl b.fb i{top:calc(var(--fl-h) / -2)}
.donna-hero .fl::after{content:"";position:absolute;z-index:3;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:#050404;box-shadow:0 1px 0 rgba(255,255,255,.05)}
.donna-hero .fl.blank b,.donna-hero .fl.blank,.donna-hero .fl.blank::after{background:none;box-shadow:none;border-color:transparent}

/* ring (centred on the page axis at every width) */
.donna-hero .dh-ring{position:relative;width:min(var(--dh-ring),92vw);aspect-ratio:1;flex:none}
.donna-hero .dh-object{position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none;transform:scale(calc(1 + var(--dh-lvl) * .045));transition:transform .09s linear,filter .6s}
.donna-hero .dh-still,.donna-hero .dh-motion{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;pointer-events:none}
.donna-hero .dh-still{animation:dh-breath 7.5s ease-in-out infinite}
.donna-hero .dh-motion{visibility:hidden}
.donna-hero .dh-object.is-motion .dh-motion{visibility:visible}
.donna-hero .dh-object.is-motion .dh-still{visibility:hidden;animation:none}
.donna-hero[data-mode=listening] .dh-object,.donna-hero[data-mode=thinking] .dh-object{filter:brightness(1.04)}
.donna-hero[data-mode=speaking] .dh-object{filter:brightness(1.1)}
@keyframes dh-breath{0%,100%{transform:scale(.99,.985) rotate(-.5deg)}50%{transform:scale(1.01,1.018) rotate(.5deg)}}

/* state line */
.donna-hero .dh-instrument{display:flex;align-items:center;gap:9px;margin-top:-6px;font:500 10px/20px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--dh-text-3)}
.donna-hero .dh-dot{width:5px;height:5px;border-radius:50%;background:var(--dh-copper)}
.donna-hero[data-mode=listening] .dh-dot{background:var(--dh-ok)}
.donna-hero[data-mode=error] .dh-dot{background:var(--dh-err)}
.donna-hero .dh-meter{display:flex;gap:2px;align-items:center;border-left:1px solid rgba(255,255,255,.16);padding-left:9px;height:12px}
.donna-hero .dh-meter i{width:1.5px;height:3px;background:var(--dh-copper-light);opacity:.8}
.donna-hero .dh-meter i:nth-child(2),.donna-hero .dh-meter i:nth-child(6){height:6px}
.donna-hero .dh-meter i:nth-child(3){height:9px}.donna-hero .dh-meter i:nth-child(4){height:12px}.donna-hero .dh-meter i:nth-child(5){height:7px}
.donna-hero[data-mode=listening] .dh-meter i,.donna-hero[data-mode=speaking] .dh-meter i{animation:dh-bars .65s ease-in-out infinite alternate}
.donna-hero .dh-meter i:nth-child(2n){animation-delay:-.38s!important}.donna-hero .dh-meter i:nth-child(3n){animation-delay:-.17s!important}
@keyframes dh-bars{from{transform:scaleY(.42)}to{transform:scaleY(1.25)}}

/* intro, controls, captions */
.donna-hero .dh-lower{width:100%;display:flex;flex-direction:column;align-items:center;margin-top:12px}
.donna-hero .dh-intro{color:var(--dh-text-2);font-size:clamp(16px,1.5vw,19px);font-weight:300;line-height:1.55;max-width:440px;text-wrap:balance}
.donna-hero .dh-actions{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:22px}
.donna-hero .dh-talk{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border-radius:999px;background:var(--dh-copper);color:var(--dh-bg);font-size:15px;font-weight:600;transition:background .2s}
.donna-hero .dh-talk:hover{background:var(--dh-copper-light)}
.donna-hero .dh-talk[aria-pressed=true]{background:transparent;color:var(--dh-copper-light);box-shadow:inset 0 0 0 1px var(--dh-copper)}
.donna-hero .dh-type{display:inline-flex;align-items:center;gap:9px;padding:10px 2px;font-size:14px;color:var(--dh-text-2);transition:color .2s}
.donna-hero .dh-type:hover{color:var(--dh-text)}
.donna-hero .dh-composer{display:flex;gap:6px;width:min(420px,100%);margin-top:16px;padding:5px;background:rgba(255,255,255,.04);border:1px solid rgba(193,127,89,.4);border-radius:12px}
.donna-hero .dh-composer:focus-within{border-color:var(--dh-copper-light)}
.donna-hero .dh-composer input{flex:1;min-width:0;border:0;background:transparent;padding:9px 11px;font-size:15px;caret-color:var(--dh-copper-light)}
.donna-hero .dh-composer input:focus{outline:0}
.donna-hero .dh-composer input::placeholder{color:var(--dh-text-3)}
.donna-hero .dh-composer button{display:grid;place-items:center;min-width:38px;border-radius:8px;background:var(--dh-copper);color:var(--dh-bg)}
.donna-hero .dh-composer button:hover{background:var(--dh-copper-light)}
.donna-hero .dh-caps{width:min(500px,100%);margin-top:18px;display:flex;flex-direction:column;gap:6px;min-height:3.2em}
.donna-hero .dh-cap{font-size:15px;line-height:1.5;text-wrap:pretty}
.donna-hero .dh-cap:empty{display:none}
.donna-hero .dh-cap--user{color:var(--dh-text-3)}
.donna-hero .dh-cap--user::before{content:"You  ";font:500 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;margin-right:6px}
.donna-hero .dh-cap--donna{color:var(--dh-text);font-weight:400}
.donna-hero .dh-cap--donna::before{content:"Donna  ";font:500 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--dh-copper-light);margin-right:6px}
.donna-hero .dh-cap--notice{color:var(--dh-copper-light)}

/* destination card (detail panel pattern) */
.donna-hero .dh-detail{width:min(480px,100%);padding:20px 22px;text-align:left;background:linear-gradient(180deg,var(--dh-card),rgba(255,255,255,.01));border:1px solid var(--dh-line);border-radius:16px;animation:dh-rise .5s cubic-bezier(.2,.7,.2,1) both}
.donna-hero .dh-detail__kicker{font:500 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--dh-copper-light)}
.donna-hero .dh-detail__title{margin-top:10px;font-size:clamp(26px,3vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.donna-hero .dh-detail__text{margin-top:8px;font-size:15px;font-weight:300;line-height:1.55;color:var(--dh-text-2)}
.donna-hero .dh-detail__count{margin-top:10px;min-height:1.2em;font:500 12px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.04em;color:var(--dh-copper-light)}
.donna-hero .dh-detail__row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:16px}
.donna-hero .dh-detail__go{display:inline-flex;align-items:center;gap:10px;padding:4px 0;font-size:14px;font-weight:500;color:var(--dh-copper-light);border-bottom:1px solid var(--dh-copper)}
.donna-hero .dh-detail__go:hover{color:var(--dh-text)}
.donna-hero .dh-detail__go .dh-icon{width:14px;height:14px}
.donna-hero .dh-detail__back{font-size:13px;color:var(--dh-text-3);padding:6px 0}
.donna-hero .dh-detail__back:hover{color:var(--dh-text)}

/* lead card: in flow under the controls by default */
.donna-hero .dh-lead{width:min(440px,100%);margin-top:20px;text-align:left;animation:dh-rise .55s cubic-bezier(.2,.7,.2,1) both}
.donna-hero .dh-lead__inner{padding:18px 20px 16px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--dh-line);border-radius:16px;backdrop-filter:blur(10px)}
.donna-hero .dh-lead__head{display:flex;align-items:baseline;justify-content:space-between}
.donna-hero .dh-lead__head h2{font-size:17px;font-weight:600;letter-spacing:-.02em}
.donna-hero .dh-lead__count{font:500 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--dh-copper-light)}
.donna-hero .dh-lead__hint{margin-top:4px;font-size:12.5px;color:var(--dh-text-3)}
.donna-hero .dh-fields{margin-top:12px}
.donna-hero .dh-field{display:grid;grid-template-columns:78px 1fr;align-items:start;gap:10px;padding:8px 0;border-top:1px solid var(--dh-line)}
.donna-hero .dh-field dt{padding-top:6px;font:500 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--dh-text-3)}
.donna-hero .dh-field input,.donna-hero .dh-field textarea{width:100%;min-width:0;padding:5px 8px;margin:0;border:1px solid transparent;border-radius:7px;background:transparent;font-size:14px;line-height:1.4;resize:none;overflow:hidden;caret-color:var(--dh-copper-light);transition:background .2s,border-color .2s}
.donna-hero .dh-field input::placeholder,.donna-hero .dh-field textarea::placeholder{color:rgba(245,245,247,.25)}
.donna-hero .dh-field input:hover,.donna-hero .dh-field textarea:hover{background:rgba(255,255,255,.04)}
.donna-hero .dh-field input:focus,.donna-hero .dh-field textarea:focus{outline:0;background:rgba(255,255,255,.05);border-color:var(--dh-copper)}
.donna-hero .dh-field.is-filled input,.donna-hero .dh-field.is-filled textarea{color:var(--dh-text)}
.donna-hero .dh-field.is-flash input,.donna-hero .dh-field.is-flash textarea{animation:dh-flash 1.1s ease-out}
.donna-hero .dh-field.is-edited dt::after{content:" edited";color:var(--dh-copper-light);letter-spacing:.06em}
@keyframes dh-flash{0%{background:rgba(193,127,89,.34)}100%{background:transparent}}
.donna-hero .dh-lead__done{display:flex;align-items:flex-start;gap:10px;margin-top:10px;padding:12px 14px;border:1px solid rgba(92,184,92,.4);background:rgba(92,184,92,.08);border-radius:10px;animation:dh-rise .45s ease both}
.donna-hero .dh-lead__done .dh-icon{color:var(--dh-ok);margin-top:1px}
.donna-hero .dh-lead__done p{font-size:14px;line-height:1.45;overflow-wrap:anywhere}
@keyframes dh-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* prompts */
.donna-hero .dh-prompts{width:100%;margin-top:clamp(22px,4svh,40px);padding-top:18px;border-top:1px solid var(--dh-line)}
.donna-hero .dh-prompts h2{font-size:12px;font-weight:500;color:var(--dh-text-3);margin-bottom:12px;letter-spacing:.02em}
.donna-hero .dh-prompt-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.donna-hero .dh-prompt{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.02);font-size:14px;color:rgba(245,245,247,.88);transition:border-color .2s,background .2s}
.donna-hero .dh-prompt .dh-icon{width:14px;height:14px;color:var(--dh-text-3);transform:rotate(-38deg);transition:transform .2s,color .2s}
.donna-hero .dh-prompt:hover{border-color:var(--dh-copper);background:rgba(193,127,89,.1)}
.donna-hero .dh-prompt:hover .dh-icon{transform:translate(2px,-2px) rotate(-38deg);color:var(--dh-copper-light)}

/* wide desktop: the lead card floats right of the ring so the ring stays on the page axis */
@media(min-width:1200px){
  .donna-hero .dh-lead{position:absolute;right:clamp(24px,3vw,64px);top:50%;transform:translateY(-50%);width:clamp(300px,24vw,360px);margin:0;animation:dh-slide .6s cubic-bezier(.2,.7,.2,1) both}
  @keyframes dh-slide{from{opacity:0;transform:translate(26px,-50%)}to{opacity:1;transform:translateY(-50%)}}
}

@media(max-width:1199px){.donna-hero.has-detail .dh-intro{display:none}}
@media(min-width:1200px){
  .donna-hero .dh-detail{position:absolute;left:clamp(24px,3vw,64px);top:50%;transform:translateY(-50%);width:clamp(300px,24vw,360px);animation:dh-slide-l .6s cubic-bezier(.2,.7,.2,1) both}
  @keyframes dh-slide-l{from{opacity:0;transform:translate(-26px,-50%)}to{opacity:1;transform:translateY(-50%)}}
}

@media(max-width:680px){
  .donna-hero{--dh-ring:min(86vw,330px)}
  .donna-hero .dh-sound{top:62px}
  .donna-hero .dh-sound span{display:none}
  .donna-hero .dh-sound{padding:9px}
  .donna-hero .dh-stack{padding:56px 20px 28px}
  .donna-hero .dh-title{font-size:clamp(38px,11.4vw,56px)}
  .donna-hero .dh-title:has(.is-board){margin-bottom:0}
  .donna-hero .dh-prompt-list{flex-direction:column;align-items:stretch;gap:0}
  .donna-hero .dh-prompt{justify-content:space-between;border:0;border-bottom:1px solid var(--dh-line);border-radius:0;background:transparent;padding:8px 2px}
  .donna-hero .dh-prompt:hover{background:transparent}
  .donna-hero .dh-field{grid-template-columns:70px 1fr}
}

@media(prefers-reduced-motion:reduce){
  .donna-hero *,.donna-hero *::before,.donna-hero *::after{animation:none!important;transition:none!important}
  .donna-hero .dh-object{transform:none;filter:none}
  .donna-hero .dh-motion{display:none}
  .donna-hero .dh-object.is-motion .dh-still{visibility:visible}
}

.donna-hero .dh-lead__done.is-failed{border-color:rgba(229,115,115,.45);background:rgba(229,115,115,.08)}
.donna-hero .dh-lead__done.is-failed .dh-icon{color:var(--dh-err)}