:root{color:#24313a;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fff7d8;font:18px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100svh;margin:0}h1,h2,p{margin-top:0}h1{color:#172229;letter-spacing:0;margin-bottom:16px;font-size:clamp(2.25rem,6vw,5rem);font-weight:950;line-height:.98}@media (width<=560px){:root{font-size:16px}h1{margin-bottom:10px;font-size:clamp(2rem,10vw,3.25rem);line-height:1.02}}button,input{letter-spacing:0}.app-shell{--scene-color:#e86f35;color:#24313a;background:radial-gradient(circle at 12% 12%,#ffffffe6,#0000 26%),linear-gradient(140deg,#fff7d8 0%,#d7f3f0 46%,#f7ddeb 100%);min-height:100svh}.page-view{box-sizing:border-box;flex-direction:column;justify-content:center;width:min(1120px,100% - 32px);min-height:100svh;margin:0 auto;padding:32px 0;display:flex}.page-header{text-align:center;max-width:760px;margin:0 auto 28px}.page-header.compact{margin-bottom:22px}.eyebrow{color:#53616b;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px;font-size:.82rem;font-weight:800}.intro{color:#5a6973;max-width:620px;margin:0 auto;font-size:clamp(1rem,2vw,1.18rem)}.sound-row{justify-content:center;margin-bottom:24px;display:flex}.scene-grid,.duration-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;display:grid}.scene-card,.duration-button{color:#24313a;cursor:pointer;text-align:center;background:#ffffffc7;border:0;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:18px;min-height:230px;padding:24px;transition:transform .18s,box-shadow .18s,background .18s;display:flex;box-shadow:0 18px 40px #28374624}.scene-card:hover,.duration-button:hover{background:#fff;transform:translateY(-4px);box-shadow:0 24px 52px #2837462e}.scene-card:focus-visible,.duration-button:focus-visible,button:focus-visible,input:focus-visible{outline-offset:3px;outline:4px solid #2a78c15c}.scene-copy,.duration-button span{flex-direction:column;gap:8px;display:flex}.scene-copy strong,.duration-button strong{color:#1e2a32;font-size:1.35rem;line-height:1.15}.scene-copy span,.duration-button span{color:#64727c;line-height:1.35}.animal-badge{background:linear-gradient(180deg, #ffffffe6, color-mix(in srgb, var(--scene-color) 18%, white));width:94px;height:94px;box-shadow:0 12px 30px color-mix(in srgb, var(--scene-color) 28%, transparent);border:6px solid #fff;border-radius:50%;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.animal-badge img{object-fit:contain;width:88%;height:88%;display:block}.animal-badge.large{width:112px;height:112px;margin-bottom:14px}.animal-badge.hero-animal{width:150px;height:150px;margin:0 auto 22px;animation:.9s ease-in-out infinite happy-hop}.bunny{border-radius:46% 46% 52% 52%}.crocodile{border-radius:42% 58% 48% 52%}.cat{border-radius:48% 48% 54% 54%}.top-bar,.timer-bar{z-index:5;pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;top:20px;left:max(18px,50vw - 560px);right:max(18px,50vw - 560px)}.top-bar>*,.timer-bar>*{pointer-events:auto}button{font:inherit}.icon-button,.quiet-button,.primary-button,.secondary-button,.custom-duration button{cursor:pointer;border:0;border-radius:8px;min-height:48px;font-weight:850;transition:transform .18s,box-shadow .18s,background .18s}.icon-button{color:#24313a;background:#ffffffc2;width:52px;font-size:1.35rem;box-shadow:0 12px 28px #2837461f}.quiet-button,.secondary-button{color:#24313a;background:#ffffffc2;padding:0 18px;box-shadow:0 12px 28px #2837461f}.primary-button,.custom-duration button{color:#fff;background:#20313b;padding:0 28px;box-shadow:0 14px 28px #20313b33}.icon-button:hover,.quiet-button:hover,.primary-button:hover,.secondary-button:hover,.custom-duration button:hover{transform:translateY(-2px)}.duration-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.duration-button{gap:10px;min-height:170px}.duration-button b{color:var(--scene-color);font-size:1.4rem}.custom-duration{background:#ffffffa3;border-radius:8px;gap:10px;width:min(520px,100%);margin:22px auto 0;padding:14px;display:grid;box-shadow:0 14px 30px #2837461a}.custom-duration label{color:#53616b;font-weight:800}.custom-duration div{grid-template-columns:1fr auto;gap:10px;display:grid}.custom-duration input{box-sizing:border-box;color:#24313a;width:100%;min-height:48px;font:inherit;border:2px solid #53616b29;border-radius:8px;padding:0 14px;font-weight:800}.timer-view{gap:24px}.timer-header{text-align:center}.timer-header h1{margin-bottom:0}.path-stage{background:linear-gradient(#ffffff9e,#ffffff38),linear-gradient(#c9edf4 0%,#eaf9de 62%,#d7be8d 100%);border-radius:8px;justify-content:center;align-items:center;min-height:42svh;padding:42px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff85,0 24px 60px #28374629}.sky-stars span,.celebration span{clip-path:polygon(50% 0,60% 35%,98% 35%,68% 57%,80% 100%,50% 72%,20% 100%,32% 57%,2% 35%,40% 35%);opacity:.84;background:#fff27a;width:18px;height:18px;animation:1.6s ease-in-out infinite alternate twinkle;position:absolute}.sky-stars span:first-child{top:18%;left:12%}.sky-stars span:nth-child(2){animation-delay:.25s;top:16%;right:20%}.sky-stars span:nth-child(3){animation-delay:.5s;top:34%;right:38%}.timer-path{width:min(860px,100%);height:210px;position:relative}.trail,.trail-fill{border-radius:999px;height:18px;position:absolute;bottom:52px;left:5%;right:15%}.trail{background:#ffffffc7;box-shadow:inset 0 0 0 3px #74573114}.trail-fill{background:repeating-linear-gradient(90deg, color-mix(in srgb, var(--scene-color) 70%, white) 0 26px, #fff 26px 38px);max-width:80%;transition:width .26s linear;right:auto}.walking-animal{z-index:2;background:linear-gradient(180deg, #fffffff5, color-mix(in srgb, var(--scene-color) 16%, white));width:116px;height:116px;box-shadow:0 16px 34px color-mix(in srgb, var(--scene-color) 34%, transparent);border:7px solid #fff;border-radius:50%;place-items:center;margin-left:-58px;transition:left .26s linear;animation:.98s ease-in-out infinite gentle-walk;display:grid;position:absolute;bottom:76px;overflow:hidden}.walking-animal img{object-fit:contain;width:92%;height:92%;display:block}.walking-animal.nearly-home{animation:.76s ease-in-out infinite gentle-walk,.76s ease-in-out infinite happy-hop}.destination{color:#2d3a42;text-align:center;flex-direction:column;justify-content:flex-end;align-items:center;gap:10px;width:132px;height:132px;font-size:.92rem;font-weight:900;display:flex;position:absolute;bottom:38px;right:0}.roof{clip-path:polygon(50% 0,100% 70%,0 70%);background:#c55344;width:88px;height:56px;margin-bottom:-34px}.house-body{background:#ffe59b;border:6px solid #fff;border-radius:8px;width:88px;height:72px;box-shadow:0 12px 24px #28374624}.destination.glow .house-body,.destination.glow .roof{filter:drop-shadow(0 0 18px #fff27af2)}.timer-readout{background:#ffffffbd;border-radius:8px;justify-content:space-between;align-items:baseline;gap:18px;width:min(420px,100%);margin:0 auto;padding:14px 20px;display:flex;box-shadow:0 14px 30px #2837461a}.timer-readout span{color:#53616b;font-weight:800}.timer-readout strong{color:#19242b;font-variant-numeric:tabular-nums;font-size:clamp(2rem,8vw,4rem);line-height:1}.control-row{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.done-view{text-align:center;position:relative;overflow:hidden}.celebration span:first-child{top:18%;left:18%}.celebration span:nth-child(2){background:#72d6cc;top:24%;right:16%}.celebration span:nth-child(3){background:#ff99b4;bottom:22%;left:28%}.celebration span:nth-child(4){background:#f0b64a;bottom:18%;right:26%}@keyframes gentle-walk{0%,to{transform:translateY(0)rotate(-1deg)}50%{transform:translateY(-7px)rotate(1deg)}}@keyframes happy-hop{0%,to{transform:translateY(0)scale(1)}45%{transform:translateY(-12px)scale(1.02)}}@keyframes twinkle{0%{transform:scale(.8)rotate(0)}to{transform:scale(1.24)rotate(12deg)}}@media (width<=900px){.scene-grid,.duration-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-view{justify-content:flex-start;padding:76px 0 28px}.page-header{margin-bottom:22px}.scene-card{min-height:190px}.duration-button{min-height:144px}}@media (width<=560px){.page-view{width:min(100% - 24px,1120px);padding:64px 0 18px}.page-header{margin-bottom:16px}.page-header.compact{margin-bottom:14px}.eyebrow{letter-spacing:.1em;margin-bottom:7px;font-size:.72rem}.intro{font-size:.96rem;line-height:1.35}.sound-row{margin-bottom:14px}.top-bar,.timer-bar{top:12px;left:12px;right:12px}.icon-button,.quiet-button,.primary-button,.secondary-button,.custom-duration button{min-height:42px}.icon-button{width:44px}.quiet-button,.secondary-button{padding:0 14px}.duration-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.scene-grid{grid-template-columns:1fr;gap:10px}.scene-card{text-align:left;flex-direction:row;justify-content:flex-start;gap:14px;min-height:116px;padding:14px}.duration-button{gap:6px;min-height:116px;padding:14px 10px}.scene-copy strong,.duration-button strong{font-size:1.04rem}.scene-copy span,.duration-button span{font-size:.9rem;line-height:1.25}.duration-button b{font-size:1.08rem}.animal-badge{border-width:5px;flex:none;width:68px;height:68px}.animal-badge.large{width:84px;height:84px;margin-bottom:10px}.animal-badge.hero-animal{width:116px;height:116px;margin-bottom:16px}.custom-duration{gap:8px;margin-top:14px;padding:12px}.custom-duration input{min-height:44px}.custom-duration div{grid-template-columns:1fr;gap:8px}.timer-view{gap:14px;padding-top:60px}.timer-header h1{font-size:clamp(1.9rem,9vw,2.75rem)}.path-stage{min-height:270px;padding:18px 10px}.timer-path{height:196px}.trail,.trail-fill{left:4%;right:23%}.walking-animal{border-width:5px;width:76px;height:76px;margin-left:-38px;bottom:70px}.destination{gap:6px;width:92px;font-size:.72rem;bottom:36px;right:-2px}.roof,.house-body{width:62px}.roof{height:44px;margin-bottom:-28px}.house-body{border-width:5px;height:58px}.timer-readout{justify-items:center;gap:8px;padding:12px 16px;display:grid}.timer-readout strong{font-size:clamp(2rem,14vw,3.1rem)}.control-row{gap:8px}.control-row .primary-button,.control-row .secondary-button{flex:calc(50% - 8px);padding-inline:10px}.control-row .primary-button{flex-basis:100%}}@media (width<=380px){.duration-grid{grid-template-columns:1fr}.duration-button{text-align:left;align-items:flex-start;min-height:92px}.path-stage{min-height:240px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
