.pm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 1rem; align-items: start; }
.pm-main { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; padding: 1.6rem 1rem; text-align: center; }
.pm-phases { width: min(100%, 460px); }
.pm-phases button { flex: 1; min-width: 0; min-height: 38px; padding: .2rem .4rem; border: 0; border-radius: 8px; background: transparent; color: var(--text-soft); font: 600 .9rem/1.15 var(--font-sans); cursor: pointer; }
.pm-phases button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.pm-ring { position: relative; width: min(78vw, 300px); aspect-ratio: 1; }
.pm-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pm-track { fill: none; stroke: var(--surface-sunken); stroke-width: 7; }
.pm-prog { fill: none; stroke: var(--primary); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 339.29; transition: stroke-dashoffset .3s linear; }
.pm-time { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pm-time output { font: 700 clamp(3rem, 2.2rem + 4vw, 4.6rem)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pm-time span { margin-top: .3rem; color: var(--text-soft); font-weight: 600; }
.pm-task { width: 100%; max-width: 420px; text-align: center; }
.pm-main { min-width: 0; }
.pm-ctrls { display: flex; align-items: center; gap: 1rem; }
.pm-start { min-width: 10rem; }
.pm-color { height: 44px; padding: 4px; cursor: pointer; }
.pm-themes { display: flex; flex-wrap: wrap; gap: .4rem; }
.pm-theme { padding: .45rem .8rem; border: 2px solid; border-radius: 99px; font: 600 .82rem var(--font-sans); cursor: pointer; }
.pm-focus { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; padding: 2rem; background: var(--bg); color: var(--fg); text-align: center; }
.pm-focus[hidden] { display: none; }
.pm-focusing body { overflow: hidden; }
.pm-f-label { margin: 0; font-size: clamp(1rem, .8rem + 1vw, 1.6rem); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.pm-f-time { font: 700 clamp(5rem, 2rem + 16vw, 16rem)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.pm-f-task { margin: 0; max-width: 40ch; font-size: clamp(1.1rem, .9rem + 1vw, 1.8rem); opacity: .9; }
.pm-f-bar { width: min(80vw, 640px); height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--fg) 15%, transparent); overflow: hidden; }
.pm-f-bar i { display: block; height: 100%; background: var(--ac); transition: width .3s linear; }
.pm-f-ctrls { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1rem; }
.pm-f-btn { padding: .7rem 1.3rem; border: 1px solid color-mix(in srgb, var(--fg) 30%, transparent); border-radius: 99px; background: transparent; color: var(--fg); font: 600 1rem var(--font-sans); cursor: pointer; }
.pm-f-btn:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); }
.pm-f-btn:first-child { background: var(--ac); border-color: var(--ac); color: var(--bg); }
@media (max-width: 760px) { .pm { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 380px) { .pm-phases button { font-size: .8rem; } .pm-ctrls { gap: .5rem; } .pm-start { min-width: 8rem; } }
@media (prefers-reduced-motion: reduce) { .pm-prog, .pm-f-bar i { transition: none; } }