:root{color-scheme:light;--ink:#284b67;--muted:#526b7e;--sky:#eef5fa;--blue:#c3d9e8;--peach:#f2d3bc;--paper:#fffdf7;--line:#c5d7e3}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--sky);font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif;line-height:1.5}button,a,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-underline-offset:4px}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #735533;outline-offset:5px}[hidden]{display:none!important}
header{max-width:1100px;margin:auto;padding:25px 28px}.brand{display:inline-flex;align-items:center;flex-wrap:wrap;gap:9px;text-decoration:none;font-size:13px;font-weight:700}.brand-dot{width:20px;height:20px;border:2px solid #658aa5;border-radius:50%;box-shadow:inset 0 0 0 4px var(--sky),inset 0 0 0 5px #658aa5}.badge{background:#e0eaf0;border-radius:20px;padding:4px 10px;font-size:11px;font-weight:500;margin-left:3px}
main{max-width:720px;margin:auto;padding:10px 24px 0}.breathing{text-align:center}.eyebrow{font-size:10px;letter-spacing:.18em;font-weight:700;margin:12px 0}h1{font-size:clamp(30px,5.5vw,44px);line-height:1.15;letter-spacing:-.04em;margin:0 0 14px;font-weight:750}.intro{font-size:16px;color:var(--muted);margin:0 auto 8px;max-width:320px}.stage{height:300px;position:relative;display:grid;place-items:center;margin:12px auto 0;isolation:isolate}.bubble-area{width:100%;height:100%;display:grid;place-items:center;transition:opacity .45s ease}.bubble{grid-area:1/1;width:min(264px,68vw);aspect-ratio:1;border-radius:50%;background:#c3d9e8;transform:scale(.78);position:relative;box-shadow:0 0 0 16px #e1ecf4;will-change:transform}.shine{position:absolute;left:20%;top:16%;width:25%;height:12%;background:#deebf3;border-radius:50%;transform:rotate(-32deg)}.bubble-words{grid-area:1/1;position:relative;display:flex;align-items:center;flex-direction:column;pointer-events:none}.phase-icon{height:42px;line-height:1;font-size:36px;font-family:system-ui,sans-serif;margin-bottom:8px}#phase{font-size:clamp(24px,5vw,30px);line-height:1.2;font-weight:700}.hint{font-size:13px;margin-top:8px;color:#3d607a}.finished{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:20px;animation:appear .45s ease}.finished h2{font-size:clamp(26px,5vw,34px);line-height:1.2;max-width:320px;margin:12px 0 8px;letter-spacing:-.03em}.finished p{margin:0;color:var(--muted)}@keyframes appear{from{opacity:0}to{opacity:1}}.progress{display:flex;gap:9px;justify-content:center;height:12px;margin:8px 0 24px}.progress i{display:block;width:8px;height:8px;border:1px solid #819aad;border-radius:50%;background:transparent}.progress i.filled{background:#688aa2;border-color:#688aa2}.controls{min-height:106px}.button-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}button{border-radius:22px;min-height:54px;padding:13px 27px;font-weight:700;font-size:18px;border:1px solid transparent}.primary{background:var(--peach);color:#493e36;min-width:158px}.primary:hover{background:#edc4a5}.primary span{padding-left:14px}.secondary{background:var(--paper);border-color:var(--line);color:var(--ink);min-width:100px}.small{font-size:13px;color:var(--muted);margin:10px 0}.comfort{font-size:12px;color:var(--muted);margin:8px auto 28px;max-width:330px}.grownups{border-top:1px solid var(--line);max-width:520px;margin:0 auto;font-size:14px;color:var(--muted)}summary{cursor:pointer;width:fit-content;margin:0 auto;padding:16px;min-height:48px;font-size:13px}.grownups div{padding:0 6px 18px}.grownups a{overflow-wrap:anywhere}footer{text-align:center;font-size:12px;color:var(--muted);padding:12px 20px 25px}body:after{content:"";position:fixed;bottom:-130px;left:-100px;width:400px;height:240px;background:#e1ebdf;border-radius:50%;z-index:-1;pointer-events:none}
@media(max-width:480px){header{padding:18px 20px}.badge{display:none}main{padding:4px 20px 0}.stage{height:270px;margin-top:0}.progress{margin-top:0;margin-bottom:20px}.comfort{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){.bubble-area,.finished{transition:none;animation:none}.bubble{will-change:auto}}

/* Warm, flat illustration palette for little moments. */
:root { --ink:#294c6b; --muted:#4e6b7f; --sky:#dfedf5; --blue:#98c8e2; --peach:#efc58d; --paper:#fff5df; --line:#a9c6d8; }
body { position:relative; isolation:isolate; background:var(--sky); }
body:after { display:none; }
header,main,footer { position:relative; z-index:1; }
.brand-dot { border-color:#547a9a; box-shadow:inset 0 0 0 4px var(--sky),inset 0 0 0 5px #547a9a; }
.badge { background:#c7dfec; }
h1,.finished h2 { color:#294c6b; }
.bubble { background:var(--blue); border:2px solid #7babc9; box-shadow:0 0 0 16px #cce3f0; }
.shine { background:#cbe6f3; }
.hint { color:#355b77; }
.primary { background:var(--peach); color:#494239; border-color:#dbaf78; box-shadow:0 3px 0 #dbaf78; }
.primary:hover { background:#eab979; }
.primary:active { transform:translateY(2px); box-shadow:0 1px 0 #dbaf78; }
.secondary { background:var(--paper); border:2px solid #abc5d6; }
.progress i { border-color:#6588a2; }
.progress i.filled { background:#547a9a; border-color:#547a9a; }
.phase-icon { display:block; position:relative; width:48px; }
.phase-icon.is-cloud { color:transparent; }
.phase-icon.is-cloud:before { content:""; position:absolute; bottom:3px; left:1px; width:46px; height:23px; background:#fff5df; border:1.5px solid #789cb8; border-radius:18px; }
.phase-icon.is-cloud:after { content:""; position:absolute; top:6px; left:12px; width:25px; height:25px; background:#fff5df; border-top:1.5px solid #789cb8; border-radius:50%; }
.little-landscape { position:fixed; bottom:0; left:0; width:100%; height:clamp(90px,16vh,180px); z-index:0; pointer-events:none; opacity:.65; }
@media(max-width:480px) { .little-landscape { height:100px; } }
@media(prefers-reduced-motion:reduce) { .primary:active { transform:none; } }