.pr-room {
--pr-space-1: 0.25rem;
--pr-space-2: 0.5rem;
--pr-space-3: 0.75rem;
--pr-space-4: 1rem;
--pr-space-5: 1.5rem;
--pr-space-6: 2.5rem;
--pr-text-xs: 0.8125rem;
--pr-text-s: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
--pr-text-m: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
--pr-text-l: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
--pr-weight-gold: 600;
--pr-gold-angle: 180deg;
--pr-button-h: 2.75rem;
--pr-text-max: 68ch;
--pr-card-min: 20rem;
--pr-text: #efe6d4;
--pr-text-muted: #aaa7a0;
--pr-error: #ff9f8f;
--pr-focus: #f1e5c6;
--pr-focus-width: 3px;
--pr-focus-offset: 2px;
--pr-gold: #f0c75e;
--pr-gold-light: #ffd978;
--pr-gold-deep: #a87e35;
--pr-gold-line: linear-gradient(90deg, var(--pr-gold-deep), var(--pr-gold) 30%, var(--pr-gold-light) 50%, var(--pr-gold) 70%, var(--pr-gold-deep));
--pr-line-width: 1px;
--pr-border-width: 1px;
--pr-ink: #0b0b0c;
--pr-light: #ffe2bd;
--pr-rim: #ff0000;
--pr-lacquer: #0b0b0c;
--pr-gloss: #1c1c1e;
--pr-gloss-hover: #1e1e20;
--pr-gloss-stop: 70%;
--pr-light-mix: 10%;
--pr-edge: rgba(255, 230, 190, 0.14);
--pr-edge-lit: rgba(255, 226, 189, 0.3);
--pr-edge-width: 1px;
--pr-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.55);
--pr-shadow-hover: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.65);
--pr-radius: 0.75rem;
--pr-sheen: rgba(255, 236, 205, 0.12);
--pr-sheen-angle: 105deg;
--pr-gold-gloss: rgba(255, 249, 228, 0.9);
--pr-gold-sheen: rgba(255, 255, 255, 0.45);
--pr-gold-hover-mix: 14%;
--pr-tab-h: 2.5rem;
--pr-tab-rise: 0.25rem;
--pr-tab-rim: 2px;
--pr-tab-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.7);
--pr-tab-cone-mix: 16%;
--pr-tab-cone-size: 70% 110%;
--pr-tile-ratio: 0.26;
--pr-field-bg: rgba(0, 0, 0, 0.55);
--pr-field-line: #8c8579;
--pr-field-line-width: 1px;
--pr-field-radius: 0.375rem;
--pr-fast: 120ms;
--pr-sheen-time: 700ms;
--pr-ease: cubic-bezier(0.2, 0, 0, 1);
--pr-target: 2.25rem;
--pr-target-touch: 2.75rem;
--pr-subtab-h: 2rem;
--pr-subtab-rise: 0.125rem;
--pr-subline-opacity: 0.55;
--pr-chip-x: 1.5rem;
--pr-dash: 1px;
--pr-cell-min: 3.25rem;
--pr-day-min: 8.5rem;
--pr-slot-width: 7.5rem;
--pr-slot-narrow: 40%;
--pr-check-size: 1.25rem;
--pr-check-mark: 0.25rem;
--pr-field-min: 9rem;
--pr-option-min: 13rem;
--pr-chart-min: 22rem;
--pr-search-width: 16rem;
--pr-weight-input: 7rem;
--pr-dialog-max: 40rem;
--pr-qty-width: 6rem;
--pr-qty-width-touch: 5rem;
--pr-shop-col: 15rem;
--pr-pick-max: 18rem;
--pr-chevron: 0.6rem;
--pr-select-arrow: 0.35rem;
--pr-cross: 0.75rem;
--pr-stroke: 2px;
--pr-axis-stroke: 0.5;
--pr-chart-text: 9px;
--pr-basal-stroke: 1.5;
--pr-basal-dash: 4 3;
--pr-line-stroke: 2;
--pr-line-stroke-on: 3.5;
--pr-line-dim: 0.6;
--pr-disabled: 0.5;
--pr-legend-w: 1rem;
--pr-legend-h: 3px;
--pr-backdrop: rgba(0, 0, 0, 0.6);
--pr-icon-size: 1.125rem;
--pr-icon-size-sub: 1rem;
--pr-icon-gap: 0.375rem;
--pr-tab-h-touch: 3.625rem;
--pr-anim-ease: cubic-bezier(0.22, 0.7, 0.28, 1);
--pr-anim-step: 50ms;
--pr-anim-curtain: 600ms;
--pr-anim-item: 500ms;
--pr-anim-wave: 900ms;
--pr-anim-wave-item: 680ms;
--pr-anim-mirage: 800ms;
--pr-anim-enter-max: 1300ms;
--pr-wave-size: 140rem;
--pr-wave: color-mix(in srgb, var(--pr-light) 55%, transparent);
--pr-mirage: color-mix(in srgb, var(--pr-light) 45%, transparent);
--pr-mirage-band: 3rem;
--pr-mirage-shift: 1.5px;
--pr-item-shift: 1.125rem;
--pr-volt: #ffd400;
--pr-volt-edge: #0f2a5c;
--pr-volt-width: 3px;
--pr-volt-edge-width: 1.5px;
--pr-sticky-top: calc(3.5rem + env(safe-area-inset-top, 0px));
--pr-bar-top: 3rem;
--pr-bar-ground: #0b0808;
--pr-bar-room: 8rem;
--pr-light-color: rgb(150, 20, 28);
--pr-light-opacity: 0.32;
--pr-light-width: 55%;
--pr-light-height: 60%;
--pr-light-y: 0%;
--pr-light-floor: 0;
--pr-light-touch-width: 140%;
--pr-light-touch-height: 60%;
--pr-light-touch-x: 50%;
--pr-light-touch-y: -5%;
--pr-light-touch-floor: 0;
--pr-content-max: 72rem;
--pr-gutter: clamp(1rem, 4vw, 3rem);
--pr-column: min(var(--pr-text-max), min(var(--pr-content-max), 100vw) - 2 * var(--pr-gutter));
--pr-column-cx: calc(max(0px, (100vw - var(--pr-content-max)) / 2) + var(--pr-gutter) + var(--pr-column) / 2);
--pr-column-x: var(--pr-column-cx);
--pr-light-x: var(--pr-column-x);
--pr-light-stops:
color-mix(in srgb, var(--pr-light-color) calc(var(--pr-light-opacity) * 100%), transparent) 0%,
color-mix(in srgb, var(--pr-light-color) calc(var(--pr-light-opacity) * 82%), transparent) 18%,
color-mix(in srgb, var(--pr-light-color) calc(var(--pr-light-opacity) * 55%), transparent) 40%,
color-mix(in srgb, var(--pr-light-color) calc(var(--pr-light-opacity) * 28%), transparent) 62%,
color-mix(in srgb, var(--pr-light-color) calc(var(--pr-light-opacity) * 9%), transparent) 82%,
transparent 100%;
--pr-page-light: radial-gradient(var(--pr-light-width) var(--pr-light-height) at var(--pr-light-x) var(--pr-light-y), var(--pr-light-stops));
--pr-page-light-floor: linear-gradient(color-mix(in srgb, var(--pr-light-color) calc(var(--pr-light-opacity) * var(--pr-light-floor) * 100%), transparent), color-mix(in srgb, var(--pr-light-color) calc(var(--pr-light-opacity) * var(--pr-light-floor) * 100%), transparent));
--pr-page-light-touch: radial-gradient(var(--pr-light-touch-width) var(--pr-light-touch-height) at var(--pr-light-touch-x) var(--pr-light-touch-y), var(--pr-light-stops));
--pr-page-light-touch-floor: linear-gradient(color-mix(in srgb, var(--pr-light-color) calc(var(--pr-light-opacity) * var(--pr-light-touch-floor) * 100%), transparent), color-mix(in srgb, var(--pr-light-color) calc(var(--pr-light-opacity) * var(--pr-light-touch-floor) * 100%), transparent));
--pr-bar: var(--pr-gold);
--pr-bar-over: var(--pr-error);
--pr-basal: var(--pr-text);
--pr-sc-a: var(--pr-error);
--pr-sc-b: var(--pr-text-muted);
--pr-sc-c: var(--pr-gold);
--pr-bg: transparent;
--pr-key-white: #f7f1e4;
--pr-key-black: #0b0b0c;
--pr-key-light: #a87e35;
--pr-key-line: #3a3030;
--pr-key-w: 24px;
--pr-key-h: 44px;
--pr-key-black-share: 0.62;
--pr-key-h-grande: 56px;
--pr-key-h-molto: 68px;
--pr-footer-touch: 3rem;
--pr-theme-min: 11rem;
--pr-swatch-w: 6.25rem;
--pr-swatch-h: 1.25rem;
--pr-play-icon: 1.25rem;
--pr-drag-gap: 0.3rem;
display: grid;
grid-template-columns: minmax(0, 1fr);
min-inline-size: 0;
gap: var(--pr-space-4);
position: relative;
margin-block: var(--pr-space-4) var(--pr-space-6);
background: var(--pr-bg);
color: var(--pr-text);
font-family: var(--pr-font, inherit);
}
.pr-room:dir(rtl) {
--pr-column-x: calc(100vw - var(--pr-column-cx));
}
.pr-room[data-pr-themed="on"] {
margin-inline: calc(-1 * var(--pr-space-4));
padding: var(--pr-space-4);
border-radius: var(--pr-radius);
}
@media (min-width: 64em) {
.pr-room {
--pr-bar-top: 3.5rem;
}
}
@media (prefers-contrast: more) {
.pr-room {
--pr-bar-ground: #000000;
--pr-light-opacity: 0;
--pr-text: #ffffff;
--pr-text-muted: #ffffff;
--pr-error: #ffc2b8;
--pr-focus: #ffe066;
--pr-focus-width: 4px;
--pr-gold: #ffffff;
--pr-gold-light: #ffd27a;
--pr-gold-deep: #ffd27a;
--pr-gold-line: linear-gradient(#ffffff, #ffffff);
--pr-border-width: 2px;
--pr-ink: #000000;
--pr-light: #ffffff;
--pr-rim: #ffffff;
--pr-lacquer: #000000;
--pr-gloss: #000000;
--pr-gloss-hover: #000000;
--pr-light-mix: 0%;
--pr-edge: #ffffff;
--pr-edge-lit: #ffffff;
--pr-shadow: 0 0 0 transparent;
--pr-shadow-hover: 0 0 0 transparent;
--pr-sheen: transparent;
--pr-gold-gloss: transparent;
--pr-gold-sheen: transparent;
--pr-gold-hover-mix: 0%;
--pr-tab-shadow: 0 0 0 transparent;
--pr-tab-cone-mix: 0%;
--pr-field-bg: #000000;
--pr-field-line: #ffffff;
--pr-field-line-width: 2px;
--pr-subline-opacity: 1;
--pr-key-white: #ffffff;
--pr-key-black: #000000;
--pr-key-light: #c00000;
--pr-key-line: #000000;
}
}
@media (prefers-reduced-motion: reduce) {
.pr-room {
--pr-fast: 0ms;
--pr-sheen-time: 0ms;
}
}
.pr-room [hidden] {
display: none !important;
}
.pr-room :focus-visible {
outline: var(--pr-focus-width) solid var(--pr-focus);
outline-offset: var(--pr-focus-offset);
}
.pr-button:not([data-pr-site="on"]),
.pr-tab:not([data-pr-site="on"]),
.pr-subtab,
.pr-cell-button,
.pr-add-button,
.pr-pick-option,
.pr-start-option,
.pr-daybar-day,
.pr-icon-button,
.pr-theme,
.pr-play-button {
position: relative;
overflow: hidden;
font: inherit;
cursor: pointer;
transition: box-shadow var(--pr-fast) var(--pr-ease), background-color var(--pr-fast) var(--pr-ease);
}
.pr-button:not([data-pr-site="on"]) {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
gap: var(--pr-space-2);
min-block-size: var(--pr-button-h);
min-inline-size: var(--pr-button-h);
padding-block: 0;
padding-inline: var(--pr-space-5);
border: 0;
border-radius: var(--pr-radius);
background-color: var(--pr-lacquer);
background-image: var(--pr-h-layer, none), linear-gradient(to bottom, var(--pr-h-button-top, var(--pr-gloss)), var(--pr-lacquer) var(--pr-gloss-stop));
box-shadow: inset 0 0 0 var(--pr-edge-width) var(--pr-edge), inset 0 var(--pr-edge-width) 0 var(--pr-edge-lit), var(--pr-shadow);
color: var(--pr-text);
font-size: var(--pr-text-m);
text-decoration: none;
white-space: nowrap;
}
.pr-button:not([data-pr-site="on"]) .pr-button-text {
background-image: linear-gradient(var(--pr-gold-angle), var(--pr-gold-light), var(--pr-gold) 45%, var(--pr-gold-deep));
background-size: 100% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: var(--pr-weight-gold);
}
.pr-button:not([data-pr-site="on"]):hover,
.pr-button:not([data-pr-site="on"]):focus-visible {
--pr-h-button-top: var(--pr-gloss-hover);
box-shadow: inset 0 0 0 var(--pr-edge-width) var(--pr-edge), inset 0 var(--pr-edge-width) 0 var(--pr-edge-lit), var(--pr-shadow-hover);
}
.pr-button:not([data-pr-site="on"])[data-pr-kind="main"] {
--pr-h-gold-top: var(--pr-gold-light);
background-color: var(--pr-gold);
background-image: linear-gradient(to bottom, var(--pr-h-gold-top), var(--pr-gold) 55%, var(--pr-gold-deep));
box-shadow: inset 0 var(--pr-edge-width) 0 var(--pr-gold-gloss), var(--pr-tab-shadow);
}
.pr-button:not([data-pr-site="on"])[data-pr-kind="main"] .pr-button-text {
background-image: none;
color: var(--pr-ink);
}
.pr-button:not([data-pr-site="on"])[data-pr-kind="main"]:hover,
.pr-button:not([data-pr-site="on"])[data-pr-kind="main"]:focus-visible {
--pr-h-gold-top: color-mix(in srgb, var(--pr-gold-light), #ffffff var(--pr-gold-hover-mix));
box-shadow: inset 0 var(--pr-edge-width) 0 var(--pr-gold-gloss), var(--pr-tab-shadow);
}
.pr-button:not([data-pr-site="on"])[data-pr-armed="on"] {
box-shadow: inset 0 0 0 var(--pr-tab-rim) var(--pr-error), var(--pr-shadow-hover);
}
@media (prefers-contrast: more) {
.pr-button:not([data-pr-site="on"]) .pr-button-text {
background-image: none;
color: var(--pr-text);
}
.pr-button:not([data-pr-site="on"])[data-pr-kind="main"] .pr-button-text {
color: var(--pr-ink);
}
}
.pr-button:not([data-pr-site="on"]):disabled {
opacity: var(--pr-disabled);
cursor: default;
}
.pr-button:not([data-pr-site="on"])::after,
.pr-tab:not([data-pr-site="on"])::after,
.pr-cell-button::after,
.pr-pick-option::after,
.pr-start-option::after {
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(var(--pr-sheen-angle), transparent 35%, var(--pr-h-sheen, var(--pr-sheen)) 50%, transparent 65%) 100% 0 / 250% 100% no-repeat;
opacity: 0;
pointer-events: none;
content: "";
}
.pr-button:not([data-pr-site="on"])[data-pr-kind="main"]::after {
--pr-h-sheen: var(--pr-gold-sheen);
}
.pr-button:not([data-pr-site="on"]):is(:hover, :focus-visible)::after,
.pr-tab:not([data-pr-site="on"]):is(:hover, :focus-visible)::after,
.pr-cell-button:is(:hover, :focus-visible)::after,
.pr-pick-option:is(:hover, :focus-visible)::after,
.pr-start-option:is(:hover, :focus-visible)::after {
animation: pr-sheen var(--pr-sheen-time) var(--pr-ease) both;
}
[dir="rtl"] .pr-room ::after {
animation-direction: reverse;
}
@keyframes pr-sheen {
from {
opacity: 1;
background-position: 100% 0;
}
to {
opacity: 1;
background-position: 0% 0;
}
}
@media (prefers-reduced-motion: reduce) {
.pr-button:not([data-pr-site="on"]):is(:hover, :focus-visible)::after,
.pr-tab:not([data-pr-site="on"]):is(:hover, :focus-visible)::after,
.pr-cell-button:is(:hover, :focus-visible)::after,
.pr-pick-option:is(:hover, :focus-visible)::after,
.pr-start-option:is(:hover, :focus-visible)::after {
animation: none;
}
}
.pr-link {
color: var(--pr-gold);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.pr-link:hover {
color: var(--pr-gold-light);
}
.pr-bar {
position: sticky;
z-index: 3;
inset-block-start: var(--pr-bar-top);
background-color: var(--pr-bar-ground);
background-image: var(--pr-page-light), var(--pr-page-light-floor);
background-attachment: fixed, fixed;
background-size: 100% 100%, 100% 100%;
display: flex;
flex-wrap: wrap;
align-items: end;
gap: var(--pr-space-2);
padding-block-start: var(--pr-tab-rise);
}
.pr-room[data-pr-themed="on"] .pr-bar {
background: var(--pr-bg);
}
@media (pointer: coarse) {
.pr-room:not([data-pr-themed="on"]) .pr-bar {
background-color: transparent;
background-image: none;
}
.pr-room:not([data-pr-themed="on"]) .pr-bar[data-pr-stuck="on"] {
background-color: var(--pr-bar-ground);
background-image: var(--pr-page-light-touch), var(--pr-page-light-touch-floor);
background-attachment: scroll, scroll;
background-position: var(--pr-h-bar-x, 0px) var(--pr-h-bar-y, 0px), var(--pr-h-bar-x, 0px) var(--pr-h-bar-y, 0px);
background-size: 100vw 100dvh, 100vw 100dvh;
}
}
.pr-panel *,
.pr-pick * {
scroll-margin-block-start: var(--pr-bar-room);
}
.pr-bar::after {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
block-size: var(--pr-line-width);
background: var(--pr-gold-line);
content: "";
}
.pr-tablist {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: var(--pr-space-1);
}
.pr-tab:not([data-pr-site="on"]) {
--pr-h-tab-radius: calc(var(--pr-tile-ratio) * 2 * var(--pr-tab-h));
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
block-size: var(--pr-tab-h);
min-inline-size: var(--pr-target);
padding-inline: var(--pr-space-3);
border: 0;
border-radius: var(--pr-h-tab-radius) var(--pr-h-tab-radius) 0 0;
background-color: var(--pr-lacquer);
background-image: var(--pr-h-tab-layer, none), linear-gradient(to bottom, var(--pr-h-tab-top, var(--pr-gloss)), var(--pr-lacquer) var(--pr-gloss-stop));
box-shadow: inset 0 var(--pr-edge-width) 0 var(--pr-edge-lit), inset var(--pr-edge-width) 0 0 var(--pr-edge), inset calc(-1 * var(--pr-edge-width)) 0 0 var(--pr-edge), var(--pr-tab-shadow);
color: var(--pr-gold);
font-weight: var(--pr-weight-gold);
white-space: nowrap;
overflow: visible;
}
.pr-tab:not([data-pr-site="on"]):hover,
.pr-tab:not([data-pr-site="on"]):focus-visible {
--pr-h-tab-top: var(--pr-gloss-hover);
}
.pr-tab:not([data-pr-site="on"])[aria-selected="true"] {
--pr-h-tab-layer: radial-gradient(ellipse var(--pr-tab-cone-size) at 50% 0%, color-mix(in srgb, var(--pr-light) var(--pr-tab-cone-mix), transparent), transparent 100%);
--pr-h-tab-top: color-mix(in srgb, var(--pr-light) var(--pr-light-mix), var(--pr-gloss));
transform: translateY(calc(-1 * var(--pr-tab-rise)));
box-shadow: inset 0 var(--pr-tab-rim) 0 var(--pr-rim), inset var(--pr-edge-width) 0 0 var(--pr-edge), inset calc(-1 * var(--pr-edge-width)) 0 0 var(--pr-edge), 0 var(--pr-tab-rise) 0 0 var(--pr-lacquer), var(--pr-tab-shadow);
}
.pr-tab[data-pr-site="on"] {
--tab-radius: calc(var(--tile-radius-ratio) * 2 * var(--tab-height));
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
block-size: var(--tab-height);
min-inline-size: var(--size-target-min);
padding-inline: var(--space-s);
border: 0;
border-radius: var(--tab-radius) var(--tab-radius) 0 0;
background-color: var(--lacquer-base);
background-image: var(--lacquer-layer, none), linear-gradient(to bottom, var(--lacquer-top, var(--lacquer-gloss)), var(--lacquer-base) var(--lacquer-gloss-stop));
box-shadow: inset 0 var(--lacquer-edge-width) 0 var(--lacquer-edge-lit), inset var(--lacquer-edge-width) 0 0 var(--lacquer-edge), inset calc(-1 * var(--lacquer-edge-width)) 0 0 var(--lacquer-edge), var(--tab-shadow);
color: var(--selector-icon);
font: inherit;
font-family: var(--font-body);
font-weight: var(--font-weight-gold);
white-space: nowrap;
cursor: pointer;
}
.pr-tab[data-pr-site="on"]:hover,
.pr-tab[data-pr-site="on"]:focus-visible {
--lacquer-top: var(--lacquer-gloss-hover);
}
.pr-tab[data-pr-site="on"][aria-selected="true"] {
--lacquer-layer: radial-gradient(ellipse var(--tab-cone-size) at 50% 0%, color-mix(in srgb, var(--selector-light) var(--tab-cone-mix), transparent), transparent 100%);
--lacquer-top: color-mix(in srgb, var(--selector-light) var(--lacquer-light-mix), var(--lacquer-gloss));
transform: translateY(calc(-1 * var(--tab-active-rise)));
box-shadow: inset 0 var(--tab-rim-width) 0 var(--selector-rim-light), inset var(--lacquer-edge-width) 0 0 var(--lacquer-edge), inset calc(-1 * var(--lacquer-edge-width)) 0 0 var(--lacquer-edge), 0 var(--tab-active-rise) 0 0 var(--lacquer-base), var(--tab-shadow);
}
.pr-tab[data-pr-site="on"]:focus-visible {
outline: var(--focus-width) solid var(--color-focus);
outline-offset: var(--focus-offset);
}
.pr-panel[hidden],
.pr-subpanel[hidden] {
display: none;
}
.pr-subpanel[data-pr-sub="themes"],
.pr-subpanel[data-pr-sub="music"] {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--pr-space-4);
align-content: start;
}
.pr-subbar {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: var(--pr-space-2) var(--pr-space-4);
margin-block-end: var(--pr-space-4);
}
.pr-subbar::after {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
block-size: var(--pr-line-width);
background: var(--pr-gold-line);
opacity: var(--pr-subline-opacity);
content: "";
}
.pr-subtablist {
display: flex;
min-inline-size: 0;
max-inline-size: 100%;
gap: var(--pr-space-1);
padding-block-start: var(--pr-subtab-rise);
overflow-x: auto;
scrollbar-width: none;
}
.pr-subtab {
--pr-h-tab-radius: calc(var(--pr-tile-ratio) * 2 * var(--pr-subtab-h));
z-index: 1;
flex: none;
display: inline-flex;
align-items: center;
block-size: var(--pr-subtab-h);
padding-inline: var(--pr-space-3);
border: 0;
border-radius: var(--pr-h-tab-radius) var(--pr-h-tab-radius) 0 0;
background-color: var(--pr-lacquer);
background-image: var(--pr-h-tab-layer, none), linear-gradient(to bottom, var(--pr-h-tab-top, var(--pr-gloss)), var(--pr-lacquer) var(--pr-gloss-stop));
box-shadow: inset 0 var(--pr-edge-width) 0 var(--pr-edge-lit), inset var(--pr-edge-width) 0 0 var(--pr-edge), inset calc(-1 * var(--pr-edge-width)) 0 0 var(--pr-edge);
color: var(--pr-gold);
font-size: var(--pr-text-s);
white-space: nowrap;
}
.pr-subtab:hover,
.pr-subtab:focus-visible {
--pr-h-tab-top: var(--pr-gloss-hover);
}
.pr-subtab[aria-selected="true"] {
--pr-h-tab-layer: radial-gradient(ellipse var(--pr-tab-cone-size) at 50% 0%, color-mix(in srgb, var(--pr-light) var(--pr-tab-cone-mix), transparent), transparent 100%);
--pr-h-tab-top: color-mix(in srgb, var(--pr-light) var(--pr-light-mix), var(--pr-gloss));
transform: translateY(calc(-1 * var(--pr-subtab-rise)));
box-shadow: inset 0 var(--pr-edge-width) 0 var(--pr-rim), inset var(--pr-edge-width) 0 0 var(--pr-edge), inset calc(-1 * var(--pr-edge-width)) 0 0 var(--pr-edge), 0 var(--pr-subtab-rise) 0 0 var(--pr-lacquer);
font-weight: var(--pr-weight-gold);
}
.pr-subtab:focus-visible {
outline-offset: calc(-1 * var(--pr-focus-width));
}
.pr-tab,
.pr-subtab {
gap: var(--pr-icon-gap);
}
.pr-icon {
flex: none;
inline-size: var(--pr-icon-size);
block-size: var(--pr-icon-size);
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
}
.pr-subtab .pr-icon,
.pr-section-option .pr-icon {
inline-size: var(--pr-icon-size-sub);
block-size: var(--pr-icon-size-sub);
}
.pr-emoji {
display: none;
flex: none;
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
font-weight: 400;
line-height: 1;
}
[data-pr-emoji="on"] > .pr-icon {
display: none;
}
[data-pr-emoji="on"] > .pr-emoji {
display: inline-block;
}
.pr-tab[data-pr-site="on"] .pr-icon {
inline-size: var(--space-m);
block-size: var(--space-m);
}
.pr-sum {
display: flex;
flex-wrap: wrap;
gap: var(--pr-space-1) var(--pr-space-4);
margin: 0;
padding-block-end: var(--pr-space-1);
}
.pr-sum-item {
display: flex;
align-items: baseline;
gap: var(--pr-space-1);
}
.pr-sum-label {
color: var(--pr-text-muted);
font-size: var(--pr-text-xs);
}
.pr-sum-value {
margin: 0;
color: var(--pr-gold);
font-weight: var(--pr-weight-gold);
font-variant-numeric: tabular-nums;
}
.pr-room[data-pr-guide="on"] .pr-bar,
.pr-room[data-pr-guide="on"] .pr-panel,
.pr-room[data-pr-guide="on"] .pr-sources {
display: none;
}
.pr-guide[hidden] {
display: none;
}
.pr-welcome {
display: grid;
gap: var(--pr-space-3);
inline-size: 100%;
max-inline-size: var(--pr-text-max);
margin-inline: auto;
}
.pr-wel-top,
.pr-wel-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--pr-space-2) var(--pr-space-3);
}
.pr-wel-nav .pr-button[data-pr-kind="main"] {
margin-inline-start: auto;
}
.pr-wel-count {
margin: 0;
color: var(--pr-text-muted);
font-size: var(--pr-text-s);
}
.pr-wel-card.pr-box {
gap: var(--pr-space-3);
padding: var(--pr-space-5) var(--pr-space-6);
}
.pr-box {
position: relative;
display: grid;
align-content: start;
gap: var(--pr-space-2);
padding: var(--pr-space-3) var(--pr-space-4);
border-radius: var(--pr-radius);
background-color: var(--pr-lacquer);
background-image: linear-gradient(to bottom, var(--pr-gloss), var(--pr-lacquer) var(--pr-gloss-stop));
box-shadow: inset 0 0 0 var(--pr-edge-width) var(--pr-edge), inset 0 var(--pr-edge-width) 0 var(--pr-edge-lit), var(--pr-shadow);
}
.pr-box::before {
position: absolute;
inset-block-start: 0;
inset-inline: var(--pr-radius);
block-size: var(--pr-line-width);
background: var(--pr-gold-line);
pointer-events: none;
content: "";
}
.pr-loading {
margin: 0;
color: var(--pr-text-muted);
}
.pr-load-error {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--pr-space-3);
}
.pr-h2,
.pr-wel-title {
margin: 0;
font-family: var(--pr-font-head, inherit);
color: var(--pr-gold);
font-size: var(--pr-text-l);
font-weight: var(--pr-weight-gold);
}
.pr-h3 {
margin: 0;
font-family: var(--pr-font-head, inherit);
color: var(--pr-gold);
font-size: var(--pr-text-m);
font-weight: var(--pr-weight-gold);
}
.pr-text,
.pr-note,
.pr-msg,
.pr-warning {
margin: 0;
max-inline-size: var(--pr-text-max);
color: var(--pr-text);
}
.pr-basal {
min-block-size: 1lh;
}
@media (max-width: 40em) {
.pr-basal {
min-block-size: 2lh;
}
}
.pr-note {
color: var(--pr-text-muted);
font-size: var(--pr-text-s);
}
.pr-msg {
font-size: var(--pr-text-s);
}
.pr-msg:empty,
.pr-error:empty {
display: none;
}
.pr-msg[data-pr-kind="error"],
.pr-error {
margin: 0;
color: var(--pr-error);
}
.pr-warning {
padding: var(--pr-space-2) var(--pr-space-3);
border-radius: var(--pr-radius);
box-shadow: inset 0 0 0 var(--pr-border-width) var(--pr-gold-deep);
font-size: var(--pr-text-s);
}
.pr-section,
.pr-start,
.pr-profile-form {
display: grid;
gap: var(--pr-space-3);
align-content: start;
}
.pr-section + .pr-section,
.pr-charts + .pr-section {
margin-block-start: var(--pr-space-6);
}
.pr-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--pr-space-2) var(--pr-space-3);
}
.pr-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--pr-field-min)), 1fr));
gap: var(--pr-space-3);
}
.pr-field {
display: grid;
gap: var(--pr-space-1);
align-content: start;
}
.pr-field-inline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--pr-space-2);
}
.pr-label,
.pr-legend {
color: var(--pr-text);
font-size: var(--pr-text-s);
}
.pr-fieldset {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--pr-space-1) var(--pr-space-4);
margin: 0;
padding: 0;
border: 0;
}
.pr-legend {
margin-block-end: var(--pr-space-1);
padding: 0;
}
.pr-fieldset > .pr-note,
.pr-fieldset > .pr-ed-rows {
flex-basis: 100%;
}
.pr-choice {
display: flex;
gap: var(--pr-space-2);
align-items: center;
min-block-size: var(--pr-target);
color: var(--pr-text);
}
.pr-input,
.pr-select,
.pr-textarea {
box-sizing: border-box;
max-inline-size: 100%;
min-block-size: var(--pr-target);
padding-block: var(--pr-space-1);
padding-inline: var(--pr-space-3);
border: var(--pr-field-line-width) solid var(--pr-field-line);
border-radius: var(--pr-field-radius);
background-color: var(--pr-field-bg);
color: var(--pr-text);
font: inherit;
font-size: var(--pr-text-s);
}
.pr-input::placeholder {
color: var(--pr-text-muted);
opacity: 1;
}
.pr-textarea {
inline-size: 100%;
font-family: monospace;
resize: vertical;
}
.pr-select {
appearance: none;
padding-inline-end: calc(var(--pr-space-3) * 2 + var(--pr-select-arrow) * 2);
background-image: linear-gradient(45deg, transparent 50%, var(--pr-gold) 50%), linear-gradient(-45deg, transparent 50%, var(--pr-gold) 50%);
background-position: right calc(var(--pr-space-3) + var(--pr-select-arrow)) center, right var(--pr-space-3) center;
background-size: var(--pr-select-arrow) var(--pr-select-arrow);
background-repeat: no-repeat;
cursor: pointer;
}
[dir="rtl"] .pr-select {
background-position: left var(--pr-space-3) center, left calc(var(--pr-space-3) + var(--pr-select-arrow)) center;
}
.pr-field .pr-input,
.pr-field .pr-select {
inline-size: 100%;
}
.pr-radio,
.pr-check {
flex: none;
appearance: none;
inline-size: var(--pr-check-size);
block-size: var(--pr-check-size);
margin: 0;
border: var(--pr-field-line-width) solid var(--pr-field-line);
border-radius: var(--pr-field-radius);
background: var(--pr-field-bg);
cursor: pointer;
}
.pr-radio {
border-radius: 50%;
}
.pr-radio:checked,
.pr-check:checked {
border-color: var(--pr-gold);
background: var(--pr-gold);
box-shadow: inset 0 0 0 var(--pr-check-mark) var(--pr-lacquer);
}
.pr-icon-button {
flex: none;
inline-size: var(--pr-target);
block-size: var(--pr-target);
padding: 0;
border: 0;
border-radius: var(--pr-radius);
background: var(--pr-lacquer) linear-gradient(to bottom, var(--pr-gloss), var(--pr-lacquer) var(--pr-gloss-stop));
box-shadow: inset 0 0 0 var(--pr-border-width) var(--pr-gold-deep), var(--pr-shadow);
color: var(--pr-gold);
}
.pr-icon-button:hover {
box-shadow: inset 0 0 0 var(--pr-border-width) var(--pr-gold), var(--pr-shadow-hover);
}
.pr-icon-button::before,
.pr-icon-button::after,
.pr-chip-remove::before,
.pr-chip-remove::after {
position: absolute;
inset: 0;
margin: auto;
content: "";
}
.pr-icon-button[data-pr-icon="prev"]::before,
.pr-icon-button[data-pr-icon="next"]::before {
inline-size: var(--pr-chevron);
block-size: var(--pr-chevron);
border-block-start: var(--pr-stroke) solid currentColor;
border-inline-start: var(--pr-stroke) solid currentColor;
transform: rotate(-45deg);
}
.pr-icon-button[data-pr-icon="next"]::before {
transform: rotate(135deg);
}
[dir="rtl"] .pr-icon-button[data-pr-icon="prev"]::before {
transform: rotate(45deg);
}
[dir="rtl"] .pr-icon-button[data-pr-icon="next"]::before {
transform: rotate(-135deg);
}
.pr-chip-remove::before,
.pr-chip-remove::after {
inline-size: var(--pr-cross);
block-size: var(--pr-stroke);
background: currentColor;
transform: rotate(45deg);
}
.pr-chip-remove::after {
transform: rotate(-45deg);
}
.pr-details {
display: grid;
gap: var(--pr-space-2);
}
.pr-summary {
display: flex;
align-items: center;
min-block-size: var(--pr-target);
color: var(--pr-gold);
cursor: pointer;
}
.pr-start-options {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--pr-option-min)), 1fr));
gap: var(--pr-space-2);
}
.pr-start-option {
display: grid;
align-content: start;
gap: var(--pr-space-1);
padding: var(--pr-space-3);
border: 0;
border-radius: var(--pr-radius);
background-color: var(--pr-lacquer);
background-image: linear-gradient(to bottom, var(--pr-gloss), var(--pr-lacquer) var(--pr-gloss-stop));
box-shadow: inset 0 0 0 var(--pr-edge-width) var(--pr-edge), inset 0 var(--pr-edge-width) 0 var(--pr-edge-lit), var(--pr-shadow);
color: var(--pr-text);
text-align: start;
}
.pr-start-option:hover {
box-shadow: inset 0 0 0 var(--pr-edge-width) var(--pr-edge-lit), var(--pr-shadow-hover);
}
.pr-start-option[aria-pressed="true"] {
box-shadow: inset 0 0 0 var(--pr-tab-rim) var(--pr-gold), var(--pr-shadow);
}
.pr-start-title {
color: var(--pr-gold);
font-weight: var(--pr-weight-gold);
}
.pr-start-note,
.pr-start-below {
color: var(--pr-text-muted);
font-size: var(--pr-text-s);
}
.pr-start-below {
color: var(--pr-error);
}
.pr-tools {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--pr-space-2) var(--pr-space-4);
margin-block-end: var(--pr-space-3);
font-size: var(--pr-text-s);
}
.pr-tools-text {
margin: 0;
color: var(--pr-text);
}
.pr-tools-actions {
display: flex;
flex-wrap: wrap;
gap: var(--pr-space-2);
margin-inline-start: auto;
}
.pr-week-wrap {
display: grid;
gap: var(--pr-space-2);
container: pr-week / inline-size;
}
.pr-week-table {
inline-size: 100%;
border-collapse: separate;
border-spacing: var(--pr-space-1);
table-layout: fixed;
}
.pr-week-corner,
.pr-week-slot {
inline-size: var(--pr-slot-width);
}
.pr-week-day,
.pr-week-slot {
padding: var(--pr-space-1);
color: var(--pr-gold);
font-size: var(--pr-text-s);
font-weight: var(--pr-weight-gold);
text-align: start;
vertical-align: middle;
}
.pr-week-day {
border-block-end: var(--pr-line-width) solid var(--pr-gold-deep);
}
.pr-week-day-name,
.pr-week-day-tot,
.pr-week-slot-name {
display: block;
}
.pr-week-day-tot {
color: var(--pr-text-muted);
font-size: var(--pr-text-xs);
font-weight: normal;
}
.pr-week-slot {
color: var(--pr-text-muted);
font-weight: normal;
}
.pr-week-cell {
block-size: 1px;
padding: 0;
color: var(--pr-text);
font-size: var(--pr-text-s);
vertical-align: top;
}
.pr-week-row[data-pr-row="total"] .pr-week-cell {
padding: var(--pr-space-1) var(--pr-space-2);
color: var(--pr-gold);
font-weight: var(--pr-weight-gold);
}
.pr-cell-button,
.pr-week-ro {
display: grid;
align-content: start;
gap: var(--pr-space-1);
box-sizing: border-box;
inline-size: 100%;
block-size: 100%;
min-block-size: var(--pr-cell-min);
padding: var(--pr-space-2);
border: 0;
border-radius: var(--pr-field-radius);
background-color: var(--pr-lacquer);
background-image: linear-gradient(to bottom, var(--pr-gloss), var(--pr-lacquer) var(--pr-gloss-stop));
box-shadow: inset 0 0 0 var(--pr-edge-width) var(--pr-edge), inset 0 var(--pr-edge-width) 0 var(--pr-edge-lit);
color: var(--pr-text);
font-size: var(--pr-text-xs);
text-align: start;
overflow-wrap: anywhere;
-webkit-hyphens: auto;
hyphens: auto;
}
.pr-cell-button:hover,
.pr-cell-button[aria-expanded="true"] {
box-shadow: inset 0 0 0 var(--pr-border-width) var(--pr-gold), var(--pr-shadow);
}
.pr-cell-button[data-pr-empty="on"] .pr-week-meal {
color: var(--pr-text-muted);
}
.pr-week-meal {
display: block;
}
.pr-week-meal-item {
display: block;
}
.pr-week-kcal {
display: block;
color: var(--pr-text-muted);
font-size: var(--pr-text-xs);
font-variant-numeric: tabular-nums;
}
.pr-chips {
display: flex;
flex-wrap: wrap;
gap: var(--pr-space-1);
margin: 0 0 var(--pr-space-1);
padding: 0;
list-style: none;
}
.pr-chip {
display: inline-flex;
align-items: center;
gap: var(--pr-space-1);
max-inline-size: 100%;
padding-block: var(--pr-space-1);
padding-inline: var(--pr-space-2) var(--pr-space-1);
border-radius: var(--pr-field-radius);
background: var(--pr-lacquer) linear-gradient(to bottom, var(--pr-gloss), var(--pr-lacquer) var(--pr-gloss-stop));
box-shadow: inset 0 0 0 var(--pr-edge-width) var(--pr-edge);
font-size: var(--pr-text-xs);
overflow-wrap: anywhere;
}
.pr-chip-text {
min-inline-size: 0;
}
.pr-chip-remove {
position: relative;
flex: none;
inline-size: var(--pr-chip-x);
block-size: var(--pr-chip-x);
padding: 0;
border: 0;
border-radius: var(--pr-field-radius);
background: transparent;
color: var(--pr-gold);
cursor: pointer;
}
.pr-chip-remove:hover {
background: var(--pr-gloss-hover);
box-shadow: inset 0 0 0 var(--pr-border-width) var(--pr-gold-deep);
}
.pr-add-button {
box-sizing: border-box;
inline-size: 100%;
min-block-size: var(--pr-target);
padding: var(--pr-space-1) var(--pr-space-2);
border: var(--pr-dash) dashed var(--pr-gold-deep);
border-radius: var(--pr-field-radius);
background: transparent;
color: var(--pr-gold);
font-size: var(--pr-text-xs);
}
.pr-add-button:hover,
.pr-add-button[aria-expanded="true"] {
border-color: var(--pr-gold);
background: var(--pr-gloss-hover);
}
.pr-pick {
gap: var(--pr-space-3);
}
.pr-pick-head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--pr-space-2) var(--pr-space-3);
}
.pr-pick-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--pr-pick-max)), 1fr));
gap: var(--pr-space-1);
margin: 0;
padding: 0;
list-style: none;
}
.pr-pick-option {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--pr-space-2);
box-sizing: border-box;
inline-size: 100%;
min-block-size: var(--pr-target);
padding: var(--pr-space-1) var(--pr-space-3);
border: 0;
border-radius: var(--pr-field-radius);
background: var(--pr-lacquer) linear-gradient(to bottom, var(--pr-gloss), var(--pr-lacquer) var(--pr-gloss-stop));
box-shadow: inset 0 0 0 var(--pr-edge-width) var(--pr-edge);
color: var(--pr-text);
font-size: var(--pr-text-s);
text-align: start;
overflow-wrap: anywhere;
}
.pr-pick-option:hover {
box-shadow: inset 0 0 0 var(--pr-border-width) var(--pr-gold-deep);
}
.pr-pick-option[aria-pressed="true"],
.pr-pick-option[data-pr-on="on"] {
box-shadow: inset 0 0 0 var(--pr-tab-rim) var(--pr-gold);
}
.pr-pick-option[data-pr-on] {
flex-wrap: wrap;
align-items: center;
cursor: auto;
}
.pr-pick-choice {
flex: 1 1 auto;
min-inline-size: 0;
cursor: pointer;
}
.pr-pick-portions {
display: flex;
align-items: center;
gap: var(--pr-space-1);
}
.pr-pick-portions > .pr-input {
inline-size: var(--pr-qty-width);
}
.pr-pick-option > .pr-error {
flex-basis: 100%;
}
.pr-pick-kcal {
flex: none;
color: var(--pr-text-muted);
font-size: var(--pr-text-xs);
}
.pr-daybar,
.pr-daynav {
display: none;
align-items: center;
gap: var(--pr-space-1);
}
.pr-daynav {
justify-content: space-between;
}
.pr-daynav-name {
color: var(--pr-gold);
font-weight: var(--pr-weight-gold);
}
.pr-daybar-day {
flex: 1 1 0;
min-inline-size: 0;
min-block-size: var(--pr-target);
padding: 0;
border: 0;
border-radius: var(--pr-field-radius);
background: var(--pr-lacquer) linear-gradient(to bottom, var(--pr-gloss), var(--pr-lacquer) var(--pr-gloss-stop));
box-shadow: inset 0 0 0 var(--pr-edge-width) var(--pr-edge);
color: var(--pr-gold);
font-size: var(--pr-text-s);
}
.pr-daybar-day[aria-pressed="true"] {
box-shadow: inset 0 var(--pr-tab-rim) 0 var(--pr-rim), inset 0 0 0 var(--pr-edge-width) var(--pr-edge-lit);
font-weight: var(--pr-weight-gold);
}
@container pr-week (max-width: 64rem) {
.pr-daybar,
.pr-daynav {
display: flex;
}
.pr-week-day[data-pr-current="off"],
.pr-week-cell[data-pr-current="off"] {
display: none;
}
.pr-week-corner,
.pr-week-slot {
inline-size: var(--pr-slot-narrow);
}
}
.pr-charts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--pr-chart-min)), 1fr));
gap: var(--pr-space-3);
}
.pr-chart {
inline-size: 100%;
block-size: auto;
}
.pr-chart-axis {
stroke: var(--pr-field-line);
stroke-width: var(--pr-axis-stroke);
}
.pr-chart-label {
fill: var(--pr-text-muted);
font-size: var(--pr-chart-text);
}
.pr-chart-bar {
fill: var(--pr-bar);
}
.pr-chart-bar[data-pr-over="on"] {
fill: var(--pr-bar-over);
}
.pr-chart-basal {
stroke: var(--pr-basal);
stroke-width: var(--pr-basal-stroke);
stroke-dasharray: var(--pr-basal-dash);
}
.pr-chart-line {
stroke-width: var(--pr-line-stroke);
stroke-linecap: round;
opacity: var(--pr-line-dim);
}
.pr-chart-line[data-pr-on="on"] {
stroke-width: var(--pr-line-stroke-on);
opacity: 1;
}
.pr-chart-line[data-pr-scenario="a"] {
stroke: var(--pr-sc-a);
}
.pr-chart-line[data-pr-scenario="b"] {
stroke: var(--pr-sc-b);
}
.pr-chart-line[data-pr-scenario="c"] {
stroke: var(--pr-sc-c);
}
.pr-legend-list {
display: flex;
flex-wrap: wrap;
gap: var(--pr-space-1) var(--pr-space-3);
margin: 0;
padding: 0;
list-style: none;
font-size: var(--pr-text-s);
}
.pr-legend-item {
display: flex;
gap: var(--pr-space-1);
align-items: center;
color: var(--pr-text);
}
.pr-legend-item::before {
inline-size: var(--pr-legend-w);
block-size: var(--pr-legend-h);
background: var(--pr-sc-c);
content: "";
}
.pr-legend-item[data-pr-scenario="a"]::before {
background: var(--pr-sc-a);
}
.pr-legend-item[data-pr-scenario="b"]::before {
background: var(--pr-sc-b);
}
.pr-table {
border-collapse: collapse;
font-size: var(--pr-text-s);
}
.pr-table-th,
.pr-table-td {
padding: var(--pr-space-1) var(--pr-space-2);
border-block-end: var(--pr-line-width) solid var(--pr-edge-lit);
color: var(--pr-text);
font-weight: normal;
text-align: start;
}
.pr-table-head .pr-table-th {
color: var(--pr-gold);
}
.pr-prep-list,
.pr-cat-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--pr-card-min)), 1fr));
gap: var(--pr-space-3);
margin: 0;
padding: 0;
list-style: none;
}
.pr-prep-name,
.pr-cat-name {
color: var(--pr-gold);
font-weight: var(--pr-weight-gold);
overflow-wrap: anywhere;
}
.pr-cat-item {
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
}
.pr-cat-item .pr-note {
grid-column: 1;
}
.pr-cat-item .pr-button {
grid-column: 2;
grid-row: 1 / span 2;
}
.pr-shop-list {
columns: var(--pr-shop-col);
column-gap: var(--pr-space-5);
margin: 0;
padding: 0;
list-style: none;
}
.pr-shop-item {
display: flex;
justify-content: space-between;
gap: var(--pr-space-2);
padding-block: var(--pr-space-1);
border-block-end: var(--pr-line-width) solid var(--pr-edge);
break-inside: avoid;
font-size: var(--pr-text-s);
}
.pr-shop-qty {
flex: none;
color: var(--pr-text-muted);
font-variant-numeric: tabular-nums;
}
.pr-steps {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--pr-space-1);
margin: 0;
padding-inline-start: var(--pr-space-5);
color: var(--pr-text);
}
[dir="rtl"] .pr-step[dir="ltr"],
[dir="ltr"] .pr-step[dir="rtl"] {
list-style-position: inside;
}
.pr-cat-tools {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--pr-space-2) var(--pr-space-3);
}
.pr-search {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--pr-space-2);
margin-inline-start: auto;
}
.pr-search .pr-input {
inline-size: var(--pr-search-width);
}
.pr-dialog {
inline-size: min(var(--pr-dialog-max), calc(100vw - 2 * var(--pr-space-4)));
max-block-size: calc(100dvh - 2 * var(--pr-space-4));
padding: var(--pr-space-5);
border: 0;
border-radius: var(--pr-radius);
background: var(--pr-lacquer) linear-gradient(to bottom, var(--pr-gloss), var(--pr-lacquer) var(--pr-gloss-stop));
box-shadow: inset 0 0 0 var(--pr-edge-width) var(--pr-edge), var(--pr-shadow);
color: var(--pr-text);
}
.pr-dialog::backdrop {
background: var(--pr-backdrop);
}
.pr-ed-form {
display: grid;
gap: var(--pr-space-3);
}
.pr-ed-rows {
display: grid;
gap: var(--pr-space-1);
margin: 0;
padding: 0;
list-style: none;
}
.pr-ed-row {
display: grid;
grid-template-columns: minmax(0, 1fr) var(--pr-qty-width) auto auto;
gap: var(--pr-space-1);
align-items: center;
}
.pr-ed-row .pr-select {
inline-size: 100%;
}
.pr-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--pr-space-2);
}
.pr-kpi-value .pr-input {
inline-size: var(--pr-weight-input);
}
.pr-sources {
display: grid;
gap: var(--pr-space-1);
max-inline-size: var(--pr-text-max);
margin-block-start: var(--pr-space-5);
color: var(--pr-text-muted);
font-size: var(--pr-text-xs);
}
.pr-sources-title {
margin: 0;
color: var(--pr-gold);
font-size: var(--pr-text-s);
font-weight: var(--pr-weight-gold);
}
.pr-sources-text {
margin: 0;
}
.pr-status,
.pr-alert {
margin: 0;
font-size: var(--pr-text-s);
}
.pr-status {
position: absolute;
inset-block-end: 100%;
inset-inline-end: 0;
max-inline-size: 60%;
color: var(--pr-text-muted);
text-align: end;
}
.pr-status:empty,
.pr-alert:empty {
display: none;
}
.pr-alert {
color: var(--pr-error);
}
.pr-panel[data-pr-tab="data"][data-pr-site="on"] {
display: grid;
background: var(--color-bg);
gap: var(--space-l);
padding-block-start: var(--space-m);
color: var(--color-text);
font-family: var(--font-body);
}
.pr-data-section {
display: grid;
gap: var(--space-xs);
max-inline-size: var(--size-text-max);
}
.pr-data-title,
.pr-preview-title {
margin: 0;
}
.pr-panel[data-pr-tab="data"][data-pr-site="on"] .pr-data-title,
.pr-panel[data-pr-tab="data"][data-pr-site="on"] .pr-preview-title {
color: var(--selector-icon);
font-family: var(--font-heading);
font-size: var(--text-l);
font-weight: var(--font-weight-gold);
}
.pr-panel[data-pr-tab="data"][data-pr-site="on"] .pr-preview-title {
font-size: var(--text-m);
}
.pr-data-note,
.pr-preview-kind,
.pr-preview-ignored {
margin: 0;
}
.pr-panel[data-pr-tab="data"][data-pr-site="on"] .pr-data-note,
.pr-panel[data-pr-tab="data"][data-pr-site="on"] .pr-preview-kind,
.pr-panel[data-pr-tab="data"][data-pr-site="on"] .pr-preview-ignored,
.pr-label[data-pr-site="on"] {
margin: 0;
color: var(--color-text);
font-size: var(--text-s);
}
.pr-error[data-pr-site="on"] {
color: var(--color-error);
}
.pr-notice {
margin: 0;
}
.pr-panel[data-pr-tab="data"][data-pr-site="on"] .pr-notice {
max-inline-size: var(--size-text-max);
padding: var(--space-xs) var(--space-s);
border: var(--border-width) solid var(--selector-icon);
border-radius: var(--lacquer-radius);
color: var(--color-text);
font-size: var(--text-s);
}
.pr-notice[hidden] {
display: none;
}
.pr-file[data-pr-site="on"],
.pr-textarea[data-pr-site="on"] {
box-sizing: border-box;
max-inline-size: 100%;
min-block-size: var(--size-target-min);
padding-block: var(--field-padding-block);
padding-inline: var(--field-padding-inline);
border: var(--field-border-width) solid var(--field-border);
border-radius: var(--field-radius);
background: var(--field-bg);
color: var(--color-text);
font: inherit;
font-size: var(--text-s);
}
.pr-textarea[data-pr-site="on"] {
inline-size: 100%;
font-family: monospace;
}
.pr-file[data-pr-site="on"]::file-selector-button {
margin-inline-end: var(--space-s);
padding: var(--space-2xs) var(--space-s);
border: 0;
border-radius: var(--lacquer-radius);
background: var(--lacquer-gloss);
box-shadow: inset 0 0 0 var(--border-width) var(--color-gold-deep);
color: var(--selector-icon);
font: inherit;
font-weight: var(--font-weight-gold);
cursor: pointer;
}
.pr-actions[data-pr-site="on"] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-xs);
}
.pr-button[data-pr-site="on"] {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
justify-self: start;
min-block-size: var(--size-target-min);
min-inline-size: var(--size-target-min);
padding-block: 0;
padding-inline: var(--space-l);
border: 0;
border-radius: var(--lacquer-radius);
background-color: var(--lacquer-base);
background-image: none, linear-gradient(to bottom, var(--lacquer-top, var(--lacquer-gloss)), var(--lacquer-base) var(--lacquer-gloss-stop));
box-shadow: inset 0 0 0 var(--lacquer-edge-width) var(--lacquer-edge), inset 0 var(--lacquer-edge-width) 0 var(--lacquer-edge-lit), var(--lacquer-shadow);
color: var(--color-text);
font: inherit;
font-family: var(--font-body);
font-size: var(--text-m);
cursor: pointer;
}
.pr-button[data-pr-site="on"] .pr-button-text {
background-image: linear-gradient(var(--gold-text-angle), var(--selector-icon-active), var(--selector-icon) 45%, var(--color-gold-deep));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: var(--font-weight-gold);
}
.pr-button[data-pr-site="on"][data-pr-kind="main"] .pr-button-text {
background-image: none;
color: var(--gold-tab-ink);
}
.pr-button[data-pr-site="on"]:hover,
.pr-button[data-pr-site="on"]:focus-visible {
--lacquer-top: var(--lacquer-gloss-hover);
box-shadow: inset 0 0 0 var(--lacquer-edge-width) var(--lacquer-edge), inset 0 var(--lacquer-edge-width) 0 var(--lacquer-edge-lit), var(--lacquer-shadow-hover);
}
@media (prefers-contrast: more) {
.pr-button[data-pr-site="on"] .pr-button-text {
background-image: none;
color: var(--color-text);
}
.pr-button[data-pr-site="on"][data-pr-kind="main"] .pr-button-text {
color: var(--gold-tab-ink);
}
}
.pr-button[data-pr-site="on"][data-pr-kind="main"] {
background-color: var(--selector-icon);
background-image: linear-gradient(to bottom, var(--selector-icon-active), var(--selector-icon) 55%, var(--color-gold-deep));
box-shadow: inset 0 var(--lacquer-edge-width) 0 var(--gold-tab-gloss), var(--tab-shadow);
color: var(--gold-tab-ink);
}
.pr-button[data-pr-site="on"][data-pr-kind="main"]:hover,
.pr-button[data-pr-site="on"][data-pr-kind="main"]:focus-visible {
background-image: linear-gradient(to bottom, color-mix(in srgb, var(--selector-icon-active), #ffffff var(--gold-tab-hover-mix)), var(--selector-icon) 55%, var(--color-gold-deep));
}
.pr-button[data-pr-site="on"][data-pr-armed="on"] {
box-shadow: inset 0 0 0 var(--tab-rim-width) var(--color-error), var(--lacquer-shadow-hover);
color: var(--color-text);
}
.pr-button[data-pr-site="on"]:focus-visible,
.pr-panel[data-pr-tab="data"][data-pr-site="on"] .pr-preview:focus-visible,
.pr-file[data-pr-site="on"]:focus-visible,
.pr-textarea[data-pr-site="on"]:focus-visible,
.pr-panel[data-pr-tab="data"][data-pr-site="on"]:focus-visible {
outline: var(--focus-width) solid var(--color-focus);
outline-offset: var(--focus-offset);
}
.pr-preview {
display: grid;
}
.pr-panel[data-pr-tab="data"][data-pr-site="on"] .pr-preview {
gap: var(--space-xs);
padding: var(--space-s);
border: var(--border-width) solid var(--color-border);
border-radius: var(--lacquer-radius);
background: var(--lacquer-gloss);
}
.pr-preview-list {
margin: 0;
}
.pr-panel[data-pr-tab="data"][data-pr-site="on"] .pr-preview-list {
padding-inline-start: var(--space-m);
}
.pr-panel[data-pr-tab="data"][data-pr-site="on"] .pr-preview-item {
color: var(--color-text);
}
.pr-panel[data-pr-tab="data"]:not([data-pr-site="on"]) {
display: grid;
gap: var(--pr-space-5);
padding-block-start: var(--pr-space-4);
color: var(--pr-text);
font-family: var(--pr-font);
}
.pr-panel[data-pr-tab="data"]:not([data-pr-site="on"]) .pr-data-section {
gap: var(--pr-space-2);
max-inline-size: var(--pr-text-max);
}
.pr-panel[data-pr-tab="data"]:not([data-pr-site="on"]) .pr-data-title,
.pr-panel[data-pr-tab="data"]:not([data-pr-site="on"]) .pr-preview-title {
color: var(--pr-gold);
font-family: var(--pr-font-head);
font-size: var(--pr-text-l);
font-weight: var(--pr-weight-gold);
}
.pr-panel[data-pr-tab="data"]:not([data-pr-site="on"]) .pr-preview-title {
font-size: var(--pr-text-m);
}
.pr-panel[data-pr-tab="data"]:not([data-pr-site="on"]) .pr-data-note,
.pr-panel[data-pr-tab="data"]:not([data-pr-site="on"]) .pr-preview-kind,
.pr-panel[data-pr-tab="data"]:not([data-pr-site="on"]) .pr-preview-ignored {
color: var(--pr-text);
font-size: var(--pr-text-s);
}
.pr-panel[data-pr-tab="data"]:not([data-pr-site="on"]) .pr-notice {
max-inline-size: var(--pr-text-max);
padding: var(--pr-space-2) var(--pr-space-3);
border: var(--pr-border-width) solid var(--pr-gold);
border-radius: var(--pr-radius);
color: var(--pr-text);
font-size: var(--pr-text-s);
}
.pr-panel[data-pr-tab="data"]:not([data-pr-site="on"]) .pr-preview {
gap: var(--pr-space-2);
padding: var(--pr-space-3);
border: var(--pr-border-width) solid var(--pr-field-line);
border-radius: var(--pr-radius);
background: var(--pr-gloss);
}
.pr-panel[data-pr-tab="data"]:not([data-pr-site="on"]) .pr-preview-list {
padding-inline-start: var(--pr-space-4);
}
.pr-panel[data-pr-tab="data"]:not([data-pr-site="on"]) .pr-preview-item {
color: var(--pr-text);
}
.pr-panel[data-pr-tab="data"]:not([data-pr-site="on"]) .pr-button {
justify-self: start;
}
.pr-file:not([data-pr-site="on"]) {
box-sizing: border-box;
max-inline-size: 100%;
min-block-size: var(--pr-target);
padding: var(--pr-space-2) var(--pr-space-3);
border: var(--pr-field-line-width) solid var(--pr-field-line);
border-radius: var(--pr-field-radius);
background: var(--pr-field-bg);
color: var(--pr-text);
font: inherit;
font-size: var(--pr-text-s);
}
.pr-file:not([data-pr-site="on"])::file-selector-button {
margin-inline-end: var(--pr-space-3);
padding: var(--pr-space-1) var(--pr-space-3);
border: 0;
border-radius: var(--pr-radius);
background: var(--pr-gloss);
box-shadow: inset 0 0 0 var(--pr-border-width) var(--pr-gold-deep);
color: var(--pr-gold);
font: inherit;
font-weight: var(--pr-weight-gold);
cursor: pointer;
}
.pr-panel[data-pr-tab="data"]:not([data-pr-site="on"]):focus-visible,
.pr-panel[data-pr-tab="data"]:not([data-pr-site="on"]) .pr-preview:focus-visible,
.pr-file:not([data-pr-site="on"]):focus-visible {
outline: var(--pr-focus-width) solid var(--pr-focus);
outline-offset: var(--pr-focus-offset);
}
.pr-button[data-pr-site="on"][data-pr-end="on"] {
margin-block-start: var(--space-xl);
}
.pr-button:not([data-pr-site="on"])[data-pr-end="on"] {
margin-block-start: var(--pr-space-6);
}
.pr-theme-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--pr-theme-min)), 1fr));
gap: var(--pr-space-2);
margin: 0;
padding: 0;
list-style: none;
}
.pr-theme-item {
display: grid;
}
.pr-theme {
display: grid;
align-content: start;
justify-items: start;
gap: var(--pr-space-2);
min-block-size: var(--pr-target);
padding: var(--pr-space-3);
border: 0;
border-radius: var(--pr-radius);
background-color: var(--pr-lacquer);
background-image: linear-gradient(to bottom, var(--pr-gloss), var(--pr-lacquer) var(--pr-gloss-stop));
box-shadow: inset 0 0 0 var(--pr-edge-width) var(--pr-edge), inset 0 var(--pr-edge-width) 0 var(--pr-edge-lit), var(--pr-shadow);
color: var(--pr-text);
text-align: start;
}
.pr-theme:hover {
box-shadow: inset 0 0 0 var(--pr-edge-width) var(--pr-edge-lit), var(--pr-shadow-hover);
}
.pr-theme[aria-pressed="true"] {
box-shadow: inset 0 0 0 var(--pr-tab-rim) var(--pr-gold), var(--pr-shadow);
}
.pr-theme-name {
color: var(--pr-gold);
font-weight: var(--pr-weight-gold);
}
.pr-theme-motion {
padding-inline: var(--pr-space-1);
border: var(--pr-border-width) solid var(--pr-text-muted);
border-radius: var(--pr-field-radius);
color: var(--pr-text-muted);
font-size: var(--pr-text-xs);
}
.pr-swatches {
inline-size: var(--pr-swatch-w);
block-size: var(--pr-swatch-h);
}
.pr-swatch {
stroke: var(--pr-edge-lit);
stroke-width: 0.5;
}
.pr-warn-list {
margin: 0;
padding-inline-start: var(--pr-space-5);
}
.pr-song-list,
.pr-midi-list {
display: grid;
gap: var(--pr-space-2);
margin: 0;
padding: 0;
list-style: none;
}
.pr-song-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--pr-space-2) var(--pr-space-3);
}
.pr-song-name {
color: var(--pr-gold);
font-weight: var(--pr-weight-gold);
}
.pr-song[data-pr-drag-from="on"] {
opacity: var(--pr-disabled);
}
.pr-song[data-pr-drop="on"] {
box-shadow: inset 0 var(--pr-tab-rim) 0 var(--pr-gold), var(--pr-shadow-hover);
}
.pr-song-ed {
gap: var(--pr-space-3);
}
.pr-voice {
display: grid;
gap: var(--pr-space-2);
min-inline-size: 0;
margin: 0;
padding: var(--pr-space-3) 0 0;
border: 0;
border-block-start: var(--pr-border-width) solid var(--pr-edge-lit);
}
.pr-voice[data-pr-on="off"] .pr-textarea {
opacity: var(--pr-disabled);
}
.pr-icon-button[data-pr-icon="up"]::before,
.pr-icon-button[data-pr-icon="down"]::before {
inline-size: var(--pr-chevron);
block-size: var(--pr-chevron);
border-block-start: var(--pr-stroke) solid currentColor;
border-inline-start: var(--pr-stroke) solid currentColor;
transform: translateY(25%) rotate(45deg);
}
.pr-icon-button[data-pr-icon="down"]::before {
transform: translateY(-25%) rotate(-135deg);
}
[dir="rtl"] .pr-icon-button[data-pr-icon="up"]::before {
transform: translateY(25%) rotate(-45deg);
}
[dir="rtl"] .pr-icon-button[data-pr-icon="down"]::before {
transform: translateY(-25%) rotate(135deg);
}
.pr-icon-button[data-pr-icon="drag"] {
cursor: grab;
touch-action: none;
}
.pr-icon-button[data-pr-icon="drag"]::before {
inline-size: var(--pr-cross);
block-size: var(--pr-stroke);
background: currentColor;
box-shadow: 0 calc(-1 * var(--pr-drag-gap)) 0 currentColor, 0 var(--pr-drag-gap) 0 currentColor;
}
.pr-icon-button:disabled {
opacity: var(--pr-disabled);
cursor: default;
}
.pr-play {
flex: none;
display: flex;
align-self: center;
}
.pr-play-button {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: var(--pr-target);
block-size: var(--pr-target);
padding: 0;
border: 0;
border-radius: var(--pr-radius);
background-color: var(--pr-lacquer);
background-image: linear-gradient(to bottom, var(--pr-gloss), var(--pr-lacquer) var(--pr-gloss-stop));
box-shadow: inset 0 0 0 var(--pr-edge-width) var(--pr-edge), inset 0 var(--pr-edge-width) 0 var(--pr-edge-lit), var(--pr-shadow);
color: var(--pr-gold);
}
.pr-play-button[aria-pressed="true"] {
box-shadow: inset 0 0 0 var(--pr-tab-rim) var(--pr-gold), var(--pr-shadow);
}
.pr-play-icon {
inline-size: var(--pr-play-icon);
block-size: var(--pr-play-icon);
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.pr-keys {
flex: 1 1 0;
display: flex;
justify-content: center;
min-inline-size: 0;
overflow: hidden;
}
.pr-keys-row {
display: flex;
flex: none;
}
.pr-key-cell {
position: relative;
flex: none;
}
.pr-key {
display: block;
margin: 0;
padding: 0;
border: 0;
cursor: pointer;
touch-action: manipulation;
}
.pr-key[data-pr-key="white"] {
inline-size: var(--pr-key-w);
block-size: var(--pr-h-key-h, var(--pr-key-h));
border-radius: 0 0 var(--pr-field-radius) var(--pr-field-radius);
background: var(--pr-key-white);
box-shadow: inset 0 0 0 var(--pr-edge-width) var(--pr-key-line);
}
.pr-key[data-pr-key="black"] {
position: absolute;
z-index: 1;
inset-block-start: 0;
inset-inline-start: calc(100% - var(--pr-key-w) * var(--pr-key-black-share) / 2);
inline-size: calc(var(--pr-key-w) * var(--pr-key-black-share));
block-size: calc(var(--pr-h-key-h, var(--pr-key-h)) * var(--pr-key-black-share));
border-radius: 0 0 var(--pr-check-mark) var(--pr-check-mark);
background: var(--pr-key-black);
box-shadow: inset 0 0 0 var(--pr-edge-width) var(--pr-key-line);
}
.pr-key[data-pr-lit="on"] {
background: var(--pr-key-light);
}
.pr-key:focus-visible {
z-index: 2;
outline-offset: calc(-1 * var(--pr-focus-width));
}
.pr-room[data-pr-key-size="grande"] .pr-keys {
--pr-h-key-h: var(--pr-key-h-grande);
}
.pr-room[data-pr-key-size="molto"] .pr-keys {
--pr-h-key-h: var(--pr-key-h-molto);
}
.pr-section-nav {
display: none;
}
.pr-section-button:not([data-pr-site="on"]) {
justify-content: start;
inline-size: 100%;
white-space: normal;
text-align: start;
}
.pr-section-button:not([data-pr-site="on"]) .pr-button-text {
flex: 1 1 auto;
}
.pr-section-chevron {
flex: none;
inline-size: var(--pr-chevron);
block-size: var(--pr-chevron);
margin-block-start: calc(-1 * var(--pr-chevron) / 2);
border-block-end: var(--pr-stroke) solid var(--pr-gold);
border-inline-end: var(--pr-stroke) solid var(--pr-gold);
transform: rotate(45deg);
}
.pr-section-button[aria-expanded="true"] .pr-section-chevron {
margin-block: calc(var(--pr-chevron) / 2) 0;
transform: rotate(-135deg);
}
.pr-section-list {
position: relative;
display: grid;
margin: 0;
padding: var(--pr-space-1);
border-radius: var(--pr-radius);
background-color: var(--pr-lacquer);
background-image: linear-gradient(to bottom, var(--pr-gloss), var(--pr-lacquer) var(--pr-gloss-stop));
box-shadow: inset 0 0 0 var(--pr-edge-width) var(--pr-edge), inset 0 var(--pr-edge-width) 0 var(--pr-edge-lit), var(--pr-shadow);
list-style: none;
}
.pr-section-list::before {
position: absolute;
inset-block-start: 0;
inset-inline: var(--pr-radius);
block-size: var(--pr-line-width);
background: var(--pr-gold-line);
content: "";
}
.pr-section-item {
display: grid;
}
.pr-section-option {
display: flex;
align-items: center;
gap: var(--pr-icon-gap);
min-block-size: var(--pr-target-touch);
padding-block: var(--pr-space-1);
padding-inline: var(--pr-space-3);
border: 0;
border-radius: calc(var(--pr-radius) / 2);
background: transparent;
color: var(--pr-text);
font: inherit;
text-align: start;
cursor: pointer;
}
.pr-section-option:hover {
background: var(--pr-gloss-hover);
}
.pr-section-option[aria-current="true"] {
background: linear-gradient(to bottom, var(--pr-gold-light), var(--pr-gold) 55%, var(--pr-gold-deep));
color: var(--pr-ink);
font-weight: var(--pr-weight-gold);
}
@media (max-width: 30em) {
.pr-wel-card.pr-box {
padding: var(--pr-space-4);
}
}
.pr-room:is([data-pr-anim~="onda"], [data-pr-anim~="miraggio"]):not([data-pr-anim-off]) [data-pr-enter="on"] {
position: relative;
}
[data-pr-enter="on"] > :nth-child(2) {
--pr-h-delay: var(--pr-anim-step);
}
[data-pr-enter="on"] > :nth-child(3) {
--pr-h-delay: calc(var(--pr-anim-step) * 2);
}
[data-pr-enter="on"] > :nth-child(4) {
--pr-h-delay: calc(var(--pr-anim-step) * 3);
}
[data-pr-enter="on"] > :nth-child(n + 5) {
--pr-h-delay: calc(var(--pr-anim-step) * 4);
}
.pr-room[data-pr-anim~="tendina"]:not([data-pr-anim-off]) [data-pr-enter="on"] {
animation: pr-curtain var(--pr-anim-curtain) var(--pr-anim-ease) backwards;
}
.pr-room[data-pr-anim~="tendina"]:not([data-pr-anim-off]) [data-pr-enter="on"] > * {
animation: pr-item var(--pr-anim-item) var(--pr-anim-ease) var(--pr-h-delay, 0ms) backwards;
}
@keyframes pr-curtain {
from {
clip-path: inset(0 0 100% 0);
}
to {
clip-path: inset(0 0 0 0);
}
}
@keyframes pr-item {
from {
opacity: 0;
transform: translateY(calc(-1 * var(--pr-item-shift)));
}
to {
opacity: 1;
transform: none;
}
}
.pr-room[data-pr-anim~="onda"]:not([data-pr-anim-off]) [data-pr-enter="on"]::before {
position: absolute;
inset: 0;
z-index: 1;
background: radial-gradient(circle closest-side, transparent 60%, var(--pr-wave) 82%, transparent 100%) no-repeat;
pointer-events: none;
content: "";
animation: pr-wave var(--pr-anim-wave) ease-out both;
}
.pr-room[data-pr-anim~="onda"]:not([data-pr-anim-off]) [data-pr-enter="on"] > * {
animation: pr-wave-item var(--pr-anim-wave-item) ease-in-out var(--pr-h-delay, 0ms) backwards;
}
@keyframes pr-wave {
from {
background-position: var(--pr-h-wave-x, 50%) var(--pr-h-wave-y, 0);
background-size: 0 0;
opacity: 1;
}
to {
background-position: calc(var(--pr-h-wave-x, 50%) - var(--pr-wave-size) / 2) calc(var(--pr-h-wave-y, 0px) - var(--pr-wave-size) / 2);
background-size: var(--pr-wave-size) var(--pr-wave-size);
opacity: 0;
}
}
@keyframes pr-wave-item {
0% {
opacity: 0;
transform: translateY(calc(-1 * var(--pr-item-shift)));
filter: blur(4px);
}
30% {
opacity: 1;
transform: translateY(calc(var(--pr-item-shift) / 2));
filter: blur(1.5px);
}
60% {
transform: translateY(calc(var(--pr-item-shift) / -4));
filter: blur(0.5px);
}
100% {
opacity: 1;
transform: none;
filter: blur(0);
}
}
.pr-room[data-pr-anim~="miraggio"]:not([data-pr-anim-off]) [data-pr-enter="on"] {
animation: pr-mirage var(--pr-anim-mirage) ease-in-out backwards, pr-mirage-shimmer var(--pr-anim-mirage) ease-in-out;
}
.pr-room[data-pr-anim~="miraggio"]:not([data-pr-anim-off]) [data-pr-enter="on"]::after {
position: absolute;
inset-inline: 0;
inset-block-start: 0;
z-index: 1;
block-size: var(--pr-mirage-band);
background: linear-gradient(to bottom, transparent, var(--pr-mirage), transparent);
pointer-events: none;
content: "";
animation: pr-mirage-band var(--pr-anim-mirage) ease-in-out both;
}
@keyframes pr-mirage {
from {
clip-path: inset(0 0 100% 0);
}
60% {
clip-path: inset(0 0 40% 0);
}
to {
clip-path: inset(0 0 0 0);
}
}
@keyframes pr-mirage-shimmer {
0%,
100% {
transform: none;
}
35% {
transform: translateX(var(--pr-mirage-shift));
}
70% {
transform: translateX(calc(var(--pr-mirage-shift) / -2));
}
}
@keyframes pr-mirage-band {
0% {
inset-block-start: 0%;
opacity: 0;
}
10%,
90% {
opacity: 1;
}
100% {
inset-block-start: 100%;
opacity: 0;
}
}
.pr-room[data-pr-anim~="scintilla"] .pr-tab:not([data-pr-site="on"])[aria-selected="true"] {
box-shadow: inset 0 0 0 var(--pr-volt-width) var(--pr-volt), 0 0 0 var(--pr-volt-edge-width) var(--pr-volt-edge), 0 var(--pr-tab-rise) 0 0 var(--pr-lacquer), var(--pr-tab-shadow);
}
.pr-bolts {
position: absolute;
inset-block-start: var(--pr-h-bolts-y, 0px);
inset-inline-start: var(--pr-h-bolts-x, 0px);
inline-size: var(--pr-h-bolts-w, 0px);
block-size: var(--pr-h-bolts-h, 0px);
pointer-events: none;
}
.pr-bolts[data-pr-layer="back"] {
z-index: 0;
}
.pr-bolts[data-pr-layer="front"] {
z-index: 2;
}
.pr-room[data-pr-anim-off] :is(.pr-button, .pr-tab, .pr-cell-button, .pr-pick-option, .pr-start-option)::after {
animation: none;
}
@media (pointer: coarse) {
.pr-room {
--pr-bar-top: var(--pr-sticky-top);
--pr-bar-room: 10rem;
--pr-target: var(--pr-target-touch);
--pr-tab-h: var(--pr-target-touch);
--pr-subtab-h: var(--pr-target-touch);
--pr-chip-x: var(--pr-target-touch);
}
.pr-tab[data-pr-site="on"],
.pr-button[data-pr-site="on"],
.pr-file[data-pr-site="on"] {
min-block-size: var(--touch-target);
block-size: auto;
}
.pr-tab[data-pr-site="on"] {
min-inline-size: 0;
padding-inline: var(--space-2xs);
font-size: var(--text-s);
line-height: 1.2;
white-space: normal;
overflow-wrap: anywhere;
-webkit-hyphens: auto;
hyphens: auto;
text-align: center;
}
.pr-bar {
flex-wrap: nowrap;
}
.pr-tablist {
display: grid;
flex: 1 1 0;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: stretch;
min-inline-size: 0;
}
.pr-tab[data-pr-site="on"] {
flex-direction: column;
gap: var(--space-2xs);
min-block-size: calc(var(--touch-target) + var(--space-s));
}
.pr-tab:not([data-pr-site="on"]) {
flex-direction: column;
gap: var(--pr-space-1);
block-size: auto;
min-block-size: var(--pr-tab-h-touch);
min-inline-size: 0;
padding-inline: var(--pr-space-1);
font-size: var(--pr-text-s);
line-height: 1.2;
white-space: normal;
overflow-wrap: anywhere;
-webkit-hyphens: auto;
hyphens: auto;
text-align: center;
}
.pr-section-nav {
display: grid;
gap: var(--pr-space-2);
margin-block-end: var(--pr-space-4);
}
.pr-subtablist {
display: none;
}
.pr-subbar:not(:has(.pr-sum)) {
display: none;
}
.pr-radio,
.pr-check {
inline-size: var(--pr-target);
block-size: var(--pr-target);
}
.pr-daybar {
position: sticky;
z-index: 2;
inset-block-start: calc(var(--pr-sticky-top) + var(--pr-tab-h-touch) + var(--pr-tab-rise));
padding-block: var(--pr-space-1);
background: var(--pr-lacquer);
}
.pr-ed-row {
grid-template-columns: minmax(0, 1fr) var(--pr-qty-width-touch);
}
.pr-search,
.pr-search .pr-input {
inline-size: 100%;
}
.pr-keys {
position: fixed;
z-index: 3;
inset-inline: 0;
inset-block-end: calc(var(--pr-footer-touch) + env(safe-area-inset-bottom, 0px));
padding-block: var(--pr-space-1);
padding-inline: max(var(--pr-space-4), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
background: var(--pr-lacquer);
box-shadow: 0 calc(-1 * var(--pr-line-width)) 0 var(--pr-gold-deep);
}
.pr-room:has(.pr-keys:not([hidden])) {
padding-block-end: calc(var(--pr-h-key-h, var(--pr-key-h-molto)) + var(--pr-space-4));
}
.pr-room[data-pr-guide="on"] {
padding-block-end: 0;
}
.pr-room:has(.pr-keys:not([hidden])) * {
scroll-margin-block-end: calc(var(--pr-key-h-molto) + var(--pr-space-5));
}
}
@media (forced-colors: active) {
.pr-tab,
.pr-subtab,
.pr-button,
.pr-cell-button,
.pr-pick-option,
.pr-daybar-day,
.pr-start-option,
.pr-chip,
.pr-box,
.pr-preview {
border: 1px solid CanvasText;
}
}