/* Proxy - "Golden hour" skin: luminous serene sky, warm peach glow, glassy floating
   cards, dreamy drift. Built from his recorded taste: luminous blue + serene background,
   warm, playful Gen Z interactivity, no very dark colours, no editorial/serif magazine. */
@font-face{font-family:'Bricolage';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/bricolage.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 500;font-display:swap;src:url('/fonts/spacegrotesk.woff2') format('woff2');}
:root{
 --sky1:#8ec9f7;--sky2:#cfe9ff;--sky3:#ffe4c8;--peach:#ffb37c;--peach-soft:#ffe3cc;
 --ink:#20305c;--ink-soft:#46588a;--muted:#6b7ba6;
 --accent:#4f7dff;--accent-deep:#3557d6;--accent-soft:#dbe7ff;--violet:#8a7bff;
 --glass:rgba(255,255,255,.66);--glass-hi:rgba(255,255,255,.85);--line:rgba(32,48,92,.14);
 --coral:#ff6a4d;--mint:#4fd1a5;
 --radius:26px;--shadow:0 18px 40px -18px rgba(32,48,92,.35);--shadow-sm:0 8px 22px -10px rgba(32,48,92,.28);
 --display:'Bricolage',system-ui,sans-serif;
 --body:'Space Grotesk',system-ui,sans-serif;
 --mono:ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);color:var(--ink);line-height:1.55;min-height:100vh;
 background:linear-gradient(178deg,var(--sky1) 0%,var(--sky2) 34%,#f6ecdf 68%,var(--sky3) 100%);background-attachment:fixed}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-2;
 background:radial-gradient(720px 480px at 82% -6%,rgba(255,179,124,.55),transparent 62%),
            radial-gradient(900px 620px at -12% 18%,rgba(79,125,255,.28),transparent 60%),
            radial-gradient(680px 520px at 50% 115%,rgba(255,179,124,.4),transparent 65%)}
body::after{content:'';position:fixed;inset:-20%;pointer-events:none;z-index:-1;opacity:.5;
 background:radial-gradient(240px 90px at 18% 22%,rgba(255,255,255,.9),transparent 70%),
            radial-gradient(300px 110px at 68% 12%,rgba(255,255,255,.75),transparent 70%),
            radial-gradient(260px 100px at 88% 44%,rgba(255,255,255,.65),transparent 70%);
 animation:cloudDrift 60s ease-in-out infinite alternate;filter:blur(28px)}
@keyframes cloudDrift{from{transform:translateX(-2.5%)}to{transform:translateX(2.5%)}}
#spotlight{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .6s ease;
 background:radial-gradient(340px 340px at var(--mx,50%) var(--my,30%),rgba(255,255,255,.5),transparent 70%)}
::selection{background:var(--accent);color:#fff}
h1,h2,h3{line-height:1.08;margin:.2em 0 .45em}
h1,.wide-title{font-family:var(--display);font-weight:800;letter-spacing:-.02em}
.wide-title{font-size:clamp(2rem,4.6vw,3rem)}
p{margin:.4em 0 .8em}
.muted{color:var(--muted)}.small{font-size:.85rem}
a{color:var(--accent-deep)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:12px}
.eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .15em}
#app{min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1}
.container{width:min(1060px,100% - 32px);margin:0 auto;flex:1;padding:26px 0 10px}
/* top bar: floating glass pill */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;margin:14px auto 0;width:min(1060px,100% - 24px);background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-hi);border-radius:999px;box-shadow:var(--shadow-sm);position:sticky;top:12px;z-index:20}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:-.02em;color:var(--ink);background:none;border:0;padding:2px;cursor:pointer;text-transform:lowercase;box-shadow:none}
.brand:not(:disabled):hover{transform:scale(1.03)}
.logo{display:inline-grid;place-items:center;width:34px;height:34px;background:linear-gradient(135deg,var(--accent),var(--violet));color:#fff;border-radius:12px;font-size:1.05rem;box-shadow:0 6px 14px -6px rgba(79,125,255,.7)}
.nav{display:flex;gap:6px}
.nav button{background:none;border:0;border-radius:999px;padding:8px 16px;font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);cursor:pointer;box-shadow:none}
.nav button:not(:disabled):hover{background:rgba(255,255,255,.7)}
.nav button.active{background:var(--ink);color:#fff}
/* buttons: soft pills with glow press */
button{font-family:var(--mono);font-weight:500;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-deep));border:0;border-radius:999px;padding:12px 26px;cursor:pointer;box-shadow:0 10px 24px -10px rgba(53,87,214,.65);transition:transform .16s cubic-bezier(.2,.9,.3,1.4),box-shadow .16s ease,background .15s ease}
button:not(:disabled):hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 30px -10px rgba(53,87,214,.75)}
button:not(:disabled):active{transform:translateY(1px) scale(.98);box-shadow:0 4px 12px -8px rgba(53,87,214,.6)}
button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
button.secondary{background:var(--glass-hi);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
button.ghost{background:none;box-shadow:none;color:var(--ink-soft);text-decoration:underline wavy var(--accent) 2px;text-underline-offset:4px}
button.ghost:not(:disabled):hover{color:var(--ink);transform:none}
button.danger{background:linear-gradient(135deg,var(--coral),#e0502f);box-shadow:0 10px 24px -10px rgba(255,106,77,.6)}
button.full{width:100%;margin-top:6px}
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:14px}
/* tags, notices */
.tag{display:inline-block;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:linear-gradient(135deg,var(--peach-soft),#ffd9a8);border:1px solid rgba(32,48,92,.12);border-radius:999px;padding:5px 13px;box-shadow:0 4px 10px -4px rgba(32,48,92,.25)}
.notice{background:linear-gradient(135deg,#fff3df,#ffe9d2);border:1px solid rgba(32,48,92,.1);border-radius:20px;padding:14px 18px;margin:0 0 18px;box-shadow:var(--shadow-sm)}
.notice a{color:var(--accent-deep)}
/* hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center;padding:52px 0 34px}
.hero h1{font-size:clamp(2.5rem,6vw,4rem);margin:.35em 0;color:var(--ink)}
.hero h1 em{font-style:normal;background:linear-gradient(120deg,var(--accent-deep),var(--violet) 60%,var(--coral));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{font-size:1.06rem;max-width:44ch;color:var(--ink-soft)}
.hero-art{position:relative;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-hi);border-radius:30px;box-shadow:var(--shadow);padding:28px 24px 20px;animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-9px) rotate(.4deg)}}
.bubble{position:relative;background:var(--glass-hi);border:1px solid rgba(255,255,255,.9);border-radius:22px 24px 22px 6px;padding:14px 17px;margin:0 0 14px;font-size:.98rem;max-width:92%;box-shadow:var(--shadow-sm);animation:floaty 5s ease-in-out infinite}
.bubble.reply{margin-left:auto;background:linear-gradient(135deg,var(--accent),var(--violet));color:#fff;border:0;border-radius:22px 24px 6px 22px;animation-delay:.9s;box-shadow:0 12px 26px -12px rgba(96,110,255,.7)}
.art-caption{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:16px}
/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin:6px 0 26px}
.stat{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-hi);border-radius:22px;box-shadow:var(--shadow-sm);padding:14px 17px;transition:transform .18s ease}
.stat:hover{transform:translateY(-3px)}
.stat strong{display:block;font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--accent-deep);word-break:keep-all;overflow-wrap:normal}
.stat span{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* section heads & filters */
.section-head{display:flex;align-items:end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:26px 0 16px}
.section-head h2{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3.2vw,2.1rem);margin:0;text-decoration:underline wavy var(--peach) 4px;text-underline-offset:8px}
.filters{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 18px}
.filters button{background:var(--glass);color:var(--ink);border:1px solid var(--glass-hi);padding:9px 18px;font-size:.74rem;box-shadow:var(--shadow-sm)}
.filters button:not(.active):not(:disabled):hover{background:var(--glass-hi)}
.filters button.active{background:linear-gradient(135deg,var(--accent),var(--violet));color:#fff;border:0}
/* scenario cards: glass with tilt */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;margin-bottom:34px}
.scenario{position:relative;display:block;width:100%;text-align:left;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink);border:1px solid var(--glass-hi);border-radius:26px;box-shadow:var(--shadow-sm);padding:20px 20px 16px;cursor:pointer;font-family:var(--body);text-transform:none;letter-spacing:0;font-weight:400;font-size:1rem;transition:transform .18s ease,box-shadow .18s ease;transform-style:preserve-3d}
.scenario:not(:disabled):hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.scenario:not(:disabled):active{transform:translateY(0) scale(.99)}
.scenario .icon{display:inline-grid;place-items:center;width:46px;height:46px;font-size:1.4rem;background:linear-gradient(135deg,var(--accent-soft),#efe9ff);border-radius:16px;margin-bottom:10px;transition:transform .22s ease;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.scenario:not(:disabled):hover .icon{transform:rotate(-8deg) scale(1.1)}
.scenario h3{font-family:var(--display);font-weight:700;font-size:1.12rem;margin:2px 0 6px;letter-spacing:-.01em}
.scenario p{font-size:.9rem;color:var(--ink-soft);margin:0 0 12px}
.scenario .foot{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.scenario .foot span:last-child{color:var(--accent-deep);font-weight:500}
.scenario:not(:disabled):hover .foot span:last-child{text-decoration:underline wavy var(--peach) 2px;text-underline-offset:3px}
/* panels & forms */
.panel{background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-hi);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 28px;margin-bottom:22px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-panel{max-width:520px;margin:34px auto}
.field{display:block;margin:0 0 15px;font-weight:500;font-size:.92rem}
.field input:not([type=radio]):not([type=checkbox]),.field textarea,.field select{display:block;width:100%;margin-top:7px;font:inherit;font-weight:400;background:rgba(255,255,255,.9);color:var(--ink);border:1.5px solid var(--line);border-radius:16px;padding:12px 15px;transition:border-color .15s ease,box-shadow .15s ease}
.field textarea:focus,.field input:not([type=radio]):not([type=checkbox]):focus,.field select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 4px rgba(79,125,255,.18)}
.checkbox{display:flex;gap:11px;align-items:flex-start;font-weight:400;font-size:.88rem;margin:4px 0 14px;color:var(--ink-soft)}
.checkbox input{width:21px;height:21px;margin-top:1px;accent-color:var(--accent);flex:none}
.error{color:#d43a1c;font-size:.88rem;font-weight:500;margin:.4em 0}
.success{color:#0f8a5f;font-size:.88rem;font-weight:500}
/* chat */
.session-layout{display:grid;grid-template-columns:290px 1fr;gap:20px;align-items:start}
.session-meta{position:sticky;top:88px}
.session-meta>*{margin-top:0}
.session-meta h2{font-family:var(--display);font-weight:700;font-size:1.25rem}
.session-meta .tag{margin:8px 0 12px}
.chat{padding:20px 22px}
.chat-tools{display:flex;gap:9px;align-items:center}
.tool-btn{background:var(--glass-hi);color:var(--ink);border:1px solid var(--line);padding:9px 17px;font-size:.72rem;box-shadow:var(--shadow-sm)}
.tool-btn[aria-pressed="true"]{background:linear-gradient(135deg,var(--accent),var(--violet));color:#fff;border:0}
.mic-btn.recording{background:linear-gradient(135deg,var(--coral),#e0502f);color:#fff;animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 8px 20px -8px rgba(255,106,77,.6)}50%{box-shadow:0 8px 20px -8px rgba(255,106,77,.6),0 0 0 10px rgba(255,106,77,.22)}}
.voice-consent{background:linear-gradient(135deg,#fff3df,#ffe9d2);border:1px solid rgba(32,48,92,.1);border-radius:22px;box-shadow:var(--shadow-sm);padding:16px 19px;margin:0 0 16px}
.voice-consent p{margin:.2em 0 .5em}
.chatlog{display:flex;flex-direction:column;gap:13px;min-height:220px;max-height:52vh;overflow-y:auto;padding:8px 4px 14px}
.message{position:relative;max-width:82%;background:var(--glass-hi);border:1px solid rgba(255,255,255,.9);border-radius:22px 24px 22px 6px;padding:12px 16px 10px;font-size:.96rem;box-shadow:var(--shadow-sm)}
.message.user{align-self:flex-end;background:linear-gradient(135deg,var(--accent),var(--violet));color:#fff;border:0;border-radius:22px 24px 6px 22px;box-shadow:0 12px 26px -12px rgba(96,110,255,.65)}
.message .speaker{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.message.user .speaker{color:rgba(255,255,255,.75)}
.message.typing{align-self:flex-start;display:flex;gap:6px;padding:16px 19px}
.message.typing .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.2s infinite}
.message.typing .dot:nth-child(2){animation-delay:.18s}.message.typing .dot:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,70%,100%{opacity:.25;transform:translateY(0)}35%{opacity:1;transform:translateY(-4px)}}
.composer{margin-top:14px}
.composer textarea{min-height:96px;resize:vertical}
#mic-hint{margin:8px 2px 0;min-height:1.2em}
/* score */
.score-header{margin:18px 0 20px}
.score-header .muted{max-width:56ch}
.score-header h1{font-size:clamp(2rem,4.2vw,2.8rem)}
.score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:16px 0 10px}
.score{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-hi);border-radius:22px;box-shadow:var(--shadow-sm);padding:17px;text-align:center;transition:transform .18s ease}
.score:hover{transform:translateY(-3px)}
.score strong{display:inline-block;font-family:var(--display);font-weight:800;font-size:2.4rem;background:linear-gradient(135deg,var(--accent-deep),var(--violet));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.score span{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.score-header~.small.muted{margin:4px 0 18px}
.replay{border-top:2px dashed rgba(32,48,92,.2);padding:13px 0}
.replay .label{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.replay blockquote{margin:7px 0 11px;padding:10px 15px;border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:0 14px 14px 0;font-size:.92rem}
.progress{height:12px;background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.progress div{height:100%;background:linear-gradient(90deg,var(--accent),var(--violet));border-radius:999px}
/* share card */
#share-preview{background:var(--glass-hi);border:1px solid var(--glass-hi);border-radius:20px;box-shadow:var(--shadow-sm);padding:16px;margin-top:14px}
.badge{display:inline-block;background:linear-gradient(135deg,var(--accent),var(--violet));color:#fff;border-radius:999px;padding:5px 14px;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;margin:2px 4px 2px 0}
/* history */
.history-row{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--glass-hi);border-radius:20px;box-shadow:var(--shadow-sm);padding:14px 18px;margin-bottom:13px;transition:transform .16s ease}
.history-row:hover{transform:translateY(-2px)}
.history-row h3{margin:0;font-size:1rem;font-family:var(--display);font-weight:700}
.history-row .small{margin:.15em 0 0}
/* footer & toast */
.footer{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap;margin:40px 0 14px;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.footer button{background:none;border:0;box-shadow:none;color:var(--ink-soft);font:inherit;letter-spacing:inherit;padding:2px;text-transform:uppercase;text-decoration:underline wavy rgba(36,40,46,.3) 1.5px;text-underline-offset:3px}
.footer button:not(:disabled):hover{color:var(--ink);transform:none}
#toast{display:none;position:fixed;left:50%;bottom:22px;transform:translate(-50%,12px);max-width:min(92vw,480px);background:rgba(32,48,92,.94);color:#fff;border-radius:18px;box-shadow:0 16px 34px -12px rgba(32,48,92,.6);padding:13px 20px;font-size:.92rem;opacity:0;transition:all .3s ease;z-index:10000;backdrop-filter:blur(8px)}
#toast.show{opacity:1;transform:translate(-50%,0)}
.loading{text-align:center;color:var(--ink-soft);padding:80px 0;font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.confetti{position:fixed;top:-16px;z-index:9999;border-radius:4px;animation:fall 3.4s ease-in forwards;pointer-events:none;box-shadow:0 2px 6px rgba(32,48,92,.25)}
@keyframes fall{to{transform:translateY(108vh) rotate(660deg);opacity:.85}}
@media (max-width:860px){
 .hero{grid-template-columns:1fr;padding-top:30px}
 .session-layout{grid-template-columns:1fr}
 .session-meta{position:static}
 .split{grid-template-columns:1fr}
 .score-grid{grid-template-columns:1fr 1fr 1fr;gap:10px}
 .panel{padding:20px 18px}
 .topbar{padding:8px 12px;top:8px}
}
@media (max-width:560px){.score-grid{grid-template-columns:1fr}.message{max-width:92%}.nav button{padding:8px 10px;font-size:.66rem}.brand{font-size:1.15rem}.topbar{gap:6px}}
.quickbar{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 22px}
.field-label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;color:var(--ink-soft)}
.radio{display:flex;gap:9px;align-items:flex-start;margin:6px 0;font-size:.92rem}
.radio input{margin-top:3px;accent-color:var(--accent)}
.costar-panel{margin:0 0 26px}
.field .radio{display:flex;align-items:flex-start;gap:10px;font-weight:400;text-align:left}
.field .radio input{flex:none;margin-top:4px;width:auto}
/* v31+ motion system (kept, retimed for the glass skin) */
@keyframes riseIn{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
@keyframes bubblePop{0%{opacity:0;transform:translateY(12px) scale(.94)}70%{transform:translateY(-3px) scale(1.015)}100%{opacity:1;transform:none}}
@keyframes viewIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#view{animation:viewIn .4s ease-out}
.panel,.scenario,.score,.stat{will-change:transform}
.reveal{opacity:0}
.reveal.on{animation:riseIn .6s cubic-bezier(.2,.9,.25,1.05) both}
.hero-art .bubble{animation:bubblePop .65s .15s both,floaty 5s ease-in-out .8s infinite}
.hero-art .bubble.reply{animation-delay:.55s,1.4s}
.hero-art .art-caption{animation:riseIn .6s .95s both}
.hero h1{animation:riseIn .65s both}
.hero .muted{animation:riseIn .65s .2s both}
.hero .actions{animation:riseIn .65s .35s both}
.message{animation:bubblePop .4s both}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
 .reveal{opacity:1!important}
 #spotlight{display:none}
}
/* THE WORD PLAYGROUND. Flat sunlit color, oversized type, a conversation to touch. */
:root{--ink:#24282e;--ink-soft:#4c5058;--muted:#6d7178;--accent:#24282e;--accent-deep:#000000;--accent-soft:#f3ead2;--glass:#fffdf7;--glass-hi:#fffdf7;--line:rgba(36,40,46,.18);--shadow:0 8px 0 rgba(36,40,46,.06);--shadow-sm:none}
body{background:#faf3e4;background-attachment:initial}
body::before,body::after,#spotlight{display:none}
.topbar{border-radius:0;background:#faf3e4;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;border-bottom:1px solid var(--line);box-shadow:none;margin-top:0;top:0;padding:18px 0}
.logo{background:none;border-radius:0;box-shadow:none;transform:none;width:42px;height:42px}.logo svg{width:100%;height:100%;display:block}
.brand{font-size:1.55rem}
.nav button.active{background:var(--accent)}
button{background:var(--accent);box-shadow:none;border:1px solid transparent;font-family:var(--body);font-weight:500;letter-spacing:0;text-transform:none;font-size:.95rem;padding:13px 24px}
button:not(:disabled):hover{box-shadow:none;transform:translateY(-3px)}
button.secondary{background:transparent;border:1px solid var(--ink)}
button.ghost{text-decoration:none;background:none;padding-left:8px}
.container{width:min(1160px,100% - 48px)}
.hero.playground{grid-template-columns:1.15fr 1fr;gap:50px;padding:66px 0 76px;min-height:680px}
.hero h1{font-size:clamp(3.5rem,7.3vw,6.2rem);font-weight:800;letter-spacing:-.065em;line-height:.98;margin:28px 0 25px}
.hero h1 em{background:none;-webkit-text-fill-color:#3f7a64;color:#3f7a64;font-style:normal}
.hero .eyebrow{font-size:.65rem;letter-spacing:.12em}
.hero p{max-width:32ch;font-size:1.12rem}.hero p.small{font-size:.74rem;max-width:44ch;margin-top:20px;line-height:1.7}
.word-stage{position:relative;min-height:490px;border-radius:50% 50% 42% 42%;background:#a9d4c5;display:flex;flex-direction:column;justify-content:center;padding:74px 22px 34px;isolation:isolate;overflow:hidden}
.stage-label{position:absolute;top:43px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:.58rem;letter-spacing:.17em}
.stage-orbit{font-family:var(--display);font-size:330px;line-height:1;position:absolute;top:60px;left:50%;transform:translateX(-50%);z-index:-1;color:#ffd36c;animation:orbitTurn 60s linear infinite;pointer-events:none}
@keyframes orbitTurn{to{transform:translateX(-50%) rotate(360deg)}}
.preview-lines{display:flex;flex-direction:column;gap:22px;width:100%;margin:22px 0 35px}
.preview-you,.preview-them{font-family:var(--display);font-size:clamp(1.2rem,2vw,1.7rem);font-weight:700;line-height:1.18;padding:25px 22px;max-width:92%;border-radius:25px 25px 25px 3px;background:#fffdf7;box-shadow:0 6px 0 rgba(36,40,46,.06);transform:rotate(-5deg)}
.preview-them{background:#ffd36c;color:#24282e;align-self:flex-end;border-radius:25px 25px 3px 25px;transform:rotate(4deg)}
.preview-picker{display:flex;justify-content:center;gap:5px;flex-wrap:wrap}
.preview-picker button{padding:8px 12px;font-family:var(--mono);font-size:.64rem;color:var(--ink);border:1px solid rgba(36,40,46,.3);background:transparent}
.preview-picker button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.preview-caption{text-align:center;font-size:.61rem;line-height:1.6;margin-top:15px;color:var(--ink-soft)}
.stage-spark{position:absolute;font-family:var(--display);font-weight:700;color:var(--accent);pointer-events:none}
.spark-a{top:25px;right:8px;font-size:5rem;transform:rotate(15deg)}.spark-b{bottom:25px;left:2px;font-size:4rem;color:#ff8e6f;animation:sparkWiggle 5s ease-in-out infinite}
@keyframes sparkWiggle{50%{transform:rotate(35deg)}}
#library{border-top:1px solid var(--line);padding-top:22px}
.section-head h2{font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:-.045em;text-decoration:none}
.filters{gap:7px;margin:24px 0}
.filters button{background:transparent;border:1px solid var(--line);font-size:.84rem;padding:9px 18px;box-shadow:none}
.filters button.active{background:var(--ink)}
.grid{grid-template-columns:repeat(3,1fr);gap:16px}
.scenario{border-radius:8px;border:0;border-top:4px solid #5f9d89;background:#dff0e9;padding:24px 23px 20px;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;min-height:245px}
.scenario:nth-child(4n+2){background:#fdf0cd;border-top-color:#d9a32e}.scenario:nth-child(4n+3){background:#f9dccb;border-top-color:#e78b6c}.scenario:nth-child(4n+4){background:#fffdf7;border-top-color:#24282e}
.scenario h3{font-size:1.5rem;letter-spacing:-.035em;max-width:15ch;margin:16px 0 12px}
.scenario .icon{background:none;box-shadow:none;width:auto;height:auto;float:right;font-size:1.6rem;border-radius:0;margin:0}
.scenario p{font-size:.88rem;max-width:30ch}.scenario .eyebrow{font-size:.6rem}.scenario .foot{margin-top:23px;font-size:.58rem}
.scenario:not(:disabled):hover{box-shadow:0 10px 0 rgba(36,40,46,.08)}
.panel,.stat,.score,.history-row{backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--line);border-radius:12px;background:#fffdf7;box-shadow:none}
.tag{border:0;background:#dff0e9;box-shadow:none}
.stat strong{color:var(--accent);font-size:1.6rem}
.notice,.voice-consent{background:#f6e6be;border:0;box-shadow:none;border-radius:10px}
.message{background:#eceee3;border:0;box-shadow:none}.message.user{background:var(--accent);box-shadow:none}
.field input:not([type=radio]):not([type=checkbox]),.field textarea,.field select{border-radius:9px;background:#f7f7f0}
.score strong{background:none;color:var(--accent);-webkit-text-fill-color:var(--accent)}
.footer{padding:30px 0;border-top:1px solid var(--line)}
@media(max-width:860px){.hero.playground{grid-template-columns:1fr;gap:28px;padding:42px 0;min-height:0}.hero h1{font-size:clamp(3.6rem,12vw,6rem)}.word-stage{width:min(500px,100%);margin:0 auto;min-height:460px}.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.container{width:calc(100% - 36px)}.topbar{width:calc(100% - 32px);padding:13px 0}.brand{font-size:1.25rem}.logo{width:30px;height:30px}.nav{gap:2px}.nav button{font-size:.57rem;padding:8px}.hero.playground{padding-top:32px}.hero h1{font-size:3.7rem;margin-top:20px}.hero .eyebrow{font-size:.55rem}.hero p{font-size:1rem}.word-stage{min-height:425px;padding:64px 16px 28px}.preview-you,.preview-them{font-size:1.23rem;padding:21px 18px}.stage-orbit{font-size:280px}.spark-a{font-size:4rem;right:6px}.spark-b{font-size:3rem;left:0}.grid{grid-template-columns:1fr}.scenario{min-height:220px}.scenario h3{max-width:20ch}.nav button.active{background:var(--accent)}}
/* Keep the display expressive without merging letterforms. */
.hero h1{letter-spacing:-.035em;font-weight:700;line-height:1.03}
#library{scroll-margin-top:96px}

/* Pete the rehearsal cat + fact snack */
#pete{position:fixed;left:0;top:0;z-index:60;pointer-events:none;font-size:34px;line-height:1;transform:translate(-120px,-120px);will-change:transform}
#pete .pete-body{display:inline-block;transition:transform .18s ease}
#pete.flip .pete-body{transform:scaleX(-1)}
#pete.run .pete-body{animation:peteBob .26s ease-in-out infinite}
@keyframes peteBob{50%{translate:0 -6px;rotate:5deg}}
#pete.pounce .pete-body{animation:petePounce .5s ease}
@keyframes petePounce{30%{scale:1.3 rotate(-12deg)}60%{scale:.94 rotate(7deg)}}
#pete .pete-quip{position:absolute;bottom:112%;left:50%;transform:translateX(-50%);background:#24282e;color:#faf3e4;font:600 .78rem/1.35 var(--body);padding:6px 12px;border-radius:14px 14px 14px 3px;white-space:nowrap;opacity:0;transition:opacity .18s ease}
#pete.quip .pete-quip{opacity:1}
.fact-wrap{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;flex-basis:100%;margin-top:6px}
.fact-label{font-size:.55rem;letter-spacing:.16em;color:var(--muted)}
button.fact{background:#ffd36c;color:#24282e;border:1px solid rgba(36,40,46,.28);border-radius:999px;padding:7px 15px;font-family:var(--body);font-size:.8rem;font-weight:600;letter-spacing:0;text-transform:none;box-shadow:none;text-decoration:none}
button.fact:not(:disabled):hover{color:#24282e;transform:translateY(-2px)}
button.fact.pop{animation:bubblePop .4s both}
@media (prefers-reduced-motion:reduce){#pete{display:none}}
@media (max-width:560px){#pete{font-size:28px}}