.pc-morph{box-shadow:0 0 0 1px var(--ovaflow-line), 0 30px 60px -40px #16171947;background:#fff;border-radius:28px;overflow:clip}.pc-morph__chrome{border-bottom:1px solid var(--ovaflow-line);background:color-mix(in srgb, var(--ovaflow-canvas,#f7f8fa) 70%, #fff);align-items:center;gap:14px;padding:14px 20px;display:flex}.pc-morph__dots{gap:6px;display:inline-flex}.pc-morph__dots span{background:var(--ovaflow-line);border-radius:50%;width:9px;height:9px}.pc-morph__screen{white-space:nowrap;text-overflow:ellipsis;min-width:0;font:600 14px/1.3 var(--font-display);color:var(--ovaflow-ink);flex:auto;overflow:hidden}.pc-morph__legend{gap:8px;margin-left:auto;display:none}@media (min-width:700px){.pc-morph__legend{display:inline-flex}}.pc-morph__key{font:500 12px/1.5 var(--font-mono);letter-spacing:.02em;border-radius:999px;padding:3px 10px}.pc-morph__key--before{background:color-mix(in srgb, var(--amber) 18%, #fff);color:#5a4210}.pc-morph__key--after{background:var(--lime,#e9f8b4);color:var(--ovaflow-primary,#20241b)}.pc-morph__rows{margin:0;padding:0;list-style:none}.pc-morph__row{border-top:1px solid var(--ovaflow-line);view-timeline-name:--pcm-row;view-timeline-axis:block;gap:12px;padding:20px;display:grid}.pc-morph__row:first-child{border-top:0}@media (min-width:900px){.pc-morph__row{grid-template-columns:minmax(130px,.62fr) minmax(0,1.4fr) minmax(96px,.5fr) minmax(0,1.6fr);align-items:center;gap:24px;padding:26px 28px}}.pc-morph__area{font:500 12px/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);align-items:baseline;gap:10px;display:flex}.pc-morph__n{color:var(--ovaflow-muted);font-variant-numeric:tabular-nums}.pc-morph__state{border-radius:16px;margin:0;padding:14px 16px;font-size:16px;line-height:1.5;position:relative}.pc-morph__state--before{background:color-mix(in srgb, var(--amber) 9%, #fff);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--amber) 30%, transparent);color:var(--ovaflow-secondary);filter:grayscale(.85)}.pc-morph__state--after{background:color-mix(in srgb, var(--lime,#e9f8b4) 42%, #fff);color:var(--ovaflow-ink);font:600 clamp(16px, 1.25vw, 19px) / 1.42 var(--font-display);letter-spacing:-.005em}.pc-morph__state--after:after{content:"";transform-origin:50%;border-radius:inherit;box-shadow:inset 0 0 0 1.5px var(--accent);pointer-events:none;position:absolute;inset:0}.pc-morph__tag{font:500 12px/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:#6b5320;margin-bottom:4px;display:block}.pc-morph__tag--after{color:var(--accent)}.pc-morph__rail{height:30px;display:block;position:relative;container-type:inline-size}.pc-morph__track,.pc-morph__fill{border-radius:2px;height:2px;position:absolute;top:14px;left:0;right:0}.pc-morph__track{background:var(--ovaflow-line)}.pc-morph__fill{background:var(--accent);transform-origin:0}.pc-morph__thumb{border-radius:999px;display:grid;position:absolute;top:0;left:0;overflow:hidden;transform:translate(calc(100cqw - 100%))}.pc-morph__chip{white-space:nowrap;height:30px;font:500 12px/1 var(--font-mono);letter-spacing:.02em;border-radius:999px;grid-area:1/1;justify-content:center;align-items:center;padding:0 12px;display:inline-flex}.pc-morph__chip--before{background:color-mix(in srgb, var(--amber) 22%, #fff);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--amber) 45%, transparent);color:#5a4210}.pc-morph__chip--after{background:var(--accent);color:#fff}@media (max-width:899.98px){.pc-morph__rail{height:30px}}@supports (animation-timeline:view()){html:is([data-motion-tier=A],[data-motion-tier=B]) .pc-morph__fill{animation:linear both pcm-fill;animation-timeline:--pcm-row;animation-range:entry 70% cover 52%}html:is([data-motion-tier=A],[data-motion-tier=B]) .pc-morph__thumb{animation:linear both pcm-thumb;animation-timeline:--pcm-row;animation-range:entry 70% cover 52%}html:is([data-motion-tier=A],[data-motion-tier=B]) .pc-morph__chip--after{animation:linear both pcm-chip;animation-timeline:--pcm-row;animation-range:cover 30% cover 50%}html:is([data-motion-tier=A],[data-motion-tier=B]) .pc-morph__chip--before{animation:linear both pcm-chip-out;animation-timeline:--pcm-row;animation-range:cover 30% cover 50%}html:is([data-motion-tier=A],[data-motion-tier=B]) .pc-morph__state--after:after{animation:linear both pcm-ring;animation-timeline:--pcm-row;animation-range:cover 36% cover 54%}html:is([data-motion-tier=A],[data-motion-tier=B]) .pc-morph__state--before{animation:linear both pcm-desat;animation-timeline:--pcm-row;animation-range:entry 70% cover 52%}html:is([data-motion-tier=A],[data-motion-tier=B]) .pc-morph__state--after{animation:linear both pcm-dock;animation-timeline:--pcm-row;animation-range:entry 70% cover 50%}}@keyframes pcm-fill{0%{transform:scaleX(0)}}@keyframes pcm-thumb{0%{transform:translate(0)}}@keyframes pcm-chip{0%{transform:translateY(100%)}to{transform:none}}@keyframes pcm-chip-out{0%{transform:none}to{transform:translateY(-100%)}}@keyframes pcm-ring{0%{transform:scale(1.035,1.12)}to{transform:none}}@keyframes pcm-desat{0%{filter:none}}@keyframes pcm-dock{0%{transform:translate(-18px)}}@media (max-width:559.98px){.pc-morph__screen-sub{display:none}}