:root{
  --onyx:#08090c; --graphite:#12151c; --gold:#C8A24B; --champ:#E4C87E; --hot:#F6D97B;
  --ivory:#F5F1E8; --muted:#a8afba; --dim:#6b7583; --line:rgba(200,162,75,.22);
  --ok:#63d29a; --bad:#ff9aa6;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:
    radial-gradient(120% 65% at 50% 112%, rgba(200,162,75,.16) 0%, rgba(8,9,12,0) 62%),
    radial-gradient(90% 55% at 50% -10%, rgba(200,162,75,.10) 0%, rgba(8,9,12,0) 60%),
    var(--onyx);
  color:var(--ivory);
  font:400 16px/1.55 Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-tap-highlight-color:transparent;overflow:hidden;
}
button{font:inherit;color:inherit}
.stage{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;
  padding:calc(env(safe-area-inset-top,0px) + 16px) 20px calc(env(safe-area-inset-bottom,0px) + 20px)}
.top{width:100%;max-width:520px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand img{width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(200,162,75,.45))}
.brand b{font:600 15px/1.1 Manrope;letter-spacing:.02em;white-space:nowrap}
.brand small{display:block;color:var(--dim);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.tools{display:flex;gap:8px;align-items:center;flex:none}
.icon{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;
  width:38px;height:38px;display:grid;place-items:center;cursor:pointer;transition:.18s}
.icon:hover{background:rgba(200,162,75,.14)}
.icon[aria-pressed="true"]{background:rgba(200,162,75,.2);border-color:var(--champ)}
.icon svg{width:18px;height:18px;stroke:var(--champ);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.scene{flex:1;width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:0}
.orbwrap{position:relative;width:min(58vw,38vh,260px);aspect-ratio:1;flex:none;touch-action:none;cursor:pointer;border:0;background:none;padding:0}
.orbwrap:focus-visible{outline:2px solid var(--champ);outline-offset:14px;border-radius:50%}
.glow{position:absolute;inset:-32%;border-radius:50%;
  background:radial-gradient(circle at 50% 46%,rgba(230,198,120,.55) 0%,rgba(200,162,75,.24) 36%,rgba(8,9,12,0) 68%);
  filter:blur(8px);opacity:calc(.55 + var(--level,0)*.9);transform:scale(calc(1 + var(--level,0)*.2));
  transition:opacity .12s linear,transform .12s linear}
.orb{position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.9) 0%,rgba(246,217,123,.85) 16%,rgba(200,162,75,.55) 42%,rgba(24,20,12,.9) 78%),
    radial-gradient(circle at 70% 78%,rgba(200,162,75,.5),rgba(8,9,12,0) 55%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.55), 0 20px 60px rgba(0,0,0,.55);
  transform:scale(calc(1 + var(--level,0)*.07));transition:transform .1s linear}
.ring{position:absolute;inset:-6%;border-radius:50%;border:1px solid var(--line)}
.ring.b{inset:-16%;border-color:rgba(200,162,75,.12)}
.breathe{animation:breathe 6.5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.listening .glow{background:radial-gradient(circle at 50% 46%,rgba(246,217,123,.75) 0%,rgba(200,162,75,.3) 38%,rgba(8,9,12,0) 70%)}
.thinking .orb{animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.status{font:500 14px/1.4 Manrope;letter-spacing:.14em;text-transform:uppercase;color:var(--champ);min-height:20px;text-align:center}
.hint{color:var(--dim);font-size:13px;text-align:center;margin-top:-10px}
.log{width:100%;max-width:520px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:2px 2px 6px;min-height:0;scrollbar-width:thin}
.msg{border-radius:16px;padding:10px 14px;max-width:88%;font-size:15px;line-height:1.5;animation:rise .25s ease}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg.you{align-self:flex-end;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.msg.them{align-self:flex-start;background:linear-gradient(180deg,rgba(200,162,75,.16),rgba(200,162,75,.07));border:1px solid var(--line)}
.msg .who{display:block;font:600 10px/1.6 Manrope;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.saved{align-self:center;font-size:12px;color:var(--ok);letter-spacing:.04em}
.bottom{width:100%;max-width:520px;flex:none;display:flex;flex-direction:column;gap:10px;align-items:center}
.typerow{width:100%;display:flex;gap:8px}
.typerow input{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;
  padding:12px 16px;color:var(--ivory);font:400 15px Manrope;outline:none;min-width:0}
.typerow input:focus{border-color:var(--champ)}
.send{background:linear-gradient(180deg,var(--hot),var(--gold));color:#1a1406;border:0;border-radius:999px;
  padding:0 20px;font:700 14px Manrope;cursor:pointer}
.foot{color:var(--dim);font-size:11px;text-align:center;letter-spacing:.08em}
.foot a{color:var(--dim)}
.sheet{position:fixed;inset:auto 0 0 0;background:var(--graphite);border-top:1px solid var(--line);
  border-radius:22px 22px 0 0;padding:18px 20px calc(env(safe-area-inset-bottom,0px) + 20px);
  transform:translateY(102%);transition:transform .28s cubic-bezier(.3,.9,.3,1);z-index:20;max-height:70vh;overflow:auto}
.sheet.open{transform:none}
.sheet h3{margin:0 0 4px;font:600 16px Manrope}
.sheet p{margin:0 0 14px;color:var(--dim);font-size:13px}
.note{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:14px}
.note button{background:none;border:1px solid var(--line);border-radius:8px;width:26px;height:26px;flex:none;cursor:pointer;color:var(--champ)}
.lock{position:fixed;inset:0;background:rgba(6,7,10,.94);backdrop-filter:blur(6px);display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;z-index:30;text-align:center}
.lock.show{display:flex}
.lock h2{font:600 26px/1.2 "Cormorant Garamond",Georgia,serif;margin:0;color:var(--champ)}
.lock p{color:var(--muted);font-size:14px;max-width:340px;margin:0}
.lock input{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:14px;padding:14px 18px;
  color:var(--ivory);font:600 20px/1 Manrope;letter-spacing:.32em;text-align:center;width:min(320px,90vw);outline:none;text-transform:uppercase}
.lock input:focus{border-color:var(--champ)}
.lock .err{color:var(--bad);font-size:13px;min-height:18px}
.cta{background:linear-gradient(180deg,var(--hot),var(--gold));color:#1a1406;border:0;border-radius:999px;
  padding:13px 26px;font:700 14px Manrope;letter-spacing:.04em;cursor:pointer}
.ghost{background:none;border:1px solid var(--line);color:var(--champ);border-radius:999px;padding:11px 20px;font:600 13px Manrope;cursor:pointer}
.install{display:none}
.install.show{display:inline-block}
@media (prefers-reduced-motion:reduce){
  .breathe,.thinking .orb{animation:none}
  .msg{animation:none}
}
@media (max-height:640px){ .orbwrap{width:min(44vw,30vh,190px)} .log{gap:8px} }

/* The site-wide consent notice is injected at the edge and is fixed to the
   bottom, where it would sit on top of this app's type row. On the voice app
   it belongs at the top, clear of every control. */
#rk-consent{bottom:auto!important;top:10px!important;max-height:52vh;overflow:auto}
@media(max-width:560px){#rk-consent{font-size:13px!important;padding:12px 14px!important}}