@font-face{font-family:'Fraunces';src:url('/fonts/fraunces.woff2') format('woff2');font-weight:300 600;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/fonts/fraunces-italic.woff2') format('woff2');font-weight:300 600;font-style:italic;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible Next';src:url('/fonts/atkinson.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap}

:root{
  --propolis:#120D08; --comb:#1D150C; --wax:#F3E7CF; --smoke:#A69A84;
  --honey:#F2B33D; --sky:#9AD8EA; --ember:#FF6B57; --jade:#74D6A5;
  --rule:rgba(243,231,207,.13);
  --serif:'Fraunces','Iowan Old Style',Georgia,serif;
  --sans:'Atkinson Hyperlegible Next','Segoe UI Variable','Segoe UI',system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:radial-gradient(120% 70% at 50% 46%,#261A09 0%,var(--propolis) 62%) var(--propolis);color:var(--wax);font:400 17px/1.45 var(--sans);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;height:100dvh;overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top) + 14px) 20px 6px}
.mark{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;letter-spacing:.16em}
.truth{display:flex;gap:8px}
.chip{display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--rule);border-radius:999px;background:none;color:var(--smoke);font-size:14px}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--smoke)}
.chip[data-ok="true"] i{background:var(--jade)}
.chip[data-ok="false"] i{background:var(--ember)}
.chip[data-ok="false"]{color:var(--wax)}

.stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto auto;padding:0 20px;min-height:0;min-width:0}
.said{padding-top:10px;min-height:104px}
#line{margin:0;font-family:var(--serif);font-weight:360;font-size:clamp(30px,7.4vw,46px);line-height:1.06;letter-spacing:-.012em;font-variation-settings:'SOFT' 100;text-wrap:balance}
#heard{overflow-wrap:anywhere;margin:10px 0 0;color:var(--sky);font-size:16px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hive{position:relative;min-height:180px}
#comb{position:absolute;inset:0;width:100%;height:100%}
#core{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;border-radius:24px}
.hint{margin:0;text-align:center;color:var(--smoke);font-size:14px;min-height:20px;padding-bottom:10px}
.now{display:flex;align-items:baseline;gap:10px;border-top:1px solid var(--rule);padding:12px 0;min-height:49px;font-size:15px}
.now b{font-weight:600;color:var(--honey);white-space:nowrap}
.now span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
body:not([data-state="thinking"]):not([data-state="acting"]) .now span{white-space:normal}
.now time{margin-left:auto;color:var(--smoke);font-variant-numeric:tabular-nums;white-space:nowrap}
body[data-state="alert"] .now b{color:var(--ember)}
.now .quiet{padding:5px 12px;border-radius:10px;font-size:14px;align-self:center}
.reply{display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--rule);padding:12px 0 4px}
.reply span{overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:16px;line-height:1.42}
.reply em{display:block;margin-top:6px;font-style:normal;font-size:13px;color:var(--honey)}

.step{display:flex;gap:8px;align-items:center;padding:10px 20px calc(env(safe-area-inset-bottom) + 14px)}
.step input{flex:1;min-width:0;background:var(--comb);border:1px solid var(--rule);border-radius:14px;padding:13px 16px}
.step input::placeholder{color:var(--smoke)}
.step button[type=submit],dialog button[type=submit],.pairing button{background:var(--honey);color:#1A1206;border:0;border-radius:14px;padding:13px 18px;font-weight:600}
.quiet{background:none;border:1px solid var(--rule);border-radius:14px;padding:12px 14px;color:var(--wax)}

.thread{position:fixed;inset:0;z-index:5;display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--propolis);transform:translateY(102%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s .3s}
body[data-thread="open"] .thread{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s}
.thread header{display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top) + 14px) 20px 10px;border-bottom:1px solid var(--rule)}
.thread h2,dialog h2{margin:0;font-family:var(--serif);font-weight:400;font-size:24px;font-variation-settings:'SOFT' 100}
.turns{overflow-y:auto;padding:4px 20px 48px;overscroll-behavior:contain}
.turn{padding:20px 0;border-bottom:1px solid var(--rule);max-width:68ch}
.turn .you{margin:0 0 12px;color:var(--sky);white-space:pre-wrap;overflow-wrap:anywhere}
.turn .ans{overflow-wrap:anywhere}
.turn .ans p{margin:0 0 .7em}
.turn .ans ul{margin:0 0 .7em;padding-left:1.2em}
.turn .ans pre{margin:0 0 .7em;overflow:auto;background:var(--comb);padding:10px 12px;border-radius:10px;font-size:14px}
.turn .ans code{background:var(--comb);padding:1px 5px;border-radius:5px;font-size:.92em}
.turn .ans .h{font-weight:600}
.turn footer{margin-top:8px;color:var(--smoke);font-size:13px}
.turn[data-status="failed"] footer{color:var(--ember)}
.empty{color:var(--smoke);padding:28px 0;max-width:40ch}

dialog{background:var(--comb);color:var(--wax);border:1px solid var(--rule);border-radius:20px;padding:22px;width:min(440px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(8,5,2,.66)}
dialog label{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--rule)}
dialog input[type=checkbox]{width:22px;height:22px;accent-color:var(--honey);margin-top:2px;flex:none}
dialog small{display:block;color:var(--smoke);font-size:13px;line-height:1.35;margin-top:2px}
#voiceTruth{color:var(--smoke);font-size:13px;margin:12px 0 0}
.row{display:flex;justify-content:space-between;gap:10px;margin-top:16px}

.pairing{position:fixed;inset:0;z-index:9;background:var(--propolis);display:none;place-items:center;padding:24px}
body[data-auth="no"] .pairing{display:grid}
.pairing form{width:min(420px,100%);display:grid;gap:14px}
.pairing h1{margin:6px 0 0;font-family:var(--serif);font-weight:380;font-size:34px;line-height:1.08;font-variation-settings:'SOFT' 100}
.pairing p{margin:0;color:var(--smoke)}
.pairing input{background:var(--comb);border:1px solid var(--rule);border-radius:14px;padding:15px 16px;font-size:20px;letter-spacing:.08em;text-transform:uppercase}
.pairing .err{color:var(--ember);min-height:1.4em}
body[data-auth="checking"] .stage,body[data-auth="checking"] .step,body[data-auth="no"] .stage,body[data-auth="no"] .step{visibility:hidden}

@media (min-width:1100px){
  body{grid-template-columns:minmax(360px,32vw) minmax(0,1fr);grid-template-areas:"bar bar" "thread stage" "thread step"}
  .bar{grid-area:bar;padding-inline:32px}
  .stage{grid-area:stage;padding-inline:56px}
  .step{grid-area:step;padding-inline:56px}
  .thread{grid-area:thread;position:static;transform:none;visibility:visible;transition:none;border-right:1px solid var(--rule);background:none;min-height:0}
  .thread header{padding:10px 32px}
  .turns{padding-inline:32px}
  #closeThread,#openThread,.reply{display:none}
  .said{min-height:120px}
}
@media (max-width:520px){
  #openThread{padding:0;width:48px;height:48px;flex:none;display:grid;place-items:center}
  #openThread span{display:block;width:18px;height:2px;border-radius:2px;background:var(--wax);box-shadow:0 -6px 0 var(--wax),0 6px 0 var(--wax);font-size:0;overflow:hidden}
  .bar{padding-inline:16px}.stage{padding-inline:16px}.step{padding-inline:16px}
}
@media (max-height:640px){.said{min-height:72px}#line{font-size:28px}}
@media (prefers-reduced-motion:reduce){.thread,body[data-thread="open"] .thread{transition:none}}