@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&family=Inter:wght@400;500;600&display=swap');

:root{--ink:#eef0e7;--muted:#8e9b92;--gold:#c6a96a;--gold2:#806638;--green:#627e68;--panel:#0d1714;--line:rgba(198,169,106,.23);--danger:#c87564;--progress:1}
*{box-sizing:border-box}html{min-height:100%;background:#050a09}body{margin:0;min-height:100vh;color:var(--ink);font-family:Inter,system-ui,sans-serif;background:radial-gradient(circle at 50% -10%,#1b3029 0,#0b1412 36%,#050908 78%);overflow-x:hidden}.grain{position:fixed;inset:0;pointer-events:none;opacity:.23;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");mix-blend-mode:soft-light}.shell{width:min(100% - 32px,760px);margin:auto;padding:38px 0 70px}.masthead{display:flex;align-items:center;gap:16px;margin:0 8px 26px}.crest{width:54px;height:60px;display:grid;place-items:center;color:var(--gold);font:600 17px Cinzel;border:1px solid var(--gold2);clip-path:polygon(50% 0,93% 17%,84% 79%,50% 100%,16% 79%,7% 17%);background:linear-gradient(145deg,rgba(198,169,106,.13),transparent)}.masthead h1,.settings h2{font:500 clamp(27px,5vw,39px)/1 Cinzel,serif;letter-spacing:.04em;margin:3px 0 0}.eyebrow{text-transform:uppercase;letter-spacing:.21em;color:var(--gold);font-size:10px;margin:0}.icon-button{margin-left:auto;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:rgba(14,25,22,.7);color:var(--gold);font-size:18px;cursor:pointer}.timer-card{position:relative;padding:30px clamp(20px,6vw,52px) 24px;border:1px solid var(--line);background:linear-gradient(155deg,rgba(18,33,28,.95),rgba(7,14,12,.96));box-shadow:0 28px 80px #0008,inset 0 1px rgba(255,255,255,.03)}.corner{position:absolute;width:22px;height:22px;border-color:var(--gold2)}.top-left{left:7px;top:7px;border-left:1px solid;border-top:1px solid}.top-right{right:7px;top:7px;border-right:1px solid;border-top:1px solid}.bottom-left{left:7px;bottom:7px;border-left:1px solid;border-bottom:1px solid}.bottom-right{right:7px;bottom:7px;border-right:1px solid;border-bottom:1px solid}.phase-row{display:flex;align-items:center;text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--gold)}.phase-mark{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold);margin-right:10px}.round-label{margin-left:auto;color:var(--muted);letter-spacing:.08em}.dial{width:min(64vw,320px);aspect-ratio:1;margin:18px auto 8px;position:relative;display:grid;place-items:center}.dial svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.dial-track{fill:none;stroke:#2a3833;stroke-width:2}.dial-progress{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-dasharray:678.58;stroke-dashoffset:calc(678.58 * (1 - var(--progress)));filter:drop-shadow(0 0 5px #c6a96a88);transition:stroke-dashoffset .15s linear}.dial-inner{fill:rgba(5,11,9,.38);stroke:rgba(198,169,106,.12);stroke-width:1}.time-wrap{z-index:1;text-align:center}.time{font:500 clamp(54px,13vw,88px)/1 Cinzel,serif;letter-spacing:-.025em;font-variant-numeric:tabular-nums;text-shadow:0 6px 28px #000}.time-caption{display:block;margin-top:10px;color:var(--muted);font-size:11px;letter-spacing:.13em;text-transform:uppercase}.next-card{display:flex;align-items:center;gap:14px;max-width:430px;margin:0 auto;padding:13px 17px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px}.next-card span{color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.next-card strong{margin-left:auto;font-weight:500;color:#d8d8cc}.controls{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:24px}.play-button{width:76px;height:76px;border-radius:50%;cursor:pointer;border:1px solid var(--gold);color:#142019;background:radial-gradient(circle at 35% 28%,#ead393,#b79858 60%,#7e6335);box-shadow:0 0 0 7px #0c1613,0 0 0 8px var(--line),0 14px 35px #0008;font-size:24px;padding-left:5px}.play-button:hover{filter:brightness(1.08);transform:translateY(-1px)}.minor-button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#0b1512;color:var(--gold);font-size:22px;cursor:pointer}.minor-button:disabled{opacity:.3;cursor:default}.key-hint{text-align:center;color:#59665f;font-size:10px;margin:18px 0 0}.key-hint kbd{font:inherit;border:1px solid #34413c;border-radius:3px;padding:2px 5px}.timeline{margin-top:28px;padding:0 8px}.timeline-head{display:flex;justify-content:space-between;color:var(--muted);text-transform:uppercase;letter-spacing:.15em;font-size:10px;margin-bottom:13px}.phase-list{display:flex;gap:5px}.phase-block{height:5px;background:#28342f;flex:var(--weight);position:relative}.phase-block.active,.phase-block.done{background:var(--gold)}.phase-block.active{box-shadow:0 0 9px #c6a96a99}.phase-block::after{content:attr(data-label);position:absolute;top:12px;left:0;white-space:nowrap;color:#657269;font-size:9px;display:none}.phase-block.active::after{display:block}.settings{position:fixed;z-index:20;top:0;right:0;width:min(100%,470px);height:100%;overflow:auto;padding:28px 30px 40px;background:#0a1210;border-left:1px solid var(--line);box-shadow:-30px 0 80px #000a;transform:translateX(105%);transition:transform .28s ease}.settings.open{transform:none}.settings-head{display:flex;align-items:center;margin-bottom:25px}.settings-head .icon-button{font-size:28px;font-weight:200}.settings h2{font-size:30px}.scrim{position:fixed;z-index:15;inset:0;background:#0009;backdrop-filter:blur(3px)}fieldset{border:0;border-top:1px solid var(--line);padding:20px 0 7px;margin:0}legend{padding:0 14px 0 0;color:var(--gold);font:500 12px Cinzel;text-transform:uppercase;letter-spacing:.12em}label{display:flex;flex-direction:column;gap:7px;color:#aeb7af;font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 17px}input,textarea{width:100%;border:1px solid #2d3a35;border-radius:3px;background:#0e1a16;color:var(--ink);padding:11px 12px;font:500 14px Inter;text-transform:none;letter-spacing:0;outline:none}input:focus,textarea:focus{border-color:var(--gold2)}input[type=range]{padding:5px 0;accent-color:var(--gold)}small{color:#66736c;text-transform:none;letter-spacing:0}.split{display:grid;grid-template-columns:1fr 1fr;gap:14px}.toggle{flex-direction:row;align-items:center}.toggle input{width:auto}.settings output{color:var(--gold);font-size:11px}.settings-actions{display:flex;justify-content:space-between;align-items:center;position:sticky;bottom:-40px;background:#0a1210;padding:16px 0 8px}.save-button,.text-button{border:0;cursor:pointer}.save-button{padding:13px 19px;background:var(--gold);color:#111914;font:600 11px Inter;text-transform:uppercase;letter-spacing:.11em}.text-button{background:none;color:#758179;text-decoration:underline}.toast{position:fixed;z-index:30;bottom:24px;left:50%;transform:translate(-50%,30px);opacity:0;background:#c6a96a;color:#111914;padding:10px 16px;font-size:12px;transition:.25s;pointer-events:none}.toast.show{transform:translate(-50%,0);opacity:1}body.workout .phase-mark{background:#89a78f;box-shadow:0 0 12px #89a78f}body.workout .dial-progress{stroke:#9db29d}body.warning .time{color:#f0cc78}body.complete .dial-progress{stroke:#9db29d}
.audio-desk{margin:-2px 0 18px;padding:13px;border:1px solid #293832;background:#0c1713}.audio-desk p{margin:0 0 11px;color:var(--gold);font:500 11px Cinzel;text-transform:uppercase;letter-spacing:.1em}.audio-desk p small{display:block;margin-top:4px;font:10px Inter;text-transform:none;letter-spacing:0}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.preview-grid button{border:1px solid #34463e;background:#111f1a;color:#bec8bf;padding:9px 7px;cursor:pointer;font:600 10px Inter;text-transform:uppercase;letter-spacing:.06em}.preview-grid button:hover{border-color:var(--gold2);color:var(--gold)}.preview-grid .wide{background:#18271f;color:var(--gold)}
.masthead-actions{margin-left:auto;display:flex;gap:9px}.masthead-actions .icon-button{margin-left:0}.music-toggle{position:relative}.music-toggle[aria-pressed=true]{color:#69766e;border-color:#2c3934}.music-toggle[aria-pressed=true]::after{content:"";position:absolute;width:25px;height:1px;background:#9b7861;transform:rotate(-45deg)}
.workspace{width:min(100% - 32px,980px);margin:auto;display:grid;grid-template-columns:170px minmax(0,760px);gap:24px;align-items:start}.workspace .shell{width:100%;margin:0}.protocol-dock{position:sticky;top:28px;padding-top:42px}.protocol-dock>.eyebrow{margin:0 0 12px 3px}.protocol-tiles{display:grid;gap:9px}.protocol-tile{position:relative;width:100%;min-height:72px;padding:13px 30px 13px 14px;text-align:left;border:1px solid #293832;background:linear-gradient(145deg,#0d1915,#09110f);color:#aeb7af;cursor:pointer;box-shadow:0 9px 24px #0005}.protocol-tile:hover{border-color:#6d6247}.protocol-tile.active{border-color:var(--gold2);color:var(--gold);box-shadow:inset 3px 0 var(--gold),0 12px 28px #0008}.protocol-tile strong{display:block;font:500 12px/1.25 Cinzel;overflow-wrap:anywhere}.protocol-tile small{display:block;margin-top:8px;color:var(--muted);font-size:9px;letter-spacing:.04em}.delete-protocol{position:absolute;right:6px;top:5px;width:22px;height:22px;border:0;background:none;color:#59665f;cursor:pointer;font-size:15px}.delete-protocol:hover{color:#b28d7d}.add-protocol{display:grid;place-items:center;width:44px;height:44px;margin:13px auto 0;border:1px solid var(--gold2);border-radius:50%;background:#0c1713;color:var(--gold);font:300 26px/1 Inter;cursor:pointer;box-shadow:0 8px 24px #0007}.add-protocol:hover{background:#16251f}
@media(max-width:820px){.workspace{width:min(100% - 20px,760px);display:flex;flex-direction:column;gap:0}.protocol-dock{position:static;width:100%;padding:18px 0 0;order:2}.protocol-dock>.eyebrow{margin-left:0}.protocol-tiles{display:flex;overflow-x:auto;padding-bottom:8px}.protocol-tile{flex:0 0 150px}.add-protocol{display:inline-grid;margin:5px 0 0}.workspace .shell{order:1}}
@media(max-width:560px){.shell{padding-top:22px}.masthead{margin-bottom:17px}.crest{width:45px;height:50px}.timer-card{padding-top:24px}.settings{padding:24px 20px}.split{gap:9px}.key-hint{display:none}.timeline{margin-top:20px}.masthead-actions{gap:5px}.masthead-actions .icon-button{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.protocol-tile{min-height:0;padding:13px 14px}.protocol-tile strong{display:flex;align-items:baseline;gap:8px;font:500 19px/1 Cinzel;letter-spacing:.02em;overflow-wrap:normal}.protocol-tile strong em{color:#706a58;font:400 13px Cinzel}.protocol-tile i{font:500 .62em Inter;font-style:normal;color:var(--muted);margin-left:2px}.protocol-tile small{display:flex;align-items:baseline;justify-content:space-between;margin-top:12px;padding-top:9px;border-top:1px solid #28362f;color:#78857d;font:600 9px/1 Inter;text-transform:uppercase;letter-spacing:.14em}.protocol-tile small b{color:#b8b5a4;font:500 14px/1 Cinzel;letter-spacing:0}.protocol-tile.active small b{color:var(--gold)}.protocol-tile .delete-protocol{right:4px;top:3px}.protocol-tile:has(.delete-protocol) strong{padding-right:15px}