@font-face{font-family:Outfit;src:url('/static/oddity-outfit.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{font-family:Outfit,system-ui,sans-serif;color:#282625;background:#f3f1ed;font-synthesis:none;--pink:#f3a8bd;--muted:#807b76;--line:#dedad4}
*{box-sizing:border-box}body{margin:0;min-width:320px}button,input{font:inherit}button{cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.38}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #a74773;outline-offset:5px}button{touch-action:manipulation}button, a{user-select:none}[hidden]{display:none!important}
.masthead{display:flex;align-items:center;justify-content:space-between;padding:25px 38px}.wordmark{text-decoration:none;color:inherit;font-size:28px;letter-spacing:-1.4px;font-weight:620}.wordmark span{font-size:13px;font-weight:450;letter-spacing:-.2px;margin-left:8px;color:#837b76}.masthead nav{display:flex;align-items:center;gap:23px}.quiet{border:0;background:none;padding:5px 0;font-size:13px;color:var(--muted)}.quiet:hover{color:#272324}.icon-button{height:28px;width:28px;display:grid;place-items:center;background:none;border:0;font-size:17px;color:#817a73}.icon-button svg{width:17px}.icon-button:last-child{border:1px solid #ccc7bf;border-radius:50%;width:21px;height:21px;font-size:12px}
main{padding:8px 24px 0}.simulator{width:min(100%,760px);margin:0 auto}.stage-shell{padding:9px;background:#e6e2dc;border-radius:30px;box-shadow:0 1px 0 #fff9,0 18px 35px -32px #30281b88}.stage{position:relative;isolation:isolate;aspect-ratio:69/50;overflow:hidden;background:#050505;border-radius:23px;color:#eee9e5}.stage-top{position:absolute;z-index:4;top:22px;left:25px;right:25px;display:flex;gap:20px;align-items:center;font-size:11px;color:#a9a29d;letter-spacing:.15px}.connection{display:flex;align-items:center;gap:7px;white-space:nowrap}.connection:before{content:'';height:4px;width:4px;border-radius:50%;background:#817b78}.connection.online:before{background:#b4c7a6}.connection.offline:before{background:#df9e98}#chapter-title{margin-left:auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.stage-home{background:#292628aa;border:0;color:#ded4d6;border-radius:50%;width:24px;height:24px}.scene{position:absolute;inset:0;z-index:1}.scene img,.scene video{position:absolute;width:100%;height:100%;object-fit:contain;background:#050505}.scene:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#0007,transparent 22%,transparent 58%,#000b)}.friend{position:absolute;inset:12% 10% 15%;display:flex;justify-content:center;align-items:center;transition:opacity .3s,transform .5s cubic-bezier(.2,.8,.2,1)}.friend img{height:88%;max-width:100%;object-fit:contain}.stage[data-state=asleep] .friend{opacity:.25;transform:translateY(-7%);filter:blur(1px)}.stage.has-scene .friend{opacity:0;pointer-events:none}.wake-panel{position:absolute;z-index:5;inset:auto 10% 13%;text-align:center}.wake-panel h1{font-size:clamp(23px,3.6vw,35px);line-height:1.13;letter-spacing:-1px;font-weight:450;margin:0 0 25px;text-shadow:0 3px 22px #000}.wake{border:0;background:#f0ece6;color:#262223;border-radius:30px;padding:13px 24px;font-size:14px;min-width:158px;transition:transform .2s,background .2s}.wake span{margin-left:16px}.wake:hover{background:white;transform:translateY(-2px)}.wake:active{transform:scale(.97)}
.caption{position:absolute;z-index:3;bottom:55px;left:8%;right:8%;text-align:center;font-size:clamp(16px,2.7vw,23px);line-height:1.35;letter-spacing:-.3px;text-wrap:pretty;text-shadow:0 1px 10px #000,0 1px 4px #000}.stage:not(.has-scene) .caption{bottom:45px;font-size:19px}.stage:not(.has-scene):has(.caption:not(:empty)) .friend{transform:translateY(-6%);opacity:.85}.stage-bottom{position:absolute;z-index:4;bottom:21px;left:25px;right:25px;display:flex;justify-content:space-between;font-size:10px;color:#a19a96;align-items:center}.stage-bottom>span{width:100px}.stage-bottom>span:last-child{text-align:right}.beat-dots{display:flex;gap:5px}.beat-dots i{width:4px;height:4px;background:#ffffff35;border-radius:50%;transition:width .2s,background .2s}.beat-dots i.active{width:18px;background:#d7b0c6;border-radius:6px}.below-screen{display:flex;align-items:center;gap:20px;justify-content:space-between;margin:15px 9px 0;min-height:21px}.below-screen p{margin:0;font-size:13px;color:var(--muted)}.below-screen .quiet{padding:0}.notice{font-size:12px;line-height:1.5;margin:10px 9px 0;color:#8b4a50}.controls{display:flex;justify-content:center;align-items:flex-start;gap:65px;margin:25px 0 19px}.control-group{display:flex;align-items:center;flex-direction:column;gap:13px;min-width:70px}.control-group>span{font-size:11px;color:var(--muted);white-space:nowrap}kbd{font:inherit;margin-left:4px;color:#a69f98;font-size:10px}.talk{width:66px;height:66px;border:1px solid #cf8ca1;border-bottom:4px solid #bc7e93;border-radius:50%;background:var(--pink);display:grid;place-items:center;box-shadow:0 2px 3px #59424412;transition:transform .1s,background .15s;touch-action:none}.talk svg{width:22px;height:22px;color:#724657}.talk:hover:not(:disabled){background:#ffc0d1}.talk.recording{transform:translateY(3px);border-bottom-width:1px;background:#ef86aa;box-shadow:0 0 0 6px #eeafbf33}.select{height:47px;width:47px;margin:10px 0 9px;border-radius:50%;background:#e8e4de;border:1px solid #c9c3ba;border-bottom:3px solid #bdb6ac;display:grid;place-items:center;transition:transform .12s}.select span{width:10px;height:10px;border-radius:2px;background:#999187}.select:active{transform:translateY(2px);border-bottom-width:1px}.rocker{height:66px;width:42px;border:1px solid #c9c3ba;border-bottom:3px solid #bdb6ac;overflow:hidden;border-radius:22px;display:flex;flex-direction:column;background:#e8e4de}.rocker button{height:50%;border:0;background:transparent;color:#7e766c;font-size:17px}.rocker button+button{border-top:1px solid #d7d0c6}.rocker button:active{background:#d4ccc1}.composer{display:flex;border-bottom:1px solid var(--line);max-width:360px;margin:0 auto;transition:border-color .2s}.composer:focus-within{border-color:#b88999}.composer input{border:0;background:none;width:100%;min-width:0;outline:0;padding:12px 0;font-size:14px;color:#38322e}.composer input::placeholder{color:#a59c94}.composer button{border:0;background:none;color:#8c8178;font-size:23px;width:38px}.starters{display:flex;justify-content:center;gap:16px;margin:15px 0 0;flex-wrap:wrap}.starters button{background:none;border:0;padding:2px 0;border-bottom:1px solid #d5c9c7;color:#a18a89;font-size:11px}.starters button:hover{color:#70535d}.listening{position:absolute;z-index:5;inset:auto 0 19%;display:flex;justify-content:center;align-items:center;gap:4px;height:35px;background:#050505db}.listening i{height:9px;width:3px;background:#f3a8bd;border-radius:4px;animation:listen .65s ease-in-out infinite alternate}.listening i:nth-child(2){animation-delay:-.2s}.listening i:nth-child(3){animation-delay:-.4s}.listening i:nth-child(4){animation-delay:-.1s}.listening span{font-size:13px;margin-left:10px;color:#d9bec8}.play-blocked{position:absolute;z-index:6;top:48%;left:50%;transform:translate(-50%,-50%);border:1px solid #ffffff45;background:#211b24ed;color:#f1dae6;padding:13px 22px;border-radius:30px;white-space:nowrap}.stage[data-state=thinking] .connection:before,.stage[data-state=preparing] .connection:before{animation:pulse 1.2s infinite;background:#c4a3bb}footer{display:flex;justify-content:space-between;align-items:center;padding:29px 38px 23px;color:#aaa198;font-size:11px;gap:20px}footer .quiet{font-size:11px}dialog{border:1px solid #ded8cf;border-radius:19px;background:#f7f4ef;color:#403832;padding:35px;max-width:min(510px,calc(100% - 32px));max-height:80svh;box-shadow:0 25px 80px #0002}dialog::backdrop{background:#17121270;backdrop-filter:blur(5px)}dialog h2{margin:0 0 20px;font-weight:500;font-size:26px;letter-spacing:-.6px}dialog p{font-size:15px;line-height:1.65;color:#73665e}.dialog-close{position:absolute;right:16px;top:12px;font-size:25px;border:0;background:none;color:#918176}.fine{font-size:12px!important}#notes:empty:after{content:'Your conversation will appear here.'}#notes p{font-size:14px;margin:8px 0 20px}#notes strong{display:block;font-size:11px;font-weight:500;color:#ae8793;margin-bottom:2px}details{border-top:1px solid #ddd3c9;margin-top:20px;padding-top:15px;font-size:13px;color:#948579}details li{margin:10px 0;line-height:1.5}.scene-enter{animation:scene-enter .3s ease-out}@keyframes scene-enter{from{opacity:0}to{opacity:1}}@keyframes listen{to{height:22px}}@keyframes pulse{50%{opacity:.25}}
@media(min-height:900px) and (min-width:800px){main{padding-top:20px}.simulator{width:min(100%,800px)}.controls{margin-top:30px}footer{padding-top:35px}}
@media(max-width:600px){.masthead{padding:21px 21px}.wordmark{font-size:25px}.masthead nav{gap:18px}main{padding:12px 12px 0}.stage-shell{padding:6px;border-radius:23px}.stage{border-radius:18px}.stage-top{top:15px;left:17px;right:17px;font-size:9px;gap:8px}.stage-bottom{bottom:14px;left:17px;right:17px;font-size:9px}.stage-bottom>span{width:70px}.caption{left:7%;right:7%;bottom:39px;font-size:16px;line-height:1.3}.stage:not(.has-scene) .caption{font-size:15px;bottom:36px}.stage:not(.has-scene):has(.caption:not(:empty)) .friend{transform:translateY(-12%);opacity:.6}.wake-panel{bottom:12%}.wake-panel h1{font-size:23px;margin-bottom:18px}.wake{padding:10px 19px;font-size:12px;min-width:140px}.controls{gap:39px;margin-top:27px}.below-screen{margin-top:14px}.below-screen p{font-size:12px}.composer{max-width:290px}.friend{inset:12% 10% 15%}.keyboard-hint{display:none}footer{padding:30px 22px}.stage-bottom>span:last-child{width:80px}.listening{bottom:20%}.starters{gap:10px}.starters button{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(min-width:601px){.simulator{width:min(760px,100%,calc((100svh - 340px)*1.38));min-width:440px}.controls{margin-top:19px;margin-bottom:14px}footer{padding-top:22px}}
.stage,.scene img,.scene video{background:#000}.caption{max-height:36%;overflow:auto;scrollbar-width:thin}.friend img{mix-blend-mode:screen}
@media(max-width:600px){.rocker{height:88px;width:46px}.controls .control-group{min-height:114px}.talk{margin-top:11px}.select{margin-top:21px}.control-group>span{font-size:11px}}