@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root { --paper: #f6f2e9; --ink: #183e48; --muted: #6f8585; --line: #d8ded5; --orange: #eb754d; --orange-soft: #f7c4a7; --mint: #c4ded5; --deep-mint: #83b9ae; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'Manrope', sans-serif; -webkit-font-smoothing: antialiased; }
button { color: inherit; font: inherit; cursor: pointer; }
.app-shell { max-width: 1440px; min-height: 100vh; margin: auto; padding: 31px 6.2vw 26px; display: flex; flex-direction: column; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 45px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); font-size: 17px; font-weight: 800; letter-spacing: -.04em; text-decoration: none; }
.brand-mark { display: flex; gap: 2px; align-items: center; height: 23px; }
.brand-mark i { display: block; width: 4px; border-radius: 8px; background: var(--orange); transform: rotate(32deg); }
.brand-mark i:nth-child(1) { height: 12px; opacity: .55; }.brand-mark i:nth-child(2) { height: 20px; }.brand-mark i:nth-child(3) { height: 14px; opacity: .72; }
.topbar-right { display: flex; align-items: center; gap: 23px; }.status-dot { color: #819290; font: 11px 'DM Mono', monospace; letter-spacing: .03em; text-transform: uppercase; }.status-dot span { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--deep-mint); vertical-align: 1px; box-shadow: 0 0 0 4px #e3eee8; }
.icon-button { width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 50%; background: transparent; display: grid; place-items: center; transition: .2s ease; }.icon-button:hover, .icon-button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }.icon-button svg { width: 17px; fill: currentColor; }
main { flex: 1; display: grid; grid-template-columns: minmax(240px, .77fr) minmax(470px, 1.3fr) minmax(240px, .77fr); gap: clamp(30px, 5vw, 88px); align-items: center; }
.intro { align-self: center; padding-bottom: 32px; }.eyebrow { display: flex; align-items: center; gap: 11px; color: var(--orange); font: 500 10px 'DM Mono', monospace; letter-spacing: .13em; text-transform: uppercase; }.eyebrow-line { width: 27px; height: 1px; background: var(--orange); }.intro h1 { max-width: 390px; margin: 23px 0 24px; font-size: clamp(41px, 4.1vw, 65px); line-height: .99; letter-spacing: -.068em; font-weight: 700; }.intro h1 em { color: var(--orange); font-family: 'Playfair Display', serif; font-weight: 500; letter-spacing: -.04em; }.intro-copy { max-width: 305px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }.intro-note { display: flex; align-items: center; gap: 11px; max-width: 290px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); color: #839391; font-size: 10px; line-height: 1.5; }.note-icon { color: var(--orange); font-size: 17px; }
.practice-card { min-width: 0; padding: 26px 27px 24px; border: 1px solid #dce1d8; border-radius: 4px; background: rgba(255,255,255,.19); box-shadow: 0 20px 60px rgba(34, 67, 65, .045); }.card-topline { display: flex; justify-content: space-between; color: #9aa9a4; font: 10px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }.card-topline strong { color: var(--ink); font-weight: 500; }.duration-label strong { color: var(--orange); }
.breathing-stage { position: relative; width: min(100%, 530px); aspect-ratio: 1; margin: 16px auto 5px; display: grid; place-items: center; }.breath-orb { position: relative; z-index: 2; width: 47%; height: 47%; border-radius: 50%; background: radial-gradient(circle at 34% 27%, #f9d5ba 0%, #ef9a70 48%, #df694b 100%); box-shadow: 0 0 0 1px rgba(235,117,77,.1), 0 0 70px rgba(235,117,77,.17); transform: scale(.9); transition: transform .35s linear, background .5s ease; }.orb-glow { position: absolute; inset: -7%; border-radius: 50%; border: 1px solid rgba(255,255,255,.48); opacity: .55; }.orb-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: white; }.phase-label { margin-bottom: 3px; font: 10px 'DM Mono', monospace; letter-spacing: .15em; text-transform: uppercase; opacity: .85; }.phase-time { font: 700 clamp(40px, 5vw, 62px) 'Manrope', sans-serif; line-height: 1; letter-spacing: -.07em; }.phase-hint { margin-top: 10px; font-size: 9px; opacity: .85; }.orbit { position: absolute; border: 1px solid rgba(131,185,174,.3); border-radius: 50%; }.orbit-one { width: 69%; height: 69%; }.orbit-two { width: 87%; height: 87%; border-color: rgba(216,222,213,.8); }.orbit-one::after, .orbit-two::after { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--deep-mint); box-shadow: 0 0 0 5px rgba(131,185,174,.13); }.orbit-one::after { left: 15%; top: 14%; }.orbit-two::after { right: 9%; bottom: 21%; width: 4px; height: 4px; background: var(--orange); box-shadow: none; }.breathing-stage.is-running .orbit-one { animation: orbitSpin 20s linear infinite; }.breathing-stage.is-running .orbit-two { animation: orbitSpinReverse 32s linear infinite; }.stage-marker { position: absolute; z-index: 3; color: #9aa9a4; font: 9px 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }.marker-top { top: 2%; }.marker-bottom { bottom: 3%; }.stage-marker::before { content: ''; position: absolute; left: 50%; width: 1px; height: 14px; background: var(--line); }.marker-top::before { top: 17px; }.marker-bottom::before { bottom: 17px; }
.card-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 17px; }.cycle-count { display: flex; align-items: center; gap: 8px; color: #8a9c98; font: 10px 'DM Mono', monospace; white-space: nowrap; }.cycle-count strong { color: var(--ink); font-weight: 500; }.cycle-icon { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid #c5d7d0; border-radius: 50%; color: var(--deep-mint); font-size: 14px; }.progress-track { height: 3px; overflow: hidden; background: #e1e5dd; }.progress-track span { display: block; width: 0; height: 100%; background: var(--orange); transition: width .2s linear; }.main-button { display: flex; align-items: center; gap: 9px; padding: 12px 17px; border: 0; border-radius: 3px; background: var(--ink); color: white; font-size: 11px; font-weight: 700; transition: background .2s, transform .2s; }.main-button:hover { background: #28606a; transform: translateY(-1px); }.button-play { font-size: 9px; }
.settings-panel { align-self: center; padding-bottom: 15px; }.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; }.eyebrow.small { display: block; font-size: 9px; color: #94a59f; }.panel-heading h2 { margin: 8px 0 0; font-size: 27px; letter-spacing: -.06em; }.sliders-icon { color: var(--orange); font-size: 29px; line-height: 1; transform: rotate(90deg); }.panel-copy { max-width: 230px; margin: 15px 0 25px; color: var(--muted); font-size: 11px; line-height: 1.6; }.setting-row { display: grid; grid-template-columns: 1fr 132px; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }.setting-info { display: flex; align-items: center; gap: 11px; font-size: 12px; font-weight: 700; }.setting-info small { display: block; margin-top: 3px; color: #9aaba5; font-size: 9px; font-weight: 400; }.setting-symbol { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; font-size: 17px; font-weight: 400; }.inhale-symbol { background: #f9d7c3; color: var(--orange); }.exhale-symbol { background: #d4e6df; color: #679d91; }.stepper { display: flex; align-items: center; gap: 8px; font: 500 12px 'DM Mono', monospace; }.stepper button { width: 23px; height: 23px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 17px; line-height: 18px; transition: .2s; }.stepper button:hover { border-color: var(--orange); color: var(--orange); }.stepper output { min-width: 2ch; text-align: center; }.seconds { margin-left: -5px; color: #9aaba5; font-size: 9px; }.setting-divider { height: 28px; border-bottom: 1px solid var(--line); }.duration-heading { display: flex; justify-content: space-between; margin-top: 21px; font-size: 11px; font-weight: 700; }.duration-heading strong { color: var(--orange); font: 500 11px 'DM Mono', monospace; }.range-input { width: 100%; height: 3px; margin: 19px 0 9px; appearance: none; border-radius: 2px; outline: none; background: linear-gradient(to right, var(--orange) 0%, var(--orange) 14%, #dae1da 14%, #dae1da 100%); }.range-input::-webkit-slider-thumb { width: 13px; height: 13px; appearance: none; border: 3px solid var(--paper); border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 1px var(--orange); }.range-labels { display: flex; justify-content: space-between; color: #9aaba5; font: 9px 'DM Mono', monospace; }.preset-label { margin: 26px 0 10px; color: #94a59f; font: 9px 'DM Mono', monospace; letter-spacing: .09em; text-transform: uppercase; }.presets { display: flex; gap: 6px; }.preset { padding: 7px 10px; border: 1px solid var(--line); border-radius: 2px; background: transparent; color: #809390; font: 10px 'DM Mono', monospace; transition: .2s; }.preset:hover, .preset.active { border-color: var(--orange); background: #fbe5d7; color: var(--orange); }.panel-tip { display: flex; gap: 8px; margin-top: 25px; color: #9aaba5; font-size: 9px; line-height: 1.55; }.panel-tip span { display: grid; flex: 0 0 auto; place-items: center; width: 14px; height: 14px; border: 1px solid #b8c8c2; border-radius: 50%; font: 10px serif; }
.footer { display: flex; justify-content: space-between; margin-top: 31px; color: #9aaba5; font: 9px 'DM Mono', monospace; letter-spacing: .1em; text-transform: uppercase; }.footer b { margin: 0 7px; color: var(--orange); font-weight: 400; }
@keyframes orbitSpin { to { transform: rotate(360deg); } } @keyframes orbitSpinReverse { to { transform: rotate(-360deg); } } @keyframes pulse { 50% { opacity: .86; } }
@media (max-width: 1050px) { .app-shell { padding-inline: 4vw; } main { grid-template-columns: minmax(200px, .7fr) minmax(400px, 1.2fr); gap: 35px; }.settings-panel { grid-column: 1 / -1; width: min(100%, 580px); justify-self: center; }.panel-copy { max-width: 400px; }.settings-panel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; }.panel-heading, .panel-copy { grid-column: 1 / -1; }.panel-tip { grid-column: 1 / -1; } }
@media (max-width: 700px) { .app-shell { padding: 22px 20px 20px; }.topbar { padding-bottom: 40px; }.status-dot { display: none; } main { display: flex; flex-direction: column; align-items: stretch; gap: 30px; }.intro { padding: 0; }.intro h1 { margin: 16px 0 16px; font-size: 46px; }.intro-copy { max-width: 420px; }.intro-note { display: none; }.practice-card { padding: 19px 15px 16px; }.breathing-stage { margin: 20px auto 13px; }.card-footer { grid-template-columns: 1fr auto; gap: 12px; }.progress-track { grid-column: 1 / -1; grid-row: 1; }.cycle-count { grid-row: 2; }.main-button { grid-row: 2; }.settings-panel { display: block; width: 100%; padding-bottom: 0; }.footer { margin-top: 38px; } }
@media (max-width: 380px) { .intro h1 { font-size: 39px; }.duration-label { display: none; }.breathing-stage { width: 94%; }.cycle-count { font-size: 9px; }.main-button { padding-inline: 13px; } }