*{box-sizing:border-box}body{margin:0;background:#f8f9f5;color:#273d35;font:15px system-ui,sans-serif}button,select,textarea{font:inherit}button{cursor:pointer;border:1px solid #dce3da;border-radius:9px;background:white;padding:11px 18px;color:inherit}button:disabled{opacity:.45;cursor:default}header{padding:24px 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e3e8df}header b{font-size:25px}small{font-size:11px;font-weight:400;color:#7a887e}header small{margin-left:12px;letter-spacing:2px}header span{color:#7b887f;font-size:13px}main{max-width:1160px;margin:auto;padding:44px 25px}.eyebrow{font-size:11px;letter-spacing:2px;color:#849580}h1{font-size:36px;font-weight:500;margin:12px 0}h2{font-size:19px;font-weight:550;margin:0}p{line-height:1.7}.intro{color:#7a887e;margin-bottom:32px}.grid{display:grid;grid-template-columns:1.25fr 1fr;gap:24px}section{background:white;border:1px solid #e3e8df;border-radius:18px;padding:26px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:15px}#badge{font-size:12px;color:#82917f}.viewport{margin-top:22px;position:relative;background:#edf1e8;border-radius:12px;height:280px;overflow:hidden;display:grid;place-items:center;text-align:center}.face{margin:auto;border:2px solid #a8b89b;width:85px;height:95px;border-radius:45%;font-size:65px;color:#8a9f7a;line-height:85px}h3{font-size:17px;font-weight:500}#placeholder p{font-size:12px;color:#88957e}.corner{position:absolute;bottom:14px;left:16px;font-size:9px;letter-spacing:2px;color:#819477}video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:none}#status,#saved{font-size:12px;color:#7e8b80;min-height:22px}.actions{display:flex;gap:10px}.primary{background:#526d4d;color:white;border-color:#526d4d}.result{margin-top:24px;padding-top:20px;border-top:1px solid #eef0ea}.result strong{float:right;font-size:30px;font-weight:500}.result p{font-size:13px;color:#82907f}.checkin>p:not(.eyebrow){color:#83907f;font-size:13px}.moods{display:flex;gap:8px;margin:28px 0}.moods button{flex:1;padding:12px 0;font-size:24px;background:#f8f9f5}.moods button span{display:block;font-size:11px;margin-top:8px}.moods button.selected{background:#e8eedf;border-color:#6c865b}label{display:block;font-size:13px;margin-bottom:10px}textarea{width:100%;height:82px;border:1px solid #e3e8df;border-radius:8px;padding:12px;resize:vertical;margin-bottom:18px;background:#fcfcfa}.checkin>.primary{width:100%}aside{margin-top:18px;padding:23px;border-radius:14px;background:#edf0e4;font-size:14px}aside p{font-size:12px;color:#7b886f;margin-bottom:0}.history{margin-top:26px}.chart{height:150px;display:flex;align-items:end;justify-content:space-around;gap:8px;padding:12px 0 24px}.bar{height:100%;flex:1;max-width:70px;display:flex;flex-direction:column;justify-content:end;text-align:center;font-size:10px;color:#83907f}.fill{background:#a6b78d;border-radius:5px 5px 0 0;min-height:2px}.bar span{margin-top:7px}.legend{font-size:12px;color:#637e50}.legend span{color:#8d9789}#summary{font-size:13px;color:#7b8876}.record{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #edf0e8;padding:15px 0;font-size:13px}.record p{margin:5px 0;color:#7f8b78;white-space:pre-wrap;overflow-wrap:anywhere}footer{display:flex;justify-content:space-between;align-items:center;color:#929c8b;font-size:12px;padding:25px 0}footer button{background:none;font-size:11px}@media(max-width:760px){.grid{grid-template-columns:1fr}header span{display:none}h1{font-size:28px}main{padding:25px 16px}section{padding:20px}.viewport{height:250px}}
.calibration{border-top:1px solid #edf0e8;margin-top:20px;padding-top:16px}.calibration button{font-size:12px;margin:0 6px 6px 0}.calibration p,#quality{font-size:11px;color:#7e8b80}.signal{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f1f3ee}.signal b{font-weight:500;color:#617d50}.record>span{max-width:46%;line-height:1.7}.result>span{display:block;margin-bottom:10px}

#snapshot{width:160px;border-radius:10px;transform:scaleX(-1);margin-top:12px}.record-photo{width:112px;height:84px;object-fit:cover;border-radius:9px;float:left;margin:0 14px 8px 0;transform:scaleX(-1)}

/* Keep the product focused on the observation and personal check-in. */
.calibration,#feedback,#quality{display:none}.result>span small{display:none}#signals>p{display:none}

#summary>span{display:block;font-size:16px;color:#526d4d}.moment-count{display:block;margin-top:6px;color:#8b9784}
/* Sky edition */
:root{--ink:#263d46;--pointer-x:0px;--pointer-y:0px}html{scroll-behavior:smooth;scroll-padding-top:110px}body{color:var(--ink);background:#dce7ec}.sky{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(ellipse at 77% 35%,#faf4dd 0,transparent 42%),linear-gradient(150deg,#c2d7e7 0%,#d9e5eb 45%,#eeeae1 100%)}.sunlight{position:absolute;width:55vw;height:65vh;right:-5%;top:2%;background:radial-gradient(ellipse,#fffcebd9,transparent 65%);filter:blur(35px)}.cloud{position:absolute;border-radius:50%;filter:blur(45px);background:#ffffffe0;transform:translate(var(--pointer-x),var(--pointer-y));transition:transform 1.8s ease;animation:drift 24s ease-in-out infinite alternate}.cloud-one{width:85vw;height:29vh;left:32%;top:23%;box-shadow:-15vw 13vh 80px 20px #f8faf7aa}.cloud-two{width:65vw;height:26vh;left:-25%;top:58%;opacity:.65;animation-delay:-12s}.cloud-three{width:65vw;height:18vh;right:-25%;bottom:-5%;opacity:.8;animation-delay:-7s}@keyframes drift{from{margin-left:-15px;opacity:.65}to{margin-left:35px;opacity:.95}}header{position:absolute;top:0;left:0;width:100%;padding:29px 4%;border:0;z-index:3}a{color:inherit;text-decoration:none}.brand{display:flex;align-items:center;gap:17px;font-size:23px;letter-spacing:-1px;font-weight:550}.brand span{font-size:30px;font-weight:400}nav{display:flex;gap:34px;font-size:15px}nav a:hover{opacity:.6}main{max-width:none;padding:0 4%;margin:0}.hero{height:100svh;min-height:620px;position:relative;display:flex;align-items:center}.hero-content{padding-left:4%;padding-bottom:15px;z-index:1}h1{font-size:clamp(48px,6.9vw,104px);font-weight:400;line-height:1.22;letter-spacing:-.06em;margin:0 0 42px}.hero-button{border:1px solid #ffffff80;background:#ffffffc4;color:#2b414a;border-radius:50px;padding:16px 26px;font-size:16px;min-width:165px;display:flex;justify-content:space-between;gap:36px;box-shadow:0 3px 20px #798d9708;transition:background .25s,transform .25s}.hero-button:hover{background:#263d46;color:white;transform:translateY(-2px)}.hero-button span{font-size:20px}.scroll-cue{position:absolute;bottom:38px;left:4%;display:flex;gap:24px;align-items:center;font-size:13px}.hero-mark{position:absolute;right:9%;bottom:13%;font-size:clamp(130px,22vw,300px);font-weight:200;color:#fff7;line-height:1;pointer-events:none}.grid{max-width:1110px;margin:20px auto 85px;gap:24px;scroll-margin-top:35px}[hidden]{display:none!important}section{background:#ffffffa8;border:1px solid #ffffffb0;box-shadow:0 12px 50px #49647006;backdrop-filter:blur(24px);border-radius:22px}.viewport{background:#e1e9e8b0}.primary{background:#344f58;border-color:#344f58;border-radius:30px}.actions button{border-radius:30px}.moods button{background:#ffffff80;border:1px solid #d5dfe0;border-radius:14px}.moods button.selected{background:#c9dcdd;border-color:#6e929a}.history{max-width:1110px;margin:0 auto;padding:34px;min-height:290px;scroll-margin-top:35px}.history h2{font-size:29px;font-weight:400}.history select{background:transparent;border:1px solid #acbdc3;border-radius:25px;padding:9px 14px;color:var(--ink)}.legend{color:#677e87}.legend span{display:none}.fill{background:#8ba8b2}#summary{font-size:16px;line-height:1.8;color:#536d78;margin:25px 0}.record{border-color:#b8cbd050}.record p{color:#627a84}.record-photo{border:3px solid #fff9}footer{max-width:1110px;margin:auto;padding:25px 0 35px;color:#667e88}footer button{border-color:#b1c2c6;color:#667e88}.result{border-color:#bbcdd04d}#signals .signal{border-color:#c8d5d54d}#signals b{color:#476d7a}textarea{background:#ffffff70;border-color:#c4d3d7}button:focus-visible,a:focus-visible{outline:2px solid #476d7a;outline-offset:5px}@media(max-width:760px){header{padding:23px 6%}.brand{font-size:20px}nav{gap:20px;font-size:13px}main{padding:0 5%}.hero{min-height:570px;align-items:center}.hero-content{padding:0 2%}.hero h1{font-size:clamp(45px,10vw,74px);margin-bottom:32px}.hero-mark{right:0;bottom:18%;font-size:130px}.grid{margin-top:0;margin-bottom:50px}.history{padding:23px}.cloud-one{height:20vh;top:32%;width:120vw}.scroll-cue{left:2%}footer{gap:20px;font-size:11px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cloud{animation:none;transition:none;transform:none}.hero-button{transition:none}}
/* A warm afternoon under the trees */
:root{--ink:#45472e;--cat-turn:0deg;--cat-tilt:0deg;--cat-roll:0deg}body{background:#ece9cf;color:var(--ink)}.sky{background:linear-gradient(90deg,#f7efd9ee 0%,#f3eedac9 37%,#d9dfbc55 70%,#dddfbc33),url('/assets/afternoon.jpg') center 61%/cover no-repeat}.sky:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#e9e4cbee,transparent 35%),radial-gradient(ellipse at 75% 28%,#ffe7a95c,transparent 65%);pointer-events:none}.sunlight{width:100vw;height:100vh;right:-30%;top:-35%;background:radial-gradient(ellipse,#fff3c9a8,transparent 65%);filter:blur(30px)}.cloud{display:none}header{color:#41432c}.hero h1{color:#45462e;text-shadow:0 2px 30px #fff5d940}.hero-button{background:#fff9e8d9;border-color:#fff6d2;color:#555333;box-shadow:0 8px 30px #5e573512}.hero-button:hover{background:#565d39;color:#fff9e7}.cat-scene{position:absolute;right:3%;bottom:8%;width:45%;height:76%;max-width:560px;pointer-events:none;perspective:900px}.cat-shadow{position:absolute;left:5%;right:0;bottom:0;height:8%;border-radius:50%;background:#514c3245;filter:blur(18px)}.cat-body,.cat-head{position:absolute;background-image:url('/assets/cat.png');background-repeat:no-repeat;filter:drop-shadow(0 10px 18px #594c2910)}.cat-head{transform-origin:50% 83%;transform:rotateY(var(--cat-turn)) rotateX(var(--cat-tilt)) rotateZ(var(--cat-roll));transition:transform .65s ease-out;will-change:transform}.history,section{background:#fffdf0bd;border-color:#fff8dcbd;box-shadow:0 14px 60px #5e643c0a}.primary{background:#5b6440;border-color:#5b6440}.moods button{background:#fffdf0a6;border-color:#d8d9bd}.moods button.selected{background:#e3e6c7;border-color:#8e9b66}.viewport{background:#e8e8d2ad}.fill{background:#a1af79}.history select{border-color:#b9c29f;color:#555e3d}.legend,#summary{color:#6a7350}.record{border-color:#c7cba955}.record p{color:#7d8264}#signals b{color:#6d7850}textarea{background:#fffdf2a8;border-color:#d6d9bf}footer,footer button{color:#78815f}.scroll-cue{color:#5c6344}@media(max-width:760px){.sky{background:linear-gradient(90deg,#f7efd9ed,#f3eedaa0),url('/assets/afternoon.jpg') center/cover}.hero{align-items:flex-start;padding-top:145px;min-height:720px}.hero h1{font-size:clamp(43px,10vw,70px)}.hero-content{position:relative;z-index:2}.cat-scene{width:62%;height:49%;right:-1%;bottom:4%;opacity:.97}.scroll-cue{z-index:2}.hero-button{padding:13px 21px}}@media(prefers-reduced-motion:reduce){.cat-head{transform:none;transition:none}}
.cat-scene{height:auto;aspect-ratio:3/4;max-width:470px;bottom:6%;right:5%}.cat-body{width:86%;aspect-ratio:800/1024;left:3%;bottom:0;background-size:192% 100%;background-position:0 0}.cat-head{width:81%;aspect-ratio:736/700;left:12%;bottom:44%;background-size:208.6957% 146.2857%;background-position:100% 49.3827%}.cat-shadow{bottom:1%;left:5%;right:10%}@media(max-width:760px){.cat-scene{width:55%;height:auto;bottom:4%;right:-1%;max-width:270px}}
/* Sky study: a neutral atmosphere, independent of expression results. */
:root{--ink:#273e49}body{background:#e4edf0;color:var(--ink)}.sky{background:radial-gradient(ellipse at 78% 22%,#fffaf0 0%,#f4f6f0a6 18%,transparent 48%),linear-gradient(155deg,#b8d2e0 0%,#d7e6eb 44%,#f3f1e9 100%)}.sky:after{background:linear-gradient(0deg,#e8eef0,transparent 46%);opacity:.65}.sunlight{background:radial-gradient(ellipse,#fffefaac,transparent 65%)}.cloud{display:block;background:#ffffffb0;filter:blur(46px);border-radius:50%;transform:translate(var(--pointer-x,0px),var(--pointer-y,0px));transition:transform 2s ease-out;animation:drift 20s ease-in-out infinite alternate}.cat-scene{display:none}header,.hero h1{color:#273e49}.hero h1{font-weight:350;text-shadow:none}.hero-button{background:#ffffffb8;border-color:#ffffffab;color:#314a56}.hero-button:hover{background:#314a56;color:white}.scroll-cue{color:#526d79}section,.history{background:#ffffffa6;border-color:#ffffffbd;box-shadow:0 15px 60px #4c6c7c08}.primary{background:#425f6c;border-color:#425f6c}.moods button{background:#ffffff90;border-color:#cfdbdf}.moods button.selected{background:#d0e1e6;border-color:#7397a6}.viewport{background:#e0e9ec}.fill{background:#91adba}.history select{border-color:#aabec7;color:#425f6c}.legend,#summary{color:#607a87}.record{border-color:#bfd0d655}.record p{color:#748995}#signals b{color:#52788a}textarea{background:#ffffff90;border-color:#cbd9df}footer,footer button{color:#7d929d}@media(max-width:760px){.sky{background:radial-gradient(ellipse at 90% 20%,#fffaf3,transparent 55%),linear-gradient(155deg,#b8d2e0,#e9eff0)}.hero{align-items:center;padding-top:0;min-height:620px}.hero-content{padding-bottom:90px}}@media(prefers-reduced-motion:reduce){.cloud{animation:none;transform:none}}
.mobile-nav,.direct-mood,.mobile-back,.mobile-next,.mobile-retry{display:none}.mobile-analysis>summary{cursor:pointer;font-size:13px;padding:16px 0;color:#6c8390}.mobile-analysis .result{margin-top:0}#snapshot{width:100%;max-height:280px;object-fit:cover;margin-top:20px}.mobile-analysis .result>span{display:none}@media(min-width:761px){.mobile-analysis{display:block}.mobile-analysis:not([open])>.result{display:block}}
@media(max-width:760px){body{padding-bottom:90px}header{position:absolute;padding:24px 6%;}header nav{display:none}.brand{font-size:21px}.hero{min-height:calc(100svh - 90px);height:calc(100svh - 90px)}.hero h1{font-size:clamp(43px,11vw,65px);line-height:1.3}.hero-content{padding:0 4%;width:100%}.hero-button{width:100%;justify-content:center;font-size:17px;padding:18px}.direct-mood{display:block;background:transparent;border:0;color:#5f7885;margin:16px auto;padding:8px;font-size:14px}.scroll-cue{display:none}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;width:100%;height:calc(72px + env(safe-area-inset-bottom));padding:8px 12% calc(8px + env(safe-area-inset-bottom));background:#f8fbfbe8;backdrop-filter:blur(20px);border-top:1px solid #fff9;z-index:20;justify-content:space-around}.mobile-nav button{display:flex;flex-direction:column;gap:2px;align-items:center;background:none;border:0;color:#91a4ad;font-size:25px;padding:0 32px}.mobile-nav button span{font-size:11px}.mobile-nav button.active{color:#354f5d}.grid{margin:0 auto 25px;padding-top:82px;display:block}.mobile-back{display:block;background:none;border:0;padding:0 0 20px;color:#506c79}.camera,.checkin{border-radius:20px;padding:22px}.viewport{height:340px}.mobile-next{display:block;width:100%;margin-top:18px}.mobile-retry{display:block;margin:0 0 18px auto;background:none;border:0;font-size:13px;color:#728a96;padding:0}.checkin h2{font-size:24px;font-weight:450;margin-bottom:24px}.moods{gap:5px}.moods button{font-size:25px;min-height:80px}.moods button span{font-size:11px}.checkin>.primary{padding:16px;font-size:16px}.history{margin-top:90px;padding:22px}.history h2{font-size:30px}.record-photo{width:88px;height:72px}footer{display:none}.mobile-toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);border-radius:30px;padding:13px 24px;color:white;background:#3c5968;z-index:40;white-space:nowrap}body[data-mobile-view=home] .history,body[data-mobile-view=flow] .hero,body[data-mobile-view=observe] .hero,body[data-mobile-view=confirm] .hero,body[data-mobile-view=observe] .history,body[data-mobile-view=confirm] .history{display:none}body[data-mobile-view=observe] .grid>div{display:none}body[data-mobile-view=confirm] .camera{background:none;border:0;box-shadow:none;padding:0}body[data-mobile-view=confirm] .camera>*{display:none}body[data-mobile-view=confirm] .camera>#snapshot:not([hidden]){display:block;max-height:280px;margin:0 0 20px}body[data-mobile-view=confirm] .camera>.mobile-analysis{display:block;margin-bottom:20px}body[data-mobile-view=confirm] .checkin{padding-bottom:20px}body[data-mobile-view=confirm] .mobile-analysis[open] .result{display:block}body[data-mobile-view=observe] .mobile-analysis{display:none}}

.chart{display:block;height:auto;padding:8px 0 0}.chart svg{display:block;width:100%;height:auto;min-height:150px}.legend{margin-top:10px;font-size:11px}

#snapshot{height:auto;max-height:none;object-fit:contain}.record-photo{height:auto;max-height:150px;object-fit:contain}.mobile-analysis>summary{display:none}.mobile-analysis .result{display:block}
@media(max-width:760px){.direct-mood,.mobile-next,#stop{display:none!important}.viewport{position:relative;height:auto;aspect-ratio:3/4;max-height:58svh}.viewport video{position:absolute;inset:0;object-fit:contain}.viewport #start{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;border-radius:40px;padding:17px 27px;box-shadow:0 8px 30px #28455222}.viewport #start:disabled{opacity:.8;background:#425f6cbd}.actions{display:none}.mobile-analysis{margin:10px 0 24px}.mobile-analysis .result{padding:0;border:0}.camera .section-title{margin-bottom:16px}body[data-mobile-view=confirm] .camera>#snapshot:not([hidden]){height:auto;max-height:none;object-fit:contain}body[data-mobile-view=observe] .viewport #placeholder p{display:none}.viewport #placeholder{padding-top:130px}.viewport #placeholder .face{display:none}}
/* Snapshots retain their native size; only shrink to fit narrow screens. */
#snapshot,body[data-mobile-view=confirm] .camera>#snapshot:not([hidden]){width:auto;max-width:100%;height:auto;max-height:none;object-fit:contain;display:block;margin:16px auto 20px}

.lens-hint{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:4;background:#233e4b88;color:white;border-radius:30px;padding:8px 16px;font-size:14px;white-space:nowrap;pointer-events:none}

#frozenPhoto{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:scaleX(-1)}@media(max-width:760px){.actions{display:flex;justify-content:center;margin-top:18px}.actions #start{width:100%;padding:16px;border-radius:32px;font-size:17px}.viewport{background:transparent}body[data-mobile-view=confirm] .camera>.actions{display:none}}
@media(max-width:760px){body[data-mobile-view=observe] header{display:none}body[data-mobile-view=observe] .grid{padding-top:54px;margin-bottom:0}body[data-mobile-view=observe] .mobile-back{position:fixed;right:18px;top:calc(10px + env(safe-area-inset-top));z-index:30;margin:0;padding:7px 13px;font-size:24px;background:#ffffffa8;border-radius:50%;line-height:1;border:0}body[data-mobile-view=observe] .camera{padding:12px;background:transparent;box-shadow:none;border:0}body[data-mobile-view=observe] .viewport{height:calc(100svh - 245px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:58svh;min-height:200px;aspect-ratio:auto;margin-top:0}body[data-mobile-view=observe] #status{font-size:11px;margin:8px 0;min-height:18px;line-height:1.4}body[data-mobile-view=observe] .actions{display:flex;margin-top:8px}body[data-mobile-view=observe] .actions #start{position:static;transform:none;width:100%;padding:15px 24px;min-height:50px;border-radius:32px}body[data-mobile-view=observe] .viewport #start{display:none!important}body[data-mobile-view=observe] .result,body[data-mobile-view=observe] #snapshot{display:none!important}}

/* One geometry for live preview, frozen capture, and confirmation photo. */
.viewport,body[data-mobile-view=observe] .viewport{width:100%;max-width:640px;height:auto;min-height:0;max-height:none;aspect-ratio:var(--capture-ratio,4/3);margin-left:auto;margin-right:auto;position:relative}
.viewport video,#frozenPhoto{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
#snapshot,body[data-mobile-view=confirm] .camera>#snapshot:not([hidden]){width:100%;max-width:640px;height:auto;max-height:none;aspect-ratio:var(--capture-ratio,auto);object-fit:contain;margin:0 auto 20px}
@media(max-width:760px){body[data-mobile-view=observe] .camera{padding:0}body[data-mobile-view=confirm] .camera{padding:0}body[data-mobile-view=observe] .grid{padding-top:54px}}
/* Fit the full photo and controls on mobile, preserving capture geometry. */
@media(max-width:760px){:root{--photo-height:min(46svh,380px);--photo-width:min(100%,calc(var(--photo-height) * var(--capture-ratio,1.333333)))}
.viewport,body[data-mobile-view=observe] .viewport,#snapshot,body[data-mobile-view=confirm] .camera>#snapshot:not([hidden]){width:var(--photo-width);max-width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:var(--capture-ratio,4/3);margin-left:auto;margin-right:auto}
body[data-mobile-view=observe] .grid{padding-top:48px}body[data-mobile-view=confirm] .grid{padding-top:52px}.actions{max-width:360px;margin-left:auto;margin-right:auto}body[data-mobile-view=observe] #status{max-width:360px;margin-left:auto;margin-right:auto}.checkin h2{font-size:21px;margin-bottom:14px}.moods{margin:18px 0}}

@media(max-width:760px){
body[data-mobile-view=analysis] header,body[data-mobile-view=mood] header,body[data-mobile-view=analysis] .hero,body[data-mobile-view=mood] .hero,body[data-mobile-view=analysis] .history,body[data-mobile-view=mood] .history{display:none}
body[data-mobile-view=analysis] .grid,body[data-mobile-view=mood] .grid{padding-top:56px;margin-bottom:24px}
body[data-mobile-view=observe] .mobile-back,body[data-mobile-view=analysis] .mobile-back,body[data-mobile-view=mood] .mobile-back{display:block;position:fixed;right:18px;top:calc(10px + env(safe-area-inset-top));z-index:30;margin:0;padding:8px 12px;font-size:24px;line-height:1;background:#ffffffb0;border:0;border-radius:50%}
body[data-mobile-view=analysis] .grid>div{display:none}
body[data-mobile-view=analysis] .camera{padding:0;background:none;border:0;box-shadow:none}
body[data-mobile-view=analysis] .camera>*{display:none}
body[data-mobile-view=analysis] .camera>#snapshot:not([hidden]){display:block;width:var(--photo-width);max-width:100%;height:auto;aspect-ratio:var(--capture-ratio,4/3);margin:0 auto 16px}
body[data-mobile-view=analysis] .camera>.mobile-analysis{display:block;margin:0 auto 12px;max-width:360px}
body[data-mobile-view=analysis] .mobile-analysis .result{display:block;padding:0;border:0}
body[data-mobile-view=analysis] .camera>.mobile-retry{display:block;margin:16px auto;padding:8px 15px;font-size:14px}
body[data-mobile-view=analysis] .camera>.mobile-next{display:block;width:100%;max-width:360px;margin:16px auto;padding:16px;border-radius:30px}
body[data-mobile-view=mood] .camera{display:none}
body[data-mobile-view=mood] .checkin{margin-top:20px}
body[data-mobile-view=observe] .mobile-retry,body[data-mobile-view=observe] .mobile-next{display:none!important}
}

@media(max-width:760px){body[data-mobile-view=analysis] .grid>div{display:block}body[data-mobile-view=analysis] .camera>.mobile-next{display:none!important}body[data-mobile-view=analysis] .checkin{padding:18px;margin-top:8px}body[data-mobile-view=analysis] .checkin h2{font-size:19px;margin-bottom:12px}body[data-mobile-view=analysis] .moods{margin:12px 0 18px}body[data-mobile-view=analysis] .moods button{min-height:65px;padding:8px 0}body[data-mobile-view=analysis] .camera>#snapshot:not([hidden]){width:min(100%,calc(min(30svh,260px) * var(--capture-ratio,1.333333)));margin-bottom:10px}body[data-mobile-view=analysis] .camera>.mobile-analysis{margin-bottom:0}body[data-mobile-view=analysis] .signal{padding:6px 0;font-size:13px}body[data-mobile-view=analysis] .camera>.mobile-retry{margin:8px auto;padding:6px 15px}body[data-mobile-view=analysis] .checkin textarea{height:56px;margin-bottom:10px}body[data-mobile-view=analysis] .checkin label{margin-bottom:6px}body[data-mobile-view=analysis] .checkin #saved:empty{display:none}body[data-mobile-view=analysis] .camera #status{display:none}}
@media(max-width:760px){body[data-mobile-view=analysis] .camera>#snapshot:not([hidden]){width:var(--photo-width);max-width:100%;height:auto;aspect-ratio:var(--capture-ratio,4/3)}}
.record-photo{cursor:zoom-in}.photo-viewer{position:fixed;inset:0;z-index:100;background:#16242bf2;color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 18px calc(35px + env(safe-area-inset-bottom));touch-action:pan-y}.photo-viewer img{max-width:100%;max-height:70svh;width:auto;height:auto;object-fit:contain;transform:scaleX(-1);user-select:none;-webkit-user-drag:none}.photo-viewer .viewer-meta{text-align:center;margin-top:22px;line-height:1.8;font-size:15px}.viewer-close{position:absolute;right:18px;top:calc(15px + env(safe-area-inset-top));border:0;background:transparent;color:white;font-size:28px}.viewer-prev,.viewer-next{position:absolute;top:45%;border:0;background:#12212b66;color:white;border-radius:50%;padding:10px 15px;font-size:24px}.viewer-prev{left:10px}.viewer-next{right:10px}.viewer-count{font-size:12px;opacity:.6;margin-top:6px}