/* ==== tasteskill 2.5 kit: system.css ==== */
:root {
  --p-bg: #ffffff;
  --p-surface: #f4f4f4;
  --p-ink: #111111;
  --p-muted: #6b6b6b;
  --p-accent: #1a4be0;
  --p-accent-ink: #ffffff;
  --p-action: #1a4be0;
  --p-action-ink: #ffffff;
  --p-inv-bg: #111111;
  --p-inv-surface: #1c1c1c;
  --p-inv-ink: #f4f4f4;
  --p-inv-muted: #a3a3a3;
  --p-inv-accent: #ffffff;
  --p-inv-accent-ink: #111111;
  --p-inv-action: #ffffff;
  --p-inv-action-ink: #111111;
  --ground-bg: #d9ccb7; --ground-surface: #e9e0d2; --ground-ink: #2a2622; --ground-muted: #5a534a; --ground-accent: #a8794a;
  --font-display: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --display-weight: 400;
  --display-tracking: -0.025em;
  --nav: 72px;
  --padt: 120px;
  --padb: 72px;
  --hgap: 48px;
  --hpadb: 64px;
  --bar: 0px;
  --container: 1280px;
  --gut: 80px;
  --pad: var(--gut);
  --gutter: 24px;
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section: 40px;
  --section-band: 56px;
  --head-gap: 48px;
  --card-pad: 16px;
  --card-gap: 16px;
  --t-label: 13px;
  --t-small: 14px;
  --t-body: 16px;
  --t-lead: 18px;
  --t-card: 18px;
  --t-h3: 24px;
  --t-h2: clamp(30px, 1.72vw + 23.3px, 48px);
  --t-h1: clamp(38px, 3.24vw + 25.4px, 72px);
  --t-stat: clamp(28px, .952vw + 24.29px, 38px);
  --r-sm: 8px;  --r-md: 12px; --r-lg: 20px; --r-btn: 8px;
  --btn-h: 44px;
  --btn-h-sm: 36px;
  --nav-h: var(--nav);
  --icon: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;
}
html[data-radius="sharp"] { --r-sm: 4px; --r-md: 6px;  --r-lg: 8px;  --r-btn: 4px; }
html[data-radius="soft"]  { --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-btn: 8px; }
html[data-radius="round"] { --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-btn: 999px; }
html[data-ground="sky"]      { --ground-bg: #c6d3df; --ground-surface: #d6e0e9; --ground-ink: #25303a; --ground-muted: #4d5964; --ground-accent: #3f6a92; }
html[data-ground="sage"]     { --ground-bg: #cdd6c6; --ground-surface: #dce3d6; --ground-ink: #262d24; --ground-muted: #535b51; --ground-accent: #6c8e63; }
html[data-ground="painting"] { --ground-bg: #79a8d6; --ground-surface: #a6c4e2; --ground-ink: #16212c; --ground-muted: #273949; --ground-accent: #9c9b3c; }
html[data-radius] .card { --c-r: var(--r-lg); }
html[data-radius] .panel { --p-r: var(--r-md); }
@media (max-width: 639px) {
  :root { --nav: 56px; --padt: 96px; --padb: 48px; --hgap: 40px; --hpadb: 24px; --gut: 24px; --gutter: 12px; --card-gap: 12px; --head-gap: 32px; }
}
@media (min-width: 640px) {
  :root { --gut: 48px; --section: 48px; --section-band: 72px; --card-pad: 24px; }
}
@media (min-width: 1024px) {
  :root { --gut: 80px; --section: 56px; --section-band: 96px; --card-gap: 24px;
          --t-lead: 20px; --t-card: 20px; --t-h3: 28px; }
  html[data-type="place"] { --gut: 120px; --container: 1200px; }
}
:root[data-type="place"] {
  --hgap: 40px;
  --t-h1: clamp(32px, 1.524vw + 26.06px, 48px);
  --t-h2: clamp(24px, .762vw + 21px, 32px);
  --t-h3: clamp(20px, .381vw + 18.51px, 24px);
  --r-sm: 2px; --r-md: 0px; --r-lg: 0px; --r-btn: 2px;
}
:root[data-type="place"] :is(h1, .t-h1) { line-height: 1.104; }
:root[data-type="place"] :is(h2, .t-h2) { line-height: 1.25; }
@media (max-width: 639px) {
  :root[data-type="place"] { --hgap: 24px; }
  :root[data-type="place"] :is(h1, .t-h1) { line-height: 1.156; }
}
:root, .ground-base {
  --bg: var(--p-bg); --surface: var(--p-surface); --ink: var(--p-ink); --muted: var(--p-muted);
  --accent: var(--p-accent); --accent-ink: var(--p-accent-ink); --card: var(--p-surface);
  --action: var(--p-action); --action-ink: var(--p-action-ink);
}
.ground-surface {
  --bg: var(--p-surface); --surface: var(--p-bg); --ink: var(--p-ink); --muted: var(--p-muted);
  --accent: var(--p-accent); --accent-ink: var(--p-accent-ink); --card: var(--p-bg);
  --action: var(--p-action); --action-ink: var(--p-action-ink);
}
.ground-inverse {
  --bg: var(--p-inv-bg); --surface: var(--p-inv-surface); --ink: var(--p-inv-ink); --muted: var(--p-inv-muted);
  --accent: var(--p-inv-accent); --accent-ink: var(--p-inv-accent-ink); --card: var(--p-inv-surface);
  --action: var(--p-inv-action); --action-ink: var(--p-inv-action-ink);
}
:root, .ground-base, .ground-surface, .ground-inverse {
  --line: color-mix(in oklab, var(--ink) 11%, transparent);
  --line-strong: color-mix(in oklab, var(--ink) 20%, transparent);
  --fx-bg: var(--bg); --fx-surface: var(--surface); --fx-ink: var(--ink); --fx-muted: var(--muted);
  --fx-accent: var(--accent); --fx-accent-ink: var(--accent-ink);
  --ui-font: var(--font-text); --ui-mono: var(--font-mono); --ui-radius: var(--r-md);
}
.ground-base, .ground-surface, .ground-inverse { background: var(--bg); color: var(--ink); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 0; scroll-behavior: auto; margin: 0; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--t-body)/1.55 var(--font-text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking); text-wrap: balance; overflow-wrap: break-word;
}
h1, .t-h1 { font-size: var(--t-h1); line-height: 1.04; }
h2, .t-h2 { font-size: var(--t-h2); line-height: 1.1; }
h3, .t-h3 { font-size: var(--t-h3); line-height: 1.2; }
h4, .t-card { font-family: var(--font-text); font-weight: 500; font-size: var(--t-card); line-height: 1.3; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
.t-lead  { font-size: var(--t-lead); line-height: 1.5; }
.t-body  { font-size: var(--t-body); line-height: 1.55; }
.t-small { font-size: var(--t-small); line-height: 1.5; }
.t-label { font-size: var(--t-label); font-weight: 500; line-height: 1.4; letter-spacing: 0.01em; }
.t-stat  { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--t-stat);
           line-height: 1; letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.mono  { font-family: var(--font-mono); }
.measure { max-width: 62ch; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 2px; }
::selection { background: color-mix(in oklab, var(--accent) 30%, transparent); }
.wrap, .container { width: min(100% - 2 * var(--gut), var(--container)); margin-inline: auto; padding-inline: 0; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--card-gap); }
.grid > * { min-width: 0; grid-column: 1 / -1; }
.section { padding-block: var(--section); }
main > :is(section, .section), footer.closing {
  position: relative; box-sizing: border-box;
  height: calc(var(--h, 1) * 100vh); height: calc(var(--h, 1) * 100svh);
  padding: var(--padt) 0 calc(var(--padb) + var(--bar));
}
main > :is(section, .section) > :is(.wrap, .container), footer.closing > .wrap { position: relative; z-index: 1; height: 100%; }
main > :is(section, .section) > :is(.wrap, .container):not(.grid) { display: flex; flex-direction: column; }
main > :is(section, .section) > :is(.wrap, .container).grid { align-content: start; }
main > :is(section, .section) > .wrap > .fill { flex: 1 1 0; min-height: 0; }
main > :is(section, .section).g2, footer.closing.g2 { --h: 2; }
main > :is(section, .section).g2 > :is(.wrap, .container), footer.closing.g2 > .wrap { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); row-gap: calc(var(--padt) + var(--padb) + var(--bar)); }
main > :is(section, .section).g2 > :is(.wrap, .container) > *, footer.closing.g2 > .wrap > * { min-height: 0; align-self: start; }
main > :is(section, .section).g2 > :is(.wrap, .container) > :is(.group, .fill) { align-self: stretch; }
.group { display: flex; flex-direction: column; min-height: 0; }
@media (min-width: 1024px) {
  main > :is(section, .section).g2 > .wrap > .grid:last-child,
  main > :is(section, .section).g2 > .wrap > .group > .grid:last-child { align-self: stretch; flex: 1 1 auto; min-height: 0; }
}
.group > .fill { flex: 1 1 0; min-height: 0; }
@media (min-width: 640px) and (max-width: 1279px) {
  main > :is(section, .section):not(.hero, .section--hero), footer.closing {
    height: auto; min-height: calc(var(--h, 1) * 100vh); min-height: calc(var(--h, 1) * 100svh);
  }
  main > :is(section, .section):not(.hero, .section--hero), footer.closing { display: flex; flex-direction: column; }
  main > :is(section, .section):not(.hero, .section--hero) > :is(.wrap, .container), footer.closing > .wrap { flex: 1 0 auto; height: auto; min-height: 0; }
}
@media (max-width: 639px) {
  main > :is(section, .section):not(.hero, .section--hero), footer.closing {
    height: calc(var(--hm, var(--h, 1)) * 100vh); height: calc(var(--hm, var(--h, 1)) * 100lvh);
  }
  main > :is(section, .section).g2m, footer.closing.g2m { --hm: 2; }
  main > :is(section, .section).g2m > :is(.wrap, .container), footer.closing.g2m > .wrap { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); row-gap: calc(var(--padt) + var(--padb) + var(--bar)); }
  main > :is(section, .section).g2:not(.g2m) > :is(.wrap, .container) { display: flex; row-gap: 0; }
  main > :is(section, .section).g2:not(.g2m) > :is(.wrap, .container) > * { align-self: stretch; }
}
main > :is(section, .section) > :is(img, video, canvas, picture).layer,
footer.closing > :is(img, video, canvas, picture).layer {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%);
}
main > :is(section, .section) > picture.layer > img { width: 100%; height: 100%; object-fit: cover; }
main > :is(.hero, .section--hero) {
  height: 100vh; height: 100svh; min-height: 0;
  padding: calc(var(--nav) + var(--photo, 0px) + var(--hgap)) 0 calc(var(--hpadb) + var(--bar));
}
:is(.hero, .section--hero) > .wrap { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; row-gap: var(--s-7); }
:is(.hero, .section--hero) > .wrap > .hero-text { min-height: 0; }
:is(.hero, .section--hero) > .wrap > .hero-strip { grid-row: 2; max-height: 96px; }
@media (max-width: 639px) { :is(.hero, .section--hero) > .wrap > .hero-strip { display: none; } }
.section--hero .section-head { max-width: 860px; }
.hero-text.hero-split { height: 100%; align-items: stretch; }
.hero-split > .hero-copy { align-self: start; }
.hero-split > .hero-visual { position: relative; min-height: 0; height: 100%; }
@media (max-width: 1023px) {
  .hero-text.hero-split { display: flex; flex-direction: column; gap: var(--s-6); }
  .hero-split > .hero-visual { flex: 1 1 0; min-height: 200px; height: auto; }
}
.hero-copy > * + * { margin-top: var(--s-5); }
.hero-copy > h1:first-child { text-box: trim-start cap alphabetic; }
.hero-copy > .btn-row { margin-top: var(--s-6); }
@media (min-width: 1024px) {
  .hero-split > .hero-copy { height: 100%; display: flex; flex-direction: column; }
  .hero-split > .hero-copy > .hero-facts { margin-top: auto; }
}
.hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--gutter); margin: 0; }
.hero-facts > div { display: grid; gap: var(--s-1); align-content: start; }
.hero-facts dt { font-size: var(--t-small); color: var(--muted); }
.hero-facts dd { margin: 0; font-weight: 500; }
@media (max-width: 1023px) { .hero-facts { display: none; } }
.hero-notice { font-size: var(--t-small); font-weight: 500; color: var(--ink); }
.hero-notice b, .hero-notice strong { font-weight: 500; color: var(--accent); }
.hero-copy > .hero-notice + h1 { margin-top: var(--s-5); }
@media (max-width: 639px) {
  .grid > .tile:is(.span-3, .span-4) { grid-column: auto / span 6; }
  .grid > .tile:is(.span-3, .span-4):nth-child(odd of .tile):nth-last-child(1 of .tile) { grid-column: 1 / -1; }
  .grid > .tile:is(.span-3, .span-4) .tile__head { flex-wrap: wrap; gap: 0 var(--s-2); }
}
@media (max-width: 639px) { .grid:has(> .card--open) { row-gap: var(--s-6); } }
@media (min-width: 640px) and (max-width: 1023px) {
  .grid > .card.span-3:not(:has(> .panel)), .grid > .card.span-6:not(:has(> .panel)) { grid-column: auto / span 6; }
  @media (min-width: 720px) {
    .grid > .card.span-6:has(> .panel):not(.card--split) { grid-column: auto / span 6; }
    .grid > .card.span-6:has(> .panel):not(.card--split):nth-child(odd of .card.span-6):nth-last-child(1 of .card.span-6) { grid-column: 1 / -1; }
  }
  .grid > .tile:is(.span-3, .span-4, .span-6) { grid-column: auto / span 6; }
  .grid > .tile:is(.span-3, .span-4, .span-6):nth-child(odd of .tile):nth-last-child(1 of .tile) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .span-2  { grid-column: auto / span 2; }
  .span-3  { grid-column: auto / span 3; }
  .span-4  { grid-column: auto / span 4; }
  .span-5  { grid-column: auto / span 5; }
  .span-6  { grid-column: auto / span 6; }
  .span-7  { grid-column: auto / span 7; }
  .span-8  { grid-column: auto / span 8; }
  .span-9  { grid-column: auto / span 9; }
  .span-10 { grid-column: auto / span 10; }
  .span-12 { grid-column: auto / span 12; }
  .start-1 { grid-column-start: 1; } .start-2 { grid-column-start: 2; } .start-3 { grid-column-start: 3; }
  .start-5 { grid-column-start: 5; } .start-6 { grid-column-start: 6; } .start-7 { grid-column-start: 7; }
  .start-4 { grid-column-start: 4; } .start-8 { grid-column-start: 8; } .start-9 { grid-column-start: 9; }
  .start-10 { grid-column-start: 10; }
  .grid--middle, .grid--top { align-items: start; }
}
.grid:is(.grid--middle, .grid--top) > .card { align-self: stretch; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .grid > .card.span-4:has(> .panel) { grid-column: auto / span 6; }
  .grid > .card.span-8:has(> .panel),
  .grid > .card.span-4:has(> .panel):nth-child(odd of .card.span-4):nth-last-child(1 of .card.span-4) { grid-column: 1 / -1; }
}
.section-head { max-width: 760px; margin-bottom: var(--head-gap); display: grid; gap: var(--s-4); }
.section-head--center { text-align: left; justify-items: start; }
.section-head--split { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.section-head--split > div { display: grid; gap: var(--s-4); max-width: 760px; }
.section-head p { color: var(--ink); font-size: var(--t-lead); line-height: 1.5; max-width: 60ch; }
.section-head--row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.section-head--row > div { display: grid; gap: var(--s-4); max-width: 760px; }
.section--hero .section-head--row { max-width: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--btn-h); padding: 0 var(--s-5); border-radius: var(--r-btn); border: 1px solid transparent;
  font: 500 var(--t-body)/1 var(--font-text); letter-spacing: 0; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
.btn--primary { background: var(--action); color: var(--action-ink); }
.btn--primary:hover { background: color-mix(in oklab, var(--action) 86%, var(--ink)); }
.ground-brand .btn--primary:hover { background: color-mix(in oklab, var(--action) 88%, var(--bg)); }
.btn--secondary { background: var(--bg); color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { background: color-mix(in oklab, var(--bg) 94%, var(--ink)); border-color: color-mix(in oklab, var(--ink) 35%, transparent); }
.btn--sm { height: var(--btn-h-sm); padding: 0 var(--s-4); font-size: var(--t-small); }
html[data-buttons="pill"] { --r-btn: 999px; }
html[data-buttons="block"] { --r-btn: 2px; --btn-h: 48px; }
html:is([data-buttons="pill"], [data-buttons="tonal"]) .btn--secondary { background: color-mix(in oklab, var(--ink) 8%, var(--bg)); border-color: transparent; }
html:is([data-buttons="pill"], [data-buttons="tonal"]) .btn--secondary:hover { background: color-mix(in oklab, var(--ink) 14%, var(--bg)); border-color: transparent; }
html:is([data-buttons="arrow"], [data-buttons="block"]) .btn--secondary {
  background: none; border-color: transparent; padding-inline: var(--s-2);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong);
}
html:is([data-buttons="arrow"], [data-buttons="block"]) .btn--secondary:hover { background: none; border-color: transparent; text-decoration-color: currentColor; }
html[data-buttons="pill"] .btn--primary::after,
html[data-buttons="arrow"] :is(.btn--primary, .btn--secondary)::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-right: -2px; background: currentColor;
  -webkit-mask: var(--btn-glyph) center / contain no-repeat; mask: var(--btn-glyph) center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
html[data-buttons="pill"] { --btn-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2.5 8 6l-3.5 3.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html[data-buttons="arrow"] { --btn-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6h8.5M6.5 2.5 10 6l-3.5 3.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
html:is([data-buttons="pill"], [data-buttons="arrow"]) .btn:hover::after { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn--arrow::after { content: "\2192"; transition: transform var(--dur) var(--ease); }
.btn--arrow:hover::after { transform: translateX(3px); }
.m-arrow { flex: none; width: 12px; height: 12px; margin-right: -2px; overflow: visible;
           fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn--xl .m-arrow { width: 0.62em; height: 0.62em; stroke-width: 1.4; }
:is(.btn, .link, .pill):has(> .m-arrow)::after { content: none; display: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.section-head--center .btn-row { justify-content: center; }
@media (max-width: 639px) {
  .btn-row { flex-direction: column; align-items: stretch; width: 100%; justify-self: stretch; }
  .btn-row > .btn--secondary { background: none; border-color: transparent; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong); }
  .section-head--split > .btn { width: 100%; }
}
.link { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 500; color: var(--ink);
        text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px;
        transition: text-decoration-color var(--dur) var(--ease); }
.link:hover { text-decoration-color: currentColor; }
.link::after { content: "\2192"; display: inline-block; text-decoration: none; transition: transform var(--dur) var(--ease); }
.link:hover::after { transform: translateX(3px); }
.pill { display: inline-flex; align-items: center; gap: var(--s-2); height: 32px; padding: 0 var(--s-3);
        border-radius: 999px; border: 1px solid var(--line); background: var(--card);
        font-size: var(--t-label); color: var(--ink); }
.pill .muted { color: var(--muted); }
.card {
  display: flex; flex-direction: column; gap: var(--s-2); min-width: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--card-pad);
}
.card > h3, .card > h4, .card--plan h3 { font-family: var(--font-text); font-weight: 500; font-size: var(--t-card); line-height: 1.3; letter-spacing: -0.01em; }
.card > p { color: var(--ink); font-size: var(--t-body); max-width: 52ch; }
.card.card--open { --c-pad: 0px; background: none; border: 0; box-shadow: none; padding: 0; overflow: visible; }
.card.card--open > .panel { margin: var(--s-5) 0 0; border-radius: var(--r-lg); }
.card.card--open > .panel--top { margin: 0 0 var(--s-5); }
.card--plan.is-featured { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.card.card--plan { gap: var(--s-4); }
:not(.card) > .panel { border-radius: var(--p-r, var(--r-md)); }
.menu-card .panel { --p-h: 160px; }
.frame {
  position: relative; isolation: isolate; overflow: clip; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--line);
  padding: clamp(var(--s-4), 4vw, var(--s-7));
}
.frame::before { content: ""; flex: none; width: 0; padding-top: var(--ratio, 0px); }
.frame > :not(canvas, .stage, .loop-pause, .frame__fx, .frame__img, [data-print], [data-scene], .print3d) { position: relative; max-width: 100%; min-width: 0; }
.frame--photo { padding: 0; border: 0; }
.frame--fill { height: 100%; }
@media (max-width: 1023px) {
  .grid.fill:has(> .frame--fill) { display: flex; flex-direction: column; gap: var(--s-6); }
  .grid.fill > .frame--fill { flex: 1 1 0; height: auto; min-height: 200px; }
}
.split-col { display: flex; flex-direction: column; gap: var(--s-5); }
@media (min-width: 1024px) { .split-col { height: 100%; } .split-col > .split-col__end { margin-top: auto; } }
:is(.frame, .panel) > .frame__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.frame--portrait { --ratio: 125%; }
.frame--stage { --ratio: 50%; }
@media (max-width: 639px) { .frame--stage, .frame--portrait { --ratio: 120%; } }
.frame--hero { padding: clamp(24px, 5vw, 64px); }
.frame--split { --ratio: 80%; }
.frame--square { --ratio: 100%; }
.frame--cta { min-height: 420px; }
.frame--cta, .frame--lit {
  border-color: transparent; background: var(--ground-bg); color: var(--ground-ink);
  --bg: var(--ground-surface); --surface: var(--ground-surface); --ink: var(--ground-ink); --muted: var(--ground-muted);
  --action: var(--ground-ink); --action-ink: var(--ground-surface);
  --line: color-mix(in oklab, var(--ground-ink) 12%, transparent); --line-strong: color-mix(in oklab, var(--ground-ink) 24%, transparent);
}
.frame > .frame__fx { position: absolute; inset: 0; z-index: 0; }
html:not([data-tone="dark"]) :is(.frame--cta, .frame--lit, .footer--statement) { --action: var(--p-action); --action-ink: var(--p-action-ink); }
.frame--photo:has(> .card) { padding: clamp(var(--s-5), 5vw, var(--s-8)) clamp(var(--s-4), 4vw, var(--s-7)); }
.frame--photo > .card { position: relative; z-index: 1; width: min(100%, 480px); }
.frame--cta > .frame__fx { opacity: .85; }
.frame--lit > .frame__text { z-index: 2; align-self: flex-end; margin-right: auto; width: min(100%, 360px); display: grid; gap: var(--s-5); }
.frame--lit { --ratio: 50%; }
@media (max-width: 639px) { .frame--lit { --ratio: 150%; } .frame--lit > .frame__text { align-self: flex-start; } }
@media (max-width: 639px) { .frame--split { --ratio: 100%; } }
.frame > .stage > .at-rise { --ax: max(24px, calc(50% - var(--w, 64%) / 2)); }
.frame--hero > .stage > .at-rise { --ax: max(24px, calc(50% - var(--pair, var(--w, 64%)) / 2)); }
.frame--hero > .stage > .at-over { --bx: max(24px, calc(50% - var(--pair, 800px) / 2)); }
@media (max-width: 1023px) { .frame--hero > .stage > .at-rise { --ax: max(24px, calc(50% - var(--w, 64%) / 2)); } }
.frame:has(> .stage) { padding: 0; }
.frame--hero:has(> .stage) { aspect-ratio: 16 / 7; }
@media (max-width: 1023px) {
  .frame--hero:has(> .stage) { aspect-ratio: 3 / 2; }
}
@media (min-width: 640px) and (max-width: 1023px) and (orientation: portrait) {
  .frame--hero:has(> .stage) { aspect-ratio: 4 / 3; }
}
@media (max-width: 1023px) {
  .frame--hero > .stage > :is(.at-over, .at-over-l) { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .frame--split > .stage > :is(.at-over, .at-over-l) { display: none; }
}
@media (max-width: 639px) {
  .frame--hero:has(> .stage) { aspect-ratio: 1; }
  .frame > .stage > :is(.at-over, .at-over-l) { display: none; }
}
.stage > .at-center { width: calc(100% - 48px); max-width: var(--w, 288px); }
.stage > .at-center > :is([data-ui], .ui) { width: 100%; max-width: none; }
.stage > .to-edge > .ui-doc > .ui-doc__page { min-height: 100%; }
.hero-stage { container: hero-stage / inline-size; width: 100%; }
.hero-stage__row { display: flex; align-items: center; justify-content: center; gap: var(--s-5); }
.hero-stage__row > * { flex: none; max-width: 100%; }
@container hero-stage (max-width: 1060px) { .hero-stage__row > :nth-child(n + 3) { display: none; } }
@container hero-stage (max-width: 740px)  { .hero-stage__row > :nth-child(n + 2) { display: none; } }
.loop-pause {
  position: absolute; right: 12px; bottom: 12px; z-index: 6; display: grid; place-items: center;
  width: 32px; height: 32px; margin: 0; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid color-mix(in oklab, var(--ink) 16%, transparent); background: var(--bg); color: var(--ink);
  box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 4px 12px -4px rgb(0 0 0 / .28);
}
.loop-pause::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.loop-pause svg { width: 14px; height: 14px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .loop-pause { display: none; } }
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav);
  background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line);
}
.nav__bar { height: 100%; display: flex; align-items: center; gap: var(--s-8); }
.nav__logo { display: inline-flex; align-items: center; gap: var(--s-2); font: 500 22px/1 var(--font-display); letter-spacing: -0.02em; flex: none; }
@media (max-width: 639px) { .nav__logo { font-size: 20px; } }
.nav__logo svg, .nav__logo img { height: 24px; width: auto; }
.mark { display: inline-block; flex: none; width: 22px; height: 22px; background: var(--accent);
        -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
.mark[data-mark="dots"]  { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6.5' cy='6.5' r='4.5'/%3E%3Ccircle cx='17.5' cy='6.5' r='4.5'/%3E%3Ccircle cx='6.5' cy='17.5' r='4.5'/%3E%3Crect x='13' y='13' width='9' height='9' rx='1.5'/%3E%3C/svg%3E"); }
.mark[data-mark="arc"]   { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 21.5V12a9.5 9.5 0 0 1 19 0v9.5h-6V12a3.5 3.5 0 0 0-7 0v9.5z'/%3E%3C/svg%3E"); }
.mark[data-mark="ring"]  { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 5.5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9z'/%3E%3C/svg%3E"); }
.mark[data-mark="petal"] { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.6' r='5'/%3E%3Ccircle cx='17.4' cy='12' r='5'/%3E%3Ccircle cx='12' cy='17.4' r='5'/%3E%3Ccircle cx='6.6' cy='12' r='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E"); }
.mark[data-mark="leaf"]  { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21C3 10 10 3 21 3c0 11-7 18-18 18z'/%3E%3C/svg%3E"); }
.mark[data-mark="stack"] { --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='2.5' width='20' height='5.5' rx='2.75'/%3E%3Crect x='2' y='9.25' width='14' height='5.5' rx='2.75'/%3E%3Crect x='2' y='16' width='8' height='5.5' rx='2.75'/%3E%3C/svg%3E"); }
.mark.mark--initial { -webkit-mask: none; mask: none; display: inline-grid; place-items: center; border-radius: calc(var(--r-sm) * 0.75);
  color: var(--accent-ink); font: var(--display-weight, 400) 13px/1 var(--font-display); letter-spacing: 0; }
.footer__mark .mark, .footer .nav__logo .mark { width: 0.8em; height: 0.8em; margin-right: 0.18em; vertical-align: -0.04em; }
.footer__mark .mark--initial, .footer .nav__logo .mark--initial { width: 1em; height: 1em; font-size: 0.6em; }
.nav--split .nav__logo .mark--initial { width: 26px; height: 26px; font-size: 15px; }
.nav__links { display: flex; align-self: stretch; gap: var(--s-1); flex: 1; min-width: 0; }
.nav__item { display: flex; align-items: center; height: 100%; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: var(--s-1); height: 36px; padding: 0 var(--s-3); border-radius: var(--r-sm);
  font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav__bar { gap: var(--s-6); }
  .nav__link { padding: 0 var(--s-2); }
  .nav__link::before, .nav__link[aria-current="page"]::after { left: var(--s-2); right: var(--s-2); }
  .nav__links { gap: 0; }
}
.nav__link::before { content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: -2px; height: 2px; border-radius: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform var(--dur) var(--ease); pointer-events: none; }
.nav__link:hover::before, .nav__link:focus-visible::before, .nav__item:hover > .nav__link::before, .nav__item:focus-within > .nav__link::before { transform: scaleX(1); transform-origin: left; }
.nav__actions > .nav__link::before { left: var(--s-2); right: var(--s-2); }
.nav__link .chev { width: 12px; height: 12px; opacity: .6; transition: transform var(--dur) var(--ease); }
.nav__link[aria-current="page"]::after { content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: -2px; height: 2px; border-radius: 2px; background: currentColor; }
.nav__expand { display: none; }
.nav__actions { display: flex; align-items: center; gap: var(--s-4); flex: none; }
.nav__actions .btn { height: var(--btn-h); padding-inline: var(--s-5); font-size: 15px; }
.nav__actions > .nav__link { padding-inline: var(--s-2); }
.nav__toggle { display: none; }
.nav__menu {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); color: var(--ink);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: var(--s-7) 0 var(--s-8); opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 120ms var(--ease), transform 120ms var(--ease), visibility 0s linear 120ms;
}
@media (min-width: 1024px) {
  .nav__item:hover > .nav__menu, .nav__item:focus-within > .nav__menu {
    opacity: 1; visibility: visible; transform: none; transition-duration: 200ms, 200ms, 0s; transition-delay: 150ms, 150ms, 150ms;
  }
  .nav__item:hover > .nav__link .chev, .nav__item:focus-within > .nav__link .chev { transform: rotate(180deg); }
}
.menu-col { display: grid; gap: var(--s-2); align-content: start; }
.menu-col > .t-label { color: var(--muted); margin-bottom: var(--s-2); }
.menu-col a { display: grid; gap: var(--s-1); padding: var(--s-2) 0; font-weight: 500; }
.menu-col a span { font-weight: 400; color: var(--muted); font-size: var(--t-small); }
.menu-col a:hover { color: var(--action); }
.menu-card { display: grid; gap: var(--s-3); }
.menu-card .panel { --ratio: 56.25%; }
@media (max-width: 1023px) {
  .nav__links, .nav__actions { display: none; }
  .nav__toggle {
    display: inline-grid; place-items: center; margin-left: auto; width: 44px; height: 44px; border-radius: var(--r-btn);
    border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; flex: none;
  }
  .nav.is-open .nav__links {
    display: flex; flex-direction: column; position: fixed; top: var(--nav); left: 0; right: 0; bottom: 0;
    padding: var(--s-4) var(--gut) calc(var(--btn-h) * 2 + 56px); background: var(--bg); overflow-y: auto; gap: 0;
  }
  .nav.is-open .nav__item { display: grid; grid-template-columns: 1fr auto; height: auto; border-bottom: 1px solid var(--line); }
  .nav.is-open .nav__link { height: 56px; padding: 0; font-size: 20px; background: none; }
  .nav.is-open .nav__link[aria-current="page"]::after { left: 0; right: auto; width: 24px; bottom: 10px; }
  .nav.is-open .nav__link::before { display: none; }
  .nav.is-open .nav__link .chev { display: none; }
  .nav.is-open .nav__expand {
    display: inline-grid; place-items: center; width: 44px; height: 56px; border: 0; background: none; color: var(--ink); cursor: pointer;
  }
  .nav__expand svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
  .nav__item.is-expanded .nav__expand svg { transform: rotate(180deg); }
  .nav.is-open .nav__menu {
    position: static; grid-column: 1 / -1; display: none; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 0 0 var(--s-4);
  }
  .nav.is-open .nav__item.is-expanded .nav__menu { display: block; }
  .nav.is-open .nav__menu :is(.container, .wrap) { width: 100%; }
  .nav.is-open .nav__menu .grid { row-gap: var(--s-4); }
  .nav.is-open .menu-card { display: grid; gap: var(--s-1); padding: var(--s-2) 0; }
  .nav.is-open .menu-card .panel { display: none; }
  .nav.is-open .nav__actions {
    display: grid; gap: var(--s-2); position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
    padding: var(--s-4) var(--gut) calc(var(--s-4) + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line);
  }
  .nav.is-open .nav__actions .btn { width: 100%; height: 48px; font-size: var(--t-body); }
  .nav.is-open .nav__actions .nav__link { display: inline-flex; order: 2; justify-content: center; height: var(--btn-h); font-size: var(--t-body); }
  body.nav-locked { overflow: hidden; }
}
@media (max-width: 1023px) {
  .nav__bar { gap: var(--s-3); }
  .nav:not(.is-open) .nav__actions { display: flex; margin-left: auto; }
  .nav:not(.is-open) .nav__actions > :not(.btn--primary) { display: none; }
  .nav:not(.is-open) .nav__actions + .nav__toggle { margin-left: 0; }
}
@media (max-width: 639px) {
  .nav__bar { gap: var(--s-2); }
  .nav__logo { font-size: clamp(16px, 4.6vw, 20px); gap: 6px; white-space: nowrap; }
  .nav__logo .mark:not(.mark--initial) { width: 20px; height: 20px; }
  .nav:not(.is-open) .nav__actions .btn { height: 44px; padding-inline: var(--s-3); font-size: var(--t-small); }
}
@media (scripting: none) and (max-width: 1023px) {
  .nav__links { display: flex; overflow-x: auto; scrollbar-width: none; margin-right: var(--s-3); padding-right: var(--s-2); border-right: 1px solid var(--line); }
  .nav__toggle { display: none; }
}
@media (min-width: 1024px) {
  .nav--split .nav__bar, .nav--centre .nav__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .nav--split .nav__logo { grid-column: 2; grid-row: 1; font-size: 26px; }
  .nav--split .nav__links { grid-column: 1; grid-row: 1; }
  .nav--split .nav__links > .nav__item:nth-child(1 of .nav__item) > .nav__link { padding-left: 0; }
  .nav--split .nav__links > .nav__item:nth-child(1 of .nav__item) > .nav__link::before,
  .nav--split .nav__links > .nav__item:nth-child(1 of .nav__item) > .nav__link[aria-current="page"]::after { left: 0; }
  .nav--split .nav__actions, .nav--centre .nav__actions { grid-column: 3; grid-row: 1; justify-self: end; }
  .nav--centre .nav__logo { grid-column: 1; grid-row: 1; justify-self: start; }
  .nav--centre .nav__links { grid-column: 2; grid-row: 1; justify-content: center; flex: none; }
}
.nav--tone { --bg: var(--p-inv-bg); --ink: var(--p-inv-ink); --muted: var(--p-inv-muted); --accent: var(--p-inv-accent); --accent-ink: var(--p-inv-accent-ink);
             --action: var(--p-inv-action); --action-ink: var(--p-inv-action-ink); --card: var(--p-inv-surface);
             --line: color-mix(in oklab, var(--p-inv-ink) 14%, transparent); --line-strong: color-mix(in oklab, var(--p-inv-ink) 26%, transparent); }
.nav--tone .nav__menu { --bg: var(--p-bg); --ink: var(--p-ink); --muted: var(--p-muted); --action: var(--p-action); --line: color-mix(in oklab, var(--p-ink) 11%, transparent); }
.logos { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-5) var(--s-6); }
.logos > * { height: 28px; width: auto; max-width: 100%; color: var(--ink); }
.logos .wordmark { height: auto; font: 500 var(--t-card)/1 var(--font-display); letter-spacing: -0.02em; white-space: nowrap; }
.logos .icon-mono { width: 120px; height: 28px; }
@media (max-width: 1023px) { .logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; } }
@media (max-width: 639px)  { .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.checks { display: grid; gap: var(--s-3); }
.checks li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3); align-items: start; }
.checks li::before {
  content: ""; width: 20px; height: 20px; margin-top: 2px; background: var(--action);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cmask id='m'%3E%3Crect width='20' height='20' fill='white'/%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='10' cy='10' r='10' mask='url(%23m)'/%3E%3C/svg%3E") center / 20px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cmask id='m'%3E%3Crect width='20' height='20' fill='white'/%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='10' cy='10' r='10' mask='url(%23m)'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.quote blockquote { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--t-h3);
                    line-height: 1.3; letter-spacing: var(--display-tracking); text-wrap: pretty; }
.quote figcaption, .quote .person { font: 400 var(--t-small)/1.45 var(--font-text); letter-spacing: 0; color: var(--ink); }
.person { display: flex; align-items: center; gap: var(--s-3); }
.person img, .person .avatar { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; background: var(--surface); flex: none; }
.person .avatar { display: grid; place-items: center; font: 500 var(--t-small)/1 var(--font-text); color: var(--muted); }
@media (max-width: 1023px) { .stat-aside { margin-top: var(--s-7); } }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-5) var(--gutter); margin: 0; }
.stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--s-2); }
.stats dd { margin: 0; }
.stats .t-stat { font-size: clamp(26px, 1vw + 22px, 36px); }
@media (max-width: 639px) { .stats .t-stat { font-size: 26px; } }
.step-num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 999px;
            border: 1px solid var(--line-strong); font: 500 var(--t-small)/1 var(--font-text); font-variant-numeric: tabular-nums; }
.tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tab {
  height: var(--btn-h-sm); padding: 0 var(--s-4); border-radius: var(--r-btn); border: 1px solid var(--line);
  background: transparent; color: var(--muted); font-size: var(--t-small); font-weight: 500; cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tab:hover { color: var(--ink); border-color: var(--line-strong); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
[role="tabpanel"][hidden] { display: none; }
.price { display: flex; align-items: baseline; gap: var(--s-2); }
.price .t-stat { font-size: var(--t-stat); }
.card--plan { gap: var(--s-4); }
.card--plan .btn { width: 100%; }
.card--plan .checks { margin-top: var(--s-2); }
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s-3); border-radius: 999px; vertical-align: middle;
         background: var(--action); color: var(--action-ink); font: 500 var(--t-label)/1 var(--font-text); letter-spacing: 0; }
.card--plan h3 .badge { margin-left: var(--s-2); }
.faq > :is(.faq__item, details) { display: grid; gap: var(--s-2); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.faq > :is(.faq__item, details):first-child { padding-top: 0; }
.faq :is(.faq__item > h3, summary) { display: block; font: 500 var(--t-lead)/1.4 var(--font-text); letter-spacing: 0; list-style: none; cursor: text; }
.faq summary { pointer-events: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq details::details-content { content-visibility: visible; }
.faq :is(.faq__item, details) p { color: var(--ink); max-width: 64ch; }
@media (max-width: 639px) { .faq > :is(.faq__item, details) { padding: var(--s-4) 0; } }
.footer { padding-block: var(--section) var(--s-6); border-top: 1px solid var(--line); }
.footer .grid { row-gap: var(--s-7); }
.footer h4 { font: 500 var(--t-small)/1.4 var(--font-text); letter-spacing: 0; color: var(--muted); margin-bottom: var(--s-4); }
.footer ul { display: grid; gap: var(--s-3); font-size: var(--t-small); }
.footer ul a:hover { color: var(--action); }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); justify-content: space-between;
                 margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line);
                 font-size: var(--t-label); color: var(--muted); }
.socials { display: flex; gap: var(--s-2); }
.socials a { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); }
.socials a:hover { border-color: var(--line-strong); }
.socials svg, .socials img, .socials .icon-mono { width: var(--icon); height: var(--icon); }
.icon-mono { display: inline-block; flex: none; width: var(--icon); height: var(--icon); background: currentColor;
             -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
@media (max-width: 1023px) { .footer .footer__col { grid-column: auto / span 6; } .footer .grid > .span-4 { grid-column: 1 / -1; } }
@media (min-width: 640px) and (max-width: 1023px) { .footer .footer__col { grid-column: auto / span 3; } }
.footer__lede { font: var(--display-weight) var(--t-h3)/1.25 var(--font-display); letter-spacing: var(--display-tracking); max-width: 22ch; }
.footer__legal .socials a { width: 32px; height: 32px; }
.footer--dark { border-top: 0; padding-block: var(--section-band) var(--s-6); }
html[data-tone="dark"] .footer--dark {
  --bg: color-mix(in oklab, var(--p-bg) 72%, #000); --surface: var(--p-surface); --ink: var(--p-ink); --muted: var(--p-muted);
  --accent: var(--p-accent); --accent-ink: var(--p-accent-ink); --action: var(--p-action); --action-ink: var(--p-action-ink);
  border-top: 1px solid var(--line);
}
.footer__mark { display: inline-flex; align-items: center; font: var(--display-weight) var(--t-h2)/1 var(--font-display); letter-spacing: var(--display-tracking); }
.footer__address { font: var(--display-weight) var(--t-h2)/1.1 var(--font-display); letter-spacing: var(--display-tracking); font-style: normal; }
.footer__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); font-weight: 500; }
.footer__nav a:hover { color: var(--action); }
.footer__nav .socials { margin-left: auto; }
.footer--visit .footer__legal { margin-top: var(--s-5); border-top: 0; padding-top: 0; }
.footer--statement {
  margin: 0; border: 0; border-radius: 0; padding-block: var(--s-10) var(--s-6);
  background: var(--ground-bg); color: var(--ground-ink);
  --bg: var(--ground-bg); --surface: var(--ground-surface); --ink: var(--ground-ink); --muted: var(--ground-muted);
  --action: var(--ground-ink); --action-ink: var(--ground-surface); --accent: var(--ground-accent);
  --line: color-mix(in oklab, var(--ground-ink) 14%, transparent); --line-strong: color-mix(in oklab, var(--ground-ink) 28%, transparent);
}
.footer--statement .cta-type { padding-bottom: var(--s-9); margin-bottom: var(--s-8); border-bottom: 1px solid var(--line); }
@media (max-width: 639px) { .footer--statement:not(.closing) { padding-top: var(--s-9); } }
.hours { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-5); font-variant-numeric: tabular-nums; }
.hours dt { color: var(--ink); } .hours dd { margin: 0; }
.hours .is-today { font-weight: 500; }
.hours dt.is-today::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: var(--s-2); border-radius: 999px; background: var(--accent); vertical-align: 0.2em; }
.visit { display: grid; gap: var(--s-5); color: var(--ink); }
.visit__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.visit__head > * { margin: 0; }
.visit__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); row-gap: var(--s-5); }
.visit--cols .visit__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.visit__col { min-width: 0; }
.visit__col > .t-label { margin-bottom: var(--s-3); color: var(--muted); }
.visit__address { font: 400 20px/30px var(--font-text); font-style: normal; }
.visit__rows { display: grid; margin: 0; padding: 0; list-style: none; }
.visit__rows > li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 44px; border-top: 1px solid var(--line); }
.visit__rows > li > :first-child { color: var(--muted); }
.visit__rows > li > :last-child { text-align: right; }
@media (min-width: 1024px) {
  .visit--card { --bg: var(--p-surface); --surface: var(--p-bg); --card: var(--p-bg); background: var(--bg); border-radius: var(--r-lg); padding: var(--s-7); }
}
@media (max-width: 1023px) { .visit--cols .visit__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .visit__cols, .visit--cols .visit__cols { grid-template-columns: minmax(0, 1fr); }
  .visit__address { font-size: 18px; line-height: 28px; }
  .visit__rows > li { align-items: flex-start; flex-direction: column; justify-content: center; gap: 0; padding-block: var(--s-2); }
  .visit__rows > li > :last-child { text-align: left; }
}
.credits { flex-basis: 100%; font-size: var(--t-label); color: var(--muted); }
.credits > summary { display: inline; cursor: pointer; list-style: none; }
.credits > summary::-webkit-details-marker { display: none; }
.credits > summary::after { content: "Credits"; margin-left: var(--s-2); color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.credits[open] > summary::after { content: "Hide"; }
.credits > :not(summary) { margin-top: var(--s-2); max-width: 110ch; }
.credits a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
footer.closing { border-top: 0; }
footer.closing > .wrap { display: grid; grid-template-rows: minmax(0, 1fr) auto; row-gap: var(--s-8); }
footer.closing.g2 > .wrap { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.closing__cta { min-height: 0; display: flex; flex-direction: column; gap: var(--s-6); }
.closing__cta > .section-head--split, .closing__cta > .section-head { margin-bottom: 0; }
.closing__cta h2 { max-width: 20ch; }
.closing__cta > .close__media { flex: 1 1 0; min-height: clamp(120px, 18svh, 160px); position: relative; overflow: clip; border-radius: var(--r-lg); background: var(--surface); }
.close__media > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); }
.closing__cta.close--type > .btn--xl { align-self: stretch; }
.close__word { margin-top: auto; font: var(--display-weight) clamp(64px, 14.5vw, 216px)/.86 var(--font-display); letter-spacing: -0.045em;
               white-space: nowrap; overflow: clip; color: var(--ink); }
.closing__links { display: grid; gap: var(--s-7); }
.closing__links > .footer__legal { margin-top: 0; }
.closing__links .footer__lede { font-size: var(--t-lead); max-width: 30ch; }
@media (max-width: 639px) {
  footer.closing:has(> .wrap > .closing__cta > .close__media) { --hm: 2; }
  footer.closing:has(> .wrap > .closing__cta > .close__media) > .wrap { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); row-gap: calc(var(--padt) + var(--padb) + var(--bar)); }
  footer.closing:has(> .wrap > .closing__cta > .close__media) .closing__links { align-self: start; }
}
@media (max-width: 639px) {
  footer.closing > .wrap { row-gap: var(--s-7); }
  .closing__links { gap: var(--s-5); }
  .closing__links > .grid { row-gap: var(--s-5); }
  .closing__links .footer__col { grid-column: auto / span 6; }
  .closing__cta > .close__media { min-height: 140px; }
  .close__word { font-size: clamp(56px, 19vw, 96px); }
}
.cta-type { display: grid; justify-items: start; gap: var(--s-6); text-align: left; }
.cta-type h2 { max-width: 22ch; }
.btn--xl { width: min(100%, 640px); height: clamp(64px, 1.4vw + 48px, 72px); font: var(--display-weight) clamp(20px, 0.6vw + 16px, 26px)/1 var(--font-display); letter-spacing: var(--display-tracking); }
.btn--xl.btn--wide { width: 100%; height: clamp(64px, 3vw + 40px, 88px); font-size: clamp(22px, 0.95vw + 18px, 32px); justify-content: space-between; padding-inline: var(--s-7); }
html[data-buttons] .btn--xl::after { width: 0.6em; height: 0.6em; }
@media (max-width: 639px) { .btn--xl, .btn--xl.btn--wide { width: 100%; height: 48px; font: 500 18px/1 var(--font-text); letter-spacing: 0; } }
.photo-band { position: relative; isolation: isolate; overflow: clip; display: grid; align-items: end;
              min-height: clamp(440px, 46vw, 720px); border-radius: var(--r-lg); background: var(--surface); }
.photo-band--bleed { border-radius: 0; }
.photo-band--hero { min-height: calc(100svh - var(--nav-h)); }
main > .photo-band--hero:first-child { height: 100svh; min-height: 0; }
main > .photo-band--hero:first-child > .photo-band__text { padding-top: calc(var(--nav) + var(--hgap)); }
.photo-band > :is(img, video, picture) { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.photo-band > picture > img { width: 100%; height: 100%; object-fit: cover; }
.photo-band__text { position: relative; display: grid; gap: var(--s-4); justify-items: start; color: var(--ink); }
.photo-band__text > :is(h1, h2, p) { max-width: 18ch; }
.photo-band__text > p { max-width: 44ch; font-size: var(--t-lead); }
@media (min-width: 640px) {
  :root:not([data-type="place"]) .photo-band__text {
    width: fit-content; max-width: min(560px, calc(100% - 2 * var(--s-6))); margin: var(--s-6);
    padding: var(--s-6); background: var(--bg); border-radius: var(--r-md);
  }
  :root:not([data-type="place"]) .photo-band--bleed > .photo-band__text { margin: var(--s-8) max(var(--gut), (100% - var(--container)) / 2); }
  :root:not([data-type="place"]) main > .photo-band--hero:first-child > .photo-band__text { margin-top: calc(var(--nav) + var(--hgap)); padding-top: var(--s-6); }
  .photo-band--left { align-items: center; }
}
@media (max-width: 639px) {
  .photo-band { display: block; min-height: 0; overflow: visible; background: none; border-radius: 0; }
  .photo-band > :is(img, video, picture) { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 5; border-radius: var(--r-lg); }
  .photo-band--bleed > :is(img, video, picture) { border-radius: 0; }
  .photo-band__text { padding: var(--s-5) 0 0; }
  .photo-band--bleed > .photo-band__text { padding: var(--s-5) var(--pad) 0; }
  .photo-band--hero > .photo-band__text { padding-bottom: var(--section); }
  .photo-band--hero { display: flex; flex-direction: column; min-height: calc(100svh - var(--nav-h)); }
  .photo-band--hero > :is(img, video, picture) { flex: 1 0 0; min-height: 100vw; aspect-ratio: auto; object-fit: cover; }
}
:root[data-type="place"] .photo-band { display: flex; flex-direction: column; min-height: 0; overflow: visible; background: none; border-radius: 0; }
:root[data-type="place"] .photo-band > :is(img, video, picture) { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; height: auto; aspect-ratio: 4 / 3; }
:root[data-type="place"] .photo-band__text { padding: var(--s-6) 0 0; }
:root[data-type="place"] .photo-band--bleed > .photo-band__text { padding-inline: max(var(--gut), (100% - var(--container)) / 2); }
:root { --pl-room: calc(100svh - var(--padt) - var(--padb) - var(--bar)); }
.pl-photo { container-type: inline-size; margin: 0; min-width: 0; }
.pl-photo > img, .pl-photo > picture > img {
  display: block; aspect-ratio: var(--pl-r, 1.3333); width: auto; max-width: 100%;
  height: min(calc(100cqw / var(--pl-r, 1.3333)), var(--pl-cap, calc(var(--pl-room) - var(--pl-head, 0px))));
  object-fit: cover; object-position: var(--pos, 50% 50%); border-radius: var(--r-lg);
}
.pl-photo--end > img, .pl-photo--end > picture > img { margin-left: auto; }
@media (max-width: 1023px) { .pl-photo > img, .pl-photo > picture > img { width: 100%; height: auto; } }
.tile { display: grid; gap: var(--s-4); align-content: start; color: inherit; }
.tile__media { position: relative; overflow: clip; aspect-ratio: var(--tile-ratio, 4 / 3); border-radius: var(--r-lg); background: var(--surface); }
.tile__media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
a.tile:hover .tile__media > img { transform: scale(1.03); }
.tile--portrait { --tile-ratio: 4 / 5; }
.tile--wide { --tile-ratio: 16 / 9; }
.tile__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.tile__head > :is(h3, h4) { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: -0.01em; }
.tile__price { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile__facts { color: var(--muted); font-size: var(--t-small); margin-top: calc(-1 * var(--s-3)); }
.tile > p { color: var(--ink); max-width: 52ch; }
.tile__media:has(> [data-print], > .drawing) { display: grid; place-items: center; background: var(--ground-bg); }
.tile__media > [data-print] { position: absolute; inset: 0; }
.tile__media > .drawing { width: min(84%, calc(84% * var(--ar, 1.5))); }
.drawing { position: relative; margin: 0; flex: none; aspect-ratio: var(--ar, 1.5); color: var(--ink); }
.frame > .drawing { width: min(100%, calc(var(--ratio, 50%) * var(--ar, 1.5) * 0.86)); }
.frame > .drawing.drawing--crop { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.drawing > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.drawing :is(.ln, .fill, .acc, .dim) { vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.drawing .ln { fill: none; stroke: currentColor; stroke-width: 1.5; }
.drawing .fill { fill: color-mix(in oklab, var(--ink) 6%, var(--bg)); stroke: currentColor; stroke-width: 1.5; }
.drawing .acc { fill: var(--accent); stroke: currentColor; stroke-width: 1.5; }
.drawing .ink { fill: var(--ink); stroke: var(--ink); stroke-width: 1.5; }
.drawing .ink-ln { fill: none; stroke: color-mix(in oklab, var(--bg) 45%, var(--ink)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.drawing .dim, .drawing .dim * { fill: none; stroke: var(--muted); stroke-width: 1; }
.drawing .part { pointer-events: bounding-box; }
.drawing .part :is(.ln, .fill, .ink, .acc) { transition: stroke var(--dur) var(--ease), fill var(--dur) var(--ease); }
@media (hover: hover) {
  .drawing .part:hover :is(.ln, .fill) { stroke: var(--accent); }
  .drawing .part:hover .fill { fill: color-mix(in oklab, var(--accent) 14%, var(--bg)); }
  .drawing .part:hover .ink { fill: var(--accent); stroke: var(--accent); }
}
.drawing__dim { position: absolute; transform: translate(-50%, -50%); padding: 2px var(--s-2); border-radius: 999px;
  background: var(--bg); color: var(--ink); font: 500 var(--t-label)/1.3 var(--font-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 639px) {
  .drawing__dim { font-size: var(--t-label); padding: 1px 6px; }
  .frame > .drawing:not(.drawing--crop) { width: min(84%, calc(var(--ratio, 50%) * var(--ar, 1.5) * 0.8)); }
  .frame:not(:has(> .frame__text)):has(> .drawing:not(.drawing--crop)) { --ratio: 80%; }
}
[data-peek] > .rows { align-self: stretch; }
[data-peek-to] { cursor: default; transition: border-color var(--dur) var(--ease); }
[data-peek-to].is-on { border-bottom-color: var(--ink); }
[data-peek-to] .rows__name::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: var(--s-2); vertical-align: .1em;
  border-radius: 999px; background: var(--accent); opacity: 0; }
[data-peek-to].is-on .rows__name::after { opacity: 1; }
@media (max-width: 1023px) { [data-peek-to] .rows__name::after { display: none; } }
@media (min-width: 640px) and (max-width: 1023px) { [data-peek] .frame--portrait { --ratio: 80%; } }
.rows { border-top: 0; }
.rows > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-5); padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.rows > li:first-child { padding-top: 0; }
.rows__name { font-weight: 500; }
.rows__value { grid-column: 2; grid-row: 1; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rows > li > p { grid-column: 1; color: var(--ink); max-width: 56ch; }
.rows--spec .rows__name { font-weight: 400; color: var(--muted); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.form > :is(.field--full, .btn-row, p) { grid-column: 1 / -1; }
.field { display: grid; gap: var(--s-2); font-size: var(--t-small); font-weight: 500; }
.field :is(input, select, textarea) {
  width: 100%; height: var(--btn-h); padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1.4 var(--font-text);
}
.field textarea { height: auto; min-height: 120px; padding-block: var(--s-3); resize: vertical; }
@media (max-width: 639px) { .form { grid-template-columns: minmax(0, 1fr); } }
.actionbar { display: none; }
@media (max-width: 639px) {
  :root:has(> body > nav.actionbar) { --bar: calc(64px + env(safe-area-inset-bottom)); }
  .actionbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    gap: var(--s-3); align-items: center; height: calc(64px + env(safe-area-inset-bottom));
    padding: var(--s-2) var(--gut) env(safe-area-inset-bottom); background: var(--bg); border-top: 1px solid var(--line);
  }
  .actionbar .btn { width: 100%; height: 48px; }
}
.ground-brand { --bg: var(--p-accent); --surface: color-mix(in oklab, var(--p-accent) 88%, var(--p-accent-ink)); --ink: var(--p-accent-ink);
  --muted: color-mix(in oklab, var(--p-accent-ink) 82%, var(--p-accent)); --card: var(--surface);
  --action: var(--p-accent-ink); --action-ink: var(--p-accent); background: var(--bg); color: var(--ink); }
.ground-brand { --line: color-mix(in oklab, var(--ink) 16%, transparent); --line-strong: color-mix(in oklab, var(--ink) 30%, transparent); }
[data-placeholder] { outline: 2px dashed #d92d20; outline-offset: 2px; }
.enter { animation: none; }
@keyframes fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  :not([data-m-loop], [data-m-loop] *), ::before, ::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
                           transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }
/* ==== tasteskill 2.5 kit: ui/cards.css ==== */
.card {
  --c-r: 20px;
  --c-pad: 28px;
  --c-gap: 8px;
  --c-border: color-mix(in oklab, var(--ink) 8%, transparent);
  --c-text: color-mix(in oklab, var(--ink) 84%, var(--card));
  --c-hi: oklch(from var(--card) 1 0 0 / clamp(0, calc(0.09 - l * 0.09), 0.07));
  --c-sh: oklch(from var(--card) 0 0 0 / calc(0.07 - l * 0.04));
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: var(--c-pad); border-radius: var(--c-r);
  background: var(--card); color: var(--ink);
  border: 1px solid var(--c-border);
  box-shadow: inset 0 1px 0 var(--c-hi), 0 1px 2px var(--c-sh);
  overflow: clip;
  gap: 0;
}
@media (min-width: 1024px) { .card { --c-pad: 32px; } }
@media (max-width: 639px) { .card { --c-r: 18px; --c-pad: 20px; } }
.card > h3, .card__title {
  margin: 0; font-family: var(--font-text); font-size: 18px; line-height: 26px; font-weight: 560;
  letter-spacing: -0.012em; color: var(--ink); text-wrap: balance;
}
.card > p, .card__text {
  margin: 8px 0 0; font-size: 16px; line-height: 24px; color: var(--c-text);
  max-width: 46ch; text-wrap: pretty;
}
@media (min-width: 1024px) { .card--row > p { min-height: 2lh; } }
.card__link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; width: max-content;
  font-size: 15px; font-weight: 500; line-height: 22px; color: var(--ink); text-decoration: none;
}
.card__link svg { width: 14px; height: 14px; transition: transform 200ms cubic-bezier(.2,.7,.2,1); }
.card__link:hover svg { transform: translateX(2px); }
.panel {
  --p-r: 12px;
  display: block; padding: 0;
  --p-h: clamp(264px, 22vw + 8px, 340px);
  position: relative; isolation: isolate; overflow: clip;
  min-height: var(--p-h); flex: 1 0 auto;
  border-radius: var(--p-r) var(--p-r) 0 0;
  background: color-mix(in oklab, var(--ink) 4%, var(--card));
}
.panel:not([data-fx], .panel--device) { background: var(--ground-bg, #d9ccb7); }
:root:has(meta[name="site-kind"]:is([content="tech"], [content="software"], [content="gaming"])) .panel:not([data-fx], .panel--device) {
  background-color: var(--ground-bg, #d9ccb7);
  background-image:
    radial-gradient(70% 90% at 12% 0%, color-mix(in oklab, var(--ground-surface, #e9e0d2) 92%, white), transparent 70%),
    radial-gradient(60% 80% at 100% 100%, color-mix(in oklab, var(--ground-accent, #a8794a) 34%, var(--ground-bg, #d9ccb7)), transparent 72%),
    radial-gradient(50% 60% at 85% 10%, color-mix(in oklab, var(--ground-surface, #e9e0d2) 60%, transparent), transparent 70%);
}
.card > .panel { margin-top: 32px; margin-bottom: calc(-1 * var(--c-pad) - 1px); }
.card > .panel--device { margin-top: 24px; }
.card > :has(+ .panel) { margin-bottom: 0; }
.panel::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 7%, transparent), inset 0 1px 0 color-mix(in oklab, var(--ink) 4%, transparent);
}
.panel::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; width: auto; padding: 0;
  background: radial-gradient(ellipse 70% 62% at var(--vx, 50%) var(--vy, 62%),
    color-mix(in oklab, var(--calm, var(--card)) var(--calm-k, 34%), transparent), transparent 72%);
}
.card > .panel--inset {
  margin: 32px calc(var(--c-gap) - var(--c-pad)) calc(var(--c-gap) - var(--c-pad));
  border-radius: calc(var(--c-r) - var(--c-gap));
}
.card > .panel--flush {
  margin: 32px calc(-1 * var(--c-pad) - 1px) calc(-1 * var(--c-pad) - 1px);
  border-radius: 0;
}
.panel--flush::after { box-shadow: inset 0 1px 0 color-mix(in oklab, var(--ink) 7%, transparent); }
.card > .panel--top {
  order: -1; margin: calc(var(--c-gap) - var(--c-pad)) calc(var(--c-gap) - var(--c-pad)) 24px;
  border-radius: calc(var(--c-r) - var(--c-gap)); flex: none; min-height: 0; aspect-ratio: 1 / 1;
}
.panel--top.panel--wide { aspect-ratio: 4 / 3; }
.panel--device { display: flex; padding: 0; flex-direction: column; background: none; overflow: visible; isolation: auto; border-radius: 0; }
.panel--device::before, .panel--device::after { display: none; }
.panel__bar {
  display: flex; align-items: center; gap: 8px; height: 32px; margin-bottom: 12px; padding: 0; flex: none;
  font: 500 13px/20px var(--font-text); color: var(--ink);
}
.panel__bar .muted { color: var(--muted); font-weight: 400; }
.panel__bar .sp { flex: 1; }
.panel__status {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px;
  font: 500 var(--t-label)/1 var(--font-text); color: var(--ink);
  background: color-mix(in oklab, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 8%, transparent);
}
.panel__bar .ui-agent { width: 20px; height: 20px; --u-ink: var(--ink); --u-bg: var(--card); }
.panel__status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.panel__screen {
  position: relative; isolation: isolate; overflow: clip; flex: 1;
  margin: 0; border-radius: var(--p-r) var(--p-r) 0 0;
  background: color-mix(in oklab, var(--ink) 4%, var(--card));
}
.panel__screen::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 7%, transparent);
}
.panel__screen::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 62% at var(--vx, 50%) var(--vy, 70%),
    color-mix(in oklab, var(--calm, #000) var(--calm-k, 30%), transparent), transparent 72%);
}
.stage, .panel > .stage, .panel__screen > .stage {
  position: absolute; inset: 0; z-index: 1; max-width: none;
  --ui-font: var(--font-text); --ui-mono: var(--font-mono); --ui-radius: 12px;
  --fx-bg: var(--frag, oklch(from var(--card) clamp(calc(l + 0.05), calc((l - 0.5) * 1000), 1) calc(c * 0.5) h));
  --fx-surface: var(--card); --fx-ink: var(--ink); --fx-muted: var(--muted);
  --fx-accent: var(--accent); --fx-accent-ink: var(--accent-ink);
}
.stage > * { position: absolute; max-width: none; }
@media (min-width: 640px) { .stage > :not(.at-center) > [data-ui] { max-width: none; } }
.stage { --fade-h: 64px; }
.stage--fade-b { -webkit-mask: linear-gradient(to bottom, #000 calc(100% - var(--fade-h)), transparent calc(100% - 4px)); mask: linear-gradient(to bottom, #000 calc(100% - var(--fade-h)), transparent calc(100% - 4px)); }
.stage--fade-r { -webkit-mask: linear-gradient(to right, #000 calc(100% - 72px), transparent calc(100% - 4px)); mask: linear-gradient(to right, #000 calc(100% - 72px), transparent calc(100% - 4px)); }
.stage--fade-br {
  -webkit-mask: linear-gradient(to bottom, #000 calc(100% - var(--fade-h)), transparent calc(100% - 4px)), linear-gradient(to right, #000 calc(100% - 72px), transparent calc(100% - 4px));
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to bottom, #000 calc(100% - var(--fade-h)), transparent calc(100% - 4px)), linear-gradient(to right, #000 calc(100% - 72px), transparent calc(100% - 4px));
  mask-composite: intersect;
}
.at-corner { left: var(--ax, 32px); top: var(--ay, 32px); }
.at-right { right: var(--ax, 32px); top: var(--ay, 32px); max-width: calc(100% - 2 * var(--ax, 32px)); }
.stage > .at-right > :is([data-ui], .ui) { max-width: 100%; }
.at-rise { left: var(--ax, 18%); top: var(--ay, 48px); }
.stage > .to-edge { bottom: calc(-1 * var(--cut, 72px)); }
.stage > .to-edge > :is([data-ui], .ui) { height: 100%; }
.stage > .fit { right: var(--ax, 32px); }
.stage > .fit > :is([data-ui], .ui) { width: 100%; max-width: var(--fit-max, 100%); margin-inline: auto; }
.stage > .wide { width: max(var(--w, 680px), 100% - var(--ax, 32px) + 64px); }
.stage > .wide > :is([data-ui], .ui) { width: 100%; max-width: none; }
.at-center { left: 50%; top: 50%; translate: -50% -50%; max-width: calc(100% - 48px); }
.stage > .at-center > :is([data-ui], .ui) { max-width: 100%; }
.at-over { right: var(--bx, 24px); bottom: var(--by, 24px); z-index: 2; }
.at-over-l { left: var(--bx, 24px); bottom: var(--by, 24px); z-index: 2; }
@media (max-width: 639px) {
  .stage > :is(.at-corner, .at-right, .at-rise) { left: var(--ax-sm, 16px); right: var(--ax-sm, 16px); top: var(--ay-sm, 24px); max-width: none; }
  .stage > :is(.at-corner, .at-right, .at-rise) > :is([data-ui], .ui) { max-width: 100%; }
  .stage > .wide { width: auto; }
  .stage > .at-center { max-width: calc(100% - 2 * var(--ax-sm, 16px)); }
  .stage > :is(.at-over, .at-over-l) { left: 12px; right: 12px; bottom: 16px; }
  .stage > :is(.at-over, .at-over-l) > :is([data-ui], .ui) { width: auto; max-width: 100%; }
}
.card--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: stretch; }
.card--split > .card__body { display: flex; flex-direction: column; justify-content: center; padding: 16px 0; }
.card--split > .panel { margin: calc(var(--c-gap) - var(--c-pad)) calc(var(--c-gap) - var(--c-pad)) calc(var(--c-gap) - var(--c-pad)) 0; border-radius: calc(var(--c-r) - var(--c-gap)); min-height: 420px; }
@media (max-width: 899px) {
  .card--split { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .card--split > .card__body { padding: 0; }
  .card--split > .panel { margin: 28px calc(var(--c-gap) - var(--c-pad)) calc(var(--c-gap) - var(--c-pad)); min-height: 360px; }
}
.card__points { display: grid; gap: 0; margin: 24px 0 0; padding: 0; list-style: none; }
.card__points li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--c-border); font-size: 16px; line-height: 24px; color: var(--c-text); }
.card__points li b { color: var(--ink); font-weight: 500; }
.card__points svg { width: 18px; height: 18px; margin-top: 3px; flex: none; color: var(--ink); }
.knock { position: relative; isolation: isolate; display: inline-block; line-height: 0.92; }
.knock__text {
  position: relative; z-index: 1; display: block;
  font: 600 var(--knock-size, 128px)/0.92 var(--font-display, var(--font-text)); letter-spacing: -0.05em;
  background: var(--card); color: #fff; mix-blend-mode: darken; padding: 0.04em 0.06em 0.08em 0;
}
.knock--light .knock__text { color: #000; mix-blend-mode: lighten; }
.stat__num {
  display: block; font: 600 var(--knock-size, 128px)/0.92 var(--font-display, var(--font-text)); letter-spacing: -0.05em;
  padding: 0.04em 0.06em 0.08em 0; color: var(--ink); white-space: nowrap;
}
.stat__unit { font-size: 0.32em; letter-spacing: -0.01em; color: var(--muted); font-weight: 500; margin-left: 0.2em; }
.stat__label { font-size: 16px; line-height: 24px; color: var(--c-text); }
.stat__label b { color: var(--ink); font-weight: 500; }
.quote { margin: 0; font-family: var(--font-display, var(--font-text)); font-size: clamp(22px, 1.1vw + 12px, 28px); line-height: 1.32; letter-spacing: -0.02em; font-weight: 450; color: var(--ink); text-wrap: pretty; }
.person { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.person__logo { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; color: var(--ink); background: color-mix(in oklab, var(--ink) 5%, var(--card)); box-shadow: inset 0 0 0 1px var(--c-border); }
.person__logo svg { width: 22px; height: 22px; }
.person__name { display: block; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink); }
.person__role { display: block; font-size: 16px; line-height: 24px; color: var(--c-text); }
.result { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding-left: 40px; border-left: 1px solid var(--c-border); }
.result__fig { font: 600 clamp(64px, 3.4vw + 24px, 88px)/0.95 var(--font-display, var(--font-text)); letter-spacing: -0.05em; color: var(--ink); }
.result__cap { margin: 12px 0 0; max-width: 28ch; font-size: 16px; line-height: 24px; color: var(--c-text); }
.result__bars { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.result__bars li { display: grid; grid-template-columns: 124px minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 16px; line-height: 24px; color: var(--c-text); }
.result__bars i { display: block; height: 8px; width: var(--w); border-radius: 4px; background: color-mix(in oklab, var(--ink) 16%, var(--card)); }
.result__bars li:last-child i { background: var(--accent); }
.result__bars b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) { .result { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--c-border); } }
.plan { gap: 0; }
.plan__name { height: 24px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin-top: 20px; font: 600 44px/1 var(--font-display, var(--font-text)); letter-spacing: -0.04em; }
.plan__price small { font: 400 14px/20px var(--font-text); letter-spacing: 0; color: var(--muted); }
.plan__for { margin-top: 12px; font-size: 16px; line-height: 24px; color: var(--c-text); min-height: 2lh; }
.plan__btn {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; margin-top: 24px; border-radius: 10px;
  font: 500 14px/1 var(--font-text); text-decoration: none; color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 16%, transparent);
}
.plan__btn--primary { background: var(--ink); color: var(--card); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--card) 18%, transparent); }
.plan__list { display: grid; gap: 10px; margin: 24px 0 0; padding: 20px 0 0; list-style: none; border-top: 1px solid var(--c-border); font-size: 16px; line-height: 24px; color: var(--c-text); }
.plan__list li { display: flex; gap: 10px; }
.plan__list li::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 4px; background: var(--ink); opacity: 0.85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.4 2.8 2.8 6.2-6.4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.4 2.8 2.8 6.2-6.4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.plan.is-featured { border-color: color-mix(in oklab, var(--accent) 48%, transparent); background: var(--card); }
.plan.is-featured.is-fading > .fx-canvas { opacity: 0 !important; transition: opacity 600ms ease !important; }
.plan.is-featured .plan__badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font: 500 var(--t-label)/1 var(--font-text); color: var(--ink); background: color-mix(in oklab, var(--ink) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--ink) 10%, transparent); }
@media (max-width: 639px) {
  .stage--fade-r { -webkit-mask: none; mask: none; }
  .stage--fade-b, .stage--fade-br {
    -webkit-mask: linear-gradient(to bottom, #000 calc(100% - min(56px, var(--fade-h))), transparent calc(100% - 4px));
    mask: linear-gradient(to bottom, #000 calc(100% - min(56px, var(--fade-h))), transparent calc(100% - 4px));
  }
}
@keyframes ui-spin { to { transform: rotate(360deg); } }
/* ==== tasteskill 2.5 kit: backgrounds/backgrounds.css ==== */
:root {
  --g-hue-src: var(--p-accent);
  --g-L-lo: 0.62; --g-L-hi: 1;
  --g-hue: oklch(from var(--g-hue-src) clamp(var(--g-L-lo), l, var(--g-L-hi)) c
    calc(h + clamp(0, (h - 262) * 1000, 1) * clamp(0, (338 - h) * 1000, 1)
      * (250 + clamp(0, (h - 300) * 1000, 1) * 95 - h)));
  --g-hs: calc(30 - 60 * clamp(0, (h - 40) * 1000, 1) * clamp(0, (330 - h) * 1000, 1));
  --g-hue-b: oklch(from var(--g-hue) l c calc(h + var(--g-hs)));
  --g-pool: oklch(from var(--g-hue) 0.8 calc(c * 0.6) h);
  --g-hue-2: var(--ground-bg, #d9ccb7);
  --g-hue-t: oklch(from var(--g-hue-2) clamp(var(--g-L-lo), l, var(--g-L-hi)) c h);
  --g-acc: oklch(from var(--p-accent) 0.7 c calc(h + clamp(0, (h - 262) * 1000, 1) * clamp(0, (338 - h) * 1000, 1)
    * (250 + clamp(0, (h - 300) * 1000, 1) * 95 - h)));
  --g-away: oklab(from var(--p-ink) calc(1 - round(l)) 0 0);
  --g-k: 1; --g-kl: 1; --g-kd: 1; --g-kp: 1;
  --g-dark-bg: var(--p-inv-bg);          --g-dark-surface: var(--p-inv-surface);
  --g-dark-ink: var(--p-inv-ink);        --g-dark-muted: var(--p-inv-muted);
  --g-dark-accent: var(--p-inv-accent);  --g-dark-accent-ink: var(--p-inv-accent-ink);
  --g-dark-action: var(--p-inv-action);  --g-dark-action-ink: var(--p-inv-action-ink);
  --g-light-bg: var(--p-bg);             --g-light-ink: var(--p-ink);        --g-light-muted: var(--p-muted);
  --g-light-action: var(--p-action);     --g-light-action-ink: var(--p-action-ink);
  --g-light-accent: var(--p-accent);     --g-light-accent-ink: var(--p-accent-ink);
  --g-card: var(--p-bg);
  --g-grain: var(--g-noise-mul); --g-grain-mode: multiply;
  --g-cover: color-mix(in oklab, var(--bg) calc(100% - 100% * var(--g-k)), transparent);
  --g-cover-d: color-mix(in oklab, var(--bg) calc(100% - 100% * var(--g-kd)), transparent);
  --g-fade: 120px;
  --g-edge: 160px;
  --g-noise-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.6' intercept='.2'/%3E%3CfeFuncG type='linear' slope='0.6' intercept='.2'/%3E%3CfeFuncB type='linear' slope='0.6' intercept='.2'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --g-noise-mul: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.26' intercept='.84'/%3E%3CfeFuncG type='linear' slope='.26' intercept='.84'/%3E%3CfeFuncB type='linear' slope='.26' intercept='.84'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --g-noise-scr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.17' intercept='-.05'/%3E%3CfeFuncG type='linear' slope='.17' intercept='-.05'/%3E%3CfeFuncB type='linear' slope='.17' intercept='-.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-mode="dark"] {
  --g-L-lo: 0; --g-L-hi: 0.55;
  --g-dark-bg: var(--p-bg);              --g-dark-surface: var(--p-surface);
  --g-dark-ink: var(--p-ink);            --g-dark-muted: var(--p-muted);
  --g-dark-accent: var(--p-accent);      --g-dark-accent-ink: var(--p-accent-ink);
  --g-dark-action: var(--p-action);      --g-dark-action-ink: var(--p-action-ink);
  --g-light-bg: var(--p-inv-bg);         --g-light-ink: var(--p-inv-ink);    --g-light-muted: var(--p-inv-muted);
  --g-light-action: var(--p-inv-action); --g-light-action-ink: var(--p-inv-action-ink);
  --g-light-accent: var(--p-inv-accent); --g-light-accent-ink: var(--p-inv-accent-ink);
  --g-card: var(--p-surface);
  --g-grain: var(--g-noise-scr); --g-grain-mode: screen;
}
html[data-tint="away"][data-mode="light"] { --g-grain: var(--g-noise-scr); --g-grain-mode: screen; }
html[data-tint="away"][data-mode="dark"] { --g-grain: var(--g-noise-mul); --g-grain-mode: multiply; }
html[data-tint="away"] { --g-hue-src: color-mix(in oklab, var(--p-bg) 58%, var(--g-away)); --g-hue-2: color-mix(in oklab, color-mix(in oklab, var(--p-bg) 66%, var(--g-away)) 90%, var(--p-accent)); }
.bg-mist, .bg-halo, .bg-grain, .bg-dusk, .bg-ruled, .bg-dots, .bg-arcs,
.bg-band, .bg-field, .bg-stage, .bg-photo, .bg-horizon, .bg-deep, .bg-liquid {
  position: relative; isolation: isolate; overflow: clip;
  --bg: var(--p-bg); --surface: var(--p-surface); --ink: var(--p-ink);
  --muted: color-mix(in oklab, var(--p-ink) 60%, var(--p-muted));
  --accent: var(--p-accent); --accent-ink: var(--p-accent-ink);
  --action: var(--p-action); --action-ink: var(--p-action-ink);
  --card: var(--g-card);
  --line: color-mix(in oklab, var(--ink) 11%, transparent);
  --line-strong: color-mix(in oklab, var(--ink) 20%, transparent);
  --fx-bg: var(--bg); --fx-surface: var(--surface); --fx-ink: var(--ink); --fx-muted: var(--muted);
  --fx-accent: var(--accent); --fx-accent-ink: var(--accent-ink);
  --ui-font: var(--font-text); --ui-mono: var(--font-mono); --ui-radius: var(--r-md);
  background-color: var(--bg); color: var(--ink);
}
.bg-paper, .bg-topglow { position: relative; isolation: isolate; }
.bg-paper { background-color: var(--bg); }
:is(.bg-mist, .bg-halo, .bg-ruled, .bg-dots, .bg-arcs, .bg-liquid) { background-color: transparent; }
:is(.bg-mist, .bg-halo, .bg-ruled, .bg-dots, .bg-arcs)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--g-fade), #000 calc(100% - var(--g-fade)), transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 var(--g-fade), #000 calc(100% - var(--g-fade)), transparent);
}
.bg-horizon, .bg-deep, .bg-photo {
  --bg: color-mix(in oklab, var(--g-dark-bg) 80%, black);
  --surface: color-mix(in oklab, var(--g-dark-surface) 80%, black);
  --ink: var(--g-dark-ink);
  --muted: color-mix(in oklab, var(--g-dark-ink) 60%, var(--g-dark-muted));
  --accent: var(--g-dark-accent); --accent-ink: var(--g-dark-accent-ink);
  --action: var(--g-dark-action); --action-ink: var(--g-dark-action-ink);
  --card: color-mix(in oklab, var(--bg) 88%, var(--ink));
  --lit: color-mix(in oklab, color-mix(in oklab, var(--bg) 55%, var(--g-hue)) 68%, var(--ink));
}
.bg-band, .bg-field {
  --bg: var(--tone, color-mix(in oklab, var(--ground-bg) 55%, var(--ground-surface)));
  --surface: var(--ground-surface);
  --ink: var(--tone-ink, color-mix(in oklab, var(--ground-ink) 85%, black));
  --muted: color-mix(in oklab, var(--ink) 60%, var(--ground-muted));
  --accent: var(--ground-accent); --accent-ink: var(--ground-surface);
  --action: var(--ink); --action-ink: var(--bg);
  --card: color-mix(in oklab, var(--ground-surface) 70%, white);
  --t-b: oklch(from var(--bg) l clamp(0, c * 1.6 + 0.022, 0.075) calc(h + var(--g-hs)));
  --t-c: oklch(from var(--bg) calc(l - 0.032) calc(c * 1.3 + 0.012) h);
}
.bg-inset, html[data-mode="dark"] :is(.bg-band, .bg-field):not(.bg-bleed) { width: min(calc(100% - 2 * var(--pad)), var(--container)); margin-inline: auto; margin-block: var(--s-5); border-radius: var(--r-lg); }
.section:is(.bg-band, .bg-field, .bg-grain, .bg-horizon, .bg-deep, .bg-photo):not(.section--hero, .section--flush-top, .section--rule) { padding-block: calc(var(--section-band) * 1.25); }
.section:is(.bg-mist, .bg-halo, .bg-ruled, .bg-dots, .bg-arcs, .bg-liquid):not(.section--hero, .section--flush-top, .section--rule) { padding-block: calc(var(--section) * 1.5); }
.section--hero:is(.bg-band, .bg-field, .bg-grain, .bg-horizon, .bg-deep, .bg-photo) { padding-bottom: calc(var(--section-band) * 1.25); }
.section--hero:is(.bg-mist, .bg-halo, .bg-ruled, .bg-dots, .bg-arcs, .bg-liquid) { padding-bottom: calc(var(--section) * 1.5); }
.section:is(.bg-band, .bg-field, .bg-grain, .bg-dusk, .bg-horizon, .bg-deep):not(.section--hero) { min-height: var(--g-screen, min(88svh, 860px)); display: grid; align-content: center; }
.section:is(.bg-mist, .bg-halo, .bg-ruled, .bg-dots, .bg-liquid):not(.section--hero) { min-height: var(--g-screen, min(76svh, 760px)); display: grid; align-content: center; }
@media (max-width: 767px) {
  .section:is(.bg-band, .bg-field, .bg-grain, .bg-dusk, .bg-horizon, .bg-deep, .bg-mist, .bg-halo, .bg-ruled, .bg-dots, .bg-liquid):not(.section--hero) { min-height: var(--g-screen, 0px); }
}
main > section.section:is(.bg-band, .bg-field, .bg-grain, .bg-deep, .bg-photo):not(.section--hero):last-of-type { padding-bottom: calc(var(--section-band) * 1.25) !important; }
main > section.section:is(.bg-mist, .bg-halo, .bg-ruled, .bg-dots, .bg-arcs, .bg-liquid):not(.section--hero):last-of-type { padding-bottom: calc(var(--section) * 1.5) !important; }
main > section.section.bg-horizon:last-of-type { padding-bottom: calc(var(--section-band) * 1.25 + 150px) !important; }
.bg-mist::before {
  background:
    radial-gradient(54% 70% at 4% 6%, color-mix(in oklab, var(--g-hue) calc(42% * var(--g-k)), transparent), transparent),
    radial-gradient(46% 62% at 98% 16%, color-mix(in oklab, var(--g-hue-t) calc(48% * var(--g-k)), transparent), transparent),
    radial-gradient(64% 64% at 66% 116%, color-mix(in oklab, var(--g-hue) calc(24% * var(--g-k)), transparent), transparent),
    radial-gradient(34% 46% at 22% 104%, color-mix(in oklab, var(--g-hue-b) calc(18% * var(--g-k)), transparent), transparent);
}
.bg-halo { --halo-x: 50%; --halo-y: 38%; }
.bg-halo::before {
  background:
    radial-gradient(34% 40% at var(--halo-x) var(--halo-y), color-mix(in oklab, var(--g-hue) calc(30% * var(--g-k)), transparent), transparent),
    radial-gradient(70% 76% at var(--halo-x) var(--halo-y), color-mix(in oklab, var(--g-hue) calc(15% * var(--g-k)), transparent), transparent),
    radial-gradient(30% 34% at calc(var(--halo-x) + 18%) calc(var(--halo-y) + 16%), color-mix(in oklab, var(--g-hue-t) calc(32% * var(--g-k)), transparent), transparent);
}
.bg-grain {
  --bg: color-mix(in oklab, var(--p-bg) calc(100% - 11% * var(--g-k)), var(--g-hue));
  --surface: color-mix(in oklab, var(--p-surface) calc(100% - 11% * var(--g-k)), var(--g-hue));
  background-image:
    radial-gradient(90% 100% at 0% 0%, color-mix(in oklab, var(--p-bg) 74%, transparent), transparent 70%),
    radial-gradient(54% 80% at 100% 0%, color-mix(in oklab, var(--g-hue-b) calc(20% * var(--g-k)), transparent), transparent 72%),
    radial-gradient(80% 90% at 100% 100%, color-mix(in oklab, var(--g-hue) calc(26% * var(--g-k)), transparent), transparent 70%),
    radial-gradient(46% 70% at 0% 100%, color-mix(in oklab, var(--g-hue-b) calc(12% * var(--g-k)), transparent), transparent 72%),
    linear-gradient(var(--g-cover), var(--g-cover)),
    var(--g-grain);
  background-blend-mode: normal, normal, normal, normal, normal, var(--g-grain-mode);
}
.bg-paper {
  overflow: visible;
  background-image:
    radial-gradient(120% 60vh at 50% 0, color-mix(in oklab, var(--g-hue) calc(9% * var(--g-kp)), transparent), transparent),
    radial-gradient(60% 50vh at 100% 0, color-mix(in oklab, var(--g-hue-b) calc(6% * var(--g-kp)), transparent), transparent),
    linear-gradient(to bottom, transparent 70%, color-mix(in oklab, var(--g-hue) calc(6% * var(--g-kp)), transparent)),
    linear-gradient(color-mix(in oklab, var(--bg) calc(100% - 28% * var(--g-kp)), transparent), color-mix(in oklab, var(--bg) calc(100% - 28% * var(--g-kp)), transparent)),
    var(--g-grain);
  background-blend-mode: normal, normal, normal, normal, var(--g-grain-mode);
}
.bg-dusk {
  --g-from: transparent; --g-to: color-mix(in oklab, var(--p-bg) calc(100% - 15% * var(--g-k)), var(--g-hue)); --g-next: transparent;
  --bg: var(--g-to);
  --surface: color-mix(in oklab, var(--p-surface) calc(100% - 15% * var(--g-k)), var(--g-hue));
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 100% var(--g-edge), 100% var(--g-edge), 100% calc(100% - 2 * var(--g-edge) + 2px);
  background-position: top, bottom, center;
  background-image:
    linear-gradient(to bottom,
      var(--g-from), color-mix(in oklab, var(--g-to) 4%, var(--g-from)) 12.5%, color-mix(in oklab, var(--g-to) 16%, var(--g-from)) 25%,
      color-mix(in oklab, var(--g-to) 32%, var(--g-from)) 37.5%, color-mix(in oklab, var(--g-to) 50%, var(--g-from)) 50%,
      color-mix(in oklab, var(--g-to) 68%, var(--g-from)) 62.5%, color-mix(in oklab, var(--g-to) 84%, var(--g-from)) 75%,
      color-mix(in oklab, var(--g-to) 96%, var(--g-from)) 87.5%, var(--g-to)),
    linear-gradient(to top,
      var(--g-next), color-mix(in oklab, var(--g-to) 4%, var(--g-next)) 12.5%, color-mix(in oklab, var(--g-to) 16%, var(--g-next)) 25%,
      color-mix(in oklab, var(--g-to) 32%, var(--g-next)) 37.5%, color-mix(in oklab, var(--g-to) 50%, var(--g-next)) 50%,
      color-mix(in oklab, var(--g-to) 68%, var(--g-next)) 62.5%, color-mix(in oklab, var(--g-to) 84%, var(--g-next)) 75%,
      color-mix(in oklab, var(--g-to) 96%, var(--g-next)) 87.5%, var(--g-to)),
    linear-gradient(var(--g-to), var(--g-to));
}
.section.bg-dusk:not(.section--hero) { padding-block: calc(var(--section) + var(--g-edge) * .5); }
.bg-topglow { overflow: visible; }
.bg-topglow::before {
  content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: min(100%, 720px); pointer-events: none;
  background:
    linear-gradient(90deg, transparent, color-mix(in oklab, var(--g-hue) calc(60% * var(--g-kp)), transparent) 50%, transparent) 50% var(--nav-h, 64px) / 62% 1px no-repeat,
    radial-gradient(62% 470px at 50% var(--nav-h, 64px), color-mix(in oklab, var(--g-hue) calc(27% * var(--g-kp)), transparent), transparent),
    radial-gradient(42% 380px at 86% calc(var(--nav-h, 64px) + 60px), color-mix(in oklab, var(--g-hue-b) calc(18% * var(--g-kp)), transparent), transparent),
    radial-gradient(120% 300px at 50% var(--nav-h, 64px), color-mix(in oklab, var(--g-hue) calc(12% * var(--g-kp)), transparent), transparent);
}
.bg-ruled::before {
  background: radial-gradient(50% 44% at 50% 0%, color-mix(in oklab, var(--g-hue) calc(20% * var(--g-k)), transparent), transparent);
}
.bg-ruled::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; pointer-events: none; box-sizing: border-box;
  --rule: color-mix(in oklab, var(--ink) calc(8% * var(--g-kl)), transparent);
  --cell: 72px;
  left: max(var(--pad), calc((100% - var(--container)) / 2)); right: max(var(--pad), calc((100% - var(--container)) / 2));
  border-right: 1px solid var(--rule);
  background:
    linear-gradient(90deg, var(--rule) 1px, transparent 1px) 0 0 / var(--cell) var(--cell) space repeat,
    linear-gradient(var(--rule) 1px, transparent 1px) 0 0 / var(--cell) var(--cell) repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--g-fade), #000 calc(100% - var(--g-fade)), transparent), radial-gradient(ellipse 120% 90% at 50% 40%, #000 30%, transparent 92%), radial-gradient(ellipse 46% 34% at 50% 38%, transparent 40%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent, #000 var(--g-fade), #000 calc(100% - var(--g-fade)), transparent), radial-gradient(ellipse 120% 90% at 50% 40%, #000 30%, transparent 92%), radial-gradient(ellipse 46% 34% at 50% 38%, transparent 40%, #000 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
@media (max-width: 767px) { .bg-ruled::after { --cell: 48px; } }
.bg-dots::before {
  background:
    radial-gradient(34% 46% at 6% 34%, color-mix(in oklab, var(--g-hue) calc(16% * var(--g-k)), transparent), transparent),
    radial-gradient(30% 40% at 96% 70%, color-mix(in oklab, var(--g-hue-t) calc(24% * var(--g-k)), transparent), transparent),
    radial-gradient(circle at 11px 11px, color-mix(in oklab, var(--ink) calc(26% * var(--g-kl)), transparent) 1.15px, transparent 1.9px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--g-fade), #000 calc(100% - var(--g-fade)), transparent), radial-gradient(ellipse 58% 70% at 50% 40%, transparent 24%, #000 78%);
          mask-image: linear-gradient(to bottom, transparent, #000 var(--g-fade), #000 calc(100% - var(--g-fade)), transparent), radial-gradient(ellipse 58% 70% at 50% 40%, transparent 24%, #000 78%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.section.bg-arcs { min-height: clamp(420px, 36vw, 540px); display: grid; align-content: center; }
.bg-arcs::before {
  background:
    radial-gradient(56% 56% at 50% 100%, color-mix(in oklab, var(--g-hue) calc(22% * var(--g-k)), transparent), transparent),
    radial-gradient(30% 40% at 78% 100%, color-mix(in oklab, var(--g-hue-t) calc(24% * var(--g-k)), transparent), transparent),
    repeating-radial-gradient(circle at 50% 140%, transparent 0 79px, color-mix(in oklab, var(--ink) calc(22% * var(--g-kl)), transparent) 79px 80px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--g-fade), #000 calc(100% - var(--g-fade)), transparent), radial-gradient(ellipse 84% 94% at 50% 100%, #000 30%, transparent 82%);
          mask-image: linear-gradient(to bottom, transparent, #000 var(--g-fade), #000 calc(100% - var(--g-fade)), transparent), radial-gradient(ellipse 84% 94% at 50% 100%, #000 30%, transparent 82%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.bg-band {
  background-image:
    var(--g-noise-soft),
    radial-gradient(66% 120% at 0% 0%, color-mix(in oklab, var(--bg) 42%, var(--g-hi, white)), transparent 72%),
    radial-gradient(52% 96% at 100% 0%, color-mix(in oklab, var(--t-b) 62%, transparent), transparent 76%),
    radial-gradient(64% 104% at 100% 100%, color-mix(in oklab, var(--t-c) 70%, transparent), transparent 78%);
  background-blend-mode: soft-light, normal, normal, normal;
}
.bg-tint {
  --tone: oklch(from var(--g-hue) 0.93 clamp(0.035, c * 0.32, 0.075) h);
  --tone-ink: color-mix(in oklab, var(--g-light-ink) 58%, black);
  --accent: var(--g-light-accent); --accent-ink: var(--g-light-accent-ink);
  --surface: color-mix(in oklab, var(--tone) 60%, white);
  --card: color-mix(in oklab, var(--g-light-bg) 80%, white);
}
html[data-mode="dark"] .bg-tint {
  --tone: oklch(from var(--g-hue) 0.24 clamp(0.04, c * 0.42, 0.09) h);
  --tone-ink: color-mix(in oklab, var(--p-ink) 92%, white);
  --muted: color-mix(in oklab, var(--tone-ink) 82%, var(--tone));
  --accent: var(--p-accent); --accent-ink: var(--p-accent-ink);
  --surface: color-mix(in oklab, var(--tone) 80%, white);
  --card: color-mix(in oklab, var(--tone) 86%, black);
  --action: var(--tone-ink); --action-ink: var(--tone);
  --g-hi: color-mix(in oklab, var(--tone) 88%, white);
}
.bg-field {
  background-image:
    var(--g-noise-soft),
    linear-gradient(112deg, transparent 38%, color-mix(in oklab, var(--g-hi, white) 26%, transparent) 50%, transparent 62%),
    radial-gradient(58% 86% at 8% 0%, color-mix(in oklab, var(--g-hi, white) 58%, transparent), transparent),
    radial-gradient(54% 80% at 82% 6%, color-mix(in oklab, var(--t-b) 80%, transparent), transparent),
    radial-gradient(60% 96% at 100% 100%, color-mix(in oklab, var(--t-c) 76%, transparent), transparent),
    radial-gradient(40% 60% at 0% 100%, color-mix(in oklab, var(--t-b) 50%, transparent), transparent);
  background-blend-mode: soft-light, normal, normal, normal, normal, normal;
}
.bg-stage {
  --st-src: var(--g-hue);
  --st-1: oklch(from var(--st-src) calc(0.64 + 0.12 * clamp(0, 1 - max(h - 90, 90 - h) / 45, 1)) clamp(0.07, c * 0.8, 0.14) calc(h - 8 * clamp(0, 1 - max(h - 90, 90 - h) / 45, 1)));
  --st-2: oklch(from var(--st-src) 0.8 clamp(0.05, c * 0.6, 0.1) calc(h + var(--g-hs)));
  --st-3: oklch(from var(--st-src) 0.95 0.035 h);
  --st-4: oklch(from var(--st-src) calc(0.44 + 0.1 * clamp(0, 1 - max(h - 90, 90 - h) / 45, 1)) clamp(0.05, c * 0.7, 0.12) calc(h - 24 * clamp(0, 1 - max(h - 90, 90 - h) / 45, 1)));
  --stage-pad: clamp(20px, 4.5vw, 64px);
  display: grid; place-items: center; padding: var(--stage-pad); border-radius: var(--r-lg);
  background-color: var(--st-1);
  background-image:
    var(--g-noise-soft),
    radial-gradient(58% 78% at 10% 4%, color-mix(in oklab, var(--st-3) 90%, transparent), transparent 72%),
    radial-gradient(48% 70% at 90% 12%, color-mix(in oklab, var(--st-2) 92%, transparent), transparent 74%),
    radial-gradient(70% 90% at 78% 112%, color-mix(in oklab, var(--st-4) 94%, transparent), transparent 74%),
    radial-gradient(46% 62% at 4% 100%, color-mix(in oklab, var(--st-2) 60%, transparent), transparent 72%);
  background-blend-mode: soft-light, normal, normal, normal, normal;
}
html[data-tint="away"] .bg-stage { --st-src: var(--g-acc); }
html[data-lowchroma] .bg-stage { --st-src: oklch(from var(--ground-accent) l c h); }
.bg-stage > * { position: relative; width: min(100%, var(--stage-w, 520px)); }
.bg-photo {
  --scrim: color-mix(in oklab, var(--g-dark-bg) 70%, black);
  --scrim-a: color-mix(in oklab, var(--scrim) calc(100% - 12% * var(--g-kd)), transparent);
  --scrim-b: color-mix(in oklab, var(--scrim) calc(100% - 20% * var(--g-kd)), transparent);
  --scrim-c: color-mix(in oklab, var(--scrim) calc(100% - 24% * var(--g-kd)), transparent);
  --scrim-h: 66%; --scrim-w: 56%;
  min-height: clamp(520px, 52vw, 760px); display: grid; align-content: end;
  background: var(--g-photo, none) var(--g-photo-pos, center) / cover no-repeat, var(--scrim);
}
.bg-photo__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--g-photo-pos, 50% 50%); }
.bg-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, var(--scrim-a), var(--scrim-b) calc(var(--scrim-h) * .45), var(--scrim-c) var(--scrim-h), transparent calc(var(--scrim-h) + 26%));
}
.bg-photo--left { align-content: center; }
.bg-photo--left::before { background: linear-gradient(to right, var(--scrim-a), var(--scrim-b) calc(var(--scrim-w) * .64), var(--scrim-c) var(--scrim-w), transparent calc(var(--scrim-w) + 26%)); }
.bg-photo--light {
  --scrim: var(--g-light-bg);
  --scrim-a: color-mix(in oklab, var(--scrim) 94%, transparent);
  --scrim-b: color-mix(in oklab, var(--scrim) 88%, transparent);
  --scrim-c: color-mix(in oklab, var(--scrim) 76%, transparent);
  --bg: color-mix(in oklab, var(--g-light-bg) 90%, white); --surface: var(--p-surface); --ink: var(--g-light-ink);
  --muted: color-mix(in oklab, var(--g-light-ink) 60%, var(--g-light-muted));
  --accent: var(--g-light-accent); --accent-ink: var(--g-light-accent-ink);
  --action: var(--g-light-action); --action-ink: var(--g-light-action-ink);
  --card: var(--g-light-bg);
}
@media (max-width: 767px) {
  .bg-photo { --scrim-h: 86%; min-height: 640px; background-position: var(--g-photo-pos-m, var(--g-photo-pos, center)); }
  .bg-photo__img { object-position: var(--g-photo-pos-m, var(--g-photo-pos, 50% 50%)); }
  .bg-photo--left { align-content: end; }
  .bg-photo--left::before { background: linear-gradient(to top, var(--scrim-a), var(--scrim-b) calc(var(--scrim-h) * .45), var(--scrim-c) var(--scrim-h), transparent calc(var(--scrim-h) + 12%)); }
}
.section.bg-horizon:not(.section--flush-top, .section--rule) { padding-bottom: calc(var(--section-band) * 1.25 + 150px); }
.bg-horizon::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 640px; pointer-events: none;
  background:
    radial-gradient(26% 74px at 50% calc(100% - 140px), color-mix(in oklab, var(--lit) calc(70% * var(--g-kd)), transparent), transparent),
    radial-gradient(54% 76% at 50% 100%, color-mix(in oklab, var(--lit) calc(44% * var(--g-kd)), transparent), transparent 74%),
    radial-gradient(120% 84% at 50% 100%, color-mix(in oklab, var(--g-hue) calc(22% * var(--g-kd)), transparent), transparent 76%);
}
.bg-horizon::after {
  content: ""; position: absolute; z-index: -1; left: 50%; translate: -50% 0; width: max(170%, 1200px); bottom: -560px; height: 700px; pointer-events: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: radial-gradient(60% 100% at 50% 0, color-mix(in oklab, var(--lit) 34%, var(--bg)), var(--bg) 72%);
  border-top: 2px solid color-mix(in oklab, var(--lit) 90%, white);
  box-shadow: 0 -12px 56px -8px color-mix(in oklab, var(--lit) 62%, transparent), 0 -1px 16px color-mix(in oklab, var(--lit) 70%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent 5%, #000 36%, #000 64%, transparent 95%);
          mask-image: linear-gradient(90deg, transparent 5%, #000 36%, #000 64%, transparent 95%);
}
.bg-deep {
  --bg: color-mix(in oklab, var(--g-dark-bg) 70%, black);
  background-image:
    radial-gradient(64% 70% at 50% 0%, color-mix(in oklab, var(--g-hue) calc(21% * var(--g-kd)), transparent), transparent 76%),
    radial-gradient(48% 60% at 100% 100%, color-mix(in oklab, var(--g-hue-t) calc(18% * var(--g-kd)), transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in oklab, var(--g-dark-surface) calc(40% * var(--g-kd)), var(--bg)), var(--bg) 70%),
    linear-gradient(var(--g-cover-d), var(--g-cover-d)),
    var(--g-noise-scr);
  background-blend-mode: normal, normal, normal, normal, screen;
}
.bg-deep::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 6%, color-mix(in oklab, var(--ink) calc(28% * var(--g-kd)), transparent) 50%, transparent 94%);
}
.bg-liquid::before, .bg-liquid::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; top: 0; bottom: 0; left: -30%; right: -30%; will-change: transform;
}
.bg-liquid::before {
  background:
    radial-gradient(ellipse 30% 36% at 30% 44%, color-mix(in oklab, var(--g-hue) calc(40% * var(--g-k)), transparent), transparent),
    radial-gradient(ellipse 22% 24% at 54% 74%, color-mix(in oklab, var(--g-hue-t) calc(44% * var(--g-k)), transparent), transparent);
  animation: g-liq-a 26s ease-in-out infinite alternate;
}
.bg-liquid::after {
  background:
    radial-gradient(ellipse 28% 30% at 68% 38%, color-mix(in oklab, var(--g-hue-b) calc(32% * var(--g-k)), transparent), transparent),
    radial-gradient(ellipse 20% 20% at 44% 26%, color-mix(in oklab, var(--g-hue-t) calc(36% * var(--g-k)), transparent), transparent);
  animation: g-liq-b 34s ease-in-out infinite alternate;
}
@keyframes g-liq-a { from { transform: translate3d(-7%, 0, 0) skewX(-7deg) scaleY(.94); } to { transform: translate3d(8%, 0, 0) skewX(6deg) scaleY(1.05); } }
@keyframes g-liq-b { from { transform: translate3d(8%, 0, 0) skewX(6deg) scaleY(1.04); } to { transform: translate3d(-9%, 0, 0) skewX(-6deg) scaleY(.92); } }
.bg-liquid.is-off::before, .bg-liquid.is-off::after, .bg-liquid.is-held::before, .bg-liquid.is-held::after { animation-play-state: paused; }
.bg-liquid > .loop-pause { right: max(var(--pad), calc((100% - var(--container)) / 2)); bottom: 16px; }
@media (prefers-reduced-motion: reduce) {
  .bg-liquid::before, .bg-liquid::after { animation: none; }
}
@media print { .bg-liquid::before, .bg-liquid::after { display: none; } }
/* ==== tasteskill 2.5 kit: layout/layout.css ==== */
:root {
  --ly-nav: var(--nav, 72px);
  --ly-screen: calc(100svh - var(--ly-nav));
  --ly-pad: var(--padt, 120px);
  --ly-hero-pad: var(--hgap, 48px);
  --ly-head-gap: var(--head-gap, 48px);
  --ly-fit: calc(100svh - var(--padt, 120px) - var(--padb, 72px) - var(--bar, 0px));
  --ly-hero-h: calc(100svh - var(--nav, 72px) - var(--hgap, 48px) - var(--hpadb, 64px) - var(--bar, 0px));
  --ly-scale: 1;
  --ly-h1:       calc(var(--ly-scale) * clamp(40px, 3.048vw + 28.11px, 72px));
  --ly-h1-xl:    calc(var(--ly-scale) * clamp(44px, 3.429vw + 30.63px, 80px));
  --ly-h1-col:   calc(var(--ly-scale) * clamp(40px, 2.286vw + 31.09px, 64px));
  --ly-h1-mega:  calc(var(--ly-scale) * clamp(56px, 9.524vw + 18.86px, 156px));
  --ly-h1-word:  calc(var(--ly-scale) * clamp(54px, 8.571vw + 20.57px, 144px));
  --ly-h1-quiet: calc(var(--ly-scale) * clamp(34px, 2.095vw + 25.83px, 56px));
  --ly-h1-side:  calc(var(--ly-scale) * clamp(40px, 1.143vw + 35.54px, 52px));
  --ly-lead: clamp(17px, .286vw + 15.89px, 20px);
}
h1, h2, h3, .ly-display { font-stretch: var(--display-stretch, 100%); font-variation-settings: var(--display-axes, normal); }
.card h3, .card h4, .tile h3 { font-stretch: 100%; font-variation-settings: normal; }
main > .section .section-head { margin-bottom: var(--ly-head-gap); }
.fit-screen { height: clamp(280px, calc(var(--ly-fit) - var(--ly-head, 160px) - var(--ly-head-gap)), 720px); }
@media (max-width: 1023px) { .fit-screen { height: auto; } }
.hero { position: relative; isolation: isolate; }
.hero > .wrap > .hero-text { height: 100%; }
.hero__in { display: flex; flex-direction: column; }
.hero h1 { font-size: var(--ly-h1); line-height: 1.02; letter-spacing: var(--display-tracking-xl, var(--display-tracking)); text-wrap: balance; }
.hero .hero__lead { font-size: var(--ly-lead); line-height: 1.5; max-width: 42ch; text-wrap: pretty; color: var(--ink); }
.hero .hero__lead .muted, .hero__lead.muted { color: var(--muted); }
.hero__kicker { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-small); color: var(--muted); }
.hero__kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.hero__text > * + * { margin-top: var(--s-5); }
.hero__text > .btn-row { margin-top: var(--s-6); }
.hero__text > .hero__kicker + h1 { margin-top: var(--s-4); }
.hero__grid { align-items: center; align-content: center; }
.hero-text.hero__grid { grid-template-rows: minmax(0, 1fr); align-content: stretch; }
.hero__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-5); align-items: end; }
.hero__head > :first-child { grid-column: 1 / span 7; }
.hero__head > :first-child > * + * { margin-top: var(--s-4); }
.hero__head > .btn-row { grid-column: 9 / -1; justify-content: flex-end; }
.hero__foot { margin-top: var(--s-6); align-items: end; }
.hero__foot > .btn-row { justify-content: flex-end; }
.hero__fill { flex: 1 1 auto; position: relative; min-height: 0; }
.hero__media { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); }
.hero__media > img, .hero__media > video, .hero__media > picture > img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--ly-pos, 50% 50%);
}
@media (max-width: 1023px) {
  .hero__head > :first-child, .hero__head > .btn-row { grid-column: 1 / -1; justify-content: flex-start; }
  .hero__foot > .btn-row { justify-content: flex-start; }
  .hero__media > img { object-position: var(--ly-pos-phone, var(--ly-pos, 50% 50%)); }
}
.hero__facts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-5);
               border-top: 1px solid var(--line); padding-top: var(--s-5); margin: 0; }
.hero__facts > div { grid-column: auto / span 3; display: grid; gap: var(--s-1); }
.hero__facts dt { font-size: var(--t-small); color: var(--muted); }
.hero__facts dd { margin: 0; font-size: var(--t-body); font-weight: 500; }
@media (max-width: 639px) { .hero__facts > div { grid-column: auto / span 6; } }
.hero__dock { margin-top: auto; padding-top: var(--s-7); }
.ly-float {
  position: absolute; z-index: 2; left: var(--s-5); bottom: var(--s-5); width: min(300px, calc(100% - 2 * var(--s-5)));
  display: grid; gap: var(--s-1); padding: var(--s-4); border-radius: var(--r-md);
  background: var(--bg); color: var(--ink); border: 1px solid var(--line);
}
.ly-float--tr { left: auto; bottom: auto; right: var(--s-5); top: var(--s-5); }
.ly-float__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); font-size: var(--t-small); color: var(--muted); }
.ly-float__title { font-weight: 500; font-size: var(--t-body); }
.ly-live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-label); color: var(--ink); }
.ly-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 50%, transparent); animation: ly-pulse 2.4s ease-out infinite; }
@keyframes ly-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
:root:is([data-type="place"], :has(meta[name="site-kind"][content="other"])) .ly-live::before { animation: none; }
.hero--split .hero__media { height: 100%; min-height: 0; }
.hero--split .hero__grid { align-items: stretch; }
.hero--split .hero__text { align-self: start; }
.hero--collage .hero__text { align-self: start; }
:is(.hero--split, .hero--collage) .hero__text > h1:first-child { text-box: trim-start cap alphabetic; }
@media (max-width: 1023px) {
  .hero--split .hero__grid, .hero--collage .hero__grid { display: flex; flex-direction: column; align-items: stretch; }
  .hero--split .hero__media { height: auto; flex: 1 1 0; min-height: 240px; margin-top: var(--s-6); }
}
.hero--photo { color: var(--ink); background: #1b1b1b; }
.hero--photo > .hero__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--ly-pos, 50% 50%); }
.hero--photo[data-box="none"][data-tone="dark"] { --ink: #ffffff; --muted: #ffffff; --line: rgb(255 255 255 / .4); --line-strong: rgb(255 255 255 / .7); color: #fff; }
.hero--photo[data-box="none"][data-tone="light"] { --ink: #111111; --muted: #111111; --line: rgb(17 17 17 / .24); --line-strong: rgb(17 17 17 / .5); color: #111; }
.hero--photo:not([data-box="none"]) .hero__text {
  padding: var(--s-7); background: var(--p-bg); color: var(--p-ink); border-radius: var(--r-lg);
  --ink: var(--p-ink); --muted: var(--p-muted); --line: color-mix(in oklab, var(--p-ink) 11%, transparent); --line-strong: color-mix(in oklab, var(--p-ink) 20%, transparent);
}
.hero--photo:not([data-box="none"]) .hero__facts { display: none; }
.hero--photo > .wrap > .hero-text { display: flex; flex-direction: column; justify-content: flex-end; }
.hero--photo[data-calm="left"] > .wrap > .hero-text, .hero--photo[data-calm="right"] > .wrap > .hero-text { justify-content: center; }
.hero--photo[data-calm="top"] > .wrap > .hero-text { justify-content: flex-start; }
.hero--photo .hero__text { width: calc(50% - var(--gutter) / 2); }
@media (max-width: 1023px) { .hero--photo .hero__text { width: 100%; } }
.hero--photo[data-calm="right"] .hero__text { margin-left: auto; }
.hero--photo h1 { font-size: var(--ly-h1-xl); max-width: 14ch; }
.hero--photo .hero__facts { margin-top: var(--s-8); }
.hero--photo[data-calm="left"] > .wrap > .hero-text, .hero--photo[data-calm="right"] > .wrap > .hero-text { position: relative; }
.hero--photo[data-calm="left"] .hero__facts, .hero--photo[data-calm="right"] .hero__facts { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
.hero--photo .btn-row { --ink: var(--p-ink); --bg: var(--p-bg); --action: var(--p-action); --action-ink: var(--p-action-ink); --line-strong: color-mix(in oklab, var(--p-ink) 20%, transparent); }
html:is([data-buttons="arrow"], [data-buttons="block"]) .hero--photo[data-box="none"][data-tone="dark"] .btn--secondary { color: #fff; text-decoration-color: rgb(255 255 255 / .6); }
@media (max-width: 1023px) {
  .hero--photo, .hero--photo[data-tone] { background: var(--bg); color: var(--p-ink); --ink: var(--p-ink); --muted: var(--p-muted);
    --line: color-mix(in oklab, var(--p-ink) 11%, transparent); --line-strong: color-mix(in oklab, var(--p-ink) 20%, transparent); }
  .hero--photo { --photo: min(46svh, 56vw); }
  .hero--photo > .hero__bg { top: var(--nav); bottom: auto; height: var(--photo); object-position: var(--ly-pos-phone, var(--ly-pos, 50% 50%)); }
  .hero--photo .hero__facts { display: none; }
  .hero--photo > .wrap > .hero-text, .hero--photo[data-calm] > .wrap > .hero-text { justify-content: flex-start; }
  .hero--photo .hero__text, .hero--photo:not([data-box="none"]) .hero__text { padding: 0; background: none; border-radius: 0; }
  .hero--photo[data-calm="right"] .hero__text { margin-left: 0; }
  html:is([data-buttons="arrow"], [data-buttons="block"]) .hero--photo[data-tone="dark"] .btn--secondary { color: var(--p-ink); text-decoration-color: var(--line-strong); }
}
@media (max-width: 639px) { .hero--photo { --photo: 42svh; } }
.hero--place, :root[data-type="place"] .hero--photo { --photo: min(480px, 53svh); background: var(--bg); color: var(--ink); }
.hero--place > .hero__bg, :root[data-type="place"] .hero--photo > .hero__bg {
  position: absolute; left: 0; right: 0; top: var(--nav); bottom: auto; z-index: 0; width: 100%; height: var(--photo); max-width: none;
  object-fit: cover; object-position: var(--ly-pos, 50% 50%); border-radius: 0;
}
:is(.hero--photo, .hero--place) > picture.hero__bg { display: block; overflow: hidden; }
:is(.hero--photo, .hero--place) > picture.hero__bg > img {
  display: block; width: 100%; height: 100%; max-width: none; border-radius: 0;
  object-fit: cover; object-position: var(--ly-pos, 50% 50%);
}
@media (max-width: 1023px) {
  :is(.hero--photo, .hero--place) > picture.hero__bg > img { object-position: var(--ly-pos-phone, var(--ly-pos, 50% 50%)); }
}
:root[data-type="place"] .hero--photo, :root[data-type="place"] .hero--photo[data-tone] { --ink: var(--p-ink); --muted: var(--p-muted); color: var(--p-ink); }
:is(.hero--place, :root[data-type="place"] .hero--photo) > .wrap > .hero-text { display: block; }
:is(.hero--place, :root[data-type="place"] .hero--photo) .hero__text {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-content: start; align-items: start;
  width: 100%; margin: 0; padding: 0; background: none; border-radius: 0;
}
:is(.hero--place, :root[data-type="place"] .hero--photo) .hero__text > * { grid-column: 7 / -1; margin: 0; }
:is(.hero--place, :root[data-type="place"] .hero--photo) .hero__text > h1 {
  grid-column: 1 / span 6; grid-row: 1 / span 3; max-width: none; font-size: var(--t-h1); line-height: 1.104; text-box: trim-start cap alphabetic;
}
:is(.hero--place, :root[data-type="place"] .hero--photo) .hero__lead { font-size: var(--t-lead); line-height: 1.5; max-width: 40ch; color: var(--ink); }
:is(.hero--place, :root[data-type="place"] .hero--photo) .hero__text > .btn-row { margin-top: var(--s-5); }
:is(.hero--place, :root[data-type="place"] .hero--photo) .btn { height: 48px; }
:is(.hero--place, :root[data-type="place"] .hero--photo) .hero__facts { display: none; }
@media (max-width: 1023px) {
  .hero--place, :root[data-type="place"] .hero--photo { --photo: min(56vw, 46svh); }
  :is(.hero--place, :root[data-type="place"] .hero--photo) .hero__text { display: flex; flex-direction: column; gap: var(--s-5); }
  :is(.hero--place, :root[data-type="place"] .hero--photo) .hero__text > .btn-row { margin-top: 0; }
}
@media (min-width: 640px) and (max-width: 1023px) and (orientation: portrait) {
  .hero--place, :root[data-type="place"] .hero--photo { --photo: min(80vw, 56svh); }
}
@media (max-width: 639px) {
  .hero--place, :root[data-type="place"] .hero--photo { --photo: 75vw; }
  :is(.hero--place, :root[data-type="place"] .hero--photo) .hero__text > h1 { line-height: 1.156; }
  :is(.hero--place, :root[data-type="place"] .hero--photo) .hero__lead { font-size: 18px; line-height: 1.556; }
  :is(.hero--place, :root[data-type="place"] .hero--photo) .hero__text > .btn-row { margin-top: 0; }
}
.hero--product .hero__stage { margin-top: var(--s-7); }
.hero__stage {
  position: relative; overflow: hidden; border-radius: var(--r-lg); min-height: clamp(260px, 40svh, 400px); flex: 1 1 auto;
  background:
    radial-gradient(60% 70% at 50% 42%, color-mix(in oklab, var(--ground-surface, #e9e0d2) 90%, white), transparent 72%),
    linear-gradient(to bottom, var(--ground-bg, #d9ccb7) 0 72%, color-mix(in oklab, var(--ground-bg, #d9ccb7) 86%, black) 100%);
}
.hero__stage > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--ly-pos, 50% 50%); }
.hero__stage > img.is-cutout { object-fit: contain; padding: 5% 0 4%; }
.hero__stage > [data-print], .hero__stage > [data-scene] { position: absolute; inset: 0; }
.hero--product .hero__stage:is(:has(> [data-product]), :has(> img.is-cutout)) {
  margin-top: var(--s-6); margin-bottom: calc(var(--s-5) - var(--hpadb, 64px));
  border-radius: 0; background: none; overflow: visible;
}
.hero--product .hero__stage > [data-product] {
  position: absolute; inset: -7% 0; width: auto; height: auto; min-height: 0;
  padding: 0; border: 0; border-radius: 0; background: none; overflow: visible;
}
.hero--product .hero__stage > [data-product]::before { content: none; }
@media (min-width: 1024px) {
  .hero--product:has(.hero__stage > :is([data-product], img, picture)) .hero__head { grid-template-rows: auto auto; row-gap: var(--s-5); }
  .hero--product:has(.hero__stage > :is([data-product], img, picture)) .hero__head > :first-child { display: contents; }
  .hero--product:has(.hero__stage > :is([data-product], img, picture)) .hero__head h1 { grid-column: 1 / span 7; grid-row: 1 / span 2; align-self: end; margin: 0; }
  .hero--product:has(.hero__stage > :is([data-product], img, picture)) .hero__head .hero__lead { grid-column: 9 / -1; grid-row: 1; align-self: end; margin: 0; max-width: none; }
  .hero--product:has(.hero__stage > :is([data-product], img, picture)) .hero__head > .btn-row { grid-column: 9 / -1; grid-row: 2; justify-content: flex-start; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero--product:has(.hero__stage > :is([data-product], img, picture)) .hero__head h1 { grid-column: 1 / span 6; }
  .hero--product:has(.hero__stage > :is([data-product], img, picture)) .hero__head .hero__lead,
  .hero--product:has(.hero__stage > :is([data-product], img, picture)) .hero__head > .btn-row { grid-column: 7 / -1; }
}
.hero--product .hero__stage:has(> img:not(.is-cutout), > picture) {
  border-radius: 0; background: none; margin-inline: calc(50% - 50vw); margin-bottom: calc(0px - var(--hpadb, 64px));
}
@media (max-width: 639px) { .hero--product .hero__stage:has(> img:not(.is-cutout), > picture) { margin-bottom: 0; } }
.frame[data-product] { background: none; border: 0; padding: 0; }
.ly-spot { position: absolute; z-index: 2; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.ly-spot > button {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 0; background: var(--p-bg, #fff); color: var(--p-ink, #111); box-shadow: 0 0 0 6px rgb(255 255 255 / .28), 0 6px 18px -6px rgb(0 0 0 / .45);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ly-spot > button svg { width: 12px; height: 12px; transition: transform var(--dur) var(--ease); }
.ly-spot > button:hover, .ly-spot.is-open > button { transform: scale(1.08); box-shadow: 0 0 0 9px rgb(255 255 255 / .32), 0 6px 18px -6px rgb(0 0 0 / .45); }
.ly-spot.is-open > button svg { transform: rotate(45deg); }
.ly-spot__card {
  position: absolute; left: calc(100% + 12px); top: 50%; width: 230px; padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: var(--p-bg, #fff); color: var(--p-ink, #111); font-size: var(--t-small); line-height: 1.45;
  box-shadow: 0 16px 36px -16px rgb(0 0 0 / .45); opacity: 0; visibility: hidden; transform: translate(-6px, -50%);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.ly-spot__card strong { display: block; font-size: var(--t-body); font-weight: 500; margin-bottom: 2px; }
.ly-spot--left .ly-spot__card { left: auto; right: calc(100% + 12px); transform: translate(6px, -50%); }
.ly-spot.is-open .ly-spot__card, .ly-spot:hover .ly-spot__card, .ly-spot:focus-within .ly-spot__card { opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: 0s; }
@media (max-width: 639px) {
  .hero--product .hero__stage { margin-top: var(--s-6); flex: none; min-height: 0; aspect-ratio: 4 / 5; }
  .hero--product .hero__stage:is(:has(> [data-product]), :has(> img.is-cutout)) { flex: 1 1 auto; aspect-ratio: auto; min-height: 240px; margin-bottom: 0; }
  .ly-spot__card, .ly-spot--left .ly-spot__card { left: 50%; right: auto; top: calc(100% + 10px); width: 230px;
    transform: translate(calc(-50% + var(--dx, 0px)), -4px); }
  .ly-spot.is-open .ly-spot__card, .ly-spot:hover .ly-spot__card, .ly-spot:focus-within .ly-spot__card { transform: translate(calc(-50% + var(--dx, 0px)), 0); }
}
.hero--editorial .hero__in { justify-content: space-between; }
.hero--editorial h1 { font-size: var(--ly-h1-mega); line-height: .98; letter-spacing: var(--display-tracking-xl, -0.04em); max-width: none; margin-block: auto; padding-block: var(--s-6); text-wrap: initial; }
.hero--editorial .hero__foot { margin-top: 0; padding-top: var(--s-5); border-top: 1px solid var(--line); align-items: end; }
.ly-pic {
  display: inline-block; position: relative; overflow: hidden; vertical-align: -0.04em;
  height: .8em; width: var(--w, 1.9em); margin-inline: .04em; border-radius: 999px; background: var(--surface);
}
.ly-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--ly-pos, 50% 50%); }
.ly-pic--sq { border-radius: .16em; }
@media (max-width: 639px) { .ly-pic { --w: 1.5em; } .hero--editorial h1 { padding-block: var(--s-5); } }
.hero--collage h1 { font-size: var(--ly-h1-col); }
.hero__art {
  position: relative; overflow: hidden; height: 100%; min-height: 0;
  border-radius: var(--r-lg); background: var(--ground-bg, #d9ccb7);
  --fx-bg: var(--ground-bg); --fx-surface: var(--ground-surface); --fx-ink: var(--ground-ink); --fx-accent: var(--ground-accent);
}
.hero__art > .ly-piece { position: absolute; }
.hero__art { --ly-cut: 28px; --ly-cut-room: calc(var(--ly-cut) + 20px); }
.hero__art > .ly-piece--main { left: var(--s-8); top: var(--s-8); width: calc(100% - var(--s-8) + var(--ly-cut)); }
.hero__art .ly-cut-hide { display: none; }
@media (max-width: 1023px) {
  .hero__art { height: auto; flex: 1 1 0; min-height: 220px; margin-top: var(--s-6); }
  .hero__art > .ly-piece--main { left: var(--s-6); top: var(--s-6); width: calc(100% - var(--s-6) + var(--ly-cut)); }
}
@media (max-width: 639px) {
  .hero__art > .ly-piece--main { left: var(--s-4); top: var(--s-4); width: calc(100% - var(--s-4) + var(--ly-cut)); }
  .hero__art > .ly-piece:not(.ly-piece--main) { display: none; }
}
.hero--word, .hero--editorial { overflow-x: clip; }
.hero--word .hero__in { justify-content: center; }
.hero--word h1 { font-size: var(--ly-h1-word); line-height: .92; max-width: none; }
.hero--word .hero__foot { margin-top: var(--s-8); align-items: start; }
.hero--word .hero__foot .btn-row { margin-top: var(--s-6); }
.hero--word .hero__facts { margin-top: var(--s-8); }
.hero__facts.hero__facts--col { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-top: 0; border-top: 0; margin-top: 0; }
.hero__facts--col > div { grid-column: auto; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
                          padding-block: var(--s-3); border-top: 1px solid var(--line); }
.hero__facts--col > div:last-child { border-bottom: 1px solid var(--line); }
.hero__facts--col dd { text-align: right; }
@media (max-width: 1023px) {
  .hero--word .hero__foot > .hero__facts--col { margin-top: var(--s-7); grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
  .hero__facts--col > div { display: grid; gap: var(--s-1); justify-content: start; }
  .hero__facts--col > div:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .hero__facts--col dd { text-align: left; }
}
.ly-word { position: relative; display: inline-grid; vertical-align: bottom; overflow: clip; overflow-clip-margin: .14em; margin-bottom: -.1em; }
.ly-word > span { grid-area: 1 / 1; justify-self: start; white-space: nowrap; padding-bottom: .1em;
                  background: linear-gradient(var(--accent), var(--accent)) 0 calc(100% - .05em) / 100% max(3px, .05em) no-repeat;
                  transition: transform .6s var(--ease, ease), opacity .6s var(--ease, ease); }
.ly-word > span.is-out { transform: translateY(-105%); opacity: 0; }
.ly-word > span.is-next { transform: translateY(105%); opacity: 0; }
.ly-letters .ly-l { display: inline-block; font-weight: var(--w, inherit); font-stretch: var(--wd, inherit); transition: font-weight .32s var(--ease, ease), font-stretch .32s var(--ease, ease); }
h1.ly-locked { white-space: nowrap; text-wrap: nowrap; }
.hero--film { padding-block: var(--s-4); }
.hero--film .hero__media { flex: 1 1 auto; min-height: 520px; background: #000; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; }
.hero__over { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-6); padding: var(--s-6); }
.hero__over > :first-child {
  justify-self: start; max-width: 600px; padding: var(--s-7); border-radius: var(--r-md);
  background: var(--p-inv-bg); color: var(--p-inv-ink);
  --bg: var(--p-inv-bg); --ink: var(--p-inv-ink); --muted: var(--p-inv-muted); --action: var(--p-inv-action); --action-ink: var(--p-inv-action-ink);
  --line: color-mix(in oklab, var(--p-inv-ink) 14%, transparent); --line-strong: color-mix(in oklab, var(--p-inv-ink) 30%, transparent);
}
.hero__over h1 { max-width: 15ch; }
.hero__over .hero__lead { color: var(--p-inv-ink); margin-top: var(--s-4); }
.hero__over .btn-row { margin-top: var(--s-6); }
.hero--film .ly-play { position: relative; left: auto; bottom: auto; }
.hero--film .ly-play__label { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--p-inv-bg); color: var(--p-inv-ink); }
.ly-play__label small { display: block; margin-top: 2px; font-size: var(--t-small); color: var(--p-inv-muted); font-weight: 400; }
@media (max-width: 1023px) {
  .hero__over { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-5); }
  .hero__over > :first-child { max-width: none; justify-self: stretch; padding: var(--s-6); }
  .hero--film .ly-play { order: -1; justify-self: start; gap: var(--s-3); font-size: var(--t-body); }
  .ly-play__label small { display: none; }
}
@media (max-width: 639px) {
  .hero__over { padding: var(--s-3); }
  .hero__over > :first-child { padding: var(--s-5); }
  .hero--film .hero__media { min-height: 0; }
}
.ly-play { position: absolute; z-index: 2; left: var(--s-6); bottom: var(--s-6); display: inline-flex; align-items: center; gap: var(--s-4);
           padding: 0; border: 0; background: none; color: #fff; cursor: pointer; font: 500 var(--t-lead)/1.2 var(--font-text); text-align: left; }
.ly-play__disc { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: #111; flex: none;
                 transition: transform var(--dur) var(--ease); }
.ly-play__disc svg { width: 18px; height: 18px; margin-left: 3px; }
.ly-play:hover .ly-play__disc, .ly-play:focus-visible .ly-play__disc { transform: scale(1.06); }
@media (max-width: 639px) { .ly-play__disc { width: 52px; height: 52px; } }
.hero--statement .hero__in { justify-content: space-between; }
.hero--statement h1 { font-size: var(--ly-h1-quiet); line-height: 1.1; max-width: 21ch; }
.hero--statement .hero__lead { margin-top: var(--s-5); }
.hero--statement .btn-row { margin-top: var(--s-6); }
.hero--statement .hero__facts { margin-top: var(--s-8); }
@media (max-width: 639px) { .hero--statement .hero__facts { display: none; } }
.hero--triptych .hero__grid > :first-child { align-self: center; }
.hero--triptych h1 { font-size: var(--ly-h1-side); line-height: 1.04; }
.hero--triptych .hero__lead { font-size: var(--t-body); max-width: 30ch; margin-top: var(--s-4); }
.hero--triptych .hero__cta { display: flex; justify-content: flex-end; }
.hero--triptych .hero__cta .btn { height: 64px; padding-inline: var(--s-6); font-size: var(--t-lead); }
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero--triptych .hero__grid { grid-template-rows: 1fr auto 1fr; }
  .hero--triptych .hero__grid > :first-child { grid-column: 1 / span 4; grid-row: 1; align-self: end; }
  .hero--triptych .ly-collage { grid-column: 6 / span 7; grid-row: 1 / span 3; }
  .hero--triptych .hero__cta { grid-column: 1 / span 4; grid-row: 2; justify-content: flex-start; margin-top: var(--s-6); }
  .hero--triptych .hero__cta .btn { height: 56px; font-size: var(--t-body); }
}
.ly-collage { position: relative; height: 100%; min-height: 0; }
.ly-collage__set { position: absolute; inset: 0; transition: opacity .7s var(--ease, ease); }
.ly-collage__set:not(.is-on) { opacity: 0; pointer-events: none; }
.ly-collage:not(:has(> .ly-collage__set.is-on)) > .ly-collage__set:first-child { opacity: 1; pointer-events: auto; }
.ly-collage .ly-piece { position: absolute; overflow: hidden; border-radius: var(--r-md); background: var(--surface);
                        box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 18px 40px -18px rgb(0 0 0 / .32); }
.ly-collage .ly-piece > img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.ly-collage > button.loop-pause.loop-pause { right: calc(4% + 12px); bottom: calc(4% + 12px); }
@media (max-width: 1023px) {
  .hero--triptych .hero__cta { justify-content: stretch; } .hero--triptych .hero__cta .btn { width: 100%; height: 56px; }
  .hero--triptych .hero__grid { display: flex; flex-direction: column; align-items: stretch; }
  .hero--triptych .hero__grid > :first-child { align-self: stretch; }
  .ly-collage { height: auto; flex: 1 1 0; min-height: 300px; margin-block: var(--s-6); }
}
.hero--centred .hero__c { display: grid; justify-items: center; text-align: center; gap: var(--s-4); max-width: 880px; margin-inline: auto; }
.hero--centred h1 { max-width: 16ch; }
.hero--centred .hero__lead { max-width: 52ch; color: var(--muted); }
.hero--centred .btn-row { justify-content: center; margin-top: var(--s-3); }
.hero--centred > .wrap > .hero-text { display: flex; flex-direction: column; }
.hero--centred .hero__window { flex: 1 1 0; min-height: clamp(220px, 32svh, 340px);
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent);
  position: relative; overflow: hidden; margin-top: var(--s-6);
  border-radius: var(--r-lg); background: var(--ground-bg, #d9ccb7);
  --fx-bg: var(--ground-bg); --fx-surface: var(--ground-surface); --fx-ink: var(--ground-ink); --fx-accent: var(--ground-accent); }
.hero--centred .hero__window > .ly-piece { position: absolute; z-index: 1; left: 50%; top: var(--s-6); width: min(880px, calc(100% - 2 * var(--s-6))); transform: translateX(-50%); }
.ly-mark { display: inline-block; width: .8em; height: .8em; vertical-align: -.06em; margin-inline: .06em; border-radius: 50%; background: var(--ink); position: relative; }
.ly-mark::before, .ly-mark::after { content: ""; position: absolute; top: 27%; width: 13%; height: 42%; border-radius: 99px; background: var(--bg); transform: skewX(-12deg); }
.ly-mark::before { left: 31%; } .ly-mark::after { left: 56%; }
@media (max-width: 639px) {
  .hero--centred .btn-row { width: 100%; }
  .hero--centred .hero__window { margin-top: var(--s-6); min-height: 280px; }
  .hero--centred .hero__window > .ly-piece { top: var(--s-4); width: calc(100% - 2 * var(--s-4)); left: var(--s-4); transform: none; }
}
.ly-link { position: relative; font-weight: 500; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .28s var(--ease); }
.ly-link:hover, .ly-link:focus-visible { background-size: 100% 1px; }
[data-ly-steps] [data-step] { transition: opacity .35s var(--ease, ease), transform .35s var(--ease, ease); }
[data-ly-steps] [data-step].is-off { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) {
  .ly-live::before { animation: none; }
  .ly-word > span, .ly-collage__set, .ly-letters .ly-l { transition: none; }
}
/* ==== tasteskill 2.5 kit: icons/icon.css ==== */
:root { --ic-white: #fff; --ic-ok: var(--ok, #2f9e5b); }
.ic { --ic-s: 24px; display: inline-block; flex: none; height: var(--ic-s); width: auto; max-width: none; vertical-align: middle; object-fit: contain; }
.ic-16 { --ic-s: 16px; } .ic-20 { --ic-s: 20px; } .ic-24 { --ic-s: 24px; } .ic-28 { --ic-s: 28px; } .ic-32 { --ic-s: 32px; }
.ic-36 { --ic-s: 36px; } .ic-40 { --ic-s: 40px; } .ic-48 { --ic-s: 48px; } .ic-56 { --ic-s: 56px; }
.ic-svg { width: var(--ic-s); }
.ic-mask { width: var(--ic-s); background-color: currentColor; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.ic-muted { color: var(--muted); }
.ic-accent { color: var(--accent); }
.ic-wide { height: calc(var(--ic-s) * 0.7); max-width: min(100%, calc(var(--ic-s) * 4.5)); }
.ic-svg.ic-wide { width: auto; }
.ic-paper { filter: invert(1); }
:is(.ground-inverse, .ic-dark) .ic-ink { filter: invert(1); }
:is(.ground-inverse, .ic-dark) .ic-paper { filter: none; }
.ic-keep { filter: none !important; }
.ic-tile {
  --tile: 40px;
  --tile-bg: color-mix(in oklab, var(--ic-white) 72%, var(--bg));
  --tile-line: var(--line);
  display: inline-grid; place-items: center; flex: none;
  width: var(--tile); height: var(--tile); border-radius: calc(var(--tile) * 0.28);
  background: var(--tile-bg); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--tile-line), 0 1px 2px color-mix(in oklab, var(--ink) 7%, transparent);
}
.ic-tile > .ic { --ic-s: calc(var(--tile) * 0.6); }
.ic-tile > img.ic, .ic-file > img.ic, .ic-point > img.ic { width: var(--ic-s); object-fit: contain; }
.ic-tile > img.ic.ic-land, .ic-tile > .ic-svg.ic-land { width: calc(var(--tile) * 0.7); height: auto; max-height: 80%; }
.ic-tile > img.ic.ic-tall, .ic-tile > .ic-svg.ic-tall { height: calc(var(--tile) * 0.68); width: auto; max-width: 80%; }
.ic-tile--24 { --tile: 24px; } .ic-tile--32 { --tile: 32px; } .ic-tile--40 { --tile: 40px; }
.ic-tile--48 { --tile: 48px; } .ic-tile--56 { --tile: 56px; } .ic-tile--72 { --tile: 72px; }
.ic-tile--round { border-radius: 50%; }
.ic-tile--wide { width: calc(var(--tile) * 2.4); }
.ic-tile.ic-tile--wide > .ic { width: calc(var(--tile) * 1.7); height: auto; max-width: 80%; max-height: 58%; object-fit: contain; }
.ic-tile--flat { box-shadow: inset 0 0 0 1px var(--tile-line); }
.ic-tile--glyph { --tile-bg: color-mix(in oklab, var(--ink) 5%, var(--bg)); box-shadow: none; }
.ic-tile--accent { --tile-bg: color-mix(in oklab, var(--accent) 12%, var(--bg)); color: var(--accent); box-shadow: none; }
.ic-tile--ink { --tile-bg: var(--ink); color: var(--bg); box-shadow: none; }
:is(.ground-inverse, .ic-dark) .ic-tile--ink { --tile-bg: color-mix(in oklab, var(--ink) 10%, var(--bg)); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.ic-tile--brand { --tile-bg: var(--accent); color: var(--ic-white); box-shadow: none; }
:is(.ic-tile--ink, .ic-tile--brand) .ic-paper { filter: none; }
:is(.ic-tile--ink, .ic-tile--brand) .ic-ink { filter: invert(1); }
:is(.ground-inverse, .ic-dark) .ic-tile:not(.ic-tile--glyph, .ic-tile--accent, .ic-tile--ink) {
  --tile-bg: color-mix(in oklab, var(--ink) 94%, var(--bg)); --tile-line: transparent; color: var(--bg);
  box-shadow: 0 1px 2px color-mix(in oklab, var(--bg) 70%, transparent);
}
:is(.ground-inverse, .ic-dark) .ic-tile:not(.ic-tile--ink, .ic-tile--brand) .ic-ink { filter: none; }
:is(.ground-inverse, .ic-dark) .ic-tile:not(.ic-tile--ink, .ic-tile--brand) .ic-paper { filter: invert(1); }
:is(.ground-inverse, .ic-dark) .ic-tile--glyph { --tile-bg: color-mix(in oklab, var(--ink) 9%, var(--bg)); }
:is(.ground-inverse, .ic-dark) .ic-tile--accent { --tile-bg: color-mix(in oklab, var(--accent) 22%, var(--bg)); }
.ic-tile--ghost { --tile-bg: color-mix(in oklab, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
.ic-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 8px;
  border-radius: 999px; background: var(--card, var(--surface)); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line); font-size: var(--t-small, 14px); line-height: 1; white-space: nowrap;
}
.ic-chip > .ic { --ic-s: 18px; }
.ic-chip--lg { height: 40px; padding: 0 16px 0 10px; gap: 10px; font-size: var(--t-body, 16px); }
.ic-chip--lg > .ic { --ic-s: 22px; }
.ic-chip > .ic-wide { height: auto; width: calc(var(--ic-s) * 2.2); max-height: calc(var(--ic-s) * 0.9); }
:is(.ground-inverse, .ic-dark) :is(.ic-chip, .ic-file) > img.ic { box-sizing: content-box; padding: 3px; border-radius: 7px; background: color-mix(in oklab, var(--ink) 94%, var(--bg)); }
:is(.ground-inverse, .ic-dark) .ic-file > img.ic { padding: 4px; border-radius: 10px; }
:is(.ground-inverse, .ic-dark) :is(.ic-chip, .ic-file) > img.ic-ink { filter: none; }
:is(.ground-inverse, .ic-dark) :is(.ic-chip, .ic-file) > img.ic-paper { filter: invert(1); }
.ic-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
a.ic-chip:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.ic-list { display: grid; }
.ic-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; }
.ic-row:first-child { border-top: 0; }
.ic-row__main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ic-row__title { font-size: var(--t-body, 16px); font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-row__meta { font-size: var(--t-small, 14px); color: var(--muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-row__end { flex: none; font-size: var(--t-small, 14px); color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.ic-row__end .ic { --ic-s: 16px; }
.ic-state { display: inline-flex; align-items: center; gap: 6px; }
.ic-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.ic-state--on { color: var(--ink); }
.ic-state--on::before { background: var(--ic-ok); }
.ic-stack { display: inline-flex; align-items: center; }
.ic-stack > * { margin-left: -10px; box-shadow: 0 0 0 2px var(--bg); }
.ic-stack > :first-child { margin-left: 0; }
.ic-stack > .ic-tile { box-shadow: inset 0 0 0 1px var(--tile-line), 0 0 0 2px var(--bg); }
.ic-stack__more {
  display: inline-grid; place-items: center; height: 40px; min-width: 40px; padding: 0 10px; border-radius: 999px;
  background: color-mix(in oklab, var(--ink) 8%, var(--bg)); color: var(--muted); font-size: var(--t-label, 13px); font-weight: 500;
}
.ic-stack--sm > .ic-tile { --tile: 32px; } .ic-stack--sm .ic-stack__more { height: 32px; min-width: 32px; }
.ic-grid { display: grid; gap: var(--card-gap, 16px); grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.ic-cell {
  display: grid; align-content: start; gap: 14px; padding: 20px; border-radius: var(--r-md, 12px);
  background: var(--card, var(--surface)); box-shadow: inset 0 0 0 1px var(--line); min-width: 0;
}
.ic-cell__name { font-size: var(--t-body, 16px); font-weight: 500; line-height: 1.25; }
.ic-cell__meta { font-size: var(--t-small, 14px); color: var(--muted); line-height: 1.4; margin-top: 2px; }
a.ic-cell:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.ic-grid--mosaic { gap: 1px; background: var(--line); border-radius: var(--r-lg, 20px); overflow: hidden; border: 1px solid var(--line); }
.ic-grid--mosaic > .ic-cell { border-radius: 0; box-shadow: none; background: var(--bg); }
.ic-grid--mosaic > .ic-cell:hover { background: color-mix(in oklab, var(--ink) 3%, var(--bg)); }
.ic-wall { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.ic-wall > .ic-tile { --tile: 64px; justify-self: start; }
.ic-wall > .ic-tile--wide { grid-column: span 2; }
.ic-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .ic-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ic-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 639px) { .ic-grid--cols-3, .ic-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ic-file {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-width: 0;
  border-radius: var(--r-md, 12px); background: var(--card, var(--surface)); box-shadow: inset 0 0 0 1px var(--line);
}
.ic-file > .ic { --ic-s: 36px; }
.ic-file > img.ic.ic-wide, .ic-file > .ic-svg.ic-wide { width: calc(var(--ic-s) * 1.9); height: auto; max-height: var(--ic-s); }
.ic-file > img.ic.ic-land, .ic-file > .ic-svg.ic-land { width: calc(var(--ic-s) * 1.15); height: auto; }
.ic-file > img.ic.ic-tall, .ic-file > .ic-svg.ic-tall { width: auto; height: var(--ic-s); }
.ic-file__main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ic-file__name { font-size: var(--t-body, 16px); font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.ic-file__meta { font-size: var(--t-small, 14px); color: var(--muted); line-height: 1.3; overflow-wrap: anywhere; }
.ic-file__end { flex: none; color: var(--muted); font-size: var(--t-small, 14px); }
.ic-file-list { display: grid; gap: 10px; }
.ic-file--tile { display: grid; justify-items: start; gap: 12px; padding: 18px; }
.ic-file--tile > .ic { --ic-s: 40px; }
.ic-file--tile > img.ic.ic-wide, .ic-file--tile > .ic-svg.ic-wide { width: calc(var(--ic-s) * 2.1); }
.ic-file--tile .ic-file__main { width: 100%; }
.ic-points { display: grid; gap: 16px; }
.ic-point { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.ic-point > .ic-tile { --tile: 36px; }
.ic-point > .ic-tile > .ic { --ic-s: 18px; }
.ic-point__title { font-weight: 500; line-height: 1.3; }
.ic-point__text { color: var(--muted); font-size: var(--t-small, 14px); line-height: 1.5; margin-top: 2px; }
@media (max-width: 479px) {
  .ic-row__title, .ic-row__meta { white-space: normal; overflow: visible; text-overflow: clip; }
  .ic-grid--cols-2:has(> .ic-file--tile) { grid-template-columns: 1fr; }
  .ic-file--tile { grid-template-columns: auto 1fr; justify-items: start; align-items: center; }
}
/* ==== tasteskill 2.5 kit: diagrams/diagram.css ==== */
.dg {
  --dg-ink: var(--ink, #111);
  --dg-muted: var(--muted, #6b6b6b);
  --dg-accent: var(--accent, #1a4be0);
  --dg-accent-ink: var(--accent-ink, #fff);
  --dg-pulse: var(--dg-accent);
  --dg-head: var(--dg-pulse);
  --dg-node: var(--frag, oklch(from var(--card, var(--bg, #fff)) clamp(calc(l + 0.05), calc((l - 0.5) * 1000), 1) calc(c * 0.5) h));
  --dg-border: color-mix(in oklab, var(--dg-ink) 11%, transparent);
  --dg-line: color-mix(in oklab, var(--dg-ink) 18%, transparent);
  --dg-faint: color-mix(in oklab, var(--dg-ink) 10%, transparent);
  --dg-dot: color-mix(in oklab, var(--dg-ink) 15%, transparent);
  --dg-w: 1.25px;
  --dg-r: var(--r-sm, 8px);
  --dg-halo: 0.08;
  --dg-ease: cubic-bezier(.2, .7, .2, 1);
  --dg-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 8px 18px -12px rgb(0 0 0 / .22);
  position: relative; display: block; width: 100%; min-width: 0; height: auto;
  font: 500 13px/1.25 var(--font-text, system-ui, sans-serif); color: var(--dg-ink);
  letter-spacing: -0.005em; overflow: clip; contain: layout paint;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.dg[data-ground="dark"] {
  --dg-head: color-mix(in oklab, var(--dg-pulse) 60%, #fff); --dg-glow-a: .34;
  --dg-halo: 0.13; --dg-dot: color-mix(in oklab, var(--dg-ink) 13%, transparent);
  --dg-shadow: 0 1px 0 rgb(255 255 255 / .04) inset, 0 8px 20px -12px rgb(0 0 0 / .6);
}
:is(.panel, .panel__screen, .frame) > .dg { position: absolute; inset: 0; z-index: 1; }
.panel:has(> .dg) { position: relative; min-height: max(var(--p-h, 264px), var(--dg-min, 0px)); }
.panel:has(> .dg[data-size="band"]) { --p-h: 240px; }
@media (max-width: 639px) {
  .panel:has(> .dg[data-orient="v"]) { min-height: max(var(--p-h, 264px), var(--dg-min, 300px)); }
}
.dg::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 62% 64% at 50% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 64% at 50% 50%, #000 30%, transparent 100%);
}
.dg[data-dg-ground="dots"]::before {
  background-image: radial-gradient(circle, var(--dg-dot) 0.9px, transparent 1.25px);
  background-size: 16px 16px; background-position: center;
}
.dg[data-dg-ground="grid"]::before {
  background-image:
    linear-gradient(to right, var(--dg-faint) 1px, transparent 1px),
    linear-gradient(to bottom, var(--dg-faint) 1px, transparent 1px);
  background-size: 32px 32px; background-position: center;
}
.dg::before { z-index: 0; }
.dg-svg { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dg-nodes { position: absolute; inset: 0; z-index: 2; }
.dg-rings circle { fill: none; stroke: var(--dg-faint); stroke-width: 1px; }
.dg::after { content: none; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.dg[data-dg-ground~="glow"]::after {
  content: "";
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 .32 0 0 0 -.11'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 46% 62% at var(--dg-cx, 50%) var(--dg-cy, 50%), color-mix(in oklab, var(--dg-pulse) var(--dg-glow-k, 15%), transparent), transparent 100%),
    radial-gradient(ellipse 80% 55% at 50% 118%, color-mix(in oklab, var(--dg-pulse) 8%, transparent), transparent 72%);
}
.dg[data-ground="dark"] { --dg-glow-k: 20%; }
.dg-line, .dg-lit, .dg-glow, .dg-comet {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.dg-line { stroke: var(--dg-line); stroke-width: var(--dg-w); transition: stroke 260ms ease, opacity 260ms ease; }
.dg-e.is-faint .dg-line { stroke: var(--dg-faint); }
.dg-e.is-idle .dg-line { stroke: var(--dg-faint); stroke-dasharray: 2 4; }
.dg-e.is-track .dg-line { stroke: var(--dg-faint); }
.dg-e.is-spoke .dg-line { stroke: var(--dg-line); stroke-dasharray: 1 4.5; }
.dg-e.is-ghost > .dg-line { opacity: 0; }
.dg-lit { stroke: var(--dg-pulse); stroke-width: var(--dg-w); stroke-opacity: .5; opacity: 0; }
.dg-c0 { stop-color: var(--dg-pulse); stop-opacity: 0; }
.dg-c1 { stop-color: var(--dg-pulse); stop-opacity: .5; }
.dg-c2 { stop-color: var(--dg-head); stop-opacity: 1; }
.dg-comet { stroke-width: calc(var(--dg-w) + 1px); opacity: 0; }
.dg-glow { stroke-width: 9px; opacity: 0; }
.dg-e.is-run > .dg-comet { opacity: 1; }
.dg-e.is-run > .dg-glow { opacity: var(--dg-glow-a, .26); }
.dg-spark { fill: var(--dg-head); }
.dg-spark-halo { fill: var(--dg-pulse); fill-opacity: .2; }
.dg-e:not(.is-run) > :is(.dg-spark, .dg-spark-halo) { visibility: hidden; }
.dg.is-still :is(.dg-glow, .dg-comet, .dg-spark, .dg-spark-halo) { display: none; }
.dg.is-still .dg-lit { stroke-opacity: .75; }
.dg-port { fill: var(--dg-node); stroke: var(--dg-line); stroke-width: 1px; }
.dg-halo { opacity: var(--dg-halo); pointer-events: none; }
.dg-halo__in { stop-color: var(--dg-pulse); stop-opacity: 1; }
.dg-halo__out { stop-color: var(--dg-pulse); stop-opacity: 0; }
.dg-e { transition: opacity 220ms ease; }
.dg-node { transition-property: opacity, border-color, box-shadow, background-color, color; }
.dg.is-focus .dg-e:not(.is-focus) { opacity: .28; }
.dg.is-focus .dg-node:not(.is-focus) { opacity: .5; }
.dg.is-focus .dg-port { opacity: .5; }
.dg-e.is-focus:not(.is-ghost) .dg-line { stroke: color-mix(in oklab, var(--dg-pulse) 70%, transparent); }
.dg-node {
  position: absolute; left: 0; top: 0; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--dg-node); color: var(--dg-ink);
  border: 1px solid var(--dg-border); border-radius: calc(var(--dg-r) + 2px);
  box-shadow: var(--dg-shadow);
  transition-duration: 220ms, 900ms, 900ms, 900ms, 900ms; transition-timing-function: ease, var(--dg-ease), var(--dg-ease), var(--dg-ease), var(--dg-ease);
}
.dg-node.is-hit {
  border-color: color-mix(in oklab, var(--dg-accent) 55%, var(--dg-border));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--dg-accent) 14%, transparent), var(--dg-shadow);
  transition-duration: 220ms, 160ms, 160ms, 160ms, 160ms;
}
.dg-ic { position: relative; flex: none; display: grid; place-items: center; width: 18px; height: 18px; color: var(--dg-ink); }
.dg-ic > :is(svg, img) { display: block; width: 100%; height: 100%; object-fit: contain; }
.dg-ic--text { font: 600 12px/1 var(--font-text, system-ui, sans-serif); letter-spacing: 0; }
.dg .dg-ic.dg-ic--wide { width: auto !important; aspect-ratio: 2 / 1; }
.dg .dg-node:is(.dg-node--tile, .dg-node--gtile, .dg-node--disc, .dg-node--core):has(> .dg-ic--wide) { width: auto; padding: 0 12px; border-radius: 999px; }
.dg-logo:has(> .dg-ic--wide) { width: auto; padding: 0 6px; }
.dg-label { font-weight: 500; }
.dg-meta { font: 400 12px/1 var(--font-mono, ui-monospace, monospace); color: var(--dg-muted); letter-spacing: 0; }
.dg-st {
  position: relative; flex: none; display: grid; place-items: center; width: 15px; height: 15px; margin: 0 -2px 0 2px;
  border-radius: 50%; box-shadow: inset 0 0 0 1.25px color-mix(in oklab, var(--dg-ink) 22%, transparent);
  color: var(--dg-accent-ink); transition: background-color 300ms ease, box-shadow 300ms ease;
}
.dg-st svg { width: 10px; height: 10px; opacity: 0; scale: .5; transition: opacity 200ms ease, scale 300ms var(--dg-ease); }
.dg-node.is-done > .dg-st { background: var(--dg-accent); box-shadow: none; }
.dg-node.is-done > .dg-st svg { opacity: 1; scale: 1; }
.dg-check {
  position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%;
  background: var(--dg-accent); color: var(--dg-accent-ink); box-shadow: 0 0 0 2px var(--dg-node);
  opacity: 0; scale: .5; transition: opacity 240ms ease, scale 320ms var(--dg-ease);
}
.dg-check svg { width: 10px; height: 10px; }
.dg-node.is-done > .dg-check { opacity: 1; scale: 1; }
.dg-node--pill { height: 32px; padding: 0 12px 0 8px; }
.dg-node--pill:not(:has(.dg-ic)) { padding: 0 12px; }
.dg-node--pill:has(> .dg-st) { padding-right: 9px; }
.dg-node--pill .dg-meta { margin-left: 2px; }
.dg--tight .dg-node--pill { padding: 0 9px 0 7px; gap: 6px; }
.dg--tight .dg-node--pill:not(:has(.dg-ic)) { padding: 0 9px; }
.dg-node--card { padding: 7px 14px 7px 7px; gap: 10px; border-radius: calc(var(--dg-r) + 4px); }
.dg-logo { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--dg-r); background: color-mix(in oklab, var(--dg-ink) 4%, var(--dg-node)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--dg-ink) 7%, transparent); }
.dg-logo .dg-ic { width: 18px; height: 18px; }
.dg-txt { display: flex; flex-direction: column; gap: 2px; }
.dg-sub { font-size: 12px; font-weight: 400; color: var(--dg-muted); }
.dg-node--card .dg-meta { margin-left: 8px; }
.dg-node--card > .dg-st { margin-left: 6px; }
.dg-node--tile, .dg-node--gtile, .dg-node--disc { justify-content: center; width: 40px; height: 40px; padding: 0; gap: 0; }
.dg-node--tile .dg-ic { width: 20px; height: 20px; }
.dg-node--disc { width: 44px; height: 44px; border-radius: 50%; }
.dg-node--disc .dg-ic { width: 22px; height: 22px; }
.dg-cap {
  position: absolute; top: calc(100% + 6px); left: 50%; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font-size: 12px; line-height: 16px; font-weight: 450; color: var(--dg-muted); text-align: center; white-space: nowrap;
  transition: color 600ms ease;
}
.dg-node.is-hit > .dg-cap, .dg-node.is-done > .dg-cap { color: var(--dg-ink); transition-duration: 160ms; }
.dg-cap__s { font: 400 11px/14px var(--font-mono, ui-monospace, monospace); color: var(--dg-muted); }
.dg-node--core { justify-content: center; width: 56px; height: 56px; padding: 0; gap: 0; border-radius: calc(var(--dg-r) + 8px); }
.dg-node--core .dg-ic { width: 26px; height: 26px; }
.dg-node--core > .dg-cap { color: var(--dg-ink); font-weight: 500; top: calc(100% + 10px); }
.dg[data-tier] .dg-node--core:has(> .dg-cap--in) { flex-direction: column; width: auto; min-width: 56px; height: auto; padding: 11px 14px 9px; gap: 6px; }
.dg .dg-node--core > .dg-cap--in { position: static; translate: none; max-width: 148px; flex-direction: row; font-size: 12px; line-height: 16px; font-weight: 560;
  color: inherit; white-space: normal; text-wrap: balance; text-align: center; overflow-wrap: anywhere; }
.dg-node--core-pill { height: 42px; padding: 0 16px 0 12px; gap: 10px; border-radius: calc(var(--dg-r) + 6px); font-size: 14px; font-weight: 560; }
.dg-node--core-pill .dg-ic { width: 20px; height: 20px; }
.dg-node.is-ink {
  background: linear-gradient(180deg, color-mix(in oklab, var(--dg-ink) 84%, var(--dg-node)), var(--dg-ink));
  border-color: transparent; color: var(--dg-node);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--dg-node) 16%, transparent), 0 1px 2px rgb(0 0 0 / .12), 0 10px 24px -12px rgb(0 0 0 / .45);
}
.dg[data-ground="dark"] .dg-node.is-ink {
  background: linear-gradient(180deg, var(--dg-ink), color-mix(in oklab, var(--dg-ink) 86%, var(--dg-node)));
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / .12), 0 0 0 1px rgb(255 255 255 / .06), 0 12px 30px -10px rgb(0 0 0 / .7);
}
.dg-node.is-ink .dg-ic, .dg-node.is-ink .dg-label { color: var(--dg-node); }
.dg-node.is-accent { background: var(--dg-accent); border-color: transparent; color: var(--dg-accent-ink); }
.dg-node.is-accent .dg-ic { color: var(--dg-accent-ink); }
:is(.is-ink, .is-accent) .dg-ic--text { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.dg-node:is(.dg-node--core, .dg-node--core-pill)::before,
.dg-node:is(.dg-node--core, .dg-node--core-pill)::after {
  content: ""; position: absolute; inset: -7px; pointer-events: none; border-radius: calc(var(--dg-r) + 13px);
  border: 1px solid color-mix(in oklab, var(--dg-ink) 10%, transparent);
}
.dg-node:is(.dg-node--core, .dg-node--core-pill)::after { border-color: var(--dg-pulse); opacity: 0; }
.dg-node:is(.dg-node--core, .dg-node--core-pill).is-hit { border-color: transparent; }
.dg-node:is(.dg-node--core, .dg-node--core-pill).is-hit::before { border-color: color-mix(in oklab, var(--dg-pulse) 45%, transparent); transition: border-color 160ms ease; }
.dg-node:is(.dg-node--core, .dg-node--core-pill).is-hit::after { animation: dg-ripple 1100ms cubic-bezier(.2, .6, .3, 1) both; }
.dg-node:is(.dg-node--core, .dg-node--core-pill):not(.is-ink, .is-accent).is-hit { border-color: color-mix(in oklab, var(--dg-accent) 60%, var(--dg-border)); }
@keyframes dg-ripple { from { opacity: .7; scale: 1; } to { opacity: 0; scale: 1.28; } }
.dg.is-still .dg-node::after { animation: none !important; opacity: 0 !important; }
.dg-node--step, .dg-node--dot { justify-content: center; padding: 0; gap: 0; border-radius: 50%; box-shadow: none; }
.dg-node--step { width: 18px; height: 18px; border: 1.5px solid color-mix(in oklab, var(--dg-ink) 24%, transparent); }
.dg-node--step .dg-dot { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; color: var(--dg-accent-ink); }
.dg-node--step .dg-dot svg { width: 11px; height: 11px; opacity: 0; scale: .5; transition: opacity 200ms ease, scale 300ms var(--dg-ease); }
.dg-node--step.is-done { background: var(--dg-accent); border-color: var(--dg-accent); }
.dg-node--step.is-done .dg-dot svg { opacity: 1; scale: 1; }
.dg-node--step.is-hit { box-shadow: 0 0 0 5px color-mix(in oklab, var(--dg-accent) 16%, transparent); }
.dg-node--step > .dg-cap { top: calc(100% + 10px); }
.dg-node--step > .dg-cap .dg-cap__l { font-weight: 500; }
.dg-node--dot { width: 9px; height: 9px; border: 0; background: color-mix(in oklab, var(--dg-ink) 30%, var(--dg-node)); }
.dg-node--dot.is-hit { background: var(--dg-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--dg-accent) 16%, transparent); }
.dg .dg-node.dg-node--side > .dg-cap { top: 50%; left: calc(100% + 10px); translate: 0 -50%; text-align: left; flex-direction: row; gap: 8px; align-items: baseline; max-width: none; white-space: nowrap; }
.dg .dg-node.dg-node--side-l > .dg-cap { left: auto; right: calc(100% + 10px); text-align: right; flex-direction: row-reverse; }
.dg-node--dot.dg-node--side > .dg-cap { color: var(--dg-ink); font-weight: 450; }
.dg-node--dot.dg-node--side > .dg-cap .dg-cap__l { font-weight: 450; }
.dg-node--chip { height: 26px; padding: 0 10px 0 8px; gap: 6px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--dg-ink); }
.dg-node--chip .dg-ic { width: 14px; height: 14px; color: var(--dg-muted); }
.dg-node--chip.is-hit .dg-ic { color: var(--dg-accent); }
.dg-node--system {
  flex-direction: column; align-items: stretch; gap: 0; width: var(--dg-sys-w, 204px); padding: 0 0 4px;
  border-radius: calc(var(--dg-r) + 4px); white-space: normal;
}
.dg-sys__head { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-bottom: 1px solid var(--dg-border); }
.dg-sys__head .dg-meta { margin-left: auto; }
.dg-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 30px; margin: 0 4px; padding: 0 8px;
  border-radius: calc(var(--dg-r) - 2px); font-size: 12.5px; font-weight: 450; transition: background-color 900ms var(--dg-ease);
}
.dg-row:first-of-type { margin-top: 4px; }
.dg-row .dg-meta { transition: color 900ms var(--dg-ease); }
.dg-row.is-hit { background: color-mix(in oklab, var(--dg-accent) 10%, transparent); transition-duration: 160ms; }
.dg-row.is-hit .dg-meta { color: var(--dg-accent); transition-duration: 160ms; }
.dg-node--group {
  flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px;
  border-radius: calc(var(--dg-r) + 8px); background: color-mix(in oklab, var(--dg-node) 55%, transparent);
  box-shadow: none; white-space: nowrap; border-style: dashed; border-color: color-mix(in oklab, var(--dg-ink) 16%, transparent);
}
.dg-node--group:not(:has(.dg-group__label)) { padding: 10px; }
.dg-group__label { font-size: 12px; line-height: 14px; font-weight: 500; color: var(--dg-muted); }
.dg-group__grid { display: grid; grid-template-columns: repeat(var(--cols, 3), auto); gap: 8px; }
.dg-node--gtile { position: relative; width: 38px; height: 38px; }
.dg-node--gtile .dg-ic { width: 20px; height: 20px; }
.dg[data-tier="c"] { font-size: 12px; }
.dg[data-tier="c"] .dg-node--pill { height: 28px; padding: 0 10px 0 7px; gap: 6px; }
.dg[data-tier="c"] .dg-node--pill:not(:has(.dg-ic)) { padding: 0 10px; }
.dg[data-tier="c"] .dg-node--pill:has(> .dg-st) { padding-right: 7px; }
.dg[data-tier="c"] .dg-node--pill .dg-ic { width: 16px; height: 16px; }
.dg[data-tier="c"] .dg-node--tile { width: 36px; height: 36px; }
.dg[data-tier="c"] .dg-node--tile .dg-ic { width: 18px; height: 18px; }
.dg[data-tier="c"] .dg-node--disc { width: 38px; height: 38px; }
.dg[data-tier="c"] .dg-node--disc .dg-ic { width: 19px; height: 19px; }
.dg[data-tier="c"] .dg-node--gtile { width: 32px; height: 32px; }
.dg[data-tier="c"] .dg-node--gtile .dg-ic { width: 17px; height: 17px; }
.dg[data-tier="c"] .dg-node--core { width: 46px; height: 46px; border-radius: calc(var(--dg-r) + 6px); }
.dg[data-tier="c"] .dg-node--core .dg-ic { width: 22px; height: 22px; }
.dg[data-tier="c"] .dg-node--core-pill { height: 34px; padding: 0 12px 0 9px; gap: 7px; font-size: 13px; }
.dg[data-tier="c"] .dg-node--core-pill .dg-ic { width: 17px; height: 17px; }
.dg[data-tier="c"] .dg-node:is(.dg-node--core, .dg-node--core-pill)::before,
.dg[data-tier="c"] .dg-node:is(.dg-node--core, .dg-node--core-pill)::after { inset: -5px; border-radius: calc(var(--dg-r) + 11px); }
.dg[data-tier="c"] .dg-cap { font-size: 11.5px; line-height: 14px; top: calc(100% + 5px); max-width: 92px; white-space: normal; text-wrap: balance; }
.dg[data-tier="c"] .dg-node--group { padding: 8px; gap: 6px; border-radius: calc(var(--dg-r) + 6px); }
.dg[data-tier="c"] .dg-group__grid { gap: 6px; }
.dg[data-tier="c"] .dg-node--system { --dg-sys-w: 248px; }
.dg[data-tier="c"] .dg-sys__head { height: 36px; }
.dg[data-tier="c"] .dg-row { height: 28px; }
.dg[data-tier="c"] .dg-meta { font-size: 11px; }
.dg[data-tier="c"]::before { background-size: 14px 14px; }
.dg[data-tier="l"] { font-size: 14px; --dg-w: 1.4px; }
.dg[data-tier="l"] .dg-node--pill { height: 38px; padding: 0 14px 0 10px; gap: 9px; }
.dg[data-tier="l"] .dg-node--pill .dg-ic { width: 20px; height: 20px; }
.dg[data-tier="l"] .dg-node--tile { width: 48px; height: 48px; }
.dg[data-tier="l"] .dg-node--tile .dg-ic { width: 24px; height: 24px; }
.dg[data-tier="l"] .dg-node--disc { width: 52px; height: 52px; }
.dg[data-tier="l"] .dg-node--disc .dg-ic { width: 26px; height: 26px; }
.dg[data-tier="l"] .dg-node--gtile { width: 46px; height: 46px; }
.dg[data-tier="l"] .dg-node--gtile .dg-ic { width: 24px; height: 24px; }
.dg[data-tier="l"] .dg-node--core { width: 68px; height: 68px; border-radius: calc(var(--dg-r) + 10px); }
.dg[data-tier="l"] .dg-node--core .dg-ic { width: 30px; height: 30px; }
.dg[data-tier="l"] .dg-node:is(.dg-node--core, .dg-node--core-pill)::before,
.dg[data-tier="l"] .dg-node:is(.dg-node--core, .dg-node--core-pill)::after { inset: -9px; border-radius: calc(var(--dg-r) + 18px); }
.dg[data-tier="l"] .dg-node--core-pill { height: 48px; font-size: 15px; padding: 0 20px 0 14px; }
.dg[data-tier="l"] .dg-node--core-pill .dg-ic { width: 22px; height: 22px; }
.dg[data-tier="l"] .dg-cap { font-size: 13px; line-height: 18px; }
.dg[data-tier="l"] .dg-node--system { --dg-sys-w: 260px; }
.dg[data-tier="l"] .dg-sys__head { height: 46px; padding: 0 14px; }
.dg[data-tier="l"] .dg-row { height: 34px; font-size: 13.5px; }
.dg[data-tier="l"] .dg-node--step { width: 20px; height: 20px; }
.dg[data-tier="l"] .dg-node--group { padding: 14px; gap: 10px; }
.dg[data-tier="l"] .dg-group__grid { gap: 10px; }
.dg[data-tier="l"] .dg-group__label { font-size: 13px; }
.dg[data-tier="l"]::before { background-size: 20px 20px; }
:where(button.loop-pause.dg-pause) {
  position: absolute; right: 12px; bottom: 12px; z-index: 6; display: grid; place-items: center;
  width: 32px; height: 32px; margin: 0; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid color-mix(in oklab, var(--ink, #111) 16%, transparent);
  background: var(--bg, #fff); color: var(--ink, #111);
  box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 4px 12px -4px rgb(0 0 0 / .28);
}
:where(button.loop-pause.dg-pause) svg { display: block; width: 14px; height: 14px; fill: currentColor; }
:where(button.loop-pause.dg-pause.is-paused) svg { margin-left: 1px; }
@media (prefers-reduced-motion: reduce) {
  .dg *, .dg *::before, .dg *::after { transition-duration: 0ms !important; animation: none !important; }
  button.loop-pause.dg-pause { display: none; }
}
@media (forced-colors: active) {
  .dg-line, .dg-lit { stroke: CanvasText; }
  .dg::after, .dg-rings { display: none; }
  .dg-node { border-color: CanvasText; }
  .dg::before { display: none; }
}
.dg--broken { display: grid; place-items: center; padding: 24px; }
.dg-fallback { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 460px; margin: 0; padding: 0; list-style: none; }
.dg-fallback li { padding: 6px 12px; border: 1px solid var(--dg-border); border-radius: calc(var(--dg-r) + 2px); background: var(--dg-node); color: var(--dg-ink); font-size: 13px; font-weight: 500; }