:root{color-scheme:dark;--bg:#000000;--ink:#fff5dd;--face:#ffffff;--muted:#a69ba8;--accent:#d6b6ef}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,sans-serif;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:clamp(16px,3vw,40px);overflow-x:hidden}button,select,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}header,footer{display:flex;justify-content:space-between;align-items:center;gap:16px}header{min-height:44px}.brand{font-size:32px;font-weight:750;letter-spacing:-2px}.dot{color:var(--accent)}.edition{color:var(--muted);font-size:12px;letter-spacing:.08em}header button{background:transparent;border:1px solid #514454;border-radius:24px;padding:11px 17px;font-size:13px;min-height:44px}main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 0;min-height:0}.intro{text-align:center}.eyebrow{font-size:10px;letter-spacing:.23em;color:var(--accent);font-weight:650}h1{font-size:clamp(24px,3.4vw,42px);font-weight:450;letter-spacing:-.05em;margin:10px 0}p{line-height:1.6}.intro p{color:var(--muted);font-size:13px;margin:0}.face{display:block;position:relative;width:min(64vw,660px);height:clamp(180px,32vh,330px);padding:0;border:0;background:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.face-inner{position:absolute;inset:0;transform:translate(var(--gx,0px),var(--gy,0px));transition:transform .7s ease}.eye{position:absolute;top:10%;width:26%;height:65%;background:var(--face);border-radius:45%;overflow:hidden;transform:scaleY(var(--lid,1));transition:height .35s,top .35s,border-radius .35s,transform .09s}.eye.left{left:12%}.eye.right{right:12%}.pupil{position:absolute;width:48%;height:56%;background:#000000;border-radius:50%;top:25%;left:26%;transform:translate(var(--px,0px),var(--py,0px));transition:transform .65s ease}.pupil i{position:absolute;width:25%;height:23%;background:#ffffff;border-radius:50%;left:15%;top:15%}.cheek{position:absolute;top:80%;width:11%;height:6%;border-radius:50%;background:#df9e9b;opacity:.65}.cheek.left{left:5%}.cheek.right{right:5%}.mouth{position:absolute;width:10%;height:13%;border-bottom:5px solid var(--face);border-radius:0 0 60% 60%;left:45%;top:84%;transition:all .3s}.brow{display:none;position:absolute;width:24%;height:5%;background:var(--face);top:2%;border-radius:100%}.brow.left{left:13%;transform:rotate(16deg)}.brow.right{right:13%;transform:rotate(-16deg)}body[data-mood=curious] .eye.right{height:52%;top:17%}body[data-mood=curious] .mouth{width:6%;left:47%;transform:rotate(-12deg)}body[data-mood=surprised] .mouth{height:15%;width:7%;left:46.5%;border:4px solid var(--face);border-radius:50%}body[data-mood=surprised] .pupil{transform:scale(.65)}body[data-mood=grumpy] .brow{display:block}body[data-mood=grumpy] .eye{height:45%;top:23%;border-radius:20% 20% 45% 45%}body[data-mood=grumpy] .mouth{border:0;border-top:4px solid var(--face);border-radius:50% 50% 0 0;top:87%}body[data-mood=sleepy] .eye{height:12%;top:39%;border-radius:50%}body[data-mood=sleepy] .pupil{opacity:0}body[data-mood=sleepy] .mouth{width:6%;left:47%;height:5%;top:87%}.below{text-align:center;margin:8px 0 27px}.below p{font-size:16px;margin:0 0 5px}.hint{font-size:11px;letter-spacing:.05em;color:var(--muted)}nav{display:flex;gap:5px;border:1px solid #3b303f;padding:6px;border-radius:22px;background:#211b28}nav button{background:transparent;border:1px solid transparent;border-radius:16px;padding:10px 17px;min-height:52px;font-size:20px;display:flex;gap:8px;align-items:center;color:var(--muted)}nav button span{font-size:12px}nav button[aria-pressed=true]{background:#3a2e43;color:#f3dfff;border-color:#5a4566}footer{color:var(--muted);font-size:10px;letter-spacing:.04em;min-height:25px}.status-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#a7b89c;margin-right:7px}.tiny-star{color:var(--accent);margin-left:7px}dialog{background:#251e2c;color:var(--ink);border:1px solid #5a4566;border-radius:24px;width:min(94vw,510px);max-height:90vh;padding:26px}dialog::backdrop{background:#08050bc9}.dialog-head{display:flex;justify-content:space-between;gap:16px;align-items:center}h2{margin:8px 0;font-weight:500;letter-spacing:-.04em}.dialog-head button{border:0;background:#3a2e43;border-radius:50%;width:44px;height:44px}.description,.small,details{color:#bfb2c3;font-size:12px}.row{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid #493b50;font-size:13px;min-height:52px}select{background:#382c40;color:var(--ink);border:1px solid #6b5478;padding:9px;border-radius:9px}input{width:24px;height:24px;accent-color:#d6b6ef}.actions{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.actions button{border:1px solid #6b5478;background:#382c40;border-radius:12px;padding:12px;min-height:44px;font-size:12px}summary{cursor:pointer;padding:12px 0;min-height:44px}#setting-status{font-size:12px;color:var(--accent)}body.dim .face{opacity:.5}body.hide-moods nav{display:none}body.reduced .face-inner,body.reduced .eye,body.reduced .pupil,body.reduced .mouth{transition:none}@media(max-width:600px){.edition{display:none}nav button{padding:10px 11px;flex-direction:column;gap:3px}nav button span{font-size:10px}.face{width:88vw;height:27vh;min-height:180px}footer>span:last-child{display:none}.below{margin-bottom:20px}}@media(max-height:680px){.intro{display:none}main{padding:0}.face{height:48vh;min-height:140px}.below{margin:0 0 12px}.hint{display:none}nav button{min-height:44px;padding:7px 14px}}@media(prefers-reduced-motion:reduce){.face-inner,.eye,.pupil,.mouth{transition:none}}

/* Face-only companion view keeps settings available in the top corner. */
body.face-only{padding:0;min-height:100vh;min-height:100dvh}
body.face-only header{position:fixed;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:2;min-height:44px}
body.face-only header .brand,body.face-only header .edition,body.face-only .intro,body.face-only main nav,body.face-only footer{display:none}
body.face-only #settings{width:48px;height:48px;padding:0;border-color:#333;background:#080808;color:#aaa;font-size:20px}
body.face-only #settings span{display:none}
body.face-only main{height:100vh;height:100dvh;flex:none;padding:60px 12px;justify-content:center}
body.face-only .face{width:min(94vw,1000px);height:clamp(220px,58vh,560px);height:clamp(220px,58dvh,560px);min-height:0;touch-action:none;user-select:none;-webkit-user-select:none}
body.face-only .below{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.face{user-select:none;-webkit-user-select:none;touch-action:none}
body.petted:not(.reduced) .eye{transform:scaleY(.7)}
@media(max-width:600px) and (orientation:portrait){body.face-only .face{height:32vh;height:32dvh}}
@media(prefers-reduced-motion:reduce){body.petted .eye{transform:none}}