.pomo-root{--pipi-edge: #f5f1e4;--rarity-common: #94a3b8;--rarity-uncommon: #22c55e;--rarity-rare: #3b82f6;--rarity-epic: #8b5cf6;--rarity-legendary: #f59e0b;max-width:1200px;margin:0 auto}.pomo-main{padding:clamp(16px,2.4vw,32px)}.pomo-hero{text-align:center;margin-bottom:clamp(16px,2vw,24px)}.pomo-brand{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;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);margin-bottom:14px}.pomo-brand-mark{width:44px;height:44px;object-fit:cover;border-radius:22%;box-shadow:0 2px 8px var(--brand-focus-glow)}.pomo-brand-text{display:flex;flex-direction:column;text-align:left;line-height:1.2}.pomo-brand-name{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-primary)}.pomo-brand-tag{font-family:var(--font-code);font-size:10px;letter-spacing:.04em;color:var(--text-muted)}.pomo-web-badge{font-family:var(--font-code);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-focus-accent);padding:3px 8px;border-radius:var(--radius-pill);background:color-mix(in oklab,var(--brand-focus-accent) 14%,transparent)}.pomo-h1{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,4.2vw,46px);line-height:1.2;margin-top:6px}.pomo-lede{margin-top:10px;font-size:calc(15px * var(--type-scale, 1));line-height:1.6;color:var(--text-secondary);max-width:520px;margin-left:auto;margin-right:auto}.pomo-stage{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,1.8vw,22px);padding:clamp(20px,2.8vw,36px);max-width:520px;margin:0 auto;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);background-size:auto,22px 22px;background-position:center top,center;background-repeat:no-repeat,repeat;backdrop-filter:blur(14px);-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)}.pomo-stage:hover{transform:translateY(-3px);box-shadow:0 30px 72px -42px var(--brand-focus-glow);border-color:color-mix(in oklab,var(--brand-focus-primary) 36%,var(--border-default))}.pomo-seg{display:flex;width:100%;max-width:340px}.pomo-seg button{flex:1}.pomo-voyage{display:flex;flex-direction:column;align-items:center;gap:12px}.pomo-ring{--ring-color: var(--brand-focus-primary);position:relative;width:clamp(216px,62vw,280px);aspect-ratio:1}.pomo-ring:before{content:"";position:absolute;left:50%;top:52%;width:64%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;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}.pomo-phase-short,.pomo-phase-long{--ring-color: var(--brand-focus-accent)}.pomo-ring-svg{position:relative;width:100%;height:100%;display:block;z-index:1}.pomo-ring-track{fill:none;stroke:color-mix(in oklab,var(--text-primary) 14%,transparent);stroke-width:10}.pomo-ring-progress{fill:none;stroke:var(--ring-color);stroke-width:10;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{position:absolute;inset:0;margin:auto;width:clamp(118px,34vw,150px);height:auto;object-fit:contain;z-index:2;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))}.pomo-readout{text-align:center}.pomo-time{font-family:var(--font-code);font-weight:700;font-size:clamp(40px,10vw,60px);line-height:1;letter-spacing:.01em;color:var(--text-primary);font-variant-numeric:tabular-nums}.pomo-status{margin-top:4px;font-family:var(--font-code);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-focus-accent)}.pomo-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;font-family:var(--font-code);font-size:12px;letter-spacing:.03em;color:var(--text-muted)}.pomo-meta strong{color:var(--brand-focus-accent);margin-left:2px}.pomo-treasure{--tre-color: var(--rarity-common);display:flex;align-items:center;gap:14px;width:100%;padding:12px 16px;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);animation:pomo-pop var(--dur-base) var(--ease-out)}.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{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 0 12px color-mix(in oklab,var(--tre-color) 65%,transparent))}.pomo-treasure-text{display:flex;flex-direction:column;gap:2px;min-width:0}.pomo-treasure-text strong{font-family:var(--font-display);font-size:15px;color:var(--text-primary)}.pomo-treasure-text span{font-size:13px;color:var(--text-secondary)}.pomo-treasure-rarity{color:var(--tre-color);font-style:normal;font-family:var(--font-code);font-size:11px;letter-spacing:.04em}.pomo-tray{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%}.pomo-tray-item{--tre-color: var(--rarity-common);width:36px;height:36px;object-fit:contain;padding:4px;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)}.pomo-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:380px}.pomo-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 18px;border-radius:var(--radius-md);font-family:var(--font-display);font-size:calc(15px * var(--type-scale, 1));font-weight:600;cursor:pointer;border:1px solid transparent;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}.pomo-btn svg{flex:0 0 auto}.pomo-btn--primary{grid-column:1 / -1;color:var(--text-primary);background-image:linear-gradient(135deg,var(--brand-focus-primary) 0%,var(--neon-violet) 100%);border-color:transparent;box-shadow:0 8px 22px -7px var(--brand-focus-glow)}.pomo-btn--primary:hover{filter:brightness(1.06);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{outline:none;box-shadow:0 0 0 3px color-mix(in oklab,var(--brand-focus-primary) 40%,transparent)}.pomo-settings{display:flex;flex-direction:column;gap:10px;width:100%;max-width:340px}.pomo-setting{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:14px}.pomo-setting-label{font-family:var(--font-display);font-size:14px;font-weight:500;color:var(--text-secondary);text-align:left}.pomo-len-seg{display:flex;width:100%}.pomo-len-seg button{flex:1}.pomo-len-seg button[disabled]{opacity:.45;cursor:not-allowed}@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}}