.pomo-root{--pipi-edge:#f5f1e4;--rarity-common:#94a3b8;--rarity-uncommon:#22c55e;--rarity-rare:#3b82f6;--rarity-epic:#8b5cf6;--rarity-legendary:#f59e0b;max-width:var(--shell-max);margin:0 auto}.pomo-main{padding:var(--shell-pad)}.pomo-hero{text-align:center;margin-bottom:clamp(16px,2vw,24px)}.pomo-brand{border-radius:var(--radius-lg);background:color-mix(in oklab, var(--brand-focus-primary) 10%, var(--bg-card));border:1px solid color-mix(in oklab, var(--brand-focus-primary) 32%, transparent);flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;max-width:100%;margin-bottom:14px;padding:8px 16px 8px 8px;display:inline-flex}.pomo-brand-mark{object-fit:cover;width:44px;height:44px;box-shadow:0 2px 8px var(--brand-focus-glow);border-radius:22%}.pomo-brand-text{text-align:left;flex-direction:column;min-width:0;line-height:1.2;display:flex}.pomo-brand-name{font-family:var(--font-display);color:var(--text-primary);font-size:15px;font-weight:700}.pomo-brand-tag{font-family:var(--font-code);letter-spacing:.04em;color:var(--text-muted);font-size:10px}.pomo-web-badge{font-family:var(--font-code);letter-spacing:.08em;text-transform:uppercase;color:var(--brand-focus-accent);border-radius:var(--radius-pill);background:color-mix(in oklab, var(--brand-focus-accent) 14%, transparent);white-space:nowrap;padding:3px 8px;font-size:10px}.pomo-h1{font-family:var(--font-display);margin-top:6px;font-size:clamp(26px,4.2vw,46px);font-weight:700;line-height:1.2}.pomo-lede{font-size:calc(15px * var(--type-scale,1));color:var(--text-secondary);max-width:var(--stage-max);margin-top:10px;margin-left:auto;margin-right:auto;line-height:1.6}.pomo-no-break{white-space:nowrap}.pomo-stage{max-width:var(--stage-max);border-color:color-mix(in oklab, var(--brand-focus-primary) 24%, var(--border-default));background-color:color-mix(in oklab, var(--bg-card) 56%, transparent);background-image:radial-gradient(120% 90% at 50% -12%, color-mix(in oklab, var(--brand-focus-primary) 18%, transparent), transparent 55%), radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text-primary) 6%, transparent) 1px, transparent 0);-webkit-backdrop-filter:blur(14px);box-shadow:0 24px 60px -42px var(--brand-focus-glow);transition:box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);background-position:top,50%;background-repeat:no-repeat,repeat;background-size:auto,22px 22px;flex-direction:column;align-items:center;gap:clamp(14px,1.8vw,22px);margin:0 auto;padding:clamp(20px,2.8vw,36px);display:flex;position:relative;overflow:hidden}.pomo-stage:hover{box-shadow:0 30px 72px -42px var(--brand-focus-glow);border-color:color-mix(in oklab, var(--brand-focus-primary) 36%, var(--border-default));transform:translateY(-3px)}.pomo-stage-main,.pomo-stage-side{flex-direction:column;align-items:center;gap:clamp(14px,1.8vw,22px);width:100%;min-width:0;display:flex}.pomo-seg{width:100%;max-width:340px;display:flex}.pomo-seg button{flex:1}.pomo-voyage{flex-direction:column;align-items:center;gap:12px;display:flex}.pomo-ring{--ring-color:var(--brand-focus-primary);aspect-ratio:1;width:clamp(216px,62vw,280px);position:relative}.pomo-ring:before{content:"";aspect-ratio:1;background:radial-gradient(circle at 50% 55%, color-mix(in oklab, var(--ring-color) 34%, transparent) 0%, color-mix(in oklab, var(--ring-color) 12%, transparent) 45%, transparent 62%);filter:blur(8px);opacity:.8;z-index:0;pointer-events:none;border-radius:50%;width:64%;position:absolute;top:52%;left:50%;transform:translate(-50%,-50%)}.pomo-phase-short,.pomo-phase-long{--ring-color:var(--brand-focus-accent)}.pomo-ring-svg{z-index:1;width:100%;height:100%;display:block;position:relative}.pomo-ring-track{fill:none;stroke:color-mix(in oklab, var(--text-primary) 14%, transparent);stroke-width:10px}.pomo-ring-progress{fill:none;stroke:var(--ring-color);stroke-width:10px;stroke-linecap:round;transition:stroke-dashoffset var(--dur-base) linear, stroke var(--dur-base) var(--ease);filter:drop-shadow(0 0 8px color-mix(in oklab, var(--ring-color) 60%, transparent))}.pomo-pipi{object-fit:contain;z-index:2;width:clamp(118px,34vw,150px);height:auto;filter:drop-shadow(0 0 1.5px var(--pipi-edge)) drop-shadow(0 0 1.5px var(--pipi-edge)) drop-shadow(0 0 4px color-mix(in srgb, var(--pipi-edge) 55%, transparent)) drop-shadow(0 10px 20px color-mix(in srgb, var(--bg-base) 55%, transparent)) drop-shadow(0 0 16px var(--brand-focus-glow));margin:auto;position:absolute;inset:0}.pomo-readout{text-align:center}.pomo-time{font-family:var(--font-code);letter-spacing:.01em;color:var(--text-primary);font-variant-numeric:tabular-nums;font-size:clamp(40px,10vw,60px);font-weight:700;line-height:1}.pomo-status{font-family:var(--font-code);font-size:calc(12px * var(--type-scale));letter-spacing:.1em;text-transform:uppercase;color:var(--text-primary);background-color:var(--bg-card);border-radius:var(--radius-sm);margin-top:4px;padding:2px 6px}.pomo-meta{font-family:var(--font-code);font-size:calc(12px * var(--type-scale));letter-spacing:.03em;color:var(--text-primary);background-color:var(--bg-card);border-radius:var(--radius-sm);flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;padding:4px 8px;display:flex}.pomo-meta strong{color:var(--text-primary);margin-left:2px}.pomo-treasure{--tre-color:var(--rarity-common);border-radius:var(--radius-md);background:color-mix(in oklab, var(--tre-color) 16%, var(--bg-raised));border:1px solid color-mix(in oklab, var(--tre-color) 46%, transparent);width:100%;animation:pomo-pop var(--dur-base) var(--ease-out);align-items:center;gap:14px;padding:12px 16px;display:flex}.pomo-rarity-common{--tre-color:var(--rarity-common)}.pomo-rarity-uncommon{--tre-color:var(--rarity-uncommon)}.pomo-rarity-rare{--tre-color:var(--rarity-rare)}.pomo-rarity-epic{--tre-color:var(--rarity-epic)}.pomo-rarity-legendary{--tre-color:var(--rarity-legendary)}.pomo-treasure-img{object-fit:contain;width:56px;height:56px;filter:drop-shadow(0 0 12px color-mix(in oklab, var(--tre-color) 65%, transparent))}.pomo-treasure-text{flex-direction:column;gap:2px;min-width:0;display:flex}.pomo-treasure-text strong{font-family:var(--font-display);color:var(--text-primary);font-size:15px}.pomo-treasure-text span{color:var(--text-secondary);font-size:13px}.pomo-treasure-rarity{color:var(--tre-color);font-style:normal;font-family:var(--font-code);letter-spacing:.04em;font-size:11px}.pomo-complete-cta{border:1px solid var(--border-default);border-left:3px solid var(--brand-focus-primary);border-radius:var(--radius-md);background:var(--bg-raised);width:100%;min-width:0;max-width:380px;padding:12px 14px}.pomo-complete-cta-label{color:var(--neon-cyan);font:700 calc(11px * var(--type-scale,1)) / 1.4 var(--font-code);margin-bottom:4px;display:block}.pomo-complete-cta strong{color:var(--text-primary);font:700 calc(14px * var(--type-scale,1)) / 1.4 var(--font-display);display:block}.pomo-complete-cta p{color:var(--text-secondary);font-size:calc(12px * var(--type-scale,1));margin:5px 0 8px;line-height:1.55}.pomo-complete-cta-links{flex-wrap:wrap;gap:6px 8px;display:flex}.pomo-complete-cta-links a{border:1px solid var(--border-strong);border-radius:var(--radius-sm);min-width:0;min-height:44px;color:var(--neon-cyan);font:700 calc(12px * var(--type-scale,1)) / 1.4 var(--font-display);text-align:center;overflow-wrap:anywhere;flex:110px;justify-content:center;align-items:center;padding:7px 10px;text-decoration:none;display:inline-flex}.pomo-complete-cta-links a:hover{border-color:var(--brand-focus-primary)}.pomo-complete-cta-links a:focus-visible{outline:3px solid var(--accent-yellow);outline-offset:2px}.pomo-tray{flex-wrap:wrap;justify-content:center;gap:8px;width:100%;display:flex}.pomo-tray-item{--tre-color:var(--rarity-common);object-fit:contain;border-radius:var(--radius-sm);background:color-mix(in oklab, var(--tre-color) 14%, var(--bg-raised));border:1px solid color-mix(in oklab, var(--tre-color) 40%, transparent);width:36px;height:36px;padding:4px}.pomo-controls{grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:380px;display:grid}.pomo-focus-return{border-left:2px solid var(--neon-teal);background:var(--bg-raised);max-width:380px;font-size:calc(13px * var(--type-scale,1));margin:0;padding:12px 14px;line-height:1.55}.pomo-focus-return a{min-height:36px;color:var(--neon-cyan);align-content:center;font-weight:700;display:inline-block}.pomo-focus-return span{color:var(--text-secondary);display:block}.pomo-btn{border-radius:var(--radius-md);height:48px;font-family:var(--font-display);font-size:calc(15px * var(--type-scale,1));cursor:pointer;transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:0 18px;font-weight:600;display:inline-flex}.pomo-btn svg{flex:none}.pomo-btn--primary{color:var(--tool-primary-fg);background-image:linear-gradient(135deg, var(--tool-primary-bg) 0%, var(--tool-primary-hover) 100%);box-shadow:0 8px 22px -7px var(--brand-focus-glow);border-color:#0000;grid-column:1/-1}.pomo-btn--primary:hover{filter:none;box-shadow:0 12px 28px -7px var(--brand-focus-glow)}.pomo-btn--ghost{color:var(--text-secondary);background:color-mix(in oklab, var(--brand-focus-primary) 8%, var(--bg-raised));border-color:color-mix(in oklab, var(--brand-focus-primary) 26%, transparent)}.pomo-btn--ghost:hover{color:var(--text-primary);border-color:color-mix(in oklab, var(--brand-focus-primary) 50%, transparent)}.pomo-btn:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab, var(--brand-focus-primary) 40%, transparent);outline:none}.pomo-root .pomo-controls .pomo-btn--primary:focus-visible{outline:3px solid var(--text-primary);outline-offset:3px}.pomo-settings{flex-direction:column;gap:10px;width:100%;max-width:340px;display:flex}.pomo-setting{grid-template-columns:52px 1fr;align-items:center;gap:14px;display:grid}.pomo-setting-label{font-family:var(--font-display);color:var(--text-secondary);text-align:left;font-size:14px;font-weight:500}.pomo-len-seg{width:100%;display:flex}.pomo-len-seg button{flex:1}.pomo-root .ak-seg.pomo-seg button.active[aria-pressed=true],.pomo-root .ak-seg.pomo-len-seg button.active[aria-pressed=true]{color:var(--text-primary)}.pomo-len-seg button[disabled]{opacity:.45;cursor:not-allowed}@media (width<=420px){.pomo-controls{grid-template-columns:minmax(0,1fr)}.pomo-btn--primary{grid-column:auto}.pomo-setting{grid-template-columns:max-content minmax(0,1fr);gap:8px}.pomo-setting-label{white-space:nowrap}.pomo-len-seg{flex-wrap:wrap}.pomo-len-seg button{flex:calc(50% - 2px);min-width:0;padding-inline:4px}}html[lang^=ja] .pw-page[data-tool=pomodoro] .ak-faq>summary{word-break:normal;line-break:strict;overflow-wrap:anywhere;padding-right:52px;display:block;position:relative}html[lang^=ja] .pw-page[data-tool=pomodoro] .ak-faq>summary:after{position:absolute;top:14px;right:18px}@keyframes pomo-pop{0%{opacity:0;transform:translateY(6px)scale(.98)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.pomo-treasure{animation:none}.pomo-ring-progress{transition:none}.pomo-pipi{animation:none}}@media (width>=1100px){.pomo-stage{grid-template-columns:minmax(0, 1fr) minmax(0, var(--stage-side));align-items:start;gap:clamp(24px,2.4vw,44px);max-width:none;padding:clamp(24px,2.4vw,36px);display:grid}.pomo-stage-side{align-items:stretch}.pomo-stage-side .pomo-seg,.pomo-stage-side .pomo-settings{max-width:none}.pomo-stage-side .pomo-meta{justify-content:flex-start}.pomo-stage-main .pomo-controls{max-width:420px}}html[lang^=ja] .pw-page[data-tool=pomodoro] [data-focus-ja-current-faq]{word-break:normal;line-break:strict;overflow-wrap:normal}html[lang^=ja] .pw-page[data-tool=pomodoro] [data-focus-ja-current-faq]>summary{text-wrap:balance}html[lang^=ja] .pw-page[data-tool=pomodoro] [data-focus-ja-current-faq] p{text-wrap:pretty}html[lang^=ja] .pw-page[data-tool=pomodoro] [data-focus-ja-current-app]{max-width:100%;min-height:48px;color:var(--text-primary);text-underline-offset:.2em;align-items:center;line-height:1.5;text-decoration:underline;display:inline-flex}html[lang^=ja] .pw-page[data-tool=pomodoro] [data-focus-ja-sound-guide]{word-break:normal;line-break:strict;overflow-wrap:normal;text-wrap:pretty}html[lang^=ja] .pw-page[data-tool=pomodoro] [data-focus-ja-sound-guide] a{max-width:100%;min-height:48px;color:var(--text-primary);text-underline-offset:.2em;align-items:center;text-decoration:underline;display:inline-flex}html[lang^=ja] .pw-page[data-tool=pomodoro] [data-focus-ja-sound-guide] a:focus-visible{outline:2px solid var(--text-primary);outline-offset:4px}.pomo-confirm{border:1px solid var(--border-default);background:var(--bg-card);min-width:0;color:var(--text-primary);border-radius:16px;margin-top:16px;padding:16px}.pomo-confirm h2{font-size:calc(16px * var(--type-scale));overflow-wrap:anywhere;margin:0 0 10px;line-height:1.5}.pomo-confirm p{font-size:calc(14px * var(--type-scale));overflow-wrap:anywhere;margin:8px 0;line-height:1.6}.pomo-confirm-actions{flex-wrap:wrap;gap:10px;margin-top:12px;display:flex}.pomo-confirm-actions .pomo-btn{white-space:normal;overflow-wrap:anywhere;min-width:44px;min-height:44px}.pomo-controls .pomo-btn:disabled{opacity:.55;cursor:not-allowed}.pomo-confirm .pomo-btn:focus-visible{outline:2px solid var(--neon-indigo);outline-offset:3px}.pomo-duration-hint{font-size:calc(14px * var(--type-scale));overflow-wrap:anywhere;color:var(--text-primary);margin:12px 0;line-height:1.6}html[lang=ko] .pw-page[data-tool=pomodoro] [data-focus-ko-current-app]{max-width:100%;min-height:48px;color:var(--text-primary);text-underline-offset:.2em;align-items:center;line-height:1.5;text-decoration:underline;display:inline-flex}.pomo-local-history{border:1px solid var(--border-default);background:var(--bg-card);min-width:0;color:var(--text-primary);border-radius:16px;margin-top:16px}.pomo-local-history>summary{box-sizing:border-box;cursor:pointer;min-height:48px;font-weight:700;font-size:calc(15px * var(--type-scale,1));overflow-wrap:anywhere;padding:12px 16px;line-height:1.6}.pomo-local-history>summary:focus-visible,.pomo-history-body a:focus-visible,.pomo-history-body button:focus-visible{outline:2px solid var(--brand-focus-primary);outline-offset:3px}.pomo-history-body{min-width:0;padding:0 16px 16px}.pomo-history-body p{color:var(--text-secondary);font-size:calc(14px * var(--type-scale,1));overflow-wrap:anywhere;margin:12px 0;line-height:1.7}.pomo-history-body a{color:var(--text-primary);text-underline-offset:.2em;text-decoration:underline}.pomo-history-body button{white-space:normal;overflow-wrap:anywhere;max-width:100%;min-height:48px}.pomo-history-days{margin:16px 0;padding:0;list-style:none}.pomo-history-days li{border-bottom:1px solid var(--border-default);font-size:calc(14px * var(--type-scale,1));justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;line-height:1.6;display:flex}.pomo-history-date{overflow-wrap:anywhere;min-width:0}.pomo-history-date small{color:var(--text-primary);margin-inline-start:8px;font-weight:700;display:inline-block}.pomo-history-count{text-align:end;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;flex-shrink:0;max-width:45%}
