:root{
    --bg:#07111f;
    --bg-soft:#0e1a31;
    --card:rgba(12,20,38,.86);
    --card-2:rgba(16,26,48,.90);
    --line:rgba(255,255,255,.08);
    --line-strong:rgba(255,255,255,.14);
    --text:#eef5ff;
    --muted:#a7b7cf;
    --muted-2:#d5e2ff;
    --primary:#6fe8ff;
    --primary-2:#8b5cf6;
    --success:#32d583;
    --warning:#f8b84e;
    --danger:#ef6376;
    --shadow:0 24px 64px rgba(0,0,0,.34);
    --radius:26px;
    --radius-sm:18px;
    --safe-top:max(16px, env(safe-area-inset-top));
    --safe-right:max(16px, env(safe-area-inset-right));
    --safe-bottom:max(18px, env(safe-area-inset-bottom));
    --safe-left:max(16px, env(safe-area-inset-left));
    --orb-scale:1.18;
    --orb-inverse-scale:.92;
    --timeline:0%;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:Tahoma,Arial,sans-serif;
    color:var(--text);
    min-height:100vh;
    background:
        radial-gradient(circle at 15% 15%, rgba(111,232,255,.12), transparent 28%),
        radial-gradient(circle at 85% 10%, rgba(139,92,246,.18), transparent 32%),
        radial-gradient(circle at 50% 95%, rgba(50,213,131,.08), transparent 28%),
        linear-gradient(180deg,#07101d 0%,#091425 45%,#06101a 100%);
}
body::before,body::after{
    content:"";
    position:fixed;
    width:42vmax;height:42vmax;pointer-events:none;z-index:-1;filter:blur(74px);opacity:.24
}
body::before{top:-16vmax;right:-14vmax;background:radial-gradient(circle, rgba(111,232,255,.78), transparent 60%)}
body::after{left:-16vmax;bottom:-18vmax;background:radial-gradient(circle, rgba(139,92,246,.76), transparent 60%)}
a{color:var(--primary);text-decoration:none}
button,input{font:inherit}
img{max-width:100%;height:auto}
.container{width:min(1140px,calc(100% - 28px));margin-inline:auto}
.site-header{
    position:sticky;top:0;z-index:30;
    backdrop-filter:blur(18px);
    background:rgba(7,17,31,.72);
    border-bottom:1px solid rgba(255,255,255,.06)
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;color:var(--text)}
.brand-mark{
    width:46px;height:46px;border-radius:16px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));
    color:#04111b;font-weight:700;font-size:1.2rem;
    box-shadow:0 14px 36px rgba(111,232,255,.28)
}
.brand-text{display:flex;flex-direction:column;gap:4px}
.brand-text strong{font-size:1.02rem}
.brand-text small{color:var(--muted);font-size:.8rem}
.top-links{display:flex;gap:10px;align-items:center}
.top-links a{
    padding:10px 14px;border-radius:999px;border:1px solid var(--line);
    background:rgba(255,255,255,.03);color:var(--text)
}

.main-grid,.stats-grid{display:grid;gap:18px;padding:22px 0 110px}
.card{
    position:relative;
    background:linear-gradient(180deg,var(--card),var(--card-2));
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
}
.card::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 22%)
}
.hero,.support-card,.content-card,.faq-card,.intro-card,.charts-card,.funnel-card,.info-card{padding:20px}
.hero{display:grid;gap:18px}
.eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    padding:8px 12px;border-radius:999px;
    background:rgba(111,232,255,.10);
    color:#b9fbff;
    border:1px solid rgba(111,232,255,.18);
    font-size:.88rem
}
h1,h2{margin:0 0 10px;line-height:1.38}
h1{font-size:clamp(1.58rem,2vw + 1rem,2.36rem)}
h2{font-size:clamp(1.02rem,1.2vw + .92rem,1.42rem)}
.lede,.content-card p,.faq-card p,.support-card p,.intro-card p,.section-copy{
    margin:0;color:var(--muted);line-height:1.95
}
.notice{
    margin-top:14px;padding:12px 14px;border-radius:18px;
    background:rgba(50,213,131,.08);border:1px solid rgba(50,213,131,.20);color:#ddffea
}
.notice.warning{background:rgba(248,184,78,.10);border-color:rgba(248,184,78,.22);color:#ffe7c0}
.hero-stats,.stats-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stat-chip,.metric-card,.mini-card,.funnel-box{
    padding:16px;border-radius:22px;border:1px solid var(--line);
    background:rgba(255,255,255,.03)
}
.stat-number,.metric-value{display:block;font-size:1.52rem;font-weight:700}
.stat-label,.metric-label{display:block;margin-top:8px;color:var(--muted);line-height:1.72}
.rescue-shell{padding:18px;display:grid;gap:18px}
.rescue-top{display:grid;gap:14px}
.panel-note{margin:0;color:var(--muted);font-size:.92rem;line-height:1.8}
.sentence-panel{
    padding:18px;border-radius:24px;
    background:
        linear-gradient(180deg, rgba(111,232,255,.08), rgba(139,92,246,.06)),
        rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.08)
}
.panel-header,.section-head{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px
}
.panel-actions{display:flex;gap:10px;flex-wrap:wrap}
.sentence{
    margin:16px 0 14px;
    font-size:clamp(1.16rem,1.3vw + .96rem,1.56rem);
    font-weight:700;line-height:2.05
}
.micro-action,.phase-chip{
    display:inline-flex;align-items:center;justify-content:center;
    padding:10px 14px;border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.05);
    color:#dcedff;line-height:1.8
}
.reason-box{
    margin-top:14px;padding:14px;border-radius:18px;
    background:rgba(50,213,131,.08);
    border:1px solid rgba(50,213,131,.18);
    display:grid;gap:6px
}
.reason-label{color:#cbffe2;font-size:.9rem}
.focus-side{display:grid;gap:12px}
.mini-title{display:block;margin-bottom:8px;font-weight:700;color:var(--muted-2)}
.mini-card p{margin:0;color:var(--muted);line-height:1.8}
.full-btn{width:100%;margin-top:12px}
.pattern-panel{
    display:flex;gap:10px;overflow:auto;padding-bottom:4px;scrollbar-width:none
}
.pattern-panel::-webkit-scrollbar{display:none}
.pattern-btn,.ghost-btn,.secondary-btn,.primary-btn,.action-btn,.dock-btn{
    cursor:pointer;border-radius:999px;
    transition:transform .18s ease, opacity .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease
}
.pattern-btn,.ghost-btn,.secondary-btn,.action-btn,.dock-btn{
    border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text)
}
.pattern-btn,.ghost-btn,.secondary-btn,.primary-btn,.action-btn{padding:12px 16px}
.pattern-btn{white-space:nowrap}
.pattern-btn.is-active{
    border-color:rgba(111,232,255,.46);
    background:linear-gradient(135deg, rgba(111,232,255,.16), rgba(139,92,246,.12))
}
.primary-btn{
    background:linear-gradient(135deg,var(--primary),var(--primary-2));
    color:#04111b;border:none;font-weight:700;
    box-shadow:0 14px 30px rgba(111,232,255,.20)
}
.pattern-btn:hover,.ghost-btn:hover,.secondary-btn:hover,.primary-btn:hover,.action-btn:hover,.dock-btn:hover{
    transform:translateY(-1px)
}
.orb-section{display:grid;gap:14px;justify-items:center}
.orb-frame{
    position:relative;display:grid;place-items:center;
    width:min(88vw,370px);aspect-ratio:1/1;
    --ring-progress:0deg;
}
.orb-bg{
    position:absolute;inset:2%;border-radius:50%;
    background:radial-gradient(circle, rgba(111,232,255,.08), rgba(139,92,246,.06), transparent 74%);
    filter:blur(18px)
}
.orb-track{
    position:absolute;inset:6%;border-radius:50%;
    background:conic-gradient(var(--primary) var(--ring-progress), rgba(255,255,255,.07) 0);
    filter:drop-shadow(0 0 18px rgba(111,232,255,.18))
}
.orb-track::after{
    content:"";position:absolute;inset:7%;
    border-radius:50%;
    background:rgba(7,17,31,.95);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)
}
.orb-shadow{
    position:absolute;inset:12%;border-radius:50%;
    box-shadow:inset 0 0 60px rgba(111,232,255,.06), 0 0 60px rgba(139,92,246,.12)
}
.orb{
    position:relative;z-index:2;
    width:56%;aspect-ratio:1/1;border-radius:50%;
    transform:scale(var(--orb-scale));
    transition:transform linear 4s, filter .25s ease, opacity .25s ease;
    display:grid;place-items:center
}
.orb.inverse{
    position:absolute;z-index:1;width:67%;
    background:radial-gradient(circle, rgba(111,232,255,.12), rgba(111,232,255,.03) 60%, transparent 72%);
    transform:scale(var(--orb-inverse-scale));
    opacity:.55;
    transition:transform linear 4s, opacity .25s ease
}
.orb-core{
    position:absolute;inset:0;border-radius:50%;
    background:
        radial-gradient(circle at 28% 28%, rgba(255,255,255,.92), rgba(255,255,255,.06) 22%, transparent 34%),
        radial-gradient(circle at 50% 35%, rgba(111,232,255,.50), rgba(111,232,255,.14) 38%, transparent 70%),
        radial-gradient(circle at 60% 68%, rgba(139,92,246,.46), rgba(139,92,246,.12) 42%, transparent 74%),
        linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.16);
    box-shadow:
        inset 0 1px 14px rgba(255,255,255,.14),
        0 16px 44px rgba(111,232,255,.16),
        0 12px 34px rgba(139,92,246,.12)
}
.orb-center{position:relative;z-index:1;display:grid;gap:2px;text-align:center;padding:10px}
.stage-label{font-size:1rem;font-weight:700;color:#edfbff}
.stage-countdown{font-size:2.05rem;font-weight:700;letter-spacing:.02em}
.breath-meta{width:min(100%,520px)}
.meta-row{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    font-weight:700;color:#e8f4ff
}
.phase-tip{margin:10px 0 0;text-align:center;color:var(--muted);line-height:1.9}
.timeline{
    margin-top:12px;height:10px;border-radius:999px;overflow:hidden;
    border:1px solid rgba(255,255,255,.06);
    background:rgba(255,255,255,.05)
}
.timeline span{
    display:block;height:100%;width:var(--timeline);
    background:linear-gradient(90deg,var(--primary),var(--primary-2));
    border-radius:inherit;transition:width .1s linear
}
.phase-hint-grid{margin-top:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.phase-chip-inhale{background:rgba(111,232,255,.08)}
.phase-chip-exhale{background:rgba(50,213,131,.08)}
.control-row,.toggle-row,.action-grid,.split-grid{display:grid;gap:12px}
.control-row{grid-template-columns:1fr}
.toggle-row{grid-template-columns:repeat(2,minmax(0,1fr))}
.toggle-pill{
    display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;
    padding:12px 14px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.03)
}
.toggle-pill input{accent-color:var(--primary)}
.action-zone,.reasons-zone{display:grid;gap:12px}
.action-grid{grid-template-columns:1fr}
.action-btn{
    padding:14px 16px;border-radius:18px;text-align:right;line-height:1.8;
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02))
}
.action-btn.is-done{
    background:rgba(50,213,131,.14);
    border-color:rgba(50,213,131,.22)
}
.reason-form{display:grid;gap:10px}
.reason-form input{
    width:100%;padding:13px 14px;border-radius:16px;
    border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);
    color:var(--text);outline:none
}
.reason-form input::placeholder{color:#95a8c1}
.result-box{
    padding:16px 18px;border-radius:18px;
    background:rgba(50,213,131,.08);
    border:1px solid rgba(50,213,131,.18)
}
.result-box p{margin:8px 0 0;color:#ddffea;line-height:1.95}
.dock{
    position:sticky;bottom:var(--safe-bottom);z-index:14;
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    margin-top:2px;padding:10px;border-radius:22px;
    background:rgba(7,17,31,.72);backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.08)
}
.dock-btn{padding:14px 16px;font-weight:700}
.dock-btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#04111b;border:none}
.support-grid{display:grid;gap:12px}
.steps{margin:10px 0 0;padding-inline-start:20px;color:var(--muted)}
.steps li{margin-bottom:10px;line-height:1.95}
details{
    border:1px solid var(--line);background:rgba(255,255,255,.03);
    border-radius:18px;padding:14px 16px
}
details + details{margin-top:12px}
summary{cursor:pointer;font-weight:700;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:left;color:var(--primary);font-size:1.2rem}
details[open] summary::after{content:"–"}
.site-footer{padding:0 0 calc(28px + var(--safe-bottom));text-align:center;color:var(--muted);line-height:1.9}
.footer-links{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;align-items:center}
.disclaimer{font-size:.92rem}
.subtle,.chart-note,.empty-note{color:var(--muted)}
.funnel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.funnel-box{display:grid;gap:6px}
.funnel-box strong{font-size:1.44rem}
.funnel-box small{color:var(--muted);line-height:1.8}
.chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.bar-chart{
    display:grid;align-items:end;gap:8px;min-height:210px
}
.bar-chart-30{grid-template-columns:repeat(30,minmax(0,1fr))}
.bar-chart-24{grid-template-columns:repeat(24,minmax(0,1fr))}
.bar-col{display:grid;gap:8px;justify-items:center}
.bar{
    width:min(100%,24px);border-radius:999px 999px 10px 10px;
    background:linear-gradient(180deg,var(--primary),rgba(111,232,255,.38));
    box-shadow:0 10px 24px rgba(111,232,255,.18)
}
.bar-primary{background:linear-gradient(180deg,var(--primary),rgba(111,232,255,.38))}
.bar-success{background:linear-gradient(180deg,var(--success),rgba(50,213,131,.42));box-shadow:0 10px 24px rgba(50,213,131,.16)}
.bar-secondary{background:linear-gradient(180deg,var(--primary-2),rgba(139,92,246,.42));box-shadow:0 10px 24px rgba(139,92,246,.16)}
.bar-value,.bar-label{font-size:.77rem;color:var(--muted)}
.list-stack{display:grid;gap:10px}
.line-item{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03)
}
.split-grid{grid-template-columns:1fr}
[data-phase="inhale"] .orb{filter:drop-shadow(0 0 24px rgba(111,232,255,.28))}
[data-phase="hold"] .orb{filter:drop-shadow(0 0 18px rgba(248,184,78,.22))}
[data-phase="exhale"] .orb{filter:drop-shadow(0 0 24px rgba(50,213,131,.22))}
[data-phase="release"] .orb{filter:drop-shadow(0 0 18px rgba(168,85,247,.16))}
[data-phase="inhale"] .orb.inverse{opacity:.38}
[data-phase="exhale"] .orb.inverse{opacity:.64}
@media (min-width:760px){
    .hero{grid-template-columns:1.25fr .92fr;align-items:center}
    .rescue-top{grid-template-columns:1.3fr .7fr;align-items:stretch}
    .control-row{grid-template-columns:repeat(3,minmax(0,1fr))}
    .action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .support-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .split-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:980px){
    .stats-summary{grid-template-columns:repeat(4,minmax(0,1fr))}
    .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .action-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}