:root { --navy:#062d4f; --deep:#03213b; --blue:#0b739f; --cyan:#08a5b5; --orange:#f26b3a; --cream:#f6f4ee; --ink:#10283d; --muted:#687987; --line:#dfe6e9; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"Segoe UI",Arial,sans-serif; font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--blue); text-decoration:none; }
button,input { font:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible { outline:3px solid var(--cyan); outline-offset:4px; }
button { cursor:pointer; }
img { display:block; max-width:100%; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { color:var(--navy); font-weight:700; }
.page-container { width:min(1180px,calc(100% - 48px)); margin:0 auto; }
.site-header { border-bottom:1px solid rgba(6,45,79,.08); }
.nav-wrap { display:flex; min-height:110px; align-items:center; justify-content:space-between; gap:24px; }
.brand img { width:190px; height:76px; object-fit:contain; object-position:left center; }
.nav-wrap nav { display:flex; align-items:center; gap:30px; font-size:13px; font-weight:650; }
.back-link span { margin-right:8px; }
.nav-current { padding:9px 16px; border:1px solid #d5e1e4; border-radius:8px; color:var(--blue); background:#eaf2f2; }
.page-intro { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:56px 0 38px; }
.eyebrow { display:block; color:var(--blue); font-size:10px; font-weight:800; letter-spacing:2px; }
.page-intro h1 { margin:16px 0 18px; font-size:clamp(40px,4.5vw,60px); line-height:1.04; letter-spacing:-2px; }
.page-intro h1 em { color:var(--orange); font-family:Georgia,serif; font-weight:400; }
.page-intro p { max-width:520px; margin:0; color:var(--muted); font-size:15px; line-height:1.8; }
.intro-note { display:flex; align-items:center; gap:18px; padding:22px 26px; border-left:2px solid #cbdfe3; }
.intro-note strong,.intro-note div>span { display:block; }
.intro-note strong { color:var(--navy); font-size:17px; }
.intro-note div>span { color:var(--muted); font-size:12px; margin-top:5px; }
.note-mark { color:var(--blue); font-family:Georgia,serif; font-size:60px; line-height:1; }
.workspace { padding-bottom:54px; }
.session-card { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:white; box-shadow:0 16px 40px rgba(4,39,68,.045); }
.card-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:26px 30px 22px; border-bottom:1px solid var(--line); }
.card-heading h2 { margin:7px 0 0; font-size:25px; letter-spacing:-.7px; }
.status-badge { flex-shrink:0; padding:6px 12px; color:var(--blue); background:#e9f4f6; border-radius:30px; font-size:11px; font-weight:700; }
.status-badge:before { content:""; display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:var(--cyan); vertical-align:1px; }
.session-layout { display:grid; grid-template-columns:1.1fr 1fr; padding:24px; gap:24px; }
.table-panel { min-width:0; padding:0 6px; }
.total-time { color:var(--muted); font-size:12px; font-weight:650; margin:0 0 14px; }
.total-time:empty { display:none; }
.empty-state { min-height:302px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:26px; text-align:center; border:1px dashed #d4e0e3; border-radius:12px; background:#fafbf9; }
.empty-icon { display:grid; place-items:center; width:54px; height:54px; margin-bottom:20px; border-radius:16px; background:#e4f1f3; color:var(--blue); font-size:40px; line-height:1; }
.empty-state h3 { margin:0 0 10px; font-size:20px; }
.empty-state p { color:var(--muted); max-width:320px; font-size:13px; margin-bottom:18px; }
.empty-step { color:var(--blue); font-size:11px; font-weight:650; }
#generated_table { max-height:360px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#c8dade transparent; }
.round-row { display:grid; grid-template-columns:38px 1fr 1fr; align-items:center; gap:10px; margin:0; padding:10px 8px; border-bottom:1px solid #edf1f2; }
.round-row:last-child { border-bottom:0; }
.round-number { display:grid; place-items:center; height:30px; width:30px; color:#6d8492; background:#f1f5f5; border-radius:8px; font-size:12px; font-weight:700; }
.interval { display:flex; flex-direction:column; padding:7px 10px; border-radius:8px; }
.interval small { color:var(--muted); font-size:10px; letter-spacing:.3px; }
.interval strong { color:var(--navy); font-size:15px; font-variant-numeric:tabular-nums; }
.interval.active-interval { background:#e4f3f5; box-shadow:inset 3px 0 0 var(--cyan); }
.round-number.active-interval { color:white; background:var(--blue); }
.interval-too-short { padding:12px; background:#fff2ec; color:#9c431f; border-radius:8px; }
.timer-panel { display:flex; flex-direction:column; align-items:center; padding:24px; border-radius:12px; color:white; background:radial-gradient(ellipse at 100% 0,rgba(8,165,181,.25),transparent 65%),var(--navy); }
.timer-eyebrow { color:#94c2d1; font-size:9px; letter-spacing:2px; font-weight:700; }
.timer,.timer-idle { width:100%; text-align:center; margin-top:16px; }
.timer-dial { display:flex; width:196px; height:196px; margin:0 auto; align-items:center; justify-content:center; flex-direction:column; border:1px solid rgba(144,209,224,.25); box-shadow:0 0 0 9px rgba(133,213,223,.035); border-radius:50%; }
.timer-dial>span,#timer_title { color:#a0d4dc; font-size:9px; letter-spacing:1.6px; text-transform:uppercase; margin:0; }
.timer-idle strong,.timer-remaining { color:white; margin:6px 0; font-size:48px; font-weight:650; letter-spacing:-2px; line-height:1.2; font-variant-numeric:tabular-nums; }
.timer-dial small { color:#96b7c9; font-size:10px; }
.timer-idle>p,.timer-caption { color:#9fbdcd; font-size:11px; margin:22px 0 16px; }
.timer[data-phase="HOLD"] .timer-dial { border-color:var(--orange); }
.timer[data-phase="HOLD"] #timer_title { color:#ffb393; }
.timer[data-phase="BREATHE"] .timer-dial { border-color:#65c9d3; }
.timer-actions { display:flex; gap:10px; width:100%; margin-top:auto; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:44px; padding:11px 18px; border:1px solid transparent; border-radius:8px; font-size:12px; font-weight:700; box-shadow:none; text-shadow:none; transition:background .18s,transform .18s; white-space:normal; }
.btn:hover:not(:disabled) { transform:translateY(-1px); }
.btn-primary { background:var(--orange); color:white; }
.btn-primary:hover,.btn-primary:focus { background:#da5a2c; border-color:transparent; }
.timer-actions .btn-primary { flex:1; }
.btn-outline-light { color:white; background:transparent; border-color:#59798f; }
.btn-outline-light:hover,.btn-outline-light:focus { color:white; background:#244b65; }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.session-toolbar { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 30px; border-top:1px solid var(--line); background:#fcfcfa; }
.session-toolbar strong,.session-toolbar>div>span { display:block; }
.session-toolbar strong { font-size:12px; color:var(--navy); }
.session-toolbar>div>span { margin-top:3px; color:var(--muted); font-size:11px; }
.table-actions { display:flex; gap:10px; }
.btn-co2 { color:white; background:var(--navy); }
.btn-co2:hover,.btn-co2:focus { color:white; background:#12496d; }
.btn-o2 { color:var(--blue); background:#e9f5f6; border-color:#c9e2e7; }
.btn-o2:hover,.btn-o2:focus { color:var(--navy); background:#dbeef1; }
.settings-section { margin-top:44px; }
.settings-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.settings-heading h2 { font-size:29px; letter-spacing:-.7px; margin:8px 0; }
.settings-heading p { color:var(--muted); font-size:13px; margin:0; }
.reset-button { background:transparent; border:0; border-bottom:1px solid #cad6da; color:#617986; padding:7px 0; font-size:12px; flex-shrink:0; }
.reset-button:hover { color:var(--blue); border-color:var(--blue); }
.reset-button span { font-size:17px; margin-right:6px; }
.common-settings { display:grid; grid-template-columns:1fr 1fr 1.2fr; align-items:center; gap:30px; padding:25px 28px; border:1px solid var(--line); border-radius:12px; background:white; }
.field { min-width:0; }
.field label { display:block; margin-bottom:9px; font-size:12px; font-weight:650; color:#405d70; }
.form-control { width:100%; height:46px; float:none; border:1px solid #d9e2e5; border-radius:7px; padding:10px 12px; color:var(--navy); background:#fbfcfc; font-size:15px; font-weight:600; box-shadow:none; }
.form-control:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(11,115,159,.1); }
.input-group { display:flex; width:100%; }
.input-group .form-control { min-width:0; flex:1; width:0; border-radius:7px 0 0 7px; }
.input-group-addon { display:flex; align-items:center; justify-content:center; min-width:74px; width:auto; padding:8px 12px; border:1px solid #d9e2e5; border-left:0; border-radius:0 7px 7px 0; color:#6d8695; background:#f0f5f5; font-size:11px; }
.countdown-setting { display:flex; align-items:center; gap:12px; margin:18px 0 0; cursor:pointer; }
.countdown-setting input { flex-shrink:0; width:18px; height:18px; margin:0; accent-color:var(--blue); }
.countdown-setting strong,.countdown-setting small { display:block; }
.countdown-setting strong { color:var(--navy); font-size:12px; }
.countdown-setting small { color:var(--muted); font-size:11px; font-weight:400; margin-top:4px; }
.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:22px; }
.protocol-card { min-width:0; padding:28px; border:1px solid var(--line); border-top:3px solid var(--blue); border-radius:12px; background:white; }
.o2-card { border-top-color:var(--orange); }
.protocol-heading { display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.protocol-symbol { display:grid; flex-shrink:0; place-items:center; width:51px; height:51px; border-radius:12px; color:var(--blue); background:#e8f3f5; font-size:20px; font-weight:750; }
.o2-card .protocol-symbol { color:#c2532b; background:#fff0e9; }
.protocol-heading h3 { margin:0 0 4px; font-size:19px; }
.protocol-heading p { margin:0; color:var(--muted); font-size:11px; }
.protocol-number { margin-left:auto; align-self:flex-start; color:#a8bac3; font-size:10px; font-weight:700; }
.protocol-card form { display:grid; gap:18px; }
.protocol-card .field { display:grid; grid-template-columns:1.15fr 1fr; gap:18px; align-items:center; }
.protocol-card .field label { margin:0; font-size:12px; }
.protocol-submit { margin-top:5px; width:100%; color:var(--navy); background:#f1f6f6; border-color:#e0e9eb; justify-content:space-between; }
.protocol-submit:hover { background:#e4f0f2; }
.o2-card .protocol-submit { color:#a95131; background:#fff5ef; border-color:#f5e3d9; }
.input-note { color:#81909b; font-size:11px; margin:15px 0 0; }
.site-footer { padding:30px 0; color:#a4bdcc; background:var(--deep); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.footer-inner strong { color:#d7e7ef; font-size:13px; }
.footer-inner p { font-size:11px; margin:5px 0 0; line-height:1.9; }
.footer-inner>a { font-size:11px; }
.footer-inner a:hover { color:white; }
.footer-heart { color:var(--orange); }
.guide-section { margin-top:48px; }
.guide-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; }
.guide-heading h2 { font-size:29px; letter-spacing:-.7px; margin:8px 0; }
.guide-heading p { color:var(--muted); font-size:13px; margin:0; }
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.step-card { background:white; border:1px solid var(--line); border-radius:12px; padding:20px; display:flex; flex-direction:column; }
.step-num { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:7px; background:#eaf3f5; color:var(--blue); font-weight:750; font-size:12px; margin-bottom:12px; }
.step-card h4 { margin:0 0 6px; font-size:14px; color:var(--navy); font-weight:700; }
.step-card p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.table-explain-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
.explain-card { background:white; border:1px solid var(--line); border-top:3px solid var(--blue); border-radius:12px; padding:24px; }
.explain-card.o2-explain { border-top-color:var(--orange); }
.explain-badge { display:inline-block; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:700; margin-bottom:12px; }
.co2-explain .explain-badge { background:#e8f3f5; color:var(--blue); }
.o2-explain .explain-badge { background:#fff0e9; color:var(--orange); }
.explain-card h3 { font-size:18px; margin:0 0 8px; color:var(--navy); }
.explain-card p { font-size:12px; color:var(--muted); line-height:1.6; margin-bottom:14px; }
.explain-list { list-style:none; padding:0; margin:0; font-size:12px; display:grid; gap:8px; }
.explain-list li { display:flex; align-items:baseline; gap:8px; color:var(--ink); line-height:1.5; }
.explain-list li strong { color:var(--navy); min-width:85px; flex-shrink:0; }
.safety-card { background:#fffbf8; border:1px solid #fedcd0; border-left:4px solid var(--orange); border-radius:12px; padding:22px 24px; }
.safety-header { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.safety-icon { font-size:18px; line-height:1; }
.safety-header h3 { margin:0; font-size:16px; color:#a24520; }
.safety-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; }
.safety-item { display:flex; align-items:flex-start; gap:10px; font-size:12px; color:#5c4338; line-height:1.6; }
.safety-bullet { font-weight:800; color:var(--orange); flex-shrink:0; }
@media(max-width:900px) {
 .page-intro { gap:20px; }.intro-note { padding:18px; }.intro-note strong { font-size:14px; }
 .common-settings { gap:20px; grid-template-columns:1fr 1fr; }.countdown-setting { grid-column:1/-1; margin:0; }
 .protocol-card { padding:22px; }.protocol-card .field { display:block; }.protocol-card .field label { margin-bottom:8px; }
 .session-toolbar { align-items:flex-start; flex-direction:column; gap:14px; }.table-actions { width:100%; }.table-actions .btn { flex:1; }
 .steps-grid { grid-template-columns:1fr 1fr; }
 .safety-grid { grid-template-columns:1fr; gap:12px; }
}
@media(max-width:620px) {
 .page-container { width:calc(100% - 28px); }.nav-wrap { min-height:88px; gap:12px; }.brand img { width:148px; height:60px; }.nav-current { display:none; }.nav-wrap nav { font-size:11px; }.back-link span { margin-right:3px; }
 .page-intro { padding:32px 0 28px; }.page-intro h1 { font-size:43px; letter-spacing:-1.8px; }.page-intro p { font-size:13px; }.intro-note { display:none; }
 .card-heading { padding:20px 18px; gap:8px; }.card-heading h2 { font-size:21px; }.eyebrow { font-size:9px; letter-spacing:1.5px; }.status-badge { padding:5px 9px; font-size:10px; }
 .session-layout { grid-template-columns:1fr; padding:16px; gap:18px; }.table-panel { padding:0; }.empty-state { min-height:215px; padding:22px 18px; }.empty-icon { width:44px; height:44px; margin-bottom:14px; font-size:32px; }.empty-state h3 { font-size:18px; }.empty-state p { font-size:12px; }
 .timer-panel { padding:22px; }.timer-dial { width:180px; height:180px; }.session-toolbar { padding:18px; }.btn { padding:11px 13px; font-size:11px; }
 .settings-section { margin-top:32px; }.settings-heading { align-items:flex-start; flex-wrap:wrap; gap:10px; }.settings-heading h2 { font-size:25px; }.settings-heading p { font-size:12px; }
 .common-settings { padding:20px; gap:20px 15px; }.common-settings .field label { font-size:11px; }.common-settings .input-group-addon { min-width:46px; padding:8px; }.form-control { font-size:14px; }
 .settings-grid { grid-template-columns:1fr; gap:18px; }.protocol-card .field { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.protocol-card .field label { margin:0; font-size:11px; }.protocol-heading { gap:12px; }.protocol-heading p { font-size:10px; }.input-group-addon { padding:8px; min-width:65px; }
 .guide-section { margin-top:32px; }.guide-heading h2 { font-size:25px; }
 .steps-grid { grid-template-columns:1fr; gap:12px; }
 .table-explain-grid { grid-template-columns:1fr; gap:16px; }
 .explain-card { padding:18px; }
 .safety-card { padding:18px; }
 .footer-inner { align-items:flex-start; flex-direction:column; gap:15px; }.workspace { padding-bottom:35px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }