/* 1.6: consistent machined surfaces and measured motion. */
:root{--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.18,.9,.25,1.06);--surface-shadow:inset 0 1px 1px var(--glass-edge),inset 0 -1px 2px var(--glass-shade),0 8px 22px color-mix(in srgb,var(--glass-shade) 60%,transparent)}
button,input,label,summary{-webkit-tap-highlight-color:transparent}
button{transition:background-color .24s var(--ease),color .24s var(--ease),box-shadow .32s var(--ease),transform .32s var(--ease)}
.panel,.test-row,.subject,.study-card,.settings-group{box-shadow:var(--surface-shadow)}
.btn{position:relative;isolation:isolate;box-shadow:inset 0 1px 1px #ffffff85,inset 0 -2px 2px #00000023,0 6px 16px var(--glass-shade);transition:box-shadow .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.icon-btn,.avatar{box-shadow:inset 0 1px 1px var(--glass-edge),inset 0 -1px 2px var(--glass-shade),0 4px 12px var(--glass-shade)}
.settings-row{position:relative;transition:background .3s var(--ease)}.settings-row+.settings-row{border-top-color:color-mix(in srgb,var(--muted) 14%,transparent)}.setting-symbol{box-shadow:inset 0 1px 1px var(--glass-edge),inset 0 -1px 2px var(--glass-shade);border:0}
.setting-copy strong{line-height:1.4}.settings-row>.icon:last-child{transition:translate .3s var(--ease)}.settings-row:active>.icon:last-child{translate:3px 0}
/* The profile summary is an intentional card, with space on every edge. */
.owner-details{padding-top:0;display:grid;gap:20px;align-content:start;min-width:0}
.account-service{position:relative;padding:27px!important;border:0!important;border-radius:27px;overflow:hidden;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--tint) 40%,var(--surface)));box-shadow:var(--surface-shadow)}
.account-service>.eyebrow{display:block;font-size:.61rem;letter-spacing:.14em;color:var(--accent);margin-bottom:16px}.account-service h2{font:400 clamp(1.6rem,3.5vw,2rem)/1.22 Prata,Georgia,serif;letter-spacing:-.035em;max-width:100%;position:relative}.account-service p{font-size:.83rem;line-height:1.65;margin:15px 0 0;max-width:430px}
.account-counts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:23px;padding-top:19px;border-top:1px solid color-mix(in srgb,var(--muted) 15%,transparent)}.account-counts>span{padding:0;gap:4px}.account-counts strong{font-size:1.6rem;line-height:1.2}.account-counts small{font-size:.7rem}
/* All controls in attempt setup share the same material. */
#start-form .range-fields input{box-shadow:inset 0 2px 5px var(--glass-shade),inset 0 -1px var(--glass-edge);transition:box-shadow .25s var(--ease)}
#start-form input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#start-form .attempt-advanced{margin:2px 0;padding:0;border-radius:19px;background:color-mix(in srgb,var(--tint) 65%,var(--surface));box-shadow:inset 0 1px 1px var(--glass-edge),inset 0 -1px 1px var(--glass-shade)}
#start-form .attempt-advanced>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;padding:14px 16px;cursor:pointer;color:var(--ink);min-height:62px}
#start-form .attempt-advanced>summary::-webkit-details-marker{display:none}#start-form .attempt-advanced>summary::marker{content:''}
#start-form .advanced-label{display:block;font-size:.82rem;font-weight:550;padding:0;color:var(--ink)}#start-form .attempt-summary{display:block;font-size:.68rem;line-height:1.4;color:var(--muted);font-weight:400;margin-top:4px}
#start-form .disclosure-chevron{font-size:20px;display:grid;place-items:center;width:28px;height:28px;background:var(--surface);color:var(--muted);border-radius:50%;padding:0;transition:rotate .3s var(--ease);box-shadow:inset 0 1px var(--glass-edge),0 2px 6px var(--glass-shade)}#start-form details[open] .disclosure-chevron{rotate:180deg}
.advanced-content{padding:0 14px 15px;display:grid;gap:16px}.choice-field{margin:0;padding:0;min-width:0;border:0}.choice-field[hidden]{display:none}.choice-field legend{padding:0;margin:0 0 9px;font-size:.7rem;color:var(--muted);font-weight:550}
.soft-segments{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:5px;padding:4px;border-radius:15px;background:color-mix(in srgb,var(--tint) 75%,var(--bg));box-shadow:inset 0 2px 5px var(--glass-shade),inset 0 -1px var(--glass-edge)}
.soft-segments label{display:block;position:relative;min-width:0;cursor:pointer}.soft-segments input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:1;cursor:pointer}
.soft-segments label>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:41px;padding:9px 5px;border-radius:12px;color:var(--muted);font-size:.76rem;font-weight:550;transition:color .25s var(--ease),background .25s var(--ease),box-shadow .35s var(--ease),transform .35s var(--spring)}
.soft-segments input:checked+span{background:var(--surface);color:var(--ink);box-shadow:inset 0 1px 1px var(--glass-edge),inset 0 -1px 1px var(--glass-shade),0 3px 8px var(--glass-shade)}.soft-segments input:active+span{transform:scale(.97)}.soft-segments input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.mode-segments label>span{min-height:58px}.mode-segments strong{font-size:.78rem;font-weight:550}.mode-segments small{font-size:.61rem;font-weight:400;line-height:1.3;color:var(--muted)}.mode-segments input:checked+span strong{color:var(--accent)}.time-segments label>span{font-size:.7rem}.attempt-mode-note{font-size:.68rem!important;line-height:1.5;color:var(--muted);margin:0!important}.option-unavailable{opacity:.45}
#start-form .switch{box-shadow:inset 0 1px 4px var(--glass-shade),inset 0 -1px var(--glass-edge);transition:background .26s var(--ease)}#start-form .switch:before{box-shadow:0 2px 5px #00000028,inset 0 1px 1px #ffffff99;transition:transform .34s var(--spring),background .25s}
.modal-head{box-shadow:0 8px 15px color-mix(in srgb,var(--surface) 80%,transparent)}.modal-body{scroll-behavior:smooth}.modal-head>.icon-btn{background:var(--tint);box-shadow:inset 0 1px var(--glass-edge),inset 0 -1px var(--glass-shade)}
/* One companion, independent of page rendering. Only its visible controls accept input. */
#pet-roamer{position:fixed;left:0;top:0;width:58px;height:62px;z-index:49;pointer-events:none;isolation:isolate;will-change:transform;transition:opacity .18s ease;contain:layout style}
#pet-roamer[hidden],#pet-roamer [hidden]{display:none!important}#pet-roamer.roamer-obstructed{opacity:0;visibility:hidden;pointer-events:none}#pet-roamer.roamer-obstructed *{pointer-events:none!important}
.roamer-avatar{position:relative;width:58px;height:62px;padding:0;display:block;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;background:none;border:0;box-shadow:none;cursor:grab;z-index:2;transition:none!important;transform:none!important}
.roamer-avatar:active{cursor:grabbing}.roamer-avatar .pet-character{width:58px;height:62px;transform-origin:50% 95%;animation:roamer-breathe 4s ease-in-out infinite}.roamer-avatar .pet-art{filter:drop-shadow(0 3px 1px #00000025)}.roamer-avatar:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:20px}
.roamer-shadow{position:absolute;bottom:0;left:12px;width:36px;height:5px;border-radius:50%;background:#19152225;filter:blur(3px);z-index:0;pointer-events:none;transition:opacity .3s}
.roamer-bubble,.roamer-menu{position:absolute;left:var(--bubble-x,0px);bottom:calc(100% + 12px);width:240px;max-width:calc(100vw - 20px);background:var(--glass);color:var(--ink);border-radius:18px;box-shadow:inset 0 1px 1px var(--glass-edge),inset 0 -1px 1px var(--glass-shade),0 10px 30px var(--glass-shade);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.roamer-bubble{padding:12px 15px;font-size:.74rem;line-height:1.55;pointer-events:none;animation:roamer-speech .32s var(--spring) both}.roamer-menu{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:7px;pointer-events:auto;z-index:4;animation:roamer-speech .25s var(--ease)}
.roamer-menu button{padding:10px 6px;min-height:42px;background:var(--surface);border-radius:11px;font-size:.73rem;box-shadow:inset 0 1px var(--glass-edge),0 2px 5px var(--glass-shade)}
#pet-roamer[data-high=true] .roamer-bubble,#pet-roamer[data-high=true] .roamer-menu{top:calc(100% + 12px);bottom:auto}
#pet-roamer[data-pose=walk] .pet-character{animation:roamer-walk .3s ease-in-out infinite}#pet-roamer[data-pose=held] .pet-character{animation:roamer-held .75s ease-in-out infinite}#pet-roamer[data-pose=happy] .pet-character{animation:pet-hop .8s var(--spring) 2}#pet-roamer[data-pose=curious] .pet-character{rotate:-9deg}#pet-roamer[data-pose=sleep] .pet-character{animation:roamer-breathe 6s ease-in-out infinite;rotate:-10deg}#pet-roamer[data-pose=eat] .pet-character{animation:pet-munch .6s ease-in-out 8}#pet-roamer[data-peek=true] .pet-character{rotate:-12deg}#pet-roamer[data-side=left][data-peek=true] .pet-character{rotate:12deg}
#pet-roamer[data-peek=true] .roamer-shadow{opacity:0}.roamer-toy{display:none;position:absolute;left:-30px;top:-20px;font-style:normal;font-size:22px;color:var(--accent);pointer-events:none}.roamer-playing .roamer-toy{display:block;animation:roamer-toy 2.2s ease-in-out both}
@keyframes roamer-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.015,1.025)}}
@keyframes roamer-walk{0%,100%{transform:translateY(0) rotate(-3deg) scale(1.03,.97)}50%{transform:translateY(-4px) rotate(3deg) scale(.97,1.03)}}
@keyframes roamer-held{0%,100%{transform:rotate(-7deg) scale(1.06)}50%{transform:rotate(7deg) scale(1.06)}}
@keyframes roamer-speech{from{opacity:0;translate:0 5px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes roamer-toy{0%{opacity:0;transform:translate(0,0) rotate(0)}15%{opacity:1}40%{transform:translate(55px,-15px) rotate(120deg)}75%{opacity:1;transform:translate(70px,25px) rotate(240deg)}100%{opacity:0;transform:translate(30px,30px) rotate(360deg)}}
@media(hover:hover) and (pointer:fine){.settings-row:hover{background:var(--tint)}.settings-row:hover>.icon:last-child{translate:3px 0}.subject:hover,.study-card:hover{transform:perspective(1000px) translateY(-3px) rotateX(1deg)}.roamer-menu button:hover{background:var(--tint)}.soft-segments label:hover>span{color:var(--ink)}.modal-head>.icon-btn:hover{rotate:8deg}}
@media(max-width:370px){.account-service{padding:21px!important;border-radius:23px}.advanced-content{padding-left:10px;padding-right:10px}.mode-segments strong{font-size:.72rem}.mode-segments small{font-size:.58rem}.time-segments label>span{font-size:.65rem}.soft-segments{gap:3px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body[data-motion=reduced] *,body[data-motion=reduced] *:before,body[data-motion=reduced] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}

body{transition:background-color .3s var(--ease),color .3s var(--ease)}
.btn:active:not(:disabled),.icon-btn:active:not(:disabled),.settings-row:active:not(:disabled){transform:none}

/* 1.7.0: one safe-area inset per bottom surface, no nested focus rings. */
#quiz-dock{padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}
#sheet{padding-bottom:0}
.modal-body{padding-bottom:max(14px,env(safe-area-inset-bottom,0px))}
@media(max-width:600px){dialog{max-height:92dvh}#sheet{max-height:92dvh}}
.review-search input,.review-search input:focus,.review-search input:focus-visible{
 outline:none!important;box-shadow:none!important;border:0!important;
 background:transparent!important;border-radius:0;min-width:0;flex:1;width:0;
}
.review-search:focus-within,.search:focus-within{outline:none;box-shadow:inset 0 2px 6px var(--glass-shade),inset 0 -1px 0 var(--glass-edge)}
.keyboard-input .review-search:focus-within,.keyboard-input .search:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.review-search{transition:background .25s,box-shadow .25s}
.quiz-companion .pet-character{width:70px;height:74px}
.quiz-companion .pet-tap{width:74px;min-width:74px;padding:0;align-self:end}
.quiz-companion .pet-coach{gap:8px;align-items:center}
.quiz-companion .pet-bubble{min-height:52px;padding:10px 11px;font-size:.7rem;border-radius:4px 12px 12px 4px}
.quiz-companion .pet-slot{margin-bottom:6px}
.quiz-companion .hint-area{margin-bottom:6px}
@media(min-width:700px){.quiz-companion .pet-character{width:80px;height:85px}.quiz-companion .pet-tap{width:84px;min-width:84px}}
@media(max-width:370px){.quiz-companion .pet-character{width:60px;height:64px}.quiz-companion .pet-tap{width:62px;min-width:62px}.quiz-companion .pet-bubble{font-size:.65rem;padding:8px}}
.result-page{max-width:600px;padding-top:0}
.result-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px 16px;padding:20px;text-align:left;border-radius:25px}
.result-card>.eyebrow{grid-column:1/-1;font-size:.61rem}
.result-card .result-ring{width:96px;height:96px;margin:0;align-self:center}
.result-card .result-ring>div{width:82px;height:82px}
.result-card .result-ring b{font-size:1.65rem;line-height:1.15}
.result-card .result-ring small{font-size:.5rem;letter-spacing:-.02em}
.result-card .result-message{align-self:center;min-width:0}
.result-card .result-message h1{font-size:clamp(1.18rem,4.7vw,1.55rem);line-height:1.2;letter-spacing:-.04em;margin:0 0 7px}
.result-card .result-message p{font-size:.73rem;line-height:1.5;margin:0;max-width:none}
.result-card>.pet-slot,.result-card>.small,.result-card>.result-material,.result-card>.stats,.result-card>.result-actions{grid-column:1/-1}
.result-card .pet-slot{margin:0}.result-card .pet-coach{gap:10px}
.result-card .pet-character{width:64px;height:68px}
.result-card .pet-bubble{padding:10px 12px;font-size:.76rem;line-height:1.45}
.result-card>.small{margin:0;font-size:.68rem}
.result-card .stats{margin:0;gap:0;background:var(--tint);border-radius:16px;padding:10px 0}
.result-card .stat{padding:0 6px;background:transparent;box-shadow:none;border:0;border-radius:0}
.result-card .stat+.stat{border-left:1px solid var(--line)}
.result-card .stat b{font-size:1.25rem;line-height:1.3;letter-spacing:-.04em}
.result-card .stat small{font-size:.66rem}
.result-material{font-size:.7rem;color:var(--muted)}
.result-material summary{cursor:pointer;padding:4px 0}
.result-material p{font-size:.73rem;line-height:1.5;margin:5px 0 0}
.result-actions{gap:8px}.result-actions .btn{margin:0;min-height:44px;padding:10px 14px;font-size:.8rem}
.result-actions .btn.ghost{min-height:34px;padding:6px;box-shadow:none}
@media(max-width:350px){.result-card{grid-template-columns:80px minmax(0,1fr);padding:16px;gap:12px}.result-card .result-ring{width:80px;height:80px}.result-card .result-ring>div{width:68px;height:68px}.result-card .result-ring small{font-size:.45rem}}
/* Fragments use the answer's own material and lettering. */
.hint-fragments{position:fixed;pointer-events:none;z-index:44;margin:0;max-width:none;overflow:visible}
.hint-fragment{position:absolute;inset:0;pointer-events:none;will-change:transform,opacity}
.hint-fragment>.answer{width:100%;height:100%;margin:0!important;min-height:0!important;transition:none!important;animation:none!important;pointer-events:none}

/* 1.7.0: walking belongs to movement, independently from speech and emotions. */
#pet-roamer[data-walking=true] .pet-character{animation:pet-footfall .52s linear infinite;rotate:0}
.pet-foot-left,.pet-foot-right{transform-box:fill-box;transform-origin:50% 15%}
#pet-roamer[data-walking=true] .pet-foot-left{animation:pet-step .52s linear infinite}
#pet-roamer[data-walking=true] .pet-foot-right{animation:pet-step .52s -.26s linear infinite}
#pet-roamer[data-walking=true][data-facing=left] .pet-art{scale:-1 1}
#pet-roamer[data-walking=true] .pet-tail{animation-duration:.65s}
#pet-roamer[data-pose=sleep] .pet-foot-left,#pet-roamer[data-pose=sleep] .pet-foot-right{animation:none}
#pet-roamer[data-habitat=sidebar] .roamer-shadow{opacity:.65}
#pet-roamer[data-peek=true] .roamer-shadow{opacity:0}
#pet-roamer[data-pose=sleep] .pet-character{rotate:-9deg;animation:roamer-breathe 6s ease-in-out infinite}
@keyframes pet-step{0%,100%{transform:translate(1px,0) rotate(8deg)}25%{transform:translate(0,-2px) rotate(-8deg)}50%{transform:translate(-1px,0) rotate(-8deg)}75%{transform:translate(0,0) rotate(4deg)}}
@keyframes pet-footfall{0%,50%,100%{transform:translateY(0)}25%,75%{transform:translateY(-1.5px)}}
@media(min-width:1001px){#sidebar{overflow-y:auto;scrollbar-width:thin}#sidebar .sidebar-foot{padding-bottom:90px;flex-shrink:0}#sidebar>.brand{flex-shrink:0}}
.splash-companion{position:absolute;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:grid;justify-items:center;gap:8px;min-width:140px}
#splash .splash-companion>span{font-size:.75rem;color:var(--muted);font-weight:500;letter-spacing:.03em}
#splash-pet{width:72px;height:80px;display:grid;place-items:center}
#splash-pet[hidden]{display:none}
#splash-pet .pet-character{width:70px;height:74px;animation:splash-pet-hop 1.65s cubic-bezier(.35,0,.3,1) infinite}
#splash-pet[data-sleeping=true] .pet-character{animation:roamer-breathe 6s ease-in-out infinite}
#splash.hidden .splash-companion *{animation-play-state:paused!important}
@keyframes splash-pet-hop{0%,40%,100%{transform:translateY(0) scale(1)}48%{transform:translateY(1px) scale(1.05,.95)}65%{transform:translateY(-10px) scale(.98,1.02)}83%{transform:translateY(0) scale(1.04,.96)}}
@media(prefers-reduced-motion:reduce){#pet-roamer *,#splash-pet *{animation:none!important;transition:none!important}}

#splash-pet .pet-flying-heart,#splash-pet .pet-zzz,#splash-pet .pet-bowl{display:none}
#splash-pet [data-emotion=love] .pet-flying-heart{display:block;color:#d74489;font-size:1.1rem}
#splash-pet [data-emotion=sleep] .pet-zzz{display:block;color:var(--accent);font-size:.85rem}