:root{--black:#050505;--paper:#eee9df;--cyan:#00dfdf;--pink:#e3a1c2;--muted:#aaa9a2;--line:#414443;font-family:'SFMono-Regular',Menlo,Consolas,monospace;color:var(--paper);background:var(--black);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;background:none;border:0;color:inherit}button:disabled{opacity:.45;cursor:wait}a{color:var(--cyan);text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}[hidden]{display:none!important}#world{position:fixed;inset:0;z-index:0;pointer-events:none}#world canvas{width:100%;height:100%;display:block}#app{position:relative;min-height:100dvh}.masthead{height:78px;position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:20px 32px;border-bottom:1px solid #41444380;background:#050505b3}.masthead>span{font-size:10px;letter-spacing:.14em;color:var(--muted)}.masthead nav{display:flex;gap:24px;font-size:12px}.masthead img{display:block;max-width:140px;object-fit:contain}main{position:relative;min-height:calc(100dvh - 128px);display:grid;grid-template-columns:minmax(0,1fr) minmax(450px,650px);gap:24px;padding:24px 32px 18px}.presence{position:relative;min-height:620px}#rotate-surface{position:absolute;inset:0 0 200px;touch-action:pan-y;cursor:grab}#rotate-surface:active{cursor:grabbing}.avatar-caption{position:absolute;bottom:20px;left:15px;right:0;pointer-events:none}.avatar-caption button,.avatar-caption label{pointer-events:auto}.eyebrow{font-size:10px;letter-spacing:.12em;color:var(--cyan);font-weight:700}h1{font-size:clamp(30px,4.2vw,66px);line-height:1;margin:14px 0;text-transform:uppercase;letter-spacing:-.06em}.avatar-caption p{font-size:12px;line-height:1.8;color:var(--muted)}.rotation{display:flex;gap:15px;align-items:center;font-size:9px;letter-spacing:.08em;margin:15px 0}.rotation button{border:1px solid var(--line);height:30px;width:35px}.avatar-caption>button{font-size:10px;text-decoration:underline;text-underline-offset:4px}.motion{font-size:10px;display:inline-flex;gap:5px;margin-left:18px;color:var(--muted)}.chat-panel{position:relative;display:flex;flex-direction:column;height:calc(100dvh - 174px);min-height:640px;max-height:1050px;border:1px solid var(--paper);box-shadow:7px 7px 0 #3c6568;background:#080b0beF;z-index:3}.panel-bar{display:flex;justify-content:space-between;align-items:center;background:var(--cyan);color:#050505;padding:11px 15px;font-size:10px;font-weight:700;letter-spacing:.04em}.panel-bar h2{font-size:13px;margin:0}.panel-bar>span{font-size:9px}.context-bar{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:14px 18px;font-size:10px;color:var(--muted);border-bottom:1px solid var(--line)}.context-bar button{font-size:10px;color:var(--cyan)}.setup-map{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-bottom:1px solid var(--line)}.setup-map button{padding:12px 6px;border-right:1px solid var(--line);font-size:11px}.setup-map button:last-child{border-right:0}.setup-map button[aria-current]{background:var(--paper);color:#050505;font-weight:700}.chat-scroll{flex:1;overflow-y:auto;padding:22px 22px 28px;scrollbar-color:#527075 #111;scrollbar-width:thin;overscroll-behavior:contain}.welcome h3{font-size:35px;letter-spacing:-.06em;line-height:1.12;margin:12px 0}.welcome p{font-size:12px;color:#bfcdc9;line-height:1.8;max-width:45ch}.message{padding:16px 0;border-top:1px solid #283434}.message:first-child{margin-top:18px}.message .speaker{font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--cyan);display:flex;gap:8px;align-items:center}.message.user .speaker{color:var(--pink)}.message .body{font-size:12px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere;margin:8px 0}.message .body strong{font-weight:700;color:#fff}.message time{font-size:9px;color:#7e928d;font-weight:400}.retry{font-size:10px;color:var(--pink);text-decoration:underline}#thinking{display:flex;gap:12px;align-items:center;font-size:11px;color:var(--cyan);padding:18px 0}.chat-face{width:27px;height:22px;background:var(--cyan);box-shadow:3px 3px 0 #234548;display:inline-flex;justify-content:center;align-items:center;gap:5px}.chat-face i{display:block;width:3px;height:6px;background:#050505}#thinking .chat-face{animation:thinking 1.5s steps(2,end) infinite}@keyframes thinking{50%{transform:translateY(-3px)}}.card{border:1px solid var(--line);padding:18px;margin-top:18px;box-shadow:4px 4px 0 #202a2a}.card h3{font-size:17px;line-height:1.4;margin:8px 0 12px;letter-spacing:-.025em}.card p,.card li,.card summary{font-size:11px;line-height:1.8;color:#bbc8c3}.card small{font-size:10px;color:var(--muted);line-height:1.8;display:block}.card ol,.card ul{padding-left:18px}.card label{font-size:10px;line-height:1.7;display:block;margin:12px 0 7px}.card input[type=text],.card input[type=password]{width:100%;background:#0c1212;color:var(--paper);border:1px solid var(--line);border-radius:0;padding:12px;font-size:12px}.card label.consent{display:flex;gap:9px;align-items:flex-start}.card label.consent input{margin-top:4px}.primary{display:inline-flex;align-items:center;justify-content:space-between;gap:15px;width:100%;background:var(--paper);color:#050505;font-weight:700;font-size:12px;border:1px solid var(--paper);padding:13px 15px;margin-top:10px;box-shadow:3px 3px 0 var(--pink)}.secondary{color:var(--cyan);font-size:11px;border:1px solid var(--line);padding:10px;margin-top:10px}.badges{display:flex;gap:7px;flex-wrap:wrap}.badge{font-size:9px;line-height:1.3;padding:5px 6px;background:#243030;color:var(--cyan);max-width:100%;overflow-wrap:anywhere}.badge.demo{background:#513448;color:#ffd2ec}.status-list{display:grid;grid-template-columns:minmax(90px,1fr) minmax(70px,auto);font-size:11px;gap:11px}.status-list dt{color:var(--muted)}.status-list dd{margin:0;text-align:right}.source{font-size:9px!important;color:#91aaa5!important;border-top:1px solid var(--line);padding-top:10px}.chat-bottom{border-top:1px solid var(--line);padding:14px 18px;background:#0a0e0e}.composer-label{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.05em;margin-bottom:10px}.composer-label>span:first-child{color:var(--pink)}#save-status{color:#8fa29c}#chat-form{display:flex;align-items:flex-end;gap:12px}textarea{resize:vertical;border:0;border-bottom:1px solid #56716c;background:none;color:var(--paper);padding:7px 0;flex:1;min-width:0;min-height:52px;max-height:120px;font-size:12px;line-height:1.6;border-radius:0}#send{background:var(--cyan);color:#050505;font-size:24px;width:42px;height:42px;flex-shrink:0}.chat-foot{display:flex;justify-content:space-between;font-size:9px;gap:8px;margin-top:12px;color:var(--muted)}.chat-foot a{color:var(--muted)}#error{background:#3b202c;color:#ffd5e6;font-size:11px;line-height:1.65;padding:12px 18px}footer{position:relative;z-index:4;padding:13px 32px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:8px;letter-spacing:.04em;color:#97aaa4;border-top:1px solid #333}footer select{font-size:9px;background:#102020;color:var(--paper);border:1px solid #415b56;padding:6px}footer label{margin-right:7px}dialog{background:#0b1010;color:var(--paper);border:1px solid var(--paper);border-radius:0;padding:0;width:min(480px,calc(100vw - 28px));box-shadow:7px 7px 0 var(--pink);max-height:90dvh}dialog::backdrop{background:#000c;backdrop-filter:blur(5px)}dialog form,.dialog-body{padding:26px}dialog h2{font-size:30px;letter-spacing:-.06em}dialog label,dialog legend{font-size:11px;display:block;margin:18px 0 8px}dialog input:not([type=radio]),dialog select{width:100%;padding:13px;background:#101b1b;color:var(--paper);border:1px solid var(--line);border-radius:0}dialog small,.muted{font-size:10px;color:var(--muted);line-height:1.8}fieldset{border:1px solid var(--line);margin:20px 0;padding:10px 14px}fieldset label{margin:9px 0}fieldset input{accent-color:var(--cyan)}#profile-error{font-size:11px;color:var(--pink);line-height:1.6}#skip{position:fixed;z-index:20;right:30px;bottom:30px;border:1px solid var(--cyan);padding:13px 20px;background:#050505}#app[data-phase=summoning] .chat-panel,#app[data-phase=summoning] .avatar-caption{visibility:hidden}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(min-width:1500px){main{grid-template-columns:minmax(0,1fr) minmax(500px,720px)}}
@media(max-width:1000px){main{grid-template-columns:minmax(0,1fr) minmax(430px,58%);padding:20px;gap:12px}.masthead{padding:18px 20px}.masthead>span{display:none}.avatar-caption{left:0}.rotation{gap:7px;font-size:8px}.motion{display:flex;margin:12px 0}.chat-scroll{padding:18px}.chat-panel{min-height:650px}footer>span:last-child{display:none}}
@media(max-width:740px){#world{height:390px;position:absolute;top:55px}.masthead{height:65px;padding:14px 18px}.masthead img{width:120px}.masthead nav{gap:10px;font-size:10px}main{display:block;padding:0 14px 20px}.presence{height:310px;min-height:0}.avatar-caption{left:8px;bottom:12px;right:0}.avatar-caption h1{font-size:25px;max-width:70%;overflow-wrap:anywhere}.avatar-caption .eyebrow{font-size:8px}.avatar-caption p{font-size:10px;margin:5px 0;max-width:46%}.rotation{position:absolute;right:0;bottom:50px;display:flex;gap:8px}.rotation span{display:none}#rotate-surface{inset:0 0 100px}.motion{display:inline-flex;margin:8px 0 0 10px;font-size:9px}.chat-panel{height:770px;max-height:none;min-height:660px;box-shadow:4px 4px 0 #3c6568}.chat-scroll{padding:18px}.panel-bar{padding:11px 12px}.panel-bar h2{font-size:11px}.panel-bar>span{font-size:8px}.welcome h3{font-size:30px}.context-bar{padding:12px;font-size:9px}.context-bar button{font-size:9px}.setup-map button{font-size:10px;padding:12px 3px}.chat-bottom{padding:13px}.message .body{font-size:12px}.card{padding:14px}.chat-foot{font-size:8px}footer{display:block;font-size:8px;padding:12px 16px}#demo-controls{margin-top:10px}#demo-controls select{max-width:180px}.motion input{margin:0}}
.feed-observations{margin:18px 0;border:1px solid var(--line)}.feed-row{display:grid;grid-template-columns:55px 1fr 1fr;gap:12px;padding:14px;border-bottom:1px solid var(--line)}.feed-row:last-child{border-bottom:0}.feed-row>strong{color:var(--cyan);padding-top:3px}.feed-row>div{display:grid;gap:5px;min-width:0}.feed-row span,.feed-row small{font-size:10px;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}.feed-row b{font-size:12px;font-weight:500}.feed-row [data-feed-state=live]{color:var(--cyan)}.feed-row [data-feed-state=delayed],.feed-row [data-feed-state=stale]{color:var(--pink)}.readiness-next{border-left:3px solid var(--cyan);padding:12px 16px;background:#101719;margin:16px 0}.readiness-next>strong{font-size:13px}.readiness-next p{margin-bottom:0}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
.journey{padding:13px 18px 12px;border-bottom:1px solid var(--line);background:#111b1b;flex:none}.journey-heading{display:flex;gap:11px;align-items:center}.journey-heading strong{font-size:11px;line-height:1.6}.journey>p{font-size:10px;line-height:1.65;color:#b4c8c1;margin:9px 0}.journey ol{list-style:none;padding:0;margin:12px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.journey li{font-size:8px;color:#839991;display:flex;gap:5px;align-items:center}.journey li span{display:inline-flex;justify-content:center;align-items:center;height:17px;width:17px;min-width:17px;border:1px solid var(--line);font-size:9px}.journey li[data-state=done]{color:var(--cyan)}.journey li[data-state=current]{color:var(--paper)}.journey li[data-state=current] span{background:var(--paper);color:#050505}.journey li[data-state=attention]{color:var(--pink)}.journey-action{font-size:10px;color:var(--cyan);text-align:left;padding:4px 0;text-decoration:underline;text-underline-offset:4px}.report-issue{border-left:3px solid var(--pink);padding:12px 14px;background:#2a1c27;margin:15px 0}.report-issue>strong{font-size:12px;color:#ffd8ea}.report-working{display:flex;gap:13px;align-items:flex-start;padding:17px 0}.report-working>div{min-width:0}.report-working strong{font-size:11px;line-height:1.7}.report-working .chat-face{flex:none}.chat-face[data-expression=thinking]{animation:thinking 1.5s steps(2,end) infinite}.chat-face[data-expression=attention]{background:var(--pink)}.chat-face[data-expression=attention] i{height:3px;transform:rotate(-15deg)}.chat-face[data-expression=ready] i{height:4px;border-top:2px solid #050505;background:none;transform:translateY(-2px)}.utilities{position:relative}.utilities summary{cursor:pointer;color:var(--paper)}.utilities nav,.utilities>p{position:absolute;bottom:20px;right:0;width:180px;margin:0;background:#091111;border:1px solid var(--line);padding:10px;box-shadow:4px 4px 0 #314743;z-index:8;font-size:10px;line-height:1.8}.utilities nav a{display:block;color:var(--paper);padding:7px}.utilities nav a:hover{background:#223535}.chat-scroll{min-height:180px}.chat-panel{min-height:680px}.card details>summary{cursor:pointer;color:var(--cyan);padding:8px 0}.card details[open]{border-bottom:1px solid var(--line);padding-bottom:12px}html[data-reduced=true] *{animation:none!important;scroll-behavior:auto!important}
@media(max-width:740px){.journey{padding:12px}.journey li{font-size:7px;gap:4px}.journey ol{gap:5px}.chat-panel{height:900px;min-height:800px}.chat-scroll{min-height:250px}}
.setup-steps{display:grid;grid-template-columns:repeat(4,1fr);list-style:none!important;padding:0!important;margin:16px 0 20px;border:1px solid var(--line)}
.setup-steps li{border-right:1px solid var(--line)}.setup-steps li:last-child{border:0}
.setup-steps button{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:10px 5px;font-size:10px;color:var(--muted)}
.setup-steps button[aria-current]{background:var(--cyan);color:var(--black);font-weight:700}.setup-steps span{font-size:9px;opacity:.7}
.setup-outcome{padding:14px 16px;margin:16px 0;background:#132323;border-left:2px solid var(--cyan)}.setup-outcome>strong{font-size:12px}.setup-outcome p{margin:7px 0 0}
.setup-roles{display:grid;grid-template-columns:85px 1fr;gap:12px;font-size:11px;line-height:1.75}.setup-roles dt{color:var(--cyan)}.setup-roles dd{margin:0;color:#bbc8c3}
.setup-notice{border:1px solid #76556a;padding:11px 13px;background:#211a22;color:#dbc6d0!important}.setup-notice strong{display:block;font-size:9px;color:var(--pink);letter-spacing:.06em}
.setup-spec{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin:17px 0}.setup-spec>div{background:#0c1515;padding:12px}.setup-spec span{display:block;font-size:8px;letter-spacing:.08em;color:var(--muted);margin-bottom:7px}.setup-spec strong{font-size:11px;line-height:1.6;display:block;font-weight:400}
.query-sections ul{columns:2;column-gap:22px;margin:8px 0}.query-sections li{break-inside:avoid;margin-bottom:6px;font-size:10px}.query-sections .section-missing{color:var(--pink)}.section-missing span{font-size:9px;display:block}
.setup-help{font-size:10px;color:var(--cyan);text-decoration:underline;text-underline-offset:4px;padding:10px 0;margin:8px 16px 0 0;text-align:left;line-height:1.8}.portal-link{display:inline-block}.card{scroll-margin-top:12px}.context-bar>span{flex:1;min-width:0}.context-bar button{flex:none}.message .body{font-size:13px}.card p,.card li{font-size:12px}.chat-panel{min-height:540px}
@media(min-width:1001px){main{grid-template-columns:minmax(0,1fr) minmax(500px,760px)}}
@media(min-width:1500px){main{grid-template-columns:minmax(0,1fr) minmax(600px,820px)}}
@media(max-width:740px){.chat-panel{height:calc(100dvh - 35px);min-height:620px}.chat-scroll{min-height:180px}.query-sections ul{columns:1}.setup-roles{grid-template-columns:70px 1fr}.context-bar{flex-wrap:wrap}.context-bar>span{flex-basis:55%}.setup-spec strong{font-size:10px}}
.enter-world{pointer-events:auto;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 18px;max-width:360px;margin:6px 0 16px;padding:14px 16px;background:var(--cyan);color:#050505;border:1px solid var(--paper);box-shadow:5px 5px 0 var(--pink);text-decoration:none;transition:transform .12s,box-shadow .12s}.enter-world span{font-size:14px;font-weight:700;letter-spacing:.06em}.enter-world small{grid-column:1;font-size:10px;color:#0b3a3c}.enter-world b{grid-row:1/span 2;grid-column:2;font-size:22px}.enter-world:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--pink)}#nav-world{color:var(--cyan);font-weight:700}
.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;border:0;padding:0;margin:18px 0}.choice-row legend{font-size:11px;margin:0 0 8px;padding:0}.choice-row label{margin:0;position:relative;cursor:pointer}.choice-row input{position:absolute;opacity:0;pointer-events:none}.choice-row span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;border:1px solid var(--line);background:#101b1b;font-size:12px;letter-spacing:.06em;transition:background .12s,border-color .12s,box-shadow .12s}.choice-row input:checked+span{border-color:var(--cyan);background:#0f3134;color:#fff;box-shadow:3px 3px 0 var(--pink)}.choice-row input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:2px}.choice-row .soon{cursor:not-allowed}.choice-row .soon span{color:#6d7a78;border-style:dashed}.choice-row .soon small{font-size:10px;color:#6d7a78}.masthead{justify-content:flex-start}
#member-name{text-transform:none;letter-spacing:-.04em}

/* ApeTrader host card: portrait, life bar, hook line */
.host-card{display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0d1a1b,#080b0b)}
.host-portrait{width:88px;height:88px;border:2px solid var(--cyan);background:#101c24 center/400% 200% no-repeat;box-shadow:4px 4px 0 var(--pink);image-rendering:auto;overflow:hidden;animation:host-bob 3.2s ease-in-out infinite}
.host-portrait svg{display:block;width:100%;height:100%}
.host-portrait .host-ears{transform-origin:66px 28px;animation:host-ears 4.6s ease-in-out infinite}
.host-portrait[data-expression=celebrating]{animation:host-hop .5s ease 3,host-bob 3.2s ease-in-out 1.5s infinite}
.host-portrait[data-expression=thinking] .host-ears{animation-duration:1.4s}
@keyframes host-bob{50%{transform:translateY(-3px)}}@keyframes host-hop{50%{transform:translateY(-9px) rotate(-3deg)}}@keyframes host-ears{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-12deg)}94%{transform:rotate(6deg)}}
.host-body{min-width:0;display:grid;gap:8px}
.host-meta{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;letter-spacing:.12em}
.host-meta strong{color:var(--cyan)}.life-count{color:var(--pink);font-weight:700}
.life-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.life-seg{display:grid;gap:4px}.life-seg i{display:block;height:10px;border:1px solid #2f4a4b;background:#0b1111;box-shadow:inset 0 0 0 1px #050505}
.life-seg small{font-size:8px;letter-spacing:.06em;color:#6f8583;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.life-seg[data-state=done] i{background:linear-gradient(90deg,var(--cyan),#7bf1ff);border-color:var(--cyan);box-shadow:0 0 8px #00dfdf66}
.life-seg[data-state=done] small{color:var(--paper)}
.life-seg[data-state=current] i{background:repeating-linear-gradient(90deg,#0f3a3b 0 6px,#0b1111 6px 12px);border-color:var(--cyan);animation:life-charge 1.2s linear infinite}
.life-seg[data-state=attention] i{background:var(--pink);border-color:var(--pink);animation:life-blink 1s steps(2) infinite}
@keyframes life-charge{to{background-position:24px 0}}@keyframes life-blink{50%{opacity:.4}}
.host-card.full .life-seg i{background:linear-gradient(90deg,var(--pink),var(--cyan));animation:life-glow 2.4s ease-in-out infinite}@keyframes life-glow{50%{box-shadow:0 0 14px #ff3ea5aa}}
.host-hook{position:relative;text-align:left;font-size:12px;line-height:1.55;color:#eef7f5;background:#12201f;border:1px solid #2f4a4b;padding:9px 12px;border-radius:0}
.host-hook::before{content:'';position:absolute;left:-7px;top:12px;border:6px solid transparent;border-right-color:#2f4a4b;border-left:0}
.host-hook:not(:disabled):hover{border-color:var(--cyan);color:#fff}.host-hook:disabled{cursor:default}
@media (max-width:850px){.host-card{grid-template-columns:64px 1fr;padding:10px 12px}.host-portrait{width:64px;height:64px}.life-seg small{display:none}}
@media (prefers-reduced-motion:reduce){.host-portrait,.host-portrait .host-ears,.life-seg i{animation:none!important}}
/* Every small ApeTrader face uses the host sheet (hello; thinking while replying). */
.chat-face{background:#1a2226 url('./assets/host-sheet.jpg') 0 0/400% 200% no-repeat!important;border:1px solid var(--cyan);box-shadow:2px 2px 0 var(--pink)!important;overflow:hidden}
.chat-face i{display:none!important}
.chat-face[data-expression=thinking],#thinking .chat-face{background-position:33.333% 0!important}
.chat-face[data-expression=attention]{background-position:0 100%!important}
.chat-face[data-expression=ready]{background-position:33.333% 100%!important}
.panel-bar .chat-face{width:30px;height:30px}.message .speaker .chat-face{width:22px;height:22px}

.chat-face[data-mood]{background-position:0 0!important}
.chat-face[data-mood=thinking]{background-position:33.333% 0!important}.chat-face[data-mood=amused]{background-position:66.666% 0!important}.chat-face[data-mood=surprised]{background-position:100% 0!important}
.chat-face[data-mood=concerned]{background-position:0 100%!important}.chat-face[data-mood=encouraging]{background-position:33.333% 100%!important}.chat-face[data-mood=celebrating]{background-position:66.666% 100%!important}.chat-face[data-mood=resting]{background-position:100% 100%!important}
.message.streaming .caret{display:inline-block;width:7px;height:13px;margin-left:3px;background:var(--cyan);vertical-align:-2px;animation:caret 0.9s steps(2) infinite}@keyframes caret{50%{opacity:0}}

/* ---- Scene: ApeTrader on a moonlit harbour stage ---- */
.stage{position:relative;display:block;height:190px;padding:0;overflow:hidden;border-bottom:2px solid #2f4a4b;background:#081016;grid-template-columns:none}
.stage-backdrop{position:absolute;inset:0;background:radial-gradient(120% 90% at 78% 0%,#1d3563 0%,#0c1836 45%,#060b18 100%)}
.stage-moon{position:absolute;right:184px;top:14px;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 38% 36%,#fffef4,#efe6c8 65%,#cdbf98);box-shadow:0 0 30px 8px #fff4c655}
.stage-skyline{position:absolute;left:0;right:0;bottom:0;height:70px;opacity:.9;background:
 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 70' preserveAspectRatio='none'%3E%3Cpath fill='%23050a14' d='M0 70V48h18V36h14v12h10V28h12v20h16V20l8-8 8 8v28h14V34h20v14h12V10h6V2h4v8h6v38h16V30h18v18h10V38h20v10h14V22h16v26h10V40h18v8h12V16l10-10 10 10v32h16V36h14v12h20V26h18v22h10V42h16v6h12V30h14v18h18V20h16v28h10V36h20v12h16V28h18v20h14V40h12v30z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
.stage-skyline::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#00dfdf,#ff3ea5,#ffb870,#00dfdf);opacity:.55;filter:blur(1px)}
.stage-hud{position:absolute;left:16px;top:12px;right:236px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;z-index:2}
.hud-chip{font-size:9px;letter-spacing:.12em;color:#9fb6b3;background:#050b10cc;border:1px solid #2f4a4b;padding:4px 7px}.hud-chip b{color:var(--paper);margin-left:4px;letter-spacing:.04em}
.stage-hud .life-bar{flex:1 1 100%;margin-top:4px}
.stage-host{position:absolute;right:14px;top:10px;width:162px;display:grid;justify-items:end;gap:6px;z-index:2}
.stage .host-portrait{width:112px;height:112px;border-width:2px}
.host-plate{text-align:right;display:grid;gap:2px}.host-plate strong{font-size:12px;letter-spacing:.14em;color:#fff;text-shadow:0 0 8px #00dfdf}.host-plate small{font-size:8px;letter-spacing:.14em;color:#7fe9e9}
.vibe-meter{display:flex;align-items:center;gap:6px;justify-content:flex-end}.vibe-num{font-size:12px;font-weight:700;color:var(--pink)}.vibe-meter i{display:block;width:92px;height:5px;background:#1b1320;border:1px solid #5a2a44}.vibe-meter b{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff3ea5,#ffb3d6);box-shadow:0 0 8px #ff3ea5;transition:width .8s ease}
.stage .host-hook{position:absolute;left:16px;right:190px;bottom:14px;z-index:2;background:#0b1118f2;border:2px solid #4b5f78;box-shadow:inset 0 0 0 2px #0b1118,inset 0 0 0 3px #2c3a4c;padding:10px 13px;font-size:12px}
.stage .host-hook::before{display:none}
/* Dialogue boxes */
.message.assistant .body{background:#0e141c;border:2px solid #3d4f66;box-shadow:inset 0 0 0 3px #0e141c,inset 0 0 0 4px #26344a;padding:12px 14px;margin-top:8px}
.message.user{display:grid;justify-items:end}.message.user .body{background:#1a1020;border:2px solid #6b3a57;box-shadow:inset 0 0 0 3px #1a1020,inset 0 0 0 4px #42263a;padding:10px 13px;max-width:85%;margin-top:6px}
.message{border-top:0}
/* Quick replies and the player's own portrait */
.choices{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}.choices:empty{display:none}
.choices button{font-size:11px;color:var(--paper);background:#10262a;border:1px solid var(--cyan);padding:8px 11px;box-shadow:3px 3px 0 #0a4143;transition:transform .1s,box-shadow .1s}
.choices button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--pink)}.choices button:nth-child(3){border-color:var(--pink);box-shadow:3px 3px 0 #4a1c34}
.player-portrait{width:46px;height:46px;flex:none;align-self:flex-end;border:2px solid var(--pink);box-shadow:3px 3px 0 #0a4143;background:#10262a;object-fit:cover}
@media (max-width:850px){.stage{height:170px}.stage .host-portrait{width:84px;height:84px}.stage-host{width:120px}.stage-hud,.stage .host-hook{right:140px}.stage-moon{right:130px}.hud-chip:nth-child(3){display:none}}
.hud-lessons{cursor:pointer;font:inherit;font-size:9px;border-color:#6b3a57}.hud-lessons:hover{border-color:var(--pink);color:#fff}
.choices .lesson-choice{display:grid;gap:2px;text-align:left}.choices .lesson-choice small{font-size:8px;letter-spacing:.1em;color:#ffb3d6;text-transform:uppercase}.choices .lesson-choice.done{opacity:.7;border-style:dashed}
.skin-swatch{display:inline-block;width:12px;height:12px;margin-right:7px;vertical-align:-1px;border:1px solid var(--paper)}

/* Sign-in is primary; invitation entry is optional. */
#login-dialog .login-invite{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line)}
#login-dialog .login-invite summary{font-size:12px;color:var(--cyan);cursor:pointer;text-underline-offset:4px}
#login-dialog .login-options{margin:18px 0 0;font-size:11px;line-height:1.8;color:var(--muted)}