.hero{--glass:rgba(255,255,255,0.075);--card:rgba(24,38,52,0.88);--glass-line:rgba(255,255,255,0.12);--on-night:#F1F5F9;--on-night-soft:rgba(241,245,249,0.68);position:relative;min-height:100svh;overflow:hidden;color:var(--on-night);background:radial-gradient(120% 70% at 50% 110%,rgba(16,185,129,.22),transparent 60%),linear-gradient(180deg,var(--night-1,#0A2A2A) 0,var(--night-2,#0F172A) 70%);display:flex;flex-direction:column;align-items:center;padding:calc(18px + env(safe-area-inset-top, 0px)) 20px 28px;font-size:16px;line-height:normal}.hero button{font:inherit}.hero :focus-visible{outline:2px solid var(--accent,#10B981);outline-offset:3px;border-radius:6px}.hero .status{width:100%;max-width:440px;display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:500}.hero .skip,.hero .status{color:var(--on-night-soft)}.hero .skip{background:none;border:0;padding:4px 6px;cursor:pointer;transition:color .2s ease}.hero .skip:hover{color:var(--on-night)}.hero[data-state=done] .skip{visibility:hidden}.hero .top{position:relative;width:100%;max-width:440px;height:150px;margin-top:22px;text-align:center;transition:margin-top .8s cubic-bezier(.2,.8,.2,1)}.hero[data-state=done] .top{margin-top:clamp(22px,13svh,140px)}.hero .clock,.hero .name{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1)}.hero .clock .date{font-size:15px;font-weight:500;color:var(--on-night-soft)}.hero .clock .time{font-size:84px;font-weight:600;letter-spacing:-.04em;line-height:1;margin-top:2px;font-variant-numeric:tabular-nums}.hero .name{opacity:0;transform:translateY(18px);pointer-events:none}.hero[data-state=done] .clock{opacity:0;transform:translateY(-14px) scale(.96);pointer-events:none}.hero[data-state=done] .name{opacity:1;transform:none;pointer-events:auto}.hero .feed{position:relative;width:100%;max-width:440px;height:360px;margin-top:18px;transition:height .5s ease}.hero .cards{position:absolute;inset:0}.hero .card{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:38px 1fr auto;gap:2px 12px;align-items:start;padding:12px 14px;border-radius:20px;background:var(--card);border:1px solid var(--glass-line);backdrop-filter:blur(18px) saturate(140%);box-shadow:0 8px 30px rgba(0,0,0,.28);transform-origin:50% 100%;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s ease;will-change:transform,opacity}.hero .card .ico{grid-row:span 2;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.2)}.hero .ico svg{width:20px;height:20px;stroke:#ffffff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.hero .card .app{font-size:13px;font-weight:600;color:var(--on-night)}.hero .card .when{font-size:12px;color:var(--on-night-soft)}.hero .card .msg{grid-column:2/span 2;font-size:14px;line-height:1.35;color:var(--on-night-soft)}.hero .card .msg b{display:block;font-weight:600;color:#ffffff}.hero .card>*{transition:opacity .3s ease}.hero .card.stacked>*{opacity:0}.hero[data-state=done] .card{opacity:0!important;transform:translateY(-200px) scale(.7)!important;pointer-events:none}.hero .group{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(10px);visibility:hidden;transition:opacity .5s ease .35s,transform .5s ease .35s,visibility .5s ease .35s;pointer-events:none}.hero[data-state=done] .group{visibility:visible;opacity:1;transform:none;pointer-events:auto;position:relative}.hero[data-state=done] .feed{height:auto;min-height:80px}.hero .group button{width:100%;text-align:left;cursor:pointer;color:var(--on-night);padding:14px 16px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(18px);display:flex;align-items:center;gap:12px;position:relative;box-shadow:0 4px 20px rgba(0,0,0,.15);transition:background .2s ease}.hero .group button:hover{background:rgba(255,255,255,.11)}.hero .group button:after{content:"";position:absolute;left:14px;right:14px;bottom:-7px;height:12px;border-radius:0 0 16px 16px;background:rgba(255,255,255,.05);border:1px solid var(--glass-line);border-top:0;z-index:-1}.hero .pulse{width:10px;height:10px;border-radius:50%;background:var(--accent,#10B981);flex:none;box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:hero-pulse 2.4s ease-out infinite}@keyframes hero-pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}70%{box-shadow:0 0 0 10px rgba(16,185,129,0)}to{box-shadow:0 0 0 0 rgba(16,185,129,0)}}.hero .group strong{font-weight:600;font-size:15px;display:block}.hero .group .sub{font-size:13px;color:var(--on-night-soft)}.hero .list{display:none;margin-top:14px;max-height:320px;overflow:auto;padding-right:2px}.hero .list.open{display:grid;gap:8px}.hero .list .row{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:14px;color:var(--on-night-soft)}.hero .list .row b{color:var(--on-night);font-weight:600}.hero .list .row .ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center}.hero .list .row .ico svg{width:16px;height:16px;stroke:#ffffff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.hero .actions{width:100%;max-width:440px;margin-top:auto;display:grid;gap:10px;padding-top:20px;opacity:0;transform:translateY(12px);visibility:hidden;transition:opacity .5s ease .6s,transform .5s ease .6s,visibility .5s ease .6s;pointer-events:none}.hero[data-state=done] .actions{visibility:visible;opacity:1;transform:none;pointer-events:auto}.hero .btn{display:flex;justify-content:center;align-items:center;min-height:52px;border-radius:16px;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;border:0;transition:background .2s ease,border-color .2s ease}.hero .btn.primary{background:var(--accent,#10B981);color:#04261C}.hero .btn.primary:hover{background:#34D399}.hero .btn.ghost{background:transparent;color:var(--on-night);border:1px solid rgba(255,255,255,.22)}.hero .btn.ghost:hover{border-color:rgba(255,255,255,.45)}.hero .note{text-align:center;font-size:13px;margin:6px 0 0}.hero .note,.hero .replay{color:var(--on-night-soft)}.hero .replay{background:none;border:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:2px;transition:color .2s ease}.hero .replay:hover{color:#ffffff}@media (min-width:900px){.hero{padding-top:calc(32px + env(safe-area-inset-top, 0px))}.hero .feed{height:400px}.hero .actions{grid-template-columns:1fr 1fr}}@media (prefers-reduced-motion:reduce){.hero *,.hero :after,.hero :before{transition:none!important;animation:none!important}}