/* GENERATED by shell/tools/bundle-css.mjs from shell/shell.src.css. Do not edit:
   edit the sources and run  node prototypes/v3/site/shell/tools/bundle-css.mjs
   Sources, in cascade order:
     prototypes/v3/site/shell/shell.src.css
     prototypes/v2/system/system.css
     prototypes/v2/system/fonts/fonts.css
     prototypes/v2/system/tokens.css
     prototypes/v2/system/layout.css
     prototypes/v2/system/components.css
     prototypes/v2/interactions/lib/buttons.css
     prototypes/v2/interactions/lib/nav-icons.css
     prototypes/v3/site/components/icons/icons.css
     prototypes/v3/features/your-orli/your-orli.css
     prototypes/v3/features/time-of-day/time-of-day.css
*/
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("../../../v2/system/fonts/albert-sans-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Albert Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
src: url("../../../v2/system/fonts/albert-sans-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-display: swap;
src: url("../../../v2/system/fonts/nunito-sans-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-display: swap;
src: url("../../../v2/system/fonts/nunito-sans-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
--o-canvas: #fcfaf8;
--o-surface: #ffffff;
--o-paper: #fffdf8;
--o-warm: #f5f1eb;
--o-warm-high: #e5dccc;
--o-line: #ebe6dc;
--o-ink: #2f2e2b;
--o-ink-2: #52525b;
--o-n2: #dcd8ce;
--o-n3: #b1aa9a;
--o-n4: #797468;
--o-action: #246649;
--o-action-hover: #1c5239;
--o-action-press: #17442f;
--o-mint: #5cca99;
--o-on-mint: #1f3d32;
--o-focus: #1f3d32;
--o-error: #c83011;
--o-error-soft: color-mix(in srgb, var(--o-error) 7%, var(--o-surface));
--o-disabled-fill: #f5f1eb;
--o-disabled-label: #8c877d;
--o-star: #e8b40a;
--w-orla-accent: #328360;  --w-orla-deep: #195440;  --w-orla-stage: #dbeacb;  --w-orla-soft: #ddefdf;
--w-finn-accent: #3e9a74;  --w-finn-deep: #123b56;  --w-finn-stage: #c8ddeb;  --w-finn-soft: #dcebdc;
--w-rory-accent: #df4a32;  --w-rory-deep: #6f2029;  --w-rory-stage: #b83b35;  --w-rory-soft: #ffd8cb;
--w-nova-accent: #b76631;  --w-nova-deep: #7c3f1b;  --w-nova-stage: #f7d6b3;  --w-nova-soft: #fbe5d2;
--w-luna-accent: #ad477d;  --w-luna-deep: #76305f;  --w-luna-stage: #f2bcdf;  --w-luna-soft: #f8dfef;
--w-zeke-accent: #5260bc;  --w-zeke-deep: #34419a;  --w-zeke-stage: #dbd7ef;  --w-zeke-soft: #e0e3fa;
--w-sasha-accent: #357b9d; --w-sasha-deep: #174b65; --w-sasha-stage: #d6e8ec; --w-sasha-soft: #deeff5;
--w-joy-accent: #e8b40a;   --w-joy-deep: #7d5f0b;   --w-joy-stage: #faf1d2;   --w-joy-soft: #fff3cb;
--world-accent: var(--o-action);
--world-deep: var(--o-on-mint);
--world-stage: #c4f0dd;
--world-soft: #c4f0dd;
--world-wash: color-mix(in srgb, var(--world-soft) 50%, var(--o-canvas));
--o-font-ui: "Albert Sans", "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
--o-font-body: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
--o-font-hand: var(--o-font-ui);
--o-text-display: clamp(2.5rem, 1.85rem + 2.67vw, 4.25rem);
--o-text-title:   clamp(1.875rem, 1.55rem + 1.33vw, 2.75rem);
--o-text-heading: clamp(1.25rem, 1.16rem + .38vw, 1.5rem);
--o-text-lead:    clamp(1.125rem, 1.08rem + .19vw, 1.25rem);
--o-text-body:    1.0625rem;
--o-text-small:   .875rem;
--o-lh-display: 1.03;
--o-lh-title: 1.1;
--o-lh-heading: 1.25;
--o-lh-lead: 1.5;
--o-lh-body: 1.6;
--o-lh-small: 1.45;
--o-track-display: -.03em;
--o-track-title: -.022em;
--o-track-heading: -.012em;
--o-weight-title: 700;
--o-weight-ui: 650;
--o-weight-body: 400;
--o-weight-strong: 700;
--o-measure: 62ch;
--o-measure-lead: 34em;
--o-measure-title: 20ch;
--o-space-1: 4px;
--o-space-2: 8px;
--o-space-3: 12px;
--o-space-4: 16px;
--o-space-5: 24px;
--o-space-6: 32px;
--o-space-7: 48px;
--o-space-8: 64px;
--o-space-9: 96px;
--o-space-10: 128px;
--o-gap-tight: var(--o-space-3);
--o-gap: var(--o-space-4);
--o-gap-loose: var(--o-space-6);
--o-gutter: var(--o-space-4);
--o-section: var(--o-space-8);
--o-head-gap: var(--o-space-6);
--o-grid-gap: var(--o-space-4);
--o-max: 1200px;
--o-max-wide: 1360px;
--o-header-h: 64px;
--o-r-control: 12px;
--o-r-card: 24px;
--o-r-pill: 999px;
--o-shadow: 0 1px 2px rgb(60 57 50 / .05), 0 10px 28px -8px rgb(60 57 50 / .12);
--o-shadow-raised: 0 2px 6px rgb(60 57 50 / .06), 0 24px 56px -16px rgb(60 57 50 / .22);
--o-ease: cubic-bezier(.22, 1, .32, 1);
--o-settle: cubic-bezier(.34, 1.36, .64, 1);
--o-t-interact: 160ms;
--o-t-press: 90ms;
--o-t-enter: 280ms;
--o-lift-x: -3px;
--o-lift-y: -4px;
--o-pop: 4px 5px 0 0 var(--o-ink);
--o-lip: 3px;
--o-press-scale: .985;
--o-focus-ring: 3px solid var(--o-focus);
--o-focus-offset: 3px;
--o-btn-h-sm: 44px;
--o-btn-h-md: 50px;
--o-btn-h-lg: 56px;
--o-target: 44px;
--o-field-gap: 6px;
--o-field-h: var(--o-btn-h-md);
--o-field-pad: 12px 16px;
--o-field-edge: var(--o-n4);
--o-field-hover: var(--o-warm);
--o-field-text: 1rem;
--o-field-label: 1rem;
--o-field-help: var(--o-text-small);
--o-field-mark: 20px;
--o-field-halo: 0 0 0 7px color-mix(in srgb, var(--o-mint) 18%, transparent);
--o-z-header: 50;
--o-z-sheet: 80;
--o-z-toast: 100;
}
@media (min-width: 600px) {
:root {
--o-gutter: var(--o-space-6);
--o-section: var(--o-space-9);
--o-head-gap: var(--o-space-7);
--o-grid-gap: var(--o-space-5);
}
}
@media (min-width: 900px) {
:root { --o-header-h: 88px; }
}
@media (min-width: 1100px) {
:root {
--o-gutter: var(--o-space-7);
--o-section: var(--o-space-10);
--o-grid-gap: var(--o-space-6);
}
}
[data-world="orla"]  { --world-accent: var(--w-orla-accent);  --world-deep: var(--w-orla-deep);  --world-stage: var(--w-orla-stage);  --world-soft: var(--w-orla-soft); }
[data-world="finn"]  { --world-accent: var(--w-finn-accent);  --world-deep: var(--w-finn-deep);  --world-stage: var(--w-finn-stage);  --world-soft: var(--w-finn-soft); }
[data-world="rory"]  { --world-accent: var(--w-rory-accent);  --world-deep: var(--w-rory-deep);  --world-stage: var(--w-rory-stage);  --world-soft: var(--w-rory-soft); }
[data-world="nova"]  { --world-accent: var(--w-nova-accent);  --world-deep: var(--w-nova-deep);  --world-stage: var(--w-nova-stage);  --world-soft: var(--w-nova-soft); }
[data-world="luna"]  { --world-accent: var(--w-luna-accent);  --world-deep: var(--w-luna-deep);  --world-stage: var(--w-luna-stage);  --world-soft: var(--w-luna-soft); }
[data-world="zeke"]  { --world-accent: var(--w-zeke-accent);  --world-deep: var(--w-zeke-deep);  --world-stage: var(--w-zeke-stage);  --world-soft: var(--w-zeke-soft); }
[data-world="sasha"] { --world-accent: var(--w-sasha-accent); --world-deep: var(--w-sasha-deep); --world-stage: var(--w-sasha-stage); --world-soft: var(--w-sasha-soft); }
[data-world="joy"]   { --world-accent: var(--w-joy-accent);   --world-deep: var(--w-joy-deep);   --world-stage: var(--w-joy-stage);   --world-soft: var(--w-joy-soft); }
[data-world] { --world-wash: color-mix(in srgb, var(--world-soft) 50%, var(--o-canvas)); }
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%; text-size-adjust: 100%;
scroll-padding-top: calc(var(--o-header-h) + var(--o-space-4));
hanging-punctuation: first last;
}
@media (prefers-reduced-motion: no-preference) {
html:not([data-motion="reduced"]):not([data-motion="still"]) { scroll-behavior: smooth; }
}
body {
margin: 0;
background: var(--o-canvas); color: var(--o-ink);
font: var(--o-weight-body) var(--o-text-body) / var(--o-lh-body) var(--o-font-body);
font-synthesis: none;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { padding: 0; list-style: none; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
strong, b { font-weight: var(--o-weight-strong); }
::selection { background: color-mix(in srgb, var(--o-mint) 45%, transparent); }
:focus { outline: none; }
:focus-visible { outline: var(--o-focus-ring); outline-offset: var(--o-focus-offset); }
.o-on-dark { --o-focus: #ffffff; --o-focus-ring: 3px solid #ffffff; }
.o-vh {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.o-skip {
position: absolute; left: var(--o-space-4); top: -80px; z-index: calc(var(--o-z-header) + 1);
padding: var(--o-space-3) var(--o-space-4); border-radius: var(--o-r-pill);
background: var(--o-ink); color: #fff; text-decoration: none;
font: var(--o-weight-ui) var(--o-text-small) / 1 var(--o-font-ui);
}
.o-skip:focus-visible { top: var(--o-space-3); }
.o-display, .o-title, .o-heading {
font-family: var(--o-font-ui); font-weight: var(--o-weight-title); color: inherit;
text-wrap: balance;
}
.o-display {
font-size: var(--o-text-display); line-height: var(--o-lh-display); letter-spacing: var(--o-track-display);
max-inline-size: 14ch;
}
.o-title {
font-size: var(--o-text-title); line-height: var(--o-lh-title); letter-spacing: var(--o-track-title);
max-inline-size: var(--o-measure-title);
}
.o-heading {
font-size: var(--o-text-heading); line-height: var(--o-lh-heading); letter-spacing: var(--o-track-heading);
}
.o-lead {
font-size: var(--o-text-lead); line-height: var(--o-lh-lead);
max-inline-size: var(--o-measure-lead); text-wrap: pretty;
}
.o-body { font-size: var(--o-text-body); line-height: var(--o-lh-body); max-inline-size: var(--o-measure); text-wrap: pretty; }
.o-small { font-size: var(--o-text-small); line-height: var(--o-lh-small); }
.o-muted { color: var(--o-ink-2); }
.o-on-dark .o-muted { color: color-mix(in srgb, #fff 82%, transparent); }
.o-hand { font-family: var(--o-font-hand); font-weight: 400; letter-spacing: 0; }
.o-prose { max-inline-size: var(--o-measure); }
.o-prose > * + * { margin-block-start: var(--o-gap); }
.o-prose ul, .o-prose ol { padding-inline-start: 1.2em; }
.o-prose li + li { margin-block-start: var(--o-space-2); }
.o-container {
width: min(100% - 2 * var(--o-gutter), var(--o-max));
margin-inline: auto;
}
.o-container--wide { width: min(100% - 2 * var(--o-gutter), var(--o-max-wide)); }
.o-section { padding-block: var(--o-section); background: var(--o-section-bg, transparent); }
.o-section--continue { padding-block-start: 0; }
.o-section--warm { --o-section-bg: var(--o-warm); }
.o-section--world { --o-section-bg: var(--world-wash); }
.o-section--deep {
--o-section-bg: var(--o-action-press); color: #fff;
--o-focus: #ffffff; --o-focus-ring: 3px solid #ffffff; --o-ring-gap: var(--o-action-press);
}
.o-section[data-world].o-section--deep { --o-section-bg: var(--world-deep); --o-ring-gap: var(--world-deep); }
.o-stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--stack, var(--o-gap)); }
.o-stack > * { max-inline-size: 100%; }
.o-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-space-3) var(--o-space-4); }
.o-split {
display: grid; gap: var(--o-head-gap);
grid-template-columns: minmax(0, 1fr);
align-items: center;
}
@media (min-width: 900px) {
.o-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--o-space-8); }
.o-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.o-split--reverse > :first-child { order: 2; }
}
@media (max-width: 899.98px) {
.o-split--media-first > :last-child { order: -1; }
}
.o-cards {
display: grid; gap: var(--o-grid-gap);
grid-template-columns: repeat(auto-fit, minmax(min(100%, max(17rem, (100% - 2 * var(--o-grid-gap)) / 3)), 1fr));
align-items: stretch;
}
.o-cards--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(20rem, (100% - var(--o-grid-gap)) / 2)), 1fr)); }
.o-grid { display: grid; gap: var(--o-grid-gap); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.o-grid > * { grid-column: 1 / -1; }
@media (min-width: 900px) {
.o-grid > [data-span="4"] { grid-column: span 4; }
.o-grid > [data-span="5"] { grid-column: span 5; }
.o-grid > [data-span="6"] { grid-column: span 6; }
.o-grid > [data-span="7"] { grid-column: span 7; }
.o-grid > [data-span="8"] { grid-column: span 8; }
}
.o-measure { max-inline-size: var(--o-measure); }
.o-center { text-align: center; margin-inline: auto; }
.o-center > * { margin-inline: auto; }
.o-center .o-cluster { justify-content: center; }
:root {
--o-canvas: #fcfaf8;
--o-surface: #ffffff;
--o-warm: #f5f1eb;
--o-warm-high: #e5dccc;
--o-ink: #2f2e2b;
--o-ink-2: #52525b;
--o-n2: #dcd8ce;
--o-n3: #b1aa9a;
--o-action: #246649;
--o-action-hover: #1c5239;
--o-action-press: #17442f;
--o-mint: #5cca99;
--o-on-mint: #1f3d32;
--o-focus: #1f3d32;
--o-disabled-fill: #f5f1eb;
--o-disabled-label: #8c877d;
--o-font-ui: "Albert Sans", "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
--o-font-body: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
--o-font-hand: "Patrick Hand", "Comic Sans MS", cursive;
--o-ease: cubic-bezier(.22, 1, .32, 1);
--o-settle: cubic-bezier(.34, 1.36, .64, 1);
--o-t-interact: 160ms;
--o-t-press: 90ms;
--o-t-enter: 280ms;
--o-lift-x: -3px;
--o-lift-y: -4px;
--o-pop: 4px 5px 0 0 var(--o-ink);
--o-lip: 3px;
--o-press-scale: .985;
--o-btn-h-sm: 44px;
--o-btn-h-md: 50px;
--o-btn-h-lg: 56px;
--o-focus-ring: 3px solid var(--o-focus);
--o-focus-offset: 3px;
}
.o-btn {
--fill: var(--o-surface);
--label: var(--o-ink);
--edge: var(--o-n2);
--lip-colour: var(--o-n2);
--fill-hover: var(--o-surface);
--edge-hover: var(--o-ink);
--label-hover: var(--label);
--fill-press: var(--o-warm);
--lip: var(--o-lip);
--h: var(--o-btn-h-md);
--px: 22px;
--fs: 1.03125rem;
--gap: 9px;
--icon: 22px;
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: var(--gap);
min-height: var(--h); min-width: 44px; padding: 0 var(--px);
margin: 0;
border: 1.5px solid var(--edge); border-radius: 999px;
background: var(--fill); color: var(--label);
font: 650 var(--fs)/1.1 var(--o-font-ui); letter-spacing: -.005em;
white-space: nowrap; text-decoration: none; text-align: center;
cursor: pointer; user-select: none; -webkit-user-select: none;
-webkit-tap-highlight-color: transparent; touch-action: manipulation;
box-shadow: 0 var(--lip) 0 0 var(--lip-colour);
translate: 0 0; scale: 1;
transition:
translate var(--o-t-interact) var(--o-ease),
scale var(--o-t-interact) var(--o-ease),
box-shadow var(--o-t-interact) var(--o-ease),
background-color var(--o-t-interact) var(--o-ease),
border-color var(--o-t-interact) var(--o-ease),
color var(--o-t-interact) var(--o-ease);
}
.o-btn::after { content: ""; position: absolute; inset: -2px -6px -7px -2px; border-radius: inherit; }
.o-btn:focus { outline: none; }
.o-btn__icon { width: var(--icon); height: var(--icon); flex: none; display: inline-grid; place-items: center; margin-inline-start: -4px; }
.o-btn__icon--end { margin-inline: 0 -5px; }
.o-btn__icon > svg, .o-btn__icon > img { width: 100%; height: 100%; overflow: visible; }
.o-doodle {
display: inline-block; flex: none; width: var(--size, 24px); height: var(--size, 24px);
background-color: currentColor;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.o-btn--primary {
--fill: var(--o-action); --label: #fff; --edge: var(--o-action); --lip-colour: var(--o-action-press);
--fill-hover: var(--o-action-hover); --edge-hover: var(--o-action-hover); --fill-press: var(--o-action-press);
}
.o-btn--secondary {  }
.o-btn--tertiary {
--fill: transparent; --edge: transparent; --lip: 0px; --label: var(--o-ink-2);
--fill-hover: var(--o-surface); --label-hover: var(--o-ink); --fill-press: var(--o-warm);
--px: 14px;
}
.o-on-dark { --o-focus: #ffffff; }
.o-btn--on-dark {
--fill: var(--o-mint); --label: var(--o-on-mint); --edge: var(--o-mint); --lip-colour: #3dba82;
--fill-hover: #7fd8b0; --edge-hover: #7fd8b0; --fill-press: #3dba82;
--o-pop: 4px 5px 0 0 #0f2418;
}
.o-btn--sm { --h: var(--o-btn-h-sm); --px: 16px; --fs: .9375rem; --gap: 7px; --icon: 20px; }
.o-btn--lg { --h: var(--o-btn-h-lg); --px: 28px; --fs: 1.125rem; --gap: 10px; --icon: 24px; }
.o-btn--block { display: flex; width: 100%; }
.o-icon-btn { --px: 0px; --icon: 26px; width: var(--h); min-width: var(--h); padding: 0; }
.o-icon-btn.o-btn--sm { --icon: 24px; }
.o-icon-btn .o-btn__icon { margin: 0; }
.o-nav-pill {
--fill: transparent; --edge: transparent; --lip: 0px; --label: var(--o-ink);
--fill-hover: var(--o-surface); --edge-hover: var(--o-ink); --fill-press: var(--o-warm);
--h: 44px; --px: 14px; --fs: 1rem; --gap: 7px; --icon: 28px;
padding-inline: 8px 14px; font-weight: 600;
}
.o-nav-pill .o-btn__icon { margin: 0; }
.o-nav-pill[aria-current="page"] { --fill: var(--o-warm); --edge: var(--o-warm-high); }
@media (hover: hover) and (pointer: fine) {
.o-btn:hover { background-color: var(--fill-hover); border-color: var(--edge-hover); color: var(--label-hover); translate: var(--o-lift-x) var(--o-lift-y); box-shadow: var(--o-pop); }
}
.o-btn.is-hover { background-color: var(--fill-hover); border-color: var(--edge-hover); color: var(--label-hover); translate: var(--o-lift-x) var(--o-lift-y); box-shadow: var(--o-pop); }
.o-btn:focus-visible, .o-btn.is-focus {
background-color: var(--fill-hover); border-color: var(--edge-hover); color: var(--label-hover);
translate: var(--o-lift-x) var(--o-lift-y); box-shadow: var(--o-pop);
outline: var(--o-focus-ring); outline-offset: var(--o-focus-offset);
}
.o-btn:active, .o-btn.is-pressed {
background-color: var(--fill-press); border-color: var(--edge-hover);
translate: 0 var(--lip); scale: var(--o-press-scale);
box-shadow: 0 0 0 0 var(--lip-colour);
transition-duration: var(--o-t-press);
}
.o-btn--primary:active, .o-btn--primary.is-pressed { border-color: var(--o-action-press); }
.o-btn[aria-pressed="true"], .o-btn[aria-expanded="true"] { --fill: var(--o-warm); --edge: var(--o-ink); --fill-hover: var(--o-warm); }
.o-btn:disabled, .o-btn[aria-disabled="true"] {
--fill: var(--o-disabled-fill); --fill-hover: var(--o-disabled-fill); --fill-press: var(--o-disabled-fill);
--edge: var(--o-disabled-fill); --edge-hover: var(--o-disabled-fill); --label: var(--o-disabled-label); --label-hover: var(--o-disabled-label);
--lip: 0px; cursor: not-allowed;
}
.o-btn:disabled, .o-btn[aria-disabled="true"], .o-btn:disabled:hover, .o-btn[aria-disabled="true"]:hover,
.o-btn:disabled:active, .o-btn[aria-disabled="true"]:active, .o-btn[aria-disabled="true"].is-pressed {
translate: none; scale: none; box-shadow: none;
}
.o-btn[aria-busy="true"] {
--fill: var(--o-warm); --fill-hover: var(--o-warm); --fill-press: var(--o-warm);
--edge: var(--o-warm-high); --edge-hover: var(--o-warm-high); --lip-colour: var(--o-warm-high);
--label: var(--o-ink-2); --label-hover: var(--o-ink-2);
cursor: progress;
}
.o-btn[aria-busy="true"], .o-btn[aria-busy="true"]:hover, .o-btn[aria-busy="true"]:active, .o-btn[aria-busy="true"].is-pressed {
translate: none; scale: none; box-shadow: 0 var(--lip) 0 0 var(--lip-colour);
}
.o-btn .o-lift { display: none; }
.o-btn[aria-busy="true"] .o-lift { display: inline-block; margin-inline-start: -6px; }
.o-btn[aria-busy="true"] .o-btn__icon { display: none; }
.o-btn[data-state="done"] { --fill: var(--o-surface); --fill-hover: var(--o-surface); --edge: var(--o-action); --edge-hover: var(--o-action); --label: var(--o-action); --label-hover: var(--o-action); --lip-colour: var(--o-action); }
.o-enter { animation: o-enter var(--o-t-enter) var(--o-ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes o-enter { from { opacity: 0; translate: 0 8px; } }
.o-lift { --lift-size: 30px; --lift-accent: #3e9a74; display: inline-block; width: var(--lift-size); height: calc(var(--lift-size) * .92857143); flex: none; vertical-align: middle; }
.o-lift__stage { position: relative; display: block; width: 100%; height: 100%; }
.o-lift__character { position: absolute; inset: 14.9% 21.43% 19.87% 17.86%; animation: o-lift-y 2400ms ease-in-out 200ms infinite, o-lift-shape 2400ms ease-in-out 200ms infinite; }
.o-lift__character img { display: block; width: 100%; height: 100%; object-fit: contain; }
.o-lift__ground { position: absolute; left: 29.0179%; top: 81.25%; width: 40.1786%; height: 4.8077%; border-radius: 50%; background: var(--lift-accent); opacity: .16; animation: o-lift-shadow 2400ms ease-in-out 200ms infinite; }
.o-lift__dot { position: absolute; left: 80.8036%; top: 62.5%; width: 7.1429%; aspect-ratio: 1; border-radius: 50%; background: var(--lift-accent); animation: o-lift-dot-y 2400ms ease-in-out 200ms infinite, o-lift-dot-scale 2400ms ease-in-out 200ms infinite; }
@keyframes o-lift-y {
0%, 37.5%, 54.16%, 100% { translate: 0 0; }
8.34% { translate: 0 calc(var(--lift-size) * .01785714); }
22.92% { translate: 0 calc(var(--lift-size) * -.07142857); }
45% { translate: 0 calc(var(--lift-size) * .00714286); }
}
@keyframes o-lift-shape {
0%, 54.16%, 100% { rotate: 0deg; scale: 1 1; }
8.34% { rotate: 2deg; scale: 1.045 .96; }
22.92% { rotate: -3deg; scale: .97 1.035; }
37.5% { rotate: 1deg; scale: 1.04 .97; }
}
@keyframes o-lift-shadow { 0%, 54.16%, 100% { scale: 1 1; } 8.34% { scale: 1.05 1; } 22.92% { scale: .7 1; } 37.5% { scale: 1.07 1; } }
@keyframes o-lift-dot-y { 0%, 10.42%, 42.5%, 59.16%, 100% { translate: 0 0; } 25.84% { translate: 0 calc(var(--lift-size) * -.09285714); } 51.26% { translate: 0 calc(var(--lift-size) * -.02142857); } }
@keyframes o-lift-dot-scale { 0%, 59.16%, 100% { scale: 1; } 25.84% { scale: .85; } 42.5% { scale: 1.1; } }
html[data-motion="reduced"] .o-btn, html[data-motion="still"] .o-btn { translate: none !important; scale: none !important; }
html[data-motion="reduced"] .o-btn:is(:hover, .is-hover, :focus-visible, .is-focus),
html[data-motion="still"] .o-btn:is(:hover, .is-hover, :focus-visible, .is-focus) { box-shadow: 0 var(--lip) 0 0 var(--lip-colour); }
html[data-motion="reduced"] .o-btn:is(:active, .is-pressed),
html[data-motion="still"] .o-btn:is(:active, .is-pressed) { box-shadow: 0 var(--lip) 0 0 var(--lip-colour); }
html[data-motion="still"] .o-btn { transition: none !important; }
html[data-motion="reduced"] .o-enter { animation-name: o-fade; }
html[data-motion="still"] .o-enter { animation: none; }
html[data-motion="reduced"] .o-lift *, html[data-motion="still"] .o-lift * { animation: none !important; }
@keyframes o-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
html:not([data-motion]) .o-btn { translate: none !important; scale: none !important; }
html:not([data-motion]) .o-btn:is(:hover, :focus-visible, :active) { box-shadow: 0 var(--lip) 0 0 var(--lip-colour); }
html:not([data-motion]) .o-lift * { animation: none !important; }
html:not([data-motion]) .o-enter { animation-name: o-fade; }
}
@media (forced-colors: active) {
.o-btn { border-color: ButtonText; box-shadow: none !important; }
.o-btn:focus-visible { outline: 3px solid Highlight; }
.o-btn:disabled, .o-btn[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
.o-doodle { background-color: CanvasText; }
}
.o-trial { isolation: isolate; }
.o-trial__window { position: absolute; pointer-events: none; display: block; }
.o-trial__orli { position: absolute; left: 0; top: 0; display: block; width: 100%; will-change: transform; }
.o-trial__squash { display: block; transform-origin: 50% 92%; }
.o-trial__art { display: block; width: 100%; height: auto; overflow: visible; }
.o-trial__eyes { transform-box: fill-box; transform-origin: 50% 50%; }
.o-trial__window--peek { left: 50%; bottom: calc(100% - 1px); width: 48px; height: 48px; margin-left: -24px; overflow: hidden; z-index: -1; }
.o-trial__window--peek .o-trial__orli { width: 40px; left: 4px; top: 8px; }
.o-btn--sm .o-trial__window--peek { width: 40px; height: 40px; margin-left: -20px; }
.o-btn--sm .o-trial__window--peek .o-trial__orli { width: 32px; }
.o-trial--pocket { padding-inline-start: 7px; }
.o-btn--lg.o-trial--pocket { padding-inline-start: 9px; }
.o-trial__window--pocket {
position: relative; flex: none; width: calc(var(--h) - 14px); height: calc(var(--h) - 14px); border-radius: 50%; overflow: hidden;
background: #c4f0dd;
box-shadow: inset 0 2px 0 rgb(17 50 35 / .22), inset 0 -1px 0 rgb(255 255 255 / .5);
-webkit-mask-image: -webkit-radial-gradient(white, black);
}
.o-trial__window--pocket .o-trial__orli { width: 92%; left: 4%; }
.o-trial--pocket .o-btn__icon { display: none; }
.o-btn[aria-busy="true"].o-trial--pocket .o-trial__window { display: none; }
.o-felt-bit {
position: fixed; z-index: 200; pointer-events: none; border-radius: 50% 46% 52% 44%;
background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 82%, #2f2e2b));
box-shadow: 0 1px 1px rgb(47 46 43 / .18);
}
html .o-btn.o-trial:is(:focus-visible, .is-focus) {
outline: none;
box-shadow: 0 0 0 var(--o-focus-offset) var(--o-ring-gap, var(--o-canvas)), 0 0 0 calc(var(--o-focus-offset) + 3px) var(--o-focus);
}
@media (forced-colors: active) { html .o-btn.o-trial:focus-visible { outline: 3px solid Highlight; outline-offset: 3px; } }
:root { --o-nav-icons: 1; }
.ni {
display: block; width: 100%; height: 100%; overflow: visible;
fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
}
.ni .ni-p { transform-box: view-box; }
.ni-fb, .ni-k1 { visibility: hidden; }
.ni-on { display: none; }
.ni-on.is-shown { display: inline; }
.is-live .ni-fa { animation: ni-show-hide 320ms linear 3; }
.is-live .ni-fb { animation: ni-hide-show 320ms linear 3; }
@keyframes ni-show-hide { 0%, 49.9% { visibility: visible; } 50%, 100% { visibility: hidden; } }
@keyframes ni-hide-show { 0%, 49.9% { visibility: hidden; } 50%, 100% { visibility: visible; } }
.is-live .ni-draw, .ni.is-switch .ni-on.is-shown.ni-draw { animation: ni-draw 560ms cubic-bezier(.45, 0, .2, 1) both; }
.is-live .ni-d2, .ni.is-switch .ni-on.is-shown.ni-d2 { animation-delay: 140ms; }
@keyframes ni-draw {
from { stroke-dasharray: 1 1.5; stroke-dashoffset: 1.02; }
to { stroke-dasharray: 1 1.5; stroke-dashoffset: 0; }
}
.is-live .ni-flag.ni-k0 { animation: ni-show-hide 300ms linear 380ms 3; }
.is-live .ni-flag.ni-k1 { animation: ni-hide-show 300ms linear 380ms 3; }
.is-live .ni-flag.ni-k0.ni-draw { animation: ni-draw 380ms cubic-bezier(.45, 0, .2, 1) both, ni-show-hide 300ms linear 380ms 3; }
.ni-eye { transform-origin: center; transform-box: fill-box !important; }
.is-live .ni-eye { animation: ni-blink 1500ms ease-in-out 180ms; }
@keyframes ni-blink { 0%, 22%, 58%, 100% { scale: 1 1; } 11%, 69% { scale: 1 .14; } 80% { scale: 1 1; } }
.ni-star { transform-origin: 101px 22.5px; }
.is-live .ni-star { animation: ni-twinkle 700ms cubic-bezier(.34, 1.36, .64, 1) 120ms 2; }
@keyframes ni-twinkle { 0%, 100% { scale: 1; rotate: 0deg; } 45% { scale: 1.32; rotate: 22deg; } }
.ni-pencil { transform-origin: 27.6px 91.8px; }
.is-live .ni-pencil { animation: ni-scribble 560ms ease-in-out 2; }
@keyframes ni-scribble { 0%, 100% { rotate: 0deg; translate: 0 0; } 30% { rotate: -6deg; translate: 2px 1px; } 70% { rotate: 4deg; translate: 4px 0; } }
.ni-spin { transform-origin: 64.2px 52.2px; }
.is-live .ni-spin { animation: ni-spin 1300ms cubic-bezier(.3, .6, .2, 1) 160ms; }
@keyframes ni-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
.ni-heart { transform-origin: 64px 66px; }
.is-live .ni-heart { animation: ni-beat 900ms ease-out 100ms 2; }
@keyframes ni-beat { 0%, 100% { scale: 1; } 14% { scale: 1.1; } 28% { scale: 1; } 40% { scale: 1.06; } 56% { scale: 1; } }
.is-live .ni-flap.ni-k0 { animation: ni-draw 420ms cubic-bezier(.45, 0, .2, 1) both, ni-flap-closed 900ms linear 480ms; }
.is-live .ni-flap.ni-k1 { animation: ni-flap-open 900ms linear 480ms; }
@keyframes ni-flap-closed { 0%, 19.9%, 80%, 100% { visibility: visible; } 20%, 79.9% { visibility: hidden; } }
@keyframes ni-flap-open { 0%, 19.9%, 80%, 100% { visibility: hidden; } 20%, 79.9% { visibility: visible; } }
.is-live .ni-wave.is-shown { animation: ni-draw 520ms cubic-bezier(.45, 0, .2, 1) 2 both; }
.is-live .ni-wave--2.is-shown, .ni.is-switch .ni-wave--2.is-shown { animation-delay: 160ms; }
.ni-mover { transform-origin: 82px 64px; }
.is-live .ni-mover { animation: ni-nudge 700ms cubic-bezier(.34, 1.36, .64, 1) 2; }
@keyframes ni-nudge { 0%, 100% { translate: 0 0; } 40% { translate: 6px 0; scale: 1.04 .96; } }
.ni-trail:nth-child(3) { animation-delay: 90ms !important; }
.ni-trail:nth-child(4) { animation-delay: 170ms !important; }
.ni-cog { transform-origin: 64px 64px; }
.is-live .ni-cog { animation: ni-cog 900ms cubic-bezier(.34, 1.36, .64, 1) 60ms both; }
.is-live .ni-cog.ni-draw { animation: ni-draw 560ms cubic-bezier(.45, 0, .2, 1) both, ni-cog 900ms cubic-bezier(.34, 1.36, .64, 1) 60ms both; }
@keyframes ni-cog { from { rotate: -45deg; } to { rotate: 0deg; } }
html[data-motion="reduced"] .ni *, html[data-motion="still"] .ni * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion]) .ni * { animation: none !important; } }
@media (forced-colors: active) { .ni { stroke: currentColor; } }
.o-link {
color: inherit;
text-decoration-line: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: .24em;
text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
border-radius: 4px;
transition: text-decoration-color var(--o-t-interact) var(--o-ease);
}
.o-link:hover { text-decoration-color: currentColor; }
.o-prose a:not([class]) { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: .24em; text-decoration-color: color-mix(in srgb, currentColor 38%, transparent); }
.o-prose a:not([class]):hover { text-decoration-color: currentColor; }
.o-link--arrow {
display: inline-flex; align-items: center; gap: var(--o-space-2);
min-height: var(--o-target);
font: var(--o-weight-ui) var(--o-text-body) / 1.2 var(--o-font-ui);
letter-spacing: -.005em;
}
.o-link--arrow::after {
content: ""; flex: none; width: 18px; height: 11px; translate: 0 1px;
background: currentColor;
-webkit-mask: url("../../../v2/system/assets/doodles/arrow-right.svg") center / contain no-repeat;
mask: url("../../../v2/system/assets/doodles/arrow-right.svg") center / contain no-repeat;
transition: translate var(--o-t-interact) var(--o-ease);
}
@media (hover: hover) and (pointer: fine) { .o-link--arrow:hover::after { translate: 3px 1px; } }
.o-link--arrow:focus-visible::after { translate: 3px 1px; }
.o-pill {
display: inline-flex; align-items: center; gap: 6px;
min-height: 28px; padding: 0 var(--o-space-3);
border-radius: var(--o-r-pill);
background: var(--pill-bg, var(--o-warm)); color: var(--pill-ink, var(--o-ink));
font: var(--o-weight-ui) var(--o-text-small) / 1 var(--o-font-ui);
letter-spacing: .005em; white-space: nowrap;
}
.o-pill .o-doodle { --size: 16px; }
[data-world] .o-pill { --pill-bg: var(--world-soft); --pill-ink: var(--world-deep); }
.o-section--deep .o-pill { --pill-bg: rgb(255 255 255 / .14); --pill-ink: #fff; }
.o-kicker {
font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui);
letter-spacing: .01em; color: var(--o-ink-2);
}
.o-world-label {
display: inline-flex; align-items: center; gap: 10px;
font: 400 var(--o-text-heading) / 1.15 var(--o-font-hand);
color: var(--world-deep);
}
.o-world-label::before {
content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%;
background: var(--world-accent); translate: 0 1px;
}
.o-section--deep .o-world-label { color: #fff; }
.o-section-head {
display: flex; flex-direction: column; align-items: flex-start;
gap: var(--o-gap);
margin-block-end: var(--o-head-gap);
}
.o-section-head:last-child { margin-block-end: 0; }
.o-section-head > :is(.o-world-label, .o-kicker) { margin-block-end: calc(var(--o-gap-tight) - var(--o-gap)); }
.o-section-head > .o-cluster { margin-block-start: calc(var(--o-gap-loose) - var(--o-gap)); }
.o-section-head > .o-small { margin-block-start: calc(var(--o-gap-tight) - var(--o-gap)); }
.o-section-head .o-lead { color: var(--o-ink); }
.o-section-head--center { align-items: center; text-align: center; }
.o-section-head--center > * { margin-inline: auto; }
.o-section-head--center .o-cluster { justify-content: center; }
.o-section--deep .o-section-head .o-lead { color: #fff; }
.o-card {
position: relative; display: flex; flex-direction: column;
min-width: 0;
background: var(--o-surface); color: var(--o-ink);
border: 1px solid var(--o-line); border-radius: var(--o-r-card);
box-shadow: var(--o-shadow);
overflow: clip; text-decoration: none;
translate: 0 0;
transition:
translate var(--o-t-interact) var(--o-ease),
box-shadow var(--o-t-interact) var(--o-ease),
border-color var(--o-t-interact) var(--o-ease);
}
.o-card__media { aspect-ratio: var(--ratio, 4 / 3); background: var(--o-warm); overflow: clip; }
[data-world] .o-card__media { background: var(--world-wash); }
.o-card__media > :is(img, video, picture) { width: 100%; height: 100%; object-fit: cover; }
.o-card__body {
flex: 1; display: flex; flex-direction: column; align-items: flex-start;
gap: var(--o-space-2);
padding: var(--o-space-5);
}
.o-card__title {
font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui);
letter-spacing: var(--o-track-heading); text-wrap: balance;
}
.o-card__text { color: var(--o-ink-2); text-wrap: pretty; }
.o-card__foot {
margin-block-start: auto; padding-block-start: var(--o-space-4);
align-self: stretch;
display: flex; align-items: center; justify-content: space-between; gap: var(--o-space-3);
}
.o-card__body > .o-pill { margin-block-end: var(--o-space-1); }
.o-card__link { color: inherit; text-decoration: none; border-radius: 2px; }
.o-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--o-r-card); z-index: 1; }
.o-card__link:focus-visible { outline: none; }
.o-arrow {
flex: none; display: inline-grid; place-items: center;
width: 40px; height: 40px; border-radius: 50%;
background: var(--world-deep); color: #fff;
transition: translate var(--o-t-interact) var(--o-ease);
}
.o-arrow::before {
content: ""; width: 18px; height: 11px; background: currentColor;
-webkit-mask: url("../../../v2/system/assets/doodles/arrow-right.svg") center / contain no-repeat;
mask: url("../../../v2/system/assets/doodles/arrow-right.svg") center / contain no-repeat;
}
.o-card__foot:only-child { padding-block-start: 0; }
:is(a.o-card, .o-card:has(.o-card__link)) { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
:is(a.o-card, .o-card:has(.o-card__link)):hover {
border-color: var(--o-ink); translate: var(--o-lift-x) var(--o-lift-y); box-shadow: var(--o-pop);
}
:is(a.o-card, .o-card:has(.o-card__link)):hover .o-arrow { translate: 3px 0; }
}
:is(a.o-card:focus-visible, .o-card:has(.o-card__link:focus-visible)) {
border-color: var(--o-ink); translate: var(--o-lift-x) var(--o-lift-y); box-shadow: var(--o-pop);
outline: var(--o-focus-ring); outline-offset: var(--o-focus-offset);
}
:is(a.o-card, .o-card:has(.o-card__link)):active {
translate: 0 0; box-shadow: 0 0 0 0 var(--o-ink); transition-duration: var(--o-t-press);
}
.o-media { display: grid; gap: var(--o-space-3); min-width: 0; }
.o-media__frame {
position: relative; isolation: isolate;
aspect-ratio: var(--ratio, 4 / 3);
border-radius: var(--o-r-card); overflow: clip;
background: var(--o-warm);
}
.o-media__frame > :is(img, video, picture, canvas) { width: 100%; height: 100%; object-fit: cover; }
.o-media__frame::after {
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(47 46 43 / .06);
}
.o-media__tag { position: absolute; z-index: 3; inset-block-start: var(--o-space-3); inset-inline-start: var(--o-space-3); }
.o-media__tag .o-pill { --pill-bg: var(--o-paper); --pill-ink: var(--o-ink); box-shadow: 0 1px 2px rgb(47 46 43 / .1); }
.o-media__control { position: absolute; z-index: 3; inset-block-end: var(--o-space-3); inset-inline-end: var(--o-space-3); }
.o-media__caption {
font-size: var(--o-text-small); line-height: var(--o-lh-small);
color: var(--o-ink-2); max-inline-size: 60ch; text-wrap: pretty;
}
.o-section--deep .o-media__caption { color: color-mix(in srgb, #fff 82%, transparent); }
.o-media--bare .o-media__frame { background: none; border-radius: 0; overflow: visible; }
.o-media--bare .o-media__frame::after { content: none; }
.o-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-field-gap); min-width: 0; }
:is(.o-field__label, .o-legend, .sf-legend, .o-choices > legend, .o-options > legend, .sf-choices > legend) {
padding: 0;
font: 600 var(--o-field-label) / 1.375 var(--o-font-body);
letter-spacing: 0; color: var(--o-ink);
}
:is(.o-field__opt, .sf-opt) { font-weight: 400; color: var(--o-ink-2); }
.o-field__help {
margin: 0;
font: 400 var(--o-field-help) / 1.43 var(--o-font-body);
color: var(--o-ink-2);
}
.o-field__error {
display: flex; align-items: flex-start; gap: var(--o-space-2); margin: 0;
font: 600 var(--o-field-help) / 1.43 var(--o-font-body); color: var(--o-error);
}
.o-field__error::before, .o-notice__icon {
content: ""; flex: none; width: 16px; height: 16px; translate: 0 2px; background: currentColor;
-webkit-mask: url("../../../v2/system/assets/doodles/info.svg") center / contain no-repeat;
mask: url("../../../v2/system/assets/doodles/info.svg") center / contain no-repeat;
}
.o-field__error[hidden], .o-field__error:empty { display: none; }
.o-input, .o-select, .o-textarea {
width: 100%; min-height: var(--o-field-h); margin: 0;
padding: var(--o-field-pad);
border: 1px solid var(--o-field-edge); border-radius: var(--o-r-control);
background-color: var(--o-surface); color: var(--o-ink);
font: 500 var(--o-field-text) / 1.5 var(--o-font-body);
transition:
background-color var(--o-t-interact) var(--o-ease),
border-color var(--o-t-interact) var(--o-ease),
box-shadow var(--o-t-interact) var(--o-ease);
}
.o-textarea { min-height: 128px; resize: vertical; }
.o-select {
appearance: none; -webkit-appearance: none; padding-inline-end: 44px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1.6 1.8c2.1 2 4.1 4.3 6.5 6.4 2.2-2.3 4.2-4.3 6.3-6.5' fill='none' stroke='%2352525b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 16px center; background-size: 14px 9px;
}
.o-input::placeholder, .o-textarea::placeholder { color: var(--o-ink-2); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
:is(.o-input, .o-select, .o-textarea):hover:not(:disabled):not(:focus-visible) { background-color: var(--o-field-hover); }
}
:is(.o-input, .o-select, .o-textarea):focus-visible {
background-color: var(--o-surface); border-color: var(--o-focus);
outline: var(--o-focus-ring); outline-offset: 0;
box-shadow: var(--o-field-halo);
}
:is(.o-input, .o-select, .o-textarea)[aria-invalid="true"] {
border-color: var(--o-error); box-shadow: inset 0 0 0 1px var(--o-error);
}
:is(.o-input, .o-select, .o-textarea)[aria-invalid="true"]:focus-visible { box-shadow: inset 0 0 0 1px var(--o-error), var(--o-field-halo); }
:is(.o-input, .o-select, .o-textarea):disabled {
background-color: var(--o-disabled-fill); color: var(--o-disabled-label); border-color: var(--o-n2); cursor: not-allowed;
}
:is(.o-input--short, .sf-w-8) { max-inline-size: 11ch; }
:is(.o-input--mid, .sf-w-20) { max-inline-size: 22rem; }
:is(.o-check, .o-choice, .o-option, .sf-check, .sf-choice) > input:is([type="checkbox"], [type="radio"]) {
appearance: none; -webkit-appearance: none;
flex: none; display: grid; place-content: center;
width: var(--o-field-mark); height: var(--o-field-mark); margin: 0;
border: 1.5px solid var(--o-field-edge); border-radius: 6px;
background: var(--o-surface); cursor: inherit;
transition: background-color var(--o-t-interact) var(--o-ease), border-color var(--o-t-interact) var(--o-ease);
}
:is(.o-check, .o-choice, .o-option, .sf-check, .sf-choice) > input[type="radio"] { border-radius: 50%; }
:is(.o-check, .o-choice, .o-option, .sf-check, .sf-choice) > input:focus-visible { outline: none; }
:is(.o-check, .o-choice, .o-option, .sf-check, .sf-choice) > input:checked { background: var(--o-mint); border-color: var(--o-on-mint); }
:is(.o-check, .o-choice, .o-option, .sf-check, .sf-choice) > input[type="checkbox"]::after {
content: ""; width: 12px; height: 9px; scale: 0; background: var(--o-on-mint);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1.2 4.6l3.1 3 6.5-6.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1.2 4.6l3.1 3 6.5-6.6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
transition: scale var(--o-t-interact) var(--o-settle);
}
:is(.o-check, .o-choice, .o-option, .sf-check, .sf-choice) > input[type="radio"]::after {
content: ""; width: 8px; height: 8px; border-radius: 50%; scale: 0; background: var(--o-on-mint);
transition: scale var(--o-t-interact) var(--o-settle);
}
:is(.o-check, .o-choice, .o-option, .sf-check, .sf-choice) > input:checked::after { scale: 1; }
:is(.o-check, .o-choice, .o-option, .sf-check, .sf-choice) > input:disabled { background: var(--o-disabled-fill); border-color: var(--o-n2); }
:is(.o-check, .sf-check) > input[aria-invalid="true"] { border-color: var(--o-error); box-shadow: 0 0 0 1px var(--o-error); }
:is(.o-check, .sf-check) {
display: flex; align-items: flex-start; gap: var(--o-space-3);
min-height: var(--o-target); padding: var(--o-space-2) 0;
font: 500 var(--o-field-text) / 1.45 var(--o-font-body); color: var(--o-ink);
cursor: pointer;
}
:is(.o-check, .sf-check) > input { margin-block-start: 2px; }
:is(.o-check, .sf-check):has(input:focus-visible) { outline: var(--o-focus-ring); outline-offset: 4px; border-radius: 6px; }
:is(.o-check, .sf-check):has(input:disabled) { color: var(--o-disabled-label); cursor: not-allowed; }
.o-choices { display: grid; gap: var(--o-space-1); margin: 0; padding: 0; border: 0; min-width: 0; }
.o-choices > legend { margin-block-end: var(--o-space-2); }
.o-choice {
display: flex; align-items: center; gap: var(--o-space-3);
min-height: var(--o-target); padding: 0 var(--o-space-3); margin-inline: calc(-1 * var(--o-space-3));
border-radius: var(--o-r-control);
font: 500 var(--o-field-text) / 1.35 var(--o-font-body); color: var(--o-ink); cursor: pointer;
transition: background-color var(--o-t-interact) var(--o-ease);
}
@media (hover: hover) and (pointer: fine) { .o-choice:hover { background: var(--o-field-hover); } }
.o-choice:has(input:focus-visible) { outline: var(--o-focus-ring); outline-offset: 0; }
:is(.o-options, .sf-choices) { display: grid; gap: var(--o-space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
:is(.o-options, .sf-choices) > legend { margin-block-end: var(--o-field-gap); }
:is(.o-options, .sf-choices) > .o-field__help { margin-block: calc(-1 * var(--o-field-gap) + 2px) 2px; }
:is(.o-options__grid, .sf-choices__grid) { display: grid; gap: var(--o-space-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.25rem), 1fr)); }
:is(.o-options__grid--wide, .sf-choices__grid--wide) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
:is(.o-option, .sf-choice) {
display: flex; align-items: center; gap: var(--o-space-3);
min-height: var(--o-target); padding: var(--o-field-pad);
border: 1px solid var(--o-field-edge); border-radius: var(--o-r-control);
background: var(--o-surface);
font: 500 var(--o-field-text) / 1.35 var(--o-font-body); color: var(--o-ink);
cursor: pointer;
transition: background-color var(--o-t-interact) var(--o-ease), border-color var(--o-t-interact) var(--o-ease), box-shadow var(--o-t-interact) var(--o-ease);
}
@media (hover: hover) and (pointer: fine) { :is(.o-option, .sf-choice):hover { background: var(--o-field-hover); } }
:is(.o-option, .sf-choice):has(input:checked) {
border-color: var(--o-mint); background: var(--o-warm);
box-shadow: inset 0 0 0 1px var(--o-mint);
}
:is(.o-option, .sf-choice):has(input:focus-visible) { outline: var(--o-focus-ring); outline-offset: 2px; }
:is(.o-options, .sf-choices)[data-invalid] :is(.o-option, .sf-choice):not(:has(input:checked)) { border-color: var(--o-error); }
:is(.o-summary, .sf-summary) {
display: grid; gap: var(--o-space-2);
padding: var(--o-space-4) var(--o-space-5);
border: 1px solid color-mix(in srgb, var(--o-error) 24%, transparent);
border-radius: var(--o-r-control);
background: var(--o-error-soft); color: var(--o-ink);
}
:is(.o-summary, .sf-summary):focus { outline: none; }
:is(.o-summary, .sf-summary):focus-visible:not([data-quiet-focus]) { outline: var(--o-focus-ring); outline-offset: 2px; }
:is(.o-summary__title, .sf-summary__title) { font: var(--o-weight-title) var(--o-text-body) / 1.3 var(--o-font-ui); color: var(--o-error); }
:is(.o-summary, .sf-summary) ul { display: grid; gap: var(--o-space-1); margin: 0; padding: 0; list-style: none; }
:is(.o-summary, .sf-summary) a {
color: var(--o-ink); font-weight: 600;
text-decoration-line: underline; text-decoration-thickness: 1.5px; text-underline-offset: .24em;
text-decoration-color: color-mix(in srgb, var(--o-error) 55%, transparent);
border-radius: 4px;
}
.o-notice {
display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--o-space-1) var(--o-space-3);
padding: var(--o-space-4); border-radius: var(--o-r-control);
border: 1px solid color-mix(in srgb, var(--o-error) 26%, transparent);
background: var(--o-error-soft); color: var(--o-ink);
}
.o-notice[hidden] { display: none; }
.o-notice:focus { outline: none; }
.o-notice:focus-visible { outline: var(--o-focus-ring); outline-offset: 2px; }
.o-notice__icon { width: 20px; height: 20px; translate: 0 1px; color: var(--o-error); grid-row: span 2; }
.o-notice__title { font: var(--o-weight-title) var(--o-field-text) / 1.35 var(--o-font-ui); letter-spacing: -.005em; }
.o-notice__text { grid-column: 2; font-size: var(--o-text-small); line-height: 1.5; text-wrap: pretty; }
.o-notice__text a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: .2em; border-radius: 4px; }
.o-notice__actions { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-space-2) var(--o-space-3); margin-block-start: var(--o-space-2); }
.o-notice__done { grid-column: 2; font: var(--o-weight-ui) var(--o-text-small) / 1.4 var(--o-font-ui); color: var(--o-action); }
.o-notice__done:empty { display: none; }
.o-notice--quiet { border-color: var(--o-line); background: var(--o-warm); }
.o-notice--quiet .o-notice__icon { color: var(--o-ink-2); }
.o-notice--ok { border-color: color-mix(in srgb, var(--o-action) 24%, transparent); background: color-mix(in srgb, var(--o-mint) 16%, var(--o-surface)); }
.o-notice--ok .o-notice__icon { color: var(--o-action); }
:is(.o-note, .sf-note) {
display: flex; gap: var(--o-space-2); align-items: flex-start;
margin: 0; padding: 10px 12px; border-radius: var(--o-r-control);
background: var(--o-warm);
font: 400 var(--o-text-small) / 1.43 var(--o-font-body); color: var(--o-ink);
}
:is(.o-note, .sf-note)::before {
content: ""; flex: none; width: 16px; height: 16px; translate: 0 2px; background: var(--o-ink-2);
-webkit-mask: url("../../../v2/system/assets/doodles/info.svg") center / contain no-repeat;
mask: url("../../../v2/system/assets/doodles/info.svg") center / contain no-repeat;
}
:is(.o-note, .sf-note)[hidden] { display: none; }
html[data-motion="still"] :is(.o-input, .o-select, .o-textarea, .o-choice, .o-option, .sf-choice),
html[data-motion="still"] :is(.o-check, .o-choice, .o-option, .sf-check, .sf-choice) > input,
html[data-motion="still"] :is(.o-check, .o-choice, .o-option, .sf-check, .sf-choice) > input::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
html:not([data-motion]) :is(.o-check, .o-choice, .o-option, .sf-check, .sf-choice) > input::after { transition-duration: 1ms; }
}
@media (forced-colors: active) {
:is(.o-input, .o-select, .o-textarea, .o-option, .sf-choice) { border-color: CanvasText; }
:is(.o-input, .o-select, .o-textarea):focus-visible { outline-color: Highlight; box-shadow: none; }
:is(.o-check, .o-choice, .o-option, .sf-check, .sf-choice) > input { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
:is(.o-check, .o-choice, .o-option, .sf-check, .sf-choice) > input:checked { background: Highlight; border-color: Highlight; }
:is(.o-check, .o-choice, .o-option, .sf-check, .sf-choice) > input::after { background: HighlightText; }
:is(.o-option, .sf-choice):has(input:checked) { border-color: Highlight; }
:is(.o-notice, .o-summary, .sf-summary) { border-color: CanvasText; }
:is(.o-note, .sf-note)::before, .o-notice__icon { background: CanvasText; }
}
.o-chips { display: flex; flex-wrap: wrap; gap: var(--o-space-2); }
.o-chip { position: relative; display: inline-flex; }
.o-chip > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.o-chip > span {
display: inline-flex; align-items: center; min-height: var(--o-target); padding: 0 var(--o-space-4);
border: 1px solid var(--o-n4); border-radius: var(--o-r-pill); background: var(--o-surface);
font: var(--o-weight-ui) var(--o-text-small) / 1.15 var(--o-font-ui); color: var(--o-ink); text-align: center;
transition: background-color var(--o-t-interact) var(--o-ease), border-color var(--o-t-interact) var(--o-ease), box-shadow var(--o-t-interact) var(--o-ease);
}
@media (hover: hover) and (pointer: fine) { .o-chip:hover > span { border-color: var(--o-ink); } }
.o-chip > input:checked + span { background: var(--o-warm); border-color: var(--o-ink); box-shadow: inset 0 0 0 1px var(--o-ink); }
.o-chip:has(> input:focus-visible) > span { outline: var(--o-focus-ring); outline-offset: var(--o-focus-offset); }
.o-chip > input:disabled + span { background: var(--o-disabled-fill); color: var(--o-disabled-label); border-color: var(--o-n2); cursor: not-allowed; }
html[data-motion="still"] .o-chip > span { transition: none; }
@media (forced-colors: active) {
.o-chip > span { border-color: ButtonText; }
.o-chip > input:checked + span { border-color: Highlight; outline: 2px solid Highlight; outline-offset: -3px; }
}
.o-sheet {
margin: 0; padding: var(--o-space-5);
width: min(340px, 100vw - 2 * var(--o-gutter));
border: 1px solid var(--o-line); border-radius: var(--o-r-card);
background: var(--o-surface); color: var(--o-ink);
box-shadow: var(--o-shadow-raised);
}
.o-sheet[popover] { position: fixed; inset: calc(var(--o-header-h) - var(--o-space-1)) var(--o-gutter) auto auto; }
.o-sheet--menu[popover] { inset-inline-start: var(--o-gutter); width: auto; }
.o-sheet:popover-open { animation: o-sheet-in var(--o-t-enter) var(--o-ease) both; }
@keyframes o-sheet-in { from { opacity: 0; translate: 0 -6px; } }
.o-sheet::backdrop { background: transparent; }
.o-sheet__title { font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui); letter-spacing: var(--o-track-heading); text-wrap: balance; margin-block-end: var(--o-space-4); }
.o-sheet__group + .o-sheet__group { margin-block-start: var(--o-space-4); padding-block-start: var(--o-space-4); border-block-start: 1px solid var(--o-line); }
.o-sheet__note { margin-block-start: var(--o-space-4); font-size: var(--o-text-small); color: var(--o-ink-2); }
.o-sheet--menu ul { display: grid; gap: var(--o-space-1); margin: 0; padding: 0; list-style: none; }
.o-sheet--menu .o-nav-pill { --h: 52px; width: calc(100% + var(--o-space-2)); margin-inline-start: calc(-1 * var(--o-space-2)); justify-content: flex-start; font-size: var(--o-text-body); }
html[data-motion="reduced"] .o-sheet:popover-open { animation-name: o-fade; }
html[data-motion="still"] .o-sheet:popover-open { animation: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion]) .o-sheet:popover-open { animation-name: o-fade; } }
.o-header {
position: sticky; top: 0; z-index: var(--o-z-header);
background: color-mix(in srgb, var(--o-canvas) 97%, transparent);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
transition: box-shadow var(--o-t-interact) var(--o-ease);
}
.o-header[data-scrolled] { box-shadow: 0 1px 0 var(--o-line); }
.o-header__in {
display: flex; align-items: center; gap: var(--o-space-3);
height: var(--o-header-h);
width: min(100% - 2 * var(--o-gutter), var(--o-max-wide)); margin-inline: auto;
}
.o-header__logo { display: inline-flex; flex: none; margin-inline-end: auto; border-radius: 8px; }
.o-header__logo img { width: 76px; height: auto; }
.o-header__nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.o-header__end { display: flex; align-items: center; gap: var(--o-space-2); }
.o-header__menu, .o-header__trial--pocket { display: inline-flex; }
.o-header__nav, .o-header__view, .o-header__trial--peek { display: none; }
@media (min-width: 900px) {
.o-header__logo img { width: 92px; }
.o-header__view, .o-header__trial--peek { display: inline-flex; }
.o-header__trial--pocket { display: none; }
.o-header__trial--peek { margin-block-start: 6px; }
}
@media (min-width: 1100px) {
.o-header__nav { display: block; }
.o-header__menu { display: none; }
.o-header__end { margin-inline-start: var(--o-space-3); }
}
.o-footer {
background: var(--o-warm); color: var(--o-ink);
padding-block: var(--o-space-8) var(--o-space-6);
}
.o-footer__in {
display: grid; gap: var(--o-space-7);
width: min(100% - 2 * var(--o-gutter), var(--o-max-wide)); margin-inline: auto;
}
.o-footer__brand img { width: 92px; height: auto; }
.o-footer__tagline {
margin-block-start: var(--o-space-4);
font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui);
letter-spacing: var(--o-track-heading); max-inline-size: 16ch; text-wrap: balance;
}
.o-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o-space-5) var(--o-space-6); }
.o-footer__nav ul { display: grid; gap: var(--o-space-1); align-content: start; margin: 0; padding: 0; list-style: none; }
.o-footer__nav a {
display: inline-flex; align-items: center; min-height: 32px;
color: var(--o-ink-2); text-decoration: none; border-radius: 4px;
text-underline-offset: .24em; text-decoration-thickness: 1.5px;
}
.o-footer__nav a:hover { color: var(--o-ink); text-decoration-line: underline; }
.o-footer__signup { display: grid; gap: var(--o-space-3); align-content: start; max-inline-size: 26rem; }
.o-footer__signup-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-space-3); }
.o-footer__signup-row .o-input { flex: 1 1 12rem; width: auto; }
.o-footer__legal {
display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--o-space-2) var(--o-space-5);
padding-block-start: var(--o-space-5); border-block-start: 1px solid var(--o-warm-high);
font-size: var(--o-text-small); color: var(--o-ink-2);
}
@media (min-width: 900px) {
.o-footer__in { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 4fr); }
.o-footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.o-footer__legal { grid-column: 1 / -1; }
}
.o-rule { height: 0; margin: 0; border: 0; border-block-start: 1px solid var(--o-line); }
html:is([data-motion="reduced"], [data-motion="still"]) :is(.o-card, .o-arrow) { translate: none !important; }
html:is([data-motion="reduced"], [data-motion="still"]) .o-link--arrow::after { translate: 0 1px !important; }
html:is([data-motion="reduced"], [data-motion="still"]) :is(a.o-card, .o-card:has(.o-card__link)):is(:hover, :focus-visible, :has(.o-card__link:focus-visible)) { box-shadow: var(--o-shadow); }
html[data-motion="still"] :is(.o-card, .o-arrow, .o-link, .o-input, .o-select, .o-textarea, .o-choice, .o-header) { transition: none !important; }
html[data-motion="still"] .o-link--arrow::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
html:not([data-motion]) :is(.o-card, .o-arrow) { translate: none !important; }
html:not([data-motion]) .o-link--arrow::after { translate: 0 1px !important; }
html:not([data-motion]) :is(a.o-card, .o-card:has(.o-card__link)):is(:hover, :focus-visible, :has(.o-card__link:focus-visible)) { box-shadow: var(--o-shadow); }
}
@media (forced-colors: active) {
.o-card, .o-sheet { border-color: CanvasText; }
.o-pill { border: 1px solid CanvasText; }
.o-world-label::before, .o-arrow { forced-color-adjust: none; }
.o-link--arrow::after, .o-arrow::before, .o-field__error::before { background: CanvasText; }
}
.o-doodle--download {
-webkit-mask-image: url("../components/icons/doodle-download.svg");
mask-image: url("../components/icons/doodle-download.svg");
}
.o-btn[download] .o-btn__icon > .o-doodle,
.o-doodle:is(.r-dl, [style*="doodle-download.svg"]) {
-webkit-mask-image: url("../components/icons/doodle-download.svg") !important;
mask-image: url("../components/icons/doodle-download.svg") !important;
}
.yo-live, .yo-menu__portrait, .yo-play__art, .yo-offer__art { display: block; }
.yo-live .oa, .yo-menu__portrait .oa, .yo-play__art .oa, .yo-offer__art .oa { display: block; width: 100%; height: 100%; overflow: hidden; }
.oa__body, .oa__shadow { transform-box: view-box; transform-origin: 50% var(--oa-foot, 88%); }
.yo-live[data-breathe] .oa__body { animation: yo-breathe 5.6s cubic-bezier(.45, 0, .55, 1) 2; }
.yo-live[data-breathe] .oa__shadow { animation: yo-shadow 5.6s cubic-bezier(.45, 0, .55, 1) 2; }
@keyframes yo-breathe { 0%, 100% { scale: 1 1; } 46% { scale: 1.018 1.04; } }
@keyframes yo-shadow { 0%, 100% { scale: 1 1; } 46% { scale: .94 1; } }
html:is([data-motion="reduced"], [data-motion="still"]) .yo-live .oa__body,
html:is([data-motion="reduced"], [data-motion="still"]) .yo-live .oa__shadow { animation: none; }
@media (prefers-reduced-motion: reduce) {
html:not([data-motion]) .yo-live .oa__body, html:not([data-motion]) .yo-live .oa__shadow { animation: none; }
}
.yo-home {
display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: var(--o-space-4);
min-height: 112px; box-sizing: border-box;
max-inline-size: 28rem; margin-block-start: var(--o-space-5); padding: var(--o-space-4);
border: 1px solid var(--o-line); border-radius: var(--o-r-card); background: var(--o-surface);
}
.yo-home[hidden] { display: none; }
html[data-has-orli] .o-footer__brand:not(:has(> .yo-home:not([hidden])))::after {
content: ""; display: block; height: 112px; max-inline-size: 28rem; margin-block-start: var(--o-space-5);
}
.yo-home__art { width: 72px; height: 72px; }
.yo-home__art[hidden] { display: none; }
.yo-home__text { min-width: 0; }
.yo-home__text[hidden] { display: none; }
.yo-home__title { font: var(--o-weight-ui) var(--o-text-body) / 1.3 var(--o-font-ui); letter-spacing: -.005em; overflow-wrap: anywhere; }
.yo-home__note { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.yo-home__actions { display: flex; flex-wrap: wrap; gap: 0 var(--o-space-4); margin: var(--o-space-1) 0 0; padding: 0; list-style: none; }
.yo-home__actions .o-link { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--o-text-small); font-family: var(--o-font-ui); font-weight: var(--o-weight-ui); }
.yo-home__gone { grid-column: 1 / -1; font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.yo-home__gone[hidden] { display: none; }
.yo-home__gone:focus { outline: none; }
.yo-home__gone:focus-visible { outline: var(--o-focus-ring); outline-offset: 4px; border-radius: 4px; }
.yo-home:has(> .yo-home__gone:not([hidden])) { min-height: 0; }
.yo-linkbtn { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.yo-row[hidden] { display: none; }
.yo-row__btn .yo-row__art { display: block; width: var(--icon, 28px); height: var(--icon, 28px); }
.yo-row__btn .yo-row__art > .oa { display: block; width: 100%; height: 100%; overflow: hidden; }
.yo { display: inline-flex; flex: none; align-items: center; }
.yo[hidden] { display: none; }
.yo__btn {
position: relative; display: inline-grid; place-items: center;
width: 48px; height: 48px; padding: 4px; margin: 0; box-sizing: border-box;
border: 0; border-radius: 50%; background: transparent;
cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
transition: background-color var(--o-t-interact) var(--o-ease);
}
.yo__btn:focus { outline: none; }
.yo__btn:focus-visible { outline: var(--o-focus-ring); outline-offset: 2px; }
.yo__btn[aria-expanded="true"] { background: var(--o-warm); }
@media (hover: hover) and (pointer: fine) { .yo__btn:hover { background: var(--o-warm); } }
.yo__art { width: 40px; height: 40px; transform-origin: 50% 90%; }
.yo-menu.o-sheet { width: min(304px, calc(100vw - 16px)); padding: var(--o-space-4); }
.yo-menu.o-sheet[popover] { inset: auto; inset-block-start: calc(var(--o-header-h) - var(--o-space-1)); inset-inline-end: var(--o-gutter); }
.yo-view { display: none; }
.yo-menu[data-view="menu"] .yo-view--menu,
.yo-menu[data-view="play"] .yo-view--play,
.yo-menu[data-view="forget"] .yo-view--forget { display: block; }
.yo-menu__head { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: var(--o-space-3); padding: var(--o-space-1) var(--o-space-1) var(--o-space-3); }
.yo-menu__portrait { width: 56px; height: 56px; padding: 6px; box-sizing: border-box; border-radius: 50%; background: var(--o-warm); }
.yo-menu__who { min-width: 0; }
.yo-menu__title { font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui); letter-spacing: var(--o-track-heading); overflow-wrap: anywhere; }
.yo-menu__note { margin-block-start: 2px; font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.yo-menu__list { display: grid; gap: var(--o-space-1); margin: 0; padding: var(--o-space-2) 0 0; list-style: none; border-block-start: 1px solid var(--o-line); }
.yo-menu__item.o-nav-pill { --h: 48px; width: 100%; justify-content: flex-start; font-size: var(--o-text-body); }
.yo-doodle { --size: 24px; }
.yo-view__bar { display: flex; align-items: center; gap: var(--o-space-2); margin: calc(-1 * var(--o-space-1)) 0 var(--o-space-3) calc(-1 * var(--o-space-2)); }
.yo-view__title { font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui); letter-spacing: var(--o-track-heading); }
.yo-view--forget .yo-view__title { margin-block-end: var(--o-space-2); }
.yo-forget__text { color: var(--o-ink-2); text-wrap: pretty; }
.yo-actions { display: flex; flex-wrap: wrap; gap: var(--o-space-3); margin-block-start: var(--o-space-4); }
.yo-play {
position: relative; display: grid; place-items: center;
height: 208px; border-radius: var(--o-r-card); background: var(--o-warm);
overflow: hidden;
}
.yo-play__orli {
position: relative; display: grid; place-items: center;
width: 168px; height: 168px; margin: 0; padding: 0;
border: 0; border-radius: 50%; background: transparent; cursor: pointer;
-webkit-tap-highlight-color: transparent; touch-action: none; user-select: none; -webkit-user-select: none;
}
.yo-play__orli:focus { outline: none; }
.yo-play__orli:focus-visible { outline: var(--o-focus-ring); outline-offset: 0; }
.yo-play__art { width: 120px; height: 120px; transform-origin: 50% 86%; }
.yo-play__ring {
position: absolute; inset: 10px; border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--o-mint) 70%, transparent);
background: color-mix(in srgb, var(--o-mint) 12%, transparent);
opacity: 0; transition: opacity 1.2s var(--o-ease);
}
.yo-play__orli.is-breathing .yo-play__ring { opacity: 1; }
.yo-play__heart {
position: absolute; left: 50%; top: 18px; width: 30px; height: 24px; opacity: 0; pointer-events: none;
transform: translate(-50%, 0);
background: url("../../../../design-kit/characters/parts/creator/legacy/accessory_heart.svg") center / contain no-repeat;
}
.yo-play__hint { margin-block: var(--o-space-3) var(--o-space-1); font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.yo-play__more { font-size: var(--o-text-body); }
.yo-offer { background: var(--o-warm); border-block-end: 1px solid var(--o-warm-high); }
.yo-offer__in {
display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: var(--o-space-3) var(--o-space-4);
width: min(100% - 2 * var(--o-gutter), var(--o-max-wide)); margin-inline: auto; padding-block: var(--o-space-3);
}
.yo-offer__art { width: 48px; height: 48px; }
.yo-offer__title { font: var(--o-weight-ui) var(--o-text-body) / 1.3 var(--o-font-ui); letter-spacing: -.005em; }
.yo-offer__note { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); text-wrap: pretty; }
.yo-offer .yo-actions { grid-column: 1 / -1; margin: 0; }
@media (min-width: 600px) {
.yo-offer__in { grid-template-columns: 48px minmax(0, 1fr) auto; }
.yo-offer .yo-actions { grid-column: auto; }
}
html[data-motion="reduced"] .yo-menu:popover-open { animation-name: o-fade; }
html[data-motion="still"] .yo-menu:popover-open { animation: none; }
html[data-motion="still"] :is(.yo__btn, .yo-play__ring) { transition: none; }
@media (prefers-reduced-motion: reduce) {
html:not([data-motion]) .yo-menu:popover-open { animation-name: o-fade; }
}
@media (forced-colors: active) {
.yo__btn:focus-visible, .yo-play__orli:focus-visible, .yo-home__gone:focus-visible { outline: 3px solid Highlight; }
.yo__btn[aria-expanded="true"] { outline: 1px solid CanvasText; }
.yo-home, .yo-offer { border-color: CanvasText; }
.yo-menu__portrait, .yo-play, .yo-home__art, .yo-offer__art { forced-color-adjust: none; }
.yo-play__ring { border-color: CanvasText; }
}
@media print {
.yo, .yo-home, .yo-row, .yo-offer, .yo-menu { display: none !important; }
html[data-has-orli] .o-footer__brand::after { display: none !important; }
}
:root {
--tod-filter: brightness(1) contrast(1) saturate(1);
--tod-fresh: #d3e4fb; --tod-fresh-o: 0;
--tod-dusk: #3a4fae;  --tod-dusk-o: 0;
--tod-lamps: 0;
--tod-t: 2.4s;
}
[data-daypart="morning"] {
--tod-filter: brightness(1.04) contrast(.98) saturate(.94);
--tod-fresh: #d3e4fb; --tod-fresh-o: .3; --tod-dusk-o: 0; --tod-lamps: 0;
}
[data-daypart="afternoon"] {
--tod-filter: brightness(1.02) contrast(1) saturate(.97);
--tod-fresh: #eef3fa; --tod-fresh-o: .2; --tod-dusk-o: 0; --tod-lamps: 0;
}
[data-daypart="golden"] {
--tod-filter: brightness(1) contrast(1) saturate(1);
--tod-fresh-o: 0; --tod-dusk-o: 0; --tod-lamps: .25;
}
[data-daypart="dusk"] {
--tod-filter: brightness(.93) contrast(1.03) saturate(.92);
--tod-fresh-o: 0; --tod-dusk-o: .28; --tod-lamps: 1;
}
[data-daypart][data-lanterns] { --tod-lamps: 1; }
.tod-img { filter: var(--tod-filter); }
.tod-layer {
position: absolute; z-index: auto; pointer-events: none;
overflow: hidden; border-radius: inherit;
}
.tod-layer[hidden] { display: none; }
.tod-wash {
position: absolute; inset: 0;
-webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .6) 22%, rgb(0 0 0 / 0) 48%);
mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .6) 22%, rgb(0 0 0 / 0) 48%);
}
.tod-wash--fresh { background-color: var(--tod-fresh); opacity: var(--tod-fresh-o); mix-blend-mode: soft-light; }
.tod-wash--dusk { background-color: var(--tod-dusk); opacity: var(--tod-dusk-o); mix-blend-mode: multiply; }
.tod-layer--cutout .tod-wash { display: none; }
.tod-layer--cutout:not(.has-lamps) { display: none; }
.tod-lights { position: absolute; inset: 0; }
.tod-layer:not(.has-lamps) .tod-lights { display: none; }
.tod-lamp {
position: absolute;
left: calc(var(--cx) + var(--x) * var(--cw));
top: calc(var(--cy) + var(--y) * var(--ch));
width: max(14px, calc(var(--r) * var(--cw) * 6)); aspect-ratio: 1;
translate: -50% -50%; border-radius: 50%;
background: radial-gradient(circle, rgb(255 238 196 / .92) 0 8%, rgb(255 190 104 / .6) 19%, rgb(255 158 78 / .24) 40%, rgb(255 140 70 / 0) 70%);
mix-blend-mode: screen;
opacity: calc(var(--tod-lamps) * var(--a, 1));
}
html.tod-changing .tod-img { transition: filter var(--tod-t) ease-in-out; }
html.tod-changing .tod-wash { transition: opacity var(--tod-t) ease-in-out; }
html.tod-changing .tod-lamp { transition: opacity var(--tod-t) ease-in-out; }
html.tod-changing .tod-layer.is-focal .tod-lamp { transition: opacity 1.4s ease-out calc(var(--i, 0) * 180ms + 400ms); }
.tod-layer--stage .tod-lights { display: none; }
html[data-motion="reduced"] { --tod-t: 1.2s; }
html[data-motion="reduced"].tod-changing .tod-layer.is-focal .tod-lamp { transition: opacity var(--tod-t) ease-in-out; }
html[data-motion="still"] :is(.tod-img, .tod-wash, .tod-lamp) { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
html:not([data-motion]) { --tod-t: 1.2s; }
html:not([data-motion]).tod-changing .tod-layer.is-focal .tod-lamp { transition: opacity var(--tod-t) ease-in-out; }
}
@media (prefers-contrast: more), (forced-colors: active) {
.tod-img { filter: none !important; transition: none !important; }
.tod-layer { display: none !important; }
}
@media print {
.tod-img { filter: none !important; transition: none !important; }
.tod-layer { display: none !important; }
}
[hidden]:not([hidden="until-found"]) { display: none !important; }
html:not([data-verify="on"]) [data-verify-only] { display: none !important; }
orli-header, orli-footer { display: contents; }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
main { flex: 1 0 auto; }
main:focus { outline: none; }
html { scroll-padding-top: 0; }
:where(main, .s-footer) :where([id], a, button, input, select, textarea, summary, [tabindex]) {
scroll-margin-top: calc(var(--o-header-h) + var(--o-space-4));
}
:where(main) .o-display { font-size: min(var(--o-text-display), max(1.5rem, 12.5vi)); }
:where(main) .o-title { font-size: min(var(--o-text-title), max(1.25rem, 9.5vi)); }
main :is(h1, h2, h3, h4, .o-display, .o-title, .o-heading) { overflow-wrap: break-word; }
@media (max-width: 40em) {
main .o-btn { max-inline-size: 100%; }
main .o-btn__label { white-space: normal; text-wrap: balance; min-inline-size: 0; overflow-wrap: anywhere; }
main .o-pill { max-inline-size: 100%; white-space: normal; }
}
@media (max-width: 30em) {
main :is(h1, h2, h3, .o-display, .o-title) { overflow-wrap: anywhere; }
}
.o-link--arrow { display: inline-block; padding-block: 12px; }
.o-link--arrow::after {
content: "\2060"; display: inline; flex: none;
position: relative; inset-inline-start: 0; top: 1px; translate: none;
margin-inline-start: var(--o-space-2); padding-inline-start: 18px;
-webkit-mask-size: 18px 11px; mask-size: 18px 11px;
-webkit-mask-position: right center; mask-position: right center;
transition: inset-inline-start var(--o-t-interact) var(--o-ease);
}
@media (hover: hover) and (pointer: fine) { .o-link--arrow:hover::after { inset-inline-start: 3px; translate: none; } }
.o-link--arrow:focus-visible::after { inset-inline-start: 3px; translate: none; }
html:is([data-motion="reduced"], [data-motion="still"]) .o-link--arrow::after { inset-inline-start: 0 !important; translate: none !important; }
html[data-motion="still"] .o-link--arrow::after { transition: none; }
@media (prefers-reduced-motion: reduce) { html:not([data-motion]) .o-link--arrow::after { inset-inline-start: 0 !important; translate: none !important; } }
@media (forced-colors: active) {
.o-link--arrow::after { forced-color-adjust: none; background: CanvasText; }
:is(a.o-link--arrow, a .o-link--arrow)::after { background: LinkText; }
button.o-link--arrow::after { background: ButtonText; }
}
.s-stage {
position: relative; isolation: isolate;
height: calc(100svh - var(--o-header-h)); min-height: 440px;
}
.s-slot {
display: grid; place-content: center; justify-items: center; gap: var(--o-space-2);
min-height: 280px; padding: var(--o-space-6);
border: 1.5px dashed var(--o-n3); border-radius: var(--o-r-card);
color: var(--o-ink-2); text-align: center;
font-size: var(--o-text-small); line-height: var(--o-lh-small);
}
.s-slot b { font: var(--o-weight-ui) var(--o-text-body) / 1.3 var(--o-font-ui); color: var(--o-ink); }
.s-slot span { max-inline-size: 46ch; text-wrap: pretty; }
.s-slot code { font-size: var(--o-text-small); }
@view-transition { navigation: auto; }
html[data-vt] .s-header { view-transition-name: s-header; }
::view-transition-group(s-header) { animation: none; }
::view-transition-old(s-header) { display: none; }
::view-transition-new(s-header) { animation: none; }
::view-transition-old(root) { animation: 140ms var(--o-ease) both s-vt-out; }
::view-transition-new(root) { animation: var(--o-t-enter) var(--o-ease) 60ms both s-vt-in; }
@keyframes s-vt-out { to { opacity: 0; } }
@keyframes s-vt-in { from { opacity: 0; translate: 0 8px; } }
@keyframes s-vt-fade { from { opacity: 0; } }
html[data-motion="reduced"]::view-transition-new(root) { animation-name: s-vt-fade; }
html[data-motion="still"]::view-transition-group(*),
html[data-motion="still"]::view-transition-old(*),
html[data-motion="still"]::view-transition-new(*) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
html:not([data-motion])::view-transition-new(root) { animation-name: s-vt-fade; }
}
:root { --o-font-hand: var(--o-font-ui); }
:is(.o-world-label, .o-hand) { font-weight: var(--o-weight-ui); }
:root {
--s-film-x: 50%;
--s-film-pink: var(--w-luna-stage);
--s-film-mint: color-mix(in srgb, var(--o-mint) 55%, var(--o-surface));
--s-film-lilac: var(--w-zeke-stage);
--s-film-sky: color-mix(in srgb, var(--w-sasha-accent) 30%, var(--o-surface));
--s-film: var(--s-film-pink), var(--s-film-mint) 26%, var(--s-film-lilac) 52%, var(--s-film-sky) 76%, var(--s-film-pink);
--s-rim: color-mix(in srgb, var(--s-film-pink) 70%, var(--o-n3)), color-mix(in srgb, var(--s-film-mint) 70%, var(--o-n3)) 26%, color-mix(in srgb, var(--s-film-lilac) 70%, var(--o-n3)) 52%, color-mix(in srgb, var(--s-film-sky) 70%, var(--o-n3)) 76%, color-mix(in srgb, var(--s-film-pink) 70%, var(--o-n3));
--s-swirl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='160'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' primitiveUnits='userSpaceOnUse' x='0' y='0' width='720' height='160'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .022' numOctaves='2' seed='11' stitchTiles='stitch' x='0' y='0' width='720' height='160'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .97 0 0 0 0 1 .34 0 0 0 -.12'/%3E%3C/filter%3E%3Crect width='720' height='160' filter='url(%23f)'/%3E%3C/svg%3E");
--s-glass-blur: blur(16px) saturate(140%);
--s-glass-bar: color-mix(in srgb, var(--o-canvas) 68%, transparent);
--s-glass-sheet: color-mix(in srgb, var(--o-canvas) 88%, transparent);
--s-glass-bar-dark: color-mix(in srgb, var(--o-canvas) 76%, var(--o-warm));
--s-glass-top: inset 0 1px 0 #fff;
}
.s-header {
background: transparent;
-webkit-backdrop-filter: none; backdrop-filter: none;
}
.s-header[data-scrolled] { box-shadow: none; }
.s-header::before, .s-header::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
opacity: 0; transition: opacity var(--o-t-enter) var(--o-ease);
}
.s-header::before {
background-image: linear-gradient(90deg, var(--s-rim)), var(--s-swirl);
background-position: var(--s-film-x) 100%, var(--s-film-x) 0;
background-size: 160% 1px, 720px 160px;
background-repeat: no-repeat, repeat-x;
background-color: var(--s-bar-tint, var(--s-glass-bar));
-webkit-backdrop-filter: var(--s-glass-blur); backdrop-filter: var(--s-glass-blur);
box-shadow: var(--s-glass-top), 0 12px 32px -18px rgb(60 57 50 / .28);
transition: opacity var(--o-t-enter) var(--o-ease), background-color var(--o-t-enter) var(--o-ease);
}
.s-header[data-over="dark"] { --s-bar-tint: var(--s-glass-bar-dark); }
.s-header::after {
background:
linear-gradient(to bottom, rgb(255 255 255 / .7), rgb(255 255 255 / 0) 38%),
linear-gradient(100deg, var(--s-film)) var(--s-film-x) 0 / 130% 100% no-repeat;
-webkit-mask:
linear-gradient(to bottom, #000, rgb(0 0 0 / .22) 22%, rgb(0 0 0 / .05) 52%, rgb(0 0 0 / .22) 80%, #000),
linear-gradient(to right, rgb(0 0 0 / .5), transparent 10%, transparent 90%, rgb(0 0 0 / .5));
mask:
linear-gradient(to bottom, #000, rgb(0 0 0 / .22) 22%, rgb(0 0 0 / .05) 52%, rgb(0 0 0 / .22) 80%, #000),
linear-gradient(to right, rgb(0 0 0 / .5), transparent 10%, transparent 90%, rgb(0 0 0 / .5));
-webkit-mask-composite: source-over; mask-composite: add;
}
.s-header[data-scrolled]::before { opacity: 1; }
.s-header[data-scrolled]::after { opacity: .72; }
.s-header[data-scrolled][data-over="dark"]::after { opacity: .85; }
:is(.s-glass, .yo-menu) {
border-color: transparent;
background: var(--s-swirl) var(--s-film-x) 0 / 720px 160px, var(--s-glass-sheet);
-webkit-backdrop-filter: var(--s-glass-blur); backdrop-filter: var(--s-glass-blur);
box-shadow: var(--s-glass-top), var(--o-shadow-raised);
}
:is(.s-glass, .yo-menu)::before, :is(.s-glass, .yo-menu)::after {
content: ""; position: absolute; pointer-events: none; border-radius: inherit;
}
:is(.s-glass, .yo-menu)::before {
inset: 0; z-index: -1;
background: linear-gradient(115deg, var(--s-film)) var(--s-film-x) 0 / 160% 100% no-repeat;
opacity: .5;
-webkit-mask: radial-gradient(130% 120% at 50% 40%, transparent 56%, #000 100%);
mask: radial-gradient(130% 120% at 50% 40%, transparent 56%, #000 100%);
}
:is(.s-glass, .yo-menu)::after {
inset: -1px; padding: 1px;
background: linear-gradient(115deg, var(--s-rim)) var(--s-film-x) 0 / 160% 100% no-repeat;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.s-flyout.s-glass { isolation: isolate; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.s-header::before { background: var(--o-canvas); }
.s-header::after { display: none; }
.s-header[data-scrolled] { box-shadow: 0 1px 0 var(--o-line); }
:is(.s-glass, .yo-menu) { background: var(--o-surface); border-color: var(--o-line); }
:is(.s-glass, .yo-menu)::before, :is(.s-glass, .yo-menu)::after { display: none; }
}
@media (prefers-contrast: more) {
html:not([data-contrast="standard"]) .s-header::before { background: var(--o-canvas); -webkit-backdrop-filter: none; backdrop-filter: none; }
html:not([data-contrast="standard"]) .s-header::after { display: none; }
html:not([data-contrast="standard"]) .s-header[data-scrolled] { box-shadow: 0 1px 0 var(--o-ink-2); }
html:not([data-contrast="standard"]) :is(.s-glass, .yo-menu) { background: var(--o-surface); border-color: var(--o-ink-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
html:not([data-contrast="standard"]) :is(.s-glass, .yo-menu)::before, html:not([data-contrast="standard"]) :is(.s-glass, .yo-menu)::after { display: none; }
}
html[data-contrast="high"] .s-header::before { background: var(--o-canvas); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
html[data-contrast="high"] .s-header::after { display: none; }
html[data-contrast="high"] .s-header[data-scrolled] { box-shadow: 0 1px 0 var(--o-ink); }
html[data-contrast="high"] :is(.s-glass, .yo-menu) { background: var(--o-surface); border-color: var(--o-ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-contrast="high"] :is(.s-glass, .yo-menu)::before, html[data-contrast="high"] :is(.s-glass, .yo-menu)::after { display: none; }
html[data-gpu="soft"] .s-header::before { background: var(--o-canvas); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-gpu="soft"] .s-header::after { display: none; }
html[data-gpu="soft"] .s-header[data-scrolled] { box-shadow: 0 1px 0 var(--o-line); }
html[data-gpu="soft"] :is(.s-glass, .yo-menu) { background: var(--o-surface); border-color: var(--o-line); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-gpu="soft"] :is(.s-glass, .yo-menu)::before, html[data-gpu="soft"] :is(.s-glass, .yo-menu)::after { display: none; }
.s-logo { display: block; width: 76px; height: auto; overflow: visible; transform-origin: 50% 60%; }
.s-logo :is(.s-logo__o, .s-logo__eye, .s-logo__cheek, .s-logo__blush, .s-logo__spark, .s-logo__look) { transform-box: fill-box; transform-origin: 50% 50%; }
.s-logo .s-logo__blush { scale: 0; }
.s-logo .s-logo__o { transform-origin: 50% 100%; }
.s-logo .s-logo__spark:nth-child(1) { transform-origin: 88% 96%; }
.s-logo .s-logo__spark:nth-child(2) { transform-origin: 7% 95%; }
.s-logo .s-logo__spark:nth-child(3) { transform-origin: 6% 96%; }
.s-logo .s-logo__spark:nth-child(4) { transform-origin: 2% 70%; }
.s-logo__look { transition: translate 260ms var(--o-ease); }
.s-header .o-header__logo { min-height: var(--o-target); align-items: center; -webkit-tap-highlight-color: transparent; }
.s-footer__logo .s-logo { width: 92px; }
.s-header .s-logo-link, .s-footer__logo {
padding: 4px 6px; margin-block: -4px; margin-inline-start: -6px; border-radius: 12px;
}
.s-footer__logo { margin-inline-end: -6px; }
.o-header__in { position: relative; }
.s-nav ul { align-items: center; }
.s-fly { position: static; }
.s-header .o-nav-pill[aria-current="true"], .s-menu .o-nav-pill[aria-current="true"] { --fill: var(--o-warm); --edge: var(--o-warm-high); }
:is(.s-header, .s-menu) .o-nav-pill:is([aria-current="page"], [aria-current="true"]) {
--edge: #9a8a6c; --edge-hover: #9a8a6c; text-decoration-line: none;
}
.s-header .o-header__in { container: s-bar / inline-size; font-size: 1rem; }
.s-header .o-header__nav,
.s-header .o-header__view,
.s-header .o-header__trial--peek { display: none; }
.s-header .o-header__menu,
.s-header .o-header__trial--pocket { display: inline-flex; }
.s-header .o-header__end { margin-inline-start: 0; }
@container s-bar (min-width: 52.25em) {
.s-header .s-logo { width: 92px; }
.s-header .o-header__view, .s-header .o-header__trial--peek { display: inline-flex; }
.s-header .o-header__trial--pocket { display: none; }
}
@container s-bar (min-width: 55em) {
.s-header .o-header__nav { display: block; }
.s-header .o-header__menu { display: none; }
.s-header .o-header__end { margin-inline-start: var(--o-space-3); }
}
@container s-bar (min-width: 55em) and (max-width: 62.74em) {
.s-nav .o-nav-pill { padding-inline: 12px; }
.s-nav .o-nav-pill > .o-btn__icon { display: none; }
}
@container s-bar (min-width: 55em) {
.s-access-pill { --px: 0px; width: var(--h); padding: 0; }
.s-access-pill .o-btn__icon { margin: 0; }
.s-access-pill__label {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
}
@container s-bar (max-width: calc(140px + 11em)) {
.s-header .o-header__trial--pocket { display: none; }
}
.s-caret {
flex: none; width: 10px; height: 7px; margin-inline-start: -1px; translate: 0 1px;
background: currentColor; opacity: .72;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1.6 1.8c2.1 2 4.1 4.3 6.5 6.4 2.2-2.3 4.2-4.3 6.3-6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1.6 1.8c2.1 2 4.1 4.3 6.5 6.4 2.2-2.3 4.2-4.3 6.3-6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
transition: rotate var(--o-t-interact) var(--o-ease);
}
[aria-expanded="true"] > .s-caret { rotate: 180deg; }
.s-header :is([data-flyout-button], .s-access-pill)[aria-expanded="true"],
.s-menu [data-menu-group-button][aria-expanded="true"] {
--fill: var(--o-warm); --edge: var(--o-warm-high); --fill-hover: var(--o-warm); --edge-hover: var(--o-warm-high);
translate: none; box-shadow: none;
}
.s-menu-button__close { display: none; }
.s-menu-button[aria-expanded="true"] .s-menu-button__open { display: none; }
.s-menu-button[aria-expanded="true"] .s-menu-button__close { display: inline-grid; }
.s-flyout {
position: absolute; z-index: var(--o-z-sheet);
inset-block-start: calc(100% - var(--o-space-3)); inset-inline: 0;
width: min(100%, 1120px); margin-inline: auto;
padding: var(--o-space-5);
}
.s-flyout--play { width: min(100%, 1040px); }
.s-flyout:not([hidden]) { animation: o-sheet-in var(--o-t-enter) var(--o-ease) both; }
.s-flyout--schools { width: min(100%, 680px); padding: var(--o-space-4); }
.o-header__nav .s-flyout .s-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o-space-2); margin: 0; padding: 0; list-style: none; }
.s-way {
display: grid; gap: var(--o-space-1); height: 100%;
padding: var(--o-space-2) var(--o-space-2) var(--o-space-3); border-radius: calc(var(--o-r-control) + 4px);
color: var(--o-ink); text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--o-t-interact) var(--o-ease);
}
.s-way__art {
display: block; aspect-ratio: 16 / 10; margin-block-end: var(--o-space-2);
border-radius: var(--o-r-control); overflow: clip; background: var(--o-warm);
box-shadow: 0 0 0 1px rgb(60 57 50 / .06);
}
.s-way__art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 600ms var(--o-ease); }
.s-way__name { display: flex; align-items: center; gap: var(--o-space-3); padding-inline: var(--o-space-1); }
.s-way__line { padding-inline: var(--o-space-1); font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
@media (hover: hover) and (pointer: fine) {
.s-way:hover { background: color-mix(in srgb, var(--o-warm-high) 55%, transparent); }
.s-way:hover .s-way__art img { scale: 1.035; }
.s-way:hover .s-flyout__arrow { translate: 3px 0; background: var(--o-action-hover); }
}
.s-way:focus-visible { outline-offset: 0; }
.s-way[aria-current="page"] { background: var(--o-warm); box-shadow: inset 0 0 0 1.5px #9a8a6c; }
html:is([data-motion="reduced"], [data-motion="still"]) .s-way__art img { transition: none; scale: none !important; }
.s-flyout__head {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--o-space-2) var(--o-space-5);
padding-inline: var(--o-space-2); margin-block-end: var(--o-space-4);
}
.s-flyout__title {
font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui);
letter-spacing: var(--o-track-heading);
}
.s-flyout__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--o-space-5); }
.s-flyout__go {
display: inline-flex; align-items: center; gap: var(--o-space-3);
min-height: var(--o-target); padding: var(--o-space-1) var(--o-space-2); margin-inline: calc(-1 * var(--o-space-2));
border-radius: var(--o-r-control); color: var(--o-ink); text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--o-t-interact) var(--o-ease);
}
.s-flyout__go-label { font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui); letter-spacing: var(--o-track-heading); }
.s-flyout__arrow { width: 32px; height: 32px; background: var(--o-action); transition: translate var(--o-t-interact) var(--o-ease); }
.s-flyout__arrow::before { width: 15px; height: 9px; }
@media (hover: hover) and (pointer: fine) {
.s-flyout__go:hover { background: color-mix(in srgb, var(--o-warm-high) 55%, transparent); }
.s-flyout__go:hover .s-flyout__arrow { translate: 3px 0; background: var(--o-action-hover); }
}
.s-flyout__go:focus-visible { outline-offset: 0; }
.s-flyout__go[aria-current="page"] { box-shadow: inset 0 0 0 1.5px #9a8a6c; }
.s-flyout__head .s-flyout__go { margin-block: calc(-1 * var(--o-space-1)); }
.s-flyout__foot {
display: flex; align-items: center; margin-block-start: var(--o-space-4); padding: var(--o-space-4) var(--o-space-2) 0;
border-block-start: 1px solid var(--o-line);
}
html:is([data-motion="reduced"], [data-motion="still"]) .s-flyout__arrow { transition: none; translate: none !important; }
.s-flyout__head .o-link--arrow { min-height: 32px; padding-block: 7px; font-size: var(--o-text-small); }
.s-flyout .o-link--arrow[aria-current="page"], .s-menu__panel .o-link--arrow[aria-current="page"] { text-decoration-color: currentColor; }
.s-islands { display: grid; margin: 0; padding: 0; list-style: none; }
.o-header__nav .s-flyout ul { display: grid; gap: var(--o-space-1); }
.o-header__nav .s-islands--fly { grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: start; }
.o-header__nav .s-islands--fly:has(> li:nth-child(8)) { grid-template-columns: repeat(8, minmax(0, 1fr)); }
@container s-bar (min-width: 82.5em) {
.s-flyout--worlds:has(.s-islands--fly > li:nth-child(8)) { width: min(100%, 1320px); }
}
@container s-bar (max-width: 82.49em) {
.o-header__nav .s-islands--fly:has(> li:nth-child(8)) { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--o-space-2); }
.o-header__nav .s-islands--fly:has(> li:nth-child(8)) .s-island__art { width: min(100%, 136px); }
}
.s-island {
display: flex; flex-direction: column; align-items: center; gap: 2px;
height: 100%; padding: var(--o-space-3) var(--o-space-2) var(--o-space-3);
border-radius: var(--o-r-control);
color: var(--o-ink); text-decoration: none; text-align: center;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--o-t-interact) var(--o-ease);
}
.s-island__art {
position: relative; display: grid; align-items: end;
width: 100%; aspect-ratio: 10 / 7; min-height: 0; margin-block-end: var(--o-space-2);
}
.s-island__art::before {
content: ""; position: absolute; left: 16%; right: 16%; bottom: -3%; height: 12%; border-radius: 50%;
background: radial-gradient(closest-side, rgb(60 57 50 / .2), rgb(60 57 50 / 0));
}
.s-island__art img {
position: relative; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: 50% 100%;
transition: translate var(--o-t-interact) var(--o-ease);
}
.s-island__name { font: var(--o-weight-ui) var(--o-text-small) / 1.3 var(--o-font-ui); text-wrap: balance; }
.s-island__host { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.s-verify { font-size: var(--o-text-small); color: var(--o-error); }
html[data-verify="on"] [data-verify] { background: color-mix(in srgb, var(--o-star) 26%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--o-star) 26%, transparent); border-radius: 2px; }
html[data-verify="on"] [data-verify]::after { content: " [VERIFY]"; font: var(--o-weight-ui) .75rem / 1 var(--o-font-ui); color: var(--o-error); }
@media (hover: hover) and (pointer: fine) {
.s-island:hover { background: color-mix(in srgb, var(--o-warm-high) 55%, transparent); }
.s-island:hover .s-island__art img { translate: 0 calc(-1 * var(--o-space-2)); }
}
.s-island:focus-visible { outline-offset: 0; }
.s-island:focus-visible .s-island__art img { translate: 0 calc(-1 * var(--o-space-2)); }
.s-island[aria-current] { background: var(--o-warm); box-shadow: inset 0 0 0 1.5px var(--o-warm-high); }
.s-games { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--o-space-4); align-items: start; }
.s-games__list { display: grid; gap: var(--o-space-1); margin: 0; padding: 0; list-style: none; }
.s-flyout .s-games__list { align-self: center; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: var(--o-space-1) var(--o-space-2); }
.s-flyout .s-game:not(.s-game--featured) { grid-template-columns: 80px minmax(0, 1fr); }
.s-game {
display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: var(--o-space-3);
padding: var(--o-space-2); border-radius: var(--o-r-control);
color: var(--o-ink); text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--o-t-interact) var(--o-ease);
}
.s-game[aria-current] { background: var(--o-warm); box-shadow: inset 0 0 0 1.5px var(--o-warm-high); }
.s-game__thumb { position: relative; display: block; aspect-ratio: 3 / 2; }
.s-game__thumb img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transition: translate var(--o-t-interact) var(--o-ease); }
.s-game__text { display: grid; gap: 2px; min-width: 0; }
.s-game__name { font: var(--o-weight-ui) var(--o-text-body) / 1.3 var(--o-font-ui); letter-spacing: -.005em; }
.s-game__line { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.s-game--featured { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--o-space-3); padding: var(--o-space-2) var(--o-space-2) var(--o-space-3); }
.s-game__art { display: block; aspect-ratio: 16 / 9; border-radius: var(--o-r-control); overflow: clip; background: var(--o-ink); }
.s-game__art img { width: 100%; height: 100%; object-fit: cover; transition: scale 600ms var(--o-ease); }
.s-game--featured .s-game__name { font-size: var(--o-text-heading); font-weight: var(--o-weight-title); letter-spacing: var(--o-track-heading); line-height: var(--o-lh-heading); }
.s-game--featured .s-game__text { padding-inline: var(--o-space-1); }
@media (hover: hover) and (pointer: fine) {
.s-game:hover { background: color-mix(in srgb, var(--o-warm-high) 55%, transparent); }
.s-game:hover .s-game__thumb img { translate: 0 -4px; }
.s-game--featured:hover .s-game__art img { scale: 1.03; }
}
.s-game:focus-visible { outline-offset: 0; }
.s-game:focus-visible .s-game__thumb img { translate: 0 -4px; }
.s-menu[popover], .s-access[popover] {
max-height: calc(100dvh - var(--o-header-h) - var(--o-space-4));
overflow: auto; overscroll-behavior: contain;
}
.s-menu[popover] { padding: var(--o-space-4); }
@media (min-width: 600px) {
.s-menu[popover] { inset-inline-start: auto; width: min(440px, 100vw - 2 * var(--o-gutter)); }
}
.s-menu .s-menu__list { display: grid; gap: var(--o-space-1); }
.s-menu .s-caret { margin-inline-start: auto; margin-inline-end: var(--o-space-2); }
.s-menu .o-nav-pill { gap: 10px; }
.s-menu__panel { display: grid; justify-items: start; gap: var(--o-space-2); padding-block: 0 var(--o-space-4); }
.s-menu__panel .s-flyout__links { padding-inline-start: var(--o-space-2); }
.s-menu .s-islands--strip {
display: flex; gap: var(--o-space-1); width: calc(100% + 2 * var(--o-space-4));
margin-inline: calc(-1 * var(--o-space-4)); padding: var(--o-space-1) var(--o-space-4) var(--o-space-2);
overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
scroll-padding-inline: var(--o-space-4); scrollbar-width: thin;
}
.s-menu .s-islands--strip > li { flex: 0 0 104px; scroll-snap-align: start; }
.s-menu .s-islands--strip .s-island { padding: var(--o-space-2) var(--o-space-1); }
.s-menu .s-games__list { width: 100%; }
.s-menu .s-game { grid-template-columns: 80px minmax(0, 1fr); }
.s-game--row { width: 100%; grid-template-columns: 80px minmax(0, 1fr); align-items: center; padding: var(--o-space-2); }
.s-game--row .s-game__art { aspect-ratio: 3 / 2; }
.s-game--row .s-game__name { font-size: var(--o-text-body); font-weight: var(--o-weight-ui); letter-spacing: -.005em; line-height: 1.3; }
.s-game--row .s-game__text { padding: 0; }
.s-menu__panel > .o-link--arrow { margin-inline-start: var(--o-space-2); }
.s-header[data-bar~="access"] ~ .s-menu .s-menu__end { display: none; }
.s-menu__trial { display: none; }
.s-header[data-bar~="no-trial"] ~ .s-menu .s-menu__trial { display: block; padding-block-start: var(--o-space-3); }
.o-sheet fieldset > legend { float: left; width: 100%; margin-block-end: var(--o-space-2); }
.s-access[popover] { width: min(42rem, 100vw - 2 * var(--o-gutter)); container: s-access / inline-size; }
.s-access__col + .s-access__col { margin-block-start: var(--o-space-4); padding-block-start: var(--o-space-4); border-block-start: 1px solid var(--o-line); }
@container s-access (min-width: 34em) {
.s-access__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-access__col + .s-access__col { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; padding-inline-start: var(--o-space-6); border-inline-start: 1px solid var(--o-line); }
.s-access__col:first-child { padding-inline-end: var(--o-space-6); }
}
.s-sheet__foot {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: var(--o-space-3); margin-block-start: var(--o-space-4);
}
.s-sheet__foot .o-sheet__note { margin: 0; flex: 1 1 12rem; }
.s-sheet__foot .o-btn { margin-inline-start: auto; }
.yo-menu .s-sheet__foot { padding-block-start: var(--o-space-3); border-block-start: 1px solid var(--o-line); }
@media (max-width: 599.98px) {
:is(.s-menu, .s-access, .yo-menu):popover-open::backdrop {
inset: var(--o-header-h) 0 0;
background: color-mix(in srgb, var(--o-canvas) 64%, transparent);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
animation: o-fade var(--o-t-enter) var(--o-ease) both;
}
html[data-motion="still"] :is(.s-menu, .s-access, .yo-menu):popover-open::backdrop { animation: none; }
html[data-gpu="soft"] :is(.s-menu, .s-access, .yo-menu):popover-open::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in srgb, var(--o-canvas) 78%, transparent); }
}
.s-footer__logo { display: inline-flex; }
.s-footer__tagline { max-inline-size: none; color: var(--o-ink); }
.s-footer .o-footer__brand { container-type: inline-size; }
.s-footer__tagline .hand { --hand-size: min(calc(var(--o-text-title) * .78), calc((100vw - 2 * var(--o-gutter)) / 16.2), calc(100cqi / 16.4)); }
.s-footer__tagline { min-block-size: calc(min(calc(var(--o-text-title) * .78), calc((100vw - 2 * var(--o-gutter)) / 16.2), calc(100cqi / 16.4)) * 1.2604); }
.s-footer__made { white-space: nowrap; }
.s-footer__made .s-footer__heart {
width: 1.05em; height: 1.05em; vertical-align: -.15em; margin-inline-start: .1em;
color: var(--o-action);
}
.s-footer__legal-links .o-link { color: inherit; }
.s-footer .o-footer__in { grid-template-columns: minmax(0, 1fr); }
.s-footer .o-footer__in > * { min-width: 0; }
.s-footer .o-footer__nav { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: var(--o-space-6) var(--o-space-6); }
.s-footer__group { display: grid; gap: var(--o-space-2); align-content: start; }
.s-footer__head {
font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui);
letter-spacing: .01em; color: var(--o-ink);
}
.s-footer .o-footer__nav a[aria-current="page"] { color: var(--o-ink); text-decoration-line: underline; }
.s-footer :is(.o-footer__nav a, .o-footer__legal) { overflow-wrap: anywhere; }
.s-footer { container: s-foot / inline-size; }
@container s-foot (min-width: 20em) and (max-width: 56.24em) {
.s-footer .o-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o-space-6) var(--o-space-4); }
.s-footer__group--schools { grid-column: 1 / -1; }
.s-footer__group--schools ul { display: block; columns: 2; column-gap: var(--o-space-4); }
.s-footer__group--schools li { break-inside: avoid; padding-block-end: var(--o-space-1); }
}
@media (min-width: 900px) {
.s-footer .o-footer__in {
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
grid-template-rows: auto auto 1fr auto;
grid-template-areas: "brand nav" "signup nav" ". nav" "legal legal";
row-gap: 0;
}
.s-footer--no-news .o-footer__in { grid-template-rows: auto 1fr auto; grid-template-areas: "brand nav" ". nav" "legal legal"; }
.s-footer .o-footer__brand { grid-area: brand; }
.s-footer .o-footer__nav { grid-area: nav; align-self: start; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-footer .o-footer__signup { grid-area: signup; align-self: start; margin-block-start: var(--o-space-7); }
.s-footer .o-footer__legal { grid-area: legal; margin-block-start: var(--o-space-7); }
}
.s-footer .o-footer__signup { display: grid; gap: var(--o-space-3); grid-template-columns: minmax(0, 1fr); max-inline-size: 26rem; }
.s-news .s-footer__head { margin-block-end: calc(-1 * var(--o-space-1)); }
.s-footer .o-footer__signup-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-space-3); }
.s-footer .o-footer__signup-row .o-input { flex: 1 1 12rem; width: auto; min-width: 0; }
.s-news__msg:empty { display: none; }
.s-news .o-field__help { text-wrap: pretty; }
:root { --o-field-gap: var(--o-space-2); }
:is(.o-options, .sf-choices), :is(.o-options__grid, .sf-choices__grid) { gap: var(--o-space-3); }
:is(.o-options, .sf-choices) > legend { margin-block-end: var(--o-space-3); }
:is(.o-options, .sf-choices) > .o-field__help { margin-block: calc(var(--o-field-gap) - var(--o-space-3)); }
:is(.o-options__grid--wide, .sf-choices__grid--wide) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
:is(.o-option, .sf-choice) { min-height: 48px; }
.o-cluster { row-gap: var(--o-space-4); }
.o-section-head > .o-cluster + .o-small { margin-block-start: 0; }
@media (min-width: 900px) and (max-width: 1099.98px) {
.o-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
}
.s-news .s-footer__head { margin-block-end: 0; }
.s-footer .o-footer__signup-row .o-input { flex: 1 1 11rem; }
@media (min-width: 900px) and (max-width: 1199.98px) {
.s-footer .o-footer__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.s-footer .o-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-footer__group--schools { grid-row: span 2; }
}
.s-footer .o-footer__nav a { line-height: 1.3; padding-block: var(--o-space-1); }
.s-footer .o-footer__nav a { min-block-size: var(--o-target, 44px); }
.s-footer .o-footer__nav ul, .s-footer__group { gap: 0; }
.s-footer__group--schools li { padding-block-end: 0; }
.s-footer__legal-links .o-link { position: relative; }
.s-footer__legal-links .o-link::after { content: ""; position: absolute; inset: -13px -6px; }
.s-footer__head { margin-block-end: var(--o-space-1); }
@container s-foot (min-width: 20em) and (max-width: 56.24em) {
.s-footer .o-footer__nav { column-gap: var(--o-space-5); }
.s-footer__group--schools ul { column-gap: var(--o-space-5); }
}
.s-menu .s-islands--strip { gap: var(--o-space-2); }
.s-menu .s-islands--strip > li { flex-basis: 140px; }
.s-menu .s-islands--strip .s-island { padding: var(--o-space-2); }
.s-menu .s-islands--strip .s-island__host { text-wrap: balance; }
.s-loader {
position: absolute; inset: 0; z-index: 5;
display: grid; place-content: center; justify-items: center; gap: var(--o-space-3);
color: var(--o-ink-2); pointer-events: none;
opacity: 0; transition: opacity var(--o-t-enter) var(--o-ease);
}
.s-loader.is-shown { opacity: 1; }
.s-loader .o-lift { --lift-size: 64px; }
.s-loader__text { font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); visibility: hidden; }
.s-loader.is-slow .s-loader__text { visibility: visible; }
.s-loader__more { display: none; justify-items: center; gap: var(--o-space-3); max-inline-size: 26rem; text-align: center; pointer-events: auto; }
.s-loader__more p { font-size: var(--o-text-small); line-height: var(--o-lh-small); text-wrap: pretty; }
.s-loader.is-very-slow .s-loader__more { display: grid; }
.s-loader--dark { color: color-mix(in srgb, #fff 78%, transparent); }
.s-toast {
position: fixed; left: 50%; bottom: var(--o-space-5); z-index: var(--o-z-toast); translate: -50% 0;
max-width: calc(100vw - 2 * var(--o-space-4)); margin: 0; padding: var(--o-space-3) var(--o-space-5);
border-radius: var(--o-r-pill); background: var(--o-ink); color: #fff;
font: var(--o-weight-ui) var(--o-text-small) / 1.3 var(--o-font-ui); box-shadow: var(--o-shadow-raised);
}
.s-toast:not([hidden]) { animation: o-sheet-in var(--o-t-enter) var(--o-ease) both; }
html[data-motion="still"] :is(.s-caret, .s-island, .s-island__art img, .s-game, .s-game__art img, .s-game__thumb img, .s-way, .s-loader, .s-logo__look) { transition: none !important; }
html[data-motion="still"] :is(.s-flyout, .s-toast) { animation: none !important; }
html[data-motion="still"] .s-header::before, html[data-motion="still"] .s-header::after { transition: none; }
html[data-motion="reduced"] :is(.s-flyout, .s-toast) { animation-name: o-fade; }
html:is([data-motion="reduced"], [data-motion="still"]) :is(.s-island__art img, .s-game__thumb img) { translate: none !important; }
html:is([data-motion="reduced"], [data-motion="still"]) .s-game__art img { scale: none !important; }
html:is([data-motion="reduced"], [data-motion="still"]) .s-logo__look { translate: none !important; }
@media (prefers-reduced-motion: reduce) {
html:not([data-motion]) :is(.s-flyout, .s-toast) { animation-name: o-fade; }
html:not([data-motion]) :is(.s-island__art img, .s-game__thumb img) { translate: none !important; }
html:not([data-motion]) .s-way__art img { scale: none !important; }
html:not([data-motion]) .s-game__art img { scale: none !important; }
html:not([data-motion]) .s-logo__look { translate: none !important; }
}
@keyframes o-fade { from { opacity: 0; } }
html[data-text-size="large"] { font-size: 112.5%; }
html[data-text-size="larger"] { font-size: 125%; }
html[data-contrast="high"] {
--o-ink-2: var(--o-ink);
--o-n3: var(--o-n4);
--o-line: var(--o-n4);
--o-field-edge: var(--o-ink);
--o-disabled-label: var(--o-n4);
--o-focus-ring: 4px solid var(--o-focus);
}
html[data-contrast="high"] :is(.o-on-dark, .o-section--deep) { --o-focus-ring: 4px solid #fff; }
html[data-contrast="high"] :focus-visible { outline-width: 4px; }
html[data-contrast="high"] :is(.o-on-dark .o-muted, .o-section--deep .o-media__caption) { color: #fff; }
html[data-contrast="high"] .o-card { border-color: var(--o-ink); }
html[data-contrast="high"] .o-btn:not(.o-btn--primary, .o-btn--tertiary, .o-btn--on-dark, .o-nav-pill, :disabled, [aria-disabled="true"], [aria-busy="true"]) { --edge: var(--o-ink); --lip-colour: var(--o-n4); }
html[data-contrast="high"] .o-btn--tertiary:not(:disabled, [aria-disabled="true"]) { --edge: var(--o-n4); --label: var(--o-ink); }
html[data-contrast="high"] .o-pill { box-shadow: inset 0 0 0 1px var(--o-n4); }
html[data-contrast="high"] :is(.s-header, .s-menu) .o-nav-pill:is([aria-current="page"], [aria-current="true"]) { --edge: var(--o-ink); --edge-hover: var(--o-ink); }
html[data-contrast="high"] :is(.o-input, .o-select, .o-textarea)::placeholder { color: var(--o-n4); }
html[data-contrast="high"] :is(.o-link, .o-prose a:not([class])) { text-decoration-color: currentColor; text-decoration-thickness: 2px; }
html[data-contrast="high"] :where(main, .s-footer, .s-flyout, .s-menu, .s-access) a:not([class]) {
text-decoration-line: underline; text-decoration-color: currentColor;
text-decoration-thickness: 2px; text-underline-offset: .22em;
}
html[data-contrast="high"] .tod-img { filter: none !important; transition: none !important; }
html[data-contrast="high"] .tod-layer { display: none !important; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 100 549; font-display: swap;
src: url("../../../../design-kit/fonts/atkinson-hyperlegible-next-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 550 749; font-display: swap;
src: url("../../../../design-kit/fonts/atkinson-hyperlegible-next-700.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 750 1000; font-display: swap;
src: url("../../../../design-kit/fonts/atkinson-hyperlegible-next-800.woff2") format("woff2"); }
html[data-font="easier"] {
--s-font-easier: "Atkinson Hyperlegible Next", Verdana, Tahoma, "Trebuchet MS", system-ui, sans-serif;
--o-font-body: var(--s-font-easier);
--o-font-ui: var(--s-font-easier);
--o-lh-display: 1.1;
--o-lh-title: 1.16;
--o-lh-heading: 1.3;
--o-lh-lead: 1.6;
--o-lh-body: 1.75;
--o-lh-small: 1.6;
--o-track-display: -.01em;
--o-track-title: -.005em;
--o-track-heading: 0em;
}
html[data-font="easier"] body { letter-spacing: .02em; word-spacing: .08em; }
html[data-font="easier"] :is(.o-btn, .o-pill, .o-kicker, .o-link--arrow) { letter-spacing: .015em; }
@media (forced-colors: active) {
.s-caret { background: CanvasText; }
:is(.s-glass, .yo-menu), .s-flyout, .s-menu, .s-access { border: 1px solid CanvasText; background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none; }
:is(.s-glass, .yo-menu)::before, :is(.s-glass, .yo-menu)::after { display: none; }
:is(.s-menu, .s-access, .yo-menu):popover-open::backdrop { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.s-header::before { background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.s-header::after { display: none; }
.s-header[data-scrolled] { border-block-end: 1px solid CanvasText; }
.s-logo { forced-color-adjust: none; }
.s-logo .s-logo__ink, .s-logo .s-logo__spark { fill: CanvasText; }
.s-logo .s-logo__face { fill: Canvas; stroke: CanvasText; stroke-width: 1.6; }
.s-logo .s-logo__cheeks { display: none; }
:is(.s-island, .s-game):is(:hover, :focus-visible, [aria-current]) { outline: 2px solid Highlight; outline-offset: 0; }
.s-island__art::before { display: none; }
.s-slot { border-color: CanvasText; }
.s-toast { border: 1px solid CanvasText; }
}
@media print {
orli-header, orli-footer, .o-skip, .s-header, .s-footer, .s-toast, .s-loader, [popover] { display: none !important; }
}
orli-header:not(:defined) { display: block; }
.s-noscript {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-space-2) var(--o-space-5);
width: min(100% - 2 * var(--o-gutter), var(--o-max-wide)); margin-inline: auto;
padding-block: var(--o-space-5);
font: var(--o-weight-ui) var(--o-text-body) / 1.3 var(--o-font-ui);
}
.s-noscript a { color: var(--o-ink); }
.s-ladder {
--rung: 0;
position: fixed; z-index: 40;
inset-inline-end: max(var(--o-space-4), env(safe-area-inset-right));
inset-block-end: max(var(--o-space-4), env(safe-area-inset-bottom));
inline-size: 52px; block-size: 88px; padding: 0;
border: 0; border-radius: 26px; cursor: pointer;
background: var(--o-surface);
box-shadow: inset 0 0 0 1.5px #c9bc9f, 0 6px 18px rgb(47 46 43 / .14), 0 1px 2px rgb(47 46 43 / .08);
color: #9a8a6c;
opacity: 0; translate: 0 12px; visibility: hidden;
transition: opacity .25s ease, translate .25s ease, visibility 0s linear .25s, box-shadow .2s ease;
}
.s-ladder[data-on] { opacity: 1; translate: 0 0; visibility: visible; transition: opacity .25s ease, translate .25s ease, visibility 0s, box-shadow .2s ease; }
.s-ladder:hover { box-shadow: inset 0 0 0 1.5px #9a8a6c, 0 8px 22px rgb(47 46 43 / .18), 0 1px 2px rgb(47 46 43 / .08); }
.s-ladder:focus-visible { outline: var(--o-focus-ring); outline-offset: 3px; }
.s-ladder__rails { position: absolute; inset-block-start: 28px; inset-inline-start: 16px; inline-size: 20px; block-size: 48px; overflow: visible; }
.s-ladder__rails path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.s-ladder__star {
position: absolute; inset-block-start: 5px; inset-inline-start: 50%;
inline-size: 22px; block-size: 22px; margin-inline-start: -11px;
transition: scale .3s cubic-bezier(.34, 1.56, .64, 1), filter .3s ease;
}
.s-ladder__orli {
position: absolute; inset-block-start: 22px; inset-inline-start: 50%;
inline-size: 26px; block-size: 26px; margin-inline-start: -13px;
translate: 0 calc(var(--rung) * 10px);
transition: translate .12s cubic-bezier(.34, 1.56, .64, 1);
filter: drop-shadow(0 1px 1px rgb(47 46 43 / .25));
}
.s-ladder__tip {
position: absolute; inset-block-start: 50%; inset-inline-end: calc(100% + 10px);
translate: 4px -50%; white-space: nowrap; pointer-events: none;
padding: 6px 12px; border-radius: var(--o-r-pill, 999px);
background: var(--o-ink); color: var(--o-canvas);
font: 600 var(--o-text-small, .875rem)/1.2 var(--o-font-ui);
opacity: 0; transition: opacity .15s ease, translate .15s ease;
}
.s-ladder:is(:hover, :focus-visible) .s-ladder__tip { opacity: 1; translate: 0 -50%; }
.s-ladder.is-hop .s-ladder__orli { animation: s-ladder-hop .13s ease-out; }
@keyframes s-ladder-hop { 50% { transform: translateY(-5px) scale(1.06, .94); } }
.s-ladder[data-star] .s-ladder__star { scale: 1.5; filter: drop-shadow(0 0 6px rgb(255 204 77 / .9)); }
.s-ladder[data-climbing="reduced"] .s-ladder__orli { transition: none; }
.s-ladder[data-climbing="reduced"][data-star] .s-ladder__star { scale: 1; }
@media (hover: hover) {
html[data-motion="full"] .s-ladder:hover:not([data-climbing]) .s-ladder__orli { animation: s-ladder-hop .3s ease-out 2; }
}
html:is([data-motion="reduced"], [data-motion="still"]) .s-ladder,
html:is([data-motion="reduced"], [data-motion="still"]) .s-ladder :is(.s-ladder__orli, .s-ladder__star, .s-ladder__tip) { transition-duration: 0s; animation: none; }
html[data-contrast="high"] .s-ladder { box-shadow: inset 0 0 0 2px var(--o-ink), 0 6px 18px rgb(47 46 43 / .14); color: var(--o-ink); }
@media (forced-colors: active) {
.s-ladder { border: 1.5px solid ButtonText; color: ButtonText; }
.s-ladder__tip { border: 1px solid CanvasText; }
}
@media (max-width: 599.98px) {
.s-ladder { inline-size: 44px; block-size: 76px; border-radius: 22px; }
.s-ladder__rails { inset-block-start: 25px; inset-inline-start: 13px; inline-size: 18px; block-size: 42px; }
.s-ladder__star { inset-block-start: 4px; inline-size: 19px; block-size: 19px; margin-inline-start: -9.5px; }
.s-ladder__orli { inset-block-start: 19px; inline-size: 22px; block-size: 22px; margin-inline-start: -11px; translate: 0 calc(var(--rung) * 9px); }
}
@media print { .s-ladder { display: none; } }