/* WashYaAzz v5 specimens: the native iOS baseline shared by all three directions (ORGAN-SET 1b).
   Values come from design/v5/mine/ios-native (Apple HIG text styles + tracking, springs, shapes). */
@font-face { font-family: "Inter"; src: url(fonts/inter-latin-200-normal.woff2) format("woff2"); font-weight: 200; }
@font-face { font-family: "Inter"; src: url(fonts/inter-latin-300-normal.woff2) format("woff2"); font-weight: 300; }
@font-face { font-family: "Inter"; src: url(fonts/inter-latin-400-normal.woff2) format("woff2"); font-weight: 400; }
@font-face { font-family: "Inter"; src: url(fonts/inter-latin-600-normal.woff2) format("woff2"); font-weight: 600; }
@font-face { font-family: "Inter"; src: url(fonts/inter-latin-700-normal.woff2) format("woff2"); font-weight: 700; }
@font-face { font-family: "Cond"; src: url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); font-weight: 600; }
@font-face { font-family: "Cond"; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); font-weight: 700; }
@font-face { font-family: "Mono"; src: url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; }

:root {
  --sf: -apple-system, "SF Pro Text", "SF Pro Display", "Inter", system-ui, sans-serif;
  --cond: "SF Compact Display", "Cond", "Arial Narrow", sans-serif;
  --mono: ui-monospace, "SF Mono", "Mono", monospace;
  /* springs as linear() curves: default (critically damped, ~0.5s) and snappy (bounce 0.15) */
  --spring: linear(0, 0.0473, 0.1615, 0.3006, 0.4385, 0.5631, 0.6697, 0.7576, 0.8281, 0.8834, 0.9258, 0.9576, 0.9809, 0.9975, 1.0087, 1.0157, 1.0196, 1.0211, 1.021, 1.0198, 1.0179, 1.0158, 1.0135, 1.0113, 1.0093, 1.0074, 1.0058, 1.0044, 1, 1);
  --snappy: linear(0, 0.072, 0.244, 0.441, 0.624, 0.771, 0.878, 0.949, 0.99, 1.011, 1.018, 1.017, 1.012, 1.006, 1.002, 1);
  /* Bouncy: sampled damped step response, bounce .3 => damping .7, response .3s;
     31 equal samples across .6s, endpoint snapped to 1. Reserved for timer/routine completion. */
  --bouncy: linear(0, 0.0718, 0.2332, 0.4233, 0.6045, 0.7571, 0.8737, 0.9551, 1.0063, 1.0339, 1.0449, 1.0451, 1.0393, 1.0309, 1.0222, 1.0145, 1.0083, 1.0038, 1.0007, 0.999, 0.9981, 0.9979, 0.998, 0.9984, 0.9988, 0.9992, 0.9995, 0.9997, 0.9999, 1, 1);
  --t-spring: .55s; --t-snap: .5s;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body { font-family: var(--sf); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01" on, "cv11" on; overscroll-behavior: none; }

/* Apple text styles (Large / default) with Apple's per-size tracking */
.large-title { font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: .40px; }
.title1 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: .38px; }
.title2 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.26px; }
.title3 { font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: -.45px; }
.headline { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -.43px; }
.body { font-size: 17px; line-height: 22px; font-weight: 400; letter-spacing: -.43px; }
.callout { font-size: 16px; line-height: 21px; letter-spacing: -.31px; }
.subhead { font-size: 15px; line-height: 20px; letter-spacing: -.23px; }
.footnote { font-size: 13px; line-height: 18px; letter-spacing: -.08px; }
.caption1 { font-size: 12px; line-height: 16px; letter-spacing: 0; }
.caption2 { font-size: 11px; line-height: 13px; letter-spacing: .06px; }
.num { font-variant-numeric: tabular-nums; }

/* D synthesis: the specimen's tokens and constructions, in a real safe-area shell. */
:root { --bg:#F2F2F7; --card:#fff; --label:#1C1C1E; --sec:#8A8A8E; --sep:rgba(60,60,67,.14); --acc:#FFC629; --future:#E5E5EA; --hue:#4C8A3C; }
html { background:#E5E5EA; text-size-adjust:100%; -webkit-text-size-adjust:100%; }
body { margin:0; background:#E5E5EA; color:var(--label); font-size:17px; line-height:22px; }
body.dark-surround { background:#111; }
body.sheet-open { overflow:hidden; }
button, input, select { font:inherit; color:inherit; }
button { border:0; background:none; text-align:inherit; }
a { color:inherit; text-decoration:none; }
button,a,input,select { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button:disabled { cursor:default; }
:focus-visible { outline:3px solid var(--hue); outline-offset:4px; }
h1:focus, #view:focus, .sheet:focus { outline:none; }
.tap { cursor:pointer; transition:transform 500ms var(--snappy), opacity 500ms var(--snappy); }
.tap:active, .tap.pressed { transform:scale(.96); opacity:.82; transition-duration:120ms; }
.sr { position:absolute !important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.ic { width:1em; height:1em; fill:currentColor; display:block; flex:none; }
#app { max-width:430px; min-height:100dvh; margin:auto; position:relative; background:var(--screen,var(--bg)); overflow:clip; }
#view { min-height:100dvh; }
.sec { color:var(--sec); }
.cond { font:700 27px/1.06 var(--cond); text-transform:uppercase; letter-spacing:.01em; }
.night { --bg:#15131C; --sky:linear-gradient(180deg,#2B2443 0,#1D1929 260px,#15131C 420px); --card:#221F2C; --future:#2D2939; --sheet:#1E1B27; --label:#F5F2FA; --sec:#BDB7CA; --sep:rgba(255,255,255,.09); color:var(--label); color-scheme:dark; }
.capsule { display:flex; width:100%; align-items:center; justify-content:center; min-height:50px; padding:12px 18px; border-radius:28px; font:600 17px/22px var(--sf); letter-spacing:-.43px; }
.primary { background:var(--label); color:var(--bg); margin-top:24px; }
.secondary { background:color-mix(in srgb,var(--hue) 16%,transparent); color:var(--hue); margin-top:16px; }
.asset { display:block; position:relative; flex:none; }
.asset img { width:100%; height:100%; object-fit:contain; display:block; }
.asset.missing { background:color-mix(in srgb,var(--slot) 22%,transparent); border-radius:24px; }
.hello { position:relative; margin:0 20px; padding:calc(env(safe-area-inset-top) + 26px) 105px 22px 0; min-height:173px; }
.hello h1 { margin-top:3px; }
.hello .summary { margin-top:6px; color:#3C3C43; }
.night .hello .summary { color:#EBEBF5; opacity:.8; }
.mascot { position:absolute; right:-4px; top:calc(env(safe-area-inset-top) + 30px); width:108px; height:125px; }
.segment-wrap { border:0; padding:0; min-width:0; }
.segment { display:flex; gap:2px; padding:3px; border-radius:10px; background:rgba(120,120,128,.12); }
.segment button { flex:1; min-width:0; min-height:32px; padding:5px 4px; border-radius:8px; font:600 13px/18px var(--sf); letter-spacing:-.08px; text-align:center; }
.segment button[aria-pressed="true"] { background:var(--card); color:var(--label); box-shadow:0 2px 5px #0002; }
.today > .segment-wrap { margin:0 20px 28px; }
.spine { list-style:none; margin:0; padding:0; }
.item { position:relative; display:grid; grid-template-columns:44px 54px minmax(0,1fr) 40px; align-items:start; padding:0 18px 16px 10px; min-height:64px; --hue:#6FA85A; }
.time { font:400 13px/18px var(--sf); letter-spacing:-.08px; color:var(--sec); text-align:right; padding:2px 10px 0 0; }
.time.now { color:var(--label); font-weight:700; }
.cap { position:relative; z-index:1; width:46px; border-radius:23px; display:grid; place-items:start center; padding-top:11px; font-size:24px; color:#fff; overflow:hidden; background:var(--hue); }
.future .cap { background:var(--future); color:var(--hue); }
.rail { position:absolute; left:75px; top:24px; bottom:-2px; width:4px; border-radius:2px; background:var(--future); }
.done .rail { background:var(--hue); }
.txt { padding:3px 7px 0 4px; min-width:0; }
.txt .meta { font:400 13px/18px var(--sf); letter-spacing:-.08px; color:var(--sec); }
.current .txt > .meta:first-child { color:var(--hue); font-weight:600; }
.txt .t { display:block; font:600 17px/22px var(--sf); letter-spacing:-.43px; min-height:32px; padding:0; }
.done .txt .t { color:var(--sec); text-decoration:none; }
.scent-line { margin-top:4px; }
.chk { width:30px; height:30px; border-radius:50%; border:2.5px solid var(--hue); margin:8px 0 0 5px; display:grid; place-items:center; font-size:15px; color:#fff; }
.done .chk { background:var(--hue); }
.play { width:40px; height:40px; border-radius:50%; margin-top:4px; display:grid; place-items:center; font-size:17px; color:#fff; background:var(--hue); box-shadow:0 6px 16px color-mix(in srgb,var(--hue) 35%,transparent); }
.ask { margin:10px 0 2px; background:var(--card); border-radius:14px; padding:10px 12px; display:flex; gap:10px; align-items:center; width:100%; }
.ask .dot { width:30px; height:30px; border-radius:50%; background:color-mix(in srgb,var(--hue) 16%,transparent); color:var(--hue); display:grid; place-items:center; font-size:16px; flex:none; }
.ask b, .ask-chip b { font-size:15px; line-height:20px; font-weight:600; display:block; }
.ask .subhead, .ask-chip .subhead { display:block; }
.inset { margin:0 20px; }
.today { padding-bottom:calc(110px + env(safe-area-inset-bottom)); }
.ghead { font:400 13px/18px var(--sf); color:var(--sec); text-transform:uppercase; margin:22px 16px 7px; }
.gfoot { font:400 13px/18px var(--sf); color:var(--sec); margin:7px 16px 0; }
.glist { background:var(--card); border-radius:12px; overflow:hidden; }
.r { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:48px; padding:12px 16px; gap:12px; }
.glist > * + * { box-shadow:inset 0 .5px 0 var(--sep); }
.coming-row { font:400 15px/20px var(--sf); }
.coming-row > :first-child { flex:1; }
.coming-row .footnote { text-align:right; max-width:100px; }
.about-link { text-align:center; margin-top:28px; font:400 13px/18px var(--sf); color:var(--sec); }
.about-link a { display:inline-block; padding:12px; }
.tabbar { position:fixed; width:calc(100% - 40px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-width:390px; left:50%; transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom)); height:62px; border-radius:31px; display:flex; align-items:center; justify-content:space-around; padding:0 6px; z-index:40; background:rgba(250,250,252,.72); box-shadow:0 8px 28px #0000001a,inset 0 0 0 .5px #00000014; backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); }
.tabbar a { flex:1; height:50px; border-radius:25px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font:600 10px/12px var(--sf); color:var(--sec); }
.tabbar a .ic { width:24px; height:24px; }
.tabbar a.on { background:rgba(120,120,128,.12); color:var(--label); }
.tabbar a.on .ic { color:#E0A500; }
.night .tabbar { background:rgba(40,40,42,.72); box-shadow:inset 0 0 0 .5px #ffffff1f; }
.night .tabbar a.on { background:#ffffff1a; }
.night .tabbar a.on .ic { color:var(--acc); }

/* Flood: responsive normal flow, never absolute-positioned text over text. */
.flood { background:linear-gradient(180deg,color-mix(in srgb,var(--hue) 88%,white) 0%,color-mix(in srgb,var(--hue) 83%,black) 100%); color:white; min-height:100dvh; padding:calc(env(safe-area-inset-top) + 12px) 24px calc(env(safe-area-inset-bottom) + 24px); display:flex; flex-direction:column; touch-action:pan-y; }
.flood :focus-visible { outline-color:white; }
.segs { display:flex; gap:5px; flex:none; }
.segs span { flex:1; height:5px; border-radius:3px; background:#ffffff47; }
.segs .d { background:white; }
.segs .at { background:linear-gradient(90deg,#fff 30%,#ffffff47 30%); }
.flood-nav { display:flex; justify-content:space-between; margin:13px -8px 0; }
.fbtn { width:44px; height:44px; border-radius:50%; background:#ffffff2e; color:white; display:grid; place-items:center; font-size:20px; }
.hero { display:grid; place-items:center; width:100%; height:clamp(210px,37dvh,340px); margin:0 auto 14px; flex:1 0 auto; filter:drop-shadow(0 26px 28px #143c0a59); }
.hero .asset { width:70%; max-width:240px; height:100%; max-height:340px; }
.hero .missing { width:180px; height:240px; max-height:100%; }
.object-button { cursor:pointer; }
.clockrow { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 24px; }
.clockrow > div { min-width:0; }
.clockrow .cond { margin-top:6px; }
.fig { font:200 78px/1 var(--sf); letter-spacing:-1px; }
.tring { position:relative; width:100px; height:100px; flex:none; border-radius:50%; }
.tring > svg { position:absolute; inset:0; transform:rotate(-90deg); width:100%; height:100%; }
.tring .pz { position:absolute; inset:0; display:grid; place-items:center; font-size:32px; }
.chips { display:flex; flex-direction:column; gap:10px; }
.chip { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:18px; background:#ffffff29; color:white; width:100%; }
.chip .ico { width:32px; height:32px; border-radius:9px; background:#ffffff38; display:grid; place-items:center; font-size:17px; flex:none; }
.chip-copy { flex:1; min-width:0; }
.chip .s { display:block; font-size:13px; line-height:18px; opacity:.78; margin-top:2px; }
.chev { margin-left:auto; opacity:.7; font-size:22px; }
.donebar { background:white; color:color-mix(in srgb,var(--hue) 70%,black); margin-top:24px; flex:none; }
.flip-layer { position:fixed; z-index:55; pointer-events:none; transform-origin:top left; border-radius:23px; }
.celebration { min-height:100dvh; padding:calc(env(safe-area-inset-top) + 50px) 24px calc(env(safe-area-inset-bottom) + 40px); display:flex; flex-direction:column; gap:26px; }
.party { width:250px; height:270px; max-width:100%; margin:0 auto; }
.won { text-align:center; }
.won .body { color:#3C3C43; margin-top:8px; }
.ring6 { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.reward-disc { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:white; font-size:16px; background:var(--hue); }
.week { background:var(--card); border-radius:20px; padding:16px 14px; display:flex; justify-content:space-between; margin:8px 6px 0; }
.week > div { display:flex; flex-direction:column; align-items:center; gap:6px; font:600 11px/13px var(--sf); color:var(--sec); }
.week b { width:28px; height:28px; border-radius:50%; background:var(--acc); color:#3A2A00; display:grid; place-items:center; font-size:14px; }
.week b.miss { background:#E5E5EA; }
.celebration .primary { margin-top:auto; }

/* Sheet chrome alone is glass; content uses native grouped surfaces. */
.dim { position:fixed; inset:0; background:#000; opacity:.4; z-index:60; width:100%; height:100%; cursor:default; }
.dim:active { transform:none; opacity:.4; }
.sheet { position:fixed; left:max(0px,calc((100% - 430px)/2)); right:max(0px,calc((100% - 430px)/2)); bottom:0; max-height:calc(100dvh - env(safe-area-inset-top) - 20px); height:60dvh; border-radius:38px 38px 0 0; z-index:61; padding:0 20px calc(20px + env(safe-area-inset-bottom)); background:var(--bg); color:var(--label); display:flex; flex-direction:column; box-shadow:0 -10px 50px #0002; }
.sheet.large { height:calc(100dvh - env(safe-area-inset-top) - 28px); }
.sheet-grip { display:flex; justify-content:center; padding:6px 0 10px; margin:0 -20px; flex:none; touch-action:none; }
.grabber { display:block; width:36px; height:5px; border-radius:3px; background:var(--label); opacity:.35; }
.sheet-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:50px; flex:none; touch-action:none; }
.sheet-bar h2 { text-align:center; }
.link { color:var(--hue); font:400 17px/22px var(--sf); letter-spacing:-.43px; padding:10px 0; }
.strong { font-weight:600; }
.sheet-content { overflow-y:auto; overscroll-behavior:contain; padding:8px 0 12px; }
.sheet-content > article > .title1 { margin-bottom:16px; }
.sheet-hero { display:flex; gap:14px; align-items:center; margin:6px 0 18px; }
.sheet-hero .asset { width:54px; height:80px; }
.answers .r[aria-pressed="true"] { color:var(--hue); }
.answers .ic { font-size:20px; }
.reminder-object { width:100px; height:130px; margin:0 auto 16px; }
.sheet-content .body + .subhead { margin-top:10px; }
.page { padding:calc(env(safe-area-inset-top) + 30px) 20px calc(env(safe-area-inset-bottom) + 112px); }
.page > .large-title { margin-bottom:24px; }
.library-row .thumb { width:48px; height:62px; }
.library-row > span:nth-child(2) { flex:1; min-width:0; }
.library-row b, .library-row .footnote { display:block; }
.library-row .footnote { margin-top:4px; }
.back { display:inline-block; color:var(--hue); padding:10px 0 16px; }
.guide-object { width:100px; height:130px; margin:0 auto 20px; }
.guide > .footnote { margin-bottom:8px; }
.intro { margin-bottom:22px; }
.guide-steps { list-style:none; margin:16px 0; }
.guide-steps li { display:flex; align-items:flex-start; gap:12px; padding:16px; }
.step-number { width:25px; height:25px; border-radius:50%; background:var(--future); color:var(--sec); flex:none; display:grid; place-items:center; font:600 13px/18px var(--sf); }
.guide-steps .body { margin-top:6px; }
.guide-callout { margin:22px 0; }
.prose { padding:16px; }
.doctor ul { list-style:none; }
.doctor li::before { content:'•'; color:var(--hue); margin-right:8px; }
.table-wrap { margin:20px 0; }
table { border-collapse:collapse; width:100%; font:400 15px/20px var(--sf); }
td,th { padding:12px; text-align:left; vertical-align:top; border-bottom:.5px solid var(--sep); }
th { font-weight:600; }
thead { font-size:11px; line-height:15px; color:var(--sec); }
.section-title { margin-top:28px; }
.product-row { display:flex; gap:12px; padding:16px; align-items:flex-start; }
.product-row > div { flex:1; min-width:0; }
.product-row p { margin-top:5px; }
.tier { display:inline-block; margin-top:7px; color:var(--sec); }
.amazon { flex:none; color:var(--hue); font:400 13px/18px var(--sf); min-height:44px; display:flex; align-items:center; }
.amazon .ic { display:none; }
.shelf-hero { text-align:center; background:var(--card); border-radius:24px; padding:1px 20px 22px; }
.shelf-hero .ghead { margin-top:18px; }
.bottle-hero { width:170px; height:200px; margin:4px auto 14px; }
.shelf-hero .subhead, .shelf-hero .footnote { margin-top:8px; }
.scent-controls { margin-top:22px; }
.scent-controls > p { margin:10px 4px 5px; color:var(--sec); }
.flood .scent-controls > p { color:white; }
.flood .segment { background:#ffffff29; }
.bottle-scroller { display:flex; gap:10px; overflow-x:auto; overscroll-behavior-x:contain; padding:2px 0 8px; scroll-snap-type:x proximity; }
.bottle-card { flex:0 0 146px; padding:12px; border-radius:20px; background:var(--card); display:flex; flex-direction:column; align-items:center; text-align:center; scroll-snap-align:start; }
.bottle-card[aria-pressed="true"] { box-shadow:inset 0 0 0 2px #E5AC2E; }
.bottle-flag { color:var(--sec); min-height:32px; }
.bottle-thumb { width:96px; height:120px; margin:4px auto 10px; }
.bottle-card .caption1:last-child { margin-top:7px; }
.bottle-suggestion .product-row { padding:0; }
.shelf3d[hidden], .glist[hidden] { display:none; }
.shelf3d-viewport { width:100%; height:340px; }
.shelf3d-canvas { display:block; width:100%; height:340px; touch-action:pan-y; cursor:grab; border-radius:16px; }
.shelf3d-canvas:active { cursor:grabbing; }
.shelf3d-dots { display:flex; justify-content:center; margin:0 0 10px; }
.shelf3d-dot { display:grid; place-items:center; width:40px; min-height:44px; cursor:pointer; }
.shelf3d-dot span { width:6px; height:6px; border-radius:50%; background:var(--sec); opacity:.35; }
.shelf3d-dot[aria-pressed="true"] span { background:var(--label); opacity:1; }
.shelf3d-caption { min-height:236px; }
.shelf3d-caption > p { margin-top:8px; }
.shelf3d-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:8px; }
.text-action { color:var(--hue); font:600 15px/20px var(--sf); padding:12px 0; }
.fields label { display:flex; flex-direction:column; gap:7px; padding:14px 16px; }
input,select { width:100%; min-height:44px; border:1px solid var(--sep); border-radius:10px; background:var(--bg); padding:8px 10px; font-size:16px; }
.inventory select { margin-top:10px; }
.about { max-width:430px; min-height:100dvh; margin:auto; background:var(--bg); }
.about .top { display:flex; justify-content:space-between; margin-bottom:25px; font-size:13px; }
.about .claim { font:700 34px/41px var(--sf); margin:12px 0; }
.about .kick { font:400 13px/18px var(--sf); color:var(--sec); }
.about .endnote p { margin-top:20px; }
.about a { color:var(--hue); }
@media (min-width:600px) { #app { box-shadow:0 0 0 1px #00000008; } }
@media (max-width:360px) { .item { grid-template-columns:32px 50px minmax(0,1fr) 36px; padding-right:12px; } .rail { left:63px; } .ask { padding:10px 8px; gap:6px; } .fig { font-size:66px; } .tring { width:85px; height:85px; } }
@media (orientation:landscape) { #app { padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); } }
@media (prefers-reduced-motion:reduce) { .tap { transition:opacity 150ms linear; } .tap:active { transform:none; } }

/* v5.1: finger-following surfaces. Only transform and opacity animate. */
.hello, .item, .deck-viewport { touch-action:pan-y; }
.item { display:block; padding:0; overflow:hidden; }
.row-front { position:relative; display:grid; grid-template-columns:44px 54px minmax(0,1fr) 40px; align-items:start; padding:0 18px 16px 10px; min-height:64px; background:var(--bg); }
.swipe-action { position:absolute; inset:0; display:flex; align-items:center; padding:20px; opacity:0; color:white; pointer-events:none; }
.swipe-fill { position:absolute; inset:0; background:var(--hue); transform:scaleX(.001); transform-origin:left; }
.swipe-label { position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; width:64px; font:600 13px/18px var(--sf); }
.swipe-action .ic { width:25px; height:25px; }
.swipe-no { justify-content:flex-end; }
.swipe-no .swipe-fill { background:#737379; transform-origin:right; }
.swipe-no .swipe-label { width:76px; }
.edge-underlay { position:fixed; top:0; bottom:0; overflow:hidden; background:var(--bg); color:var(--label); pointer-events:none; z-index:1; }
.edge-dim { position:absolute; inset:0; background:black; opacity:.35; }
.edge-dragging { position:relative; z-index:2; background-color:var(--bg); box-shadow:-12px 0 30px #0002; }
.edge-zone { position:fixed; top:0; bottom:0; width:24px; touch-action:pan-y; z-index:3; }
.library-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 12px; margin:48px 0 28px; }
.library-card { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:0 14px 18px; border-radius:22px; background:color-mix(in srgb,var(--hue) 10%,var(--card)); }
.library-card .thumb { width:100%; height:136px; margin:-28px auto 8px; }
.library-card > span:nth-child(2) { flex:initial; }
.library-card .caption1 { display:block; margin-top:6px; }
.library-card:active { transform:scale(.96); }
.guide-hero { border-radius:26px; padding:20px; margin:10px 0 22px; background:color-mix(in srgb,var(--hue) 12%,var(--card)); }
.guide-hero .guide-object { width:100%; height:220px; margin:0 auto 16px; }
.meta-chips, .spot-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; list-style:none; }
.meta-chip { display:inline-block; border-radius:20px; background:color-mix(in srgb,var(--hue) 12%,var(--card)); padding:7px 11px; font:400 13px/18px var(--sf); }
.intro { padding:20px; border-radius:22px; background:color-mix(in srgb,var(--hue) 12%,var(--card)); color:var(--label); border-left:4px solid var(--hue); }
.deck-viewport { overflow:hidden; border-radius:22px; }
.deck-track { display:flex; gap:12px; margin:0; background:none; overflow:visible; }
.deck-track .step-card { flex:0 0 90%; min-width:0; display:block; padding:22px; border-radius:22px; background:var(--card); }
.step-card .step-number { display:block; width:auto; height:auto; background:none; color:var(--hue); font:700 54px/1 var(--cond); margin-bottom:18px; }
.step-card .body { margin-top:10px; }
.deck-dots { display:flex; flex-wrap:wrap; justify-content:center; margin-top:4px; }
.deck-dot { display:grid; place-items:center; min-width:44px; min-height:44px; }
.deck-dot span { width:6px; height:6px; border-radius:50%; background:var(--sec); opacity:.35; }
.deck-dot[aria-pressed="true"] span { background:var(--hue); opacity:1; transform:scale(1.35); }
.show-steps { display:block; margin:0 auto; }
.show-all .deck-track { display:block; }
.show-all .step-card { display:flex; gap:14px; padding:16px 0; background:none; }
.show-all .step-number { font:600 17px/22px var(--sf); width:25px; flex:none; }
.show-all .deck-viewport { overflow:visible; }
.table-cards table { border-collapse:separate; border-spacing:0 10px; }
.table-cards tbody th, .table-cards td { background:var(--card); border:0; }
.table-cards tbody th { border-radius:18px 0 0 18px; }
.table-cards td:last-child { border-radius:0 18px 18px 0; }
.guide-callout .glist { border-radius:22px; }
.warning-card { background:color-mix(in srgb,#E5AC2E 18%,var(--card)); padding:20px; border-radius:22px; margin:22px 0; }
.warning-card h2 { display:flex; align-items:center; gap:10px; }
.warning-icon { display:grid; place-items:center; flex:none; width:24px; height:24px; border:2px solid currentColor; border-radius:50%; color:#996100; }
.night .warning-icon { color:#FFD166; }
.warning-card li { padding:14px 0 0; }
.product-cards { display:grid; gap:12px; }
.product-card { border-radius:22px; background:var(--card); padding:18px; display:flex; flex-direction:column; }
.product-card .tier { border-radius:20px; padding:5px 10px; background:var(--future); color:var(--label); }
.product-card > .tier { align-self:flex-start; }
.bottle-suggestion .product-row { flex-direction:column; }
.amazon { display:inline-flex; align-self:flex-start; padding:8px 14px; border-radius:24px; background:color-mix(in srgb,var(--hue) 14%,var(--card)); color:var(--label); }
.product-carousel { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; gap:12px; padding:2px 0 12px; }
.product-carousel .product-card { flex:0 0 86%; scroll-snap-align:start; }
.parallax-host { perspective:700px; }
.parallax-object { transform-style:preserve-3d; transition:transform .5s var(--spring); }
.parallax-object.tracking { transition:none; }
.object-glow { position:absolute; inset:0; pointer-events:none; overflow:hidden; mask-size:contain; mask-repeat:no-repeat; mask-position:center; -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; opacity:0; transition:opacity .5s var(--spring); }
.object-glow > span { position:absolute; inset:-50%; background:radial-gradient(ellipse at center,#fff9 0%,#fff3 22%,transparent 50%); }
.pick-bottle { position:relative; height:220px; }
.pick-bottle .bottle-hero { margin:0 auto; }
.pick3d-viewport { position:absolute; inset:0; }
.pick3d-canvas { display:block; width:100%; height:220px; border-radius:18px; touch-action:pan-y; cursor:grab; }
.pick3d-canvas:active { cursor:grabbing; }
.bottle-ready > .bottle-hero { visibility:hidden; }
.celebration { position:relative; }
.celebration-bubbles { position:absolute; left:0; top:0; width:100%; height:500px; pointer-events:none; }
[hidden] { display:none !important; }
/* v5.2: the visible control is primary; the gesture is its shortcut. */
.capsule, .amazon, .text-action, .link { gap:8px; }
.amazon .ic { display:block; }
.text-action, .link { display:inline-flex; align-items:center; }
.text-action { padding:10px 14px; border-radius:24px; background:color-mix(in srgb,var(--hue) 12%,var(--card)); }
.link { font-size:15px; }
.about-link a { display:inline-flex; align-items:center; gap:6px; }
.txt .t { display:flex; align-items:center; gap:4px; }
.txt .t .ic { width:12px; color:var(--sec); }
.row-open { width:40px; height:44px; display:grid; place-items:center; color:var(--sec); }
.current .row-front { grid-template-columns:44px 54px minmax(0,1fr) 82px; }
.row-actions { display:flex; align-items:center; gap:4px; }
.row-skip { min-width:38px; min-height:44px; color:var(--sec); border-radius:22px; background:color-mix(in srgb,var(--sec) 10%,transparent); padding:4px; }
.rite-dots { display:flex; margin:0 0 0 -8px; height:26px; align-items:center; }
.rite-dots .deck-dot { min-width:28px; min-height:26px; }
.rite-dots .deck-dot[aria-pressed="true"] span { background:var(--label); transform:none; }
.rite-peek { position:absolute; right:0; bottom:10px; min-height:32px; display:flex; align-items:center; gap:4px; opacity:.4; border-radius:20px; padding:4px 8px; background:var(--card); }
.glass { background:color-mix(in srgb,var(--card) 74%,transparent); color:var(--label); box-shadow:inset 0 0 0 .5px var(--sep),0 2px 8px #0001; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.back { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:10px 16px; border-radius:24px; }
.caret { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; flex:none; font-size:16px; }
.caret::after { content:''; position:absolute; inset:-6px; border-radius:50%; }
.edge-caret { position:fixed; left:4px; top:42dvh; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; opacity:0; pointer-events:none; z-index:4; }
.do-actions { display:flex; gap:10px; margin-top:24px; }
.do-actions .donebar { flex:1; margin:0; }
.skipbar { width:auto; background:#ffffff29; color:white; }
.step-paging { display:flex; justify-content:space-between; min-height:44px; margin-top:12px; }
.step-paging .caret { position:relative; }
.step-paging .next-step { margin-left:auto; }
.step-deck, .carousel-shell, .shelf-stage { position:relative; }
.deck-prev, .deck-next, .carousel-prev, .carousel-next, .shelf-prev, .shelf-next { position:absolute; z-index:2; top:calc(50% - 44px); }
.deck-prev, .carousel-prev, .shelf-prev { left:4px; }
.deck-next, .carousel-next, .shelf-next { right:4px; }
.deck-viewport, .product-carousel, .bottle-scroller { mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent); -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent); }
.at-end > .deck-viewport, .at-end > .product-carousel, .at-end > .bottle-scroller, .show-all > .deck-viewport { mask-image:none; -webkit-mask-image:none; }
.carousel-count { text-align:center; margin:4px 0 12px; }
.carousel-shell:has(> .product-carousel[hidden]) { display:none; } /* only a hidden LIST hides the shell; the left caret is hidden at the start of every carousel */
.show-steps { display:flex; width:fit-content; }
.bottle-scroller { gap:12px; }
.bottle-card { position:relative; }
.library-card { position:relative; padding-right:24px; }
.card-arrow { position:absolute; top:12px; right:10px; color:var(--sec); font-size:14px; }
.product-card { position:relative; }
.product-card h3 { padding-right:12px; }
.product-card > .amazon { align-self:flex-end; }
.spin-controls { position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.spin-controls .caret { position:relative; pointer-events:auto; }
.hero { position:relative; }
@media (max-width:360px) { .current .row-front { grid-template-columns:32px 50px minmax(0,1fr) 76px; } .row-actions { gap:0; } }
@media (max-width:360px) { .row-front { grid-template-columns:32px 50px minmax(0,1fr) 36px; padding-right:12px; } .library-card { padding:0 10px 16px; } }
@media (prefers-reduced-motion:reduce) {
  .parallax-object, .object-glow { transition:none; transform:none !important; }
  .object-glow, .celebration-bubbles { display:none; }
  .library-card:active { transform:none; }
  .deck-dot[aria-pressed="true"] span { transform:none; }
}

/* v5.3 timeline and clearance. No animated layout properties. */
:root { --dock-height:62px; --dock-offset:16px; --dock-clearance:calc(var(--dock-height) + var(--dock-offset) + env(safe-area-inset-bottom) + 24px); }
.today, .page:not(.about) { padding-bottom:var(--dock-clearance); min-height:100dvh; }
.tabbar { height:var(--dock-height); bottom:calc(var(--dock-offset) + env(safe-area-inset-bottom)); }
.tabbar a { position:relative; z-index:1; }
.tabbar a.on, .night .tabbar a.on { background:none; }
.tab-pill { position:absolute; left:6px; top:6px; width:calc((100% - 12px)/4); height:50px; border-radius:25px; background:rgba(120,120,128,.12); pointer-events:none; }
.night .tab-pill { background:#ffffff1a; }
#view { position:relative; }
.tab-outgoing { position:absolute; left:0; width:100%; pointer-events:none; z-index:2; }
.dock-exit { z-index:57; }
.flip-content { position:relative; z-index:56; background:transparent; }
.travel-object { position:fixed; z-index:56; transform-origin:top left; pointer-events:none; }
.evening-overlay { position:fixed; inset:0; z-index:0; pointer-events:none; }
.today { position:relative; }
.routine-title-out { position:absolute; top:calc(env(safe-area-inset-top) + 51px); left:0; pointer-events:none; }
.row-front, .current .row-front { grid-template-columns:44px 54px minmax(0,1fr) 82px; min-height:112px; }
.row-actions { display:grid; grid-template-columns:38px 40px; gap:4px; }
.row-skip { font-size:10px; line-height:12px; }
.row-done { grid-column:1 / -1; border-radius:16px; background:color-mix(in srgb,var(--hue) 14%,var(--card)); color:var(--hue); display:flex; align-items:center; justify-content:center; gap:4px; min-height:32px; }
.done .ask { visibility:hidden; pointer-events:none; }
.title-label { position:relative; }
.strike-clip { position:absolute; inset:0; clip-path:inset(0); pointer-events:none; display:none; }
.done .strike-clip { display:block; }
.title-strike { position:absolute; inset:0; color:transparent; text-decoration:line-through; text-decoration-color:var(--sec); transform-origin:left; }
.rail { overflow:hidden; }
.done .rail { background:var(--future); }
.rail-fill { position:absolute; inset:0; background:var(--hue); transform-origin:top; opacity:0; }
.done .rail-fill { opacity:1; }
.chk { width:64px; border-radius:18px; display:flex; justify-content:center; gap:3px; font-size:11px; }
.row-open { width:76px; display:flex; justify-content:center; gap:2px; font-size:11px; }
.cap { gap:2px; align-content:start; }
.flood-nav .fbtn:last-child { width:auto; height:auto; min-height:44px; padding:10px 12px; border-radius:24px; display:flex; align-items:center; gap:6px; font-size:15px; line-height:20px; }
.caret { width:auto; min-width:32px; padding:0 8px; border-radius:18px; display:flex; justify-content:center; gap:3px; }
.control-label { font-size:10px; line-height:11px; max-width:62px; text-align:center; }
.sheet-grip { flex-direction:column; align-items:center; gap:4px; }
.tring .pz { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; z-index:1; }
.timer-disc { position:absolute; inset:5px; background:white; border-radius:50%; opacity:0; }
.fig { position:relative; }
.timer-value { display:block; }
.timer-old { position:absolute; inset:0; }
.answer-products { position:relative; }
.product-outgoing { position:absolute; inset:0; pointer-events:none; }
.dot-label { font:500 9px/12px var(--sf); }
.rite-dots { height:40px; gap:4px; }
.rite-dots .deck-dot { min-width:44px; min-height:38px; }
.deck-dot, .shelf3d-dot { gap:3px; align-content:center; }
.deck-dots .deck-dot span { width:16px; height:6px; border-radius:6px; transform:scaleX(.375); }
.deck-dots .deck-dot[aria-pressed="true"] span { transform:scaleX(1); }
.reward-disc { width:auto; min-width:60px; max-width:100px; height:auto; min-height:44px; border-radius:22px; padding:6px 10px; gap:3px; text-align:center; }
@media (max-width:360px) { .row-front, .current .row-front { grid-template-columns:32px 50px minmax(0,1fr) 76px; } }
@media (prefers-reduced-motion:reduce) {
  .tap, .tap:active { transition:opacity 150ms linear; }
  .tap:active { transform:none; }
  .tabbar { transform:translate(-50%,0) !important; }
  .deck-dots .deck-dot span { width:6px; transform:none; }
  .deck-dots .deck-dot[aria-pressed="true"] span { width:16px; transform:none; }
}

.deck-dot, .shelf3d-dot { border-radius:16px; background:color-mix(in srgb,var(--card) 65%,transparent); }

.tring.finished .pz { color:var(--hue); }

.sheet-grip { border-radius:18px; background:color-mix(in srgb,var(--sec) 8%,transparent); }

/* v5.4 physical objects Text surfaces grow; decoration alone clips. */
:root { --tile-shadow:0 1px 0 rgba(0,0,0,.04),0 6px 16px rgba(0,0,0,.08); }
#app, .sheet, .about { overflow-wrap:anywhere; }
.spine { display:flex; flex-direction:column; gap:8px; margin:0 20px; }
.item { overflow:visible; isolation:isolate; border-radius:18px; }
.row-front, .current .row-front { grid-template-columns:46px minmax(0,1fr) 76px; grid-template-rows:auto 1fr; gap:4px 10px; padding:12px 28px 12px 12px; min-height:156px; border-radius:18px; background:var(--card); box-shadow:var(--tile-shadow),inset 0 1px 0 #ffffffc0; }
.night .row-front { box-shadow:0 1px 0 #0008,0 6px 16px #0008,inset 0 1px 0 #ffffff20; }
.row-front:active { transform:translateY(1px) scale(.985); box-shadow:0 1px 3px #0002,inset 0 1px 0 #fff5; }
.swiping .row-front { box-shadow:0 3px 6px #0002,0 14px 28px #0003,inset 0 1px 0 #fff8; }
.time { grid-column:1; grid-row:1; padding:0; text-align:center; font-size:11px; line-height:16px; overflow-wrap:anywhere; }
.cap { grid-column:1; grid-row:2; overflow:visible; min-height:52px; }
.txt { grid-column:2; grid-row:1 / 3; padding:0; align-self:center; } /* tiles keep one height (v5.3 row 2), so short text sits centred, not top-heavy */
.row-actions, .row-open, .chk { grid-column:3; grid-row:1 / 3; margin:0; width:100%; align-self:center; }
.row-actions { display:flex; flex-direction:column; gap:6px; }
.row-actions .play { order:0; margin:0; }
.row-done { order:1; width:100%; }
.row-skip { order:2; width:100%; font-size:11px; line-height:15px; }
.row-front > .rail { display:none; }
.item > .rail { left:33px; top:0; bottom:-8px; z-index:-1; }
.swipe-action { border-radius:18px; overflow:hidden; box-shadow:inset 0 2px 7px #0004; background:color-mix(in srgb,var(--hue) 65%,var(--bg)); }
.swipe-fill { box-shadow:inset 0 2px 7px #0004; border-radius:18px; }
.grip-dots { display:grid; grid-template-columns:repeat(2,3.5px); grid-template-rows:repeat(3,3.5px); gap:3px; flex:none; pointer-events:none; }
.grip-dots i { width:3.5px; height:3.5px; border-radius:50%; background:color-mix(in srgb,var(--sec) 40%,var(--card)); box-shadow:0 -1px 0 #fff9,0 1px 1px #0005; }
.tile-grip { position:absolute; right:9px; top:calc(50% - 8px); }
.stage-grip, .grabber { width:44px; height:24px; padding:6px; border-radius:14px; grid-template-columns:repeat(3,3.5px); grid-template-rows:repeat(2,3.5px); align-content:center; justify-content:center; background:color-mix(in srgb,var(--sec) 12%,var(--card)); box-shadow:inset 0 1px 2px #0002,0 1px 0 #fff8; opacity:1; margin:8px auto; }
.sheet-grip { min-height:44px; padding:0; margin-bottom:4px; background:none; }
.bottle-dial { position:absolute; bottom:0; left:calc(50% - 22px); width:44px; height:44px; border-radius:50%; border:5px solid color-mix(in srgb,var(--sec) 12%,var(--card)); box-shadow:inset 0 1px 3px #0003,0 1px 0 #fff9; }
.bottle-dial i { position:absolute; left:calc(50% - 1.75px); top:calc(50% - 1.75px); transform:rotate(calc(var(--dot,0) * 60deg)) translateY(-12px); }
.bottle-dial i:nth-child(2) { --dot:1; } .bottle-dial i:nth-child(3) { --dot:2; } .bottle-dial i:nth-child(4) { --dot:3; } .bottle-dial i:nth-child(5) { --dot:4; } .bottle-dial i:nth-child(6) { --dot:5; }
.capsule, .fbtn, .play, .cap, .chk, .row-open, .row-done, .row-skip, .text-action, .amazon, .back, .rite-peek, .caret, .reward-disc, .deck-dot, .shelf3d-dot, .link, .segment button {
  background-image:linear-gradient(180deg,#ffffff18,#00000005); box-shadow:inset 0 1px 0 #ffffff50,0 1px 2px #0002;
}
.secondary, .skipbar, .row-skip, .segment { box-shadow:inset 0 1px 3px #0002,0 1px 0 #fff4; }
.chip, .ask { box-shadow:var(--tile-shadow),inset 0 1px 0 #fff5; background-image:linear-gradient(180deg,#ffffff0d,#00000003); }
.ask { flex-wrap:wrap; gap:6px; }
.ask::after { content:'›'; margin-left:auto; }
.ask > span:last-child { flex:1 1 90px; }
.capsule:active, .fbtn:active, .play:active, .chip:active, .ask:active, .caret:active, .text-action:active, .segment button:active, .amazon:active { transform:translateY(1px) scale(.985); box-shadow:inset 0 1px 3px #0003; }
.cap:active, .chk:active, .row-open:active, .row-done:active, .row-skip:active, .link:active, .reward-disc:active, .deck-dot:active, .shelf3d-dot:active, .rite-peek:active, .back:active { transform:translateY(1px) scale(.985); box-shadow:inset 0 1px 3px #0003; }
.library-card, .product-card, .bottle-card { box-shadow:var(--tile-shadow),inset 0 1px 0 #ffffff60; }
.chip, .meta-chip, .tier, .product-card .tier, .capsule, .segment button, .row-skip, .row-done, .row-open, .chk, .rite-peek, .reward-disc, .caret, .bottle-flag, .deck-dot, .shelf3d-dot, .link {
  min-height:32px; height:auto; padding:8px 12px; white-space:normal; line-height:1.35; overflow:visible; overflow-wrap:anywhere;
}
.chip { padding:14px; }
.chip .body { display:block; }
.chip > span, .ask > span, .capsule > span, .segment button, .sheet-bar > *, .product-card, .bottle-card > * { min-width:0; max-width:100%; }
.capsule { min-height:50px; }
.fbtn { min-height:44px; }
.scent-controls .segment { flex-wrap:wrap; }
.scent-controls .segment button { flex:1 1 28%; }
.deck-dot, .shelf3d-dot { min-width:44px; }
.shelf3d-dots { flex-wrap:wrap; gap:4px; }
.rite-dots { height:auto; flex-wrap:wrap; }
.rite-dots .deck-dot { padding:4px 12px; }
.hello { padding-right:100px; }
.glist { overflow:visible; }
.sheet-bar .link { flex:none; padding:8px 12px; border-radius:20px; }
.sheet-bar h2 { flex:1; overflow-wrap:anywhere; }
.control-label { max-width:62px; line-height:14px; }
.caret::after { display:none; } /* The real padded control is the hit target, not overflowing pseudo-content. */
.caret { min-height:44px; }
.stage-navigation { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:8px; align-items:center; min-height:60px; }
.stage-navigation > :first-child { grid-column:1; justify-self:start; }
.stage-navigation > :nth-child(2) { grid-column:2; }
.stage-navigation > :last-child { grid-column:3; justify-self:end; }
.stage-navigation .caret { position:relative; inset:auto; }
.show-all .stage-navigation { display:none; }
.fig { line-height:1.2; }
.cond { line-height:1.2; }
.row-open { border-radius:18px; }
.hello { min-height:204px; }
.deck-viewport, .product-carousel, .bottle-scroller { mask-image:none; -webkit-mask-image:none; }
.mascot[role="button"], .party[role="button"] { cursor:pointer; }
.mascot-face { display:block; position:relative; width:100%; height:100%; transform-origin:50% 75%; }
.mascot-lids { position:absolute; inset:0; pointer-events:none; }
.mascot-lids i { position:absolute; top:36%; left:35%; width:12%; height:5%; background:#ffce30; border-radius:50%; transform:scaleY(.01); }
.mascot-lids i + i { left:65%; top:34%; }
.foam-burst { position:absolute; width:0; height:0; pointer-events:none; z-index:4; }
.foam-bubble { position:absolute; width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 30% 25%,#fff,#dcf7fa80 55%,#fff9); border:1px solid #fff9; }
.week-flip { position:relative; transform-style:preserve-3d; transform:rotateY(180deg); background:none !important; }
.week-front, .week-back { position:absolute; inset:0; border-radius:50%; display:grid; place-items:center; backface-visibility:hidden; background:var(--future); }
.week-back { background:var(--acc); transform:rotateY(180deg); }
.week-total { text-align:center; padding:12px 0; } /* Reserve the digit's whole travel, including during a tick. */
.count-digit { display:inline-block; position:relative; }
.count-old { position:absolute; inset:0; background:var(--bg); }
.timer-foam { position:absolute; inset:9px; border-radius:50%; overflow:hidden; pointer-events:none; }
.timer-foam i { position:absolute; bottom:20%; width:8px; height:8px; border:1px solid #fff; border-radius:50%; opacity:0; animation:timer-foam-rise 2400ms linear var(--delay) both; }
@keyframes timer-foam-rise { 0% { transform:translateY(32px); opacity:0; } 30% { opacity:.2; } 100% { transform:translateY(-40px); opacity:0; } }
.bottle-shine { position:absolute; inset:0; overflow:hidden; pointer-events:none; mask-size:contain; mask-repeat:no-repeat; mask-position:center; -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; }
.bottle-shine i { position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,#fff 50%,transparent 70%); }
.pull-refresh { position:absolute; z-index:5; top:-24px; left:calc(50% - 32px); width:64px; pointer-events:none; }
.pull-mascot { width:64px; height:76px; }
.foam-string { position:absolute; left:30px; bottom:60px; width:5px; height:90px; border-radius:50%; background:radial-gradient(circle,#fff 35%,#d7edf680 55%,transparent 65%) 0 0 / 5px 7px; }
@media (prefers-reduced-motion:reduce) {
  .timer-foam, .foam-burst, .mascot-lids, .pull-refresh, .bottle-shine { display:none; }
  .timer-foam i { animation:none; }
  .row-front:active, .capsule:active, .fbtn:active, .play:active, .chip:active, .ask:active, .caret:active, .text-action:active, .segment button:active, .amazon:active { transform:none; }
  .cap:active, .chk:active, .row-open:active, .row-done:active, .row-skip:active, .link:active, .reward-disc:active, .deck-dot:active, .shelf3d-dot:active, .rite-peek:active, .back:active { transform:none; }
}

/* v5.5 dusk: lightness, not black shadows, communicates elevation. */
#app.night { background:var(--sky); }
body.dark-surround { background:#15131C; }
.night .sheet { background:var(--sheet); }
.night .row-front, .night .library-card, .night .product-card, .night .bottle-card { box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 0 #0006,0 8px 20px #0007; }
.night .tabbar { background:rgba(42,37,56,.72); }
.night .segment { background:var(--future); }
.night .grip-dots i { box-shadow:0 -1px 0 #ffffff14,0 1px 1px #00000080; }
.night .stage-grip, .night .bottle-dial { box-shadow:inset 0 1px 3px #00000080,0 1px 0 #ffffff14; }
.night .hello .summary, .night .won .body { color:var(--sec); opacity:1; }
.night .current .txt > .meta:first-child, .night .row-done, .night .secondary,
.night .link, .night .text-action, .night .amazon, .night .back, .night .answers .r[aria-pressed="true"], .night .future .cap { color:color-mix(in srgb,var(--hue) 50%,#fff); }
.night .cap:not(.future .cap), .night .done .chk, .night .reward-disc, .night .play { background:color-mix(in srgb,var(--hue) 65%,#fff); color:#15131C; }
.night .flood { background:var(--sky); color:var(--label); }
.night .flood .chip, .night .flood .fbtn, .night .flood .skipbar { background:var(--card); color:var(--label); }
.night .flood .chip .s { color:var(--sec); opacity:1; }
.night .flood .donebar { background:var(--acc); color:#15131C; }
.night .flood .scent-controls > p { color:var(--sec); }
.night .tring.finished .pz { color:#15131C; }
.night input::placeholder { color:var(--sec); opacity:1; }

/* Persistent companion seats reserve space; the single actor is fixed outside #view. */
.companion-anchor { display:block; width:var(--companion-size); height:calc(var(--companion-size) * 7 / 6); pointer-events:none; flex:none; }
.today-anchor { position:absolute; top:calc(env(safe-area-inset-top) + 28px); right:0; }
.hello { padding-right:128px; }
.companion { position:absolute; left:0; top:0; width:120px; height:140px; z-index:58; pointer-events:none; transform-origin:0 0; }
.companion .companion-figure { position:relative; inset:auto; width:120px; height:140px; padding:0; pointer-events:auto; touch-action:pan-y; border-radius:40%; display:block; }
.companion .companion-figure:active { opacity:1; transform:none; }
.companion-facing { display:block; width:100%; height:100%; transform:scaleX(1); transition:transform 180ms var(--snappy); }
.companion[data-facing="-1"] .companion-facing { transform:scaleX(-1); }
.companion .mascot-face img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.companion .mascot-face img[data-pose="peek"] { object-position:center bottom; }
.companion .pose-outgoing { position:absolute; inset:0; }
.companion .mascot-lids { opacity:0; }
.companion .mascot-lids i { transform:none; }
.companion.peeking .companion-figure { overflow:hidden; border-radius:0; }
.companion.edge-peek .companion-figure { overflow:hidden; border-radius:0; }
.companion-glow { position:absolute; width:160px; height:160px; top:-10px; left:-20px; background:radial-gradient(circle,#FFC62922,transparent 70%); display:none; }
.night .companion[data-pose="sleep"] .companion-glow { display:block; }
.compact-nav { position:fixed; top:0; left:max(0px,calc((100% - 430px)/2)); width:min(100%,430px); height:calc(52px + env(safe-area-inset-top)); padding:calc(12px + env(safe-area-inset-top)) 20px 10px; background:var(--card); z-index:39; pointer-events:none; opacity:0; }
.compact-anchor { position:absolute; right:24px; top:calc(6px + env(safe-area-inset-top)); }
.do-anchor { position:absolute; right:0; top:12px; }
.library-page { position:relative; }
.library-page > .large-title { padding-right:66px; }
.library-anchor { position:absolute; right:8px; bottom:100%; }
.guide-hero { position:relative; }
.guide-anchor { position:absolute; left:0; top:4px; }
.party.companion-anchor { width:120px; height:140px; }
.shelf-anchor { position:absolute; left:8px; top:calc(var(--plank-line,73.4%) - var(--companion-size) * 7 / 6); }
.sheet-anchor { position:absolute; right:30px; top:-46.6667px; }
.dusk-stars { position:absolute; inset:0 0 auto; height:190px; pointer-events:none; }
.dusk-stars i { position:absolute; width:1.5px; height:1.5px; border-radius:50%; background:#fff4d8; left:calc(8% + var(--star) * 17%); top:calc(12px + var(--star) * 19px); opacity:.4; animation:v55-stars calc(3s + var(--star) * .4s) ease-in-out calc(var(--star) * -.73s) infinite; }
@keyframes v55-stars { 0%,100% { opacity:.35; } 50% { opacity:.6; } }
@media (prefers-reduced-motion:reduce) {
  .dusk-stars i { animation:none; opacity:.4; }
  .companion-facing { transition:none; }
}

.motion-hidden .dusk-stars i { animation-play-state:paused; }

.night .rite-peek { opacity:1; }

.night .step-number { color:color-mix(in srgb,var(--hue) 50%,#fff); }
/* v5.5: the companion stands on the pick's plank, so the spin arrows sit in the stage's top corners, never under it. */
.pick-bottle .spin-controls { align-items:flex-start; padding:12px 10px 0; }
.hello .rite-peek { bottom:0; } /* v5.5: clear of the companion's feet (it covered 6px of this chip) */

/* v5.6 — One anatomy; all tile dimensions live on row-front. */
.row-front, .current .row-front {
  --pad:16px; --gap:12px; --icon:48px; --icon-radius:13px; --glyph:26px;
  --tail:24px; --control:44px; --meta-size:13px; --meta-line:18px; --title-size:17px; --title-line:22px;
  --zero:0px; --rail-width:8px;
  grid-template-columns:var(--icon) minmax(0,1fr) var(--tail); grid-template-rows:auto;
  column-gap:var(--gap); row-gap:var(--zero); padding:var(--pad); min-height:var(--zero);
  margin-inline:var(--rail-width); width:auto; align-items:center;
}
.row-front .cap { grid-column:1; grid-row:1; width:var(--icon); height:var(--icon); min-height:var(--icon); padding:var(--zero); margin:var(--zero); border-radius:var(--icon-radius); color:#fff; background:linear-gradient(180deg,color-mix(in srgb,var(--hue) 88%,white),color-mix(in srgb,var(--hue) 92%,black)); box-shadow:inset 0 1px 0 #ffffff59,0 1px 2px #00000026; }
@supports (corner-shape:squircle) { .row-front .cap { corner-shape:squircle; } }
.row-front .cap .ic { width:var(--glyph); height:var(--glyph); margin:var(--zero); }
.row-front .cap { align-content:center; place-items:center; gap:var(--zero); }
.future .row-front .cap { background:var(--future); color:var(--hue); }
.done .row-front .cap { color:#fff; }
.row-front .txt { grid-column:2; grid-row:1; margin:var(--zero); padding:var(--zero); }
.row-front .meta { font-size:var(--meta-size); line-height:var(--meta-line); margin:var(--zero); color:var(--sec); }
.row-front .t { display:block; min-height:var(--zero); padding:var(--zero); margin:var(--zero); font-size:var(--title-size); line-height:var(--title-line); font-weight:600; }
.row-front .title-label { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.row-front .row-tail { grid-column:3; grid-row:1; width:var(--tail); min-height:var(--control); padding:var(--zero); margin:var(--zero); border-radius:var(--zero); background:none; box-shadow:none; color:var(--sec); }
.row-front .row-tail .ic { width:var(--tail); height:var(--tail); }
.row-front .row-tail { border:0; }
.row-front .row-done { color:#15131c; }
.night .row-front .row-done { background:color-mix(in srgb,var(--hue) 65%,white); color:#15131c; }
.night .row-front .cap:not(.future .cap) { background:linear-gradient(180deg,color-mix(in srgb,var(--hue) 88%,white),color-mix(in srgb,var(--hue) 92%,black)); color:white; }
.row-front .row-actions-slot { grid-column:1 / -1; grid-row:2; overflow:hidden; min-height:var(--zero); }
.row-front .row-actions { display:flex; flex-direction:row; gap:var(--gap); padding-top:var(--gap); margin:var(--zero); height:calc(var(--control) + var(--gap)); }
.row-front .row-done { order:0; flex:1; width:auto; min-height:var(--control); border-radius:999px; background:var(--hue); color:#15131c; }
.row-front .row-skip { order:1; flex:1; width:auto; min-height:var(--control); border-radius:999px; font-size:var(--meta-size); line-height:var(--meta-line); }
.row-front .play { order:2; flex:0 0 var(--control); width:var(--control); height:var(--control); margin:var(--zero); }
.row-front > .ask { grid-column:1 / -1; grid-row:3; width:100%; margin:var(--gap) var(--zero) var(--zero); padding:var(--gap); }
.item[data-swipeable] { background:linear-gradient(90deg,var(--hue) 50%,#737379 50%); box-shadow:inset 0 2px 7px #0004; }
.swipe-rail { position:absolute; top:0; bottom:0; width:10px; display:flex; align-items:center; justify-content:center; color:white; pointer-events:none; }
.rail-done { left:0; } .rail-skip { right:0; }
.swipe-rail .ic { width:8px; height:8px; }
.item .row-front { z-index:1; }
.item .swipe-action { z-index:0; }
.companion-facing { position:relative; }
.mascot3d { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
.companion.live3d .mascot-face { visibility:hidden; }
.companion.live3d .companion-facing { transform:none; transition:none; }
.mascot-z { position:absolute; right:10%; top:10%; font-size:16px; color:var(--label); pointer-events:none; }
.pick3d-canvas, .pick3d-canvas:active { cursor:pointer; touch-action:pan-y; }
.pick-bottle, .pick3d-canvas { height:300px; }
.pick-bottle .bottle-hero { height:280px; width:210px; }
.pick-trigger { position:absolute; left:34%; right:34%; top:3%; bottom:12%; background:none; border:0; box-shadow:none; border-radius:24px; }
.scene-options { border:0; margin:16px 0; padding:0; min-width:0; }
.scene-row { display:flex; gap:12px; padding:12px 6px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; mask-image:linear-gradient(90deg,transparent,#000 6px,#000 calc(100% - 6px),transparent); }
.scene-tile { flex:0 0 84px; display:flex; align-items:center; flex-direction:column; gap:8px; padding:8px 4px; border-radius:18px; background:var(--future); font:400 13px/18px var(--sf); scroll-snap-align:center; }
.scene-tile img { width:56px; height:56px; object-fit:contain; }
.scene-tile[aria-pressed="true"] { background:var(--card); box-shadow:var(--tile-shadow),0 0 0 2px var(--hue,#AC5148); transform:translateY(-2px); }
.shelf3d-dots { flex-wrap:nowrap; gap:0; }
.shelf3d-dot { min-width:0; flex:1; max-width:44px; border-radius:0; background:none; box-shadow:none; }
.shelf3d-dot span { width:7px; height:7px; border-radius:999px; }
.shelf3d-dot[aria-pressed="true"] span { width:18px; }
.amazon { display:flex; justify-content:center; align-items:center; gap:8px; width:100%; border-radius:999px; min-height:44px; padding:12px 16px; background:var(--label); color:var(--bg); font:600 15px/20px var(--sf); white-space:normal; }
.night .amazon { background:var(--label); color:var(--bg); }
.product-row { flex-wrap:wrap; }
.product-row > .amazon { flex:1 0 100%; }
.shelf3d-actions { flex-wrap:wrap; }
.shelf3d-actions .amazon { flex-basis:100%; }
.wear-pick { margin-top:16px; }
.spray-mist { position:absolute; left:50%; top:20%; pointer-events:none; }
.spray-mist i { position:absolute; width:4px; height:4px; border-radius:50%; background:#fff; filter:blur(.6px); }
.completion-ring { position:absolute; inset:0; border:2px solid var(--hue); border-radius:inherit; pointer-events:none; }
.routine-foam { position:fixed; inset:0; z-index:57; pointer-events:none; overflow:hidden; }
.routine-foam .foam-bubble { position:absolute; bottom:-32px; }
@media (prefers-reduced-motion:reduce) {
  .companion.live3d .mascot-face { visibility:visible; }
  .companion.live3d[data-facing="-1"] .companion-facing { transform:scaleX(-1); }
  .mascot3d, .mascot-z { display:none; }
}
.hello { min-height:212px; } /* v5.5: room for the lowered next-routine chip above the segment */
/* v5.6: a swipe must never select text (iOS would raise selection handles mid-swipe); native apps do not select tile text */
.item, .item *, .hello, .deck-viewport, .shelf3d-canvas, .companion { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
/* the track a tile slides on, said quietly. Soft tints that fade toward the middle (done hue left,
   neutral right), no icons, 8px of it showing; the tile reads as resting on a slider, not stacked on coloured blocks. */
.item[data-swipeable] { background:linear-gradient(90deg,color-mix(in srgb,var(--hue) 55%,var(--bg)) 0,color-mix(in srgb,var(--hue) 18%,var(--bg)) 30%,color-mix(in srgb,var(--sec) 10%,var(--bg)) 70%,color-mix(in srgb,var(--sec) 32%,var(--bg)) 100%); box-shadow:inset 0 1px 3px #0000001a; }
.night .item[data-swipeable] { background:linear-gradient(90deg,color-mix(in srgb,var(--hue) 45%,var(--bg)) 0,color-mix(in srgb,var(--hue) 12%,var(--bg)) 30%,color-mix(in srgb,#fff 4%,var(--bg)) 70%,color-mix(in srgb,#fff 14%,var(--bg)) 100%); box-shadow:inset 0 1px 3px #00000066; }
.swipe-rail .ic { display:none; }
/* thin chevrons read as iOS only in tertiary grey and at caption size */
.row-front .row-tail, .coming-row > .ic, .card-arrow, .answers .ic { color:color-mix(in srgb,var(--sec) 70%,transparent); }
.row-front .row-tail .ic, .coming-row > .ic, .card-arrow .ic { width:14px; height:14px; }
/* the iOS segmented control. One flat track, one raised white thumb; unselected segments are
   plain text, never bevelled buttons. 13pt semibold, 32pt tall, 9pt track radius. */
.segment { padding:2px; gap:0; border-radius:9px; background:rgba(118,118,128,.12); box-shadow:none; }
.segment button { min-height:32px; padding:6px 4px; border-radius:7px; background:none; background-image:none; box-shadow:none; font:600 13px/18px var(--sf); color:var(--label); }
.segment button[aria-pressed="true"] { background:var(--card); box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04); }
.night .segment { background:rgba(118,118,128,.24); }
.night .segment button[aria-pressed="true"] { background:#5b5866; box-shadow:0 3px 8px rgba(0,0,0,.3); }
.hello { min-height:184px; } /* the header holds title + summary + mascot; nothing else lives there now */
/* an iOS back link is the previous title in the tint colour with a chevron, not a glass capsule;
   a stripe down a paragraph is generic web furniture; meta reads as one caption line. */
.guide > .back { display:inline-flex; align-items:center; gap:2px; margin-left:-6px; padding:10px 6px; min-height:44px; background:none; background-image:none; box-shadow:none; border:0; color:var(--hue); font:400 17px/22px var(--sf); }
.guide > .back .ic { width:20px; height:20px; }
.intro { border-left:0; padding:20px 22px; }
.meta-chips { display:flex; flex-wrap:wrap; gap:0; }
.meta-chip { background:none; padding:0; border-radius:0; color:var(--sec); font:400 15px/20px var(--sf); min-height:0; box-shadow:none; }
.meta-chips .meta-chip + .meta-chip::before { content:"\00B7"; margin:0 7px; }
/* off Today the mascot keeps one consistent seat: beside the page title, top right, like the
   avatar of an iOS app. Library: next to the large title. Guide: at the end of the back-link row, above the hero. */
.library-anchor { right:4px; bottom:auto; top:calc(env(safe-area-inset-top) + 16px); }
.library-page > .large-title { padding-right:72px; }
.guide-anchor { left:auto; right:6px; top:-60px; }
/* the pictures carry the tiles; a grey box behind each is mud. Unselected = picture + label on the
   page; selected = the picture lifts onto a white card with a thin tint ring and the label goes semibold. */
.scene-tile { background:none; background-image:none; box-shadow:none; color:var(--sec); }
.scene-tile img { width:60px; height:60px; filter:saturate(.85); }
.scene-tile[aria-pressed="true"] { background:var(--card); color:var(--label); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.06),0 6px 16px rgba(0,0,0,.08),0 0 0 1.5px var(--hue,#4C8A3C); transform:none; }
.scene-tile[aria-pressed="true"] img { filter:none; }
.night .scene-tile[aria-pressed="true"] { background:var(--future); }
/* the iOS page control. Dots, no numbers; the current one is a short tint pill. */
.deck-dots { display:flex; justify-content:center; gap:2px; flex-wrap:nowrap; margin:14px 0 4px; }
.deck-dots .deck-dot { min-width:16px; min-height:28px; padding:0; background:none; background-image:none; box-shadow:none; border-radius:0; }
.deck-dots .deck-dot small { display:none; }
.deck-dots .deck-dot span { display:block; width:7px; height:7px; border-radius:4px; margin:auto; background:var(--sec); opacity:.35; transform:none; transition:transform .25s var(--snappy),opacity .25s; }
.deck-dots .deck-dot[aria-pressed="true"] span { opacity:1; background:var(--hue); transform:scaleX(2.4); }
.show-steps { background:none; background-image:none; box-shadow:none; display:flex; margin:6px auto 0; }
/* the places the water misses: a tidy two-column list, not a ragged run of words */
.spot-chips { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; list-style:none; margin:12px 0 0; padding:0; }
.spot-chips .meta-chip { position:relative; padding:0 0 0 16px; color:var(--label); font:400 15px/20px var(--sf); }
.spot-chips .meta-chip::before { content:""; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:3px; background:var(--hue); }
.companion.pinned { position:fixed; } /* only while anchored in the compact bar or a sheet */
/* the ambient ground. Three large blurred colour fields drift slowly behind each screen
   (transform/opacity only, 24-38s, alternate), palette by scene; still under reduced motion. Content sits above. */
.ambient { position:fixed; top:0; bottom:0; left:max(0px,calc((100% - 430px)/2)); width:min(100%,430px); z-index:0; pointer-events:none; overflow:hidden; }
#view, #tabs, #sheets { position:relative; z-index:1; }
#tabs { z-index:40; }
.ambient i { position:absolute; width:420px; height:420px; border-radius:50%; opacity:.75; filter:blur(48px); will-change:transform; }
.ambient i:nth-child(1) { left:-170px; top:-170px; background:radial-gradient(circle,var(--a1,#fff0) 0,transparent 68%); animation:drift-a 31s ease-in-out infinite alternate; }
.ambient i:nth-child(2) { right:-190px; top:-120px; background:radial-gradient(circle,var(--a2,#fff0) 0,transparent 68%); animation:drift-b 37s ease-in-out infinite alternate; }
.ambient i:nth-child(3) { right:-140px; top:260px; opacity:.5; background:radial-gradient(circle,var(--a3,#fff0) 0,transparent 68%); animation:drift-c 26s ease-in-out infinite alternate; }
@keyframes drift-a { from { transform:translate(0,0) scale(1); } to { transform:translate(70px,40px) scale(1.18); } }
@keyframes drift-b { from { transform:translate(0,0) scale(1.1); } to { transform:translate(-80px,60px) scale(.92); } }
@keyframes drift-c { from { transform:translate(0,0) scale(.95); } to { transform:translate(-60px,-50px) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .ambient i { animation:none; } }
#app[data-scene="morning"] { --a1:#FFC99A; --a2:#FFE08A; --a3:#BFDDFF; }
#app[data-scene="midday"] { --a1:#A9DBFF; --a2:#C8F2DC; --a3:#FFEBB0; }
#app[data-scene="library"] { --a1:#BFEDE5; --a2:#FCD9C0; --a3:#DCD0F5; }
#app[data-scene="shelf"] { --a1:#F5DDB2; --a2:#F7C9C2; --a3:#FBE7C4; }
#app.night { --a1:#5A3D91; --a2:#2C4A94; --a3:#8E3B70; }
#app.night .ambient i { opacity:.42; }
#app.night .ambient i:nth-child(3) { opacity:.3; }
/* Coming up as reason-first cards. Eyebrow, the fact, the reminder and its due date, then the
   question in the tint colour as the invitation. */
.coming-cards { display:flex; flex-direction:column; gap:10px; }
.coming-card { display:flex; flex-direction:column; align-items:stretch; gap:8px; width:100%; padding:16px; border-radius:18px; text-align:left; background:var(--card); color:var(--label); box-shadow:var(--tile-shadow),inset 0 1px 0 #ffffff80; }
.night .coming-card { box-shadow:0 1px 0 #0006,0 8px 20px #0007,inset 0 1px 0 #ffffff12; }
.coming-card .tease { display:flex; flex-direction:column; gap:3px; }
.coming-card .tease b { color:#B7791F; text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:11px; line-height:14px; }
.night .coming-card .tease b { color:#F2C46B; }
.coming-card .tease .subhead { color:var(--label); font:400 15px/20px var(--sf); }
.coming-card .coming-head { display:flex; align-items:center; gap:8px; padding-top:8px; border-top:1px solid var(--sep); }
.coming-card .coming-head .headline { flex:1; min-width:0; font:600 15px/20px var(--sf); }
.coming-card .coming-head .ic { width:14px; height:14px; color:color-mix(in srgb,var(--sec) 70%,transparent); }
.coming-card .ask-line { color:#2F7A6B; font-weight:600; }
.night .coming-card .ask-line { color:#8FD3C2; }
.coming-card:active { transform:translateY(1px) scale(.985); }
.last-ask { margin:16px 0 8px; }
.last-ask .headline { margin:0 0 10px; }
.last-options { display:flex; gap:8px; flex-wrap:wrap; }
.last-option { flex:1 1 0; min-height:40px; font:600 15px/20px var(--sf); background:color-mix(in srgb,#2F7A6B 12%,var(--card)); color:#2F7A6B; }
.night .last-option { background:color-mix(in srgb,#8FD3C2 16%,var(--card)); color:#8FD3C2; }
.coming-card > span { align-self:stretch; text-align:left; width:auto; max-width:none; margin:0; }
.coming-card .ask-line { display:block; }
.coming-card .ask-line { text-align:left; max-width:none; }
/* iOS bars are frosted glass, not a white slab */
.compact-nav { background:color-mix(in srgb,var(--card) 72%,transparent); -webkit-backdrop-filter:saturate(1.8) blur(20px); backdrop-filter:saturate(1.8) blur(20px); box-shadow:0 .5px 0 var(--sep); }
/* object life while a step's timer runs. The particle box matches the object image's box. */
.hero .fx { position:absolute; left:50%; top:0; width:min(70%,240px); height:100%; transform:translateX(-50%); pointer-events:none; display:none; }
.hero.live .fx { display:block; }
.fx i { position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s); border-radius:50%; opacity:0; animation:var(--anim) var(--t,2s) var(--ease,ease-out) var(--d) infinite; }
.fx i:nth-child(1) { --x:38%; --d:0s;   --s:8px;  --dx:-6px; }
.fx i:nth-child(2) { --x:44%; --d:.22s; --s:6px;  --dx:5px; }
.fx i:nth-child(3) { --x:50%; --d:.45s; --s:9px;  --dx:-3px; }
.fx i:nth-child(4) { --x:56%; --d:.68s; --s:7px;  --dx:8px; }
.fx i:nth-child(5) { --x:41%; --d:.9s;  --s:10px; --dx:-9px; }
.fx i:nth-child(6) { --x:53%; --d:1.12s;--s:6px;  --dx:4px; }
.fx i:nth-child(7) { --x:47%; --d:1.35s;--s:8px;  --dx:-5px; }
.fx i:nth-child(8) { --x:59%; --d:1.57s;--s:7px;  --dx:7px; }
.fx i:nth-child(9) { --x:35%; --d:1.8s; --s:9px;  --dx:-2px; }
/* shower: drops fall from the head's face */
[data-fx="drops"] .fx i { --y:60%; --anim:fx-fall; --t:1.1s; --ease:cubic-bezier(.5,0,1,1); width:calc(var(--s) * .75); height:var(--s); border-radius:50% 50% 50% 50% / 62% 62% 38% 38%; background:radial-gradient(circle at 35% 30%,#fff 0,#bfe3ff 45%,#5aa4e6 100%); }
[data-fx="drops"] .fx i:nth-child(n) { --x:calc(26% + var(--dx) * 2.4); }
@keyframes fx-fall { 0% { opacity:0; transform:translateY(0); } 12% { opacity:.95; } 100% { opacity:0; transform:translateY(140px); } }
/* toothbrush: foam lifts off the bristles; soaps: bubbles drift up */
[data-fx="foam"] .fx i { --y:16%; --anim:fx-rise; --t:2.2s; background:radial-gradient(circle at 35% 30%,#fff 0,#fff 40%,#e8f2ff 100%); box-shadow:0 1px 2px #0002; }
[data-fx="bubbles"] .fx i { --y:30%; --anim:fx-rise; --t:2.8s; background:radial-gradient(circle at 32% 28%,#fff 0,#ffffff55 30%,#c9e6ff33 60%,#ffd6f533 100%); box-shadow:inset 0 0 0 1px #ffffffaa; }
[data-fx="bubbles"] .fx i:nth-child(odd) { --s:13px; }
@keyframes fx-rise { 0% { opacity:0; transform:translate(0,0) scale(.5); } 15% { opacity:.95; } 100% { opacity:0; transform:translate(var(--dx),-90px) scale(1.15); } }
/* sprays and cologne: soft mist puffs from the nozzle */
[data-fx="mist"] .fx i { --y:6%; --x:52%; --anim:fx-mist; --t:2.4s; --s:26px; background:radial-gradient(circle,#ffffffd0 0,#ffffff00 70%); }
@keyframes fx-mist { 0% { opacity:0; transform:translate(0,0) scale(.3); } 20% { opacity:.85; } 100% { opacity:0; transform:translate(calc(var(--dx) * 7),-50px) scale(2.2); } }
/* beard oil: a slow amber drop */
[data-fx="drip"] .fx i { --y:70%; --x:50%; --anim:fx-fall; --t:2.6s; width:7px; height:10px; border-radius:50% 50% 50% 50% / 62% 62% 38% 38%; background:radial-gradient(circle at 35% 30%,#fff3c4,#e2a23a 60%,#a8641a); }
[data-fx="drip"] .fx i:nth-child(n+3) { display:none; }
/* foot powder: a soft white puff from the shaker */
[data-fx="puff"] .fx i { --y:10%; --anim:fx-mist; --t:2s; --s:10px; background:radial-gradient(circle,#fff 0,#ffffff00 70%); }
/* blades and the molar: a clean glint */
[data-fx="glint"] .fx i { --y:28%; --anim:fx-glint; --t:2.6s; --s:16px; border-radius:0; background:linear-gradient(90deg,transparent 46%,#fff 50%,transparent 54%),linear-gradient(0deg,transparent 46%,#fff 50%,transparent 54%); }
[data-fx="glint"] .fx i:nth-child(n+4) { display:none; }
@keyframes fx-glint { 0%, 70%, 100% { opacity:0; transform:scale(.3) rotate(0); } 82% { opacity:1; transform:scale(1) rotate(45deg); } }
/* towels and pillows: a gentle sway of the whole object */
.hero[data-fx="sway"].live .asset { animation:fx-sway 3.4s ease-in-out infinite alternate; transform-origin:50% 90%; }
@keyframes fx-sway { from { transform:rotate(-2.5deg); } to { transform:rotate(2.5deg); } }
@media (prefers-reduced-motion: reduce) { .hero .fx { display:none !important; } .hero[data-fx="sway"] .asset { animation:none; } }
[data-fx="foam"] .fx i:nth-child(n) { --x:calc(60% + var(--dx) * 1.6); --y:14%; }
/* the mascot's speech bubble: a small white card with a tail pointing up at it */
.say { position:absolute; z-index:59; padding:10px 14px; border-radius:16px; background:var(--card); color:var(--label); font:500 15px/20px var(--sf); box-shadow:0 1px 2px #0000001a,0 10px 24px #00000024; cursor:pointer; }
.say::before { content:""; position:absolute; top:-6px; right:46px; width:14px; height:14px; background:inherit; border-radius:3px; transform:rotate(45deg); }
.night .say { background:#2D2939; color:#F5F2FA; box-shadow:0 10px 24px #0008; }
/* Report */
#app[data-scene="report"] { --a1:#BFE2FF; --a2:#DCD3FF; --a3:#C9F2DF; }
.report-page { position:relative; }
.report-page > .large-title { padding-right:72px; }
.report-anchor { position:absolute; right:4px; top:calc(env(safe-area-inset-top) + 16px); }
.report-sub { margin:-14px 0 20px; }
.report-hero { display:flex; align-items:center; gap:18px; padding:18px; border-radius:22px; background:var(--card); box-shadow:var(--tile-shadow),inset 0 1px 0 #ffffff80; margin-bottom:28px; }
.ring-wrap { position:relative; width:104px; height:104px; flex:none; }
.report-ring { width:104px; height:104px; transform:rotate(-90deg); }
.report-ring circle { fill:none; stroke-width:11; stroke-linecap:round; }
.report-ring .track { stroke:color-mix(in srgb,var(--sec) 18%,transparent); }
.report-ring .value { stroke:#3FB37F; }
.ring-label { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-num { font:700 24px/28px var(--sf); }
.hero-copy .title2 { margin:0 0 4px; font:700 22px/28px var(--sf); }
.week-grid { display:grid; grid-template-columns:76px repeat(7,1fr); align-items:center; row-gap:12px; padding:16px; border-radius:18px; background:var(--card); box-shadow:var(--tile-shadow); }
.week-grid .day-head { text-align:center; }
.week-grid .day-head.is-today { color:var(--label); font-weight:700; }
.week-grid .rite-name { color:var(--label); }
.week-grid .dot { justify-self:center; width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--sec) 30%,transparent); }
.week-grid .dot.part { box-shadow:inset 0 0 0 2.5px #3FB37F; }
.week-grid .dot.full { background:radial-gradient(circle at 35% 30%,#7fe0b0,#2f9e6c); box-shadow:0 2px 6px #2f9e6c55; }
.insights { display:flex; flex-direction:column; gap:10px; }
.insight { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:18px; background:var(--card); color:var(--label); box-shadow:var(--tile-shadow); }
.insight > .ic { width:14px; height:14px; color:color-mix(in srgb,var(--sec) 70%,transparent); }
.ins-ic { width:36px; height:36px; flex:none; border-radius:10px; display:grid; place-items:center; color:#fff; background:linear-gradient(180deg,#6cc79c,#2f9e6c); }
.ins-ic .ic { width:20px; height:20px; }
.ins-copy { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.rem-tally { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:10px; }
.tally { display:flex; flex-direction:column; align-items:center; padding:12px 6px; border-radius:16px; background:var(--card); box-shadow:var(--tile-shadow); }
.tally.due b { color:#D9822B; }
.tally.ok b { color:#2f9e6c; }
.due-text { color:#D9822B; }
.night .report-hero, .night .week-grid, .night .insight, .night .tally { box-shadow:0 1px 0 #0006,0 8px 20px #0007,inset 0 1px 0 #ffffff12; }
.report-section { margin-bottom:28px; }
@media (prefers-reduced-motion: reduce) { .ambient i:nth-child(n) { animation:none; } } /* must out-rank the per-blob rules */
/* A product card is one column; the
   row rule `.product-row > .amazon { flex:1 0 100% }` made the button a full-HEIGHT item there, so it wrapped into a
   second column off the card's right edge and left an empty block under every card. */
.product-card { flex-wrap:nowrap; }
.product-card > .amazon { flex:none; width:100%; align-self:stretch; margin-top:auto; }
.product-card > div + .amazon { margin-top:14px; }
.product-carousel .product-card > div { flex:1 0 auto; }
.sheet-bar { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
.sheet-bar > .strong { justify-self:end; }
/* the mascot's speech, in the page header beside it. The tail points at the mascot. */
.speech-wrap { position:relative; display:inline-block; max-width:100%; margin-top:10px; --speech:var(--card); }
.speech { margin:0; padding:10px 14px; border-radius:18px; background:var(--speech); color:var(--label); box-shadow:0 1px 2px #0000001a,0 8px 20px #0000001f; }
.speech-wrap::after { content:""; position:absolute; width:14px; height:14px; background:var(--speech); border-radius:3px; transform:rotate(45deg); }
.speech-wrap.to-mascot .speech { border-top-right-radius:8px; }
.speech-wrap.to-mascot::after { right:-5px; top:12px; }
.speech-wrap.to-mascot-up::after { right:30px; top:-6px; }
.night .speech-wrap { --speech:#2D2939; }
.night .speech { color:#F5F2FA; box-shadow:0 10px 24px #0008; }
.night .hello .summary.speech { color:#F5F2FA; opacity:1; }
.hello .summary.speech { color:var(--label); }
.report-note { margin:8px 4px 18px; }
/* Painted before any script runs; held until
   the fonts, the first screen's pictures and the 3D mascot are ready (0.9s to 3.5s), then the mascot flies to its
   place and the entrance plays on a quiet main thread. Once per session. */
.launch { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; align-content:center; gap:14px; }
.launch-ground { position:absolute; inset:0; background:radial-gradient(120% 80% at 50% 38%,#3A2F63 0,#1D1929 58%,#15131C 100%); }
.launch-stage { position:relative; width:132px; height:132px; }
.launch-mascot { position:relative; display:block; width:100%; height:100%; object-fit:contain; animation:launch-bob 1.6s ease-in-out infinite; }
.launch-stage i { position:absolute; bottom:22%; width:10px; height:10px; border-radius:50%; border:1.5px solid #ffffffa6; background:radial-gradient(circle at 32% 30%,#ffffffb0,#ffffff14 62%); opacity:0; animation:launch-bubble 2.2s ease-in infinite; }
.launch-stage i:nth-child(1) { left:8%; animation-delay:-.2s; }
.launch-stage i:nth-child(2) { left:24%; width:7px; height:7px; animation-delay:-1.1s; }
.launch-stage i:nth-child(3) { left:44%; width:13px; height:13px; animation-delay:-.6s; }
.launch-stage i:nth-child(4) { left:64%; width:8px; height:8px; animation-delay:-1.6s; }
.launch-stage i:nth-child(5) { left:80%; animation-delay:-.9s; }
.launch-stage i:nth-child(6) { left:92%; width:6px; height:6px; animation-delay:-1.9s; }
.launch-word { margin:0; font:700 22px/28px var(--sf); color:#F5F2FA; letter-spacing:.2px; }
@keyframes launch-bubble { 0% { transform:translateY(0) scale(.6); opacity:0; } 15% { opacity:.9; } 100% { transform:translateY(-130px) scale(1.15); opacity:0; } }
@keyframes launch-bob { 0%, 100% { transform:translateY(0) scale(1,1); } 50% { transform:translateY(-8px) scale(.98,1.03); } }
@media (prefers-reduced-motion: reduce) { .launch * { animation:none !important; } }
/* the Home Screen offer. */
.home-offer { display:grid; justify-items:center; text-align:center; gap:10px; padding:4px 8px 20px; }
.home-mascot { width:112px; height:112px; object-fit:contain; animation:launch-bob 1.8s ease-in-out infinite; }
.home-offer .body { max-width:30ch; }
.home-steps { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:10px; width:100%; max-width:320px; text-align:left; counter-reset:step; }
.home-steps li { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:16px; background:var(--future); counter-increment:step; }
.home-steps li::before { content:counter(step); font:600 15px/20px var(--sf); color:var(--sec); width:14px; }
.home-step-ic { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:var(--card); color:var(--acc); }
.home-step-ic .ic { width:20px; height:20px; }
@media (prefers-reduced-motion: reduce) { .home-mascot { animation:none; } }
/* iPhone haptics: an invisible real switch inside the control takes the tap (see hapticHost in app.js). */
:where(.haptic-host) { position:relative; }
.haptic-ghost { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:.011; z-index:1; cursor:inherit; -webkit-tap-highlight-color:transparent; }