/* [project]/src/shared/lib/bricolage_755575a8.module.css [app-client] (css) */
@font-face {
  font-family: bricolage;
  src: url("../media/bricolage_grotesque_latin-s.p.41rroleoq1br7.woff2") format("woff2");
  font-display: swap;
  font-weight: 400 800;
}

@font-face {
  font-family: bricolage Fallback;
  src: local(Arial);
  ascent-override: 82.39%;
  descent-override: 23.92%;
  line-gap-override: 0.0%;
  size-adjust: 112.88%;
}

.bricolage_755575a8-module__9wpaZW__className {
  font-family: bricolage, bricolage Fallback;
}

.bricolage_755575a8-module__9wpaZW__variable {
  --font-bricolage: "bricolage", "bricolage Fallback";
}

/* [project]/src/shared/lib/bagel_4b2628fe.module.css [app-client] (css) */
@font-face {
  font-family: bagel;
  src: url("../media/bagel_fat_one_latin-s.p.15j5bg11rx80g.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
}

@font-face {
  font-family: bagel Fallback;
  src: local(Arial);
  ascent-override: 111.48%;
  descent-override: 27.68%;
  line-gap-override: 0.0%;
  size-adjust: 104.05%;
}

.bagel_4b2628fe-module__J_jLaG__className {
  font-family: bagel, bagel Fallback;
  font-weight: 400;
}

.bagel_4b2628fe-module__J_jLaG__variable {
  --font-bagel: "bagel", "bagel Fallback";
}

/* [project]/src/shared/lib/playpen_febb945f.module.css [app-client] (css) */
@font-face {
  font-family: playpen;
  src: url("../media/playpen_sans_latin-s.3jks5ei6gcb_w.woff2") format("woff2");
  font-display: swap;
  font-weight: 400 800;
}

@font-face {
  font-family: playpen Fallback;
  src: local(Arial);
  ascent-override: 107.12%;
  descent-override: 31.13%;
  line-gap-override: 0.0%;
  size-adjust: 109.22%;
}

.playpen_febb945f-module__Py0awW__className {
  font-family: playpen, playpen Fallback;
}

.playpen_febb945f-module__Py0awW__variable {
  --font-playpen: "playpen", "playpen Fallback";
}

/* [project]/src/shared/lib/atkinson_63c1a5e3.module.css [app-client] (css) */
@font-face {
  font-family: atkinson;
  src: url("../media/atkinson_hyperlegible_400_latin-s.2li_3lqay9qjq.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
}

@font-face {
  font-family: atkinson;
  src: url("../media/atkinson_hyperlegible_700_latin-s.0hs6q6udzld4a.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
}

@font-face {
  font-family: atkinson Fallback;
  src: local(Arial);
  ascent-override: 95.93%;
  descent-override: 29.29%;
  line-gap-override: 0.0%;
  size-adjust: 99.03%;
}

.atkinson_63c1a5e3-module__qQnWcq__className {
  font-family: atkinson, atkinson Fallback;
}

.atkinson_63c1a5e3-module__qQnWcq__variable {
  --font-atkinson: "atkinson", "atkinson Fallback";
}

/* [project]/src/app/globals.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    :root, :host {
      --sky1: #76ccff;
      --sky2: #d9f4ff;
      --far: #9bdda0;
      --mid: #6ccb84;
      --ground: #8bd97f;
      --ground2: #5ebb63;
      --hole: #5b3a2e;
      --holeIn: #3b2420;
      --body: #a6785c;
      --body2: #7e563f;
      --belly: #d9b79f;
      --accent: #ff5c43;
      --accentInk: #22123a;
      --bri: 1;
    }

    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-ease: initial;
      --tw-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0;
    }
  }
}

@layer theme {
  :root, :host {
    --spacing: .25rem;
    --container-xl: 36rem;
    --container-7xl: 80rem;
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -.025em;
    --radius-2xl: 1rem;
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-body);
    --default-mono-font-family: ui-monospace, Menlo, Consolas, monospace;
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }

  * {
    border-color: var(--border);
    outline-color: var(--ring);
  }

  @supports (color: color-mix(in lab, red, red)) {
    * {
      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }

  body {
    background-color: var(--background);
    font-family: var(--font-body);
    color: var(--foreground);
  }
}

@layer components {
  :root {
    --ink: #22123a;
    --ink2: #5e5073;
    --sun: #ffc531;
    --tomato: #ff5c43;
    --mint: #19b394;
    --blue: #3d9bff;
    --lilac: #8e6cff;
    --rose: #ff7bae;
    --paper: #f6f5fb;
    --lavender: #ede9f7;
    --lavender-soft: #f1ecff;
    --danger: #b3261e;
    --font-display: var(--font-bagel), cursive;
    --font-body: var(--font-bricolage), system-ui, sans-serif;
  }

  body {
    background: #f6f5fb;
  }

  .app {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    min-height: 100vh;
    font-size: 16px;
    line-height: normal;
    position: relative;
    overflow-x: clip;
  }

  .app button, .app input, .app label, .app textarea {
    font-family: inherit;
  }

  .app :where(button) {
    color: inherit;
    cursor: pointer;
  }

  .app :focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
  }

  .defs {
    width: 0;
    height: 0;
    position: absolute;
    overflow: hidden;
  }

  .ico {
    flex: none;
    width: 1.25em;
    height: 1.25em;
    display: block;
  }

  .vh {
    clip: rect(0 0 0 0);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
  }

  :where(.app) :before, :where(.app) :after {
    box-sizing: content-box;
  }

  :where(.app) :where(button, input, select, textarea) {
    font-size: revert;
    font-weight: revert;
    font-style: revert;
    line-height: revert;
    letter-spacing: revert;
  }

  .btn {
    border: 2.5px solid var(--ink);
    min-height: 48px;
    color: var(--ink);
    white-space: nowrap;
    box-shadow: 0 4px 0 var(--ink);
    background: #fff;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 0 24px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: transform .1s, box-shadow .1s, background .15s;
    display: inline-flex;
  }

  .btn:hover {
    box-shadow: 0 6px 0 var(--ink);
    transform: translateY(-2px);
  }

  .btn:active {
    box-shadow: 0 1px 0 var(--ink);
    transform: translateY(3px);
  }

  .btn .ico {
    width: 20px;
    height: 20px;
  }

  .btn-sun {
    background: var(--sun);
  }

  .btn-ink {
    background: var(--ink);
    color: #fff;
    box-shadow: 0 4px 0 var(--tomato);
  }

  .btn-ink:hover {
    box-shadow: 0 6px 0 var(--tomato);
  }

  .btn-ink:active {
    box-shadow: 0 1px 0 var(--tomato);
  }

  .btn-mint {
    background: var(--mint);
    color: #06241d;
  }

  .btn-sm {
    min-height: 44px;
    padding: 0 18px;
    font-size: 15px;
  }

  .btn-lg {
    min-height: 58px;
    padding: 0 32px;
    font-size: 20px;
  }

  .btn[disabled] {
    opacity: .45;
    pointer-events: none;
  }

  .ibtn {
    width: 44px;
    height: 44px;
    min-height: 44px;
    box-shadow: 0 3px 0 var(--ink);
    border-radius: 50%;
    padding: 0;
  }

  .ibtn:hover {
    box-shadow: 0 5px 0 var(--ink);
  }

  .ibtn.armed {
    background: var(--tomato);
    color: #fff;
  }

  .linkbtn {
    text-underline-offset: 3px;
    color: var(--ink);
    background: none;
    border: 0;
    padding: 10px 4px;
    font-weight: 700;
    text-decoration: underline;
  }

  .btn:focus-within {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
  }

  .spn {
    border: 3px solid #ffffff59;
    border-top-color: #fff;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    animation: .75s linear infinite rcSpin;
  }

  .btn.armed {
    background: var(--tomato);
    color: #fff;
  }

  .eyebrow {
    border: 2.5px solid var(--ink);
    letter-spacing: .05em;
    text-transform: uppercase;
    background: #fff;
    border-radius: 999px;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 800;
    display: inline-flex;
  }

  .eyebrow i {
    background: var(--mint);
    border-radius: 50%;
    width: 10px;
    height: 10px;
    animation: 1.6s ease-in-out infinite rcPulse;
  }

  .h1 {
    font-family: var(--font-display);
    letter-spacing: -.005em;
    margin: 22px 0;
    font-size: clamp(48px, 6.8vw, 100px);
    font-weight: 400;
    line-height: .95;
  }

  .h1 em {
    color: #fff;
    -webkit-text-stroke: .085em var(--ink);
    paint-order: stroke fill;
    text-shadow: .05em .07em 0 var(--ink);
    padding: 0 .04em;
    font-style: normal;
    display: inline-block;
    transform: rotate(-2deg);
  }

  .lead {
    max-width: 36ch;
    margin: 0 0 32px;
    font-size: clamp(18px, 1.55vw, 22px);
    font-weight: 500;
    line-height: 1.45;
  }

  .cta {
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    display: flex;
  }

  .sec {
    max-width: 1360px;
    margin: 0 auto;
    padding: 80px clamp(16px, 3vw, 44px) 0;
    scroll-margin-top: 12px;
  }

  .sec-h {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 30px;
    display: flex;
  }

  .h2 {
    font-family: var(--font-display);
    margin: 0;
    font-size: clamp(34px, 4.2vw, 56px);
    font-weight: 400;
    line-height: 1;
  }

  .sec-p {
    color: var(--ink2);
    max-width: 54ch;
    margin: 10px 0 0;
    font-size: 18px;
    line-height: 1.45;
  }

  .topbar {
    z-index: 2;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding: 16px clamp(16px, 3vw, 44px);
    display: flex;
    position: relative;
  }

  .logo {
    font-family: var(--font-display);
    color: var(--ink);
    letter-spacing: .01em;
    align-items: center;
    gap: 10px;
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
  }

  .logo img {
    width: auto;
    height: 48px;
  }

  .nav {
    gap: 4px;
    margin-left: 10px;
    display: flex;
  }

  .nav a {
    color: var(--ink);
    border-radius: 999px;
    align-items: center;
    min-height: 44px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
  }

  .nav a:hover {
    background: #22123a1a;
  }

  .sp {
    flex: 1;
  }

  .nav .navb {
    min-height: 44px;
    color: var(--ink);
    background: none;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
  }

  .nav .navb:hover {
    background: #22123a1a;
  }

  .nav .navb .ico {
    width: 18px;
    height: 18px;
  }

  .chip {
    border: 2.5px solid var(--ink);
    min-height: 44px;
    box-shadow: 0 3px 0 var(--ink);
    background: #fff;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    font-size: 15px;
    font-weight: 700;
    transition: transform .1s, background .15s, box-shadow .1s;
    display: inline-flex;
  }

  .chip:hover {
    box-shadow: 0 5px 0 var(--ink);
    transform: translateY(-2px);
  }

  .chip.on {
    background: var(--ink);
    color: #fff;
    box-shadow: 0 3px 0 var(--tomato);
  }

  .chip .sw {
    border: 2px solid;
    border-radius: 50%;
    width: 16px;
    height: 16px;
  }

  .chip .cnt {
    min-width: 24px;
    height: 24px;
    color: var(--ink);
    background: #ede9f7;
    border-radius: 999px;
    place-items: center;
    padding: 0 6px;
    font-size: 13px;
    font-weight: 800;
    display: inline-grid;
  }

  .chip.on .cnt {
    background: #fff;
  }

  .fs {
    pointer-events: none;
    filter: drop-shadow(0 6px #22123a38);
    width: 86px;
    height: 86px;
    animation: 5.5s ease-in-out infinite bob;
    position: absolute;
  }

  .fs svg {
    width: 100%;
    height: 100%;
  }

  .pill {
    border: 2px solid var(--ink);
    letter-spacing: .04em;
    text-transform: uppercase;
    background: #fff;
    border-radius: 999px;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 800;
    display: inline-flex;
  }

  .pill.ready {
    background: var(--mint);
    color: #06241d;
  }

  .pill.soon {
    background: #ede9f7;
  }

  .chips {
    flex-wrap: wrap;
    gap: 10px;
    display: flex;
  }

  .fld {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    display: flex;
  }

  .fld-l {
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink2);
    font-size: 13.5px;
    font-weight: 800;
  }

  .fld-l i {
    text-transform: none;
    letter-spacing: 0;
    font-style: normal;
    font-weight: 600;
  }

  .inp {
    border: 2.5px solid var(--ink);
    width: 100%;
    min-height: 50px;
    color: var(--ink);
    background: #fff;
    border-radius: 16px;
    padding: 0 16px;
    font-size: 18px;
    font-weight: 600;
    transition: box-shadow .15s;
    box-shadow: inset 0 3px #22123a12;
  }

  .inp::placeholder {
    color: #8f83a3;
    font-weight: 500;
  }

  .inp:focus {
    outline: none;
    box-shadow: 0 0 0 4px #3d9bff66;
  }

  .inp-title {
    min-height: 66px;
    font-family: var(--font-display);
    border-radius: 20px;
    font-size: 30px;
    font-weight: 400;
  }

  .rule {
    border: 2.5px solid var(--ink);
    box-shadow: 0 4px 0 var(--ink);
    background: #fff;
    border-radius: 20px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    padding: 16px 18px;
    display: flex;
  }

  .rule-t {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
  }

  .rule-s {
    color: var(--ink2);
    max-width: 34ch;
    margin: 3px 0 0;
    font-size: 14px;
    line-height: 1.35;
  }

  .stp {
    align-items: center;
    gap: 10px;
    display: flex;
  }

  .stp b {
    text-align: center;
    min-width: 92px;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
  }

  .seg {
    flex-wrap: wrap;
    gap: 8px;
    display: flex;
  }

  .tgl {
    border: 2.5px solid var(--ink);
    background: #ede9f7;
    border-radius: 999px;
    flex: none;
    width: 70px;
    height: 42px;
    padding: 0;
    transition: background .2s;
    position: relative;
  }

  .tgl:after {
    content: "";
    border: 2.5px solid var(--ink);
    background: #fff;
    border-radius: 50%;
    width: 27px;
    height: 27px;
    transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
    position: absolute;
    top: 4px;
    left: 4px;
  }

  .tgl.on {
    background: var(--mint);
  }

  .tgl.on:after {
    transform: translateX(28px);
  }

  .inw {
    display: block;
    position: relative;
  }

  .inw > svg {
    width: 20px;
    height: 20px;
    color: var(--ink2);
    pointer-events: none;
    margin-top: -10px;
    position: absolute;
    top: 50%;
    left: 16px;
  }

  .inp-ic {
    padding-left: 48px;
  }

  .inw .eye {
    width: 40px;
    height: 40px;
    color: var(--ink2);
    background: none;
    border: 0;
    border-radius: 12px;
    place-items: center;
    margin-top: -20px;
    display: grid;
    position: absolute;
    top: 50%;
    right: 6px;
  }

  .inw .eye:hover {
    color: var(--ink);
    background: #ede9f7;
  }

  .inw .eye svg {
    width: 22px;
    height: 22px;
  }

  .inp.bad {
    border-color: var(--tomato);
    box-shadow: 0 0 0 4px #ff5c4338;
  }

  .chk {
    text-align: left;
    background: none;
    border: 0;
    align-items: center;
    gap: 11px;
    padding: 8px 0;
    font-size: 15.5px;
    font-weight: 700;
    display: inline-flex;
  }

  .chk i {
    border: 2.5px solid var(--ink);
    background: #fff;
    border-radius: 8px;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    transition: background .15s, transform .2s cubic-bezier(.3, 1.7, .5, 1);
    display: grid;
  }

  .chk i svg {
    width: 16px;
    height: 16px;
    transition: transform .2s cubic-bezier(.3, 1.7, .5, 1);
    transform: scale(0);
  }

  .chk.on i {
    background: var(--mint);
    transform: rotate(-6deg);
  }

  .chk.on i svg {
    transform: scale(1);
  }

  .ferr {
    color: #b3261e;
    margin: -2px 0 0;
    font-size: 13.5px;
    font-weight: 700;
  }

  .tgl.sm {
    width: 58px;
    height: 36px;
  }

  .tgl.sm:after {
    width: 24px;
    height: 24px;
    top: 3px;
    left: 3px;
  }

  .tgl.sm.on:after {
    transform: translateX(22px);
  }

  .mback {
    z-index: 200;
    background: #22123a94;
    place-items: center;
    padding: 20px;
    animation: .2s fade;
    display: grid;
    position: fixed;
    inset: 0;
  }

  .modal {
    border: 3px solid var(--ink);
    width: min(660px, 100%);
    max-height: 92vh;
    box-shadow: 0 10px 0 var(--ink);
    background: #fff;
    border-radius: 30px;
    padding: 24px 26px 26px;
    animation: .4s cubic-bezier(.3, 1.5, .5, 1) modalIn;
    overflow: auto;
  }

  .modal-h {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    display: flex;
  }

  .modal-t {
    font-family: var(--font-display);
    margin: 0;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.05;
  }

  .stgrid {
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 11px;
    margin-bottom: 20px;
    display: grid;
  }

  .stg {
    aspect-ratio: 1;
    border: 2.5px solid var(--ink);
    background: #f6f5fb;
    border-radius: 18px;
    place-items: center;
    padding: 9px;
    transition: transform .12s, background .15s;
    display: grid;
  }

  .stg:hover {
    background: var(--sun);
    transform: translateY(-3px)rotate(-4deg);
  }

  .stg.on {
    background: var(--sun);
    box-shadow: 0 0 0 4px var(--blue);
  }

  .stg svg {
    width: 100%;
    height: 100%;
  }

  .mrow {
    flex-wrap: wrap;
    gap: 12px;
    display: flex;
  }

  .wt {
    text-align: left;
    border: 2.5px solid var(--ink);
    width: 100%;
    box-shadow: 0 3px 0 var(--ink);
    background: #fff;
    border-radius: 18px;
    align-items: center;
    gap: 14px;
    margin-bottom: 11px;
    padding: 12px 16px;
    transition: transform .12s, background .15s;
    display: flex;
  }

  .wt:hover {
    background: #f1ecff;
    transform: translateY(-2px);
  }

  .wt b {
    color: var(--ink);
    font-size: 17px;
    font-weight: 800;
    display: block;
  }

  .wt span {
    color: var(--ink2);
    font-size: 14px;
  }

  .wt .ico {
    width: 28px;
    height: 28px;
    color: var(--lilac);
  }

  .wthink {
    border: 2.5px solid var(--ink);
    background: #f1ecff;
    border-radius: 20px;
    align-items: center;
    gap: 14px;
    padding: 20px;
    font-size: 17px;
    font-weight: 700;
    display: flex;
  }

  .wthink .ico {
    width: 34px;
    height: 34px;
    color: var(--lilac);
    animation: 1.2s linear infinite rcSpin;
  }

  .note {
    color: var(--ink2);
    margin: 14px 0 0;
    font-size: 13.5px;
    line-height: 1.4;
  }

  .toast {
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .4s cubic-bezier(.3, 1.6, .5, 1), opacity .2s, visibility 0s .4s;
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translate(-50%, 160%);
  }

  .toast.on {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    transform: translate(-50%);
  }

  .toast-t {
    background: var(--ink);
    color: #fff;
    box-shadow: 0 5px 0 var(--sun);
    text-align: center;
    border-radius: 999px;
    max-width: min(600px, 92vw);
    padding: 14px 24px;
    font-weight: 700;
    line-height: 1.35;
    display: block;
  }

  .modal-w {
    width: min(760px, 100%);
  }

  .newgrid {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 18px;
    display: grid;
  }

  .newopt {
    text-align: left;
    border: 3px solid var(--ink);
    box-shadow: 0 6px 0 var(--ink);
    background: #fff;
    border-radius: 24px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 0 0 18px;
    transition: transform .15s cubic-bezier(.3, 1.6, .5, 1), box-shadow .15s;
    display: flex;
    overflow: hidden;
  }

  .newopt:hover {
    box-shadow: 0 10px 0 var(--ink);
    transform: translateY(-4px)rotate(-.6deg);
  }

  .newopt b {
    font-family: var(--font-display);
    color: var(--ink);
    padding: 6px 18px 0;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.05;
  }

  .nd {
    color: var(--ink2);
    padding: 0 18px;
    font-size: 15px;
    line-height: 1.4;
    display: block;
  }

  .na {
    border-bottom: 3px solid var(--ink);
    height: 150px;
    margin-bottom: 8px;
    display: block;
    position: relative;
    overflow: hidden;
  }

  .na-w {
    background: linear-gradient(#6ec6ff, #dcf5ff 60%);
  }

  .na-w svg {
    z-index: 1;
    width: 84px;
    height: 105px;
    margin-left: -42px;
    position: absolute;
    bottom: 28px;
    left: 50%;
  }

  .na-w i {
    border: 3px solid var(--ink);
    z-index: 2;
    background: #5cb863;
    border-radius: 50%;
    height: 84px;
    position: absolute;
    bottom: -36px;
    left: -8%;
    right: -8%;
  }

  .na-c {
    background: #ffd9c2;
  }

  .na-c i {
    border: 3px solid var(--ink);
    width: 70px;
    height: 92px;
    box-shadow: 0 4px 0 var(--ink);
    border-radius: 14px;
    place-items: center;
    display: grid;
    position: absolute;
    bottom: 20px;
  }

  .na-c .m1 {
    background: var(--tomato);
    left: calc(50% - 100px);
    transform: rotate(-9deg);
  }

  .na-c .m2 {
    z-index: 1;
    background: #fff;
    bottom: 30px;
    left: calc(50% - 35px);
  }

  .na-c .m2 svg {
    width: 52px;
    height: 52px;
  }

  .na-c .m3 {
    background: var(--mint);
    left: calc(50% + 30px);
    transform: rotate(9deg);
  }

  .newopt {
    position: relative;
  }

  .newopt.locked {
    opacity: .78;
    cursor: not-allowed;
    filter: saturate(.3);
  }

  .newopt.locked:hover {
    box-shadow: 0 6px 0 var(--ink);
    transform: none;
  }

  .lockb {
    z-index: 3;
    border: 2.5px solid var(--ink);
    background: #fff;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.1;
    display: inline-flex;
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .lockb svg {
    width: 14px;
    height: 14px;
  }

  .upnote {
    color: var(--ink2);
    background: #f6f5fb;
    border: 2.5px dashed #9a8fae;
    border-radius: 16px;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    display: flex;
  }

  .upnote svg {
    flex: none;
    width: 22px;
    height: 22px;
  }

  .sc {
    font-size: 1cqw;
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .sc .sky {
    background: linear-gradient(var(--sky1),var(--sky2));
    position: absolute;
    inset: 0;
  }

  .sc .sun {
    background: #ffe27a;
    border-radius: 50%;
    width: 11em;
    height: 11em;
    margin: -5.5em 0 0 -5.5em;
    transition: left .45s, top .45s, opacity .45s;
    position: absolute;
    box-shadow: 0 0 0 1.3em #ffe27a6b, 0 0 0 3em #ffe27a33;
  }

  .sc .moon {
    background: #f6f2e4;
    border-radius: 50%;
    width: 8.5em;
    height: 8.5em;
    margin: -4.25em 0 0 -4.25em;
    transition: top .45s, opacity .45s;
    position: absolute;
    box-shadow: inset -1.2em -.7em #b0a6c880, 0 0 0 1.3em #f6f2e42e;
  }

  .sc .stars i {
    background: #fff;
    border-radius: 50%;
    width: .8em;
    height: .8em;
    animation: 3s ease-in-out infinite twinkle;
    position: absolute;
  }

  .sc .nfx {
    transition: opacity .45s;
  }

  .sc .cloud {
    --cl: #fff;
    width: 21em;
    animation: 80s linear infinite drift;
    position: absolute;
  }

  .sc .cloud svg {
    width: 100%;
    display: block;
  }

  .sc .hill {
    width: 100%;
    position: absolute;
    left: 0;
  }

  .sc .hill svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .sc .far {
    height: 34%;
    bottom: 36%;
  }

  .sc .mid {
    height: 34%;
    bottom: 25%;
  }

  .sc .gnd {
    height: 75%;
    bottom: 0;
  }

  .sc .gd {
    filter: drop-shadow(0 .3em #22123a2e);
    width: 6.5em;
    height: 6.5em;
    position: absolute;
  }

  .sc .planet {
    width: 19em;
    height: 15em;
    animation: 9s ease-in-out infinite bob;
    position: absolute;
  }

  .sc .bubf {
    background: #ffffff1f;
    border: .32em solid #ffffffbf;
    border-radius: 50%;
    animation: 9s linear infinite rise;
    position: absolute;
    bottom: -8em;
  }

  .sc .ray {
    background: linear-gradient(#ffffff4d, #fff0 75%);
    width: 10em;
    height: 120%;
    animation: 8s ease-in-out infinite alternate ray;
    position: absolute;
    top: -10%;
    transform: skewX(-18deg);
  }

  .sc .weed {
    transform-origin: 50% 100%;
    width: 9em;
    animation: 4.2s ease-in-out infinite alternate sway;
    position: absolute;
  }

  .sc .weed svg {
    width: 100%;
    display: block;
  }

  .sc .lolli {
    transform-origin: 50% 100%;
    width: 12em;
    animation: 6s ease-in-out infinite alternate sway;
    position: absolute;
  }

  .sc .lolli svg {
    width: 100%;
    display: block;
  }

  .sc .spr {
    border-radius: 1em;
    width: 1.3em;
    height: .5em;
    position: absolute;
  }

  .sc .ff {
    z-index: 21;
    background: #fff3a0;
    border-radius: 50%;
    width: 1em;
    height: 1em;
    animation: 7s ease-in-out infinite firefly;
    position: absolute;
    box-shadow: 0 0 1.6em .7em #fff08ca6;
  }

  .sc .bgimg {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }

  .sc .cr {
    background: var(--ground2);
    opacity: .55;
    border-radius: 50%;
    position: absolute;
    box-shadow: inset 0 .5em #ffffff4d;
  }

  .hole {
    width: 17em;
    height: 9.4em;
    font-size: calc(1em*var(--s, 1));
    margin: -4.7em 0 0 -8.5em;
    position: absolute;
  }

  .hole .hb {
    background: radial-gradient(ellipse at 50% 64%,var(--holeIn) 0,var(--hole) 100%);
    border: .32em solid var(--ink);
    border-radius: 50%;
    height: 78%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 .5em #22123a33;
  }

  .hole .mc {
    pointer-events: none;
    height: 15.4em;
    position: absolute;
    bottom: 38%;
    left: 5%;
    right: 5%;
    overflow: hidden;
  }

  .hole .mole {
    transform-origin: 50% 100%;
    width: 11.4em;
    height: 14.25em;
    filter: brightness(var(--bri, 1));
    --eo: 1;
    --ec: 0;
    --ex: 0;
    --m1: 1;
    --m2: 0;
    --m3: 0;
    margin-left: -5.7em;
    transition: transform .24s cubic-bezier(.55, 0, .9, .4);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateY(104%);
  }

  .hole .mole svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }

  .hole .hf {
    background: var(--ground2);
    border: .32em solid var(--ink);
    border-radius: 50%;
    height: 58%;
    position: absolute;
    bottom: -6%;
    left: -5%;
    right: -5%;
    box-shadow: inset 0 .9em #ffffff38;
  }

  .hole.st-up .mole {
    transition: transform .38s cubic-bezier(.2, 1.5, .45, 1);
    transform: translateY(0);
  }

  .hole.st-hit .mole {
    --eo: 0;
    --ex: 1;
    --m1: 0;
    --m3: 1;
    animation: .66s cubic-bezier(.3, 1.3, .5, 1) .15s both squash;
  }

  .hole.st-wrong .mole {
    --eo: 0;
    --ec: 1;
    --m1: 0;
    --m2: 1;
    animation: .95s ease-in-out .15s both laugh;
  }

  .hole .btxt.sm {
    font-size: 1.8em;
  }

  .athumb .btxt, .hv .btxt {
    font-family: var(--gfont, var(--font-display)),sans-serif;
    font-weight: var(--gw, 400);
  }

  .hole .bub {
    border: .3em solid var(--ink);
    width: 13.6em;
    min-height: 8em;
    box-shadow: 0 .5em 0 var(--ink);
    opacity: 0;
    transform-origin: 50% 130%;
    pointer-events: none;
    color: var(--ink);
    text-align: center;
    background: #fff;
    border-radius: 2.4em;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .15em;
    margin-left: -6.8em;
    padding: .7em .8em 1.15em;
    transition: transform .2s ease-in, opacity .16s;
    display: flex;
    position: absolute;
    bottom: calc(100% + 9.7em);
    left: 50%;
    transform: scale(0);
  }

  .hole .bub:after {
    content: "";
    background: inherit;
    border: .3em solid var(--ink);
    border-top: 0;
    border-left: 0;
    border-bottom-right-radius: .5em;
    width: 2em;
    height: 2em;
    margin-left: -1em;
    position: absolute;
    bottom: -1.3em;
    left: 50%;
    transform: rotate(45deg);
  }

  .hole.st-up .bub {
    transform: scale(1) rotate(var(--tilt, 0deg));
    opacity: 1;
    transition: transform .36s cubic-bezier(.3, 1.8, .5, 1) .1s, opacity .1s .1s;
  }

  .hole.st-hit .bub {
    opacity: 1;
    background: #c8f6e8;
    animation: .5s okpulse;
    transform: scale(1.06);
  }

  .hole.st-wrong .bub {
    opacity: 1;
    background: #ffcfc7;
    animation: .5s badshake;
    transform: scale(1);
  }

  .hole .bimg {
    object-fit: contain;
    width: 7.2em;
    height: 5em;
    display: block;
  }

  .hole .btxt {
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    font-size: 2.9em;
    line-height: 1.05;
  }

  .hole .btxt.md {
    font-size: 2.3em;
  }

  .hole .btxt.cap {
    margin-top: .05em;
    font-size: 1.95em;
  }

  .hole .fuse {
    background: #22123a1f;
    border-radius: 1em;
    height: .5em;
    position: absolute;
    bottom: .42em;
    left: 1.6em;
    right: 1.6em;
    overflow: hidden;
  }

  .hole .fuse i {
    background: var(--accent);
    transform-origin: 0;
    border-radius: 1em;
    height: 100%;
    display: block;
  }

  .hole.st-up .fuse i {
    animation: fuse var(--ttl, 2s) linear forwards;
  }

  .hole .mk {
    border: .3em solid var(--ink);
    color: #fff;
    z-index: 2;
    border-radius: 50%;
    place-items: center;
    width: 3.7em;
    height: 3.7em;
    display: none;
    position: absolute;
    top: -1.4em;
    right: -1.4em;
  }

  .hole .mk svg {
    width: 2.1em;
    height: 2.1em;
  }

  .hole.st-hit .mk.ok {
    background: var(--mint);
    animation: .4s cubic-bezier(.3, 1.8, .5, 1) popIn;
    display: grid;
  }

  .hole.st-wrong .mk.no {
    background: var(--tomato);
    animation: .4s cubic-bezier(.3, 1.8, .5, 1) popIn;
    display: grid;
  }

  .hole .hit {
    pointer-events: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    background: none;
    border: 0;
    border-radius: 3em;
    padding: 0;
    position: absolute;
    inset: -17em -10% -1.5em;
  }

  .hole.st-up .hit {
    pointer-events: auto;
    cursor: pointer;
  }

  .hole .hit:focus-visible {
    outline: .4em solid var(--blue);
    outline-offset: .2em;
  }

  .hole.frozen .fuse {
    display: none;
  }

  .hh .mole {
    animation: peek 6.4s ease-in-out infinite var(--d, 0s);
    transition: none;
  }

  .hh .bub {
    animation: bubloop 6.4s ease-in-out infinite var(--d, 0s);
    transition: none;
  }

  .hh .fuse {
    display: none;
  }

  .hh.st-hit .mole {
    --eo: 0;
    --ex: 1;
    --m1: 0;
    --m3: 1;
    animation: .66s cubic-bezier(.3, 1.3, .5, 1) forwards squash;
  }

  .hh.st-hit .bub {
    opacity: 1;
    background: #c8f6e8;
    animation: .5s forwards okpulse;
    transform: scale(1.05);
  }

  .hh .hit {
    pointer-events: auto;
    cursor: pointer;
    top: -12em;
  }

  .hh .mk {
    display: none;
  }

  .hh.st-hit .mk.ok {
    background: var(--mint);
    display: grid;
  }

  .shell {
    position: relative;
  }

  .shell.play {
    z-index: 100;
    background: #150b26;
    place-items: center;
    animation: .25s fade;
    display: grid;
    position: fixed;
    inset: 0;
    container-type: size;
  }

  .box {
    aspect-ratio: 16 / 10;
    border: 3px solid var(--ink);
    width: 100%;
    box-shadow: 0 12px 0 var(--ink);
    background: var(--sky1);
    border-radius: 34px;
    transition: --sky1 .7s, --sky2 .7s, --far .7s, --mid .7s, --ground .7s, --ground2 .7s, --hole .7s, --holeIn .7s, --body .7s, --body2 .7s, --belly .7s, --accent .5s, --bri .7s;
    position: relative;
    overflow: hidden;
    container-type: inline-size;
  }

  .shell.play .box {
    width: min(100vw, 160dvh);
    box-shadow: none;
    border: 0;
    border-radius: 0;
  }

  @supports (width: 1cqw) {
    .shell.play .box {
      width: min(100cqw, 160cqh);
    }
  }

  .box.sk-a {
    animation: .4s shakeA;
  }

  .box.sk-b {
    animation: .4s shakeB;
  }

  .st {
    font-family: var(--gfont);
    font-weight: var(--gw);
    color: var(--ink);
    -webkit-user-select: none;
    user-select: none;
  }

  .is-paused .st * {
    animation-play-state: paused !important;
  }

  .is-paused .st .ovl, .is-paused .st .ovl * {
    animation-play-state: running !important;
  }

  .hud {
    pointer-events: none;
    z-index: 40;
    position: absolute;
    inset: 0;
  }

  .hud button {
    pointer-events: auto;
  }

  .tmr {
    width: 8.8em;
    height: 8.8em;
    position: absolute;
    top: 1.8em;
    left: 2.2em;
  }

  .tmr svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 .45em 0 var(--ink));
    overflow: visible;
    transform: rotate(-90deg);
  }

  .tmr .tmr-ring {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
  }

  .tmr.run .tmr-ring {
    animation: ringdown var(--dur, 60s) linear forwards;
  }

  .tmr b {
    font-size: 3.6em;
    font-weight: inherit;
    place-items: center;
    line-height: 1;
    display: grid;
    position: absolute;
    inset: 0;
  }

  .tmr.low b {
    color: var(--tomato);
    animation: 1s ease-in-out infinite pulseNum;
  }

  .vbadge {
    border: .28em solid var(--ink);
    box-shadow: 0 .35em 0 var(--ink);
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: .06em;
    background: #fff;
    border-radius: 2em;
    align-items: center;
    gap: .7em;
    padding: .35em 1.1em .35em .8em;
    font-size: 1.9em;
    font-weight: 800;
    display: flex;
    position: absolute;
    top: 2em;
    left: 2.2em;
  }

  .vbadge i {
    background: var(--tomato);
    border-radius: 50%;
    width: .7em;
    height: .7em;
    animation: 1.4s infinite rcPulse;
  }

  .sign {
    flex-direction: column;
    align-items: center;
    gap: .9em;
    display: flex;
    position: absolute;
    top: 1.7em;
    left: 50%;
    transform: translateX(-50%);
  }

  .lvl-p {
    background: var(--accent);
    color: var(--accentInk);
    border: .1em solid var(--ink);
    box-shadow: 0 .12em 0 var(--ink);
    white-space: nowrap;
    border-radius: .55em;
    padding: .08em .75em .14em;
    font-size: 3.5em;
    line-height: 1.1;
    transition: background .4s;
  }

  .stars-p {
    border: .3em solid var(--ink);
    box-shadow: 0 .4em 0 var(--ink);
    background: #fff;
    border-radius: 1.4em;
    gap: .2em;
    padding: .4em .8em;
    display: flex;
  }

  .stars-p svg {
    --sf: #fff;
    width: 2.7em;
    height: 2.7em;
    display: block;
  }

  .stars-p svg.on {
    --sf: var(--sun);
    animation: .5s cubic-bezier(.3, 1.8, .5, 1) popIn;
  }

  .scr {
    flex-direction: column;
    align-items: flex-end;
    gap: .9em;
    display: flex;
    position: absolute;
    top: 1.8em;
    right: 2.2em;
  }

  .scr-c {
    border: .32em solid var(--ink);
    min-width: 13.5em;
    box-shadow: 0 .45em 0 var(--ink);
    text-align: center;
    background: #fff;
    border-radius: 2em;
    padding: .4em 1.4em .55em;
  }

  .scr-c small {
    font-family: var(--font-body);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink2);
    font-size: 1.5em;
    font-weight: 800;
    line-height: 1.4;
    display: block;
  }

  .scr-c b {
    font-size: 4.6em;
    line-height: 1;
    font-weight: inherit;
    display: block;
  }

  .scr-c b.bA {
    animation: .35s bumpA;
  }

  .scr-c b.bB {
    animation: .35s bumpB;
  }

  .streak {
    background: var(--sun);
    border: .14em solid var(--ink);
    box-shadow: 0 .1em 0 var(--ink);
    border-radius: 1em;
    align-items: center;
    gap: .4em;
    padding: .1em .6em .1em .35em;
    font-size: 1.9em;
    animation: .4s cubic-bezier(.3, 1.8, .5, 1) popIn;
    display: flex;
  }

  .streak svg {
    --sf: #fff;
    width: 1.1em;
    height: 1.1em;
  }

  .rules {
    z-index: 41;
    pointer-events: none;
    gap: 1.2em;
    width: max-content;
    max-width: 80%;
    display: flex;
    position: absolute;
    bottom: 1.8em;
    left: 50%;
    transform: translateX(-50%);
  }

  .rtag {
    border: .13em solid var(--ink);
    box-shadow: 0 .14em 0 var(--ink);
    background: #fff;
    border-radius: 1.2em;
    align-items: center;
    gap: .5em;
    min-width: 0;
    padding: .25em .9em .25em .3em;
    font-size: 2.4em;
    line-height: 1.05;
    display: flex;
  }

  .rtag i {
    border: .1em solid var(--ink);
    color: #fff;
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 1.5em;
    height: 1.5em;
    display: grid;
  }

  .rtag.ok i {
    background: var(--mint);
  }

  .rtag.no i {
    background: var(--tomato);
  }

  .rtag i svg {
    width: .9em;
    height: .9em;
  }

  .rtag span {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink2);
    font-size: .46em;
    font-weight: 800;
    line-height: 1.1;
    display: block;
  }

  .rtag em {
    white-space: nowrap;
    text-overflow: ellipsis;
    font-style: normal;
    display: block;
    overflow: hidden;
  }

  .ctl {
    z-index: 42;
    gap: 1em;
    display: flex;
    position: absolute;
    bottom: 1.8em;
    left: 2.2em;
  }

  .ctl-r {
    z-index: 42;
    gap: 1em;
    display: flex;
    position: absolute;
    bottom: 1.8em;
    right: 2.2em;
  }

  .cbtn {
    border: .3em solid var(--ink);
    width: 5.6em;
    height: 5.6em;
    box-shadow: 0 .4em 0 var(--ink);
    color: var(--ink);
    background: #fff;
    border-radius: 50%;
    place-items: center;
    padding: 0;
    font-size: 1em;
    transition: transform .1s, box-shadow .1s;
    display: grid;
  }

  .cbtn:hover {
    transform: translateY(-.15em);
  }

  .cbtn:active {
    box-shadow: 0 .1em 0 var(--ink);
    transform: translateY(.3em);
  }

  .cbtn svg {
    width: 2.6em;
    height: 2.6em;
  }

  .cbtn.wide {
    width: auto;
    font-family: inherit;
    font-weight: inherit;
    border-radius: 3em;
    align-items: center;
    gap: .45em;
    height: 2.7em;
    padding: 0 1.6em;
    font-size: 2.1em;
    display: flex;
  }

  .cbtn.wide svg {
    width: 1em;
    height: 1em;
  }

  .cbtn.go {
    background: var(--sun);
  }

  .fxl {
    pointer-events: none;
    z-index: 30;
    position: absolute;
    inset: 0;
  }

  .pt {
    width: 1.6em;
    height: 1.6em;
    margin: -.8em 0 0 -.8em;
    display: none;
    position: absolute;
  }

  .pt.k-star {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }

  .pt.k-conf {
    border-radius: .15em;
    width: 1.1em;
    height: .7em;
    margin: -.35em 0 0 -.55em;
  }

  .pt.k-bub {
    background: #ffffff47;
    border: .28em solid #fff;
    border-radius: 50%;
  }

  .pt.on {
    display: block;
  }

  .pt.on.a {
    animation: ptA var(--life, .9s) cubic-bezier(.12,.75,.3,1) forwards;
  }

  .pt.on.b {
    animation: ptB var(--life, .9s) cubic-bezier(.12,.75,.3,1) forwards;
  }

  .fl {
    white-space: nowrap;
    -webkit-text-stroke: .2em var(--ink);
    paint-order: stroke fill;
    color: #fff;
    text-shadow: 0 .08em 0 var(--ink);
    font-size: 4em;
    line-height: 1;
    display: none;
    position: absolute;
  }

  .fl.ok {
    color: #bfffea;
  }

  .fl.bad {
    color: #ffc4ba;
  }

  .fl.pow {
    color: var(--sun);
    font-size: 5.6em;
  }

  .fl.on.a {
    animation: flA var(--life, 1s) cubic-bezier(.2,1.5,.4,1) forwards;
    display: block;
  }

  .fl.on.b {
    animation: flB var(--life, 1s) cubic-bezier(.2,1.5,.4,1) forwards;
    display: block;
  }

  .mal {
    transform-origin: 54% 92%;
    width: 13em;
    height: 13em;
    margin: -3.4em 0 0 -7em;
    display: none;
    position: absolute;
  }

  .mal svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }

  .mal.on.a {
    animation: .42s cubic-bezier(.3, 0, .4, 1) forwards malA;
    display: block;
  }

  .mal.on.b {
    animation: .42s cubic-bezier(.3, 0, .4, 1) forwards malB;
    display: block;
  }

  .ovl {
    z-index: 60;
    background: #22123a8c;
    place-items: center;
    animation: .25s fade;
    display: grid;
    position: absolute;
    inset: 0;
  }

  .cd-n {
    color: #fff;
    -webkit-text-stroke: .06em var(--ink);
    paint-order: stroke fill;
    text-shadow: 0 .06em 0 var(--ink);
    font-size: 24em;
    line-height: 1;
    animation: .85s cubic-bezier(.2, 1.6, .4, 1) both cdPop;
  }

  .cd-n.go {
    color: var(--sun);
    font-size: 15em;
  }

  .pcard {
    border: .35em solid var(--ink);
    box-shadow: 0 .7em 0 var(--ink);
    text-align: center;
    background: #fff;
    border-radius: 2.6em;
    width: min(58em, 92%);
    padding: 2.2em 3em 2.4em;
    animation: .5s cubic-bezier(.3, 1.5, .5, 1) modalIn;
  }

  .pcard h2 {
    font-size: 6em;
    line-height: 1;
    font-weight: inherit;
    margin: 0 0 .25em;
  }

  .pcard p {
    font-family: var(--font-body);
    color: var(--ink2);
    margin: 0 0 1.2em;
    font-size: 1.9em;
    font-weight: 600;
  }

  .pbtns {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
    display: flex;
  }

  .res-s {
    justify-content: center;
    gap: .3em;
    margin: 0 0 .6em;
    display: flex;
  }

  .res-s svg {
    --sf: #ede9f7;
    width: 7.4em;
    height: 7.4em;
    display: block;
  }

  .res-s svg.on {
    --sf: var(--sun);
    animation: .8s cubic-bezier(.2, 1.7, .4, 1) both starPop;
    animation-delay: var(--d, 0s);
  }

  .res-st {
    grid-template-columns: repeat(4, 1fr);
    gap: .9em;
    margin: 0 0 1.1em;
    display: grid;
  }

  .res-st div {
    border: .14em solid var(--ink);
    background: #f6f5fb;
    border-radius: 1.1em;
    padding: .4em .3em .45em;
  }

  .res-st b {
    font-size: 3.5em;
    line-height: 1.05;
    font-weight: inherit;
    display: block;
  }

  .res-st small {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink2);
    font-size: 1.2em;
    font-weight: 800;
  }

  .rev {
    text-align: left;
    margin: 0 0 1.3em;
  }

  .rev h4 {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink2);
    margin: 0 0 .5em;
    font-size: 1.45em;
    font-weight: 800;
  }

  .rev-c {
    flex-wrap: wrap;
    gap: .55em;
    display: flex;
  }

  .rev-c span {
    font-family: var(--font-body);
    border: .08em solid var(--ink);
    background: #fff;
    border-radius: 2em;
    padding: .1em .7em;
    font-size: 1.7em;
    font-weight: 700;
  }

  .rev-c span.m {
    background: #ffe8a8;
  }

  .rev-c span.w {
    background: #ffd0c8;
  }

  .lvlb {
    z-index: 50;
    white-space: nowrap;
    color: var(--sun);
    -webkit-text-stroke: .09em var(--ink);
    paint-order: stroke fill;
    text-shadow: 0 .07em 0 var(--ink);
    pointer-events: none;
    font-size: 11em;
    line-height: 1;
    animation: 1.9s cubic-bezier(.2, 1.5, .4, 1) forwards lvlA;
    position: absolute;
    top: 44%;
    left: 50%;
  }

  .p-dots {
    --pat: radial-gradient(circle,#ffffff57 0 .26em,transparent .3em);
    --pz: 1.3em 1.3em;
  }

  .p-stripes {
    --pat: repeating-linear-gradient(45deg,#ffffff47 0 .55em,transparent .55em 1.3em);
    --pz: auto;
  }

  .p-check {
    --pat: conic-gradient(#ffffff47 25%,transparent 0 50%,#ffffff47 0 75%,transparent 0);
    --pz: 2em 2em;
  }

  .p-waves {
    --pat: repeating-radial-gradient(circle at 50% 130%,#ffffff4d 0 .5em,transparent .5em 1.2em);
    --pz: auto;
  }

  .cst {
    z-index: 10;
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  .cg {
    position: absolute;
    inset: 0;
  }

  .crd {
    left: calc(var(--x)*1cqw);
    top: calc(var(--y)*1cqw);
    width: calc(var(--cw)*1cqw);
    height: calc(var(--cw)*var(--ar, 1.25)*1cqw);
    font-size: calc(var(--cw)*.1cqw);
    perspective: 90em;
    transform: rotate(var(--r, 0deg));
    pointer-events: auto;
    transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
    position: absolute;
  }

  .crd-hit {
    z-index: 6;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    background: none;
    border: 0;
    border-radius: 1.3em;
    padding: 0;
    position: absolute;
    inset: -.4em;
  }

  .crd-hit:focus-visible {
    outline: .4em solid var(--blue);
    outline-offset: .1em;
  }

  .ci {
    transform-style: preserve-3d;
    transition: transform .8s cubic-bezier(.3, 1.3, .5, 1);
    position: absolute;
    inset: 0;
  }

  .cb, .cf {
    border: .32em solid var(--ink);
    box-shadow: 0 .45em 0 var(--ink);
    backface-visibility: hidden;
    border-radius: 1.15em;
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .cb {
    background-color: var(--accent);
    background-image: var(--pat, none);
    background-size: var(--pz, auto);
    place-items: center;
    display: grid;
  }

  .cb:before {
    content: "";
    pointer-events: none;
    border: .24em dashed #fffc;
    border-radius: .8em;
    position: absolute;
    inset: .6em;
  }

  .cn {
    border: .3em solid var(--ink);
    width: 4.6em;
    height: 4.6em;
    box-shadow: 0 .3em 0 var(--ink);
    color: var(--ink);
    background: #fff;
    border-radius: 50%;
    place-items: center;
    display: grid;
    position: relative;
    transform: rotate(-6deg);
  }

  .cn b {
    font-size: 2.5em;
    line-height: 1;
    font-weight: inherit;
  }

  .cf {
    background: #fff;
    flex-direction: column;
    display: flex;
    transform: rotateY(180deg);
  }

  .cfi {
    background: radial-gradient(circle at 50% 45%, #fff 0 38%, #fff1c4 100%);
    flex: 1;
    place-items: center;
    min-height: 0;
    padding: .8em .8em .4em;
    display: grid;
  }

  .cfi img, .cfi svg {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block;
  }

  .cft {
    border-top: .22em solid var(--ink);
    text-align: center;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    color: var(--ink);
    background: #fff;
    flex: none;
    padding: .35em .5em .45em;
    font-size: 1.9em;
    line-height: 1.08;
  }

  .cft.md {
    font-size: 1.6em;
  }

  .cft.sm {
    font-size: 1.32em;
  }

  .cft.xs {
    font-size: 1.1em;
  }

  .cft.xxs {
    font-size: .92em;
  }

  .cft {
    max-height: 42%;
    overflow: hidden;
  }

  .cfi {
    flex: 1 1 0;
    min-height: 56%;
  }

  .cf.tonly .cft {
    background: #fff8dc;
    border-top: 0;
    flex: 1;
    place-items: center;
    max-height: none;
    font-size: 2.3em;
    display: grid;
  }

  .cf.tonly .cft.md {
    font-size: 1.9em;
  }

  .cf.tonly .cft.sm {
    font-size: 1.5em;
  }

  .cf.tonly .cft.xs {
    font-size: 1.2em;
  }

  .cf.tonly .cft.xxs {
    font-size: 1em;
  }

  .cf.ionly .cfi {
    padding: .9em;
  }

  .rv-flip .crd.open .ci {
    transform: rotateY(180deg);
  }

  .rv-door .cf {
    transition: transform .7s cubic-bezier(.3, 1.4, .5, 1) .15s;
    transform: none;
  }

  .rv-door .crd:not(.open) .cf {
    transform: scale(.9);
  }

  .rv-door .cb {
    z-index: 2;
    transform-origin: 0;
    backface-visibility: visible;
    transition: transform .85s cubic-bezier(.45, .1, .3, 1), opacity .3s .5s;
  }

  .rv-door .crd.open .cb {
    opacity: 0;
    transform: rotateY(-108deg);
  }

  .rv-pop .cf {
    opacity: 0;
    transition: transform .6s cubic-bezier(.3, 1.9, .5, 1) .14s, opacity .1s .14s;
    transform: scale(.3)rotate(-12deg);
  }

  .rv-pop .crd.open .cf {
    opacity: 1;
    transform: none;
  }

  .rv-pop .cb {
    z-index: 2;
    transition: transform .55s cubic-bezier(.6, -.4, .7, .6), opacity .2s .2s;
  }

  .rv-pop .crd.open .cb {
    opacity: 0;
    transform: translateY(-80%)rotate(-16deg)scale(.55);
  }

  .cg .crd:not(.open):not(.lock):hover {
    transform: translateY(-.5em) rotate(calc(var(--r, 0deg) - 1.5deg));
  }

  .crd.lock .cb {
    filter: saturate(.5) brightness(.93);
  }

  .crd.next {
    animation: 1.5s ease-in-out infinite nextBob;
  }

  .crd.next .cb {
    box-shadow: 0 .45em 0 var(--ink),0 0 0 .55em #ffffffe6;
  }

  .crd.nopeA {
    animation: .42s nopeA;
  }

  .crd.nopeB {
    animation: .42s nopeB;
  }

  .cst.stag .ci, .cst.stag .cb, .cst.stag .cf {
    transition-delay: calc(var(--k, 0)*70ms);
  }

  .crd.inst .ci, .crd.inst .cb, .crd.inst .cf {
    transition: none !important;
  }

  .spot {
    z-index: 50;
    cursor: pointer;
    pointer-events: auto;
    background: #22123aa3;
    animation: .3s both fade;
    position: absolute;
    inset: 0;
  }

  .spot.out {
    animation: .42s ease-in forwards fadeOut;
  }

  .spot .crd {
    --r: 0deg;
    pointer-events: none;
  }

  .crd.sp-in {
    animation: .55s cubic-bezier(.2, 1.2, .4, 1) both spotIn;
  }

  .crd.sp-out {
    animation: .42s cubic-bezier(.5, 0, .8, .6) forwards spotOut;
  }

  .spot-hint {
    border: .2em solid var(--ink);
    box-shadow: 0 .25em 0 var(--ink);
    font-family: var(--font-body);
    white-space: nowrap;
    opacity: 0;
    background: #fff;
    border-radius: 2em;
    padding: .2em 1.1em .26em;
    font-size: 2.1em;
    font-weight: 800;
    transition: opacity .4s .5s;
    position: absolute;
    top: 49.9cqw;
    left: 50%;
    transform: translateX(-50%);
  }

  .spot.ready .spot-hint {
    opacity: 1;
  }

  .spot.out .spot-hint {
    opacity: 0;
    transition: none;
  }

  .cap-i {
    border: .2em solid var(--ink);
    max-width: 28em;
    box-shadow: 0 .25em 0 var(--ink);
    font-family: var(--font-body);
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: #fff;
    border-radius: 1.4em;
    padding: .2em 1.1em .28em;
    font-size: 2.15em;
    font-weight: 700;
    line-height: 1.15;
    overflow: hidden;
  }

  .prog {
    border: .32em solid var(--ink);
    min-width: 12em;
    box-shadow: 0 .45em 0 var(--ink);
    text-align: center;
    background: #fff;
    border-radius: 2em;
    padding: .35em 1.3em .6em;
    position: absolute;
    top: 1.8em;
    right: 2.2em;
  }

  .prog small {
    font-family: var(--font-body);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink2);
    font-size: 1.4em;
    font-weight: 800;
    line-height: 1.4;
    display: block;
  }

  .prog b {
    font-size: 3.8em;
    line-height: 1;
    font-weight: inherit;
    display: block;
  }

  .prog b em {
    opacity: .55;
    font-size: .48em;
    font-style: normal;
  }

  .pbar {
    background: #ede9f7;
    border-radius: 1em;
    height: .7em;
    margin-top: .45em;
    display: block;
    overflow: hidden;
  }

  .pbar i {
    background: var(--accent);
    border-radius: 1em;
    height: 100%;
    transition: width .5s cubic-bezier(.3, 1.4, .5, 1);
    display: block;
  }

  .hud.dim .sign, .hud.dim .prog {
    opacity: .15;
  }

  .sign, .prog {
    transition: opacity .3s;
  }

  .ctl-c {
    z-index: 42;
    position: absolute;
    bottom: 1.8em;
    left: 50%;
    transform: translateX(-50%);
  }

  .cbtn.wide.sm {
    height: 2.6em;
    font-size: 1.75em;
  }

  .fin {
    z-index: 55;
    white-space: nowrap;
    color: var(--sun);
    -webkit-text-stroke: .09em var(--ink);
    paint-order: stroke fill;
    text-shadow: 0 .07em 0 var(--ink);
    pointer-events: none;
    font-size: 5.2em;
    line-height: 1;
    animation: 2.4s cubic-bezier(.2, 1.5, .4, 1) forwards lvlA;
    position: absolute;
    top: 46%;
    left: 50%;
  }

  .wkw {
    display: contents;
  }

  @keyframes blink {
    0%, 92%, 100% {
      transform: scaleY(1);
    }

    95% {
      transform: scaleY(.1);
    }
  }

  @keyframes rcPulse {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }

    50% {
      opacity: .6;
      transform: scale(1.35);
    }
  }

  @keyframes bob {
    0%, 100% {
      transform: translateY(0)rotate(-4deg);
    }

    50% {
      transform: translateY(-12px)rotate(4deg);
    }
  }

  @keyframes popIn {
    0% {
      transform: scale(0);
    }

    60% {
      transform: scale(1.25);
    }

    100% {
      transform: scale(1);
    }
  }

  @keyframes fade {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes modalIn {
    0% {
      opacity: 0;
      transform: translateY(40px)scale(.92);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes rowIn {
    0% {
      opacity: 0;
      transform: translateX(-14px)scale(.9);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes cardIn {
    0% {
      opacity: 0;
      transform: translateY(24px)scale(.95);
    }

    100% {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes rcSpin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes drift {
    from {
      transform: translateX(-30cqw);
    }

    to {
      transform: translateX(130cqw);
    }
  }

  @keyframes twinkle {
    0%, 100% {
      opacity: .25;
      transform: scale(.7);
    }

    50% {
      opacity: 1;
      transform: scale(1.3);
    }
  }

  @keyframes firefly {
    0%, 100% {
      opacity: .2;
      transform: translate(0);
    }

    25% {
      opacity: 1;
      transform: translate(4em, -3em);
    }

    50% {
      opacity: .4;
      transform: translate(-2em, -6em);
    }

    75% {
      opacity: 1;
      transform: translate(-5em, -2em);
    }
  }

  @keyframes rise {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(-70cqw);
    }
  }

  @keyframes ray {
    from {
      opacity: .4;
      transform: skewX(-18deg)translateX(-3em);
    }

    to {
      opacity: 1;
      transform: skewX(-18deg)translateX(3em);
    }
  }

  @keyframes sway {
    from {
      transform: rotate(-5deg);
    }

    to {
      transform: rotate(5deg);
    }
  }

  @keyframes pickA {
    0%, 12% {
      background: #fff;
    }

    16%, 34% {
      background: var(--sun);
      transform: translateY(-4px);
    }

    40%, 100% {
      background: #fff;
      transform: none;
    }
  }

  @keyframes pickB {
    0%, 40% {
      background: #fff;
    }

    44%, 62% {
      background: #c8f6e8;
      transform: translateY(-4px);
    }

    68%, 100% {
      background: #fff;
      transform: none;
    }
  }

  @keyframes pickC {
    0%, 68% {
      background: #fff;
    }

    72%, 90% {
      background: var(--sun);
      transform: translateY(-4px);
    }

    96%, 100% {
      background: #fff;
      transform: none;
    }
  }

  @keyframes letterIn {
    0%, 8% {
      opacity: 0;
      transform: translateY(10px);
    }

    16%, 78% {
      opacity: 1;
      transform: none;
    }

    90%, 100% {
      opacity: 0;
    }
  }

  @keyframes sweep {
    0%, 10% {
      width: 0;
    }

    32%, 52% {
      width: 58%;
    }

    64%, 100% {
      width: 0;
    }
  }

  @keyframes flipA {
    0%, 14% {
      transform: rotateY(0);
    }

    24%, 58% {
      transform: rotateY(180deg);
    }

    68%, 100% {
      transform: rotateY(0);
    }
  }

  @keyframes hopA {
    0%, 100% {
      transform: translateY(0)rotate(0);
    }

    50% {
      transform: translateY(-9px)rotate(-3deg);
    }
  }

  @keyframes shakeA {
    0%, 100% {
      transform: translate(0);
    }

    20% {
      transform: translate(-.9cqw, .5cqw);
    }

    40% {
      transform: translate(.9cqw, -.4cqw);
    }

    60% {
      transform: translate(-.6cqw, .3cqw);
    }

    80% {
      transform: translate(.5cqw, -.2cqw);
    }
  }

  @keyframes shakeB {
    0%, 100% {
      transform: translate(0);
    }

    20% {
      transform: translate(-.9cqw, .5cqw);
    }

    40% {
      transform: translate(.9cqw, -.4cqw);
    }

    60% {
      transform: translate(-.6cqw, .3cqw);
    }

    80% {
      transform: translate(.5cqw, -.2cqw);
    }
  }

  @keyframes bumpA {
    0% {
      transform: scale(1);
    }

    40% {
      transform: scale(1.25)rotate(-3deg);
    }

    100% {
      transform: scale(1);
    }
  }

  @keyframes bumpB {
    0% {
      transform: scale(1);
    }

    40% {
      transform: scale(1.25)rotate(-3deg);
    }

    100% {
      transform: scale(1);
    }
  }

  @keyframes ringdown {
    to {
      stroke-dashoffset: 100px;
    }
  }

  @keyframes pulseNum {
    0%, 100% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.18);
    }
  }

  @keyframes fuse {
    from {
      transform: scaleX(1);
    }

    to {
      transform: scaleX(0);
    }
  }

  @keyframes peek {
    0%, 6% {
      transform: translateY(104%);
    }

    13%, 44% {
      transform: translateY(0);
    }

    52%, 100% {
      transform: translateY(104%);
    }
  }

  @keyframes bubloop {
    0%, 12% {
      opacity: 0;
      transform: scale(0);
    }

    19%, 44% {
      opacity: 1;
      transform: scale(1);
    }

    50%, 100% {
      opacity: 0;
      transform: scale(0);
    }
  }

  @keyframes squash {
    0% {
      transform: translateY(0)scale(1);
    }

    20% {
      transform: translateY(7%)scale(1.2, .6);
    }

    48% {
      transform: translateY(3%)scale(1.07, .86);
    }

    100% {
      transform: translateY(104%)scale(1);
    }
  }

  @keyframes laugh {
    0% {
      transform: translateY(0)rotate(0);
    }

    12% {
      transform: translateY(-5%)rotate(-6deg);
    }

    24% {
      transform: translateY(0)rotate(6deg);
    }

    36% {
      transform: translateY(-4%)rotate(-6deg);
    }

    48% {
      transform: translateY(0)rotate(5deg);
    }

    66% {
      transform: translateY(0)rotate(0);
    }

    100% {
      transform: translateY(104%);
    }
  }

  @keyframes okpulse {
    0% {
      transform: scale(1);
    }

    40% {
      transform: scale(1.18);
    }

    100% {
      transform: scale(1.06);
    }
  }

  @keyframes badshake {
    0%, 100% {
      transform: translateX(0);
    }

    20% {
      transform: translateX(-.7em);
    }

    40% {
      transform: translateX(.7em);
    }

    60% {
      transform: translateX(-.5em);
    }

    80% {
      transform: translateX(.4em);
    }
  }

  @keyframes ptA {
    0% {
      opacity: 1;
      transform: translate(0)scale(.2)rotate(0);
    }

    12% {
      transform: translate(calc(var(--dx)*.25),calc(var(--dy)*.25)) scale(var(--sc, 1)) rotate(calc(var(--rot)*.2));
      opacity: 1;
    }

    100% {
      transform: translate(var(--dx),var(--dy)) scale(var(--sc, 1)) rotate(var(--rot));
      opacity: 0;
    }
  }

  @keyframes ptB {
    0% {
      opacity: 1;
      transform: translate(0)scale(.2)rotate(0);
    }

    12% {
      transform: translate(calc(var(--dx)*.25),calc(var(--dy)*.25)) scale(var(--sc, 1)) rotate(calc(var(--rot)*.2));
      opacity: 1;
    }

    100% {
      transform: translate(var(--dx),var(--dy)) scale(var(--sc, 1)) rotate(var(--rot));
      opacity: 0;
    }
  }

  @keyframes flA {
    0% {
      transform: translate(-50%,-50%) scale(.2) rotate(var(--rt, 0deg));
      opacity: 0;
    }

    18% {
      transform: translate(-50%,-70%) scale(1.15) rotate(var(--rt, 0deg));
      opacity: 1;
    }

    70% {
      transform: translate(-50%,-120%) scale(1) rotate(var(--rt, 0deg));
      opacity: 1;
    }

    100% {
      transform: translate(-50%,-150%) scale(.9) rotate(var(--rt, 0deg));
      opacity: 0;
    }
  }

  @keyframes flB {
    0% {
      transform: translate(-50%,-50%) scale(.2) rotate(var(--rt, 0deg));
      opacity: 0;
    }

    18% {
      transform: translate(-50%,-70%) scale(1.15) rotate(var(--rt, 0deg));
      opacity: 1;
    }

    70% {
      transform: translate(-50%,-120%) scale(1) rotate(var(--rt, 0deg));
      opacity: 1;
    }

    100% {
      transform: translate(-50%,-150%) scale(.9) rotate(var(--rt, 0deg));
      opacity: 0;
    }
  }

  @keyframes malA {
    0% {
      opacity: 0;
      transform: translateY(-4em)rotate(-24deg);
    }

    24% {
      opacity: 1;
      transform: translateY(-3em)rotate(-34deg);
    }

    42% {
      opacity: 1;
      transform: translateY(1.2em)rotate(-176deg);
    }

    54% {
      opacity: 1;
      transform: translateY(.2em)rotate(-182deg);
    }

    78% {
      opacity: 1;
      transform: translateY(0)rotate(-180deg);
    }

    100% {
      opacity: 0;
      transform: translateY(0)rotate(-180deg);
    }
  }

  @keyframes malB {
    0% {
      opacity: 0;
      transform: translateY(-4em)rotate(-24deg);
    }

    24% {
      opacity: 1;
      transform: translateY(-3em)rotate(-34deg);
    }

    42% {
      opacity: 1;
      transform: translateY(1.2em)rotate(-176deg);
    }

    54% {
      opacity: 1;
      transform: translateY(.2em)rotate(-182deg);
    }

    78% {
      opacity: 1;
      transform: translateY(0)rotate(-180deg);
    }

    100% {
      opacity: 0;
      transform: translateY(0)rotate(-180deg);
    }
  }

  @keyframes lvlA {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%)scale(.2)rotate(-8deg);
    }

    22% {
      opacity: 1;
      transform: translate(-50%, -50%)scale(1.15)rotate(3deg);
    }

    40%, 75% {
      opacity: 1;
      transform: translate(-50%, -50%)scale(1)rotate(0);
    }

    100% {
      opacity: 0;
      transform: translate(-50%, -90%)scale(.9);
    }
  }

  @keyframes cdPop {
    0% {
      opacity: 0;
      transform: scale(.2);
    }

    35% {
      opacity: 1;
      transform: scale(1.2);
    }

    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes starPop {
    0% {
      transform: scale(0)rotate(-40deg);
    }

    60% {
      transform: scale(1.35)rotate(10deg);
    }

    100% {
      transform: scale(1)rotate(0);
    }
  }

  @keyframes fadeOut {
    to {
      opacity: 0;
    }
  }

  @keyframes spotIn {
    from {
      transform: translate(calc(var(--fx)*1cqw),calc(var(--fy)*1cqw)) scale(var(--fs));
    }

    to {
      transform: none;
    }
  }

  @keyframes spotOut {
    from {
      transform: none;
    }

    to {
      transform: translate(calc(var(--fx)*1cqw),calc(var(--fy)*1cqw)) scale(var(--fs));
    }
  }

  @keyframes nextBob {
    0%, 100% {
      transform: translateY(0) rotate(var(--r, 0deg));
    }

    50% {
      transform: translateY(-.9em) rotate(var(--r, 0deg));
    }
  }

  @keyframes nopeA {
    0%, 100% {
      transform: rotate(var(--r, 0deg));
    }

    20% {
      transform: translateX(-.7em) rotate(calc(var(--r, 0deg) - 3deg));
    }

    45% {
      transform: translateX(.7em) rotate(calc(var(--r, 0deg) + 3deg));
    }

    70% {
      transform: translateX(-.4em) rotate(var(--r, 0deg));
    }
  }

  @keyframes nopeB {
    0%, 100% {
      transform: rotate(var(--r, 0deg));
    }

    20% {
      transform: translateX(-.7em) rotate(calc(var(--r, 0deg) - 3deg));
    }

    45% {
      transform: translateX(.7em) rotate(calc(var(--r, 0deg) + 3deg));
    }

    70% {
      transform: translateX(-.4em) rotate(var(--r, 0deg));
    }
  }

  @keyframes mFlip {
    0%, 15% {
      transform: rotateY(0);
    }

    35%, 65% {
      transform: rotateY(180deg);
    }

    85%, 100% {
      transform: rotateY(0);
    }
  }

  @keyframes mDoor {
    0%, 15% {
      opacity: 1;
      transform: rotateY(0);
    }

    40%, 65% {
      opacity: 0;
      transform: rotateY(-108deg);
    }

    85%, 100% {
      opacity: 1;
      transform: rotateY(0);
    }
  }

  @keyframes mPopB {
    0%, 15% {
      opacity: 1;
      transform: none;
    }

    35%, 65% {
      opacity: 0;
      transform: translateY(-80%)rotate(-16deg)scale(.55);
    }

    85%, 100% {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes mPopF {
    0%, 15% {
      opacity: 0;
      transform: scale(.3);
    }

    38%, 65% {
      opacity: 1;
      transform: none;
    }

    85%, 100% {
      opacity: 0;
      transform: scale(.3);
    }
  }

  @keyframes menuIn {
    from {
      opacity: 0;
      transform: translateY(-8px)scale(.94);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes drIn {
    from {
      transform: translateX(100%);
    }

    to {
      transform: none;
    }
  }

  @keyframes flashRow {
    0%, 45% {
      background: #fff1c2;
    }

    100% {
      background: none;
    }
  }

  @keyframes lgShakeA {
    0%, 100% {
      transform: translateX(0);
    }

    20% {
      transform: translateX(-9px);
    }

    40% {
      transform: translateX(9px);
    }

    60% {
      transform: translateX(-6px);
    }

    80% {
      transform: translateX(4px);
    }
  }

  @keyframes lgShakeB {
    0%, 100% {
      transform: translateX(0);
    }

    20% {
      transform: translateX(-9px);
    }

    40% {
      transform: translateX(9px);
    }

    60% {
      transform: translateX(-6px);
    }

    80% {
      transform: translateX(4px);
    }
  }

  @keyframes zzUp {
    0% {
      opacity: 0;
      transform: translate(0, 12px)scale(.6);
    }

    25% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translate(16px, -48px)scale(1.25);
    }
  }

  .hero {
    background: var(--sun);
    border-bottom: 3px solid var(--ink);
    position: relative;
    overflow: clip;
  }

  .hero:before {
    content: "";
    pointer-events: none;
    aspect-ratio: 1;
    opacity: .9;
    background: #ffd863;
    border-radius: 50%;
    width: 62%;
    position: absolute;
    top: -30%;
    right: -8%;
  }

  .hero:after {
    content: "";
    pointer-events: none;
    aspect-ratio: 1;
    opacity: .55;
    background: #ffb72a;
    border-radius: 50%;
    width: 36%;
    position: absolute;
    bottom: -38%;
    left: -6%;
  }

  .hero-in {
    z-index: 1;
    grid-template-columns: repeat(auto-fit, minmax(min(470px, 100%), 1fr));
    align-items: center;
    gap: 56px;
    max-width: 1360px;
    margin: 0 auto;
    padding: 10px clamp(16px, 3vw, 44px) 84px;
    display: grid;
    position: relative;
  }

  .hv-wrap {
    padding: 14px 14px 0;
    position: relative;
  }

  .hv {
    aspect-ratio: 5 / 4;
    border: 3px solid var(--ink);
    box-shadow: 0 12px 0 var(--ink);
    background: var(--sky1);
    border-radius: 38px;
    transition: --sky1 .7s, --sky2 .7s, --far .7s, --mid .7s, --ground .7s, --ground2 .7s, --hole .7s, --holeIn .7s, --body .7s, --body2 .7s, --belly .7s;
    position: relative;
    overflow: hidden;
    container-type: inline-size;
  }

  .hv-chips {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    display: flex;
  }

  .hv-lbl {
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-right: 2px;
    font-size: 13px;
    font-weight: 800;
  }

  .tiles {
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 30px;
    display: grid;
  }

  .tile {
    border: 3px solid var(--ink);
    box-shadow: 0 8px 0 var(--ink);
    background: #fff;
    border-radius: 30px;
    flex-direction: column;
    transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .tile:hover {
    box-shadow: 0 13px 0 var(--ink);
    transform: translateY(-5px)rotate(-.5deg);
  }

  .tart {
    background: var(--tc);
    border-bottom: 3px solid var(--ink);
    height: 212px;
    position: relative;
    overflow: hidden;
    container-type: inline-size;
  }

  .tbody {
    flex-direction: column;
    flex: 1;
    gap: 8px;
    padding: 18px 22px 22px;
    display: flex;
  }

  .tname {
    font-family: var(--font-display);
    margin: 0;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.05;
  }

  .tdesc {
    color: var(--ink2);
    flex: 1;
    margin: 0;
    font-size: 16.5px;
    line-height: 1.42;
  }

  .tfoot {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    display: flex;
  }

  .tile.soon .tart {
    filter: saturate(.8);
  }

  .ta-q {
    border: 3px solid var(--ink);
    background: #fff;
    border-radius: 18px;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    height: 34%;
    padding: 14px 16px;
    display: flex;
    position: absolute;
    top: 16%;
    left: 11%;
    right: 11%;
  }

  .ta-q i {
    background: var(--ink);
    opacity: .85;
    border-radius: 5px;
    height: 9px;
    display: block;
  }

  .ta-q i + i {
    opacity: .35;
    width: 60%;
  }

  .ta-ans {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    display: grid;
    position: absolute;
    bottom: 12%;
    left: 11%;
    right: 11%;
  }

  .ta-ans b {
    border: 3px solid var(--ink);
    height: 38px;
    font-family: var(--font-display);
    background: #fff;
    border-radius: 14px;
    place-items: center;
    font-size: 20px;
    font-weight: 400;
    animation: 5.4s infinite pickA;
    display: grid;
  }

  .ta-ans b:nth-child(2) {
    animation-name: pickB;
  }

  .ta-ans b:nth-child(3) {
    animation-name: pickC;
  }

  .ta-hang {
    width: 34%;
    height: 62%;
    position: absolute;
    top: 10%;
    left: 10%;
  }

  .ta-word {
    gap: 7px;
    display: flex;
    position: absolute;
    bottom: 14%;
    left: 44%;
    right: 8%;
  }

  .ta-word b {
    border-bottom: 4px solid var(--ink);
    height: 44px;
    font-family: var(--font-display);
    color: var(--ink);
    flex: 1;
    place-items: end center;
    padding-bottom: 3px;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    display: grid;
  }

  .ta-word b span {
    opacity: 0;
    animation: 6s infinite letterIn;
    display: block;
  }

  .ta-word b:nth-child(2) span {
    animation-delay: .8s;
  }

  .ta-word b:nth-child(4) span {
    animation-delay: 1.6s;
  }

  .ta-keys {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    display: grid;
    position: absolute;
    top: 16%;
    left: 44%;
    right: 8%;
  }

  .ta-keys i {
    border: 2.5px solid var(--ink);
    background: #fff;
    border-radius: 8px;
    height: 26px;
  }

  .ta-keys i:nth-child(3n) {
    background: #ffd1c9;
  }

  .ta-keys i:nth-child(4n) {
    background: #c9f3e7;
  }

  .ta-grid {
    border: 3px solid var(--ink);
    background: #fff;
    border-radius: 18px;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    width: 70%;
    padding: 12px;
    display: grid;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .ta-grid span {
    font-family: var(--font-display);
    text-align: center;
    font-size: 19px;
    line-height: 1.3;
  }

  .ta-hl {
    border: 2.5px solid var(--tomato);
    background: #ff5c4361;
    border-radius: 14px;
    width: 0;
    height: 26px;
    animation: 4.8s ease-in-out infinite sweep;
    position: absolute;
    top: 31%;
    left: 15%;
  }

  .ta-mem {
    perspective: 700px;
    grid-template-columns: repeat(2, 84px);
    grid-auto-rows: 84px;
    place-content: center;
    gap: 14px;
    display: grid;
    position: absolute;
    inset: 0;
  }

  .ta-mem b {
    transform-style: preserve-3d;
    animation: 5s infinite flipA;
    position: relative;
  }

  .ta-mem b:nth-child(2) {
    animation-delay: .5s;
  }

  .ta-mem b:nth-child(3) {
    animation-delay: 1.1s;
  }

  .ta-mem b:nth-child(4) {
    animation-delay: 1.6s;
  }

  .ta-mem b i, .ta-mem b u {
    border: 3px solid var(--ink);
    backface-visibility: hidden;
    border-radius: 18px;
    place-items: center;
    display: grid;
    position: absolute;
    inset: 0;
  }

  .ta-mem b i {
    background: var(--sun);
  }

  .ta-mem b u {
    background: #fff;
    transform: rotateY(180deg);
  }

  .ta-mem svg {
    width: 50px;
    height: 50px;
  }

  .ta-ph {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    display: flex;
    position: absolute;
    top: 50%;
    left: 8%;
    right: 8%;
    transform: translateY(-50%);
  }

  .ta-ph b {
    border: 3px solid var(--ink);
    background: #fff;
    border-radius: 16px;
    padding: 12px 18px;
    font-size: 20px;
    font-weight: 800;
    animation: 4s ease-in-out infinite hopA;
  }

  .ta-ph b:nth-child(2) {
    background: var(--sun);
    animation-delay: .4s;
  }

  .ta-ph b:nth-child(3) {
    animation-delay: .8s;
  }

  .ta-cr {
    perspective: 700px;
    justify-content: center;
    align-items: center;
    gap: 14px;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .ta-cr b {
    width: 76px;
    height: 98px;
    transform-style: preserve-3d;
    animation: 6s infinite flipA;
    display: block;
    position: relative;
  }

  .ta-cr b:nth-child(2) {
    animation-delay: 1.3s;
  }

  .ta-cr b:nth-child(3) {
    animation-delay: 2.6s;
  }

  .ta-cr b i, .ta-cr b u {
    border: 3px solid var(--ink);
    backface-visibility: hidden;
    box-shadow: 0 4px 0 var(--ink);
    border-radius: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .ta-cr b i {
    background: var(--tomato) radial-gradient(circle,#ffffff57 0 2.5px,transparent 3px) 0 0/12px 12px;
  }

  .ta-cr b:nth-child(2) i {
    background-color: var(--mint);
  }

  .ta-cr b:nth-child(3) i {
    background-color: var(--lilac);
  }

  .ta-cr b u {
    background: #fff;
    gap: 2px;
    padding: 6px 4px 4px;
    text-decoration: none;
    transform: rotateY(180deg);
  }

  .ta-cr b u svg {
    width: 46px;
    height: 46px;
  }

  .ta-cr b u em {
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
  }

  .acards {
    grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
    gap: 28px;
    display: grid;
  }

  .acard {
    border: 3px solid var(--ink);
    box-shadow: 0 7px 0 var(--ink);
    background: #fff;
    border-radius: 28px;
    flex-direction: column;
    animation: .5s cubic-bezier(.3, 1.5, .5, 1) both cardIn;
    display: flex;
    overflow: hidden;
  }

  .athumb {
    aspect-ratio: 16 / 10;
    border-bottom: 3px solid var(--ink);
    background: var(--sky1);
    position: relative;
    overflow: hidden;
    container-type: inline-size;
  }

  .abody {
    flex-direction: column;
    flex: 1;
    padding: 16px 18px 18px;
    display: flex;
  }

  .atitle {
    font-family: var(--font-display);
    margin: 0 0 4px;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.1;
  }

  .ameta {
    color: var(--ink2);
    flex: 1;
    margin: 0 0 16px;
    font-size: 15px;
  }

  .arow {
    align-items: center;
    gap: 10px;
    display: flex;
  }

  .arow .sp {
    flex: 1;
  }

  .anew {
    border: 3px dashed var(--ink);
    background: #ffc53124;
    border-radius: 28px;
    align-content: center;
    place-items: center;
    gap: 14px;
    min-height: 280px;
    font-size: 19px;
    font-weight: 800;
    transition: background .15s, transform .15s;
    display: grid;
  }

  .anew:hover {
    background: #ffc53159;
    transform: rotate(-.8deg);
  }

  .anew .plus {
    background: var(--sun);
    border: 3px solid var(--ink);
    width: 68px;
    height: 68px;
    box-shadow: 0 4px 0 var(--ink);
    border-radius: 50%;
    place-items: center;
    display: grid;
  }

  .anew .plus svg {
    width: 30px;
    height: 30px;
  }

  .foot {
    border-top: 3px solid var(--ink);
    max-width: 1360px;
    color: var(--ink2);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin: 96px auto 0;
    padding: 26px clamp(16px, 3vw, 44px) 56px;
    font-size: 15px;
    display: flex;
  }

  .quota {
    border: 2.5px solid var(--ink);
    box-shadow: 0 3px 0 var(--ink);
    background: #fff;
    border-radius: 999px;
    align-items: center;
    gap: 12px;
    padding: 7px 16px 7px 7px;
    font-size: 14.5px;
    font-weight: 700;
    display: inline-flex;
  }

  .quota .qi {
    background: var(--sun);
    border: 2.5px solid var(--ink);
    border-radius: 50%;
    place-items: center;
    width: 32px;
    height: 32px;
    display: grid;
  }

  .quota .qi svg {
    width: 16px;
    height: 16px;
  }

  .quota.full .qi {
    background: var(--tomato);
    color: #fff;
  }

  .anew.locked {
    opacity: .8;
    cursor: not-allowed;
    background: #ede9f7;
    border-color: #8f83a3;
  }

  .anew.locked:hover {
    background: #ede9f7;
    transform: none;
  }

  .anew.locked .plus {
    box-shadow: none;
    color: #6b5f82;
    background: #fff;
    border-color: #8f83a3;
  }

  .sec.dash-intro {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding-top: 44px;
    display: flex;
  }

  .dash-intro .eyebrow {
    margin-bottom: 18px;
  }

  .dash-intro .h2 {
    font-size: clamp(38px, 5vw, 64px);
  }

  @media (max-width: 640px) {
    .dash-intro > .btn {
      width: 100%;
    }
  }

  .ed-top {
    z-index: 30;
    border-bottom: 3px solid var(--ink);
    background: #fff;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 12px clamp(16px, 3vw, 44px);
    display: flex;
    position: sticky;
    top: 0;
  }

  .ed-top .logo {
    font-size: 30px;
  }

  .ed-top .logo img {
    width: auto;
    height: 40px;
  }

  .steps {
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0 auto;
    display: flex;
  }

  .step {
    border: 2.5px solid var(--ink);
    min-height: 48px;
    box-shadow: 0 3px 0 var(--ink);
    background: #fff;
    border-radius: 999px;
    align-items: center;
    gap: 10px;
    padding: 0 20px 0 8px;
    font-size: 16px;
    font-weight: 800;
    transition: transform .1s, background .15s, box-shadow .1s;
    display: inline-flex;
  }

  .step:hover {
    box-shadow: 0 5px 0 var(--ink);
    transform: translateY(-2px);
  }

  .step b {
    border: 2.5px solid var(--ink);
    width: 32px;
    height: 32px;
    font-family: var(--font-display);
    background: #ede9f7;
    border-radius: 50%;
    place-items: center;
    font-size: 16px;
    font-weight: 400;
    transition: background .2s, transform .3s cubic-bezier(.3, 1.7, .5, 1);
    display: grid;
  }

  .step.on {
    background: var(--sun);
  }

  .step.on b {
    background: var(--ink);
    color: #fff;
    transform: rotate(-8deg)scale(1.1);
  }

  .step-link {
    border-top: 3px dotted var(--ink);
    width: 28px;
    height: 0;
  }

  .saved {
    color: var(--ink2);
    align-items: center;
    gap: 7px;
    min-width: 96px;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
  }

  .saved svg {
    color: var(--mint);
    width: 18px;
    height: 18px;
  }

  .saved.pop svg {
    animation: .5s cubic-bezier(.3, 1.7, .5, 1) popIn;
  }

  .ed-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 34px;
    max-width: 1520px;
    margin: 0 auto;
    padding: 30px clamp(16px, 3vw, 44px) 90px;
    display: grid;
  }

  .panel {
    min-width: 0;
  }

  .ed-stage.playing {
    position: static;
  }

  .ed-stage {
    isolation: isolate;
    flex-direction: column;
    gap: 18px;
    display: flex;
    position: sticky;
    top: 98px;
  }

  .live {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    display: flex;
  }

  .live-l {
    letter-spacing: .05em;
    text-transform: uppercase;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    font-weight: 800;
    display: inline-flex;
  }

  .live-l i {
    background: var(--tomato);
    border-radius: 50%;
    width: 11px;
    height: 11px;
    animation: 1.4s ease-in-out infinite rcPulse;
  }

  .hintline {
    color: var(--ink2);
    margin: 0;
    font-size: 14.5px;
    line-height: 1.4;
  }

  .wandbar {
    border: 2.5px dashed var(--ink);
    background: #8e6cff1a;
    border-radius: 20px;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 4px 0 22px;
    padding: 14px 16px;
    display: flex;
  }

  .wandbar p {
    color: var(--ink2);
    flex: 1;
    min-width: 180px;
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
  }

  .btn-wand {
    background: var(--lilac);
    color: #fff;
  }

  .zones {
    grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
    gap: 20px;
    display: grid;
  }

  .zone {
    --zc: var(--mint);
    border: 3px solid var(--ink);
    box-shadow: 0 6px 0 var(--ink);
    background: #fff;
    border-radius: 26px;
    padding: 18px;
    transition: background .15s, transform .2s cubic-bezier(.3, 1.6, .5, 1);
    position: relative;
  }

  .zone.no {
    --zc: var(--tomato);
  }

  .zone.over {
    background: #fff4cc;
    transform: scale(1.015)rotate(-.4deg);
  }

  .zone-h {
    align-items: center;
    gap: 13px;
    margin-bottom: 14px;
    display: flex;
  }

  .zone-ico {
    background: var(--zc);
    border: 2.5px solid var(--ink);
    color: #fff;
    border-radius: 15px;
    flex: none;
    place-items: center;
    width: 48px;
    height: 48px;
    display: grid;
    transform: rotate(-6deg);
  }

  .zone-ico svg {
    width: 26px;
    height: 26px;
  }

  .zone-t {
    font-family: var(--font-display);
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.05;
  }

  .zone-s {
    color: var(--ink2);
    margin: 3px 0 0;
    font-size: 14px;
    line-height: 1.3;
  }

  .lblrow {
    color: var(--ink2);
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 13.5px;
    font-weight: 800;
    display: flex;
  }

  .lblrow span {
    white-space: nowrap;
  }

  .inp-s {
    border-width: 2px;
    border-radius: 13px;
    flex: 1;
    min-width: 130px;
    min-height: 44px;
    font-size: 16px;
  }

  .items {
    flex-direction: column;
    gap: 9px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .item {
    grid-template-columns: 52px minmax(0, 1fr) 40px 40px;
    align-items: center;
    gap: 8px;
    animation: .4s cubic-bezier(.3, 1.6, .5, 1) rowIn;
    display: grid;
  }

  .item.drag {
    opacity: .35;
  }

  .item .inp {
    cursor: text;
    min-height: 50px;
    font-size: 17px;
  }

  .stk {
    border: 2.5px solid var(--ink);
    cursor: grab;
    background: #f6f5fb;
    border-radius: 15px;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 4px;
    transition: transform .12s, background .15s;
    display: grid;
  }

  .stk:hover {
    background: var(--sun);
    transform: rotate(-6deg)scale(1.07);
  }

  .stk svg, .stk img {
    object-fit: contain;
    border-radius: 8px;
    width: 100%;
    height: 100%;
  }

  .stk svg.none {
    color: #9a8fae;
    width: 24px;
    height: 24px;
  }

  .sbtn {
    width: 40px;
    height: 40px;
    color: var(--ink2);
    background: none;
    border: 2px solid #0000;
    border-radius: 12px;
    place-items: center;
    transition: background .15s, color .15s;
    display: grid;
  }

  .sbtn:hover {
    color: var(--ink);
    border-color: var(--ink);
    background: #ede9f7;
  }

  .sbtn svg {
    width: 20px;
    height: 20px;
  }

  .sbtn.del:hover {
    color: #a4210f;
    background: #ffd9d3;
  }

  .adder {
    gap: 8px;
    display: flex;
  }

  .adder .inp {
    background: #fbfafe;
    border-style: dashed;
    min-height: 50px;
    font-size: 16.5px;
  }

  .meter {
    color: var(--ink2);
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
  }

  .meter i {
    border: 2.5px solid var(--ink);
    background: #fff;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    transition: background .2s, transform .25s cubic-bezier(.3, 1.7, .5, 1);
  }

  .meter i.on {
    background: var(--zc);
    transform: scale(1.15);
  }

  .meter span {
    margin-left: 6px;
  }

  .nextbar {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 30px;
    display: flex;
  }

  .crow {
    grid-template-columns: 28px 52px minmax(0, 1fr) auto 40px;
  }

  .cnum {
    border: 2px solid var(--ink);
    width: 28px;
    height: 28px;
    font-family: var(--font-display);
    background: #ede9f7;
    border-radius: 50%;
    place-items: center;
    font-size: 14px;
    line-height: 1;
    display: grid;
  }

  .mv {
    flex-direction: column;
    display: flex;
  }

  .mvb {
    border-radius: 9px;
    width: 34px;
    height: 23px;
  }

  .mvb svg {
    width: 16px;
    height: 16px;
  }

  .mvb.up svg {
    transform: rotate(90deg);
  }

  .mvb.dn svg {
    transform: rotate(-90deg);
  }

  .mvb[disabled] {
    opacity: .28;
    pointer-events: none;
  }

  .stk.blank {
    background: #fff4cc;
    border-style: dashed;
  }

  .wandbar.locked {
    background: #f1eff7;
    border-color: #9a8fae;
  }

  .wandbar.locked p {
    color: #6b5f82;
  }

  .lockic {
    color: #6b5f82;
    background: #fff;
    border: 2.5px solid #9a8fae;
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    display: grid;
  }

  .lockic svg {
    width: 20px;
    height: 20px;
  }

  .sect {
    margin-bottom: 32px;
  }

  .sect-h {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 13px;
    display: flex;
  }

  .sect-t {
    font-family: var(--font-display);
    margin: 0;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.1;
  }

  .sect-n {
    color: var(--ink2);
    font-size: 14px;
  }

  .scn {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 13px;
    display: grid;
  }

  .scn-b {
    border: 2.5px solid var(--ink);
    text-align: left;
    box-shadow: 0 4px 0 var(--ink);
    cursor: pointer;
    background: #fff;
    border-radius: 18px;
    padding: 0;
    transition: transform .12s, box-shadow .12s;
    display: block;
    position: relative;
    overflow: hidden;
  }

  .scn-hit {
    z-index: 6;
    border-radius: inherit;
    background: none;
    border: 0;
    padding: 0;
    position: absolute;
    inset: 0;
  }

  .scn-b:focus-within {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
  }

  .scn-b:hover {
    box-shadow: 0 7px 0 var(--ink);
    transform: translateY(-3px);
  }

  .scn-b.on {
    box-shadow: 0 0 0 4px var(--blue),0 4px 0 var(--ink);
  }

  .scn-p {
    aspect-ratio: 4 / 3;
    background: var(--sky1);
    border-bottom: 2.5px solid var(--ink);
    position: relative;
    overflow: hidden;
    container-type: inline-size;
  }

  .scn-n {
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 800;
    display: block;
  }

  .scn-b .ck {
    background: var(--ink);
    color: #fff;
    z-index: 5;
    border-radius: 50%;
    place-items: center;
    width: 26px;
    height: 26px;
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
  }

  .scn-b .ck svg {
    width: 15px;
    height: 15px;
  }

  .scn-b.on .ck {
    display: grid;
  }

  .scn-up {
    aspect-ratio: 4 / 3;
    border-bottom: 2.5px solid var(--ink);
    color: var(--ink);
    background: repeating-linear-gradient(45deg, #f6f5fb 0 10px, #ede9f7 10px 20px);
    place-items: center;
    gap: 6px;
    display: grid;
  }

  .scn-up svg {
    width: 30px;
    height: 30px;
  }

  .scn-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }

  .tod {
    border: 2.5px solid var(--ink);
    box-shadow: 0 4px 0 var(--ink);
    background: #fff;
    border-radius: 22px;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    display: flex;
  }

  .tod-ico {
    border: 2.5px solid var(--ink);
    background: var(--tc);
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 56px;
    height: 56px;
    transition: background .3s;
    display: grid;
  }

  .tod-ico svg {
    width: 30px;
    height: 30px;
  }

  .tod-r {
    flex: 1;
    min-width: 0;
  }

  .tod-labels {
    color: var(--ink2);
    text-transform: uppercase;
    letter-spacing: .05em;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 800;
    display: flex;
  }

  input[type="range"].rng {
    appearance: none;
    cursor: pointer;
    background: none;
    width: 100%;
    height: 34px;
    margin: 0;
  }

  .rng::-webkit-slider-runnable-track {
    border: 2.5px solid var(--ink);
    background: linear-gradient(90deg, #8fd6ff 0%, #ffe27a 30%, #ffa46b 58%, #6b63c9 82%, #2b2a6e 100%);
    border-radius: 999px;
    height: 16px;
  }

  .rng::-moz-range-track {
    border: 2.5px solid var(--ink);
    background: linear-gradient(90deg, #8fd6ff 0%, #ffe27a 30%, #ffa46b 58%, #6b63c9 82%, #2b2a6e 100%);
    border-radius: 999px;
    height: 11px;
  }

  .rng::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 3px solid var(--ink);
    width: 34px;
    height: 34px;
    box-shadow: 0 3px 0 var(--ink);
    background: #fff;
    border-radius: 50%;
    margin-top: -12px;
    transition: transform .12s;
  }

  .rng::-moz-range-thumb {
    border: 3px solid var(--ink);
    width: 28px;
    height: 28px;
    box-shadow: 0 3px 0 var(--ink);
    background: #fff;
    border-radius: 50%;
  }

  .rng:active::-webkit-slider-thumb {
    transform: scale(1.15);
  }

  .chs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    display: grid;
  }

  .ch-b {
    border: 2.5px solid var(--ink);
    box-shadow: 0 4px 0 var(--ink);
    background: #fff;
    border-radius: 20px;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px 8px;
    transition: transform .12s, box-shadow .12s;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .ch-b svg {
    width: 62px;
    height: 77px;
    transition: transform .25s cubic-bezier(.3, 1.7, .5, 1);
  }

  .ch-b:hover svg {
    transform: translateY(-6px)rotate(-5deg);
  }

  .ch-b.on {
    background: var(--sun);
    box-shadow: 0 0 0 4px var(--blue),0 4px 0 var(--ink);
  }

  .ch-b span {
    font-size: 14px;
    font-weight: 800;
  }

  .ch-clip {
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 62px;
    display: flex;
    overflow: hidden;
  }

  .sws {
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;
    display: flex;
  }

  .swb {
    border: 2.5px solid var(--ink);
    width: 46px;
    height: 46px;
    box-shadow: 0 3px 0 var(--ink);
    border-radius: 50%;
    place-items: center;
    padding: 0;
    transition: transform .12s;
    display: grid;
    position: relative;
  }

  .swb:hover {
    transform: translateY(-2px)scale(1.06);
  }

  .swb.on:after {
    content: "";
    border: 3px solid var(--blue);
    border-radius: 50%;
    position: absolute;
    inset: -8px;
  }

  .swb svg {
    width: 22px;
    height: 22px;
    color: var(--ink);
  }

  .swb-any {
    cursor: pointer;
    background: conic-gradient(#ff5c43, #ffc531, #19b394, #3d9bff, #8e6cff, #ff7bae, #ff5c43);
  }

  .swb-any input {
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }

  .fnts {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 12px;
    display: grid;
  }

  .fnt-b {
    border: 2.5px solid var(--ink);
    text-align: left;
    box-shadow: 0 4px 0 var(--ink);
    background: #fff;
    border-radius: 18px;
    flex-direction: column;
    gap: 2px;
    min-height: 84px;
    padding: 10px 12px 12px;
    transition: transform .12s;
    display: flex;
  }

  .fnt-b:hover {
    transform: translateY(-3px);
  }

  .fnt-b.on {
    background: var(--sun);
    box-shadow: 0 0 0 4px var(--blue),0 4px 0 var(--ink);
  }

  .fnt-b b {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
  }

  .fnt-b span {
    color: var(--ink2);
    font-size: 13px;
    font-weight: 800;
  }

  .chip .fxi {
    flex: none;
    width: 16px;
    height: 16px;
    display: block;
  }

  .fxi.st {
    background: var(--sun);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }

  .fxi.cf {
    background: var(--rose);
    border-radius: 2px;
    width: 14px;
    height: 9px;
    transform: rotate(-24deg);
  }

  .fxi.bb {
    border: 2.5px solid;
    border-radius: 50%;
  }

  .chip .pat {
    background-color: var(--accent);
    background-image: var(--pat);
    background-size: var(--pz);
    border: 2px solid;
    border-radius: 5px;
    flex: none;
    width: 18px;
    height: 18px;
    font-size: 7px;
  }

  .rvos {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    display: grid;
  }

  .rvo {
    border: 2.5px solid var(--ink);
    box-shadow: 0 4px 0 var(--ink);
    text-align: center;
    background: #fff;
    border-radius: 20px;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px 10px 12px;
    transition: transform .12s, box-shadow .12s, background .15s;
    display: flex;
  }

  .rvo:hover {
    transform: translateY(-3px);
  }

  .rvo.on {
    background: var(--sun);
    box-shadow: 0 0 0 4px var(--blue),0 4px 0 var(--ink);
  }

  .rvo b {
    margin-top: 8px;
    font-size: 16px;
    font-weight: 800;
  }

  .rvo small {
    color: var(--ink2);
    font-size: 13px;
    line-height: 1.3;
  }

  .rvm {
    perspective: 260px;
    width: 46px;
    height: 58px;
    display: block;
  }

  .rvc {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    display: block;
    position: relative;
  }

  .rvf, .rvb {
    border: 2.5px solid var(--ink);
    backface-visibility: hidden;
    border-radius: 9px;
    display: block;
    position: absolute;
    inset: 0;
  }

  .rvb {
    background-color: var(--accent);
    background-image: var(--pat);
    background-size: var(--pz);
    font-size: 6px;
  }

  .rvf {
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8l12.4 25.2 27.8 4-20.1 19.6 4.7 27.7L50 71.4 25.2 84.5l4.7-27.7L9.8 37.2l27.8-4z' fill='%23FFC531' stroke='%2322123A' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat;
  }

  .rvm.rv-flip .rvf {
    transform: rotateY(180deg);
  }

  .rvm.rv-flip .rvc {
    animation: 3.4s ease-in-out infinite mFlip;
  }

  .rvm.rv-door .rvb {
    transform-origin: 0;
    backface-visibility: visible;
    animation: 3.4s ease-in-out infinite mDoor;
  }

  .rvm.rv-pop .rvb {
    animation: 3.4s ease-in-out infinite mPopB;
  }

  .rvm.rv-pop .rvf {
    animation: 3.4s ease-in-out infinite mPopF;
  }

  .scn-b.lk {
    cursor: not-allowed;
    opacity: .6;
  }

  .scn-b.lk:hover {
    box-shadow: 0 4px 0 var(--ink);
    transform: none;
  }

  .login {
    background: var(--paper);
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    min-height: 100vh;
    display: grid;
  }

  .lgn-art {
    background: var(--sun);
    border-right: 3px solid var(--ink);
    flex-direction: column;
    min-height: 100vh;
    padding: 26px clamp(24px, 4vw, 64px) 0;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .lgn-art:before {
    content: "";
    aspect-ratio: 1;
    opacity: .9;
    pointer-events: none;
    background: #ffd863;
    border-radius: 50%;
    width: 70%;
    position: absolute;
    top: -16%;
    right: -18%;
  }

  .lgn-art:after {
    content: "";
    aspect-ratio: 1;
    opacity: .45;
    pointer-events: none;
    background: #ffb72a;
    border-radius: 50%;
    width: 40%;
    position: absolute;
    top: 34%;
    left: -14%;
  }

  .lgn-art .logo {
    z-index: 3;
    position: relative;
  }

  .lgn-copy {
    z-index: 3;
    margin-top: clamp(20px, 6vh, 72px);
    position: relative;
  }

  .lgn-copy .h1 {
    margin: 20px 0 18px;
    font-size: clamp(44px, 5.4vw, 86px);
  }

  .lgn-copy .lead {
    margin: 0;
  }

  .lgn-sc {
    z-index: 2;
    flex: 1;
    min-height: 340px;
    margin: 0 calc(-1 * clamp(24px, 4vw, 64px));
    position: relative;
    container-type: inline-size;
  }

  .lgn-h {
    border: 3px solid var(--ink);
    border-radius: 50%;
    position: absolute;
  }

  .lgn-h.a {
    background: #a6e3a8;
    width: 100cqw;
    height: 58cqw;
    bottom: -30cqw;
    left: -34cqw;
  }

  .lgn-h.b {
    background: #b9edbb;
    width: 84cqw;
    height: 52cqw;
    bottom: -26cqw;
    right: -30cqw;
  }

  .lgn-h.c {
    z-index: 2;
    background: #74cf8a;
    height: 78cqw;
    bottom: -62cqw;
    left: -12cqw;
    right: -12cqw;
  }

  .lgn-hole {
    z-index: 3;
    border: 3px solid var(--ink);
    background: #43271f;
    border-radius: 50%;
    width: 30cqw;
    height: 8cqw;
    margin-left: -15cqw;
    position: absolute;
    bottom: 13.4cqw;
    left: 38%;
    box-shadow: inset 0 1.1cqw #5b3a2e;
  }

  .lgn-mc {
    z-index: 4;
    width: 23cqw;
    height: 31cqw;
    margin-left: -11.5cqw;
    position: absolute;
    bottom: 15.2cqw;
    left: 38%;
    overflow: hidden;
  }

  .lgn-mc svg {
    width: 100%;
    animation: 6.5s ease-in-out infinite peek;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .lgn-lip {
    z-index: 5;
    border: 3px solid var(--ink);
    background: #43271f;
    border-top: 0;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    width: 30cqw;
    height: 4.2cqw;
    margin-left: -15cqw;
    position: absolute;
    bottom: 13.4cqw;
    left: 38%;
  }

  .lgn-cards.ta-cr {
    z-index: 4;
    width: 44cqw;
    height: 120px;
    inset: auto 4cqw 25cqw auto;
  }

  .lgn-form {
    place-items: center;
    padding: clamp(20px, 4vw, 56px);
    display: grid;
  }

  .lgn-card {
    width: min(470px, 100%);
  }

  .lgn-t {
    font-family: var(--font-display);
    margin: 0 0 10px;
    font-size: clamp(34px, 3.4vw, 46px);
    font-weight: 400;
    line-height: 1;
  }

  .lgn-s {
    color: var(--ink2);
    margin: 0 0 26px;
    font-size: 17px;
    line-height: 1.45;
  }

  .lgn-fm.shA {
    animation: .45s lgShakeA;
  }

  .lgn-fm.shB {
    animation: .45s lgShakeB;
  }

  .lgn-err {
    border: 2.5px solid var(--ink);
    color: #7a1f12;
    background: #ffe1db;
    border-radius: 14px;
    align-items: center;
    gap: 10px;
    margin: -4px 0 16px;
    padding: 11px 14px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    display: flex;
  }

  .lgn-err svg {
    flex: none;
    width: 20px;
    height: 20px;
  }

  .lgn-row {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px;
    display: flex;
  }

  .lgn-go {
    width: 100%;
  }

  .lgn-pz {
    text-align: center;
    justify-items: center;
    gap: 6px;
    display: grid;
  }

  .lgn-zz {
    border: 3px solid var(--ink);
    width: 156px;
    height: 156px;
    box-shadow: 0 7px 0 var(--ink);
    background: #e4daff;
    border-radius: 50%;
    place-items: end center;
    margin-bottom: 16px;
    display: grid;
    position: relative;
    overflow: hidden;
  }

  .lgn-zz svg {
    --eo: 0;
    --ec: 1;
    width: 100px;
    height: 125px;
    margin-bottom: -18px;
  }

  .lgn-zz .z {
    font-family: var(--font-display);
    color: var(--ink);
    opacity: 0;
    font-size: 30px;
    line-height: 1;
    animation: 2.8s ease-out infinite zzUp;
    position: absolute;
    top: 48px;
    right: 26px;
  }

  .lgn-zz .z:nth-of-type(2) {
    font-size: 22px;
    animation-delay: .9s;
    right: 44px;
  }

  .lgn-zz .z:nth-of-type(3) {
    font-size: 18px;
    animation-delay: 1.8s;
    right: 12px;
  }

  .lgn-pz .lgn-t {
    margin-bottom: 6px;
  }

  .lgn-pz .lgn-s {
    max-width: 34ch;
    margin-bottom: 18px;
  }

  .lgn-pz .btn {
    width: 100%;
  }

  .lgn-pz .btn + .btn {
    margin-top: 14px;
  }

  .av {
    border: 2.5px solid var(--ink);
    background: var(--lilac);
    color: #fff;
    width: 38px;
    height: 38px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: .02em;
    border-radius: 50%;
    flex: none;
    place-items: center;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    display: inline-grid;
  }

  .av.lg {
    width: 52px;
    height: 52px;
    font-size: 21px;
  }

  .uwrap {
    position: relative;
  }

  .uchip {
    border: 2.5px solid var(--ink);
    min-height: 48px;
    box-shadow: 0 4px 0 var(--ink);
    background: #fff;
    border-radius: 999px;
    align-items: center;
    gap: 10px;
    padding: 4px 16px 4px 4px;
    font-size: 16px;
    font-weight: 700;
    transition: transform .1s, box-shadow .1s;
    display: inline-flex;
  }

  .uchip:hover {
    box-shadow: 0 6px 0 var(--ink);
    transform: translateY(-2px);
  }

  .uchip:active {
    box-shadow: 0 1px 0 var(--ink);
    transform: translateY(3px);
  }

  .uchip .ico {
    width: 16px;
    height: 16px;
    transition: transform .2s;
  }

  .uchip[aria-expanded="true"] .ico {
    transform: rotate(180deg);
  }

  .menu-back {
    z-index: 70;
    position: fixed;
    inset: 0;
  }

  .umenu {
    z-index: 71;
    border: 3px solid var(--ink);
    width: min(310px, 86vw);
    box-shadow: 0 8px 0 var(--ink);
    transform-origin: 100% 0;
    text-align: left;
    background: #fff;
    border-radius: 24px;
    padding: 10px;
    animation: .25s cubic-bezier(.3, 1.5, .5, 1) menuIn;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
  }

  @media (max-width: 640px) {
    .uwrap {
      position: static;
    }

    .umenu {
      transform-origin: 0 0;
      width: auto;
      top: calc(100% - 4px);
      left: clamp(16px, 3vw, 44px);
      right: clamp(16px, 3vw, 44px);
    }
  }

  .um-h {
    border-bottom: 2.5px dashed #d9d2ea;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    padding: 8px 8px 12px;
    display: flex;
  }

  .um-h b {
    font-size: 17px;
    line-height: 1.15;
    display: block;
  }

  .um-h .em {
    color: var(--ink2);
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 188px;
    font-size: 13.5px;
    display: block;
    overflow: hidden;
  }

  .um-r {
    padding: 2px 8px 8px;
  }

  .um-i {
    text-align: left;
    background: none;
    border: 0;
    border-radius: 14px;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    font-size: 16px;
    font-weight: 700;
    transition: background .12s;
    display: flex;
  }

  .um-i:hover {
    background: #f1ecff;
  }

  .um-i .ico {
    width: 20px;
    height: 20px;
    color: var(--ink2);
  }

  .um-i.out:hover {
    background: #ffe1db;
  }

  .rpill {
    border: 2px solid var(--ink);
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    background: #fff;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 800;
    display: inline-flex;
  }

  .rpill svg {
    width: 13px;
    height: 13px;
  }

  .rpill.adm {
    background: var(--lilac);
    color: #fff;
  }

  .asbar {
    z-index: 120;
    border: 3px solid var(--ink);
    background: var(--lilac);
    color: #fff;
    max-width: calc(100vw - 32px);
    box-shadow: 0 5px 0 var(--ink);
    border-radius: 999px;
    align-items: center;
    gap: 12px;
    padding: 7px 7px 7px 14px;
    font-size: 14.5px;
    font-weight: 700;
    animation: .35s cubic-bezier(.3, 1.5, .5, 1) menuIn;
    display: flex;
    position: fixed;
    bottom: 16px;
    left: 16px;
  }

  .asbar .btn {
    min-height: 38px;
    box-shadow: 0 3px 0 var(--ink);
    padding: 0 16px;
    font-size: 14px;
  }

  .asbar .btn:hover {
    box-shadow: 0 5px 0 var(--ink);
  }

  .app.has-as .toast {
    bottom: 88px;
  }

  .admin {
    background: var(--paper);
    min-height: 100vh;
  }

  .adm-top {
    z-index: 40;
    border-bottom: 3px solid var(--ink);
    background: #fff;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 12px clamp(16px, 3vw, 44px);
    display: flex;
    position: sticky;
    top: 0;
  }

  .adm-top .logo {
    font-size: 30px;
  }

  .adm-top .logo img {
    width: auto;
    height: 40px;
  }

  .adm-tag {
    border: 2.5px solid var(--ink);
    background: var(--lilac);
    color: #fff;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
  }

  .adm-tag svg {
    flex: none;
    width: 16px;
    height: 16px;
  }

  .adm-main {
    max-width: 1360px;
    margin: 0 auto;
    padding: 36px clamp(16px, 3vw, 44px) 100px;
  }

  .adm-head {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 28px;
    display: flex;
  }

  .stats {
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 18px;
    margin-bottom: 36px;
    display: grid;
  }

  .stat {
    --sc: var(--blue);
    border: 3px solid var(--ink);
    box-shadow: 0 6px 0 var(--ink);
    background: #fff;
    border-radius: 24px;
    grid-template-rows: auto auto;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 14px;
    padding: 16px 18px;
    animation: .5s cubic-bezier(.3, 1.5, .5, 1) both cardIn;
    display: grid;
  }

  .stat .si {
    background: var(--sc);
    border: 2.5px solid var(--ink);
    width: 54px;
    height: 54px;
    color: var(--ink);
    border-radius: 16px;
    grid-row: 1 / 3;
    place-items: center;
    display: grid;
    transform: rotate(-6deg);
  }

  .stat .si svg {
    width: 26px;
    height: 26px;
  }

  .stat b {
    font-family: var(--font-display);
    align-self: end;
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
  }

  .stat .sl {
    color: var(--ink2);
    align-self: start;
    font-size: 14px;
    font-weight: 700;
  }

  .adm-tools {
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    margin-bottom: 18px;
    display: flex;
  }

  .srch {
    flex: 280px;
    max-width: 440px;
    position: relative;
  }

  .srch > svg {
    width: 20px;
    height: 20px;
    color: var(--ink2);
    pointer-events: none;
    margin-top: -10px;
    position: absolute;
    top: 50%;
    left: 16px;
  }

  .utable {
    border: 3px solid var(--ink);
    box-shadow: 0 7px 0 var(--ink);
    background: #fff;
    border-radius: 26px;
    overflow: hidden;
  }

  .urow {
    cursor: pointer;
    border-top: 2.5px solid #ede9f7;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, 1fr) 136px;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    transition: background .15s;
    display: grid;
  }

  .urow:first-child {
    border-top: 0;
  }

  .urow:not(.uhead):hover {
    background: #faf8ff;
  }

  .urow:focus-visible {
    outline-offset: -4px;
  }

  .uhead {
    cursor: default;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink2);
    border-bottom: 3px solid var(--ink);
    background: #f6f5fb;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 12.5px;
    font-weight: 800;
  }

  .urow.flash {
    animation: 2s ease-out flashRow;
  }

  .u-who {
    align-items: center;
    gap: 13px;
    min-width: 0;
    display: flex;
  }

  .u-who > div {
    min-width: 0;
  }

  .u-who b {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    line-height: 1.2;
    display: flex;
  }

  .u-who .em {
    color: var(--ink2);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    display: block;
    overflow: hidden;
  }

  .urow.is-paused .av {
    filter: grayscale();
    opacity: .7;
  }

  .urow.is-paused .u-who b {
    color: #6b5f82;
  }

  .u-st {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    display: flex;
  }

  .spill {
    border: 2px solid var(--ink);
    white-space: nowrap;
    background: #fff;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
  }

  .spill i {
    background: var(--mint);
    border: 2px solid var(--ink);
    border-radius: 50%;
    width: 10px;
    height: 10px;
  }

  .spill.res {
    background: #fff1c2;
  }

  .spill.res i {
    background: var(--sun);
  }

  .spill.pau {
    background: #ffe1db;
  }

  .spill.pau i {
    background: var(--tomato);
  }

  .ask {
    color: #7a1f12;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 800;
    display: inline-flex;
  }

  .ask svg {
    width: 14px;
    height: 14px;
  }

  .u-acts b {
    font-size: 17px;
  }

  .u-acts .of {
    color: var(--ink2);
    margin-left: 5px;
    font-size: 14px;
    font-weight: 600;
  }

  .ubar {
    border: 2px solid var(--ink);
    background: #ede9f7;
    border-radius: 99px;
    max-width: 140px;
    height: 10px;
    margin-top: 7px;
    overflow: hidden;
  }

  .ubar i {
    background: var(--mint);
    height: 100%;
    transition: width .3s;
    display: block;
  }

  .ubar.full i {
    background: var(--tomato);
  }

  .u-last {
    color: var(--ink2);
    font-size: 14.5px;
    font-weight: 600;
  }

  .u-act {
    justify-content: flex-end;
    gap: 8px;
    display: flex;
  }

  .u-act .ibtn {
    width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .u-act .ibtn .ico {
    width: 18px;
    height: 18px;
  }

  .uempty {
    text-align: center;
    color: var(--ink2);
    padding: 36px 20px;
    font-size: 16px;
    font-weight: 700;
  }

  .evl-h {
    margin-top: 46px;
  }

  .evl {
    border: 3px solid var(--ink);
    box-shadow: 0 7px 0 var(--ink);
    background: #fff;
    border-radius: 26px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
  }

  .evl li {
    border-top: 2.5px solid #ede9f7;
    align-items: center;
    gap: 14px;
    padding: 13px 20px;
    font-size: 15.5px;
    line-height: 1.35;
    display: flex;
  }

  .evl li:first-child {
    border-top: 0;
  }

  .evl .ic {
    border: 2.5px solid var(--ink);
    background: var(--ec, #ede9f7);
    width: 36px;
    height: 36px;
    color: var(--ink);
    border-radius: 50%;
    flex: none;
    place-items: center;
    display: grid;
  }

  .evl .ic svg {
    width: 17px;
    height: 17px;
  }

  .evl time {
    color: var(--ink2);
    white-space: nowrap;
    margin-left: auto;
    padding-left: 12px;
    font-size: 13.5px;
    font-weight: 600;
  }

  .dr-back {
    z-index: 150;
    background: #22123a80;
    animation: .2s fade;
    position: fixed;
    inset: 0;
  }

  .drawer {
    z-index: 151;
    border-left: 3px solid var(--ink);
    background: #fff;
    flex-direction: column;
    width: min(540px, 100vw);
    animation: .38s cubic-bezier(.25, 1.1, .45, 1) drIn;
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    box-shadow: -12px 0 #22123a1f;
  }

  .dr-h {
    border-bottom: 3px solid var(--ink);
    background: #f6f5fb;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    display: flex;
  }

  .dr-h .tt {
    flex: 1;
    min-width: 0;
  }

  .dr-h h2 {
    font-family: var(--font-display);
    margin: 0;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.05;
  }

  .dr-h p {
    color: var(--ink2);
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 3px 0 0;
    font-size: 14px;
    overflow: hidden;
  }

  .dr-body {
    flex: 1;
    padding: 22px 22px 12px;
    overflow: auto;
  }

  .dr-sec {
    margin-bottom: 28px;
  }

  .dr-sec > .fld:last-child {
    margin-bottom: 0;
  }

  .dr-t {
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink2);
    margin: 0 0 10px;
    font-size: 13.5px;
    font-weight: 800;
  }

  .dr-s {
    color: var(--ink2);
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.4;
  }

  .dr-f {
    border-top: 3px solid var(--ink);
    background: #fff;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 22px;
    display: flex;
  }

  .prm {
    border: 2.5px solid var(--ink);
    background: #fff;
    border-radius: 18px;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    padding: 12px 14px;
    transition: background .15s;
    display: flex;
  }

  .prm.off {
    background: #f6f5fb;
  }

  .prm .pi {
    border: 2.5px solid var(--ink);
    background: var(--pc, var(--sun));
    border-radius: 13px;
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    transition: filter .2s;
    display: grid;
  }

  .prm .pi svg {
    width: 22px;
    height: 22px;
  }

  .prm.off .pi {
    filter: grayscale() opacity(.55);
  }

  .prm .tx {
    flex: 1;
    min-width: 0;
  }

  .prm b {
    font-size: 16px;
    line-height: 1.2;
    display: block;
  }

  .prm .d {
    color: var(--ink2);
    margin-top: 2px;
    font-size: 13.5px;
    line-height: 1.3;
    display: block;
  }

  .dr-adm {
    border: 2.5px dashed var(--ink);
    background: #f1ecff;
    border-radius: 18px;
    padding: 14px 16px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
  }

  .dr-ask {
    border: 2.5px solid var(--ink);
    background: #ffe1db;
    border-radius: 16px;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 22px;
    padding: 12px 14px;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
    display: flex;
  }

  .dr-ask svg {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 1px;
  }

  .dr-acts {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    display: flex;
  }

  .dr-acts .btn {
    justify-content: flex-start;
    width: 100%;
  }

  .pwbox {
    border: 2.5px dashed var(--ink);
    background: #e9fbf5;
    border-radius: 16px;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 14px;
    display: flex;
  }

  .pwbox code {
    letter-spacing: .03em;
    word-break: break-all;
    flex: 1;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 19px;
    font-weight: 700;
  }

  .pwbox .btn {
    min-height: 40px;
    box-shadow: 0 3px 0 var(--ink);
    padding: 0 14px;
    font-size: 14px;
  }

  .dr-done {
    text-align: center;
    justify-items: center;
    gap: 10px;
    padding: 26px 6px 6px;
    display: grid;
  }

  .dr-done .ck {
    background: var(--mint);
    border: 3px solid var(--ink);
    width: 88px;
    height: 88px;
    box-shadow: 0 6px 0 var(--ink);
    border-radius: 50%;
    place-items: center;
    margin-bottom: 10px;
    animation: .55s cubic-bezier(.3, 1.7, .5, 1) popIn;
    display: grid;
  }

  .dr-done .ck svg {
    color: #06241d;
    width: 44px;
    height: 44px;
  }

  .dr-done h3 {
    font-family: var(--font-display);
    margin: 0;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.05;
  }

  .dr-done p {
    color: var(--ink2);
    max-width: 36ch;
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
  }

  .dr-done .pwbox {
    text-align: left;
    width: 100%;
  }

  .dr-done .mrow {
    justify-content: center;
    margin-top: 12px;
  }

  .dr-note {
    color: var(--ink2);
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.4;
  }

  .tint-blue {
    --sc: #cfe6ff;
    --pc: #cfe6ff;
    --ec: #cfe6ff;
  }

  .tint-mint {
    --sc: #c8f6e8;
    --pc: #c8f6e8;
    --ec: #c8f6e8;
  }

  .tint-sun {
    --sc: #ffe9a8;
    --pc: #ffe9a8;
    --ec: #ffe9a8;
  }

  .tint-tomato {
    --sc: #ffd3c9;
    --pc: #ffd3c9;
    --ec: #ffd3c9;
  }

  .tint-lilac {
    --sc: #e4daff;
    --pc: #e4daff;
    --ec: #e4daff;
  }

  .tint-peach {
    --sc: #ffd9c2;
    --pc: #ffd9c2;
    --ec: #ffd9c2;
  }

  .tint-lavender {
    --sc: var(--lavender);
    --pc: var(--lavender);
    --ec: var(--lavender);
  }

  .dr-notes {
    resize: vertical;
    min-height: 88px;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 1.4;
  }

  .dr-end {
    margin-bottom: 22px;
  }

  .quota-exact {
    max-width: 260px;
    margin: 12px 0 0;
  }

  .evl-h .h2, .kint .h2 {
    font-size: clamp(28px, 3vw, 38px);
  }

  .evl-filter .inp {
    flex: none;
    width: auto;
    min-width: 220px;
  }

  .aim-search {
    margin-bottom: 10px;
  }

  .aim-list {
    gap: 8px;
    max-height: 300px;
    padding: 2px 4px 4px 2px;
    display: grid;
    overflow: auto;
  }

  .aim-opt {
    border: 2.5px solid var(--ink);
    cursor: pointer;
    background: #fff;
    border-radius: 16px;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    transition: background .15s;
    display: flex;
  }

  .aim-opt.on {
    background: #e4daff;
  }

  .aim-opt.off {
    cursor: not-allowed;
    opacity: .7;
  }

  .aim-opt input {
    width: 18px;
    height: 18px;
    accent-color: var(--ink);
    flex: none;
  }

  .aim-opt input:focus-visible {
    outline-offset: 2px;
    outline: 3px solid #3d9bff99;
  }

  .aim-opt .tx {
    flex: 1;
    min-width: 0;
  }

  .aim-opt b {
    font-size: 15px;
    line-height: 1.25;
    display: block;
  }

  .aim-opt .d {
    color: var(--ink2);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    line-height: 1.3;
    display: block;
    overflow: hidden;
  }

  .aim-none {
    color: var(--ink2);
    margin: 4px 0;
    font-size: 14px;
  }

  .kint {
    margin-top: 46px;
  }

  .kint .stats {
    margin: 16px 0 0;
  }

  .adm-back {
    flex: none;
  }

  .adm-nav {
    border: 2.5px solid var(--ink);
    box-shadow: 0 4px 0 var(--ink);
    background: #fff;
    border-radius: 999px;
    align-items: center;
    gap: 4px;
    padding: 3px;
    display: inline-flex;
  }

  .adm-nav-a {
    min-height: 38px;
    color: var(--ink);
    white-space: nowrap;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    padding: 0 18px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background .15s;
    display: inline-flex;
  }

  .adm-nav-a:hover {
    background: #22123a1a;
  }

  .adm-nav-a[aria-current="page"] {
    background: var(--ink);
    color: #fff;
    cursor: default;
  }

  .aiu-top .seg {
    flex: none;
  }

  .aiu-filter {
    border: 2.5px solid var(--ink);
    background: #e4daff;
    border-radius: 999px;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    max-width: 100%;
    margin: -6px 0 26px;
    padding: 6px 8px 6px 18px;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.3;
    display: inline-flex;
  }

  .aiu-filter b {
    overflow-wrap: anywhere;
    font-weight: 800;
  }

  .aiu-filter-x {
    border: 2px solid var(--ink);
    background: #fff;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 800;
    transition: background .15s;
    display: inline-flex;
  }

  .aiu-filter-x:hover {
    background: #faf8ff;
  }

  .aiu-filter-x .ico {
    width: 14px;
    height: 14px;
  }

  .aiu-refresh {
    margin: 0 0 10px;
  }

  .aiu-rate {
    margin: 12px 0 22px;
  }

  .aiu-tiles {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 34px;
    display: grid;
  }

  .aiu-tile {
    --sc: var(--blue);
    border: 3px solid var(--ink);
    min-width: 0;
    box-shadow: 0 6px 0 var(--ink);
    background: #fff;
    border-radius: 24px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 10px;
    padding: 16px 18px;
    display: grid;
  }

  .aiu-ti {
    background: var(--sc);
    border: 2.5px solid var(--ink);
    width: 38px;
    height: 38px;
    color: var(--ink);
    border-radius: 12px;
    place-items: center;
    display: grid;
    transform: rotate(-6deg);
  }

  .aiu-ti svg {
    width: 20px;
    height: 20px;
  }

  .aiu-tl {
    color: var(--ink2);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
  }

  .aiu-tv {
    font-family: var(--font-display);
    overflow-wrap: anywhere;
    grid-column: 1 / -1;
    font-size: clamp(26px, 2.3vw, 34px);
    font-weight: 400;
    line-height: 1.05;
  }

  .aiu-th {
    color: var(--ink2);
    grid-column: 1 / -1;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
  }

  .aiu-pair {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 22px;
    margin-bottom: 8px;
    display: grid;
  }

  .aiu-card {
    border: 3px solid var(--ink);
    min-width: 0;
    box-shadow: 0 7px 0 var(--ink);
    background: #fff;
    border-radius: 26px;
    padding: 20px 22px 18px;
  }

  .aiu-h3 {
    font-family: var(--font-display);
    margin: 0 0 14px;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.05;
  }

  .aiu-none {
    color: var(--ink2);
    margin: 0;
    font-weight: 700;
    line-height: 1.4;
  }

  .aiu-key {
    color: var(--ink2);
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 12px;
    padding: 0;
    font-size: 13.5px;
    font-weight: 700;
    list-style: none;
    display: flex;
  }

  .aiu-key li {
    align-items: center;
    gap: 7px;
    display: inline-flex;
  }

  .aiu-sw {
    border-radius: 4px;
    width: 14px;
    height: 14px;
    display: inline-block;
  }

  .aiu-sw-ok, .aiu-ok {
    background: var(--lilac);
  }

  .aiu-sw-bad, .aiu-bad {
    background: repeating-linear-gradient(45deg,#ffffffa6 0 2px,transparent 2px 5px),var(--tomato);
  }

  .aiu-plot {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px;
    height: 172px;
    display: grid;
  }

  .aiu-peak {
    text-align: right;
    color: var(--ink2);
    font-variant-numeric: tabular-nums;
    flex-direction: column;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    display: flex;
  }

  .aiu-bars {
    border-bottom: 2.5px solid var(--ink);
    touch-action: pan-y;
    background: linear-gradient(#ede9f7, #ede9f7) 0 0 / 100% 2px no-repeat, linear-gradient(#ede9f7, #ede9f7) 0 / 100% 2px no-repeat;
    align-items: flex-end;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .aiu-dense {
    gap: 1px;
  }

  .aiu-bar {
    border-radius: 6px 6px 0 0;
    flex-direction: column;
    flex: 1 1 0;
    justify-content: flex-end;
    gap: 2px;
    min-width: 0;
    height: 100%;
    display: flex;
  }

  .aiu-bar.aiu-on {
    background: #22123a12;
  }

  .aiu-ok, .aiu-bad {
    border-radius: 4px 4px 0 0;
    flex: none;
    align-self: center;
    width: min(100%, 36px);
    display: block;
  }

  .aiu-axis {
    color: var(--ink2);
    justify-content: space-between;
    margin: 7px 0 0 48px;
    font-size: 12.5px;
    font-weight: 700;
    display: flex;
  }

  .aiu-read {
    min-height: 2.9em;
    margin: 12px 0 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
  }

  .aiu-errs {
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
  }

  .aiu-errs li {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px 12px;
    display: grid;
  }

  .aiu-ec {
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    display: flex;
  }

  .aiu-ec b {
    font-size: 15.5px;
    line-height: 1.25;
  }

  .aiu-ec code {
    color: var(--ink2);
    overflow-wrap: anywhere;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
  }

  .aiu-eb {
    border: 2px solid var(--ink);
    background: #ede9f7;
    border-radius: 99px;
    grid-column: 1 / -1;
    height: 10px;
    overflow: hidden;
  }

  .aiu-eb i {
    background: var(--tomato);
    height: 100%;
    display: block;
  }

  .aiu-en {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
  }

  .aiu-sec {
    margin-top: 46px;
  }

  .aiu-sec .h2 {
    font-size: clamp(26px, 2.6vw, 34px);
  }

  .aiu-tools {
    margin-top: 16px;
  }

  .aiu-sort {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    display: flex;
  }

  .aiu-sort .inp {
    flex: 210px;
    width: auto;
  }

  .aiu-table {
    border: 3px solid var(--ink);
    box-shadow: 0 7px 0 var(--ink);
    background: #fff;
    border-radius: 26px;
    margin-top: 16px;
    overflow: hidden;
  }

  .aiu-tools + .aiu-table {
    margin-top: 0;
  }

  .aiu-row {
    border-top: 2.5px solid #ede9f7;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 14px 20px;
    font-size: 15px;
    display: grid;
  }

  .aiu-row:first-child {
    border-top: 0;
  }

  .aiu-head {
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink2);
    border-bottom: 3px solid var(--ink);
    background: #f6f5fb;
    padding-block: 12px;
    font-size: 12.5px;
    font-weight: 800;
  }

  .aiu-click {
    cursor: pointer;
    transition: background .15s;
  }

  .aiu-click:hover {
    background: #faf8ff;
  }

  .aiu-row:focus-visible {
    outline-offset: -4px;
  }

  .aiu-current, .aiu-current:hover {
    background: #f1ecff;
  }

  .aiu-c {
    overflow-wrap: break-word;
    min-width: 0;
  }

  .aiu-end {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .aiu-row:not(.aiu-head) .aiu-end {
    white-space: nowrap;
  }

  .aiu-head .aiu-c {
    overflow-wrap: normal;
  }

  .aiu-t-model .aiu-row {
    grid-template-columns: minmax(0, 2.2fr) minmax(76px, .9fr) repeat(2, minmax(0, .9fr)) minmax(108px, 1fr) minmax(96px, 1fr) minmax(0, 1fr);
  }

  .aiu-t-user .aiu-row {
    grid-template-columns: minmax(0, 1.9fr) minmax(76px, .8fr) repeat(2, minmax(0, .8fr)) minmax(108px, 1fr) minmax(96px, 1fr) minmax(0, .9fr) minmax(0, 1fr);
  }

  .aiu-t-call .aiu-row {
    grid-template-columns: minmax(92px, 1fr) minmax(0, 1.5fr) minmax(96px, .9fr) minmax(0, 1.8fr) minmax(128px, 1.1fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, .8fr);
  }

  .aiu-skel {
    border-top: 2.5px solid #ede9f7;
    gap: 10px;
    padding: 18px 20px;
    display: grid;
  }

  .aiu-skel:first-child {
    border-top: 0;
  }

  .aiu-empty {
    text-align: center;
    color: var(--ink2);
    padding: 36px 20px;
    font-size: 16px;
    font-weight: 700;
  }

  .aiu-who {
    align-items: center;
    gap: 12px;
    min-width: 0;
    display: flex;
  }

  .aiu-who > div {
    min-width: 0;
  }

  .aiu-who b, .aiu-stack b {
    font-size: 15.5px;
    line-height: 1.2;
    display: block;
  }

  .aiu-who .em, .aiu-stack .em {
    max-width: 100%;
    color: var(--ink2);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13.5px;
    display: block;
    overflow: hidden;
  }

  .aiu-gone {
    border: 2.5px dashed var(--ink);
    width: 40px;
    height: 40px;
    color: var(--ink2);
    border-radius: 50%;
    flex: none;
    place-items: center;
    font-weight: 800;
    display: grid;
  }

  .aiu-stack {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    display: flex;
  }

  .aiu-model {
    overflow-wrap: anywhere;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
  }

  .aiu-muted {
    color: var(--ink2);
    font-weight: 600;
  }

  .aiu-sub {
    color: #7a1f12;
    font-size: 12.5px;
    font-weight: 700;
  }

  .aiu-c time {
    color: var(--ink2);
    font-weight: 600;
  }

  .aiu-kv {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    margin: 0 0 26px;
    display: grid;
  }

  .aiu-kv > div {
    min-width: 0;
  }

  .aiu-kv > .aiu-wide {
    grid-column: 1 / -1;
  }

  .aiu-kv dt {
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink2);
    margin: 0 0 3px;
    font-size: 12px;
    font-weight: 800;
  }

  .aiu-kv dd {
    overflow-wrap: anywhere;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
  }

  .aiu-block {
    margin-bottom: 16px;
  }

  .aiu-block-h {
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    display: flex;
  }

  .aiu-block-h b {
    font-size: 15px;
  }

  .aiu-pre {
    border: 2.5px solid var(--ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: #f6f5fb;
    border-radius: 16px;
    max-height: 320px;
    margin: 0;
    padding: 14px 16px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13.5px;
    line-height: 1.5;
    overflow: auto;
  }

  .aiu-error {
    margin-top: 0;
  }

  .aiu-error b {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 14px;
    display: block;
  }

  .aiu-error-m {
    margin-top: 3px;
    font-weight: 600;
    display: block;
  }

  .aiu-refused {
    margin: 0 0 22px;
  }

  @media (max-width: 1180px) {
    .aiu-tiles {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .aiu-tiles > * {
      grid-column: span 2;
    }

    .aiu-tiles > :nth-child(n+4) {
      grid-column: span 3;
    }
  }

  @media (max-width: 900px) {
    .aiu-pair {
      grid-template-columns: minmax(0, 1fr);
    }

    .aiu-head {
      display: none;
    }

    .aiu-t-model .aiu-row, .aiu-t-user .aiu-row, .aiu-t-call .aiu-row {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: start;
      gap: 12px 16px;
      padding: 16px;
    }

    .aiu-primary {
      grid-column: 1 / -1;
    }

    .aiu-has-aside .aiu-primary {
      grid-area: 1 / 1 / auto / 3;
    }

    .aiu-aside {
      grid-area: 1 / 3;
      justify-self: end;
    }

    .aiu-c[data-label]:not(.aiu-primary):not(.aiu-aside):before {
      content: attr(data-label);
      letter-spacing: .05em;
      text-transform: uppercase;
      color: var(--ink2);
      margin-bottom: 2px;
      font-size: 11.5px;
      font-weight: 800;
      display: block;
    }

    .aiu-end {
      text-align: left;
    }
  }

  @media (max-width: 640px) {
    .aiu-top .seg {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      width: 100%;
      display: grid;
    }

    .aiu-top .chip {
      justify-content: center;
      padding-inline: 8px;
    }

    .aiu-filter {
      border-radius: 26px;
      justify-content: space-between;
      margin-top: 0;
      display: flex;
    }

    .aiu-filter-sep {
      display: none;
    }

    .aiu-tiles {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .aiu-tiles > *, .aiu-tiles > :nth-child(n+4) {
      grid-column: auto;
    }

    .aiu-tiles > :last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }

    .aiu-tile {
      border-radius: 20px;
      padding: 14px;
    }

    .aiu-card {
      border-radius: 22px;
      padding: 16px 16px 14px;
    }

    .aiu-sec {
      margin-top: 36px;
    }

    .aiu-sort {
      width: 100%;
    }

    .aiu-t-model .aiu-row, .aiu-t-user .aiu-row, .aiu-t-call .aiu-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aiu-has-aside .aiu-primary {
      grid-area: 2 / 1 / auto / -1;
    }

    .aiu-aside {
      grid-area: 1 / 1 / auto / -1;
      justify-self: start;
    }

    .aiu-aside .aiu-stack {
      flex-flow: wrap;
      align-items: center;
      gap: 4px 10px;
    }

    .aiu-plot {
      height: 150px;
    }
  }

  @media (max-width: 380px) {
    .aiu-kv {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .lgn-card > .alert {
    margin: 0 0 20px;
  }

  .lgn-alt {
    text-align: center;
    color: var(--ink2);
    margin: 22px 0 0;
    font-size: 15px;
    line-height: 1.45;
  }

  .lgn-alt .linkbtn {
    padding: 0 2px;
    font-size: 1em;
  }

  .nav a[aria-current="page"] {
    background: var(--ink);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .nav a[aria-current="page"] {
      background: color-mix(in srgb,var(--ink) 10%,transparent);
    }
  }

  .umenu .ferr {
    margin: 6px 12px 4px;
  }

  .lgn-pz .note {
    margin: 0 0 6px;
  }

  .lgn-pz .lgn-err {
    text-align: left;
    justify-self: stretch;
    margin: 0 0 14px;
  }

  @media (max-width: 900px) {
    .login {
      grid-template-rows: auto 1fr;
    }
  }

  .acct {
    flex-direction: column;
    gap: 24px;
    display: flex;
  }

  .acct-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
    display: grid;
  }

  .acct-card, .acct-links {
    border: 3px solid var(--ink);
    box-shadow: 0 7px 0 var(--ink);
    background: #fff;
    border-radius: 28px;
    animation: .5s cubic-bezier(.3, 1.5, .5, 1) both cardIn;
  }

  .acct-card {
    overflow: hidden;
  }

  .acct-band {
    background: var(--sun);
    border-bottom: 3px solid var(--ink);
    background-image: radial-gradient(#22123a1f 2px, #0000 2.5px);
    background-size: 22px 22px;
    height: 104px;
    position: relative;
  }

  .acct-stk {
    filter: drop-shadow(0 5px #22123a38);
    width: 76px;
    height: 76px;
    animation: 5.5s ease-in-out infinite bob;
    position: absolute;
    top: 14px;
    right: 28px;
  }

  .acct-stk.b {
    width: 54px;
    height: 54px;
    animation-delay: -2s;
    top: 34px;
    right: 112px;
  }

  .acct-stk svg {
    width: 100%;
    height: 100%;
  }

  .acct-h {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: -50px;
    padding: 0 28px 22px;
    display: flex;
    position: relative;
  }

  .acct-h .av {
    width: 96px;
    height: 96px;
    box-shadow: 0 5px 0 var(--ink);
    border-width: 3px;
    margin-bottom: 8px;
    font-size: 36px;
  }

  .acct-h h2 {
    font-family: var(--font-display);
    overflow-wrap: anywhere;
    margin: 0;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 400;
    line-height: 1.05;
  }

  .acct-em {
    color: var(--ink2);
    overflow-wrap: anywhere;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
  }

  .acct-rows {
    border-top: 2.5px dashed #d9d2ea;
    margin: 0;
    padding: 6px 18px 20px;
    list-style: none;
  }

  .acct-row {
    border-radius: 16px;
    grid-template-columns: auto minmax(0, 180px) minmax(0, 1fr);
    align-items: center;
    gap: 6px 16px;
    padding: 12px 10px;
    display: grid;
  }

  .acct-row + .acct-row {
    border-top: 2px solid var(--lavender);
  }

  .acct-k {
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink2);
    font-size: 13.5px;
    font-weight: 800;
  }

  .acct-v {
    overflow-wrap: anywhere;
    font-size: 17px;
    font-weight: 700;
  }

  .acct-ic {
    border: 2.5px solid var(--ink);
    background: var(--lavender-soft);
    width: 42px;
    height: 42px;
    color: var(--ink);
    border-radius: 14px;
    flex: none;
    place-items: center;
    display: grid;
  }

  .acct-ic svg {
    width: 22px;
    height: 22px;
  }

  .acct-ic.sun {
    background: var(--sun);
  }

  .acct-ic.mint {
    background: var(--mint);
    color: #fff;
  }

  .acct-ic.blue {
    background: var(--blue);
    color: #fff;
  }

  .acct-ic.lilac {
    background: var(--lilac);
    color: #fff;
  }

  .acct-ic.tomato {
    background: #ffe1db;
  }

  .acct-roles {
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .acct-roles .rpill {
    padding: 5px 12px;
    font-size: 12.5px;
  }

  .acct-none {
    color: var(--ink2);
    font-weight: 600;
  }

  .acct-links {
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    animation-delay: 80ms;
    display: flex;
  }

  .acct-lt {
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink2);
    margin: 4px 10px 8px;
    font-size: 13.5px;
    font-weight: 800;
  }

  .acct-a {
    width: 100%;
    min-height: 58px;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: 18px;
    align-items: center;
    gap: 14px;
    padding: 8px 12px;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition: background .12s, transform .12s;
    display: flex;
  }

  .acct-a:hover {
    background: var(--lavender-soft);
    transform: translateX(3px);
  }

  .acct-a.out {
    border-top: 2.5px dashed #d9d2ea;
    border-radius: 0 0 18px 18px;
    margin-top: 6px;
    padding-top: 14px;
  }

  .acct-a.out:hover {
    background: #ffe1db;
  }

  .acct-a:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
  }

  .acct-go {
    width: 18px;
    height: 18px;
    color: var(--ink2);
    margin-left: auto;
    transition: transform .12s;
  }

  .acct-a:hover .acct-go {
    color: var(--ink);
    transform: translateX(3px);
  }

  .acct-links .ferr {
    margin: 4px 12px 0;
  }

  @media (max-width: 900px) {
    .acct-grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 640px) {
    .acct-band {
      height: 84px;
    }

    .acct-stk {
      width: 60px;
      height: 60px;
      right: 16px;
    }

    .acct-stk.b {
      width: 44px;
      height: 44px;
      top: 28px;
      right: 84px;
    }

    .acct-h {
      margin-top: -42px;
      padding: 0 18px 18px;
    }

    .acct-h .av {
      width: 80px;
      height: 80px;
      font-size: 30px;
    }

    .acct-rows {
      padding: 4px 10px 14px;
    }

    .acct-row {
      grid-template-columns: auto minmax(0, 1fr);
      padding: 12px 6px;
    }

    .acct-row .acct-ic {
      grid-row: span 2;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .acct-stk {
      animation: none;
    }
  }

  .tile.locked {
    opacity: .78;
    filter: saturate(.3);
  }

  .tile.locked:hover {
    box-shadow: 0 8px 0 var(--ink);
    transform: none;
  }

  .tnote {
    min-height: 40px;
    color: var(--ink2);
    align-items: center;
    gap: 7px;
    font-size: 14.5px;
    font-weight: 800;
    display: inline-flex;
  }

  .tnote svg {
    width: 18px;
    height: 18px;
    color: var(--mint);
  }

  .tbody .ferr {
    margin: 0;
  }

  .tile.is-loading:hover {
    box-shadow: 0 8px 0 var(--ink);
    transform: none;
  }

  .newopt.is-busy {
    background: var(--lavender-soft);
    box-shadow: 0 10px 0 var(--ink);
    cursor: progress;
    transform: translateY(-4px);
  }

  .newopt[aria-disabled="true"]:not(.locked) {
    opacity: .6;
    cursor: progress;
  }

  .lib-bar {
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    margin-bottom: 26px;
    display: flex;
  }

  .lib-search {
    flex: 260px;
    max-width: 420px;
  }

  .lib-busy {
    color: var(--ink2);
    font-size: 13.5px;
    font-weight: 700;
  }

  .lib-pages {
    margin-top: 34px;
  }

  .abody {
    position: relative;
  }

  .abody .amore {
    width: 40px;
    height: 40px;
    min-height: 40px;
    position: absolute;
    top: 12px;
    right: 14px;
  }

  .atitle {
    padding-right: 48px;
  }

  .abody .ferr {
    margin: 0 0 14px;
  }

  .arow .btn-sm, .arow .ibtn {
    flex: none;
  }

  @media (max-width: 480px) {
    .arow {
      gap: 8px;
    }

    .arow .sp {
      display: none;
    }

    .arow .btn-sm {
      flex: 1 1 0;
      justify-content: center;
      min-width: 0;
      padding: 0 10px;
    }
  }

  .acard.is-loading {
    animation: none;
  }

  .athumb.athumb-none {
    background: var(--lavender);
  }

  .item:not(.crow) {
    grid-template-columns: 52px minmax(0, 1fr) auto 40px 40px;
  }

  .item {
    cursor: grab;
  }

  .item:active {
    cursor: grabbing;
  }

  .item.over {
    background: var(--sun);
    transform: translateY(2px);
  }

  .item.bad .ferr {
    grid-column: 1 / -1;
    margin: 0;
  }

  .item-ed {
    cursor: auto;
    grid-column: 1 / -1;
  }

  .item.nopic:not(.crow) {
    grid-template-columns: minmax(0, 1fr) auto 40px;
  }

  .item-tf {
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    display: flex;
  }

  .item-tf-l {
    color: var(--ink2);
    font-size: 13.5px;
    font-weight: 800;
  }

  label.is-busy {
    opacity: .6;
    cursor: progress;
  }

  .sws-gap {
    margin-top: 18px;
  }

  .sect > .ferr {
    margin: 12px 0 0;
  }

  button.scn-b {
    width: 100%;
  }

  .scn-up {
    position: relative;
    overflow: hidden;
  }

  .bg-acts {
    margin-top: 8px;
  }

  .bg-acts .mrow {
    gap: 0 18px;
  }

  .wand-list {
    margin-bottom: 18px;
  }

  .wand-list .chips {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
  }

  .wand-list .pill {
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
  }

  .wand-list .wand-q {
    border-radius: 16px;
    max-width: 100%;
    display: block;
  }

  .wand-q > span {
    font-weight: 800;
    display: block;
  }

  .wand-a {
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .wand-a li {
    border: 2px solid var(--ink);
    background: #fff;
    border-radius: 999px;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
  }

  .wand-a li.right {
    background: #c9f3e7;
  }

  .wand-a .ico {
    width: 14px;
    height: 14px;
  }

  .wand-list .wand-p {
    align-items: center;
    gap: 6px;
    max-width: 100%;
    font-weight: 800;
    display: inline-flex;
  }

  .hole .hk {
    z-index: 3;
    min-width: 1.7em;
    font-family: var(--font-body);
    text-align: center;
    color: var(--ink);
    border: .14em solid var(--ink);
    box-shadow: 0 .14em 0 var(--ink);
    pointer-events: none;
    background: #fff;
    border-radius: .5em;
    padding: 0 .35em;
    font-size: 1.7em;
    font-weight: 800;
    line-height: 1.5;
    position: absolute;
    top: 1.1em;
    left: 50%;
    transform: translateX(-50%);
  }

  @media (prefers-reduced-motion: reduce) {
    .pt, .mal {
      display: none !important;
    }

    .box.sk-a, .box.sk-b {
      animation: none;
    }

    .hh .mole {
      transform: translateY(0);
    }

    .hh .bub {
      transform: scale(1) rotate(var(--tilt, 0deg));
      opacity: 1;
    }
  }

  .player-wait {
    color: #fff;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
  }

  .pcard-start h2 {
    overflow-wrap: anywhere;
    font-size: 4.6em;
  }

  .pcard .pcard-ins {
    color: var(--ink);
    white-space: pre-line;
    overflow-wrap: anywhere;
    font-size: 2.2em;
    font-weight: 700;
  }

  .pcard .pcard-note {
    margin-bottom: 1em;
    font-size: 1.6em;
  }

  .pcard-res {
    max-height: 96%;
    overflow-y: auto;
  }

  .pcred {
    margin-top: 1.1em;
  }

  .pcred-b {
    font-family: var(--font-body);
    color: var(--ink2);
    text-underline-offset: .2em;
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: .35em;
    padding: .2em .6em;
    font-size: 1.45em;
    font-weight: 800;
    text-decoration: underline;
    display: inline-flex;
  }

  .pcred-b svg {
    width: 1.1em;
    height: 1.1em;
  }

  .pcred-b:hover {
    color: var(--ink);
  }

  .pcred-l {
    text-align: left;
    max-height: 16em;
    margin: .5em 0 0;
    padding: 0 .4em;
    list-style: none;
    overflow-y: auto;
  }

  .pcred-l li {
    border-top: 2px dashed #1a17302e;
    padding: .5em 0;
  }

  .pcred-t {
    overflow-wrap: anywhere;
    font-size: 1.45em;
    font-weight: 800;
    display: block;
  }

  .pcred-t a, .pcred-l .credit a {
    text-underline-offset: .15em;
    text-decoration: underline;
  }

  .pcard .pcred-l .credit {
    margin: .15em 0 0;
    font-size: 1.3em;
    font-weight: 600;
    line-height: 1.35;
  }

  @media (min-width: 1300px) {
    .ed-top.ed-x1 .steps {
      padding-left: 58px;
    }

    .ed-top.ed-x2 .steps {
      padding-left: 116px;
    }
  }

  .fnd-tabs {
    margin-bottom: 18px;
  }

  .fnd-panel {
    min-height: 220px;
  }

  .fnd-cur {
    border: 2.5px solid var(--ink);
    background: #f6f5fb;
    border-radius: 18px;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 10px 14px;
    display: flex;
  }

  .fnd-cur img {
    object-fit: cover;
    border: 2px solid var(--ink);
    background: #fff;
    border-radius: 12px;
    flex: none;
    width: 64px;
    height: 64px;
  }

  .fnd-cur-t {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
  }

  .fnd-cur .credit {
    margin-top: 2px;
  }

  .fnd-foot {
    margin-top: 20px;
  }

  .fnd-form {
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
    display: flex;
  }

  .fnd-form .inw {
    flex: 240px;
  }

  .fnd-row {
    margin-bottom: 14px;
  }

  .fnd-row .chip {
    min-height: 38px;
    padding: 0 13px;
    font-size: 14px;
  }

  .fnd-bar {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-bottom: 16px;
    display: flex;
  }

  .fnd-note {
    margin-top: 4px;
  }

  .fnd-note .btn {
    flex: none;
    margin-left: auto;
  }

  .fnd-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
  }

  .fnd-card {
    aspect-ratio: 1;
    border: 2.5px solid var(--ink);
    background: #f6f5fb;
    border-radius: 18px;
    width: 100%;
    padding: 0;
    transition: transform .12s, box-shadow .15s;
    animation: .35s cubic-bezier(.3, 1.5, .5, 1) popIn;
    display: block;
    position: relative;
    overflow: hidden;
  }

  .fnd-card:hover {
    box-shadow: 0 5px 0 var(--ink);
    transform: translateY(-3px)rotate(-1.5deg);
  }

  .fnd-card img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .fnd-card.on {
    box-shadow: 0 0 0 4px var(--blue);
  }

  .fnd-none {
    height: 100%;
    color: var(--ink2);
    text-align: center;
    place-items: center;
    padding: 8px;
    font-size: 12.5px;
    font-weight: 700;
    display: grid;
  }

  .fnd-badges {
    pointer-events: none;
    flex-wrap: wrap;
    gap: 4px;
    display: flex;
    position: absolute;
    bottom: 6px;
    left: 6px;
    right: 6px;
  }

  .fnd-badges .fnd-badge {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
  }

  .fnd-badge {
    border: 2px solid var(--ink);
    color: var(--ink);
    background: #fff;
    border-radius: 999px;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    display: inline-flex;
  }

  .fnd-badge.nc {
    background: var(--sun);
  }

  .fnd-badge.own {
    background: var(--mint);
    color: #06241d;
  }

  .fnd-more {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
  }

  .fnd-more a, .fnd-links a, .credit a, .fnd-meta a {
    text-underline-offset: 3px;
    text-decoration: underline;
  }

  .fnd-gap {
    margin-top: 12px;
  }

  .fnd-back {
    align-items: center;
    gap: 6px;
    margin: -6px 0 8px;
    display: inline-flex;
  }

  .fnd-back .ico {
    width: 18px;
    height: 18px;
  }

  .fnd-prev-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 18px;
    display: grid;
  }

  .fnd-prev-img {
    object-fit: contain;
    border: 2.5px solid var(--ink);
    background: #f6f5fb;
    border-radius: 18px;
    width: 100%;
    height: auto;
    max-height: 320px;
  }

  .fnd-prev-t {
    -webkit-line-clamp: 3;
    font-family: var(--font-display);
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1;
    display: -webkit-box;
    overflow: hidden;
  }

  .fnd-from {
    color: var(--ink2);
    margin: 0 0 10px;
    font-size: 13.5px;
    font-weight: 700;
  }

  .fnd-meta dl {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 12px;
    margin: 0;
    font-size: 14.5px;
    display: grid;
  }

  .fnd-meta dt {
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink2);
    padding-top: 2px;
    font-size: 12.5px;
    font-weight: 800;
  }

  .fnd-meta dd {
    overflow-wrap: anywhere;
    margin: 0;
  }

  .fnd-meta dd .fnd-badge {
    margin-left: 8px;
  }

  .fnd-links {
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 700;
  }

  .fnd-ok {
    color: #0b6b4f;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    font-size: 13.5px;
    font-weight: 700;
    display: flex;
  }

  .fnd-ok svg {
    width: 18px;
    height: 18px;
  }

  .fnd-lib .lib-search {
    flex: 220px;
  }

  .fnd-up-fig {
    justify-items: start;
    gap: 8px;
    margin: 0 0 16px;
    display: grid;
  }

  .fnd-up-img {
    object-fit: contain;
    border: 2.5px solid var(--ink);
    background: #f6f5fb;
    border-radius: 18px;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 260px;
  }

  .fnd-up-fig figcaption {
    color: var(--ink2);
    overflow-wrap: anywhere;
    font-size: 14px;
  }

  .credit {
    color: var(--ink2);
    overflow-wrap: anywhere;
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.4;
  }

  @media (min-width: 621px) {
    .fnd-panel {
      min-height: min(500px, 58vh);
    }
  }

  @media (max-width: 620px) {
    .fnd-prev-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .fnd-cur {
      align-items: flex-start;
    }

    .fnd-row {
      scroll-snap-type: x proximity;
      scrollbar-width: none;
      overscroll-behavior-x: contain;
      flex-wrap: nowrap;
      margin-inline: -4px;
      padding: 2px 4px 6px;
      overflow-x: auto;
    }

    .fnd-row::-webkit-scrollbar {
      display: none;
    }

    .fnd-row .chip {
      scroll-snap-align: start;
      flex: none;
    }

    .fnd-row.is-searched {
      display: none;
    }

    .fnd-bar {
      gap: 8px;
    }

    .fnd-bar .seg {
      scrollbar-width: none;
      flex-wrap: nowrap;
      gap: 6px;
      max-width: 100%;
      overflow-x: auto;
    }

    .fnd-bar .seg::-webkit-scrollbar {
      display: none;
    }

    .fnd-bar .seg .chip {
      flex: none;
      min-height: 38px;
      padding: 0 12px;
      font-size: 14px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .fnd-card {
      animation: none;
    }

    .fnd-card:hover {
      transform: none;
    }
  }

  .img-cards {
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 24px;
    display: grid;
  }

  .img-card {
    border: 3px solid var(--ink);
    box-shadow: 0 6px 0 var(--ink);
    background: #fff;
    border-radius: 24px;
    flex-direction: column;
    animation: .5s cubic-bezier(.3, 1.5, .5, 1) both cardIn;
    display: flex;
    overflow: hidden;
  }

  .img-pic {
    aspect-ratio: 4 / 3;
    border-bottom: 3px solid var(--ink);
    background: #f6f5fb;
    position: relative;
    overflow: hidden;
  }

  .img-pic img, .img-pic .fnd-none {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }

  .img-pic img {
    object-fit: cover;
  }

  .img-body {
    flex-direction: column;
    flex: 1;
    gap: 4px;
    padding: 14px 16px 16px;
    display: flex;
  }

  .img-t {
    -webkit-line-clamp: 2;
    font-family: var(--font-display);
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    margin: 0;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.1;
    display: -webkit-box;
    overflow: hidden;
  }

  .img-n {
    color: var(--ink2);
    margin: 6px 0 0;
    font-size: 14px;
    font-weight: 700;
  }

  .img-uses {
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    list-style: none;
    display: flex;
  }

  .img-uses a {
    text-underline-offset: 3px;
    text-decoration: underline;
  }

  .img-acts {
    margin-top: auto;
    padding-top: 12px;
  }

  .img-det {
    gap: 18px;
    display: grid;
  }

  .img-det-pic {
    border: 2.5px solid var(--ink);
    background: #f6f5fb;
    border-radius: 18px;
    place-items: center;
    max-height: 280px;
    display: grid;
    overflow: hidden;
  }

  .img-det-pic img {
    object-fit: contain;
    width: 100%;
    height: auto;
    max-height: 276px;
  }

  .img-det .img-uses {
    margin-top: 4px;
  }

  .img-copy {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-top: 16px;
    display: flex;
  }

  .img-copy .fnd-ok, .img-copy .ferr {
    margin: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .img-card {
      animation: none;
    }
  }

  .rule {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px 20px;
    margin-bottom: 16px;
    padding: 18px 20px;
    display: grid;
  }

  .rule:has( > .rule-ic) {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .rule-ic {
    border: 2.5px solid var(--ink);
    background: var(--sun);
    width: 52px;
    height: 52px;
    color: var(--ink);
    box-shadow: 0 3px 0 var(--ink);
    border-radius: 16px;
    align-self: start;
    place-items: center;
    display: grid;
    transform: rotate(-4deg);
  }

  .rule-ic svg {
    width: 26px;
    height: 26px;
  }

  .rw > .rule:nth-child(5n+2) .rule-ic {
    background: var(--mint);
    color: #fff;
    transform: rotate(3deg);
  }

  .rw > .rule:nth-child(5n+3) .rule-ic {
    background: var(--blue);
    color: #fff;
  }

  .rw > .rule:nth-child(5n+4) .rule-ic {
    background: var(--lilac);
    color: #fff;
    transform: rotate(3deg);
  }

  .rw > .rule:nth-child(5n+5) .rule-ic {
    background: var(--rose);
  }

  .rule-b {
    min-width: 0;
  }

  .rule .rule-t {
    font-size: 18px;
    line-height: 1.2;
  }

  .rule .rule-s {
    max-width: 52ch;
    margin-top: 4px;
  }

  .rule-c {
    justify-content: flex-end;
    min-width: 0;
    display: flex;
  }

  .rule-c .seg {
    justify-content: flex-end;
  }

  .rule.wide .rule-c {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .rule.wide:has( > .rule-ic) .rule-c {
    grid-column: 2 / -1;
  }

  .rule.wide .rule-c .seg {
    justify-content: flex-start;
  }

  @media (max-width: 640px) {
    .rule {
      gap: 12px 14px;
      padding: 14px;
    }

    .rule-ic {
      border-radius: 14px;
      width: 44px;
      height: 44px;
    }

    .rule-ic svg {
      width: 22px;
      height: 22px;
    }

    .rule .rule-c {
      grid-column: 1 / -1;
      justify-content: flex-start;
    }

    .rule.wide:has( > .rule-ic) .rule-c {
      grid-column: 1 / -1;
      justify-content: flex-start;
    }

    .rule .rule-c .seg {
      justify-content: flex-start;
    }
  }

  .fld-h {
    color: var(--ink2);
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.35;
  }

  .tab-intro {
    color: var(--ink2);
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.4;
  }

  .try-gap {
    text-align: right;
    color: var(--ink2);
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 700;
  }

  .stk-t, .sbtn-t, .adder-l {
    display: none;
  }

  .zone.guided .zone-empty {
    border: 2.5px dashed var(--ink);
    background: #fff4cc;
    border-radius: 16px;
    margin: 0 0 12px;
    padding: 14px 16px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.35;
  }

  .zone.guided .adder-l {
    color: var(--ink2);
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 800;
    display: block;
  }

  .zone.guided .item:not(.crow) {
    border: 2.5px solid var(--ink);
    background: var(--lavender-soft);
    border-radius: 18px;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px;
    display: flex;
  }

  .zone.guided .item-tf {
    flex: 100%;
    order: 0;
  }

  .zone.guided .stk {
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-height: 44px;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    background: #fff;
    border-radius: 13px;
    order: 1;
    align-items: center;
    gap: 8px;
    padding: 4px 14px 4px 6px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    display: flex;
  }

  .zone.guided .stk svg, .zone.guided .stk img {
    flex: none;
    width: 34px;
    height: 34px;
  }

  .zone.guided .stk .stk-t {
    display: inline;
  }

  .zone.guided .mv {
    flex-direction: row;
    order: 2;
    gap: 4px;
  }

  .zone.guided .mvb {
    border-color: var(--ink);
    background: #fff;
    border-radius: 12px;
    width: 44px;
    height: 44px;
  }

  .zone.guided .mvb svg {
    width: 20px;
    height: 20px;
  }

  .zone.guided .sbtn.del {
    border-color: var(--ink);
    width: auto;
    min-width: 44px;
    height: 44px;
    color: var(--ink);
    background: #fff;
    order: 3;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 0 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    display: flex;
  }

  .zone.guided .sbtn.del .sbtn-t {
    display: inline;
  }

  .zone.guided .item .ferr {
    flex: 100%;
    order: 4;
    margin: 0;
  }

  .zone.guided .item-ed {
    flex: 100%;
    order: 5;
  }

  .zone.guided .adder {
    align-items: stretch;
  }

  .zone.guided .adder-b {
    flex: none;
    min-height: 50px;
    padding: 0 18px;
  }

  .zone.guided .meter {
    align-items: flex-start;
  }

  .zone.guided .meter i {
    flex: none;
    margin-top: 3px;
  }

  .item-state {
    color: var(--ink2);
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    display: flex;
  }

  .item-state.ok {
    color: var(--ink);
  }

  .item-state .ico {
    width: 18px;
    height: 18px;
    color: var(--mint);
    flex: none;
  }

  .rule .tgl {
    position: relative;
  }

  .rule .tgl:before {
    content: "";
    position: absolute;
    inset: -3px -2px;
  }

  .ed-stage .cbtn.go:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
  }

  .hm-st {
    z-index: 10;
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  .hm-st button {
    pointer-events: auto;
  }

  .hm-gal {
    width: 20.5em;
    position: absolute;
    top: 13em;
    left: 4.5em;
  }

  .hm-fig {
    display: block;
    overflow: visible;
  }

  .hm-gal .hm-fig {
    aspect-ratio: 100 / 130;
    filter: drop-shadow(0 .35em #22123a2e);
    width: 100%;
    height: auto;
  }

  .hm-ghost {
    opacity: .13;
  }

  .hm-ghost .hm-head {
    fill: none;
  }

  .hm-pop {
    transform-box: fill-box;
    transform-origin: 50%;
    animation: .4s cubic-bezier(.3, 1.8, .5, 1) both popIn;
  }

  .hm-lost .hm-head {
    fill: #ffc4ba;
  }

  .hm-lives {
    justify-content: center;
    gap: .35em;
    margin-top: 1.6em;
    display: flex;
  }

  .hm-heart {
    width: 2.2em;
    height: 2.2em;
    fill: var(--tomato);
    stroke: var(--ink);
    stroke-width: 2px;
    stroke-linejoin: round;
    flex: none;
  }

  .hm-heart.hm-gone {
    fill: #fff;
    opacity: .55;
  }

  .hm-clue {
    border: .32em solid var(--ink);
    width: 12.5em;
    height: 12.5em;
    box-shadow: 0 .45em 0 var(--ink);
    background: #fff;
    border-radius: 1.6em;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .3em;
    display: flex;
    position: absolute;
    top: 24em;
    right: 3em;
    transform: rotate(3deg);
  }

  .hm-clue small {
    font-family: var(--font-body);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink2);
    font-size: 1.3em;
    font-weight: 800;
    line-height: 1.2;
  }

  .hm-clue svg, .hm-clue img {
    object-fit: contain;
    width: 8.4em;
    height: 8.4em;
    display: block;
  }

  .hm-wrap {
    justify-content: center;
    display: flex;
    position: absolute;
    top: 14.5em;
    left: 27em;
    right: 3em;
  }

  .hm-word {
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: .25em .5em;
    max-width: 100%;
    display: flex;
  }

  .hm-w-l {
    font-size: 5em;
  }

  .hm-w-m {
    font-size: 3.8em;
  }

  .hm-w-s {
    font-size: 2.65em;
  }

  .hm-w-xs {
    font-size: 2em;
  }

  .hm-g {
    gap: .1em;
    display: inline-flex;
  }

  .hm-t {
    box-sizing: border-box;
    width: 1.3em;
    height: 1.7em;
    font-size: .85em;
    line-height: 1;
    font-weight: inherit;
    color: var(--ink);
    border: .08em solid var(--ink);
    box-shadow: 0 .08em 0 var(--ink);
    background: #fff9;
    border-radius: .24em;
    place-items: center;
    display: grid;
  }

  .hm-t.hm-sym {
    width: .7em;
    box-shadow: none;
    background: none;
    border: 0;
  }

  .hm-t.hm-up {
    background: #fff;
    animation: .35s cubic-bezier(.3, 1.8, .5, 1) popIn;
  }

  .hm-t.hm-late {
    color: var(--danger);
    background: #ffd1c9;
  }

  .hm-sayw {
    justify-content: center;
    width: 56em;
    display: flex;
    position: absolute;
    top: 25em;
    left: 27em;
  }

  .hm-say {
    white-space: normal;
    text-overflow: clip;
    max-width: 26em;
    margin: 0;
  }

  .hm-say:empty {
    visibility: hidden;
  }

  .hm-act {
    justify-content: center;
    width: 56em;
    display: flex;
    position: absolute;
    top: 31.5em;
    left: 27em;
  }

  .hm-kb {
    grid-template-columns: repeat(var(--hm-cols),1fr);
    gap: .6em;
    width: 56em;
    display: grid;
    position: absolute;
    top: 37.5em;
    left: 27em;
  }

  .hm-kb-9 {
    --hm-cols: 9;
    --hm-fs: 3.2em;
  }

  .hm-kb-10 {
    --hm-cols: 10;
    --hm-fs: 2.9em;
  }

  .hm-kb-11 {
    --hm-cols: 11;
    --hm-fs: 2.6em;
  }

  .hm-kb-12 {
    --hm-cols: 12;
    --hm-fs: 2.4em;
  }

  .hm-kb-13 {
    --hm-cols: 13;
    --hm-fs: 2.2em;
  }

  .cbtn.hm-key {
    width: 100%;
    height: 1.6em;
    font-size: var(--hm-fs);
    font-weight: inherit;
    box-shadow: 0 .12em 0 var(--ink);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    border-width: .09em;
    border-radius: .35em;
    line-height: 1;
  }

  .cbtn.hm-key:active {
    box-shadow: 0 .04em 0 var(--ink);
    transform: translateY(.1em);
  }

  .cbtn.hm-key:focus-visible {
    outline: .12em solid var(--blue);
    outline-offset: .04em;
  }

  .cbtn.hm-key.hm-hit {
    background: #c9f3e7;
  }

  .cbtn.hm-key.hm-no {
    background: #ffd1c9;
  }

  .cbtn.hm-key.hm-used {
    cursor: default;
    box-shadow: 0 .04em 0 var(--ink);
    transform: translateY(.08em);
  }

  .hm-off .cbtn.hm-key {
    opacity: .6;
    cursor: default;
  }

  .hm-th {
    z-index: 10;
    pointer-events: none;
    font-family: var(--gfont, var(--font-display)),sans-serif;
    font-weight: var(--gw, 400);
    color: var(--ink);
    position: absolute;
    inset: 0;
  }

  .hm-th .hm-fig {
    filter: drop-shadow(0 .35em #22123a2e);
    width: 20em;
    height: 26em;
    position: absolute;
    top: 11em;
    left: 7em;
  }

  .hm-th-wrap {
    justify-content: center;
    display: flex;
    position: absolute;
    top: 21em;
    left: 32em;
    right: 5em;
  }

  .na-h {
    background: #ffd3e6;
  }

  .na-h svg {
    width: 76px;
    height: 99px;
    position: absolute;
    bottom: 12px;
    left: calc(50% - 120px);
    overflow: visible;
  }

  .hm-na-w {
    gap: 6px;
    display: flex;
    position: absolute;
    bottom: 26px;
    left: calc(50% - 20px);
  }

  .hm-na-w i {
    box-sizing: border-box;
    border: 3px solid var(--ink);
    width: 30px;
    height: 38px;
    box-shadow: 0 3px 0 var(--ink);
    font-family: var(--font-display);
    color: var(--ink);
    background: #fff;
    border-radius: 8px;
    place-items: center;
    font-size: 22px;
    font-style: normal;
    line-height: 1;
    display: grid;
  }

  @media (prefers-reduced-motion: reduce) {
    .hm-pop, .hm-t.hm-up {
      animation: none;
    }
  }

  .ws {
    z-index: 12;
    pointer-events: none;
    align-items: stretch;
    gap: 2em;
    display: flex;
    position: absolute;
    top: 12.5em;
    left: 50%;
    transform: translateX(-50%);
  }

  .ws-card {
    pointer-events: auto;
    border: .32em solid var(--ink);
    box-shadow: 0 .5em 0 var(--ink);
    background: #fff;
    border-radius: 2.2em;
    padding: 1.3em;
  }

  .ws-gw {
    position: relative;
  }

  .ws-grid {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    height: 100%;
    display: grid;
  }

  .ws-cell {
    color: var(--ink);
    font-family: inherit;
    font-weight: inherit;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    background: none;
    border: 0;
    border-radius: .3em;
    place-items: center;
    margin: 0;
    padding: 0;
    font-size: 1em;
    line-height: 1;
    display: grid;
  }

  .ws-cell:focus-visible {
    outline: .14em solid var(--blue);
    outline-offset: -.1em;
    z-index: 1;
  }

  @media (hover: hover) {
    .ws-cell:hover:not(.ws-hit):not(.ws-sel):not(.ws-start) {
      background: var(--lavender);
    }
  }

  .ws-cell.ws-gone {
    background: var(--lavender);
    box-shadow: inset 0 0 0 .08em var(--tomato);
  }

  .ws-cell.ws-hit {
    background: var(--accent);
    color: var(--accentInk);
    animation: .35s cubic-bezier(.3, 1.8, .5, 1) popIn;
  }

  .ws-cell.ws-sel {
    background: var(--sun);
    color: var(--ink);
    box-shadow: inset 0 0 0 .08em var(--ink);
  }

  .ws-cell.ws-start {
    background: var(--lilac);
    color: #fff;
    box-shadow: inset 0 0 0 .08em var(--ink);
  }

  .ws-list {
    pointer-events: auto;
    box-sizing: border-box;
    border: .16em solid var(--ink);
    width: 13.5em;
    box-shadow: 0 .25em 0 var(--ink);
    background: #fff;
    border-radius: 1.1em;
    flex-direction: column;
    justify-content: center;
    gap: .18em;
    margin: 0;
    padding: .55em .6em;
    font-size: 2em;
    list-style: none;
    display: flex;
  }

  .ws-word {
    align-items: center;
    gap: .35em;
    min-height: 1.35em;
    line-height: 1.1;
    display: flex;
  }

  .ws-pic {
    flex: none;
    place-items: center;
    width: 1.3em;
    height: 1.3em;
    display: grid;
  }

  .ws-pic svg, .ws-pic img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block;
  }

  .ws-w {
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    font-size: .9em;
    overflow: hidden;
  }

  .ws-mark {
    flex: none;
    width: .9em;
    height: .9em;
  }

  .ws-done .ws-w {
    color: var(--ink2);
    text-decoration: line-through;
    text-decoration-thickness: .1em;
  }

  .ws-done .ws-mark {
    color: var(--mint);
    animation: .4s cubic-bezier(.3, 1.8, .5, 1) popIn;
  }

  .ws-lost .ws-w, .ws-lost .ws-mark {
    color: var(--tomato);
  }

  .ws-th {
    z-index: 10;
    border: .8em solid var(--ink);
    width: 52em;
    box-shadow: 0 1.2em 0 var(--ink);
    background: #fff;
    border-radius: 4em;
    grid-template-columns: repeat(7, 1fr);
    gap: .4em;
    padding: 2em 2.4em;
    display: grid;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%);
  }

  .ws-th span {
    color: var(--ink);
    font-family: var(--gfont, var(--font-display));
    font-weight: var(--gw, 400);
    border-radius: .3em;
    place-items: center;
    font-size: 5.4em;
    line-height: 1.1;
    display: grid;
  }

  .ws-th span.ws-th-hit {
    background: var(--accent);
    color: var(--accentInk);
  }

  .na-s {
    background: #c8f6e8;
  }

  .na-s i {
    border: 3px solid var(--ink);
    width: 176px;
    box-shadow: 0 4px 0 var(--ink);
    background: #fff;
    border-radius: 14px;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    margin: -60px 0 0 -88px;
    padding: 8px 10px;
    display: grid;
    position: absolute;
    top: 50%;
    left: 50%;
  }

  .na-s em {
    font-style: normal;
    font-family: var(--font-display);
    text-align: center;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.3;
  }

  .na-s u {
    border: 2.5px solid var(--tomato);
    background: #ff5c4361;
    border-radius: 14px;
    width: 72%;
    height: 28px;
    text-decoration: none;
    position: absolute;
    top: 6px;
    left: 6px;
  }

  @media (prefers-reduced-motion: reduce) {
    .ws-cell.ws-hit, .ws-done .ws-mark {
      animation: none;
    }
  }

  .qz-st {
    z-index: 10;
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  .qz-st button {
    pointer-events: auto;
  }

  .qz-q {
    box-sizing: border-box;
    border: .32em solid var(--ink);
    width: 72em;
    height: 13em;
    box-shadow: 0 .45em 0 var(--ink);
    background: #fff;
    border-radius: 1.8em;
    align-items: center;
    gap: 2em;
    padding: 1em 2.4em;
    animation: .35s ease-out cardIn;
    display: flex;
    position: absolute;
    top: 12em;
    left: 14em;
  }

  .qz-pic {
    flex: none;
    place-items: center;
    width: 9.6em;
    height: 9.6em;
    display: grid;
  }

  .qz-pic svg, .qz-pic img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block;
  }

  .qz-qt {
    min-width: 0;
    font-family: inherit;
    font-weight: inherit;
    text-align: center;
    color: var(--ink);
    flex: 1;
    margin: 0;
    line-height: 1.15;
    overflow: hidden;
  }

  .qz-qt:focus {
    outline: none;
  }

  .qz-qt-l {
    font-size: 3.8em;
  }

  .qz-qt-m {
    font-size: 3em;
  }

  .qz-qt-s {
    font-size: 2.3em;
  }

  .qz-opts {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 9em;
    gap: 1.4em;
    width: 72em;
    display: grid;
    position: absolute;
    top: 27em;
    left: 14em;
  }

  .qz-n3 .qz-opt:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - .7em);
  }

  .cbtn.qz-opt {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    font-size: 2.9em;
    font-weight: inherit;
    text-align: left;
    box-shadow: 0 .12em 0 var(--ink);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    border-width: .09em;
    border-radius: .45em;
    align-items: center;
    gap: .6em;
    padding: 0 .7em;
    line-height: 1.1;
    animation: .35s ease-out cardIn;
    display: flex;
  }

  .qz-o-s .cbtn.qz-opt {
    box-shadow: 0 .17em 0 var(--ink);
    border-width: .12em;
    font-size: 2.1em;
  }

  .cbtn.qz-opt:active {
    box-shadow: 0 .04em 0 var(--ink);
    transform: translateY(.1em);
  }

  .cbtn.qz-opt:focus-visible {
    outline: .12em solid var(--blue);
    outline-offset: .06em;
  }

  .qz-key {
    box-sizing: border-box;
    width: 1.5em;
    height: 1.5em;
    font-size: .8em;
    font-weight: inherit;
    color: var(--ink);
    background: var(--lavender);
    border: .09em solid var(--ink);
    border-radius: 50%;
    flex: none;
    place-items: center;
    line-height: 1;
    display: grid;
  }

  .qz-opt-t {
    overflow-wrap: anywhere;
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  .cbtn.qz-opt.qz-right {
    background: #c9f3e7;
    animation: .45s ease-out okpulse;
  }

  .cbtn.qz-opt.qz-no {
    background: #ffd1c9;
  }

  .qz-right .qz-key {
    color: #fff;
    background: var(--mint);
  }

  .qz-no .qz-key {
    color: #fff;
    background: var(--tomato);
  }

  .qz-over .cbtn.qz-opt {
    cursor: default;
  }

  .qz-over .cbtn.qz-opt:hover, .qz-over .cbtn.qz-opt:active {
    box-shadow: 0 .12em 0 var(--ink);
    transform: none;
  }

  .qz-over .cbtn.qz-opt:not(.qz-right):not(.qz-no) {
    opacity: .55;
  }

  .qz-sayw {
    justify-content: center;
    width: 72em;
    display: flex;
    position: absolute;
    top: 48em;
    left: 14em;
  }

  .qz-say {
    white-space: normal;
    text-overflow: clip;
    max-width: 48em;
    margin: 0;
  }

  .qz-say:empty {
    visibility: hidden;
  }

  .qz-act {
    justify-content: center;
    width: 72em;
    display: flex;
    position: absolute;
    top: 52.5em;
    left: 14em;
  }

  .qz-frozen .tmr * {
    animation-play-state: paused !important;
  }

  .qz-secs {
    border: .25em solid var(--ink);
    box-shadow: 0 .3em 0 var(--ink);
    font-family: var(--font-body);
    white-space: nowrap;
    color: var(--ink);
    background: #fff;
    border-radius: 2em;
    align-items: center;
    gap: .5em;
    padding: .3em 1em .3em .8em;
    font-size: 1.7em;
    font-weight: 800;
    line-height: 1.2;
    display: flex;
    position: absolute;
    top: 32.6em;
    left: 8.2em;
  }

  .qz-th {
    z-index: 10;
    pointer-events: none;
    font-family: var(--gfont, var(--font-display)),sans-serif;
    font-weight: var(--gw, 400);
    color: var(--ink);
    position: absolute;
    inset: 0;
  }

  .qz-th-q {
    box-sizing: border-box;
    border: .32em solid var(--ink);
    width: 76em;
    min-height: 13em;
    box-shadow: 0 .45em 0 var(--ink);
    text-align: center;
    background: #fff;
    border-radius: 1.8em;
    place-items: center;
    padding: 1em 2em;
    font-size: 3.6em;
    line-height: 1.15;
    display: grid;
    position: absolute;
    top: 9em;
    left: 12em;
  }

  .qz-th-opts {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 7.4em;
    gap: 1.2em;
    width: 76em;
    display: grid;
    position: absolute;
    top: 27em;
    left: 12em;
  }

  .qz-th-n3 .qz-th-o:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - .6em);
  }

  .qz-th-o {
    box-sizing: border-box;
    border: .3em solid var(--ink);
    box-shadow: 0 .3em 0 var(--ink);
    white-space: nowrap;
    background: #fff;
    border-radius: 1.4em;
    align-items: center;
    gap: .5em;
    padding: 0 .7em;
    font-size: 2.6em;
    line-height: 1;
    display: flex;
    overflow: hidden;
  }

  .qz-th-o b {
    width: 1.4em;
    height: 1.4em;
    font-size: .8em;
    font-weight: inherit;
    background: var(--lavender);
    border: .09em solid var(--ink);
    border-radius: 50%;
    flex: none;
    place-items: center;
    display: grid;
  }

  .qz-th-right {
    background: #c9f3e7;
  }

  .na-q {
    background: #cfe6ff;
  }

  .qz-na-q {
    box-sizing: border-box;
    border: 3px solid var(--ink);
    width: 180px;
    height: 50px;
    box-shadow: 0 4px 0 var(--ink);
    background: #fff;
    border-radius: 14px;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    display: flex;
    position: absolute;
    top: 20px;
    left: calc(50% - 90px);
  }

  .qz-na-q i {
    background: var(--ink);
    opacity: .85;
    border-radius: 5px;
    height: 8px;
    display: block;
  }

  .qz-na-q i + i {
    opacity: .35;
    width: 60%;
  }

  .qz-na-a {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 180px;
    display: grid;
    position: absolute;
    bottom: 22px;
    left: calc(50% - 90px);
  }

  .qz-na-a em {
    box-sizing: border-box;
    border: 3px solid var(--ink);
    height: 34px;
    box-shadow: 0 3px 0 var(--ink);
    font-style: normal;
    font-family: var(--font-display);
    color: var(--ink);
    background: #fff;
    border-radius: 11px;
    place-items: center;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    display: grid;
  }

  .qz-na-a em.on {
    background: var(--sun);
  }

  .qz-ed {
    border: 2.5px solid var(--ink);
    background: #fff;
    border-radius: 14px;
    flex-direction: column;
    grid-column: 1 / -1;
    gap: 8px;
    margin: 0;
    padding: 12px;
    display: flex;
  }

  .qz-ed-h {
    color: var(--ink2);
    margin: 0;
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.3;
  }

  .qz-ed-rows {
    flex-direction: column;
    gap: 7px;
    display: flex;
  }

  .qz-ed-row {
    grid-template-columns: auto minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
    display: grid;
  }

  .qz-ed-row .inp {
    min-height: 44px;
    font-size: 16px;
  }

  .qz-ed-row .ferr {
    grid-column: 1 / -1;
    margin: 0;
  }

  .qz-ed-row .sbtn {
    width: 44px;
    height: 44px;
  }

  .qz-ok {
    box-sizing: border-box;
    border: 2.5px solid var(--ink);
    min-height: 44px;
    color: var(--ink2);
    cursor: pointer;
    background: #fff;
    border-radius: 13px;
    align-items: center;
    gap: 7px;
    padding: 0 12px 0 10px;
    font-size: 13.5px;
    font-weight: 800;
    transition: background .15s, color .15s;
    display: inline-flex;
  }

  .qz-ok input {
    width: 18px;
    height: 18px;
    accent-color: var(--ink);
    cursor: pointer;
    margin: 0;
  }

  .qz-ok:has(input:checked) {
    color: var(--ink);
    background: #c9f3e7;
  }

  .qz-ok:has(input:focus-visible) {
    box-shadow: 0 0 0 4px #3d9bff66;
  }

  .qz-ed-foot {
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    display: flex;
  }

  .qz-ed-foot .btn {
    min-height: 44px;
  }

  .qz-ed-max {
    color: var(--ink2);
    font-size: 13.5px;
    font-weight: 700;
  }

  .qz-ed-state {
    color: var(--ink2);
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    display: flex;
  }

  .qz-ed-state.ok {
    color: var(--ink);
  }

  .qz-ed-state .ico {
    width: 18px;
    height: 18px;
    color: var(--mint);
    flex: none;
  }

  @media (max-width: 520px) {
    .qz-ed-row {
      grid-template-columns: minmax(0, 1fr) 44px;
    }

    .qz-ok {
      grid-column: 1 / -1;
      justify-self: start;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .qz-q, .cbtn.qz-opt, .cbtn.qz-opt.qz-right {
      animation: none;
    }
  }

  .mm-st {
    z-index: 10;
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  .mm-st button {
    pointer-events: auto;
  }

  .mm-g {
    --mm-gap: 1.2em;
    --mm-cols: 4;
    --mm-rows: 2;
    --mm-room-w: 72em;
    --mm-room-h: 37.5em;
    --mm-w: min(17em,calc((var(--mm-room-w) - (var(--mm-cols) - 1) * var(--mm-gap)) / var(--mm-cols)),calc((var(--mm-room-h) - (var(--mm-rows) - 1) * var(--mm-gap)) / var(--mm-rows)));
    grid-template-columns: repeat(var(--mm-cols),var(--mm-w));
    grid-auto-rows: var(--mm-w);
    gap: var(--mm-gap);
    place-content: center;
    display: grid;
    position: absolute;
    inset: 13em 14em 12em;
  }

  .mm-card {
    width: 100%;
    height: 100%;
    font-size: calc(var(--mm-w) / 10);
    perspective: 90em;
    transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
    position: relative;
  }

  .mm-card .ci {
    transition-duration: .5s;
  }

  .mm-card.mm-up .ci {
    transform: rotateY(180deg);
  }

  @media (hover: hover) {
    .mm-card:not(.mm-up):hover {
      transform: translateY(-.5em);
    }
  }

  .mm-hit {
    z-index: 6;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    background: none;
    border: 0;
    border-radius: 1.3em;
    padding: 0;
    position: absolute;
    inset: -.4em;
  }

  .mm-hit[aria-disabled="true"] {
    cursor: default;
  }

  .mm-hit:focus-visible {
    outline: .4em solid var(--blue);
    outline-offset: .1em;
  }

  .mm-done .cf {
    background: var(--mint);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .mm-done .cf {
      background: color-mix(in srgb,var(--mint) 24%,white);
    }
  }

  .mm-done .cfi {
    background: none;
  }

  .mm-bad .cf {
    background: var(--tomato);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .mm-bad .cf {
      background: color-mix(in srgb,var(--tomato) 22%,white);
    }
  }

  .mm-bad .cfi {
    background: none;
  }

  .mm-done {
    animation: .5s okpulse;
  }

  .mm-bad {
    animation: .42s nopeA;
  }

  .mm-sayw {
    justify-content: center;
    display: flex;
    position: absolute;
    bottom: 7em;
    left: 14em;
    right: 14em;
  }

  .mm-say {
    white-space: normal;
    max-width: 36em;
    margin: 0;
  }

  .mm-th {
    z-index: 10;
    pointer-events: none;
    font-family: var(--gfont, var(--font-display)),sans-serif;
    font-weight: var(--gw, 400);
    color: var(--ink);
    position: absolute;
    inset: 0;
  }

  .mm-th .mm-g {
    --mm-room-h: 42.5em;
    top: 10em;
    bottom: 10em;
  }

  .na-m {
    background: var(--lavender);
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: flex;
  }

  .na-m i {
    box-sizing: border-box;
    background: var(--sun);
    border: 3px solid var(--ink);
    width: 56px;
    height: 76px;
    box-shadow: 0 4px 0 var(--ink);
    border-radius: 14px;
    flex: none;
    place-items: center;
    display: grid;
  }

  .na-m i.mm-na-up {
    background: #fff;
  }

  .na-m svg {
    width: 38px;
    height: 38px;
  }

  .mm-ed {
    border: 2.5px solid var(--ink);
    background: var(--lavender-soft);
    border-radius: 16px;
    flex-direction: column;
    gap: 10px;
    margin: 2px 0 6px;
    padding: 12px 14px;
    display: flex;
  }

  .mm-ed-head {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px 14px;
    display: flex;
  }

  .mm-ed-name {
    color: var(--ink2);
    font-size: 13.5px;
    font-weight: 800;
  }

  .mm-ed-name small {
    font-size: 12.5px;
    font-weight: 600;
    display: block;
  }

  .mm-ed-choice {
    flex-wrap: wrap;
    gap: 8px;
    display: flex;
  }

  .mm-ed-opt {
    box-sizing: border-box;
    border: 2.5px solid var(--ink);
    min-height: 44px;
    color: var(--ink2);
    cursor: pointer;
    background: #fff;
    border-radius: 13px;
    align-items: center;
    gap: 8px;
    padding: 0 14px 0 12px;
    font-size: 14.5px;
    font-weight: 800;
    transition: background .15s, color .15s;
    display: inline-flex;
  }

  .mm-ed-opt input {
    width: 18px;
    height: 18px;
    accent-color: var(--ink);
    cursor: pointer;
    margin: 0;
  }

  .mm-ed-opt:has(input:checked) {
    background: var(--sun);
    color: var(--ink);
  }

  .mm-ed-opt:has(input:focus-visible) {
    box-shadow: 0 0 0 4px #3d9bff66;
  }

  .mm-ed .inp {
    min-height: 50px;
    font-size: 17px;
  }

  .mm-ed-pic {
    box-sizing: border-box;
    border: 2.5px dashed var(--ink);
    width: 100%;
    min-height: 64px;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    background: #fff;
    border-radius: 16px;
    align-items: center;
    gap: 12px;
    padding: 6px 14px 6px 8px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 800;
    display: flex;
  }

  .mm-ed-pic:hover {
    background: var(--sun);
  }

  .mm-ed-pic:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px #3d9bff66;
  }

  .mm-ed-thumb {
    border: 2.5px solid var(--ink);
    background: var(--lavender);
    border-radius: 12px;
    flex: none;
    place-items: center;
    width: 52px;
    height: 52px;
    display: grid;
    overflow: hidden;
  }

  .mm-ed-thumb svg, .mm-ed-thumb img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block;
  }

  .mm-ed-thumb .none {
    width: 26px;
    height: 26px;
    color: var(--ink2);
  }

  .mm-ed .ferr {
    margin: 0;
  }

  .mm-ed-state {
    color: var(--ink2);
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    display: flex;
  }

  .mm-ed-state.ok {
    color: var(--ink);
  }

  .mm-ed-state .ico {
    width: 18px;
    height: 18px;
    color: var(--mint);
    flex: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .mm-card, .mm-card .ci {
      transition: none;
    }

    .mm-card:not(.mm-up):hover {
      transform: none;
    }

    .mm-done, .mm-bad {
      animation: none;
    }

    .mm-ed-opt {
      transition: none;
    }
  }

  .scr-st {
    z-index: 10;
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  .scr-st button {
    pointer-events: auto;
  }

  .scr-col {
    flex-direction: column;
    align-items: stretch;
    gap: 1em;
    width: 66em;
    display: flex;
    position: absolute;
    top: 12.5em;
    left: 17em;
  }

  .scr-clue {
    border: .32em solid var(--ink);
    width: 12.5em;
    height: 12.5em;
    box-shadow: 0 .45em 0 var(--ink);
    background: #fff;
    border-radius: 1.6em;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .3em;
    display: flex;
    position: absolute;
    top: 14em;
    left: 3em;
    transform: rotate(-3deg);
  }

  .scr-clue small {
    font-family: var(--font-body);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink2);
    font-size: 1.3em;
    font-weight: 800;
    line-height: 1.2;
  }

  .scr-clue svg, .scr-clue img {
    object-fit: contain;
    width: 8.4em;
    height: 8.4em;
    display: block;
  }

  .scr-s-l {
    font-size: 4.4em;
  }

  .scr-s-m {
    font-size: 3.6em;
  }

  .scr-s-s {
    font-size: 3em;
  }

  .scr-s-xs {
    font-size: 2.5em;
  }

  .scr-line {
    box-sizing: border-box;
    border: .32em solid var(--ink);
    min-height: 10em;
    box-shadow: 0 .5em 0 var(--ink);
    background: #fff;
    border-radius: 2.2em;
    justify-content: center;
    align-items: center;
    padding: 1.2em 1.6em;
    display: flex;
    position: relative;
  }

  .scr-words, .scr-bank {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .22em .3em;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .scr-ph {
    font-family: var(--font-body);
    color: var(--ink2);
    pointer-events: none;
    place-items: center;
    font-size: 2.4em;
    font-weight: 700;
    display: grid;
    position: absolute;
    inset: 0;
  }

  .scr-w {
    box-sizing: border-box;
    font-family: inherit;
    font-weight: inherit;
    color: var(--ink);
    border: .07em solid var(--ink);
    box-shadow: 0 .08em 0 var(--ink);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    background: #fff;
    border-radius: .4em;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: .16em .42em .22em;
    font-size: 1em;
    line-height: 1.15;
    transition: transform .1s, box-shadow .1s;
    display: inline-flex;
  }

  .scr-w:active {
    box-shadow: 0 .02em 0 var(--ink);
    transform: translateY(.06em);
  }

  .scr-w:focus-visible {
    outline: .1em solid var(--blue);
    outline-offset: .05em;
  }

  @media (hover: hover) {
    .scr-bank .scr-w:not(.scr-used):hover {
      transform: translateY(-.05em);
    }
  }

  .scr-w.scr-put {
    background: var(--accent);
    color: var(--accentInk);
    animation: .3s cubic-bezier(.3, 1.8, .5, 1) popIn;
  }

  .scr-w.scr-used {
    cursor: default;
    box-shadow: none;
    opacity: .4;
    background: none;
    border-style: dashed;
    transform: none;
  }

  .scr-w.scr-fixed {
    cursor: default;
    animation: .3s cubic-bezier(.3, 1.8, .5, 1) popIn;
  }

  .scr-w.scr-ok {
    background: var(--mint);
    color: var(--ink);
  }

  .scr-w.scr-late {
    background: var(--tomato);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .scr-w.scr-late {
      background: color-mix(in srgb,var(--tomato) 26%,#fff);
    }
  }

  .scr-w.scr-late {
    color: var(--ink);
  }

  .scr-off .scr-w {
    cursor: default;
  }

  .scr-act {
    justify-content: center;
    align-items: center;
    gap: 2em;
    min-height: 4.8em;
    display: flex;
  }

  .scr-tries {
    gap: .5em;
    display: flex;
  }

  .scr-tries i {
    box-sizing: border-box;
    background: var(--sun);
    border: .25em solid var(--ink);
    width: 1.9em;
    height: 1.9em;
    box-shadow: 0 .2em 0 var(--ink);
    border-radius: 50%;
    display: block;
  }

  .scr-tries i.scr-gone {
    opacity: .5;
    box-shadow: none;
    background: #fff;
  }

  .scr-say {
    white-space: normal;
    text-overflow: clip;
    align-self: center;
    max-width: 30em;
    margin: 0;
  }

  .scr-say:empty {
    visibility: hidden;
  }

  .scr-th {
    z-index: 10;
    pointer-events: none;
    font-family: var(--gfont, var(--font-display)),sans-serif;
    font-weight: var(--gw, 400);
    color: var(--ink);
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .scr-th-words {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .25em .35em;
    max-width: 86em;
    display: flex;
  }

  .scr-th .scr-w {
    cursor: default;
  }

  .scr-th .scr-w:nth-child(odd) {
    transform: rotate(-4deg);
  }

  .scr-th .scr-w:nth-child(2n) {
    transform: rotate(3deg)translateY(.08em);
  }

  .scr-th .scr-w:nth-child(3n+1) {
    background: var(--accent);
    color: var(--accentInk);
  }

  .na-sc {
    background: #ffe9a8;
  }

  .scr-na-l, .scr-na-b {
    justify-content: center;
    gap: 8px;
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
  }

  .scr-na-l {
    top: 30px;
  }

  .scr-na-b {
    bottom: 24px;
  }

  .na-sc em {
    box-sizing: border-box;
    border: 3px solid var(--ink);
    box-shadow: 0 3px 0 var(--ink);
    font-style: normal;
    font-family: var(--font-display);
    color: var(--ink);
    background: #fff;
    border-radius: 12px;
    padding: 6px 13px 9px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    display: block;
  }

  .na-sc .scr-na-on {
    background: var(--tomato);
    color: #fff;
  }

  .na-sc .scr-na-gap {
    width: 64px;
    box-shadow: none;
    background: none;
    border-style: dashed;
  }

  .scr-na-b em:first-child {
    transform: rotate(-5deg);
  }

  .scr-na-b em:nth-child(2) {
    transform: rotate(4deg)translateY(2px);
  }

  @media (prefers-reduced-motion: reduce) {
    .scr-w.scr-put, .scr-w.scr-fixed {
      animation: none;
    }

    .scr-w {
      transition: none;
    }
  }

  .rec {
    border: .14em solid var(--ink);
    box-shadow: 0 .35em 0 var(--ink);
    text-align: left;
    font-family: var(--font-body);
    background: #f6f5fb;
    border-radius: 1.6em;
    margin: 0 0 1.3em;
    padding: 1.3em 1.4em 1.4em;
  }

  .rec-who {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .8em 1em;
    margin-bottom: 1.1em;
    display: flex;
  }

  .rec-l {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: 2.2em;
    line-height: 1;
  }

  .rec-seg {
    border: .14em solid var(--ink);
    box-shadow: 0 .25em 0 var(--ink);
    background: #fff;
    border-radius: 3em;
    gap: .3em;
    max-width: 100%;
    padding: .3em;
    display: inline-flex;
  }

  .rec-tab {
    min-height: 2.3em;
    color: var(--ink2);
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: 2em;
    align-items: center;
    gap: .45em;
    padding: .2em 1em;
    font-family: inherit;
    font-size: 1.5em;
    font-weight: 800;
    line-height: 1.1;
    transition: background .15s, color .15s, box-shadow .1s, transform .1s;
    display: inline-flex;
  }

  .rec-tab svg {
    flex: none;
    width: 1.15em;
    height: 1.15em;
  }

  .rec-tab:hover {
    color: var(--ink);
    background: #ede9f7;
  }

  .rec-tab.on {
    background: var(--ink);
    color: #fff;
    box-shadow: 0 .16em 0 var(--tomato);
    transform: translateY(-.06em);
  }

  .rec-row {
    flex-wrap: wrap;
    align-items: center;
    gap: .9em;
    display: flex;
  }

  .rec-inp {
    border: .12em solid var(--ink);
    width: 100%;
    min-width: 0;
    height: 2.6em;
    color: var(--ink);
    background: #fff;
    border-radius: .8em;
    padding: 0 .8em;
    font-family: inherit;
    font-size: 1.8em;
    font-weight: 600;
    transition: box-shadow .15s;
    box-shadow: inset 0 .1em #22123a12;
  }

  .rec-inp::placeholder {
    color: #8f83a3;
    font-weight: 500;
  }

  .rec-inp:focus {
    outline: none;
    box-shadow: 0 0 0 .2em #3d9bff66;
  }

  .rec-inp:disabled {
    opacity: .55;
    cursor: not-allowed;
  }

  .rec-f {
    flex: 16em;
    min-width: 0;
    position: relative;
  }

  .rec-f > svg {
    width: 2em;
    height: 2em;
    color: var(--ink2);
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 1.3em;
    transform: translateY(-50%);
  }

  .rec-f .rec-inp {
    padding-left: 2.4em;
  }

  .rec-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1em;
    display: grid;
  }

  .rec-step {
    flex-direction: column;
    gap: .5em;
    min-width: 0;
    transition: opacity .2s;
    display: flex;
  }

  .rec-step.off {
    opacity: .55;
  }

  .rec-sh {
    align-items: center;
    gap: .6em;
    display: flex;
  }

  .rec-sh label {
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink2);
    font-size: 1.4em;
    font-weight: 800;
  }

  .rec-n {
    border: .1em solid var(--ink);
    background: var(--sun);
    width: 1.6em;
    height: 1.6em;
    font-family: var(--font-display);
    color: var(--ink);
    border-radius: 50%;
    flex: none;
    place-items: center;
    font-size: 1.5em;
    line-height: 1;
    display: grid;
  }

  .rec-step + .rec-step .rec-n {
    background: var(--mint);
  }

  .rec-sel {
    position: relative;
  }

  .rec-sel .rec-inp {
    appearance: none;
    text-overflow: ellipsis;
    cursor: pointer;
    padding-right: 2em;
  }

  .rec-sel > svg {
    width: 1.8em;
    height: 1.8em;
    color: var(--ink);
    pointer-events: none;
    position: absolute;
    top: 50%;
    right: 1.1em;
    transform: translateY(-50%);
  }

  .rec-foot {
    justify-content: flex-end;
    margin-top: 1.1em;
    display: flex;
  }

  .rec .cbtn.wide {
    font-size: 1.7em;
    font-family: var(--gfont);
    color: var(--ink);
    text-decoration: none;
  }

  .rec .cbtn[disabled] {
    opacity: .45;
    pointer-events: none;
  }

  .pcard .rec p, .rec-msg {
    color: var(--ink2);
    margin: .7em 0 0;
    font-size: 1.5em;
    font-weight: 700;
  }

  .rec-err {
    color: #b3261e;
    flex-direction: column;
    gap: .2em;
    display: flex;
  }

  .rec-link {
    font: inherit;
    color: var(--ink);
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    font-weight: 800;
    text-decoration: underline;
  }

  .rec-done {
    background: #c8f6e8;
    flex-wrap: wrap;
    align-items: center;
    gap: 1em 1.2em;
    display: flex;
  }

  .rec-stk {
    filter: drop-shadow(0 .3em #22123a38);
    flex: none;
    width: 6em;
    height: 6em;
    animation: .5s cubic-bezier(.3, 1.7, .5, 1) both popIn;
  }

  .rec-stk svg {
    width: 100%;
    height: 100%;
    transform: rotate(-8deg);
  }

  .pcard .rec-done p {
    color: var(--ink);
    flex-direction: column;
    flex: 14em;
    gap: .15em;
    margin: 0;
    font-size: 1.7em;
    display: flex;
  }

  .rec-yay {
    font-family: var(--font-display);
    font-size: 1.5em;
    font-weight: 400;
    line-height: 1;
  }

  .rec-done .cbtn.wide {
    margin-left: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .rec-stk {
      animation: none;
    }
  }

  .rhead {
    border: 3px solid var(--ink);
    box-shadow: 0 7px 0 var(--ink);
    background: #fff;
    border-radius: 28px;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px 28px;
    margin-bottom: 44px;
    padding: 18px;
    animation: .5s cubic-bezier(.3, 1.5, .5, 1) both cardIn;
    display: grid;
  }

  .rhead-thumb {
    border: 3px solid var(--ink);
    border-radius: 20px;
    overflow: hidden;
    transform: rotate(-2deg);
  }

  .rhead-thumb .athumb {
    border-bottom: 0;
  }

  .rhead-b {
    min-width: 0;
  }

  .rhead-b .h2 {
    overflow-wrap: anywhere;
    font-size: clamp(30px, 3.4vw, 46px);
  }

  .rhead-k {
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
    display: flex;
  }

  .rhead-a {
    flex-wrap: wrap;
    gap: 10px;
    display: flex;
  }

  .rback {
    color: var(--ink2);
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
  }

  .rback:hover {
    color: var(--ink);
    text-decoration: underline;
  }

  .rback svg {
    width: 16px;
    height: 16px;
  }

  .rsec {
    margin-bottom: 56px;
  }

  .rsec-h {
    margin-bottom: 22px;
  }

  .rsec-h .h2 {
    font-size: clamp(28px, 3vw, 40px);
  }

  .rnote {
    color: var(--ink2);
    margin: 14px 0 0;
    font-size: 14.5px;
    font-weight: 700;
  }

  .rstrip {
    padding-top: 44px;
  }

  .rstrip .stats {
    margin-bottom: 0;
  }

  .podium {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
  }

  .pod {
    flex-direction: column;
    gap: 12px;
    animation: .55s cubic-bezier(.3, 1.5, .5, 1) both cardIn;
    display: flex;
  }

  .pod-1 {
    animation-delay: .16s;
  }

  .pod-3 {
    animation-delay: 80ms;
  }

  .pod-who {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    display: flex;
  }

  .pod-who b {
    overflow-wrap: anywhere;
    font-size: 18px;
    line-height: 1.2;
  }

  .pod-step {
    --pc: #ede9f7;
    background: var(--pc);
    border: 3px solid var(--ink);
    box-shadow: 0 7px 0 var(--ink);
    border-radius: 26px 26px 18px 18px;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 150px;
    padding: 14px 10px 18px;
    display: flex;
  }

  .pod-1 .pod-step {
    --pc: var(--sun);
    min-height: 210px;
  }

  .pod-2 .pod-step {
    --pc: #dcebff;
    min-height: 176px;
  }

  .pod-3 .pod-step {
    --pc: #ffd9e8;
  }

  .pod-rank {
    border: 3px solid var(--ink);
    width: 58px;
    height: 58px;
    box-shadow: 0 4px 0 var(--ink);
    font-family: var(--font-display);
    background: #fff;
    border-radius: 50%;
    place-items: center;
    font-size: 32px;
    line-height: 1;
    display: grid;
    transform: rotate(-6deg);
  }

  .pod-score {
    font-family: var(--font-display);
    margin-top: 6px;
    font-size: 40px;
    line-height: 1;
  }

  .pod-score small {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 13px;
    font-weight: 800;
  }

  .pod-acc {
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
  }

  .rstars {
    vertical-align: middle;
    gap: 2px;
    display: inline-flex;
  }

  .rstars svg {
    --sf: #ede9f7;
    width: 22px;
    height: 22px;
    display: block;
  }

  .rstars svg.on {
    --sf: var(--sun);
  }

  .pod-1 .rstars svg {
    --sf: #e9a800;
  }

  .pod-1 .rstars svg.on {
    --sf: #fff;
  }

  .rwho {
    align-items: center;
    gap: 12px;
    min-width: 0;
    display: flex;
  }

  .rwho-n {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    display: flex;
  }

  .rwho-n b {
    overflow-wrap: anywhere;
    font-size: 16.5px;
    line-height: 1.2;
  }

  .rkind {
    flex-wrap: wrap;
    gap: 6px;
    display: inline-flex;
  }

  .rkind .pill {
    padding: 3px 9px;
    font-size: 11px;
  }

  .rlist {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
  }

  .rrow {
    border-top: 2.5px solid #ede9f7;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    font-size: 15.5px;
    font-weight: 700;
    display: grid;
  }

  .rrow:first-child {
    border-top: 0;
  }

  .rrow.uhead {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .rrow-rank {
    grid-template-columns: 44px minmax(0, 2.2fr) minmax(0, .8fr) auto minmax(0, .7fr) minmax(0, .7fr);
  }

  .rrow-run {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) minmax(0, .7fr) 104px minmax(0, .7fr) minmax(0, .7fr) 46px;
  }

  @media (min-width: 821px) {
    .rrow-rank.rrow-uns {
      grid-template-columns: 44px minmax(0, 2.2fr) minmax(0, .8fr) auto minmax(0, .7fr);
    }

    .rrow-run.rrow-uns {
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) minmax(0, .7fr) 104px minmax(0, .7fr) 46px;
    }
  }

  .rrank {
    border: 2.5px solid var(--ink);
    width: 38px;
    height: 38px;
    font-family: var(--font-display);
    background: #f6f5fb;
    border-radius: 50%;
    place-items: center;
    font-size: 20px;
    line-height: 1;
    display: grid;
  }

  .rscore {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
  }

  .rwhen {
    color: var(--ink2);
    font-size: 14.5px;
  }

  .rfilter {
    flex-wrap: wrap;
    gap: 10px;
    display: flex;
  }

  .rfilter .inp {
    flex: none;
    width: auto;
    min-width: 180px;
  }

  .rev-grid {
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .rev-item {
    border: 3px solid var(--ink);
    min-height: 68px;
    box-shadow: 0 5px 0 var(--ink);
    background: #ffe8a8;
    border-radius: 20px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 14px;
    font-size: 17px;
    font-weight: 700;
    animation: .45s cubic-bezier(.3, 1.5, .5, 1) both cardIn;
    display: flex;
  }

  .rev-item.w {
    background: #ffd0c8;
  }

  .rev-item.gone {
    color: var(--ink2);
    background: #f6f5fb;
    font-style: italic;
  }

  .rev-pic {
    object-fit: contain;
    border-radius: 10px;
    flex: none;
    width: 44px;
    height: 44px;
  }

  .rev-t {
    overflow-wrap: anywhere;
  }

  .rev-n {
    border: 2.5px solid var(--ink);
    min-width: 40px;
    height: 40px;
    font-family: var(--font-display);
    background: #fff;
    border-radius: 999px;
    place-items: center;
    padding: 0 8px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    display: grid;
  }

  .sruns {
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .srun {
    border: 2.5px solid var(--ink);
    background: #fff;
    border-radius: 18px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 14px;
    padding: 12px 14px;
    display: grid;
  }

  .srun-t {
    overflow-wrap: anywhere;
    font-size: 16px;
    font-weight: 800;
  }

  .srun-t a {
    color: inherit;
  }

  .srun-w {
    color: var(--ink2);
    grid-column: 1;
    font-size: 13.5px;
    font-weight: 600;
  }

  .srun-s {
    flex-direction: column;
    grid-area: 1 / 2 / span 2;
    align-items: flex-end;
    gap: 4px;
    display: flex;
  }

  @media (max-width: 820px) {
    .rhead {
      grid-template-columns: 1fr;
    }

    .rhead-thumb {
      max-width: 260px;
    }

    .podium {
      gap: 10px;
    }

    .pod-score {
      font-size: 30px;
    }

    .rrow-run {
      grid-template-columns: 1fr 1fr;
      row-gap: 8px;
    }

    .rrow-run.uhead {
      display: none;
    }

    .rrow-rank {
      grid-template-columns: 44px 1fr auto;
    }

    .rrow-rank > :nth-child(n+5) {
      display: none;
    }
  }

  .shr {
    flex-direction: column;
    gap: 18px;
    display: flex;
  }

  .shr-row {
    border: 2.5px solid var(--ink);
    background: #f6f5fb;
    border-radius: 20px;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    display: flex;
  }

  .shr-t {
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    display: flex;
  }

  .shr-t b {
    font-size: 17px;
  }

  .shr-t span {
    color: var(--ink2);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
  }

  .shr-link {
    align-items: center;
    gap: 10px;
    display: flex;
  }

  .shr-url {
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    font-size: 16px;
  }

  .shr-off, .shr-warn {
    color: var(--ink2);
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.4;
    display: flex;
  }

  .shr-off svg, .shr-warn svg {
    flex: none;
    width: 20px;
    height: 20px;
  }

  .shr-warn {
    color: #8a4b00;
  }

  .shr-renew {
    align-self: flex-start;
  }

  .shr-confirm {
    border: 2.5px solid var(--tomato);
    background: #fff1ee;
    border-radius: 20px;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    display: flex;
  }

  .shr-confirm b {
    font-size: 17px;
  }

  .shr-confirm p {
    margin: 0 0 4px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
  }

  @media (max-width: 520px) {
    .shr-link {
      flex-direction: column;
      align-items: stretch;
    }
  }

  .pplay .vbadge {
    display: none;
  }

  .join h1 {
    font-size: 4.6em;
    line-height: 1;
    font-weight: inherit;
    overflow-wrap: anywhere;
    margin: 0 0 .25em;
  }

  .join-f {
    text-align: left;
    max-width: 40em;
    font-family: var(--font-body);
    flex-direction: column;
    align-items: stretch;
    gap: .6em;
    margin: 0 auto 1.6em;
    display: flex;
  }

  .join-who {
    flex-wrap: wrap;
    justify-content: center;
    gap: .7em;
    display: flex;
  }

  .join-tab {
    border: .12em solid var(--ink);
    color: var(--ink);
    cursor: pointer;
    background: #fff;
    border-radius: 2em;
    padding: .15em 1em;
    font-family: inherit;
    font-size: 1.7em;
    font-weight: 700;
    line-height: 1.5;
  }

  .join-tab.on {
    background: var(--ink);
    color: #fff;
  }

  .join-who .join-tab {
    font-family: var(--gfont, var(--font-display));
    font-weight: var(--gw, 400);
  }

  .join-tab:focus-visible, .join-inp:focus-visible {
    outline: none;
    box-shadow: 0 0 0 .25em #3d9bff73;
  }

  .join-l {
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink2);
    margin-top: .4em;
    font-size: 1.5em;
    font-weight: 800;
  }

  .join-inp {
    border: .1em solid var(--ink);
    height: 2.3em;
    color: var(--ink);
    background: #fff;
    border-radius: .6em;
    width: 100%;
    padding: 0 .7em;
    font-family: inherit;
    font-size: 2.4em;
    font-weight: 700;
  }

  .join-inp.code {
    font-family: var(--font-display);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 400;
  }

  .join-inp[aria-invalid="true"] {
    border-color: var(--tomato);
    box-shadow: 0 0 0 .2em #ff5c4340;
  }

  .pcard .join-hint, .pcard .join-err {
    margin: 0;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.35;
  }

  .pcard .join-err {
    color: #b3261e;
  }

  .pout {
    border: .14em solid var(--ink);
    text-align: left;
    font-family: var(--font-body);
    background: #f6f5fb;
    border-radius: 1.4em;
    margin: 0 0 1.3em;
    padding: 1em 1.2em 1.1em;
  }

  .pcard p.pout, .pcard .pout p {
    color: var(--ink);
    margin: 0;
    font-size: 1.7em;
    font-weight: 700;
  }

  .pout-ok {
    background: #c8f6e8;
    flex-direction: column;
    align-items: flex-start;
    gap: .7em;
    display: flex;
  }

  .pout-ok p {
    align-items: center;
    gap: .5em;
    display: flex;
  }

  .pout-ok p i {
    border: .1em solid var(--ink);
    background: var(--mint);
    color: #fff;
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 1.5em;
    height: 1.5em;
    display: grid;
  }

  .pout-ok p i svg {
    width: .9em;
    height: .9em;
  }

  .pcard .pout .pout-rank {
    color: var(--ink2);
    font-size: 1.5em;
  }

  .pout-err {
    background: #fff1ee;
    border-color: #b3261e;
    flex-direction: column;
    gap: .9em;
    display: flex;
  }

  .pout-err > p {
    color: #7a1a12;
  }

  .pout-fix .join-f {
    margin-bottom: 1em;
  }

  .pout .cbtn.wide {
    font-size: 1.7em;
    font-family: var(--gfont);
    color: var(--ink);
    align-self: flex-start;
  }

  .pboard h2 {
    font-size: 5em;
  }

  .pb-list {
    text-align: left;
    font-family: var(--font-body);
    margin: 0 0 1em;
    padding: 0;
    list-style: none;
  }

  .pb-row {
    border-top: .12em solid #ede9f7;
    grid-template-columns: 3.4em minmax(0, 1fr) auto 5em;
    align-items: center;
    gap: 1em;
    padding: .6em .9em;
    font-size: 1.6em;
    font-weight: 700;
    display: grid;
  }

  .pb-row:first-child {
    border-top: 0;
  }

  .pb-row.pb-uns {
    grid-template-columns: 3.4em minmax(0, 1fr) auto;
  }

  .pb-row.me {
    background: #fff6d6;
    border-radius: .8em;
  }

  .pb-rank {
    border: .12em solid var(--ink);
    width: 2.2em;
    height: 2.2em;
    font-family: var(--font-display);
    background: #f6f5fb;
    border-radius: 50%;
    place-items: center;
    font-weight: 400;
    line-height: 1;
    display: grid;
  }

  .pb-row.top1 .pb-rank {
    background: var(--sun);
  }

  .pb-row.top2 .pb-rank {
    background: #dcebff;
  }

  .pb-row.top3 .pb-rank {
    background: #ffd9e8;
  }

  .pb-name {
    overflow-wrap: anywhere;
  }

  .pb-you {
    color: var(--ink2);
    font-weight: 600;
  }

  .pb-stars {
    gap: .1em;
    display: inline-flex;
  }

  .pb-stars svg {
    --sf: #ede9f7;
    width: 1.2em;
    height: 1.2em;
  }

  .pb-stars svg.on {
    --sf: var(--sun);
  }

  .pb-score {
    font-family: var(--font-display);
    text-align: right;
    font-size: 1.3em;
    font-weight: 400;
  }

  .pb-tally {
    font-family: var(--font-display);
    text-align: right;
    white-space: nowrap;
    font-size: 1.05em;
    font-weight: 400;
  }

  .pcard .pb-total, .pcard .pb-msg p, .pcard p.pb-msg {
    font-size: 1.6em;
    font-weight: 700;
  }

  .pb-msg {
    margin: 0 0 1.2em;
  }

  .pgone {
    background: var(--sun);
    place-items: center;
    min-height: 100vh;
    padding: 24px 16px;
    display: grid;
  }

  .pgone-card {
    text-align: center;
    border: 3px solid var(--ink);
    width: min(520px, 100%);
    box-shadow: 0 8px 0 var(--ink);
    background: #fff;
    border-radius: 30px;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 30px 28px 34px;
    animation: .5s cubic-bezier(.3, 1.5, .5, 1) both cardIn;
    display: flex;
  }

  .pgone-card .h2 {
    font-size: clamp(28px, 6vw, 40px);
  }

  .pgone-card p {
    color: var(--ink2);
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
  }

  .pgone-art {
    width: 150px;
    height: 120px;
    position: relative;
  }

  .pgone-ch {
    width: 110px;
    height: 110px;
    position: absolute;
    bottom: 0;
    left: 20px;
  }

  .pgone-st {
    width: 48px;
    height: 48px;
    animation: 3s ease-in-out infinite bob;
    position: absolute;
    top: 0;
    right: 0;
  }

  @media (max-width: 640px) {
    .join h1 {
      font-size: 3.6em;
    }

    .pb-row {
      grid-template-columns: 3.2em minmax(0, 1fr) 4.5em;
    }

    .pb-stars {
      display: none;
    }

    .pb-row.pb-uns {
      grid-template-columns: 3.2em minmax(0, 1fr) auto;
    }

    .pb-row.pb-uns .pb-stars {
      display: inline-flex;
    }
  }

  @media (max-width: 640px) and (orientation: portrait) {
    .pplay .shell.play .box {
      aspect-ratio: auto;
      height: 100dvh;
    }

    .pplay .ovl {
      place-items: safe center;
      padding: 16px 0;
      overflow-y: auto;
    }

    .pplay .ovl > .pcard {
      font-size: clamp(6.5px, 1.95vw, 8px);
    }
  }

  .cls-tools {
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    display: flex;
  }

  .ccards {
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 26px;
    display: grid;
  }

  .ccard {
    border: 3px solid var(--ink);
    box-shadow: 0 7px 0 var(--ink);
    background: #fff;
    border-radius: 28px;
    flex-direction: column;
    gap: 6px;
    padding: 22px 22px 20px;
    animation: .5s cubic-bezier(.3, 1.5, .5, 1) both cardIn;
    display: flex;
    position: relative;
  }

  .ccard-st {
    width: 64px;
    height: 64px;
    position: absolute;
    top: -18px;
    right: 16px;
    transform: rotate(10deg);
  }

  .ccard-st svg {
    width: 100%;
    height: 100%;
  }

  .ccard-t {
    font-family: var(--font-display);
    overflow-wrap: anywhere;
    margin: 0;
    padding-right: 64px;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.05;
  }

  .ccard-t a {
    color: inherit;
    text-decoration: none;
  }

  .ccard-t a:hover {
    text-decoration: underline;
  }

  .ccard-n {
    color: var(--ink2);
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
  }

  .chead {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 28px;
    display: flex;
  }

  .chead-b {
    min-width: 0;
  }

  .chead-b .h2 {
    overflow-wrap: anywhere;
    margin: 8px 0 6px;
    font-size: clamp(32px, 3.6vw, 48px);
  }

  .chead-b .sec-p {
    margin: 0;
  }

  .cadd {
    border: 3px solid var(--ink);
    box-shadow: 0 6px 0 var(--ink);
    background: #fff6d6;
    border-radius: 26px;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
    padding: 20px 22px;
    display: flex;
  }

  .cadd-h {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    display: flex;
  }

  .cadd-t {
    font-family: var(--font-display);
    margin: 0;
    font-size: 26px;
    font-weight: 400;
  }

  .cadd-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    display: flex;
  }

  .cadd-row .inp {
    flex: 1;
    min-width: min(260px, 100%);
  }

  .cadd-list {
    resize: vertical;
    min-height: 150px;
    padding: 12px 16px;
    line-height: 1.5;
  }

  .cadd-err {
    flex-direction: column;
    gap: 2px;
    margin: 0;
    display: flex;
  }

  .clrow {
    border-top: 2.5px solid #ede9f7;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr) minmax(0, 2.2fr);
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    font-size: 15.5px;
    font-weight: 700;
    display: grid;
  }

  .clrow:first-child {
    border-top: 0;
  }

  .clrow .rwho b {
    overflow-wrap: anywhere;
    font-size: 16.5px;
  }

  .ccode-c {
    align-items: center;
    gap: 10px;
    display: flex;
  }

  .ccode {
    font-family: var(--font-display);
    letter-spacing: .12em;
    border: 2.5px dashed var(--ink);
    background: #fff6d6;
    border-radius: 12px;
    padding: 4px 12px;
    font-size: 22px;
    font-weight: 400;
  }

  .clrow-a {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    display: flex;
  }

  @media (max-width: 820px) {
    .clrow {
      grid-template-columns: 1fr;
      row-gap: 10px;
    }

    .clrow.uhead {
      display: none;
    }

    .clrow-a {
      justify-content: flex-start;
    }
  }

  .lp .sec-p {
    margin-top: 16px;
  }

  .lp-actions {
    align-items: center;
    gap: 10px;
    display: flex;
  }

  .lp-actions .btn {
    white-space: nowrap;
  }

  .lp-points {
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 28px 0 0;
    padding: 0;
    font-size: 15.5px;
    font-weight: 700;
    list-style: none;
    display: flex;
  }

  .lp-points li {
    align-items: center;
    gap: 8px;
    display: inline-flex;
  }

  .lp-points .ico {
    box-sizing: border-box;
    background: var(--ink);
    width: 22px;
    height: 22px;
    color: var(--paper);
    border-radius: 50%;
    padding: 4px;
  }

  .lp-toy {
    min-width: 0;
    scroll-margin-top: 16px;
  }

  .lp-toy .fs {
    z-index: 2;
  }

  .lp-toy .hv-tag {
    z-index: 40;
    border: 2.5px solid var(--ink);
    background: var(--card);
    box-shadow: 0 3px 0 var(--ink);
    letter-spacing: .04em;
    text-transform: uppercase;
    pointer-events: none;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 10px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    position: absolute;
    top: 14px;
    left: 14px;
  }

  .lp-toy .hv-tag .ico {
    width: 18px;
    height: 18px;
  }

  .lp-toy .hv-panel {
    border: 3px solid var(--ink);
    background: var(--card);
    box-shadow: 0 6px 0 var(--ink);
    border-radius: 26px;
    gap: 14px;
    margin-top: 30px;
    padding: 16px 18px 20px;
    display: grid;
  }

  .lp-toy .hv-panel .hv-chips {
    gap: 8px;
    margin-top: 0;
  }

  .lp-toy .hv-panel .hv-lbl {
    flex: 0 0 100%;
    margin: 0;
  }

  .lp-toy .hv-panel .chip {
    gap: 7px;
    padding: 0 13px;
  }

  @media (max-width: 520px) {
    .lp-toy .hv-panel .hv-chips {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      display: grid;
    }

    .lp-toy .hv-panel .hv-lbl {
      grid-column: 1 / -1;
    }

    .lp-toy .hv-panel .chip {
      white-space: nowrap;
      justify-content: center;
      gap: 6px;
      min-width: 0;
      padding: 0 8px;
      font-size: 14px;
    }
  }

  @media (max-width: 360px) {
    .lp-toy .hv-panel .chip .sw {
      display: none;
    }
  }

  .lp-steps {
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
  }

  .lp-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 28px;
    display: grid;
  }

  .lp-step, .lp-card {
    background: var(--card);
    border: 3px solid var(--ink);
    box-shadow: 0 7px 0 var(--ink);
    border-radius: 28px;
    padding: 26px 26px 28px;
  }

  .lp-step h3, .lp-card h3 {
    font-family: var(--font-display);
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.05;
  }

  .lp-step p, .lp-card p {
    color: var(--ink2);
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
  }

  .lp-step-n {
    box-sizing: border-box;
    border: 3px solid var(--ink);
    background: var(--sc);
    width: 54px;
    height: 54px;
    box-shadow: 0 4px 0 var(--ink);
    font-family: var(--font-display);
    border-radius: 50%;
    place-items: center;
    margin-bottom: 18px;
    font-size: 28px;
    line-height: 1;
    display: grid;
  }

  .lp-ic {
    box-sizing: border-box;
    border: 3px solid var(--ink);
    background: var(--sc);
    width: 58px;
    height: 58px;
    box-shadow: 0 4px 0 var(--ink);
    border-radius: 18px;
    place-items: center;
    margin-bottom: 18px;
    display: grid;
  }

  .lp-ic svg {
    width: 28px;
    height: 28px;
  }

  .lp-tiles .tile:hover {
    box-shadow: 0 8px 0 var(--ink);
    transform: none;
  }

  .lp-split {
    grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
    align-items: center;
    gap: 56px;
    display: grid;
  }

  .lp-list {
    gap: 14px;
    margin: 24px 0 30px;
    padding: 0;
    list-style: none;
    display: grid;
  }

  .lp-list li {
    align-items: flex-start;
    gap: 12px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.45;
    display: flex;
  }

  .lp-list .ico {
    box-sizing: border-box;
    border: 2.5px solid var(--ink);
    background: var(--mint);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    padding: 4px;
  }

  .lp-scenes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    padding: 0 6px 14px;
    display: grid;
  }

  .lp-scene {
    aspect-ratio: 1;
    border: 3px solid var(--ink);
    box-shadow: 0 8px 0 var(--ink);
    background: linear-gradient(var(--sk1),var(--sk2) 56%,var(--gr) 56%);
    border-radius: 30px;
    margin: 0;
    position: relative;
    overflow: hidden;
  }

  .lp-scene:before {
    content: "";
    background: var(--md);
    border-radius: 50% 50% 0 0;
    height: 26%;
    position: absolute;
    bottom: 44%;
    left: -12%;
    right: -12%;
  }

  .lp-scene svg {
    width: 34%;
    height: 34%;
    position: absolute;
    top: 14%;
    right: 13%;
  }

  .lp-scene figcaption {
    border: 2.5px solid var(--ink);
    background: var(--card);
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13.5px;
    font-weight: 800;
    position: absolute;
    bottom: 14px;
    left: 14px;
  }

  .lp-scene:nth-child(odd) {
    transform: rotate(-1.5deg);
  }

  .lp-scene:nth-child(2n) {
    margin-top: 28px;
    transform: rotate(1.5deg);
  }

  .lp-band {
    background: var(--ink);
    color: var(--paper);
    margin-top: 96px;
  }

  .lp-band-in {
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
    align-items: center;
    gap: 40px;
    max-width: 1360px;
    margin: 0 auto;
    padding: 72px clamp(16px, 3vw, 44px);
    display: grid;
  }

  .lp-band .eyebrow {
    border-color: var(--paper);
    background: var(--sun);
    color: var(--ink);
  }

  .lp-band .h2 {
    max-width: 20ch;
    margin: 22px 0 0;
  }

  .lp-band .sec-p {
    color: var(--lavender);
    margin-top: 20px;
  }

  .lp-band-art {
    min-height: 190px;
    position: relative;
  }

  .lp-band-art .fs {
    width: 110px;
    height: 110px;
  }

  .lp-band-art .a {
    top: 6%;
    left: 8%;
  }

  .lp-band-art .b {
    width: 96px;
    height: 96px;
    animation-delay: -2s;
    top: 42%;
    left: 42%;
  }

  .lp-band-art .c {
    width: 84px;
    height: 84px;
    animation-delay: -3.6s;
    top: 4%;
    left: 72%;
  }

  .lp-faq {
    gap: 16px;
    max-width: 880px;
    display: grid;
  }

  .lp-q {
    background: var(--card);
    border: 3px solid var(--ink);
    box-shadow: 0 5px 0 var(--ink);
    border-radius: 22px;
  }

  .lp-q summary {
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 44px;
    padding: 16px 22px;
    font-size: 18px;
    font-weight: 800;
    list-style: none;
    display: flex;
  }

  .lp-q summary::-webkit-details-marker {
    display: none;
  }

  .lp-q summary:after {
    content: "+";
    box-sizing: border-box;
    border: 2.5px solid var(--ink);
    background: var(--sun);
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    font-size: 22px;
    line-height: 1;
    display: grid;
  }

  .lp-q[open] summary:after {
    content: "–";
  }

  .lp-q p {
    max-width: 64ch;
    color: var(--ink2);
    margin: 0;
    padding: 0 22px 20px;
    font-size: 17px;
    line-height: 1.5;
  }

  .lp-cta {
    border-block: 3px solid var(--ink);
    background: var(--sun);
    margin-top: 96px;
    position: relative;
    overflow: clip;
  }

  .lp-cta:before {
    content: "";
    pointer-events: none;
    aspect-ratio: 1;
    background: var(--sun);
    border-radius: 50%;
    width: 42%;
    position: absolute;
    top: -70%;
    right: -6%;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .lp-cta:before {
      background: color-mix(in srgb,var(--sun) 70%,var(--card));
    }
  }

  .lp-cta:before {
    opacity: .9;
  }

  .lp-cta:after {
    content: "";
    pointer-events: none;
    aspect-ratio: 1;
    background: var(--sun);
    border-radius: 50%;
    width: 34%;
    position: absolute;
    bottom: -80%;
    left: -8%;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .lp-cta:after {
      background: color-mix(in srgb,var(--sun) 80%,var(--tomato));
    }
  }

  .lp-cta:after {
    opacity: .55;
  }

  .lp-cta-in {
    z-index: 1;
    text-align: center;
    flex-direction: column;
    align-items: center;
    max-width: 1360px;
    margin: 0 auto;
    padding: 80px clamp(16px, 3vw, 44px);
    display: flex;
    position: relative;
  }

  .lp-cta .h2 {
    max-width: 16ch;
    font-size: clamp(40px, 5.4vw, 76px);
  }

  .lp-cta .sec-p {
    max-width: 46ch;
    color: var(--ink);
    margin: 22px auto 30px;
  }

  .lp-cta .cta {
    justify-content: center;
  }

  .lp-foot {
    border-top: 0;
    margin-top: 0;
    padding-top: 28px;
  }

  .lp-foot-links {
    flex-wrap: wrap;
    gap: 0 22px;
    display: flex;
  }

  .lp-foot-links a {
    min-height: 44px;
    color: var(--ink);
    align-items: center;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
  }

  .lp-foot-links a:hover {
    text-decoration: underline;
  }

  @media (max-width: 900px) {
    .lp-band-art {
      display: none;
    }
  }

  @media (max-width: 640px) {
    .lp-split {
      gap: 36px;
    }

    .lp-scenes {
      gap: 14px;
    }

    .lp-scene:nth-child(2n) {
      margin-top: 18px;
    }

    .lp-band {
      margin-top: 72px;
    }

    .lp-band-in {
      padding-block: 56px;
    }

    .lp-cta {
      margin-top: 72px;
    }

    .lp-cta-in {
      padding-block: 60px;
    }
  }

  .print-sheet {
    display: none;
  }

  @media print {
    @page {
      margin: 12mm;
    }

    body > :not(.print-sheet) {
      display: none !important;
    }

    body {
      background: #fff !important;
      min-height: 0 !important;
    }

    .print-sheet {
      color: var(--ink);
      font-family: var(--font-body);
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
      display: block;
    }
  }

  .prt-share {
    border: 4px solid var(--ink);
    text-align: center;
    break-inside: avoid;
    border-radius: 28px;
    padding: 36px 40px 44px;
    position: relative;
    overflow: hidden;
  }

  .prt-brand {
    font-family: var(--font-display);
    align-items: center;
    gap: 10px;
    font-size: 30px;
    line-height: 1;
    display: inline-flex;
  }

  .prt-brand img {
    width: auto;
    height: 40px;
  }

  .prt-title {
    font-family: var(--font-display);
    overflow-wrap: anywhere;
    margin: 26px 0 14px;
    font-size: 44px;
    font-weight: 400;
    line-height: 1.05;
  }

  .prt-ins {
    margin: 0 0 26px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
  }

  .prt-url {
    font-family: var(--font-display);
    border: 3px dashed var(--ink);
    overflow-wrap: anywhere;
    background: #fff6d6;
    border-radius: 20px;
    padding: 18px 20px;
    font-size: 30px;
    line-height: 1.2;
    display: block;
  }

  .prt-foot {
    color: var(--ink2);
    margin: 22px 0 0;
    font-size: 16px;
    font-weight: 700;
  }

  .prt-st {
    width: 74px;
    height: 74px;
    position: absolute;
  }

  .prt-st.a {
    top: 22px;
    left: 22px;
    transform: rotate(-12deg);
  }

  .prt-st.b {
    top: 30px;
    right: 24px;
    transform: rotate(10deg);
  }

  .prt-head {
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin: 0 0 14px;
    font-weight: 700;
    display: flex;
  }

  .prt-head b {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 400;
  }

  .prt-codes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    display: grid;
  }

  .prt-code {
    border: 2.5px dashed var(--ink);
    break-inside: avoid;
    border-radius: 18px;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 16px;
    display: flex;
  }

  .prt-code-n {
    overflow-wrap: anywhere;
    font-size: 18px;
    font-weight: 800;
  }

  .prt-code-c {
    font-family: var(--font-display);
    letter-spacing: .12em;
    font-size: 34px;
    line-height: 1.1;
  }

  .prt-code-h {
    color: var(--ink2);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
  }

  .btn-danger {
    background: var(--tomato);
    color: #fff;
  }

  .btn-ghost {
    box-shadow: none;
    background: none;
    border-color: #0000;
  }

  .btn-ghost:hover, .btn-ghost:active {
    background: var(--lavender);
    box-shadow: none;
  }

  a.linkbtn {
    font-size: 13.3333px;
    line-height: normal;
  }

  .btn[aria-disabled="true"] {
    opacity: .45;
    pointer-events: none;
  }

  .inp[aria-invalid="true"] {
    border-color: var(--tomato);
    box-shadow: 0 0 0 4px #ff5c4338;
  }

  .inp:disabled {
    opacity: .55;
    cursor: not-allowed;
  }

  .fld-hint {
    color: var(--ink2);
    margin: 0;
    font-size: 13.5px;
    line-height: 1.4;
  }

  .card {
    border: 3px solid var(--ink);
    box-shadow: 0 6px 0 var(--ink);
    background: #fff;
    border-radius: 26px;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    display: flex;
  }

  .card-h {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 3px;
    display: grid;
  }

  .card-h:has( > .card-a) {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
  }

  .card-t {
    font-family: var(--font-display);
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.05;
  }

  .card-s {
    color: var(--ink2);
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
  }

  .card-a {
    grid-area: 1 / 2 / span 2;
    place-self: start end;
  }

  .card-f {
    align-items: center;
    gap: 12px;
    display: flex;
  }

  .alert {
    background: var(--paper);
    color: var(--ink2);
    border: 2.5px dashed #9a8fae;
    border-radius: 16px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
    padding: 12px 14px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    display: grid;
  }

  .alert:has( > svg) {
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 12px;
  }

  .alert > svg {
    grid-row: 1 / span 2;
    width: 22px;
    height: 22px;
  }

  .alert > :not(svg) {
    grid-column: 1 / -1;
  }

  .alert:has( > svg) > :not(svg) {
    grid-column: 2;
  }

  .alert-t {
    color: var(--ink);
    font-weight: 800;
  }

  .alert-success {
    border-style: solid;
    border-color: var(--ink);
    color: var(--ink);
    background: #e9fbf5;
  }

  .alert-danger {
    border-style: solid;
    border-color: var(--ink);
    color: #7a1f12;
    background: #ffe1db;
    font-weight: 700;
  }

  .alert-danger .alert-t {
    color: #7a1f12;
  }

  .empty {
    border: 3px dashed var(--ink);
    text-align: center;
    background: #ffc53124;
    border-radius: 28px;
    justify-items: center;
    gap: 14px;
    padding: 36px 20px;
    display: grid;
  }

  .empty-ico {
    background: var(--sun);
    border: 3px solid var(--ink);
    width: 68px;
    height: 68px;
    box-shadow: 0 4px 0 var(--ink);
    border-radius: 50%;
    place-items: center;
    display: grid;
  }

  .empty-ico svg {
    width: 30px;
    height: 30px;
  }

  .empty-t {
    max-width: 46ch;
    color: var(--ink2);
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
  }

  .modal.modal-s {
    width: min(520px, 100%);
  }

  .dlg-p {
    color: var(--ink2);
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.4;
  }

  .modal-t, .dlg-p {
    overflow-wrap: anywhere;
  }

  .av.av-lilac {
    background: var(--lilac);
    color: #fff;
  }

  .av.av-rose {
    background: var(--rose);
    color: var(--ink);
  }

  .av.av-mint {
    background: var(--mint);
    color: #fff;
  }

  .av.av-blue {
    background: var(--blue);
    color: #fff;
  }

  .av.av-tomato {
    background: var(--tomato);
    color: #fff;
  }

  .av.av-sun {
    background: var(--sun);
    color: var(--ink);
  }

  .omenu-back {
    z-index: 70;
    position: fixed;
    inset: 0;
  }

  .omenu {
    z-index: 71;
    border: 3px solid var(--ink);
    width: min(290px, 100vw - 16px);
    box-shadow: 0 8px 0 var(--ink);
    transform-origin: 100% 0;
    text-align: left;
    background: #fff;
    border-radius: 24px;
    padding: 10px;
    animation: .25s cubic-bezier(.3, 1.5, .5, 1) menuIn;
    position: fixed;
  }

  .omenu.up {
    transform-origin: 100% 100%;
  }

  .om-h {
    color: var(--ink2);
    border-bottom: 2.5px dashed #d9d2ea;
    gap: 8px;
    margin-bottom: 6px;
    padding: 6px 8px 12px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    display: grid;
  }

  .om-h .pills {
    flex-wrap: wrap;
    gap: 6px;
    display: flex;
  }

  .om-i {
    width: 100%;
    min-height: 48px;
    color: var(--ink);
    text-align: left;
    background: none;
    border: 0;
    border-radius: 14px;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: background .12s;
    display: flex;
  }

  .om-i:hover, .om-i:focus-visible {
    background: var(--lavender-soft);
  }

  .om-i .ico {
    width: 20px;
    height: 20px;
    color: var(--ink2);
  }

  @media (max-width: 900px) {
    .login {
      grid-template-columns: 1fr;
    }

    .lgn-art {
      border-right: 0;
      border-bottom: 3px solid var(--ink);
      min-height: 0;
    }

    .lgn-sc {
      flex: none;
      height: 230px;
      min-height: 0;
    }

    .lgn-copy {
      margin-top: 18px;
    }

    .uhead {
      display: none;
    }

    .urow {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "who act"
                           "st st"
                           "acts last";
      gap: 12px;
      padding: 16px;
    }

    .u-who {
      grid-area: who;
    }

    .u-st {
      flex-flow: wrap;
      grid-area: st;
      align-items: center;
    }

    .u-acts {
      grid-area: acts;
    }

    .u-last {
      text-align: right;
      grid-area: last;
      align-self: end;
    }

    .u-act {
      grid-area: act;
    }
  }

  @media (max-width: 640px) {
    .lgn-sc {
      display: none;
    }

    .lgn-art {
      padding-bottom: 26px;
    }

    .lgn-copy .lead {
      display: none;
    }

    .lgn-copy .h1 {
      margin: 14px 0 0;
      font-size: 40px;
    }

    .lgn-form {
      place-items: start center;
      padding: 26px 16px 40px;
    }

    .drawer {
      border-left: 0;
      width: 100vw;
    }

    .asbar {
      justify-content: space-between;
      max-width: none;
      left: 10px;
      right: 10px;
    }

    .uchip .un {
      display: none;
    }

    .uchip {
      padding-right: 12px;
    }

    .evl li {
      grid-template-columns: auto minmax(0, 1fr);
      align-items: start;
      gap: 2px 12px;
      display: grid;
    }

    .evl li .ic {
      grid-row: 1 / 3;
    }

    .evl time {
      margin: 0;
      padding: 0;
    }

    .stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .stat {
      border-radius: 20px;
      grid-template-rows: auto auto auto;
      grid-template-columns: 1fr;
      row-gap: 2px;
      padding: 14px;
    }

    .stat .si {
      border-radius: 13px;
      grid-row: auto;
      width: 42px;
      height: 42px;
      margin-bottom: 6px;
    }

    .stat .si svg {
      width: 22px;
      height: 22px;
    }

    .stat b {
      font-size: 32px;
    }

    .stat:last-child:nth-child(odd) {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 1000px) {
    .ed-grid {
      grid-template-columns: 1fr;
    }

    .ed-stage {
      order: -1;
      position: static;
    }

    .steps {
      order: 5;
      justify-content: center;
      width: 100%;
      margin: 0;
    }
  }

  @media (max-width: 640px) {
    .nav {
      display: none;
    }

    .chs {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fs {
      display: none;
    }

    .box {
      border-radius: 22px;
    }

    .modal {
      padding: 20px;
    }

    .tod {
      flex-direction: column;
      align-items: stretch;
    }

    .btn-lg {
      max-width: 100%;
      padding: 0 22px;
      font-size: 18px;
    }

    .topbar {
      flex-wrap: nowrap;
      gap: 10px;
      padding-block: 12px;
    }

    .topbar .logo {
      flex: none;
      gap: 8px;
      font-size: 30px;
    }

    .topbar .logo img {
      width: auto;
      height: 40px;
    }

    .topbar > .btn {
      flex: none;
      padding: 0 18px;
    }

    .cta {
      flex-direction: column;
      align-items: stretch;
      gap: 14px;
    }

    .hv-wrap {
      padding-inline: 0;
    }
  }

  @media (max-width: 1100px) {
    .uchip .un {
      display: none;
    }

    .uchip {
      padding-right: 12px;
    }

    .topbar {
      gap: 12px;
    }

    .nav {
      margin-left: 0;
    }

    .nav .navb {
      padding: 12px;
    }
  }

  @media (max-width: 1040px) {
    .nav {
      display: none;
    }
  }

  @media (max-width: 640px) {
    .hide-sm {
      clip-path: inset(50%);
      white-space: nowrap;
      width: 1px;
      height: 1px;
      position: absolute;
      overflow: hidden;
    }

    .ed-top {
      gap: 10px 8px;
      padding-block: 10px;
    }

    .ed-top > .btn-sm {
      width: 44px;
      padding: 0;
    }

    .ed-top .saved {
      min-width: 0;
      margin-right: auto;
    }

    .ed-top .steps {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      display: grid;
    }

    .ed-top .step-link {
      display: none;
    }

    .ed-top .step {
      justify-content: center;
      min-width: 0;
      min-height: 44px;
      padding: 0 10px 0 6px;
      font-size: 15px;
    }
  }

  @media (max-width: 480px) {
    .ed-top .step {
      padding: 0 8px;
      font-size: 14px;
    }

    .ed-top .step b {
      display: none;
    }

    .topbar > .btn {
      width: 48px;
      padding: 0;
    }

    .topbar > .btn .btn-lbl {
      clip-path: inset(50%);
      white-space: nowrap;
      width: 1px;
      height: 1px;
      position: absolute;
      overflow: hidden;
    }
  }

  @media (max-width: 1100px) {
    .adm-tag {
      justify-content: center;
      width: 44px;
      height: 44px;
      padding: 0;
    }

    .adm-tag-lbl {
      clip-path: inset(50%);
      white-space: nowrap;
      width: 1px;
      height: 1px;
      position: absolute;
      overflow: hidden;
    }
  }

  @media (max-width: 900px) {
    .adm-back {
      width: 48px;
      padding: 0;
    }

    .adm-back-lbl {
      clip-path: inset(50%);
      white-space: nowrap;
      width: 1px;
      height: 1px;
      position: absolute;
      overflow: hidden;
    }
  }

  @media (max-width: 720px) {
    .adm-top {
      gap: 10px 8px;
      padding-block: 12px;
    }

    .adm-top .logo {
      flex: none;
      gap: 8px;
      font-size: 30px;
    }

    .adm-top .logo img {
      width: auto;
      height: 40px;
    }

    .adm-top .sp {
      order: 1;
    }

    .adm-top .adm-tag {
      flex: none;
      order: 2;
    }

    .adm-top .uwrap {
      order: 3;
    }

    .adm-nav {
      flex: 1 0 100%;
      order: 4;
      display: flex;
    }

    .adm-nav-a {
      flex: 1;
      min-height: 44px;
    }

    .adm-top-act {
      flex-wrap: nowrap;
    }

    .adm-top-act > .sp {
      flex: 1;
    }

    .adm-top-act > .btn {
      flex: none;
      order: 2;
      padding: 0 18px;
    }
  }

  @media (max-width: 520px) {
    .adm-top-act > .btn {
      width: 48px;
      padding: 0;
    }

    .adm-top-act > .btn .btn-lbl {
      clip-path: inset(50%);
      white-space: nowrap;
      width: 1px;
      height: 1px;
      position: absolute;
      overflow: hidden;
    }
  }

  @media (min-width: 560px) and (max-width: 720px) {
    .adm-tag {
      width: auto;
      height: auto;
      padding: 8px 14px;
    }

    .adm-tag-lbl {
      clip-path: none;
      white-space: nowrap;
      width: auto;
      height: auto;
      position: static;
      overflow: visible;
    }
  }

  @media (max-width: 380px) {
    .adm-back {
      width: 44px;
      min-height: 44px;
    }

    .adm-tag {
      width: 40px;
      height: 40px;
    }

    .adm-top .logo {
      gap: 6px;
      font-size: 26px;
    }

    .adm-top .logo img {
      width: auto;
      height: 34px;
    }
  }

  @media (max-width: 340px) {
    .adm-top {
      column-gap: 6px;
      padding-inline: 12px;
    }

    .adm-top .logo {
      font-size: 22px;
    }

    .adm-top .logo img {
      width: auto;
      height: 30px;
    }

    .adm-top .uchip {
      gap: 6px;
      padding-right: 8px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .cloud, .ff, .stars i, .bubf, .ray, .weed, .lolli, .fs, .planet, .hh .mole, .hh .bub, .ta-ans b, .ta-word b span, .ta-hl, .ta-mem b, .ta-ph b, .ta-cr b, .crd.next, .rvc, .rvb, .rvf, .lgn-mc svg, .lgn-zz .z {
      animation: none !important;
    }
  }
}

@layer utilities {
  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .isolate {
    isolation: isolate;
  }

  .order-first {
    order: -9999;
  }

  .col-span-2 {
    grid-column: span 2 / span 2;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .m-0 {
    margin: 0;
  }

  .mx-auto {
    margin-inline: auto;
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-7 {
    margin-bottom: calc(var(--spacing) * 7);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-9 {
    margin-bottom: calc(var(--spacing) * 9);
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .table {
    display: table;
  }

  .aspect-\[16\/10\] {
    aspect-ratio: 16 / 10;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-32 {
    height: calc(var(--spacing) * 32);
  }

  .h-36 {
    height: calc(var(--spacing) * 36);
  }

  .h-40 {
    height: calc(var(--spacing) * 40);
  }

  .h-44 {
    height: calc(var(--spacing) * 44);
  }

  .h-48 {
    height: calc(var(--spacing) * 48);
  }

  .h-56 {
    height: calc(var(--spacing) * 56);
  }

  .h-64 {
    height: calc(var(--spacing) * 64);
  }

  .h-72 {
    height: calc(var(--spacing) * 72);
  }

  .h-80 {
    height: calc(var(--spacing) * 80);
  }

  .h-\[68px\] {
    height: 68px;
  }

  .h-\[92px\] {
    height: 92px;
  }

  .h-\[138px\] {
    height: 138px;
  }

  .h-full {
    height: 100%;
  }

  .min-h-full {
    min-height: 100%;
  }

  .w-2\/3 {
    width: 66.6667%;
  }

  .w-3\/4 {
    width: 75%;
  }

  .w-4\/5 {
    width: 80%;
  }

  .w-9 {
    width: calc(var(--spacing) * 9);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-11 {
    width: calc(var(--spacing) * 11);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-28 {
    width: calc(var(--spacing) * 28);
  }

  .w-32 {
    width: calc(var(--spacing) * 32);
  }

  .w-40 {
    width: calc(var(--spacing) * 40);
  }

  .w-44 {
    width: calc(var(--spacing) * 44);
  }

  .w-48 {
    width: calc(var(--spacing) * 48);
  }

  .w-56 {
    width: calc(var(--spacing) * 56);
  }

  .w-64 {
    width: calc(var(--spacing) * 64);
  }

  .w-72 {
    width: calc(var(--spacing) * 72);
  }

  .w-full {
    width: 100%;
  }

  .max-w-7xl {
    max-width: var(--container-7xl);
  }

  .max-w-64 {
    max-width: calc(var(--spacing) * 64);
  }

  .max-w-96 {
    max-width: calc(var(--spacing) * 96);
  }

  .max-w-prose {
    max-width: 65ch;
  }

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .flex-1 {
    flex: 1;
  }

  .shrink {
    flex-shrink: 1;
  }

  .grow {
    flex-grow: 1;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .resize {
    resize: both;
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-center {
    align-items: center;
  }

  .items-start {
    align-items: flex-start;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-\[18px\] {
    border-radius: 18px;
  }

  .rounded-\[20px\] {
    border-radius: 20px;
  }

  .rounded-\[22px\] {
    border-radius: 22px;
  }

  .rounded-\[24px\] {
    border-radius: 24px;
  }

  .rounded-\[26px\] {
    border-radius: 26px;
  }

  .rounded-\[28px\] {
    border-radius: 28px;
  }

  .rounded-\[34px\] {
    border-radius: 34px;
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-md {
    border-radius: calc(var(--radius) - 2px);
  }

  .rounded-none {
    border-radius: 0;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .bg-secondary {
    background-color: var(--secondary);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .py-1 {
    padding-block: var(--spacing);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .text-center {
    text-align: center;
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .text-muted-foreground {
    color: var(--muted-foreground);
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .underline {
    text-decoration-line: underline;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .paused {
    animation-play-state: paused;
  }

  .running {
    animation-play-state: running;
  }

  @media (min-width: 40rem) {
    .sm\:order-none {
      order: 0;
    }

    .sm\:col-span-1 {
      grid-column: span 1 / span 1;
    }

    .sm\:flex {
      display: flex;
    }

    .sm\:w-auto {
      width: auto;
    }

    .sm\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }
  }

  @media (min-width: 64rem) {
    .lg\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
}

@property --tw-animation-delay {
  syntax: "*";
  inherits: false;
  initial-value: 0s;
}

@property --tw-animation-direction {
  syntax: "*";
  inherits: false;
  initial-value: normal;
}

@property --tw-animation-duration {
  syntax: "*";
  inherits: false
}

@property --tw-animation-fill-mode {
  syntax: "*";
  inherits: false;
  initial-value: none;
}

@property --tw-animation-iteration-count {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-enter-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-enter-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-exit-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-exit-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --sky1 {
  syntax: "<color>";
  inherits: true;
  initial-value: #76ccff;
}

@property --sky2 {
  syntax: "<color>";
  inherits: true;
  initial-value: #d9f4ff;
}

@property --far {
  syntax: "<color>";
  inherits: true;
  initial-value: #9bdda0;
}

@property --mid {
  syntax: "<color>";
  inherits: true;
  initial-value: #6ccb84;
}

@property --ground {
  syntax: "<color>";
  inherits: true;
  initial-value: #8bd97f;
}

@property --ground2 {
  syntax: "<color>";
  inherits: true;
  initial-value: #5ebb63;
}

@property --hole {
  syntax: "<color>";
  inherits: true;
  initial-value: #5b3a2e;
}

@property --holeIn {
  syntax: "<color>";
  inherits: true;
  initial-value: #3b2420;
}

@property --body {
  syntax: "<color>";
  inherits: true;
  initial-value: #a6785c;
}

@property --body2 {
  syntax: "<color>";
  inherits: true;
  initial-value: #7e563f;
}

@property --belly {
  syntax: "<color>";
  inherits: true;
  initial-value: #d9b79f;
}

@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #ff5c43;
}

@property --accentInk {
  syntax: "<color>";
  inherits: true;
  initial-value: #22123a;
}

@property --bri {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

:root {
  --radius: .625rem;
  --background: var(--paper);
  --foreground: var(--ink);
  --card: #fff;
  --card-foreground: var(--ink);
  --popover: #fff;
  --popover-foreground: var(--ink);
  --primary: var(--ink);
  --primary-foreground: #fff;
  --secondary: var(--lavender);
  --secondary-foreground: var(--ink);
  --muted: var(--lavender);
  --muted-foreground: var(--ink2);
  --surface-accent: var(--lavender-soft);
  --surface-accent-foreground: var(--ink);
  --destructive: var(--danger);
  --destructive-foreground: #fff;
  --border: var(--ink);
  --input: var(--ink);
  --ring: var(--blue);
}

@supports (color: lab(0% 0 0)) {
  :root {
    --card: lab(100% 0 0);
    --popover: lab(100% 0 0);
    --primary-foreground: lab(100% 0 0);
    --destructive-foreground: lab(100% 0 0);
  }
}

.dark {
  --background: #0a0a0a;
  --foreground: #fafafa;
  --card: #171717;
  --card-foreground: #fafafa;
  --popover: #171717;
  --popover-foreground: #fafafa;
  --primary: #73a3fc;
  --primary-foreground: #081123;
  --secondary: #262626;
  --secondary-foreground: #fafafa;
  --muted: #262626;
  --muted-foreground: #a1a5ab;
  --surface-accent: #202e47;
  --surface-accent-foreground: #fafafa;
  --destructive: #ff6367;
  --destructive-foreground: #200909;
  --border: #2e2e2e;
  --input: #696969;
  --ring: #628ede;
}

@supports (color: lab(0% 0 0)) {
  .dark {
    --background: lab(2.75381% 0 0);
    --foreground: lab(98.26% 0 0);
    --card: lab(7.78201% -.0000149012 0);
    --card-foreground: lab(98.26% 0 0);
    --popover: lab(7.78201% -.0000149012 0);
    --popover-foreground: lab(98.26% 0 0);
    --primary: lab(66.5268% 2.79823 -49.9045);
    --primary-foreground: lab(5.03919% .887834 -13.3965);
    --secondary: lab(15.204% 0 -.00000596046);
    --secondary-foreground: lab(98.26% 0 0);
    --muted: lab(15.204% 0 -.00000596046);
    --muted-foreground: lab(67.4781% -.274122 -3.76401);
    --surface-accent: lab(18.4733% .516817 -17.9098);
    --surface-accent-foreground: lab(98.26% 0 0);
    --destructive: lab(63.2467% 60.4719 30.8398);
    --destructive-foreground: lab(4.96607% 10.6338 3.82503);
    --border: lab(18.8% 0 0);
    --input: lab(44.32% 0 0);
    --ring: lab(58.4629% 2.8519 -46.2992);
  }
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}

/*# sourceMappingURL=src_1mc3d6u._.css.map*/