#sunny-playground {
    --mh-tablet-width: 1024px;
    --mh-tablet-height: 768px;
    --mh-staff-scale: 1;
    --mh-dense-scale: 1;
    --mh-dialog-scale: 1;
    --mh-staff-font: "Segoe UI", system-ui, sans-serif;
    --mh-control-radius: 10px;
    --mh-panel-radius: 12px;
    --mh-heading-font: "Fredoka", ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
    --mh-paper: light-dark(#fff4d9, #322b23);
    --mh-panel: light-dark(#fffdf5, #372e38);
    --mh-ink: light-dark(#302947, #fff0fc);
    --mh-soft: light-dark(#5d5168, #e0cbe7);
    --mh-line: light-dark(#d8cad9, #72557b);
    --mh-hero: light-dark(#e6f4d6, #3f5239);
    --mh-moss: light-dark(#245b45, #bfe5c8);
    --mh-on-moss: light-dark(#fff, #173e2d);
    --mh-done: light-dark(#eeefea, #363b36);
    --mh-done-ink: light-dark(#59645b, #c1c9c1);
    --mh-request: light-dark(#ffdbec, #673953);
    --mh-sun: light-dark(#ffe9a3, #60491e);
    --mh-button-shadow: color-mix(in srgb, var(--mh-ink) 19%, transparent);
    --mh-lift: 0 3px 0 var(--mh-button-shadow), 0 8px 18px light-dark(#343f6013, #0002);
    --mh-sticker-paper: light-dark(#fffdf6, #c6b7ca);
    --mh-sticker-shadow: drop-shadow(0 3px 5px light-dark(#27375132, #100c1870));
    --mh-scene-sky: light-dark(#c0ebff, #263d58);
    --mh-cloud: light-dark(#f6fcff, #405d77);
    --mh-lawn: light-dark(#bae991, #344f39);
    --mh-far-hill: light-dark(#91d6a5, #2d544d);
    --mh-grass-detail: light-dark(#72aa57, #709c6a);
    --mh-sun-face: light-dark(#ffdc62, #8a6127);
    --mh-sun-rays: light-dark(#ffd46b, #9b6f31);
    --mh-sun-features: light-dark(#603917, #fff0bd);
    --mh-sun-cheeks: light-dark(#ffab7c, #a85e56);
    color-scheme: light dark;
    padding: clamp(5px, 1.2vw, 12px);
    color: var(--mh-ink);
    font-family: "Nunito", ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
    font-size: 16px;
  }
  #sunny-playground, #sunny-playground * { box-sizing: border-box; }
  #sunny-playground .mh-tablet {
    position: relative;
    width: min(100%, var(--mh-tablet-width));
    aspect-ratio: 4 / 3;
    margin-inline: auto;
    overflow: clip;
    border-radius: 20px;
    background: var(--mh-paper);
    box-shadow: 0 2px 5px light-dark(#34536812, #0003), 0 14px 36px light-dark(#34536824, #0005);
  }
  #sunny-playground .mh-app {
    position: absolute;
    inset: 0 auto auto 0;
    width: var(--mh-tablet-width);
    height: var(--mh-scrollport-height, var(--mh-tablet-height));
    transform: scale(var(--mh-tablet-scale, 1));
    transform-origin: top left;
    container: mh-tablet-app / size;
    background: var(--mh-paper);
    overflow: auto;
    overscroll-behavior: none;
    scrollbar-width: thin;
  }
  #sunny-playground .mh-toolbar,
  #sunny-playground .mh-actions,
  #sunny-playground .mh-pin-top,
  #sunny-playground .mh-setup-task {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  #sunny-playground .mh-toolbar {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 12px;
  }
  #sunny-playground .mh-main { min-height: 100%; padding: clamp(8px, 2cqw, 18px); }
  #sunny-playground h1,
  #sunny-playground h2,
  #sunny-playground p { margin: 0; color: inherit; }
  #sunny-playground h1 {
    font: 600 clamp(26px, 4.5cqw, 39px)/1.05 var(--mh-heading-font);
    letter-spacing: -.02em;
  }
  #sunny-playground h2 { font-size: 16px; }
  #sunny-playground .mh-sub { margin-top: 7px; color: var(--mh-soft); line-height: 1.4; }
  #sunny-playground .mh-kicker {
    color: var(--mh-soft);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .13em;
    text-transform: uppercase;
  }
  #sunny-playground .mh-hero {
    display: grid;
    gap: 5px;
    padding: 12px clamp(12px, 3cqw, 23px) 16px;
    border-radius: 22px;
    background: var(--mh-hero);
  }
  #sunny-playground .mh-hero .mh-sub { margin-top: 0; }
  #sunny-playground .mh-setup-task {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  #sunny-playground .mh-personal {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "animal greeting back";
    align-items: center;
    gap: 8px clamp(10px, 3cqw, 22px);
    padding-block: clamp(12px, 2.8cqw, 20px);
    background: var(--mh-tile);
  }
  #sunny-playground .mh-personal-greeting { grid-area: greeting; }
  #sunny-playground .mh-personal-controls {
    grid-area: back;
    align-self: start;
    justify-self: end;
    justify-content: flex-end;
  }
  #sunny-playground .mh-personal-name {
    font-size: clamp(39px, 8cqw, 80px);
    line-height: 1.2;
    letter-spacing: normal;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 3px light-dark(#fff9, #171327), 0 0 8px light-dark(#fff7, #171327);
  }
  #sunny-playground .mh-personal h2 {
    margin: 4px 0;
    font-size: clamp(18px, 3.6cqw, 23px);
    line-height: 1.2;
  }
  #sunny-playground .mh-personal .mh-personal-art {
    --mh-portrait-angle: -7deg;
    --mh-shape-outline: var(--mh-sticker-paper);
    --mh-shape-stroke: clamp(4px, .6cqw, 6px);
    position: relative;
    isolation: isolate;
    grid-area: animal;
    display: grid;
    place-items: center;
    width: clamp(86px, 22cqw, 200px);
    aspect-ratio: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: clamp(46px, 12cqw, 108px);
    line-height: 1;
    transform: rotate(var(--mh-portrait-angle));
    filter: var(--mh-sticker-shadow);
  }
  #sunny-playground .mh-personal-art.mh-oval { aspect-ratio: 1.35; }
  #sunny-playground .mh-personal-art.mh-shield { --mh-animal-y: -.16em; }
  #sunny-playground .mh-personal-art.mh-tag { --mh-animal-x: -.13em; }
  #sunny-playground .mh-personal-art.mh-arch { --mh-animal-y: .04em; }
  #sunny-playground .mh-portrait-animal {
    display: block;
    position: relative;
    transform: translate(var(--mh-animal-x, 0), var(--mh-animal-y, -.06em));
  }
  #sunny-playground .mh-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
  }
  #sunny-playground button,
  #sunny-playground input,
  #sunny-playground select,
  #sunny-playground textarea { font: inherit; color: inherit; }
  #sunny-playground button {
    min-height: 44px;
    padding: 8px 13px;
    border: 1px solid var(--mh-line);
    border-radius: 12px;
    background: var(--mh-panel);
    font-weight: 700;
  }
  @media (hover: hover) {
    #sunny-playground button:not(:disabled):hover {
      border-color: color-mix(in srgb, var(--mh-moss) 62%, var(--mh-line));
    }
  }
  #sunny-playground .mh-quiet { border-radius: 16px; font-size: 13px; }
  #sunny-playground .mh-name {
    min-width: 0;
    min-height: 96px;
    background: var(--mh-tile);
    border-color: transparent;
    overflow-wrap: anywhere;
    font-family: "Fredoka", ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
    font-size: 19px;
  }
  #sunny-playground button.mh-name:not(:disabled),
  #sunny-playground .mh-choice,
  #sunny-playground .mh-zone { box-shadow: 0 3px 0 var(--mh-button-shadow); }
  #sunny-playground .mh-animal { font-size: 28px; line-height: 1.22; }
  #sunny-playground .mh-oval { border-radius: 50%; }
  #sunny-playground .mh-soft-square { border-radius: 9%; }
  #sunny-playground .mh-rounded { border-radius: 14% / 23%; }
  #sunny-playground .mh-arch { border-radius: 50% 50% 5% 5% / 62% 62% 7% 7%; }
  #sunny-playground .mh-leaf { border-radius: 3% 79% 3% 79% / 3% 73% 3% 73%; }
  #sunny-playground .mh-circle { border-radius: 50%; }
  #sunny-playground .mh-drop { border-radius: 56% 3% 54% 52% / 59% 3% 54% 51%; }
  #sunny-playground .mh-hexagon {
    --mh-shape-cut: polygon(17% 0, 83% 0, 100% 50%, 83% 100%, 17% 100%, 0 50%);
  }
  #sunny-playground .mh-shield {
    --mh-shape-cut: polygon(5% 0, 95% 0, 100% 8%, 95% 59%, 82% 79%, 50% 100%, 18% 79%, 5% 59%, 0 8%);
  }
  #sunny-playground .mh-tag {
    --mh-shape-cut: polygon(5% 0, 73% 0, 100% 50%, 73% 100%, 5% 100%, 0 92%, 0 8%);
  }
  #sunny-playground .mh-ticket {
    --mh-shape-cut: polygon(
      4% 0, 96% 0, 100% 7%, 100% 36%, 96% 38%, 93% 44%, 93% 56%, 96% 62%, 100% 64%, 100% 93%,
      96% 100%, 4% 100%, 0 93%, 0 64%, 4% 62%, 7% 56%, 7% 44%, 4% 38%, 0 36%, 0 7%
    );
  }
  #sunny-playground .mh-cloud-shape {
    --mh-shape-cut: polygon(
      16% 33%, 21% 22%, 28% 16%, 37% 17%, 42% 7%, 50% 2%, 59% 1%, 68% 5%, 74% 15%,
      76% 22%, 84% 21%, 91% 27%, 95% 37%, 95% 46%, 99% 55%, 100% 66%, 97% 77%,
      91% 86%, 82% 90%, 72% 90%, 65% 96%, 56% 99%, 45% 98%, 36% 92%, 26% 94%,
      16% 91%, 8% 85%, 2% 76%, 0 66%, 1% 54%, 5% 44%, 11% 37%
    );
  }
  #sunny-playground .mh-round { font-family: "Fredoka", ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; }
  #sunny-playground .mh-serif { font-family: Georgia, serif; }
  #sunny-playground .mh-mono { font-family: "Courier New", monospace; }
  #sunny-playground .mh-handwritten { font-family: "Patrick Hand", "Segoe Print", cursive; }
  #sunny-playground .mh-bubble { font-family: "Baloo 2", "Arial Rounded MT Bold", sans-serif; }
  #sunny-playground .mh-tall { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; }
  #sunny-playground .mh-comic { font-family: "Comic Neue", "Comic Sans MS", cursive; }
  #sunny-playground .mh-slab { font-family: "Bree Serif", Rockwell, serif; }
  #sunny-playground .mh-pixel { font-family: "Pixelify Sans", "Courier New", monospace; }
  #sunny-playground .mh-block { font-family: "Luckiest Guy", Impact, sans-serif; }
  #sunny-playground .mh-chalk { font-family: "Schoolbell", "Ink Free", cursive; }
  #sunny-playground .mh-script { font-family: "Caveat", "Brush Script MT", cursive; }
  #sunny-playground .mh-lilac { --mh-tile: light-dark(#ecdef9, #503e5c); }
  #sunny-playground .mh-mint { --mh-tile: light-dark(#d8eedb, #385343); }
  #sunny-playground .mh-peach { --mh-tile: light-dark(#fae0d1, #5a4337); }
  #sunny-playground .mh-sky { --mh-tile: light-dark(#d8ebf9, #354e61); }
  #sunny-playground .mh-pink { --mh-tile: light-dark(#f9d8e9, #614052); }
  #sunny-playground .mh-lemon { --mh-tile: light-dark(#fff0ac, #685620); }
  #sunny-playground .mh-coral { --mh-tile: light-dark(#f5beb0, #754945); }
  #sunny-playground .mh-aqua { --mh-tile: light-dark(#c5efe9, #2f5550); }
  #sunny-playground .mh-periwinkle { --mh-tile: light-dark(#cfd7fb, #414c78); }
  #sunny-playground .mh-sand { --mh-tile: light-dark(#eee2c7, #5b4d36); }
  #sunny-playground .mh-lime { --mh-tile: light-dark(#e4f0b6, #4b592d); }
  #sunny-playground .mh-berry { --mh-tile: light-dark(#e6b8d6, #674057); }
  #sunny-playground .mh-name:disabled { background: var(--mh-done); color: var(--mh-done-ink); }
  #sunny-playground .mh-name:disabled .mh-animal { filter: grayscale(1); opacity: .73; }
  #sunny-playground .mh-zone {
    --mh-zone: var(--mh-panel);
    min-height: 92px;
    background: var(--mh-zone);
    border: 2px solid transparent;
    font-size: 20px;
  }
  #sunny-playground .mh-blue { --mh-zone: light-dark(#d1e9fc, #315774); }
  #sunny-playground .mh-green { --mh-zone: light-dark(#d6efd2, #395a3c); }
  #sunny-playground .mh-yellow { --mh-zone: light-dark(#fae9a3, #645426); }
  #sunny-playground .mh-red { --mh-zone: light-dark(#f9d5cf, #70413f); }
  #sunny-playground .mh-symbol {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mh-panel) 64%, transparent);
    font-size: 21px;
    line-height: 1;
  }
  #sunny-playground .mh-actions {
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
  }
  #sunny-playground .mh-personal-page .mh-actions .mh-talk {
    min-width: 0;
    min-height: 48px;
    border: 2px solid #000;
    border-radius: 16px;
    padding: 6px clamp(7px, 2cqw, 12px);
    background: #fff;
    color: #302947;
    filter: var(--mh-sticker-shadow);
    font: 600 clamp(13px, 2.6cqw, 16px)/1.2 var(--mh-heading-font);
  }
  #sunny-playground .mh-talk.mh-unsure { flex-shrink: 0; white-space: nowrap; }
  #sunny-playground .mh-primary { background: var(--mh-moss); color: var(--mh-on-moss); border-color: transparent; }
  #sunny-playground .mh-pin {
    /* Modal dialogs enter the top layer and need an explicit preview scale. */
    zoom: var(--mh-tablet-scale, 1);
    width: min(calc(100% - 24px), 328px);
    max-height: calc(100% - 12px);
    padding: 16px;
    color: var(--mh-ink);
    background: var(--mh-panel);
    border: 1px solid var(--mh-line);
    border-radius: 22px;
    box-shadow: 0 12px 36px #0003;
  }
  #sunny-playground .mh-pin::backdrop {
    background: light-dark(#20263066, #0009);
    backdrop-filter: blur(2px);
  }
  #sunny-playground .mh-pin-top { justify-content: space-between; }
  #sunny-playground .mh-pin h2 { font-size: 19px; }
  #sunny-playground .mh-pin .mh-form { margin-top: 9px; gap: 8px; }
  #sunny-playground .mh-pin input[name="pin"] {
    text-align: center;
    caret-color: transparent;
    font-size: 22px;
    letter-spacing: .36em;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mh-hero) 38%, var(--mh-panel));
  }
  #sunny-playground .mh-pin-hint { text-align: center; color: var(--mh-soft); font-size: 12px; }
  #sunny-playground .mh-pin-hint:empty { display: none; }
  #sunny-playground .mh-pin .mh-error:empty { display: none; }
  #sunny-playground .mh-keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  #sunny-playground .mh-keypad [data-digit] {
    font-size: 20px;
    background: color-mix(in srgb, var(--mh-paper) 58%, var(--mh-panel));
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--mh-ink) 8%, transparent);
  }
  #sunny-playground .mh-keypad [data-digit="0"] { grid-column: 2; }
  #sunny-playground .mh-keypad [data-action="recover-pin"] { grid-column: 1; grid-row: 4; }
  #sunny-playground .mh-form { display: grid; gap: 12px; margin-top: 16px; }
  #sunny-playground label { display: grid; gap: 5px; font-weight: 700; }
  #sunny-playground input,
  #sunny-playground select,
  #sunny-playground textarea {
    width: 100%;
    min-height: 44px;
    background: var(--mh-panel);
    border: 1px solid var(--mh-line);
    border-radius: 9px;
    padding: 8px 10px;
    font-size: 16px;
  }
  #sunny-playground textarea { resize: vertical; }
  #sunny-playground .mh-setup-nav { display: flex; flex-wrap: wrap; gap: 6px; }
  #sunny-playground .mh-setup-progress { display: grid; gap: 4px; }
  #sunny-playground .mh-step-marks { display: flex; gap: 3px; }
  #sunny-playground .mh-step-marks span {
    width: 13px;
    height: 4px;
    border-radius: 4px;
    background: var(--mh-line);
  }
  #sunny-playground .mh-step-marks .mh-reached { background: var(--mh-moss); }
  #sunny-playground .mh-setup-preview {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: min(100%, 164px);
    min-height: 64px;
    padding: 5px;
    border: 2px solid var(--mh-panel);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--mh-lift);
  }
  #sunny-playground .mh-badge-preview {
    min-height: 45px;
    max-width: 100%;
    box-shadow: 0 2px 4px var(--mh-button-shadow);
  }
  #sunny-playground .mh-badge-preview .mh-animal { font-size: 24px; }
  #sunny-playground .mh-badge-preview:is(.mh-circle, .mh-soft-square) {
    width: 82px;
    min-height: 82px;
  }
  #sunny-playground .mh-animal-options {
    --mh-choice-row: 100px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
  }
  #sunny-playground .mh-choice {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 5px;
    min-height: 96px;
    min-width: 0;
    padding: 8px;
    border-radius: 18px;
    background: var(--mh-tile, var(--mh-panel));
    font-size: 16px;
    overflow-wrap: anywhere;
  }
  #sunny-playground .mh-choice[data-current="true"] { border: 2px solid var(--mh-moss); }
  #sunny-playground .mh-choice .mh-animal {
    display: grid;
    place-items: center;
    width: 51px;
    height: 51px;
    border-radius: 50%;
    background: var(--mh-request);
    font-size: 34px;
  }
  #sunny-playground .mh-choice:nth-child(3n + 2) .mh-animal { background: var(--mh-hero); }
  #sunny-playground .mh-choice:nth-child(3n + 3) .mh-animal { background: var(--mh-sun); }
  #sunny-playground .mh-animal-options .mh-choice { min-height: 0; padding: 8px; font-size: 16px; }
  #sunny-playground .mh-animal-options .mh-animal {
    width: clamp(44px, 7cqw, 70px);
    height: clamp(44px, 7cqw, 70px);
    font-size: clamp(29px, 4.6cqw, 46px);
  }
  #sunny-playground .mh-colour-options .mh-choice { background: var(--mh-panel); }
  #sunny-playground .mh-colour-swatch {
    width: clamp(40px, 6.5cqw, 68px);
    aspect-ratio: 1;
    border: 3px solid var(--mh-sticker-paper);
    border-radius: 50%;
    background: var(--mh-tile);
    filter: var(--mh-sticker-shadow);
  }
  #sunny-playground .mh-sample {
    width: clamp(48px, 9cqw, 94px);
    height: clamp(34px, 6cqw, 62px);
    border: 1px solid var(--mh-line);
    background: linear-gradient(150deg, color-mix(in srgb, var(--mh-hero) 65%, var(--mh-panel)), var(--mh-hero));
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--mh-ink) 9%, transparent);
  }
  #sunny-playground .mh-sample:is(.mh-circle, .mh-soft-square, .mh-drop, .mh-shield) {
    width: clamp(34px, 6cqw, 62px);
  }
  #sunny-playground .mh-sample.mh-oval { height: clamp(27px, 4.6cqw, 48px); margin-block: 7px; }
  #sunny-playground .mh-letter-sample { font-size: clamp(29px, 4.6cqw, 48px); line-height: 1.05; }
  #sunny-playground .mh-font-options { position: relative; }
  #sunny-playground .mh-font-options[data-loading] > .mh-choice { visibility: hidden; }
  #sunny-playground .mh-lettering-status { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mh-soft); font-family: "Segoe UI", system-ui, sans-serif; font-size: 20px; }
  #sunny-playground .mh-animation-sample {
    display: grid;
    place-items: center;
    width: clamp(40px, 6.2cqw, 64px);
    height: clamp(40px, 6.2cqw, 64px);
    border-radius: 50%;
    background: var(--mh-hero);
    font: clamp(25px, 4.3cqw, 43px)/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  }
  #sunny-playground .mh-background-options { --mh-choice-row: 126px; }
  #sunny-playground .mh-background-options .mh-choice {
    place-content: stretch;
    grid-template: minmax(0, 1fr) auto / minmax(0, 1fr);
    justify-items: stretch;
    gap: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    text-align: left;
  }
  #sunny-playground .mh-background-options .mh-choice > span:last-child { padding: 8px 11px 9px; font-weight: 700; }
  #sunny-playground .mh-scene-preview { width: 100%; height: 100%; min-height: 0; }
  #sunny-playground .mh-overview-page,
  #sunny-playground .mh-welcome-page,
  #sunny-playground .mh-pin {
    --mh-panel: light-dark(#fff, #24272e);
    --mh-ink: light-dark(#202630, #eff1f5);
    --mh-soft: light-dark(#596574, #c0c7d2);
    --mh-line: light-dark(#dce1e8, #444b57);
    --mh-done: light-dark(#eef1f5, #363e49);
    --mh-done-ink: light-dark(#354150, #e1e6ee);
    color: var(--mh-ink);
    font-family: var(--mh-staff-font);
  }
  #sunny-playground :is(.mh-overview-page, .mh-welcome-page) { background: light-dark(#fff9e8, #352d2f); }
  #sunny-playground .mh-overview-page h1 {
    font-family: inherit;
    font-size: clamp(25px, 4.2cqw, 34px);
    font-weight: 650;
    letter-spacing: -.025em;
  }
  #sunny-playground .mh-overview-page .mh-quiet,
  #sunny-playground .mh-welcome-page .mh-quiet,
  #sunny-playground .mh-overview-page summary {
    border: 1px solid var(--mh-line);
    border-radius: 8px;
  }
  #sunny-playground .mh-overview-header {
    flex: none;
    display: grid;
    padding: 0;
  }
  #sunny-playground .mh-staff-masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 6px 12px;
    padding-bottom: 6px;
  }
  #sunny-playground .mh-staff-tools {
    grid-area: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 100%;
  }
  #sunny-playground .mh-staff-tools button {
    padding: 6px 10px;
    font-weight: 600;
    white-space: nowrap;
  }
  #sunny-playground .mh-staff-tools [data-action="roster"] {
    background: transparent;
    border-color: transparent;
    color: var(--mh-soft);
  }
  #sunny-playground .mh-staff-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid var(--mh-line);
  }
  #sunny-playground .mh-staff-nav .mh-staff-tab {
    min-width: 0;
    min-height: 52px;
    padding: 8px clamp(4px, 1.5cqw, 12px);
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 5px 5px 0 0;
    background: transparent;
    color: var(--mh-soft);
    font-size: clamp(15px, 3cqw, 20px);
    font-weight: 650;
    line-height: 1.2;
  }
  #sunny-playground .mh-staff-nav .mh-staff-tab[aria-current] {
    border-bottom-color: var(--mh-moss);
    background: color-mix(in srgb, var(--mh-moss) 7%, transparent);
    color: var(--mh-ink);
  }
  @media (hover: hover) {
    #sunny-playground .mh-staff-nav .mh-staff-tab:not([aria-current]):hover {
      border-bottom-color: transparent;
      background: color-mix(in srgb, var(--mh-done) 55%, transparent);
    }
  }
  #sunny-playground .mh-staff-heading { grid-area: 1 / 2; text-align: center; }
  #sunny-playground .mh-staff-heading h1 { font-size: 28px; }
  #sunny-playground .mh-staff-date {
    grid-area: 1 / 1;
    min-width: 0;
    font-size: clamp(16px, 2.8cqw, 21px);
    font-weight: 650;
  }
  #sunny-playground .mh-staff-tally {
    grid-area: 1 / 2;
    display: inline-flex;
    align-items: center;
    justify-self: center;
    gap: 6px;
    padding: 4px 9px 4px 5px;
    border-radius: 20px;
    background: var(--mh-panel);
    color: var(--mh-soft);
    font-size: 13px;
  }
  @container mh-tablet-app (max-width: 595px) {
    #sunny-playground .mh-staff-masthead { grid-template-columns: minmax(0, 1fr) auto; }
    #sunny-playground .mh-staff-tools { grid-column: 2; }
    #sunny-playground :is(.mh-staff-tally, .mh-staff-heading) { grid-area: 2 / 1 / auto / -1; }
  }
  #sunny-playground .mh-staff-tally strong {
    color: var(--mh-ink);
    font-variant-numeric: tabular-nums;
  }
  #sunny-playground .mh-staff-ring {
    position: relative;
    flex: 0 0 21px;
    width: 21px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(var(--mh-moss) var(--mh-check-share), var(--mh-done) 0);
  }
  #sunny-playground .mh-staff-ring::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--mh-panel);
  }
  #sunny-playground .mh-history-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 8px 12px;
    line-height: 1.25;
  }
  #sunny-playground .mh-history-controls select,
  #sunny-playground .mh-history-controls .mh-history-switch {
    width: 100%;
    min-height: 44px;
    height: 44px;
  }
  #sunny-playground .mh-settings {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding-block-start: 6px;
    line-height: 1.25;
  }
  #sunny-playground .mh-settings-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  #sunny-playground .mh-settings-group,
  #sunny-playground .mh-settings-columns,
  #sunny-playground .mh-settings-stack {
    display: grid;
    min-width: 0;
    gap: 10px;
  }
  #sunny-playground .mh-settings-group { flex: 1; align-content: start; }
  #sunny-playground .mh-settings-group[hidden] { display: none; }
  #sunny-playground .mh-settings-columns {
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.65fr);
    align-items: start;
  }
  #sunny-playground .mh-settings-group[data-settings-panel="names"] .mh-settings-columns {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }
  #sunny-playground .mh-settings-stack { align-content: start; }
  #sunny-playground .mh-settings-draft {
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--mh-done);
    color: var(--mh-ink);
    font-size: 13px;
    font-weight: 700;
  }
  #sunny-playground .mh-settings-nav .mh-quiet {
    min-width: 0;
    padding: 5px 6px;
    background: transparent;
    font-weight: 600;
  }
  #sunny-playground .mh-settings-nav .mh-quiet[aria-pressed="true"] {
    background: var(--mh-done);
    color: var(--mh-ink);
  }
  #sunny-playground .mh-settings-section {
    min-width: 0;
    padding: 8px clamp(10px, 2.5cqw, 16px);
    border: 1px solid var(--mh-line);
    border-radius: 10px;
    background: var(--mh-panel);
  }
  #sunny-playground .mh-settings-section > .mh-form,
  #sunny-playground .mh-settings-section > .mh-profile-settings { margin-top: 8px; }
  #sunny-playground .mh-settings-section > .mh-form { gap: 8px; }
  #sunny-playground .mh-settings-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
  }
  #sunny-playground .mh-class-list-form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  #sunny-playground .mh-class-list-form textarea { resize: none; }
  #sunny-playground .mh-class-list-form [role="status"] { grid-column: 1 / -1; }
  #sunny-playground .mh-pupil-editor {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--mh-line);
  }
  #sunny-playground .mh-pupil-editor .mh-form { gap: 8px; margin-top: 0; }
  #sunny-playground .mh-class-roster { display: grid; gap: 8px; margin-top: 8px; }
  #sunny-playground .mh-class-roster .mh-sub { margin: 0; }
  #sunny-playground .mh-class-roster-filters {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 8px;
  }
  #sunny-playground .mh-class-roster-list {
    min-height: 52px;
    border: 1px solid var(--mh-line);
    border-radius: 8px;
    padding: 5px;
  }
  #sunny-playground .mh-class-roster-list .mh-sub { padding: 8px; }
  #sunny-playground .mh-class-roster-list ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  #sunny-playground .mh-class-roster-list li > button {
    width: 100%;
    height: 44px;
    padding: 4px 7px;
    text-align: start;
    font-size: 14px;
    line-height: 1.16;
  }
  #sunny-playground .mh-class-roster-list li > button > span {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  #sunny-playground .mh-class-roster-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin-top: 5px;
    font-size: 13px;
  }
  #sunny-playground .mh-class-roster-list button[aria-pressed="true"] {
    border-color: var(--mh-moss);
    background: var(--mh-done);
  }
  @container mh-tablet-app (max-width: 465px) {
    #sunny-playground .mh-settings .mh-settings-columns,
    #sunny-playground .mh-settings-group[data-settings-panel="names"] .mh-settings-columns,
    #sunny-playground .mh-class-list-form { grid-template-columns: minmax(0, 1fr); }
  }
  #sunny-playground .mh-settings-section .mh-primary { justify-self: start; }
  #sunny-playground .mh-settings-section [role="status"] {
    color: var(--mh-soft);
    font-size: 14px;
    overflow-wrap: anywhere;
  }
  #sunny-playground .mh-settings-section [role="status"]:empty { display: none; }
  #sunny-playground .mh-reset-dialog select[size] { padding: 4px; }
  #sunny-playground .mh-reset-dialog option { padding: 5px 7px; }
  #sunny-playground .mh-history-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--mh-line);
    border-radius: 10px;
    background: var(--mh-done);
  }
  #sunny-playground .mh-overview-page .mh-history-switch .mh-quiet {
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 4px 8px;
    border-color: transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--mh-soft);
    font-weight: 600;
  }
  #sunny-playground .mh-history-switch .mh-quiet[aria-pressed="true"] {
    border-color: var(--mh-line);
    background: var(--mh-panel);
    color: var(--mh-ink);
  }
  #sunny-playground .mh-option-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 14px;
  }
  #sunny-playground .mh-option-check input {
    width: 18px;
    min-height: 18px;
    flex: 0 0 auto;
    accent-color: var(--mh-moss);
  }
  #sunny-playground .mh-trial-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    padding: 7px 9px;
    border-radius: 12px;
    background: var(--mh-panel);
  }
  #sunny-playground .mh-trial-banner [role="status"]:empty { display: none; }
  #sunny-playground .mh-checkin-burst {
    position: absolute;
    z-index: 4;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }
  #sunny-playground .mh-burst-piece {
    position: absolute;
    left: var(--mh-burst-x);
    top: var(--mh-burst-y);
    --mh-burst-size: calc(var(--mh-burst-scale) * var(--mh-piece-scale));
    width: calc(8px * var(--mh-burst-size));
    height: calc(12px * var(--mh-burst-size));
    border-radius: 2px;
    background: var(--mh-burst-ink);
    animation: mh-burst-out 580ms cubic-bezier(.15, .65, .3, 1) var(--mh-burst-delay) both;
  }
  #sunny-playground .mh-burst-piece:nth-child(5n + 1) { --mh-burst-ink: light-dark(#ed6d9e, #ff9abd); }
  #sunny-playground .mh-burst-piece:nth-child(5n + 2) { --mh-burst-ink: light-dark(#508de1, #87baff); }
  #sunny-playground .mh-burst-piece:nth-child(5n + 3) { --mh-burst-ink: light-dark(#e9a619, #ffd866); }
  #sunny-playground .mh-burst-piece:nth-child(5n + 4) { --mh-burst-ink: light-dark(#34a685, #77dfb2); }
  #sunny-playground .mh-burst-piece:nth-child(5n) { --mh-burst-ink: light-dark(#9363db, #c5a1ff); }
  #sunny-playground .mh-burst-bubbles .mh-burst-piece {
    width: calc(17px * var(--mh-burst-size));
    height: calc(17px * var(--mh-burst-size));
    border: 2px solid var(--mh-burst-ink);
    border-radius: 50%;
    background: radial-gradient(circle at 29% 27%, #fff 0 13%, transparent 17%),
      color-mix(in srgb, var(--mh-burst-ink) 26%, transparent);
  }
  #sunny-playground .mh-burst-symbols .mh-burst-piece {
    width: auto;
    height: auto;
    background: transparent;
    color: var(--mh-burst-ink);
    text-shadow: 0 0 5px var(--mh-panel);
    font: calc(22px * var(--mh-burst-size))/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  }
  #sunny-playground .mh-burst-hearts .mh-burst-piece { color: light-dark(#df437d, #ff93ba); }
  #sunny-playground .mh-burst-snowflakes .mh-burst-piece { color: light-dark(#4f92c4, #d3eeff); }
  #sunny-playground .mh-burst-fireworks .mh-burst-piece {
    width: calc(3px * var(--mh-burst-size));
    height: calc(21px * var(--mh-burst-size));
    border-radius: 4px;
    background: linear-gradient(transparent, var(--mh-burst-ink) 65%);
  }
  #sunny-playground .mh-burst-footballs .mh-burst-piece { animation-name: mh-burst-bounce; }
  #sunny-playground .mh-roster-arriving .mh-meadow { animation: mh-roster-in 160ms ease-out both; }
  @keyframes mh-burst-out {
    0% {
      transform: translate(-50%, -50%) translate(0, 0) rotate(var(--mh-start-spin)) scale(.35);
      opacity: 0;
    }
    15%, 60% { opacity: 1; }
    60% {
      transform: translate(-50%, -50%) translate(calc(var(--mh-dx) * .76), calc(var(--mh-dy) * .76))
        rotate(calc(var(--mh-start-spin) * .24 + var(--mh-spin) * .76));
    }
    100% {
      transform: translate(-50%, -50%) translate(var(--mh-dx), var(--mh-end-y)) rotate(var(--mh-spin));
      opacity: 0;
    }
  }
  @keyframes mh-burst-bounce {
    0% {
      transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(.35);
      opacity: 0;
    }
    15%, 70% { opacity: 1; }
    38% {
      transform: translate(-50%, -50%) translate(calc(var(--mh-dx) * .55), calc(var(--mh-dy) * .55))
        rotate(calc(var(--mh-spin) * .55));
    }
    66% {
      transform: translate(-50%, -50%) translate(calc(var(--mh-dx) * .82), calc(var(--mh-dy) * .82 - 12px))
        rotate(calc(var(--mh-spin) * .82));
    }
    100% {
      transform: translate(-50%, -50%) translate(var(--mh-dx), var(--mh-dy)) rotate(var(--mh-spin));
      opacity: 0;
    }
  }
  @keyframes mh-roster-in {
    from { opacity: .55; }
    to { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    #sunny-playground .mh-burst-piece,
    #sunny-playground .mh-roster-arriving .mh-meadow { animation: none; }
  }
  #sunny-playground .mh-unsure { --mh-zone: light-dark(#eee4fb, #524365); }
  #sunny-playground .mh-history-talk { --mh-zone: var(--mh-request); }
  #sunny-playground .mh-overview-page:has(> .mh-history, > .mh-settings, > .mh-today) {
    display: flex;
    flex-direction: column;
  }
  #sunny-playground .mh-history {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 9px;
    padding-block-start: 9px;
  }
  #sunny-playground .mh-history-context {
    display: grid;
    align-items: center;
    min-height: 36px;
  }
  #sunny-playground .mh-history-context:empty { display: none; }
  #sunny-playground .mh-history-context > * { grid-area: 1 / 1; min-width: 0; }
  #sunny-playground .mh-history-context[data-pattern] > .mh-history-legend { visibility: hidden; }
  #sunny-playground .mh-history-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    min-height: calc(52px * var(--mh-staff-scale));
  }
  #sunny-playground .mh-history-footer > .mh-history-context { grid-column: 1; min-width: 0; }
  #sunny-playground .mh-history-footer > .mh-history-page-slot { grid-column: 2; }
  #sunny-playground .mh-history-footer > .mh-history-note { grid-column: 3; min-width: 0; text-align: end; }
  #sunny-playground .mh-history-footer .mh-history-insight {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 13px;
  }
  #sunny-playground .mh-history-footer .mh-pupil-history-pages { justify-content: center; }
  #sunny-playground .mh-history-table {
    display: grid;
    flex: 1 1 0;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }
  #sunny-playground .mh-history-table > table { height: 100%; }
  #sunny-playground .mh-history-controls > label,
  #sunny-playground .mh-history-view-field {
    display: grid;
    gap: 5px;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
  }
  #sunny-playground .mh-history-period { grid-column: span 2; grid-row: 1; }
  #sunny-playground .mh-history-view-field { grid-column: 3 / 5; grid-row: 1; }
  #sunny-playground .mh-history-pupil { grid-column: 2; grid-row: 1; }
  #sunny-playground .mh-history-year { grid-column: 1 / -1; grid-row: 2; }
  @container mh-tablet-app (max-width: 415px) {
    #sunny-playground .mh-history-controls { grid-template-columns: minmax(0, 1fr); }
  }
  #sunny-playground .mh-history-hint { color: var(--mh-soft); font-size: 13px; }
  #sunny-playground .mh-history-insight {
    padding: 10px 12px;
    border-inline-start: 3px solid var(--mh-moss);
    background: var(--mh-panel);
    font-size: 14px;
  }
  #sunny-playground .mh-history-grid {
    width: 100%;
    table-layout: fixed;
    border-spacing: 3px;
    font-size: 13px;
  }
  #sunny-playground .mh-history-grid :is(td, th) { text-align: center; padding: 0; }
  #sunny-playground .mh-history-grid th {
    color: var(--mh-soft);
    font-size: 12px;
    line-height: 1.25;
  }
  #sunny-playground .mh-history-grid th:first-child { width: 62px; }
  #sunny-playground .mh-history-grid thead th { height: 27px; }
  #sunny-playground .mh-history-grid tbody td:not([colspan]) {
    position: relative;
    height: 48px;
    border: 1px solid var(--mh-line);
    border-radius: 8px;
    background: var(--mh-panel);
    vertical-align: middle;
  }
  #sunny-playground .mh-history-grid tbody td:has(> .mh-history-cell) { border-color: transparent; }
  #sunny-playground .mh-history-grid[data-compact] tbody td:not([colspan]) { height: 24px; }
  #sunny-playground .mh-history-cell {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 2px;
    min-height: 0;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: var(--mh-zone, var(--mh-panel));
    color: var(--mh-zone-ink, var(--mh-ink));
    font-size: 12px;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  #sunny-playground .mh-history-grid[data-compact] .mh-history-cell {
    grid-template-columns: 1.7em minmax(0, 1fr) 1.7em;
    align-items: center;
    gap: 4px;
  }
  #sunny-playground .mh-history-cell-empty {
    display: block;
    color: var(--mh-soft);
    text-align: center;
  }
  #sunny-playground .mh-history-cell[aria-pressed="true"] { border-color: var(--mh-ink); }
  #sunny-playground .mh-history-mark { font-size: 15px; }
  #sunny-playground .mh-pupil-history .mh-history-controls {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  #sunny-playground .mh-pupil-history .mh-history-period { grid-column: 1; }
  #sunny-playground .mh-pupil-history-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 7px;
    font-weight: 500;
  }
  #sunny-playground .mh-pupil-history-cell .mh-history-mark { flex: 0 0 auto; line-height: 1; }
  #sunny-playground .mh-pupil-history-answer {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  #sunny-playground .mh-pupil-history-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 4px 10px;
    color: var(--mh-soft);
    font-size: 13px;
  }
  #sunny-playground .mh-pupil-history-pages button:disabled { opacity: .5; }
  @container mh-tablet-app (max-width: 440px) {
    #sunny-playground .mh-pupil-history-cell { flex-direction: column; }
    #sunny-playground .mh-history-mark + .mh-pupil-history-answer { -webkit-line-clamp: 1; }
  }
  #sunny-playground .mh-history-mix {
    display: flex;
    width: 92%;
    height: 7px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--mh-done);
  }
  #sunny-playground .mh-history-mix > span,
  #sunny-playground .mh-history-compare-bar > span { background: var(--mh-zone, var(--mh-done)); }
  #sunny-playground .mh-history-legend,
  #sunny-playground .mh-history-day-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 13px;
  }
  #sunny-playground .mh-history-legend li,
  #sunny-playground .mh-history-day-list li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  #sunny-playground .mh-history-dot {
    flex: 0 0 11px;
    width: 11px;
    height: 11px;
    border: 1px solid var(--mh-line);
    border-radius: 50%;
    background: var(--mh-zone, var(--mh-done));
  }
  #sunny-playground .mh-history-day {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--mh-panel);
    text-align: start;
  }
  #sunny-playground .mh-history-day h2 { font-size: 16px; }
  #sunny-playground .mh-history-compare {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    text-align: start;
  }
  #sunny-playground .mh-history-compare thead th { height: 34px; }
  #sunny-playground .mh-history-compare :is(th, td) {
    border-bottom: 1px solid var(--mh-line);
    padding: 7px 4px;
    text-align: start;
  }
  #sunny-playground .mh-history-compare th:first-child,
  #sunny-playground .mh-history-compare :is(th, td):last-child {
    width: 1%;
    white-space: nowrap;
  }
  #sunny-playground .mh-history-compare :is(th, td):last-child {
    text-align: end;
    font-variant-numeric: tabular-nums;
  }
  #sunny-playground .mh-history-compare-bar {
    display: flex;
    height: 18px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--mh-done);
  }
  #sunny-playground .mh-history-compare-bar > span { height: 100%; }
  #sunny-playground .mh-history-compare td:nth-child(2) { padding-block: 0; }
  #sunny-playground .mh-history-compare .mh-history-compare-trigger {
    width: 100%;
    padding: 5px 6px;
    border-color: transparent;
    background: transparent;
  }
  #sunny-playground .mh-history-compare .mh-history-compare-trigger[aria-expanded="true"] {
    border-color: var(--mh-line);
    background: var(--mh-panel);
  }
  #sunny-playground .mh-weekday-breakdown[hidden] { display: none; }
  #sunny-playground .mh-priority {
    display: grid;
    grid-template-columns: repeat(var(--mh-columns, 4), minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
  }
  #sunny-playground .mh-priority section {
    --mh-column: var(--mh-panel);
    min-width: 0;
    min-height: 89px;
    overflow: hidden;
    border: 1px solid var(--mh-line);
    border-radius: 9px;
    background: var(--mh-panel);
  }
  @supports (grid-template-rows: subgrid) {
    #sunny-playground .mh-priority section {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
  }
  #sunny-playground .mh-priority .mh-requests { --mh-column: var(--mh-request); }
  #sunny-playground .mh-priority .mh-zone-group {
    --mh-column: color-mix(in srgb, var(--mh-zone) 85%, var(--mh-panel));
  }
  #sunny-playground .mh-priority .mh-custom-zone { --mh-column: var(--mh-zone); }
  #sunny-playground .mh-priority .mh-custom-zone h2 { color: var(--mh-zone-ink); }
  #sunny-playground .mh-priority h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    min-height: 56px;
    padding: 7px 9px;
    background: var(--mh-column);
    font-size: 15px;
    line-height: 1.25;
  }
  #sunny-playground .mh-priority h2 > span:first-child { min-width: 0; overflow-wrap: anywhere; }
  #sunny-playground .mh-priority .mh-is-empty h2 {
    background: color-mix(in srgb, var(--mh-column) 30%, var(--mh-panel));
    color: var(--mh-soft);
  }
  #sunny-playground .mh-group.mh-is-empty summary { color: var(--mh-soft); }
  #sunny-playground .mh-priority .mh-needs-attention {
    border-color: light-dark(#b5668c, #d68bac);
    box-shadow: 0 1px 5px light-dark(#a6507421, #0003);
  }
  #sunny-playground .mh-needs-attention .mh-count {
    background: light-dark(#884262, #ffd4e7);
    color: light-dark(#fff, #4e2337);
  }
  #sunny-playground .mh-priority .mh-sub,
  #sunny-playground .mh-priority .mh-list {
    align-self: start;
    margin: 7px 8px 8px;
  }
  #sunny-playground .mh-priority .mh-sub { font-size: 14px; }
  #sunny-playground .mh-count {
    flex: 0 0 auto;
    min-width: 27px;
    padding: 3px 7px;
    border-radius: 18px;
    background: var(--mh-done);
    color: var(--mh-done-ink);
    font-size: 13px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  #sunny-playground .mh-group { margin-top: 8px; }
  #sunny-playground .mh-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 7px 0 0;
  }
  #sunny-playground .mh-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 4px 9px;
    border: 1px solid var(--mh-line);
    border-radius: 12px;
    background: var(--mh-panel);
    font-size: 14px;
  }
  #sunny-playground .mh-row > span:first-child { overflow-wrap: anywhere; min-width: 0; font-weight: 700; }
  #sunny-playground .mh-row button {
    padding: 3px 0;
    background: transparent;
    border: 0;
    font: inherit;
    font-weight: 700;
    color: inherit;
    overflow-wrap: anywhere;
  }
  #sunny-playground .mh-row button:hover { text-decoration: underline; }
  #sunny-playground .mh-pill {
    flex: 0 0 auto;
    border-radius: 20px;
    padding: 2px 7px;
    background: var(--mh-zone, var(--mh-done));
    font-size: 13px;
    font-weight: 700;
  }
  #sunny-playground details summary {
    position: relative;
    min-height: 44px;
    padding: 10px 12px;
    padding-inline-end: 52px;
    border-radius: 10px;
    background: var(--mh-panel);
    font-weight: 700;
  }
  #sunny-playground details summary .mh-count {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 12px;
    transform: translateY(-50%);
  }
  #sunny-playground details .mh-list { padding: 0 3px 3px; }
  #sunny-playground .mh-today {
    display: grid;
    align-content: start;
    gap: 8px;
    padding-block-start: 10px;
  }
  #sunny-playground .mh-today .mh-priority,
  #sunny-playground .mh-today .mh-group { margin-top: 0; }
  #sunny-playground .mh-today .mh-priority section { min-height: 56px; }
  #sunny-playground .mh-today .mh-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr));
    gap: 4px;
    margin: 6px 8px 8px;
    padding: 0;
  }
  #sunny-playground .mh-today .mh-row {
    display: block;
    min-width: 0;
    padding: 0;
    border-radius: 8px;
  }
  #sunny-playground .mh-today .mh-row button {
    display: block;
    width: 100%;
    min-height: 42px;
    padding: 5px 7px;
    text-align: start;
    line-height: 1.2;
  }
  #sunny-playground .mh-today .mh-row button > span,
  #sunny-playground .mh-today .mh-priority h2 > span:first-child {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow-wrap: anywhere;
  }
  #sunny-playground .mh-today[data-compact] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #sunny-playground .mh-today[data-compact] > .mh-priority,
  #sunny-playground .mh-today[data-compact] > .mh-group:last-child:nth-child(even) { grid-column: 1 / -1; }
  #sunny-playground .mh-today[data-compact] .mh-priority { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #sunny-playground .mh-today[data-compact] .mh-priority section {
    grid-row: auto;
    grid-template-rows: auto;
    min-height: 40px;
  }
  #sunny-playground .mh-today[data-compact] .mh-priority section:not(.mh-is-empty) {
    display: grid;
    grid-template-columns: 144px minmax(0, 1fr);
  }
  #sunny-playground .mh-today[data-compact] .mh-priority section[data-wide] { grid-column: 1 / -1; }
  #sunny-playground .mh-today[data-compact] .mh-priority .mh-list { margin: 4px 6px; }
  #sunny-playground .mh-today[data-compact] .mh-priority section[data-wide] .mh-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 88px), 1fr));
  }
  #sunny-playground .mh-today[data-compact] .mh-priority h2 { min-height: 40px; font-size: 14px; }
  #sunny-playground .mh-profile-settings {
    display: grid;
    justify-items: start;
    gap: 8px;
  }
  #sunny-playground .mh-profile-settings .mh-sub { margin: 0; font-size: 14px; }
  #sunny-playground .mh-profile-settings [role="status"] {
    color: var(--mh-moss);
    font-size: 14px;
    font-weight: 800;
  }
  #sunny-playground .mh-profile-settings [role="status"]:empty { display: none; }
  #sunny-playground .mh-profile-settings button:disabled {
    background: var(--mh-done);
    color: var(--mh-done-ink);
  }
  #sunny-playground .mh-feeling-settings [hidden] { display: none; }
  #sunny-playground .mh-feeling-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    align-items: end;
    gap: 8px 12px;
  }
  #sunny-playground .mh-feeling-toolbar .mh-settings-actions { justify-content: flex-end; }
  @container mh-tablet-app (max-width: 610px) {
    #sunny-playground .mh-feeling-toolbar { grid-template-columns: minmax(0, 1fr); }
    #sunny-playground .mh-feeling-toolbar .mh-settings-actions { justify-content: flex-start; }
  }
  #sunny-playground .mh-backdrop-settings [hidden] { display: none; }
  #sunny-playground .mh-backdrop-editor {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
    gap: 8px 12px;
  }
  #sunny-playground .mh-backdrop-fields { display: grid; gap: 8px; }
  @container mh-tablet-app (max-width: 465px) {
    #sunny-playground .mh-backdrop-editor { grid-template-columns: minmax(0, 1fr); }
  }
  #sunny-playground .mh-backdrop-week {
    display: grid;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  #sunny-playground .mh-backdrop-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
  }
  #sunny-playground .mh-backdrop-days .mh-quiet {
    min-width: 0;
    padding: 5px 0;
    font-size: 12px;
  }
  #sunny-playground .mh-backdrop-days [aria-pressed="true"] {
    background: var(--mh-done);
    border-color: var(--mh-moss);
  }
  #sunny-playground .mh-backdrop-preview {
    display: grid;
    gap: 5px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
  }
  #sunny-playground .mh-backdrop-preview .mh-meadow {
    --mh-meadow-horizon: 46px;
    --mh-meadow-foreground: 24px;
    min-height: 118px;
    padding: 0;
    border-radius: 9px;
  }
  #sunny-playground .mh-backdrop-preview .mh-meadow-sun {
    width: 68px;
    inset: 10px 14% auto auto;
  }
  #sunny-playground .mh-backdrop-preview .mh-cloud-small { inset-block-start: 24px; }
  #sunny-playground .mh-backdrop-preview .mh-cloud-wide { inset-block-start: 64px; }
  #sunny-playground .mh-backdrop-preview .mh-meadow-detail { scale: .66; transform-origin: center bottom; }
  #sunny-playground .mh-backdrop-preview .mh-meadow-birds { display: none; }
  #sunny-playground :is(.mh-backdrop-preview, .mh-setup-preview) .mh-art-detail:is(
    .mh-art-detail-sun, .mh-art-detail-moon, .mh-art-detail-planet, .mh-art-detail-rainbow
  ) { top: max(var(--mh-art-y), 9cqw); }
  #sunny-playground .mh-custom-settings,
  #sunny-playground .mh-custom-choice {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  #sunny-playground .mh-custom-settings { display: grid; gap: 9px; }
  #sunny-playground .mh-custom-toolbar {
    display: grid;
    grid-template-columns: 126px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
  }
  #sunny-playground .mh-custom-toolbar label { min-width: 0; font-size: 13px; }
  #sunny-playground .mh-custom-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }
  #sunny-playground .mh-custom-picker .mh-custom-edit {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 5px 7px;
    min-height: 44px;
    text-align: start;
    font-size: 14px;
    line-height: 1.15;
  }
  #sunny-playground .mh-custom-picker .mh-custom-edit > span:last-child {
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  #sunny-playground .mh-custom-picker .mh-custom-edit[aria-pressed="true"] {
    border-color: var(--mh-moss);
    background: var(--mh-done);
  }
  #sunny-playground .mh-custom-swatch {
    flex: 0 0 13px;
    height: 13px;
    border: 1px solid var(--mh-line);
    border-radius: 50%;
    background: var(--mh-zone);
  }
  #sunny-playground .mh-custom-choice {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 7px;
    padding: 6px 8px;
    border: 1px solid var(--mh-line);
    border-radius: 12px;
  }
  #sunny-playground .mh-custom-choice legend { padding: 0 5px; font-size: 13px; font-weight: 800; }
  #sunny-playground .mh-custom-choice label { min-width: 0; font-size: 13px; }
  #sunny-playground .mh-custom-choice input[type="color"] { width: 48px; padding: 4px; }
  #sunny-playground .mh-custom-preview {
    display: grid;
    gap: 4px;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
  }
  #sunny-playground .mh-custom-preview-sample {
    min-height: 44px;
    line-height: 1.15;
    background: var(--mh-zone);
    color: var(--mh-zone-ink);
    text-align: center;
    overflow-wrap: anywhere;
  }
  #sunny-playground .mh-custom-preview-sample .mh-shape-content > span:last-child {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  #sunny-playground .mh-custom-preview-sample .mh-symbol {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    font-size: 16px;
  }
  @container mh-tablet-app (max-width: 640px) {
    #sunny-playground .mh-custom-toolbar { grid-template-columns: minmax(0, 1fr); }
    #sunny-playground .mh-custom-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #sunny-playground .mh-custom-choice { grid-template-columns: auto minmax(0, 1fr); }
    #sunny-playground .mh-custom-choice label:first-of-type,
    #sunny-playground .mh-custom-picture,
    #sunny-playground .mh-custom-preview { grid-column: 1 / -1; }
  }
  #sunny-playground .mh-error { color: light-dark(#9b2f2a, #ffb1a8); }
  #sunny-playground .mh-sr {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  @container mh-tablet-app (max-width: 590px) {
    #sunny-playground .mh-animal-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  @container mh-tablet-app (max-width: 510px) {
    #sunny-playground .mh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #sunny-playground .mh-animal-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #sunny-playground .mh-compact-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    #sunny-playground .mh-compact-options .mh-choice { font-size: 13px; }
    #sunny-playground .mh-compact-options:not(.mh-background-options) .mh-choice { min-height: 79px; padding: 5px; }
    #sunny-playground .mh-priority { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #sunny-playground .mh-personal {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "animal back" "animal greeting";
    }
  }
  @container mh-tablet-app (max-width: 405px) {
    #sunny-playground .mh-animal-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  #sunny-playground .mh-app > .mh-main.mh-meadow-page { height: 100%; min-height: 0; padding: 0; }
  #sunny-playground .mh-meadow-page > .mh-meadow {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(6px, 3.4cqh, 23px);
    padding-block: clamp(8px, 3.2cqh, 24px) clamp(10px, 5.5cqh, 42px);
  }
  #sunny-playground .mh-meadow {
    --mh-meadow-horizon: clamp(148px, 43%, 195px);
    --mh-lawn: light-dark(#aedeb1, #365440);
    --mh-far-hill: light-dark(#9bceb2, #305650);
    --mh-roster-surface: light-dark(#f7fcff, #2e3e50);
    --mh-roster-line: light-dark(#cadfea, #526a7e);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: clamp(14px, 3.4cqw, 23px);
    min-height: 404px;
    padding: clamp(14px, 3cqw, 24px) clamp(16px, 4.5cqw, 36px) 42px;
    background: var(--mh-scene-sky);
  }
  #sunny-playground .mh-meadow-scenery {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(180deg, light-dark(#b2dff7, #263e59), light-dark(#d9f2fa, #415c72) 66%);
  }
  #sunny-playground .mh-meadow-hill {
    position: absolute;
    inset-block-end: -22%;
    border-radius: 54% 46% 0 0 / 43% 48% 0 0;
  }
  #sunny-playground .mh-meadow-hill-far {
    inset-block-start: calc(var(--mh-meadow-horizon) - 12px);
    inset-inline-start: -20%;
    width: 108%;
    transform: rotate(-5deg);
    background: linear-gradient(155deg, light-dark(#c2e5ce, #395f58), var(--mh-far-hill) 67%);
  }
  #sunny-playground .mh-meadow-hill-mid {
    inset-block-start: calc(var(--mh-meadow-horizon) + 9px);
    inset-inline-end: -25%;
    width: 112%;
    transform: rotate(6deg);
    background: linear-gradient(151deg, light-dark(#cce9ca, #44654d), var(--mh-lawn) 60%);
  }
  #sunny-playground .mh-meadow-hill-front {
    inset-block-start: calc(var(--mh-meadow-horizon) + var(--mh-meadow-foreground, 68px));
    inset-inline-start: -22%;
    width: 145%;
    transform: rotate(-4deg);
    background: linear-gradient(162deg, var(--mh-lawn), light-dark(#94c99c, #2f4933) 70%);
    box-shadow: inset 0 2px 0 light-dark(#deefd880, #78997345);
  }
  #sunny-playground .mh-meadow-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(8px, 2cqw, 14px);
    min-height: clamp(64px, min(19cqw, 19cqh), 139px);
    padding-inline-end: clamp(34px, 4cqw, 40px);
  }
  #sunny-playground .mh-meadow-header .mh-meadow-sun {
    position: relative;
    inset: auto;
    width: clamp(44px, min(19cqw, 19cqh), 144px);
  }
  #sunny-playground .mh-staff-icon {
    position: absolute;
    z-index: 1;
    inset: 5px 5px auto auto;
    display: grid;
    place-items: center;
    width: 44px;
    padding: 0;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: light-dark(#3c6078, #c9e3f4);
  }
  #sunny-playground .mh-staff-icon::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid var(--mh-roster-line);
    border-radius: 10px;
    background: var(--mh-roster-surface);
    box-shadow: 0 2px 6px light-dark(#31516a16, #0003);
  }
  #sunny-playground .mh-lock-glyph {
    position: relative;
    width: 11px;
    height: 9px;
    margin-top: 4px;
    border: 1.5px solid currentColor;
    border-radius: 3px;
  }
  #sunny-playground .mh-lock-glyph::before {
    content: "";
    position: absolute;
    inset: auto 1px 100%;
    height: 5px;
    border: 1.5px solid currentColor;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
  }
  #sunny-playground .mh-meadow-title {
    display: grid;
    align-self: center;
    justify-self: start;
    justify-items: start;
    gap: 5px;
    max-width: 100%;
  }
  #sunny-playground .mh-meadow-title h1 {
    font-size: clamp(26px, min(8.8cqw, 10cqh), 76px);
    line-height: 1.05;
    letter-spacing: -.03em;
  }
  #sunny-playground .mh-meadow-title p {
    max-width: 30ch;
    color: var(--mh-soft);
    font-family: inherit;
    font-size: clamp(14px, min(3.6cqw, 3.6cqh), 25px);
    font-weight: 500;
  }
  #sunny-playground .mh-meadow-themed .mh-meadow-title {
    width: fit-content;
    max-width: 100%;
    padding: 9px 14px 10px;
    border-radius: 15px;
    background: var(--mh-roster-surface);
  }
  #sunny-playground .mh-cloud {
    position: absolute;
    height: clamp(14px, 3.5cqw, 25px);
    border-radius: 24px;
    background: linear-gradient(170deg, var(--mh-cloud), color-mix(in srgb, var(--mh-cloud) 87%, var(--mh-scene-sky)));
    filter: drop-shadow(0 3px 1px color-mix(in srgb, var(--mh-scene-sky) 19%, transparent));
  }
  #sunny-playground .mh-cloud::before,
  #sunny-playground .mh-cloud::after {
    content: "";
    position: absolute;
    bottom: 2px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: inherit;
  }
  #sunny-playground .mh-cloud::before { left: 17%; width: 41%; }
  #sunny-playground .mh-cloud::after { right: 16%; width: 30%; }
  #sunny-playground .mh-cloud-small { inset: 59px auto auto 48%; width: clamp(44px, 12cqw, 91px); opacity: .82; }
  #sunny-playground .mh-meadow-page .mh-cloud-small { inset-block-start: 83px; inset-inline-start: 64%; }
  #sunny-playground .mh-cloud-wide { inset: 143px -12px auto auto; width: clamp(62px, 18cqw, 132px); }
  #sunny-playground .mh-meadow-birds {
    position: absolute;
    inset: 30px auto auto 53%;
    display: flex;
    align-items: start;
    gap: 13px;
    color: light-dark(#668aa8, #aac7dc);
    opacity: .69;
  }
  #sunny-playground .mh-meadow-bird { display: flex; transform: rotate(-9deg); }
  #sunny-playground .mh-meadow-bird + .mh-meadow-bird { margin-top: 9px; scale: .74; }
  #sunny-playground .mh-meadow-bird::before,
  #sunny-playground .mh-meadow-bird::after {
    content: "";
    width: 9px;
    height: 5px;
    border-top: 1.5px solid currentColor;
    border-radius: 70% 70% 0 0;
    transform: rotate(21deg);
  }
  #sunny-playground .mh-meadow-bird::after { transform: rotate(-21deg); }
  #sunny-playground .mh-meadow-sun {
    position: absolute;
    display: grid;
    place-items: center;
    inset: 43px clamp(65px, 12%, 88px) auto auto;
    width: clamp(84px, 23cqw, 148px);
    aspect-ratio: 1;
    transform: rotate(-9deg);
  }
  #sunny-playground .mh-sun-ray {
    position: absolute;
    inset: 0;
    transform: rotate(var(--mh-ray-angle));
  }
  #sunny-playground .mh-sun-ray::before {
    content: "";
    position: absolute;
    inset: 1% auto auto 47.5%;
    width: 5%;
    height: 11%;
    border-radius: 10px;
    background: var(--mh-sun-rays);
  }
  #sunny-playground .mh-sun-ray:nth-child(even)::before { top: 3%; height: 9%; }
  #sunny-playground .mh-sun-face {
    position: relative;
    width: 69%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      radial-gradient(ellipse at 33% 25%, color-mix(in srgb, var(--mh-sun-face) 60%, var(--mh-panel)) 0 8%, transparent 9%),
      radial-gradient(circle at 24% 57%, var(--mh-sun-cheeks) 0 6%, transparent 7%),
      radial-gradient(circle at 76% 57%, var(--mh-sun-cheeks) 0 6%, transparent 7%),
      linear-gradient(145deg, light-dark(#fff191, #ab8037), var(--mh-sun-face) 63%);
    box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--mh-sun-features) 12%, transparent),
      0 3px 14px light-dark(#ffcf6a69, #e1a35228);
  }
  #sunny-playground .mh-sun-face::before,
  #sunny-playground .mh-sun-face::after {
    content: "";
    position: absolute;
    top: 39%;
    width: 8%;
    height: 11%;
    border-radius: 50%;
    background: var(--mh-sun-features);
  }
  #sunny-playground .mh-sun-face::before { left: 31%; }
  #sunny-playground .mh-sun-face::after { right: 31%; }
  #sunny-playground .mh-sun-smile {
    position: absolute;
    inset: 53% auto auto 40%;
    width: 20%;
    height: 12%;
    border: 2px solid var(--mh-sun-features);
    border-top: 0;
    border-radius: 0 0 30px 30px;
  }
  #sunny-playground .mh-stepping-stones {
    --mh-sticker-slant: .13;
    --mh-sticker-turn: 1;
    --mh-shaped-name-scale: .20;
    --mh-shaped-animal-scale: .32;
    display: grid;
    grid-auto-rows: minmax(0, 1fr);
    gap: 10px;
    padding: 0 3px 9px;
  }
  #sunny-playground .mh-stepping-stones[data-compact] {
    --mh-sticker-slant: .10;
    --mh-sticker-turn: .75;
    --mh-shaped-name-scale: .15;
    --mh-shaped-animal-scale: .20;
  }
  #sunny-playground .mh-roster-row {
    display: grid;
    grid-template-columns: repeat(var(--mh-roster-columns), minmax(0, 1fr));
    gap: 10px;
  }
  #sunny-playground .mh-roster-slot {
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    container-type: size;
  }
  #sunny-playground .mh-stepping-stones button.mh-name {
    --mh-stone-surface: var(--mh-tile);
    /* Allow for the rotated corners within each grid slot. */
    --mh-sticker-height: min(calc(100cqh - 100cqw * var(--mh-sticker-slant)), 88cqw, 320px);
    --mh-sticker-width: min(calc(100cqw - var(--mh-sticker-height) * var(--mh-sticker-slant)), calc(var(--mh-sticker-height) * 1.22));
    --mh-sticker-content-height: var(--mh-sticker-height);
    --mh-sticker-name-scale: .23;
    --mh-sticker-animal-scale: .40;
    --mh-shape-outline: var(--mh-sticker-paper);
    --mh-shape-stroke: clamp(3.5px, 2.6cqw, 6px);
    position: relative;
    isolation: isolate;
    place-self: center;
    width: var(--mh-sticker-width);
    height: var(--mh-sticker-content-height);
    rotate: calc(var(--mh-sticker-angle) * var(--mh-sticker-turn));
    min-height: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    filter: var(--mh-sticker-shadow);
    font-size: clamp(13px, min(17cqw, calc(var(--mh-sticker-content-height) * var(--mh-sticker-name-scale))), 62px);
  }
  #sunny-playground .mh-stepping-stones .mh-name:is(.mh-circle, .mh-soft-square, .mh-oval) {
    --mh-roster-ratio: 1;
    --mh-sticker-content-height: min(var(--mh-sticker-height), calc(var(--mh-sticker-width) / var(--mh-roster-ratio)));
    width: calc(var(--mh-sticker-content-height) * var(--mh-roster-ratio));
  }
  #sunny-playground .mh-stepping-stones .mh-name.mh-oval { --mh-roster-ratio: 1.4; }
  #sunny-playground .mh-stepping-stones .mh-name:is(.mh-circle, .mh-oval, .mh-drop, .mh-shield, .mh-arch, .mh-leaf, .mh-cloud-shape) {
    --mh-sticker-name-scale: var(--mh-shaped-name-scale);
    --mh-sticker-animal-scale: var(--mh-shaped-animal-scale);
  }
  #sunny-playground .mh-stepping-stones .mh-shape-content { gap: 2px; min-height: 0; }
  #sunny-playground .mh-stepping-stones .mh-animal {
    font-size: clamp(15px, min(38cqw, calc(var(--mh-sticker-content-height) * var(--mh-sticker-animal-scale))), 108px);
    line-height: 1;
  }
  #sunny-playground .mh-stepping-stones .mh-pupil-label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.05;
  }
  #sunny-playground .mh-stepping-stones .mh-name[data-unset] { --mh-stone-surface: var(--mh-roster-surface); }
  #sunny-playground .mh-roster-slot:nth-child(4n + 1) .mh-name[data-unset] {
    --mh-stone-surface: light-dark(#dcecfb, #354b62);
  }
  #sunny-playground .mh-roster-slot:nth-child(4n + 3) .mh-name[data-unset] {
    --mh-stone-surface: light-dark(#ece3f7, #4c405c);
  }
  #sunny-playground .mh-roster-slot:nth-child(4n) .mh-name[data-unset] {
    --mh-stone-surface: light-dark(#deefe4, #365348);
  }
  #sunny-playground .mh-stepping-stones .mh-name:disabled {
    --mh-shape-outline: color-mix(in srgb, var(--mh-done) 87%, var(--mh-done-ink));
    --mh-shape-fill: var(--mh-done);
    filter: none;
  }
  #sunny-playground .mh-meadow-detail {
    position: absolute;
    z-index: 0;
    inset: auto 0 0;
    height: 33px;
    pointer-events: none;
  }
  #sunny-playground .mh-meadow-scatter {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
  }
  #sunny-playground .mh-meadow-scatter .mh-flower {
    inset: var(--mh-flower-y) auto auto var(--mh-flower-x);
    translate: -50% -50%;
    scale: var(--mh-flower-size);
    rotate: var(--mh-flower-angle);
  }
  #sunny-playground .mh-backdrop-preview .mh-meadow-scatter .mh-flower { scale: calc(var(--mh-flower-size) * .58); }
  #sunny-playground .mh-meadow-scatter [data-petal="gold"] { --mh-petal: light-dark(#f5ba64, #f4c88a); }
  #sunny-playground .mh-meadow-scatter [data-petal="lilac"] { --mh-petal: light-dark(#ab92de, #c9b2f2); }
  #sunny-playground .mh-meadow-scatter [data-petal="cream"] { --mh-petal: light-dark(#fff5db, #ead8b3); }
  #sunny-playground .mh-flower {
    --mh-petal: light-dark(#d983b6, #e7a9d3);
    position: absolute;
    bottom: 15px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mh-sun-face);
    box-shadow: -5px 0 0 var(--mh-petal), 5px 0 0 var(--mh-petal), 0 -5px 0 var(--mh-petal), 0 5px 0 var(--mh-petal);
  }
  #sunny-playground .mh-flower::before {
    content: "";
    position: absolute;
    inset: 12px -2px auto;
    height: 5px;
    background: radial-gradient(ellipse at 26% 29%, var(--mh-grass-detail) 0 27%, transparent 30%),
      radial-gradient(ellipse at 74% 70%, var(--mh-grass-detail) 0 27%, transparent 30%);
  }
  #sunny-playground .mh-flower::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 7px auto auto 3px;
    width: 2px;
    height: 10px;
    border-radius: 4px;
    background: var(--mh-grass-detail);
  }
  #sunny-playground .mh-grass {
    position: absolute;
    bottom: 12px;
    left: 22%;
    width: 13px;
    height: 8px;
    border-radius: 70% 70% 20% 20%;
    border-inline: 2px solid var(--mh-grass-detail);
    rotate: -9deg;
  }
  #sunny-playground .mh-grass:nth-last-child(2) { left: 43%; bottom: 15px; rotate: 17deg; scale: .72; }
  #sunny-playground .mh-grass:last-child { left: 65%; bottom: 9px; rotate: 11deg; }
  #sunny-playground .mh-personal-page {
    --mh-personal-padding: clamp(14px, 3.5cqw, 26px);
    --mh-feelings-gap: 14px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: var(--mh-personal-padding);
    background: var(--mh-tile);
  }
  #sunny-playground .mh-scene-art {
    --mh-art-sky: light-dark(#b9e3f6, #294459);
    --mh-art-haze: light-dark(#e9f8f8, #415d6a);
    --mh-art-far: light-dark(#c1e3c5, #395849);
    --mh-art-mid: light-dark(#a7d5aa, #3a614d);
    --mh-art-front: light-dark(#bce3a7, #34543b);
    --mh-art-cream: light-dark(#fffdf5, #d6e3eb);
    --mh-art-blue: light-dark(#8ac4e6, #7ca9d8);
    --mh-art-green: light-dark(#77bc8b, #7bb695);
    --mh-art-lilac: light-dark(#b69edc, #b59add);
    --mh-art-gold: light-dark(#f5c977, #eac177);
    --mh-art-pink: light-dark(#ebadc4, #df9ab9);
    --mh-art-peach: light-dark(#f2b391, #e6a582);
    position: absolute;
    z-index: -1;
    inset: 0;
    display: block;
    overflow: hidden;
    container-type: size;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 75% 8%, color-mix(in srgb, var(--mh-art-cream) 32%, transparent), transparent 46%),
      linear-gradient(165deg, var(--mh-art-sky), var(--mh-art-haze) 83%);
  }
  #sunny-playground .mh-scene-art.mh-scene-preview {
    position: relative;
    z-index: auto;
    inset: auto;
  }
  #sunny-playground .mh-art-bank {
    position: absolute;
    inset-block: var(--mh-bank-top) -42%;
    inset-inline-start: var(--mh-bank-left);
    width: 142%;
    border-radius: 53% 47% 0 0 / 43% 48% 0 0;
    background: linear-gradient(154deg, color-mix(in srgb, var(--mh-bank-ink) 78%, var(--mh-art-haze)), var(--mh-bank-ink) 68%);
    box-shadow: inset 0 .5cqw 0 color-mix(in srgb, var(--mh-art-haze) 29%, transparent);
    rotate: var(--mh-bank-turn);
  }
  #sunny-playground .mh-art-bank-far { --mh-bank-top: 37%; --mh-bank-left: -33%; --mh-bank-ink: var(--mh-art-far); --mh-bank-turn: 5deg; }
  #sunny-playground .mh-art-bank-mid { --mh-bank-top: 49%; --mh-bank-left: 10%; --mh-bank-ink: var(--mh-art-mid); --mh-bank-turn: -8deg; }
  #sunny-playground .mh-art-bank-front { --mh-bank-top: 70%; --mh-bank-left: -24%; --mh-bank-ink: var(--mh-art-front); --mh-bank-turn: -4deg; }

  #sunny-playground .mh-art-clouds {
    --mh-art-sky: light-dark(#b5ddf7, #344c73);
    --mh-art-haze: light-dark(#e5f2ff, #46597c);
  }
  #sunny-playground .mh-art-rainbow {
    --mh-art-sky: light-dark(#cde0f7, #3d4968);
    --mh-art-haze: light-dark(#f6eafa, #524668);
    --mh-art-front: light-dark(#cce6bb, #3d6051);
  }
  #sunny-playground .mh-art-stars {
    --mh-art-sky: light-dark(#ddd6f7, #292946);
    --mh-art-haze: light-dark(#f5e5ef, #51415e);
    --mh-art-far: light-dark(#cec5ed, #484363);
    --mh-art-mid: light-dark(#c1b8e4, #454260);
    --mh-art-front: light-dark(#d8cdef, #493e5e);
  }
  #sunny-playground .mh-art-space {
    --mh-art-sky: light-dark(#c1cef5, #212846);
    --mh-art-haze: light-dark(#e8dcf7, #403659);
  }
  #sunny-playground .mh-art-ocean {
    --mh-art-sky: light-dark(#b9e9ef, #205566);
    --mh-art-haze: light-dark(#b0e0e5, #285e68);
    --mh-art-far: light-dark(#a4d9e9, #326575);
    --mh-art-mid: light-dark(#83ced8, #2e6472);
    --mh-art-front: light-dark(#9fddcf, #365f61);
  }
  #sunny-playground .mh-art-flowers {
    --mh-art-sky: light-dark(#f8dccf, #553d50);
    --mh-art-haze: light-dark(#fcf1e1, #695354);
    --mh-art-far: light-dark(#dbe7ba, #4d5d47);
  }
  #sunny-playground .mh-art-bubbles {
    --mh-art-sky: light-dark(#c2e8f4, #2c4d68);
    --mh-art-haze: light-dark(#e9ddf6, #514767);
  }
  #sunny-playground .mh-art-confetti {
    --mh-art-sky: light-dark(#f9e2cb, #504052);
    --mh-art-haze: light-dark(#ffefd9, #665149);
  }
  #sunny-playground .mh-art-leaves {
    --mh-art-sky: light-dark(#e3edd3, #435749);
    --mh-art-haze: light-dark(#fff1d8, #5f5848);
    --mh-art-far: light-dark(#d0e2b0, #4d6045);
    --mh-art-front: light-dark(#cee3aa, #4a674b);
  }
  #sunny-playground .mh-art-snow {
    --mh-art-sky: light-dark(#c1ddf1, #3b526c);
    --mh-art-haze: light-dark(#edf7fb, #506782);
    --mh-art-far: light-dark(#d9ecf7, #546f88);
    --mh-art-mid: light-dark(#e4f3fa, #607b91);
    --mh-art-front: light-dark(#f7fcfe, #6b8398);
  }

  #sunny-playground .mh-art-detail {
    position: absolute;
    inset: var(--mh-art-y) auto auto var(--mh-art-x);
    width: var(--mh-art-size);
    aspect-ratio: 1;
    translate: -50% -50%;
    rotate: var(--mh-art-angle);
    background: var(--mh-art-ink);
  }
  #sunny-playground .mh-art-detail-cloud {
    aspect-ratio: 2.8;
    border-radius: 999px;
    background: linear-gradient(175deg, var(--mh-art-ink) 42%, color-mix(in srgb, var(--mh-art-ink) 86%, var(--mh-art-blue)));
    box-shadow: inset 0 -.28cqw .32cqw color-mix(in srgb, var(--mh-art-blue) 12%, transparent);
    filter: drop-shadow(0 .25cqw .3cqw color-mix(in srgb, var(--mh-art-sky) 36%, transparent));
  }
  #sunny-playground .mh-art-detail-cloud::before,
  #sunny-playground .mh-art-detail-cloud::after {
    content: "";
    position: absolute;
    inset: auto auto 20% 16%;
    width: 42%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: inherit;
  }
  #sunny-playground .mh-art-detail-cloud::after { inset: auto 17% 16% auto; width: 34%; }
  #sunny-playground .mh-art-detail-spark {
    clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 36%);
  }
  #sunny-playground .mh-art-detail-dot { border-radius: 50%; }
  #sunny-playground .mh-art-detail-confetto {
    aspect-ratio: 1.7;
    border-radius: 28%;
    background: linear-gradient(154deg, color-mix(in srgb, var(--mh-art-ink) 63%, var(--mh-art-cream)), var(--mh-art-ink) 72%);
    box-shadow: 0 .12cqw .35cqw color-mix(in srgb, var(--mh-art-ink) 48%, transparent);
  }
  #sunny-playground .mh-art-detail-bubble {
    border: clamp(1px, .28cqw, 3px) solid color-mix(in srgb, var(--mh-art-ink) 62%, var(--mh-art-cream));
    border-radius: 50%;
    background:
      radial-gradient(ellipse at 29% 26%, var(--mh-art-cream) 0 6%, transparent 8%),
      radial-gradient(ellipse at 71% 76%, color-mix(in srgb, var(--mh-art-cream) 54%, transparent) 0 4%, transparent 7%),
      radial-gradient(ellipse at 67% 88%, color-mix(in srgb, var(--mh-art-pink) 44%, transparent), transparent 59%),
      linear-gradient(137deg, color-mix(in srgb, var(--mh-art-cream) 63%, transparent), color-mix(in srgb, var(--mh-art-ink) 28%, transparent));
    box-shadow: inset 0 0 .55cqw color-mix(in srgb, var(--mh-art-cream) 52%, transparent);
  }
  #sunny-playground .mh-art-detail-rainbow {
    aspect-ratio: 2;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background: radial-gradient(circle farthest-side at 50% 100%, transparent 0 53%, var(--mh-art-lilac) 53.5% 58%,
      var(--mh-art-blue) 58.5% 63%, var(--mh-art-green) 63.5% 68%, var(--mh-art-gold) 68.5% 73%,
      var(--mh-art-peach) 73.5% 78%, var(--mh-art-pink) 78.5% 83%, transparent 83.5%);
  }
  #sunny-playground .mh-art-detail-moon {
    border-radius: 50%;
    background:
      radial-gradient(circle at 29% 66%, color-mix(in srgb, var(--mh-art-gold) 35%, var(--mh-art-ink)) 0 7%, transparent 8%),
      radial-gradient(circle at 43% 84%, color-mix(in srgb, var(--mh-art-gold) 28%, var(--mh-art-ink)) 0 4%, transparent 5%),
      linear-gradient(145deg, var(--mh-art-cream), var(--mh-art-ink) 75%);
    mask-image: radial-gradient(circle at 70% 30%, transparent 0 53%, #000 54%);
  }
  #sunny-playground .mh-art-detail-planet {
    border-radius: 50%;
    background:
      repeating-linear-gradient(161deg, transparent 0 24%, color-mix(in srgb, var(--mh-art-cream) 24%, transparent) 26% 32%, transparent 34% 45%),
      radial-gradient(circle at 28% 23%, color-mix(in srgb, var(--mh-art-ink) 52%, var(--mh-art-cream)), var(--mh-art-ink) 77%);
  }
  #sunny-playground .mh-art-detail-planet::after {
    content: "";
    position: absolute;
    inset: 33% -23%;
    border: clamp(1px, .42cqw, 4px) solid color-mix(in srgb, var(--mh-art-ink) 65%, var(--mh-art-cream));
    border-radius: 50%;
    rotate: -22deg;
  }
  #sunny-playground .mh-art-detail-tree {
    border-radius: 45% 55% 52% 48%;
    isolation: isolate;
    background:
      radial-gradient(ellipse at 29% 30%, color-mix(in srgb, var(--mh-art-ink) 67%, var(--mh-art-cream)) 0 11%, transparent 12%),
      radial-gradient(ellipse at 64% 27%, color-mix(in srgb, var(--mh-art-ink) 79%, var(--mh-art-cream)) 0 9%, transparent 10%),
      linear-gradient(157deg, color-mix(in srgb, var(--mh-art-ink) 77%, var(--mh-art-cream)), var(--mh-art-ink) 68%);
    box-shadow: inset 0 -.6cqw color-mix(in srgb, var(--mh-art-ink) 74%, var(--mh-art-mid));
  }
  #sunny-playground .mh-art-detail-tree::after {
    content: "";
    position: absolute;
    inset: 90% 44% -45%;
    z-index: -1;
    border-radius: 25%;
    background: linear-gradient(90deg, light-dark(#c2a284, #a58a73), light-dark(#9c8163, #806855));
  }
  #sunny-playground .mh-art-detail-fir {
    aspect-ratio: .78;
    clip-path: polygon(50% 0, 76% 39%, 66% 39%, 88% 68%, 76% 68%, 100% 92%, 57% 92%, 57% 100%, 43% 100%, 43% 92%, 0 92%, 24% 68%, 12% 68%, 34% 39%, 24% 39%);
  }
  #sunny-playground .mh-art-detail-leaf {
    aspect-ratio: 1.5;
    border-radius: 72% 6% 72% 6%;
    background: linear-gradient(155deg, color-mix(in srgb, var(--mh-art-ink) 65%, var(--mh-art-cream)), var(--mh-art-ink) 62%);
  }
  #sunny-playground .mh-art-detail-leaf::after {
    content: "";
    position: absolute;
    inset: 48% 14% auto;
    height: 8%;
    border-radius: 99px;
    background: color-mix(in srgb, var(--mh-art-ink) 67%, var(--mh-art-cream));
    rotate: -20deg;
  }
  #sunny-playground .mh-art-detail-flower {
    background:
      radial-gradient(circle at 47% 46%, var(--mh-art-cream) 0 5%, transparent 6%),
      radial-gradient(circle at 50% 50%, var(--mh-art-gold) 0 14%, transparent 16%),
      radial-gradient(circle at 50% 15%, color-mix(in srgb, var(--mh-art-cream) 55%, transparent) 0 8%, transparent 9%),
      radial-gradient(circle at 50% 22%, var(--mh-art-ink) 0 21%, transparent 23%),
      radial-gradient(circle at 22% 50%, var(--mh-art-ink) 0 21%, transparent 23%),
      radial-gradient(circle at 78% 50%, var(--mh-art-ink) 0 21%, transparent 23%),
      radial-gradient(circle at 50% 78%, var(--mh-art-ink) 0 21%, transparent 23%);
  }
  #sunny-playground .mh-art-detail-flower::after {
    content: "";
    position: absolute;
    inset: 92% 46% -41%;
    border-radius: 35%;
    background: linear-gradient(90deg, color-mix(in srgb, var(--mh-art-green) 85%, var(--mh-art-cream)), var(--mh-art-green));
  }
  #sunny-playground .mh-art-detail-fish {
    aspect-ratio: 1.85;
    border-radius: 48%;
    background:
      radial-gradient(circle at 73% 40%, light-dark(#476981, #33404f) 0 6%, transparent 7%),
      radial-gradient(ellipse at 42% 28%, color-mix(in srgb, var(--mh-art-cream) 64%, transparent) 0 10%, transparent 12%),
      linear-gradient(159deg, color-mix(in srgb, var(--mh-art-ink) 67%, var(--mh-art-cream)), var(--mh-art-ink) 64%);
  }
  #sunny-playground .mh-art-detail-fish::after {
    content: "";
    position: absolute;
    inset: 9% auto 9% -29%;
    width: 40%;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: var(--mh-art-ink);
  }
  #sunny-playground .mh-art-detail-pitch {
    --mh-art-line: color-mix(in srgb, var(--mh-art-cream) 74%, transparent);
    aspect-ratio: 2.05;
    border: clamp(1px, .3cqw, 3px) solid var(--mh-art-line);
    border-radius: .8%;
    background:
      radial-gradient(circle at 11% 50%, var(--mh-art-line) 0 .5%, transparent .7%),
      radial-gradient(circle at 89% 50%, var(--mh-art-line) 0 .5%, transparent .7%),
      radial-gradient(circle at center, var(--mh-art-line) 0 .7%, transparent 1%),
      linear-gradient(90deg, transparent 49.7%, var(--mh-art-line) 49.7% 50.3%, transparent 50.3%),
      radial-gradient(circle, transparent 0 13%, var(--mh-art-line) 13.2% 14%, transparent 14.3%),
      repeating-linear-gradient(90deg, var(--mh-art-ink) 0 12.5%, color-mix(in srgb, var(--mh-art-ink) 88%, var(--mh-art-cream)) 12.5% 25%);
  }
  #sunny-playground .mh-art-detail-pitch::before,
  #sunny-playground .mh-art-detail-pitch::after {
    content: "";
    position: absolute;
    inset: 26% auto 26% -1px;
    width: 15%;
    border: clamp(1px, .26cqw, 2.5px) solid var(--mh-art-line);
  }
  #sunny-playground .mh-art-detail-pitch::after { inset: 26% -1px 26% auto; }
  #sunny-playground .mh-art-detail-grass {
    aspect-ratio: 1.55;
    opacity: .78;
    clip-path: polygon(6% 100%, 0 37%, 29% 75%, 36% 7%, 55% 62%, 72% 18%, 75% 73%, 100% 43%, 91% 100%);
  }
  #sunny-playground .mh-art-detail-pebble {
    aspect-ratio: 2.2;
    border-radius: 54% 46% 53% 47%;
    background: linear-gradient(168deg, var(--mh-art-ink) 56%, color-mix(in srgb, var(--mh-art-ink) 74%, var(--mh-art-far)));
    box-shadow: 0 .22cqw .38cqw color-mix(in srgb, var(--mh-art-mid) 53%, transparent);
  }
  #sunny-playground .mh-art-detail-ribbon {
    aspect-ratio: 2.4;
    border: clamp(1px, .24cqw, 3px) solid transparent;
    border-block-start-color: var(--mh-art-ink);
    border-radius: 58% 42% 51% 49%;
    background: transparent;
  }
  #sunny-playground .mh-art-detail-flag {
    aspect-ratio: .75;
    background:
      linear-gradient(90deg, transparent 0 13%, var(--mh-art-cream) 13% 22%, transparent 22%),
      linear-gradient(160deg, var(--mh-art-ink) 0 38%, transparent 39%);
  }
  #sunny-playground .mh-art-detail-ball {
    box-shadow: 0 .3cqw .3cqw color-mix(in srgb, var(--mh-art-green) 48%, transparent);
    --mh-ball-patch: light-dark(#516775, #374556);
    border: clamp(1px, .18cqw, 2px) solid color-mix(in srgb, var(--mh-ball-patch) 35%, var(--mh-art-cream));
    border-radius: 50%;
    background:
      radial-gradient(circle at 20% 20%, var(--mh-ball-patch) 0 12%, transparent 14%),
      radial-gradient(circle at 88% 33%, var(--mh-ball-patch) 0 13%, transparent 15%),
      radial-gradient(circle at 35% 89%, var(--mh-ball-patch) 0 12%, transparent 14%),
      var(--mh-art-cream);
  }
  #sunny-playground .mh-art-detail-ball::after {
    content: "";
    position: absolute;
    inset: 28%;
    background: var(--mh-ball-patch);
    clip-path: polygon(50% 0, 98% 36%, 81% 94%, 20% 94%, 2% 36%);
  }
  #sunny-playground .mh-art-detail-comet {
    aspect-ratio: 4.6;
    border-radius: 100% 20% 20% 100%;
    background: linear-gradient(90deg, transparent, var(--mh-art-ink));
  }
  #sunny-playground .mh-art-detail-comet::after {
    content: "";
    position: absolute;
    inset: 50% -3% auto auto;
    width: 27%;
    aspect-ratio: 1;
    translate: 0 -50%;
    border-radius: 50%;
    background: var(--mh-art-cream);
  }
  #sunny-playground .mh-art-detail-shell {
    aspect-ratio: 1.32;
    border-radius: 50% 50% 30% 30%;
    clip-path: polygon(0 0, 100% 0, 89% 61%, 64% 100%, 36% 100%, 11% 61%);
    background: repeating-conic-gradient(from 302deg at 50% 105%,
      var(--mh-art-ink) 0 12deg, color-mix(in srgb, var(--mh-art-ink) 68%, var(--mh-art-cream)) 12deg 17deg);
  }
  #sunny-playground .mh-art-detail-acorn {
    aspect-ratio: .85;
    border-radius: 46% 46% 52% 52%;
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--mh-art-ink) 68%, #514536) 0 34%, var(--mh-art-ink) 35%);
  }
  #sunny-playground .mh-art-detail-acorn::before {
    content: "";
    position: absolute;
    inset: -12% 43% 87%;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mh-art-ink) 68%, #514536);
    rotate: 18deg;
  }
  #sunny-playground .mh-art-detail-bird {
    aspect-ratio: 2.8;
    background: transparent;
  }
  #sunny-playground .mh-art-detail-bird::before,
  #sunny-playground .mh-art-detail-bird::after {
    content: "";
    position: absolute;
    inset: 12% 50% 13% 0;
    border-block-start: clamp(1px, .26cqw, 3px) solid var(--mh-art-ink);
    border-radius: 65% 65% 0 0;
    rotate: 17deg;
  }
  #sunny-playground .mh-art-detail-bird::after { inset: 12% 0 13% 50%; rotate: -17deg; }
  #sunny-playground .mh-art-detail-butterfly {
    aspect-ratio: 1.24;
    background:
      radial-gradient(ellipse at 22% 28%, color-mix(in srgb, var(--mh-art-ink) 48%, var(--mh-art-cream)) 0 8%, transparent 10%),
      radial-gradient(ellipse at 77% 28%, color-mix(in srgb, var(--mh-art-ink) 48%, var(--mh-art-cream)) 0 8%, transparent 10%),
      radial-gradient(ellipse at 25% 34%, var(--mh-art-ink) 0 21%, transparent 23%),
      radial-gradient(ellipse at 75% 34%, var(--mh-art-ink) 0 21%, transparent 23%),
      radial-gradient(ellipse at 32% 69%, color-mix(in srgb, var(--mh-art-ink) 76%, var(--mh-art-lilac)) 0 16%, transparent 18%),
      radial-gradient(ellipse at 68% 69%, color-mix(in srgb, var(--mh-art-ink) 76%, var(--mh-art-lilac)) 0 16%, transparent 18%);
  }
  #sunny-playground .mh-art-detail-stardust {
    aspect-ratio: 1.6;
    background:
      radial-gradient(circle at 17% 27%, var(--mh-art-cream) 0 4%, transparent 5%),
      radial-gradient(circle at 37% 71%, var(--mh-art-ink) 0 5%, transparent 6%),
      radial-gradient(circle at 63% 24%, var(--mh-art-ink) 0 3%, transparent 4%),
      radial-gradient(circle at 78% 60%, var(--mh-art-cream) 0 5%, transparent 6%),
      radial-gradient(circle at 92% 30%, var(--mh-art-cream) 0 3%, transparent 4%);
  }
  #sunny-playground .mh-art-detail-rocket {
    aspect-ratio: .66;
    border-radius: 52% 52% 30% 30%;
    isolation: isolate;
    background:
      radial-gradient(circle at 50% 39%, var(--mh-art-blue) 0 17%, var(--mh-art-lilac) 18% 20%, transparent 21%),
      linear-gradient(180deg, var(--mh-art-ink) 0 22%, var(--mh-art-cream) 24% 83%, var(--mh-art-lilac) 84%);
  }
  #sunny-playground .mh-art-detail-rocket::before,
  #sunny-playground .mh-art-detail-rocket::after { content: ""; position: absolute; z-index: -1; }
  #sunny-playground .mh-art-detail-rocket::before {
    inset: 56% -26% 6%;
    clip-path: polygon(34% 0, 66% 0, 100% 100%, 0 100%);
    background: var(--mh-art-ink);
  }
  #sunny-playground .mh-art-detail-rocket::after {
    inset: 90% 35% -30%;
    border-radius: 20% 20% 60% 60%;
    background: linear-gradient(var(--mh-art-gold), transparent);
  }
  #sunny-playground .mh-art-detail-coral {
    aspect-ratio: .78;
    clip-path: polygon(42% 100%, 42% 75%, 19% 68%, 4% 41%, 10% 34%, 21% 39%, 30% 58%, 45% 62%,
      42% 16%, 48% 5%, 60% 9%, 63% 53%, 77% 44%, 82% 23%, 94% 19%, 99% 29%, 90% 56%, 64% 73%, 64% 100%);
    background: linear-gradient(150deg, color-mix(in srgb, var(--mh-art-ink) 66%, var(--mh-art-cream)), var(--mh-art-ink));
  }
  #sunny-playground .mh-art-detail-snowman {
    aspect-ratio: .75;
    border-radius: 51% 51% 47% 47% / 62% 62% 40% 40%;
    background:
      radial-gradient(circle at 46% 53%, var(--mh-art-lilac) 0 4%, transparent 5%),
      radial-gradient(circle at 46% 69%, var(--mh-art-lilac) 0 4%, transparent 5%),
      linear-gradient(167deg, var(--mh-art-ink) 0 25%, var(--mh-art-cream) 26% 76%, color-mix(in srgb, var(--mh-art-cream) 72%, var(--mh-art-blue)));
  }
  #sunny-playground .mh-art-detail-snowman::before {
    content: "";
    position: absolute;
    inset: -39% 11% auto;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      radial-gradient(circle at 33% 40%, #4c5c6e 0 7%, transparent 8%),
      radial-gradient(circle at 68% 40%, #4c5c6e 0 7%, transparent 8%),
      radial-gradient(ellipse at 57% 58%, var(--mh-art-peach) 0 9%, transparent 11%),
      var(--mh-art-cream);
  }
  #sunny-playground .mh-art-detail-flake {
    background: transparent;
  }
  #sunny-playground .mh-art-garden {
    --mh-art-sky: light-dark(#bce7f7, #29485b);
    --mh-art-far: light-dark(#b8dfbe, #395c4b);
    --mh-art-front: light-dark(#b8dca3, #365438);
  }
  #sunny-playground .mh-art-football {
    --mh-art-sky: light-dark(#c3e5f5, #2c485c);
    --mh-art-haze: light-dark(#e5f1d9, #425a50);
    --mh-art-mid: light-dark(#91c295, #345641);
    --mh-art-front: light-dark(#aed296, #395738);
  }
  #sunny-playground .mh-art-detail-sun {
    border-radius: 50%;
    background:
      radial-gradient(ellipse at 36% 43%, var(--mh-sun-features) 0 3.5%, transparent 4%),
      radial-gradient(ellipse at 64% 43%, var(--mh-sun-features) 0 3.5%, transparent 4%),
      radial-gradient(circle at 24% 59%, var(--mh-sun-cheeks) 0 6%, transparent 7%),
      radial-gradient(circle at 76% 59%, var(--mh-sun-cheeks) 0 6%, transparent 7%),
      radial-gradient(circle at 31% 25%, color-mix(in srgb, var(--mh-art-cream) 70%, transparent) 0 7%, transparent 9%),
      linear-gradient(145deg, color-mix(in srgb, var(--mh-art-gold) 62%, var(--mh-art-cream)), var(--mh-art-gold));
    box-shadow: inset 0 -.55cqw color-mix(in srgb, var(--mh-art-peach) 25%, transparent);
  }
  #sunny-playground .mh-art-detail-sun::before {
    content: "";
    position: absolute;
    inset: -25%;
    background: repeating-conic-gradient(from 6deg, var(--mh-art-gold) 0 5deg, transparent 5deg 30deg);
    mask-image: radial-gradient(circle, transparent 0 56%, #000 57% 65%, transparent 66%);
  }
  #sunny-playground .mh-art-detail-flower::before {
    content: "";
    position: absolute;
    inset: 99% 14% -39%;
    background: radial-gradient(ellipse at 24% 39%, var(--mh-art-green) 0 25%, transparent 28%),
      radial-gradient(ellipse at 76% 65%, color-mix(in srgb, var(--mh-art-green) 82%, var(--mh-art-cream)) 0 24%, transparent 27%);
  }
  #sunny-playground .mh-art-detail-butterfly::before {
    content: "";
    position: absolute;
    inset: 26% 45% 17%;
    border-radius: 50%;
    background: light-dark(#695872, #c4a9d1);
  }
  #sunny-playground .mh-art-detail-butterfly::after {
    content: "";
    position: absolute;
    inset: 11% 39% 63%;
    border-inline: max(1px, .13cqw) solid light-dark(#695872, #c4a9d1);
    border-radius: 55% 55% 0 0;
  }
  #sunny-playground .mh-art-detail-bee {
    aspect-ratio: 1.5;
    border-radius: 48%;
    background: repeating-linear-gradient(90deg, var(--mh-art-gold) 0 27%, light-dark(#786545, #c5b58e) 28% 39%, var(--mh-art-gold) 40% 63%);
  }
  #sunny-playground .mh-art-detail-bee::before {
    content: "";
    position: absolute;
    inset: -54% 13% 35%;
    background: radial-gradient(ellipse at 25% 56%, var(--mh-art-cream) 0 34%, transparent 37%),
      radial-gradient(ellipse at 75% 56%, var(--mh-art-cream) 0 34%, transparent 37%);
  }
  #sunny-playground .mh-art-detail-bee::after {
    content: "";
    position: absolute;
    inset: 27% 13% 59% 78%;
    border-radius: 50%;
    background: light-dark(#625145, #524957);
  }
  #sunny-playground .mh-art-detail-bubble::after {
    content: "";
    position: absolute;
    inset: 8% 11% 23% 8%;
    border: max(1px, .12cqw) solid transparent;
    border-block-start-color: color-mix(in srgb, var(--mh-art-cream) 82%, transparent);
    border-inline-start-color: color-mix(in srgb, var(--mh-art-cream) 35%, transparent);
    border-radius: 50%;
    rotate: -19deg;
  }
  #sunny-playground .mh-art-detail-ribbon::after {
    content: "";
    position: absolute;
    inset: 44% 8% -44% 24%;
    border-block-end: max(1px, .22cqw) solid var(--mh-art-ink);
    border-radius: 0 0 55% 55%;
  }
  #sunny-playground .mh-art-detail-leaf::before {
    content: "";
    position: absolute;
    inset: 20% 24%;
    border-radius: 75% 0 75% 0;
    background: repeating-linear-gradient(115deg, transparent 0 22%, color-mix(in srgb, var(--mh-art-cream) 35%, transparent) 23% 26%, transparent 27% 42%);
  }
  #sunny-playground .mh-art-detail-seaweed {
    aspect-ratio: .32;
    background: linear-gradient(90deg, transparent 43%, var(--mh-art-green) 44% 55%, transparent 56%);
  }
  #sunny-playground .mh-art-detail-seaweed::before,
  #sunny-playground .mh-art-detail-seaweed::after {
    content: "";
    position: absolute;
    top: 18%;
    left: -12%;
    width: 65%;
    height: 47%;
    border-radius: 88% 7% 88% 7%;
    background: linear-gradient(135deg, color-mix(in srgb, var(--mh-art-green) 70%, var(--mh-art-cream)), var(--mh-art-green) 72%);
    transform-origin: 90% 92%;
    rotate: -17deg;
  }
  #sunny-playground .mh-art-detail-seaweed::after {
    top: 39%;
    left: 47%;
    width: 62%;
    height: 45%;
    border-radius: 7% 88% 7% 88%;
    transform-origin: 10% 92%;
    rotate: 17deg;
  }
  #sunny-playground .mh-art-detail-ripple {
    aspect-ratio: 6;
    background: transparent;
    border-block-start: max(1px, .19cqw) solid color-mix(in srgb, var(--mh-art-cream) 65%, transparent);
    border-radius: 50%;
  }
  #sunny-playground .mh-art-detail-ripple::after {
    content: "";
    position: absolute;
    inset: 20% 15% 0 30%;
    border-block-start: max(1px, .15cqw) solid color-mix(in srgb, var(--mh-art-cream) 45%, transparent);
    border-radius: 50%;
  }
  #sunny-playground .mh-art-detail-constellation {
    aspect-ratio: 1.7;
    background: radial-gradient(circle at 8% 71%, var(--mh-art-cream) 0 2.6%, transparent 3.2%),
      radial-gradient(circle at 37% 22%, var(--mh-art-ink) 0 2.7%, transparent 3.3%),
      radial-gradient(circle at 67% 56%, var(--mh-art-cream) 0 2.5%, transparent 3.1%),
      radial-gradient(circle at 93% 14%, var(--mh-art-ink) 0 2.5%, transparent 3.1%);
  }
  #sunny-playground .mh-art-detail-constellation::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .42;
    background: var(--mh-art-ink);
    clip-path: polygon(8% 70%, 37% 21%, 67% 55%, 92% 13%, 94% 15%, 67% 58%, 37% 24%, 9% 73%);
  }
  #sunny-playground .mh-art-detail-fir::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(165deg, transparent 0 18%,
      var(--mh-art-cream) 19% 25%, transparent 26% 43%,
      var(--mh-art-cream) 44% 50%, transparent 51% 68%,
      var(--mh-art-cream) 69% 75%, transparent 76%);
    opacity: .83;
  }
  #sunny-playground .mh-art-detail-flake::after {
    content: "";
    position: absolute;
    inset: 32%;
    background: var(--mh-art-ink);
    opacity: .55;
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  }
  #sunny-playground .mh-art-detail-sun::after {
    content: "";
    position: absolute;
    inset: 54% auto auto 40%;
    width: 20%;
    height: 13%;
    border: max(1px, .18cqw) solid var(--mh-sun-features);
    border-block-start: 0;
    border-radius: 0 0 50% 50%;
  }
  #sunny-playground .mh-art-detail-fish::before {
    content: "";
    position: absolute;
    inset: -20% 37% 76% 27%;
    clip-path: polygon(28% 0, 100% 100%, 0 100%);
    background: color-mix(in srgb, var(--mh-art-ink) 86%, var(--mh-art-cream));
  }
  #sunny-playground .mh-ice-arm {
    position: absolute;
    inset: 4% auto 50% 48.5%;
    width: 3%;
    border-radius: 999px;
    background: var(--mh-art-ink);
    transform-origin: 50% 100%;
    rotate: var(--mh-ice-turn);
  }
  #sunny-playground .mh-ice-arm::before,
  #sunny-playground .mh-ice-arm::after {
    content: "";
    position: absolute;
    top: 22%;
    right: 50%;
    width: 390%;
    height: 6.5%;
    border-radius: 999px;
    background: var(--mh-art-ink);
    transform-origin: 100% 50%;
    rotate: 45deg;
  }
  #sunny-playground .mh-ice-arm::after {
    right: auto;
    left: 50%;
    transform-origin: 0 50%;
    rotate: -45deg;
  }
  #sunny-playground .mh-art-detail-starfish {
    clip-path: polygon(50% 0, 62% 33%, 98% 36%, 71% 58%, 80% 96%, 50% 74%, 20% 96%, 29% 58%, 2% 36%, 38% 33%);
    background: radial-gradient(circle at 41% 43%, var(--mh-art-cream) 0 2%, transparent 3%),
      radial-gradient(circle at 61% 51%, var(--mh-art-cream) 0 2%, transparent 3%),
      radial-gradient(circle at 49% 64%, var(--mh-art-cream) 0 2%, transparent 3%),
      linear-gradient(140deg, color-mix(in srgb, var(--mh-art-ink) 68%, var(--mh-art-cream)), var(--mh-art-ink));
  }
  #sunny-playground .mh-art-detail-ladybird {
    aspect-ratio: .82;
    border-radius: 46% 46% 48% 48%;
    background: radial-gradient(circle at 26% 39%, var(--mh-sun-features) 0 7%, transparent 8%),
      radial-gradient(circle at 74% 39%, var(--mh-sun-features) 0 7%, transparent 8%),
      radial-gradient(circle at 26% 71%, var(--mh-sun-features) 0 6%, transparent 7%),
      radial-gradient(circle at 74% 71%, var(--mh-sun-features) 0 6%, transparent 7%),
      linear-gradient(140deg, color-mix(in srgb, var(--mh-art-ink) 72%, var(--mh-art-cream)), var(--mh-art-ink));
  }
  #sunny-playground .mh-art-detail-ladybird::before {
    content: "";
    position: absolute;
    inset: -7% 17% 73%;
    border-radius: 55% 55% 25% 25%;
    background: var(--mh-sun-features);
  }
  #sunny-playground .mh-art-detail-ladybird::after {
    content: "";
    position: absolute;
    inset: 15% 47% 5%;
    border-radius: 999px;
    background: var(--mh-sun-features);
  }
  #sunny-playground .mh-art-detail-footprints {
    aspect-ratio: 2.4;
    background: radial-gradient(ellipse at 14% 29%, var(--mh-art-ink) 0 9%, transparent 12%),
      radial-gradient(ellipse at 37% 69%, var(--mh-art-ink) 0 9%, transparent 12%),
      radial-gradient(ellipse at 62% 29%, var(--mh-art-ink) 0 9%, transparent 12%),
      radial-gradient(ellipse at 86% 69%, var(--mh-art-ink) 0 9%, transparent 12%);
    opacity: .55;
  }
  #sunny-playground .mh-art-confetti .mh-art-detail-ribbon { border-width: max(1px, .28cqw); }
  #sunny-playground .mh-art-confetti .mh-art-detail-ribbon::after { border-block-end-width: max(1px, .28cqw); }
  #sunny-playground .mh-personal-top {
    display: flex;
    flex: none;
    flex-direction: column;
    min-height: calc(var(--mh-tablet-height) / 3 - var(--mh-personal-padding) - var(--mh-feelings-gap));
  }
  #sunny-playground .mh-personal {
    flex: 1;
    padding: 0 0 12px;
    background: none;
  }
  #sunny-playground .mh-trial-banner + .mh-personal .mh-personal-art {
    width: clamp(82px, 17cqw, 136px);
    font-size: clamp(42px, 10cqw, 74px);
  }
  #sunny-playground .mh-personal h2 {
    position: relative;
    font-family: var(--mh-heading-font);
    width: fit-content;
    margin-top: 8px;
    padding: 12px 16px;
    border-radius: 21px;
    background: var(--mh-panel);
    filter: drop-shadow(0 2px 1px var(--mh-button-shadow));
    font-size: clamp(20px, 4cqw, 33px);
  }
  #sunny-playground .mh-personal h2::before {
    content: "";
    position: absolute;
    inset: 50% auto auto -8px;
    translate: 0 -50%;
    border-block: 6px solid transparent;
    border-right: 9px solid var(--mh-panel);
  }
  #sunny-playground .mh-zones {
    flex: 1;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(178px, 1fr);
    margin-top: var(--mh-feelings-gap);
    padding-bottom: 7px;
  }
  #sunny-playground .mh-zone-slot {
    display: grid;
    grid-column: span var(--mh-zone-span);
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    container-type: size;
  }
  #sunny-playground .mh-zones .mh-zone {
    --mh-feeling-size: min(100cqw, 100cqh);
    --mh-feeling-icon-scale: .40;
    --mh-feeling-icon: clamp(32px, calc(var(--mh-feeling-size) * var(--mh-feeling-icon-scale)), 132px);
    --mh-feeling-label: clamp(16px, min(10cqw, 15cqh), 36px);
    --mh-shape-outline: var(--mh-sticker-paper);
    --mh-shape-stroke: clamp(4px, 2.65cqh, 6px);
    --mh-shape-fill: linear-gradient(155deg, color-mix(in srgb, var(--mh-zone) 84%, var(--mh-panel)), var(--mh-zone) 78%);
    position: relative;
    isolation: isolate;
    min-width: 0;
    min-height: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    filter: var(--mh-sticker-shadow);
    font-family: "Fredoka", ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
    font-weight: 600;
  }
  #sunny-playground .mh-zone:is(.mh-circle, .mh-oval) {
    --mh-feeling-size: min(76cqw, 100cqh);
    place-self: center;
    width: 100%;
    height: min(100%, 76cqw);
  }
  #sunny-playground .mh-zone.mh-custom-zone {
    --mh-shape-fill: var(--mh-zone);
    color: var(--mh-zone-ink);
  }
  #sunny-playground .mh-zone:is(.mh-leaf, .mh-cloud-shape, .mh-shield, .mh-arch) { --mh-feeling-icon-scale: .30; }
  #sunny-playground .mh-zone[data-long-label] {
    --mh-feeling-icon-scale: .27;
    --mh-feeling-label: clamp(13px, min(7cqw, 7.5cqh), 24px);
  }
  #sunny-playground .mh-zone[data-long-label]:is(.mh-leaf, .mh-cloud-shape, .mh-shield, .mh-arch) { --mh-feeling-icon-scale: .21; }
  #sunny-playground .mh-zone .mh-shape-content { gap: clamp(4px, 3cqh, 12px); }
  #sunny-playground .mh-zone-label {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: var(--mh-feeling-label);
    line-height: 1.15;
    text-align: center;
  }
  #sunny-playground .mh-actions:has(.mh-unsure) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    align-self: center;
    width: min(100%, 464px);
    gap: 10px;
  }
  #sunny-playground .mh-symbol {
    width: 49px;
    height: 49px;
    background: var(--mh-panel);
    font-size: 29px;
  }
  #sunny-playground .mh-setup-header {
    --mh-portrait-slot: clamp(110px, 12cqw, 150px);
    flex: none;
    height: clamp(172px, 24cqh, 190px);
    grid-template: auto minmax(0, 1fr) / minmax(0, 1fr) var(--mh-portrait-slot) minmax(0, 1fr) auto;
    align-items: center;
    padding-block: 16px;
    row-gap: 12px;
    column-gap: 14px;
    border: 2px solid var(--mh-cloud);
    background: color-mix(in srgb, var(--mh-scene-sky) 61%, var(--mh-panel));
  }
  #sunny-playground .mh-setup-step-nav { grid-area: 1 / 1; display: flex; align-items: center; gap: 14px; min-width: 0; }
  #sunny-playground .mh-setup-back-slot { width: 74px; flex: none; }
  #sunny-playground .mh-setup-header > .mh-setup-nav { grid-area: 1 / 4; justify-self: stretch; justify-content: flex-end; flex-wrap: nowrap; }
  #sunny-playground .mh-setup-header .mh-setup-nav > [data-action="roster"] { flex: 0 0 110px; background: transparent; border-color: transparent; box-shadow: none; font-size: 14px; text-decoration: underline; text-underline-offset: .22em; }
  #sunny-playground .mh-setup-header > .mh-setup-preview { grid-area: 1 / 3 / 3 / 4; width: 100%; height: 100%; min-height: 0; }
  #sunny-playground .mh-setup-header > h1 { grid-area: 2 / 1; align-self: stretch; display: flex; align-items: center; min-width: 0; }
  #sunny-playground .mh-preview-portrait { grid-area: 1 / 2 / 3 / 3; display: grid; place-items: center; min-width: 0; height: 100%; }
  #sunny-playground .mh-setup-preview[data-empty] { border-color: transparent; box-shadow: none; }
  #sunny-playground .mh-preview-background { position: absolute; inset: 0; }
  #sunny-playground .mh-preview-design { position: relative; display: flex; justify-content: center; align-items: center; gap: 20px; width: 90%; height: 100%; min-width: 0; }
  #sunny-playground .mh-preview-portrait .mh-preview-avatar { position: relative; isolation: isolate; display: grid; place-items: center; flex: none; width: calc(var(--mh-portrait-slot) * .88); height: calc(var(--mh-portrait-slot) * .88); min-height: 0; --mh-shape-outline: var(--mh-sticker-paper); --mh-shape-stroke: 4px; transform: rotate(-7deg); filter: var(--mh-sticker-shadow); }
  #sunny-playground .mh-preview-portrait .mh-preview-avatar.mh-oval { width: calc(var(--mh-portrait-slot) * .94); height: calc(var(--mh-portrait-slot) * .94 / 1.35); }
  #sunny-playground .mh-preview-portrait:not([data-colour-ready]) .mh-preview-avatar { --mh-tile: #fff; }
  #sunny-playground .mh-preview-animal { font: 60px/1.2 "Apple Color Emoji", "Segoe UI Emoji", sans-serif; transform: translate(var(--mh-animal-x, 0), var(--mh-animal-y, -.06em)); }
  #sunny-playground .mh-preview-name { flex: 1; min-width: 0; max-height: 100%; font-size: 38px; line-height: 1.2; overflow-wrap: anywhere; text-align: center; }
  #sunny-playground .mh-setup-complete-slot { grid-area: 2 / 4; width: 110px; align-self: start; justify-self: end; }
  #sunny-playground .mh-setup-complete-slot button { width: 100%; font-size: 14px; }
  #sunny-playground :is(#sunny-pin-heading, #sunny-action-title, #sunny-setup-title):focus { outline: none; }
  #sunny-playground .mh-preview-arrival,
  #sunny-playground [data-added="shape"] > .mh-preview-avatar,
  #sunny-playground [data-added="font"] .mh-pupil-label,
  #sunny-playground [data-added="animal"] .mh-preview-animal { animation: mh-preview-appear 220ms ease-out both; }
  @keyframes mh-preview-appear { from { opacity: 0; scale: .86; } to { opacity: 1; scale: 1; } }
  #sunny-playground .mh-setup-header h1 { font-size: clamp(28px, 3.4cqw, 42px); }
  #sunny-playground .mh-setup-page {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: linear-gradient(var(--mh-panel), color-mix(in srgb, var(--mh-hero) 61%, var(--mh-panel)));
  }
  #sunny-playground .mh-setup-page > .mh-grid {
    flex: 1 0 auto;
    grid-auto-rows: minmax(var(--mh-choice-row, 104px), 1fr);
    margin: 0;
  }
  #sunny-playground .mh-choice {
    border: 2px solid var(--mh-panel);
    box-shadow: var(--mh-lift);
  }
  #sunny-playground .mh-choice[data-current="true"] { border-color: var(--mh-moss); }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    #sunny-playground .mh-stepping-stones .mh-name:not(:disabled),
    #sunny-playground .mh-choice,
    #sunny-playground .mh-zone,
    #sunny-playground .mh-talk { transition: translate 120ms ease; }
    #sunny-playground .mh-stepping-stones .mh-name:not(:disabled):hover,
    #sunny-playground .mh-choice:hover,
    #sunny-playground .mh-zone:hover,
    #sunny-playground .mh-talk:hover { translate: 0 -2px; }
  }
  #sunny-playground .mh-stepping-stones .mh-name:not(:disabled):active,
  #sunny-playground .mh-choice:active,
  #sunny-playground .mh-zone:active,
  #sunny-playground .mh-talk:active { translate: 0 1px; }
  @container mh-tablet-app (max-width: 510px) {
    #sunny-playground .mh-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #sunny-playground .mh-zone-slot { grid-column: auto; }
    #sunny-playground .mh-zone-slot:last-child:nth-child(odd) { grid-column: 1 / -1; }
    #sunny-playground .mh-cloud-small { opacity: .64; }
    #sunny-playground .mh-cloud-wide { inset-block-start: 142px; }
  }
  #sunny-playground .mh-cut-shape {
    --mh-shape-outline: var(--mh-panel);
    --mh-shape-stroke: 2px;
    isolation: isolate;
  }
  #sunny-playground .mh-cut-shape:is(.mh-name, .mh-zone, .mh-custom-preview-sample, .mh-sample) {
    position: relative;
    border-style: none;
    background: transparent;
    box-shadow: none;
  }
  #sunny-playground :is(.mh-stepping-stones .mh-name, .mh-personal-art) {
    --mh-sticker-colour: var(--mh-stone-surface, var(--mh-tile));
    --mh-shape-fill: linear-gradient(155deg, color-mix(in srgb, var(--mh-sticker-colour) 77%, var(--mh-panel)), var(--mh-sticker-colour) 78%);
  }
  #sunny-playground .mh-cut-shape::before,
  #sunny-playground .mh-cut-shape::after,
  #sunny-playground :is(.mh-stepping-stones .mh-name, .mh-zones .mh-zone, .mh-personal-art)::before,
  #sunny-playground :is(.mh-stepping-stones .mh-name, .mh-zones .mh-zone, .mh-personal-art)::after {
    content: "";
    position: absolute;
    z-index: -1;
    clip-path: var(--mh-shape-cut, none);
    pointer-events: none;
  }
  #sunny-playground :is(.mh-stepping-stones .mh-name, .mh-zones .mh-zone, .mh-personal-art)::before,
  #sunny-playground :is(.mh-stepping-stones .mh-name, .mh-zones .mh-zone, .mh-personal-art)::after { border-radius: inherit; }
  #sunny-playground .mh-cut-shape::before {
    box-sizing: border-box;
    padding-top: var(--mh-shape-stroke);
  }
  #sunny-playground .mh-cut-shape::before,
  #sunny-playground :is(.mh-stepping-stones .mh-name, .mh-zones .mh-zone, .mh-personal-art)::before {
    inset: 0;
    background: var(--mh-shape-outline);
  }
  #sunny-playground .mh-cut-shape::after,
  #sunny-playground :is(.mh-stepping-stones .mh-name, .mh-zones .mh-zone, .mh-personal-art)::after {
    inset: var(--mh-shape-stroke);
    background: var(--mh-shape-fill);
  }
  #sunny-playground .mh-cut-shape[data-even-border]::after {
    inset: 0;
    clip-path: var(--mh-shape-inner-cut);
  }
  #sunny-playground :is(.mh-stepping-stones .mh-name, .mh-zones .mh-zone, .mh-personal-art).mh-rounded {
    border-radius: clamp(14px, 19cqh, 28px);
  }
  #sunny-playground :is(.mh-stepping-stones .mh-name, .mh-zones .mh-zone, .mh-personal-art).mh-soft-square {
    border-radius: clamp(8px, 10cqh, 16px);
  }
  #sunny-playground :is(.mh-stepping-stones .mh-name, .mh-zones .mh-zone, .mh-personal-art):not(.mh-cut-shape)::before {
    content: none;
  }
  #sunny-playground :is(.mh-stepping-stones .mh-name, .mh-zones .mh-zone, .mh-personal-art):not(.mh-cut-shape)::after {
    inset: 0;
    border: var(--mh-shape-stroke) solid var(--mh-shape-outline);
    background-clip: padding-box;
  }
  #sunny-playground .mh-sample.mh-cut-shape {
    --mh-shape-outline: var(--mh-line);
    --mh-shape-stroke: 1px;
    --mh-shape-fill: linear-gradient(150deg, color-mix(in srgb, var(--mh-hero) 65%, var(--mh-panel)), var(--mh-hero));
  }
  #sunny-playground .mh-badge-preview.mh-cut-shape { --mh-shape-fill: var(--mh-tile); }
  #sunny-playground .mh-custom-preview-sample.mh-cut-shape { --mh-shape-fill: var(--mh-zone); }
  #sunny-playground [data-bright-shapes] :is(
    .mh-name:not(:disabled), .mh-personal-art, .mh-zone:not(.mh-custom-zone), .mh-sample
  )::after { filter: saturate(2.1); }
  #sunny-playground [data-bright-shapes] .mh-colour-swatch { filter: saturate(2.1); }
  #sunny-playground [data-bright-shapes] .mh-badge-preview:not(.mh-cut-shape) {
    position: relative;
    isolation: isolate;
    background: transparent;
  }
  #sunny-playground [data-bright-shapes] .mh-badge-preview:not(.mh-cut-shape)::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: var(--mh-tile);
  }
  /* The middle tracks keep the contents clear of curved edges, points and cutouts. */
  #sunny-playground .mh-shape-layout {
    display: grid;
    grid-template-columns: var(--mh-shape-columns, 1fr minmax(0, 12fr) 1fr);
    grid-template-rows: var(--mh-shape-rows, 1fr 10fr 1fr);
    align-content: stretch;
    justify-items: stretch;
    gap: 0;
    padding: 3px;
  }
  #sunny-playground .mh-shape-content {
    grid-area: 2 / 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    text-align: center;
  }
  #sunny-playground .mh-shape-content > span:not(.mh-symbol) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  #sunny-playground :is(.mh-badge-preview, .mh-custom-preview-sample) .mh-shape-content {
    flex-direction: row;
    gap: 6px;
  }
  #sunny-playground .mh-badge-preview:is(.mh-circle, .mh-soft-square) .mh-shape-content {
    flex-direction: column;
    gap: 0;
  }
  #sunny-playground .mh-preview-portrait .mh-preview-avatar .mh-shape-content { min-height: 0; gap: 8px; }
  #sunny-playground .mh-preview-portrait .mh-preview-avatar:is(.mh-circle, .mh-soft-square) .mh-shape-content { gap: 0; line-height: 1; }
  #sunny-playground .mh-shape-layout:is(.mh-circle, .mh-oval, .mh-drop, .mh-shield, .mh-arch, .mh-hexagon) {
    --mh-shape-columns: 1fr minmax(0, 4fr) 1fr;
  }
  #sunny-playground .mh-shape-layout:is(.mh-circle, .mh-oval, .mh-drop) { --mh-shape-rows: 1fr 4fr 1fr; }
  #sunny-playground .mh-shape-layout.mh-shield { --mh-shape-rows: 1fr 5fr 2fr; }
  #sunny-playground .mh-shape-layout.mh-arch { --mh-shape-rows: 2fr 5fr 1fr; }
  #sunny-playground .mh-shape-layout.mh-leaf {
    --mh-shape-columns: 1fr minmax(0, 3fr) 1fr;
    --mh-shape-rows: 1fr 2fr 1fr;
  }
  #sunny-playground .mh-shape-layout.mh-tag { --mh-shape-columns: 1fr minmax(0, 7fr) 2.5fr; }
  #sunny-playground .mh-shape-layout.mh-ticket { --mh-shape-columns: 1fr minmax(0, 8fr) 1fr; }
  #sunny-playground .mh-preview-portrait .mh-preview-avatar { --mh-shape-rows: 1px minmax(0, 1fr) 1px; }
  #sunny-playground .mh-shape-layout.mh-cloud-shape {
    --mh-shape-columns: 1fr minmax(0, 3fr) 1fr;
    --mh-shape-rows: 2fr 5fr 1.5fr;
  }
  #sunny-playground .mh-zone .mh-symbol {
    width: var(--mh-feeling-icon);
    height: var(--mh-feeling-icon);
    font-size: calc(var(--mh-feeling-icon) * .76);
  }
  #sunny-playground .mh-symbol-glyph {
    display: block;
    line-height: 1;
    translate: 0 -.025em;
  }
  #sunny-playground .mh-zone[data-zone="Blue"] .mh-symbol-glyph { translate: -.02em -.025em; }
  #sunny-playground .mh-settings-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #sunny-playground .mh-settings-group[data-settings-panel="pupil"] { gap: 8px; }
  #sunny-playground .mh-settings-group[data-settings-panel="pupil"] .mh-profile-settings { gap: 4px; }
  #sunny-playground .mh-settings-group[data-settings-panel="pupil"] .mh-settings-section { padding-block: 6px; }
  #sunny-playground .mh-settings-group[data-settings-panel="pupil"] .mh-settings-section > :is(.mh-form, .mh-profile-settings) { margin-top: 6px; }
  #sunny-playground .mh-custom-settings { gap: 7px; }
  #sunny-playground .mh-date-status { display: grid; gap: 1px; min-width: 0; }
  #sunny-playground .mh-save-state { color: var(--mh-soft); font-size: 11px; font-weight: 500; line-height: 1.15; }
  #sunny-playground .mh-save-state[data-state="error"] { color: light-dark(#a32038, #ffb9c7); }
  #sunny-playground .mh-save-state .mh-quiet { min-height: 24px; padding: 2px 6px; }
  #sunny-playground .mh-records-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
  #sunny-playground .mh-records-grid .mh-settings-section { display: grid; align-content: start; gap: 10px; }
  #sunny-playground .mh-records-grid .mh-settings-section p { font-size: 14px; }
  #sunny-playground .mh-records-grid .mh-settings-section label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
  #sunny-playground .mh-records-grid .mh-sub { font-size: 12px; }
  #sunny-playground .mh-date-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #sunny-playground .mh-date-fields > label { min-width: 0; }
  #sunny-playground input[type="date"] {
    display: block; width: 100%; max-width: 100%; min-width: 0; min-inline-size: 0;
    appearance: none; -webkit-appearance: none; overflow: hidden; text-align: start;
  }
  #sunny-playground input[type="date"]::-webkit-date-and-time-value { min-width: 0; text-align: start; }
  #sunny-playground input[type="date"]::-webkit-datetime-edit { min-width: 0; max-width: 100%; padding: 0; }
  #sunny-playground .mh-import-label { position: relative; display: inline-flex!important; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--mh-line); border-radius: 12px; background: var(--mh-panel); font-size: 13px; }
  #sunny-playground .mh-import-label input { position: absolute; inset: 0; width: 100%; opacity: 0; }
  #sunny-playground .mh-import-label:focus-within { outline: 2px solid var(--mh-moss); outline-offset: 2px; }
  #sunny-playground .mh-action-dialog { width: min(620px, calc(100% - 28px)); overflow: auto; }
  #sunny-playground .mh-action-dialog > p { margin-top: 14px; font-size: 15px; line-height: 1.4; }
  #sunny-playground .mh-action-dialog .mh-form { margin-top: 14px; }
  #sunny-playground .mh-dialog-actions { display: grid; gap: 10px; margin-top: 16px; }
  #sunny-playground .mh-dialog-actions > button { width: 100%; }
  #sunny-playground .mh-recovery-code { display: block; margin-block: 20px; padding: 12px; background: var(--mh-done); border-radius: 10px; text-align: center; font-family: ui-monospace, monospace; font-size: 28px; font-weight: 700; }
  #sunny-playground .mh-welcome-form { display: grid; gap: 20px; max-width: 720px; margin: 26px auto 0; padding: 24px; background: var(--mh-panel); border: 1px solid var(--mh-line); border-radius: 16px; }
  #sunny-playground .mh-welcome-form textarea { resize: none; }
  #sunny-playground .mh-loading { padding: 32px; text-align: center; }
  #sunny-playground .mh-export-tools { display: grid; gap: 10px; margin-top: 16px; }
  #sunny-playground .mh-export-tools textarea { width: 100%; font-family: ui-monospace, monospace; font-size: 12px; resize: none; }
  #sunny-playground .mh-custom-choice { grid-template-columns: minmax(0, 1.3fr) 48px repeat(3, minmax(0, 1fr)); }
  #sunny-playground .mh-custom-order { grid-column: 1 / 4; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; }
  #sunny-playground .mh-new-meaning { grid-column: 4 / 6; align-self: end; font-size: 12px; }
  #sunny-playground .mh-custom-choice input[type="hidden"] { display: none; }
  #sunny-playground .mh-history-context { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; }
  #sunny-playground .mh-history-page-slot { display: flex; align-items: center; justify-content: center; min-width: calc(326px * var(--mh-staff-scale)); min-height: calc(44px * var(--mh-staff-scale)); }
  #sunny-playground .mh-all-weeks { display: flex; align-items: center; justify-content: center; color: var(--mh-soft); font-size: 13px; }
  #sunny-playground .mh-history-note { display: grid; align-content: center; min-height: 36px; }
  #sunny-playground .mh-history-note:empty { min-height: 36px; }
  #sunny-playground .mh-history-note .mh-history-insight { font-size: 13px; line-height: 1.25; }
  #sunny-playground .mh-history-legend li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
  #sunny-playground .mh-scheme-note { padding: 2px 0; border: 0; background: transparent; color: var(--mh-soft); text-decoration: underline; font-size: 12px; min-height: 24px; text-align: start; }
  #sunny-playground .mh-change-list { padding-inline-start: 22px; }
  #sunny-playground .mh-change-list li { padding-block: 6px; font-size: 14px; }
  #sunny-playground .mh-breakdown-list { display: grid; gap: 12px; list-style: none; padding: 0; margin: 18px 0 0; }
  #sunny-playground .mh-breakdown-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; }
  #sunny-playground .mh-breakdown-list li .mh-history-dot { margin-top: 5px; }
  #sunny-playground .mh-breakdown-list p { margin-top: 4px; overflow-wrap: anywhere; color: var(--mh-soft); }
  #sunny-playground .mh-welcome-page h1 { font-family: "Segoe UI", system-ui, sans-serif; font-size: 36px; }
  #sunny-playground .mh-welcome-page { display: flex; flex-direction: column; gap: 18px; height: 100%; min-height: 0; padding: 28px; font-family: "Segoe UI", system-ui, sans-serif; }
  #sunny-playground .mh-onboarding-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
  #sunny-playground .mh-onboarding-title { grid-column: 2; min-width: 0; }
  #sunny-playground .mh-onboarding-actions { grid-column: 3; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
  #sunny-playground .mh-onboarding-actions > .mh-primary { min-width: calc(130px * var(--mh-staff-scale)); font-size: calc(18px * var(--mh-staff-scale)); }
  #sunny-playground .mh-onboarding-header h1 { line-height: 1.15; text-align: center; }
  #sunny-playground .mh-onboarding-header > button { font-size: 14px; }
  #sunny-playground .mh-onboarding-header > button:first-child { grid-column: 1; justify-self: start; }
  #sunny-playground .mh-onboarding-header > button:last-child { grid-column: 3; justify-self: end; }
  #sunny-playground .mh-onboarding-logo {
    grid-column: 1; justify-self: start; display: block;
    width: clamp(44px, 5.4cqw, 68px); aspect-ratio: 1;
    border: 2px solid #fff; border-radius: 26%;
    box-shadow: 0 0 0 1px #20584340, 0 3px 8px #20584329;
  }
  #sunny-playground .mh-onboarding-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
  #sunny-playground .mh-onboarding-steps li { display: flex; align-items: center; gap: 10px; padding-block: 10px; border-bottom: 2px solid var(--mh-line); color: var(--mh-soft); font-size: 14px; }
  #sunny-playground .mh-onboarding-steps li > span { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--mh-done); font-weight: 700; }
  #sunny-playground .mh-onboarding-steps [aria-current] { color: var(--mh-ink); border-color: var(--mh-moss); }
  #sunny-playground .mh-onboarding-steps [aria-current] > span { background: var(--mh-moss); color: var(--mh-on-moss); }
  #sunny-playground .mh-onboarding-steps [data-reached] { border-color: color-mix(in srgb, var(--mh-moss) 40%, var(--mh-line)); }
  #sunny-playground .mh-teacher-setup { display: flex; flex: 1; flex-direction: column; gap: 16px; margin: 0; min-height: 0; }
  #sunny-playground .mh-onboarding-panel { min-width: 0; min-height: 0; padding: 20px; border: 1px solid var(--mh-line); border-radius: 14px; background: var(--mh-panel); }
  #sunny-playground .mh-onboarding-panel h2 { font-family: inherit; font-size: 17px; font-weight: 700; }
  #sunny-playground .mh-class-setup-grid { display: grid; flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); grid-template-rows: minmax(0, 1fr); gap: 16px; }
  #sunny-playground .mh-teacher-setup label { font-size: 14px; }
  #sunny-playground .mh-class-setup-grid .mh-setup-label { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 8px; }
  #sunny-playground .mh-setup-help { color: var(--mh-soft); font-size: 13px; font-weight: 400; }
  #sunny-playground .mh-class-setup-grid textarea { flex: 1; min-height: 0; resize: none; }
  #sunny-playground .mh-class-details { display: flex; flex-direction: column; gap: 22px; }
  #sunny-playground .mh-class-setup-aside { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px; min-height: 0; min-width: 0; }
  #sunny-playground .mh-setup-names-panel { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; container-type: size; }
  #sunny-playground .mh-class-setup-aside > * { min-width: 0; min-height: 0; }
  #sunny-playground .mh-setup-restore { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 14px; }
  #sunny-playground .mh-welcome-page button.mh-setup-restore { font-size: calc(17px * var(--mh-staff-scale)); }
  #sunny-playground .mh-setup-restore svg { width: calc(26px * var(--mh-staff-scale)); height: calc(26px * var(--mh-staff-scale)); color: var(--mh-moss); }
  #sunny-playground .mh-class-details p { color: var(--mh-soft); font-size: 14px; line-height: 1.45; }
  #sunny-playground .mh-setup-names-panel .mh-setup-count { padding-top: 10px; border-top: 1px solid var(--mh-line); color: var(--mh-soft); font-size: calc(17px * var(--mh-staff-scale)); font-weight: 600; }
  #sunny-playground .mh-app:has(> .mh-welcome-page) { overflow: clip; }
  #sunny-playground .mh-setup-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; }
  #sunny-playground .mh-setup-footer > button { min-width: 130px; font-size: 14px; }
  #sunny-playground .mh-setup-footer > .mh-primary { margin-left: auto; }
  #sunny-playground .mh-setup-error { color: light-dark(#a32038, #ffb9c7); font-size: 14px; }
  #sunny-playground .mh-setup-error:empty { display: none; }
  #sunny-playground .mh-teacher-options { display: grid; flex: 1; min-height: 0; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 16px; align-items: stretch; }
  #sunny-playground .mh-feeling-choice-panel { margin: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; }
  #sunny-playground .mh-format-options { display: grid; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #sunny-playground .mh-format-card { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; min-height: 0; padding: 14px 12px 12px; border: 2px solid var(--mh-line); border-radius: 11px; background: var(--mh-panel); }
  #sunny-playground .mh-format-card:has(input:checked) { border-color: var(--mh-moss); background: color-mix(in srgb, var(--mh-moss) 4%, var(--mh-panel)); }
  #sunny-playground .mh-custom-format-card { text-align: left; }
  #sunny-playground .mh-custom-format-card[aria-pressed="true"] { border-color: var(--mh-moss); background: color-mix(in srgb, var(--mh-moss) 7%, var(--mh-panel)); }
  #sunny-playground .mh-format-radio { position: absolute; inset: 16px 12px auto auto; width: 23px; height: 23px; border: 2px solid var(--mh-line); border-radius: 50%; background: var(--mh-panel); }
  #sunny-playground [aria-pressed="true"] > .mh-format-radio { border: 7px solid var(--mh-moss); }
  #sunny-playground .mh-format-card > strong { padding-right: 25px; font-size: 18px; font-weight: 700; line-height: 1.25; }
  #sunny-playground .mh-format-card > input[type="radio"] { position: absolute; inset: 16px 12px auto auto; width: 18px; min-height: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--mh-moss); }
  #sunny-playground .mh-format-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 7px; min-height: 0; }
  #sunny-playground .mh-format-chip { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; min-width: 0; min-height: 0; padding: 6px; border-radius: 9px; background: var(--mh-zone); color: var(--mh-zone-ink, var(--mh-ink)); font-size: 13px; font-weight: 600; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
  #sunny-playground .mh-format-mini-icon { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: var(--mh-sticker-paper); font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; font-size: 24px; line-height: 1; }
  #sunny-playground .mh-format-mini-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  #sunny-playground .mh-format-chips[data-format="traffic"] { grid-template-columns: minmax(0, 1fr); }
  #sunny-playground .mh-format-chips[data-format="traffic"] .mh-format-chip { flex-direction: row; gap: 10px; }
  #sunny-playground .mh-format-chips[data-dense] .mh-format-chip { flex-direction: row; gap: 5px; padding: 3px 5px; font-size: 11px; }
  #sunny-playground .mh-format-chips[data-dense] .mh-format-mini-icon { width: 22px; height: 22px; flex-basis: 22px; font-size: 18px; }
  #sunny-playground .mh-format-card:has(.mh-format-note) { grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; }
  #sunny-playground .mh-format-note { color: var(--mh-soft); font-size: 12px; font-weight: 400; line-height: 1.25; }
  #sunny-playground .mh-custom-format-preview {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px;
    min-height: 0; min-width: 0; padding: 10px; border: 1px dashed var(--mh-line); border-radius: 9px;
    background: color-mix(in srgb, var(--mh-done) 55%, var(--mh-panel)); color: var(--mh-moss); text-align: center;
  }
  #sunny-playground .mh-custom-format-preview svg { flex: 0 1 auto; width: clamp(40px, 28cqh, 72px); height: clamp(40px, 28cqh, 72px); min-height: 24px; }
  #sunny-playground .mh-custom-format-preview > span { max-width: 18ch; font-size: clamp(15px, min(6cqw, 10cqh), 22px); font-weight: 650; line-height: 1.2; }
  #sunny-playground .mh-setup-background { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; gap: 16px; overflow: clip; }
  #sunny-playground .mh-setup-background .mh-backdrop-preview { min-height: 0; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
  #sunny-playground .mh-setup-background .mh-meadow { height: 100%; min-height: 0; }
  #sunny-playground .mh-setup-background figcaption { font-size: 12px; }
  #sunny-playground .mh-setup-background > p { font-size: 13px; line-height: 1.45; color: var(--mh-soft); }
  #sunny-playground .mh-setup-ready { display: grid; flex: 1; gap: 22px; align-content: center; justify-items: center; text-align: center; }
  #sunny-playground .mh-setup-ready > h2 { font-size: 26px; }
  #sunny-playground .mh-setup-ready > p { max-width: 510px; font-size: 16px; line-height: 1.5; color: var(--mh-soft); }
  #sunny-playground .mh-ready-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 740px); gap: 18px; margin: 0; padding-block: 20px; border-block: 1px solid var(--mh-line); }
  #sunny-playground .mh-ready-details > div { display: grid; gap: 6px; min-width: 0; }
  #sunny-playground .mh-ready-details dt { color: var(--mh-soft); font-size: 12px; }
  #sunny-playground .mh-ready-details dd { margin: 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
  #sunny-playground .mh-ready-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  #sunny-playground .mh-ready-actions > .mh-primary { min-width: 240px; }
  #sunny-playground .mh-setup-teacher-grid { display: grid; flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 16px; }
  #sunny-playground .mh-setup-access { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 20px; }
  #sunny-playground .mh-setup-access-copy { display: grid; gap: 6px; }
  #sunny-playground .mh-setup-access-copy p,
  #sunny-playground .mh-setup-lock-help { color: var(--mh-soft); font-size: calc(15px * var(--mh-staff-scale)); font-weight: 400; line-height: 1.35; }
  #sunny-playground .mh-setup-options-quadrant { min-height: 0; display: grid; grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr)); gap: 14px; }
  #sunny-playground .mh-setup-options-quadrant .mh-setup-option-card { display: flex; align-items: flex-start; gap: 14px; min-height: 0; padding: calc(16px * var(--mh-staff-scale)); border: 1px solid var(--mh-line); border-radius: var(--mh-panel-radius); background: var(--mh-panel); }
  #sunny-playground .mh-setup-option-card > span { display: grid; min-width: 0; gap: 7px; }
  #sunny-playground .mh-setup-option-card strong { font-size: calc(20px * var(--mh-staff-scale)); line-height: 1.25; }
  #sunny-playground .mh-setup-option-description { color: var(--mh-soft); font-size: calc(15px * var(--mh-staff-scale)); font-weight: 400; line-height: 1.4; }
  #sunny-playground[data-device-app] {
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }
  #sunny-playground[data-device-app] .mh-tablet {
    width: min(100%, var(--mh-frame-width, 1024px));
    height: var(--mh-frame-height, 768px);
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
  }
  #sunny-playground[data-keyboard-open] .mh-class-setup-grid textarea {
    padding-bottom: min(calc(10px + var(--mh-keyboard-overlap, 0px)), max(10px, calc(100cqh - 200px)));
    scroll-padding-bottom: var(--mh-keyboard-overlap, 0px);
  }
  #sunny-playground[data-keyboard-open] .mh-overview-page { padding-bottom: calc(18px + var(--mh-keyboard-overlap, 0px)); }
  #sunny-playground[data-keyboard-open] .mh-settings-group:not([hidden]) { display: block; overflow: auto; overscroll-behavior: contain; }
  #sunny-playground[data-keyboard-open] .mh-settings-group > :is(.mh-settings-columns, .mh-records-grid) { height: auto; grid-template-rows: auto; }
  @container mh-tablet-app (max-width: 820px) {
    #sunny-playground .mh-welcome-page { padding: 20px; }
    #sunny-playground .mh-onboarding-header h1 { font-size: 30px; }
    #sunny-playground .mh-welcome-page:has(.mh-teacher-options) { height: auto; min-height: 100%; }
    #sunny-playground .mh-teacher-setup:has(.mh-teacher-options) { flex: none; }
    #sunny-playground .mh-teacher-options { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
    #sunny-playground .mh-format-options { min-height: 440px; }
    #sunny-playground .mh-setup-background .mh-meadow { height: 210px; }
    #sunny-playground .mh-format-card > strong { font-size: 16px; }
    #sunny-playground .mh-format-mini-icon { flex-basis: 26px; width: 26px; height: 26px; font-size: 21px; }
    #sunny-playground .mh-settings-nav { flex-wrap: wrap; }
  }
  @container mh-tablet-app (max-width: 700px) {
    #sunny-playground .mh-welcome-page { height: auto; min-height: 100%; }
    #sunny-playground .mh-onboarding-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
    #sunny-playground .mh-onboarding-header h1 { font-size: 26px; }
    #sunny-playground .mh-onboarding-steps { gap: 8px; }
    #sunny-playground .mh-onboarding-steps li { gap: 6px; font-size: 12px; }
    #sunny-playground .mh-teacher-setup { flex: none; }
    #sunny-playground .mh-class-setup-grid { grid-template-columns: minmax(0, 1fr); }
    #sunny-playground .mh-class-setup-grid textarea { min-height: 220px; }
    #sunny-playground .mh-class-details { gap: 12px; }
    #sunny-playground .mh-class-details .mh-setup-count { margin: 0; padding-top: 10px; }
    #sunny-playground .mh-teacher-options { grid-template-columns: minmax(0, 1fr); }
    #sunny-playground .mh-format-options { min-height: 440px; }
    #sunny-playground .mh-setup-background .mh-meadow { height: 210px; }
    #sunny-playground .mh-setup-teacher-grid { grid-template-columns: minmax(0, 1fr); }
    #sunny-playground .mh-setup-footer { margin-top: 10px; }
  }
  /* Staff typography grows with the available canvas; dense editors retain enough room for every control. */
  #sunny-playground :is(.mh-welcome-page, .mh-overview-page) { font-size: calc(17px * var(--mh-staff-scale)); }
  #sunny-playground :is(.mh-welcome-page, .mh-overview-page) :is(input, select, textarea, .mh-quiet) { font-size: calc(16px * var(--mh-staff-scale)); }
  #sunny-playground .mh-welcome-page { gap: calc(18px * var(--mh-staff-scale)); padding: calc(28px * var(--mh-staff-scale)); }
  #sunny-playground .mh-welcome-page h1 { font-size: calc(42px * var(--mh-staff-scale)); }
  #sunny-playground .mh-onboarding-header > button { font-size: calc(16px * var(--mh-staff-scale)); }
  #sunny-playground .mh-onboarding-steps li { font-size: calc(17px * var(--mh-staff-scale)); }
  #sunny-playground .mh-onboarding-steps li > span { flex-basis: calc(34px * var(--mh-staff-scale)); height: calc(34px * var(--mh-staff-scale)); }
  #sunny-playground .mh-onboarding-panel h2 { font-size: calc(22px * var(--mh-staff-scale)); }
  #sunny-playground .mh-teacher-setup label { font-size: calc(18px * var(--mh-staff-scale)); }
  #sunny-playground .mh-setup-help { font-size: calc(15px * var(--mh-staff-scale)); }
  #sunny-playground .mh-class-details p { font-size: calc(17px * var(--mh-staff-scale)); }
  #sunny-playground .mh-welcome-page :is(input, select, textarea) { font-size: calc(19px * var(--mh-staff-scale)); }
  #sunny-playground .mh-welcome-page :is(button, input, select) { min-height: calc(50px * var(--mh-staff-scale)); }
  #sunny-playground .mh-setup-footer > button { min-width: calc(158px * var(--mh-staff-scale)); font-size: calc(18px * var(--mh-staff-scale)); }
  #sunny-playground .mh-format-card { container-type: size; }
  #sunny-playground .mh-format-card > strong { font-size: clamp(20px, min(8cqw, 13cqh), 32px); }
  #sunny-playground .mh-format-card > input[type="radio"] { width: 23px; height: 23px; min-height: 23px; }
  #sunny-playground .mh-format-chip { flex-direction: row; justify-content: flex-start; gap: 8px; padding: 7px; font-size: clamp(15px, 5.5cqw, 22px); }
  #sunny-playground .mh-format-mini-label { min-width: 0; }
  #sunny-playground .mh-format-mini-icon {
    --mh-format-icon: clamp(32px, min(18cqw, 24cqh), 60px);
    flex-basis: var(--mh-format-icon); width: var(--mh-format-icon); height: var(--mh-format-icon); font-size: calc(var(--mh-format-icon) * .75);
  }
  #sunny-playground .mh-format-chips[data-format="traffic"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #sunny-playground .mh-format-chips[data-format="traffic"] .mh-format-chip { flex-direction: column; justify-content: center; gap: 6px; }
  #sunny-playground .mh-format-chips[data-dense] .mh-format-chip { font-size: clamp(12px, 4cqw, 17px); }
  #sunny-playground .mh-format-note { font-size: clamp(13px, 4cqw, 17px); }
  #sunny-playground .mh-setup-background figcaption { font-size: calc(15px * var(--mh-staff-scale)); }
  #sunny-playground .mh-class-setup-grid .mh-option-check input { flex: none; width: calc(24px * var(--mh-staff-scale)); height: calc(24px * var(--mh-staff-scale)); min-height: 0; margin: 2px 0 0; }
  #sunny-playground .mh-setup-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 16px; }
  #sunny-playground .mh-setup-details label { font-size: calc(18px * var(--mh-staff-scale)); line-height: 1.3; }
  #sunny-playground .mh-setup-details :is(input, select) { height: calc(50px * var(--mh-staff-scale)); font-size: calc(19px * var(--mh-staff-scale)); }
  #sunny-playground .mh-class-setup-aside .mh-setup-option-card { gap: 10px; padding: calc(14px * var(--mh-staff-scale)); }
  #sunny-playground .mh-class-setup-aside .mh-setup-option-card strong { font-size: calc(18px * var(--mh-staff-scale)); }
  #sunny-playground .mh-class-setup-aside .mh-setup-option-description { font-size: calc(15px * var(--mh-staff-scale)); line-height: 1.35; }
  #sunny-playground .mh-setup-custom-editor { display: flex; flex: 1; flex-direction: column; min-height: 0; gap: 12px; }
  #sunny-playground .mh-setup-custom-editor [hidden] { display: none !important; }
  #sunny-playground .mh-setup-custom-editor .mh-custom-settings { flex: 1; min-height: 0; grid-template-rows: auto minmax(0, 1fr); gap: 20px; }
  #sunny-playground .mh-setup-custom-editor .mh-custom-toolbar { grid-template-columns: 180px minmax(0, 1fr); gap: 18px; }
  #sunny-playground .mh-setup-custom-editor .mh-custom-picker { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); align-self: end; }
  #sunny-playground .mh-setup-custom-editor .mh-custom-edit { justify-content: center; font-size: calc(18px * var(--mh-staff-scale)); }
  #sunny-playground .mh-setup-custom-editor .mh-custom-choice { min-height: 0; padding: 0; align-content: center; align-items: start; border: 0; grid-template: repeat(3, auto) / minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; }
  #sunny-playground .mh-setup-custom-editor .mh-custom-words { grid-area: 1 / 1 / 2 / 3; }
  #sunny-playground .mh-setup-custom-editor .mh-custom-colour { grid-area: 2 / 1; }
  #sunny-playground .mh-setup-custom-editor .mh-custom-shape { grid-area: 2 / 2; }
  #sunny-playground .mh-setup-custom-editor .mh-custom-picture { grid-area: 3 / 1 / 4 / 3; }
  #sunny-playground .mh-setup-custom-editor .mh-custom-preview { grid-area: 1 / 3 / 4 / 4; height: 100%; min-height: 0; padding: 16px; border: 1px solid var(--mh-line); border-radius: 14px; background: var(--mh-done); grid-template-rows: auto minmax(0, 1fr); gap: 12px; font-size: calc(18px * var(--mh-staff-scale)); }
  #sunny-playground .mh-setup-custom-editor .mh-custom-preview > div { display: grid; place-items: center; min-height: 0; }
  #sunny-playground .mh-setup-custom-editor .mh-custom-preview-sample { width: min(100%, 290px); min-height: 0; height: min(100%, 210px); font-size: clamp(20px, 3cqw, 34px); }
  #sunny-playground .mh-setup-custom-editor .mh-custom-preview-sample:is(.mh-circle, .mh-soft-square) { width: auto; aspect-ratio: 1; max-width: 100%; }
  #sunny-playground .mh-setup-custom-editor .mh-custom-preview-sample .mh-symbol { flex-basis: 56px; width: 56px; height: 56px; font-size: 40px; }
  #sunny-playground .mh-setup-custom-editor .mh-custom-choice input[type="color"] { width: 100%; }
  #sunny-playground .mh-setup-custom-editor .mh-custom-choice label { font-size: calc(18px * var(--mh-staff-scale)); }
  #sunny-playground[data-keyboard-open] .mh-setup-custom-editor { margin-bottom: var(--mh-keyboard-overlap, 0px); padding: 12px 16px; overflow: hidden; }
  #sunny-playground[data-keyboard-open] .mh-setup-custom-editor .mh-custom-toolbar { display: none; }
  #sunny-playground[data-keyboard-open] .mh-setup-custom-editor .mh-custom-settings { grid-template-rows: minmax(0, 1fr); gap: 0; }
  #sunny-playground[data-keyboard-open] .mh-setup-custom-editor .mh-custom-choice { grid-template-rows: minmax(0, 1fr); align-items: center; align-content: stretch; gap: 16px; }
  #sunny-playground[data-keyboard-open] .mh-setup-custom-editor :is(.mh-custom-colour, .mh-custom-shape, .mh-custom-picture) { display: none; }
  #sunny-playground[data-keyboard-open] .mh-setup-custom-editor .mh-custom-preview { grid-area: 1 / 3; padding: 6px 10px; gap: 4px; font-size: 14px; }
  #sunny-playground[data-keyboard-open] .mh-setup-custom-editor .mh-custom-preview-sample { height: 100%; font-size: 18px; }
  #sunny-playground[data-keyboard-open] .mh-setup-custom-editor .mh-custom-preview-sample .mh-symbol { flex-basis: 28px; width: 28px; height: 28px; font-size: 22px; }
  #sunny-playground .mh-font-options > .mh-choice { display: flex; justify-content: center; align-items: center; padding: 16px; }
  #sunny-playground .mh-font-options .mh-letter-sample { display: block; width: 100%; max-height: 100%; overflow-wrap: anywhere; text-align: center; line-height: 1.2; }
  #sunny-playground .mh-setup-custom-editor .mh-custom-preview-sample .mh-shape-content > span:last-child { display: block; -webkit-line-clamp: unset; overflow: visible; }
  #sunny-playground .mh-staff-date { font-size: calc(22px * var(--mh-staff-scale)); }
  #sunny-playground .mh-save-state { font-size: calc(12px * var(--mh-staff-scale)); }
  #sunny-playground .mh-staff-tally { font-size: calc(16px * var(--mh-staff-scale)); padding: 6px 12px 6px 6px; }
  #sunny-playground .mh-staff-ring { flex-basis: calc(28px * var(--mh-staff-scale)); width: calc(28px * var(--mh-staff-scale)); }
  #sunny-playground .mh-staff-tools button { min-height: calc(46px * var(--mh-staff-scale)); font-size: calc(16px * var(--mh-staff-scale)); }
  #sunny-playground .mh-staff-heading h1 { font-size: calc(32px * var(--mh-staff-scale)); }
  #sunny-playground .mh-staff-nav .mh-staff-tab { min-height: calc(60px * var(--mh-staff-scale)); font-size: calc(24px * var(--mh-staff-scale)); }
  #sunny-playground .mh-priority h2 { min-height: calc(66px * var(--mh-staff-scale)); font-size: calc(18px * var(--mh-staff-scale)); }
  #sunny-playground .mh-priority .mh-sub { font-size: calc(16px * var(--mh-staff-scale)); }
  #sunny-playground .mh-count { min-width: calc(32px * var(--mh-staff-scale)); font-size: calc(15px * var(--mh-staff-scale)); }
  #sunny-playground .mh-today .mh-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(112px * var(--mh-staff-scale))), 1fr)); }
  #sunny-playground .mh-today .mh-row { font-size: calc(17px * var(--mh-staff-scale)); }
  #sunny-playground .mh-today .mh-row button { min-height: calc(44px * var(--mh-staff-scale)); }
  #sunny-playground .mh-overview-page details summary { min-height: calc(50px * var(--mh-staff-scale)); font-size: calc(18px * var(--mh-staff-scale)); }
  #sunny-playground .mh-today[data-compact] .mh-priority h2 { font-size: calc(16px * var(--mh-staff-scale)); }
  #sunny-playground .mh-today[data-compact] .mh-priority section:not(.mh-is-empty) { grid-template-columns: calc(180px * var(--mh-staff-scale)) minmax(0, 1fr); }
  #sunny-playground .mh-today[data-compact] .mh-priority h2 > span:first-child { display: block; -webkit-line-clamp: unset; }
  #sunny-playground .mh-today[data-compact] > .mh-group[data-wide] { grid-column: 1 / -1; }
  #sunny-playground .mh-today[data-compact]:not([data-layout="cards"]):has(.mh-priority > section:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #sunny-playground :is(.mh-history-controls > label, .mh-history-view-field) { font-size: calc(16px * var(--mh-staff-scale)); }
  #sunny-playground .mh-history-controls :is(select, .mh-history-switch) { min-height: calc(48px * var(--mh-staff-scale)); height: calc(48px * var(--mh-staff-scale)); }
  #sunny-playground .mh-history-grid { font-size: calc(16px * var(--mh-staff-scale)); }
  #sunny-playground .mh-history-grid th { font-size: calc(15px * var(--mh-staff-scale)); }
  #sunny-playground .mh-history-grid th:first-child { width: calc(78px * var(--mh-staff-scale)); }
  #sunny-playground .mh-history-cell { font-size: calc(15px * var(--mh-staff-scale)); }
  #sunny-playground .mh-history-mark { font-size: calc(20px * var(--mh-staff-scale)); }
  #sunny-playground .mh-history-mix { height: calc(10px * var(--mh-staff-scale)); }
  #sunny-playground :is(.mh-history-compare, .mh-history-legend, .mh-history-footer .mh-history-insight, .mh-all-weeks, .mh-pupil-history-pages) { font-size: calc(15px * var(--mh-staff-scale)); }
  #sunny-playground .mh-history-dot { flex-basis: calc(13px * var(--mh-staff-scale)); width: calc(13px * var(--mh-staff-scale)); height: calc(13px * var(--mh-staff-scale)); }
  #sunny-playground .mh-history-compare-bar { height: calc(24px * var(--mh-staff-scale)); }
  #sunny-playground .mh-settings { --mh-staff-scale: var(--mh-dense-scale); }
  #sunny-playground .mh-settings h2 { font-size: calc(20px * var(--mh-staff-scale)); }
  #sunny-playground .mh-settings :is(label, legend, .mh-sub, .mh-option-check, .mh-records-grid p, .mh-import-label) { font-size: calc(15px * var(--mh-staff-scale)); }
  #sunny-playground .mh-settings .mh-settings-nav .mh-quiet { font-size: calc(18px * var(--mh-staff-scale)); min-height: calc(48px * var(--mh-staff-scale)); }
  #sunny-playground .mh-settings .mh-option-check input { width: calc(21px * var(--mh-staff-scale)); height: calc(21px * var(--mh-staff-scale)); }
  #sunny-playground .mh-settings .mh-custom-picker .mh-custom-edit { font-size: calc(15px * var(--mh-staff-scale)); }
  #sunny-playground .mh-main .mh-today[data-compact][data-layout="cards"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  #sunny-playground .mh-main .mh-today[data-compact][data-layout="cards"] > .mh-priority { display: contents; }
  #sunny-playground .mh-main .mh-today[data-compact][data-layout="cards"] .mh-priority section {
    display: grid;
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  #sunny-playground .mh-main .mh-today[data-compact][data-layout="cards"] > .mh-group {
    grid-column: auto;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--mh-line);
    border-radius: 9px;
    background: var(--mh-panel);
  }
  #sunny-playground .mh-main .mh-today[data-compact][data-layout="cards"] :is(.mh-priority h2, .mh-group summary) {
    min-height: calc(56px * var(--mh-staff-scale));
    font-size: calc(16px * var(--mh-staff-scale));
  }
  #sunny-playground .mh-main .mh-today[data-compact][data-layout="cards"] .mh-priority h2 > span:first-child { display: block; -webkit-line-clamp: unset; }
  #sunny-playground .mh-main .mh-today[data-compact][data-layout="cards"] .mh-list {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(96px * var(--mh-staff-scale))), 1fr));
    margin: 6px;
    padding: 0;
  }
  #sunny-playground .mh-main .mh-today[data-compact][data-layout="cards"] .mh-row { font-size: calc(16px * var(--mh-staff-scale)); }
  #sunny-playground .mh-main .mh-today[data-compact][data-layout="cards"] .mh-row button { min-height: calc(34px * var(--mh-staff-scale)); }
  #sunny-playground .mh-action-dialog[data-pupil-dialog] {
    width: min(calc(560px * var(--mh-staff-scale)), calc((100vw - 32px) / var(--mh-tablet-scale, 1)));
  }
  #sunny-playground [data-pupil-dialog] .mh-pin-top { align-items: flex-start; gap: 16px; margin-bottom: calc(18px * var(--mh-staff-scale)); }
  #sunny-playground [data-pupil-dialog] .mh-pin-top h2 { min-width: 0; align-self: center; font-size: calc(28px * var(--mh-staff-scale)); line-height: 1.3; overflow-wrap: anywhere; }
  #sunny-playground [data-pupil-dialog] svg { width: calc(21px * var(--mh-staff-scale)); height: calc(21px * var(--mh-staff-scale)); flex: 0 0 auto; }
  #sunny-playground .mh-pupil-status { display: flex; align-items: center; gap: calc(18px * var(--mh-staff-scale)); min-height: calc(104px * var(--mh-staff-scale)); padding: calc(18px * var(--mh-staff-scale)); border-radius: calc(14px * var(--mh-staff-scale)); background: var(--mh-zone, var(--mh-done)); color: var(--mh-zone-ink, var(--mh-ink)); }
  #sunny-playground .mh-pupil-status > strong { min-width: 0; font-size: calc(25px * var(--mh-staff-scale)); font-weight: 650; line-height: 1.2; overflow-wrap: anywhere; }
  #sunny-playground .mh-pupil-status-icon { display: grid; place-items: center; flex: 0 0 auto; width: calc(68px * var(--mh-staff-scale)); height: calc(68px * var(--mh-staff-scale)); border-radius: 50%; background: var(--mh-panel); color: var(--mh-soft); }
  #sunny-playground .mh-pupil-status-icon .mh-history-mark { display: block; font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: calc(46px * var(--mh-staff-scale)); line-height: 1; }
  #sunny-playground .mh-pupil-status-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--mh-zone, var(--mh-soft)); }
  #sunny-playground .mh-pupil-panel-actions { display: grid; gap: calc(12px * var(--mh-staff-scale)); margin-top: calc(20px * var(--mh-staff-scale)); }
  #sunny-playground .mh-pupil-panel-actions button { font-size: calc(16px * var(--mh-staff-scale)); border-radius: calc(11px * var(--mh-staff-scale)); }
  #sunny-playground .mh-pupil-panel-actions [data-open-history] { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: calc(54px * var(--mh-staff-scale)); padding: calc(12px * var(--mh-staff-scale)) calc(16px * var(--mh-staff-scale)); text-align: start; }
  #sunny-playground .mh-pupil-panel-actions [data-open-history] > span { display: flex; align-items: center; gap: 10px; }
  #sunny-playground .mh-pupil-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(12px * var(--mh-staff-scale)); }
  #sunny-playground .mh-pupil-tools button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-width: 0; min-height: calc(76px * var(--mh-staff-scale)); padding: calc(12px * var(--mh-staff-scale)); background: var(--mh-panel); text-align: start; line-height: 1.3; }
  #sunny-playground .mh-pupil-tools button > span { min-width: 0; overflow-wrap: anywhere; }
  #sunny-playground .mh-pupil-tools button:disabled { opacity: .45; }
  #sunny-playground :is(.mh-settings-section, .mh-onboarding-panel) { border-radius: var(--mh-panel-radius); }
  #sunny-playground :is(.mh-settings, .mh-welcome-page) :is(button, input, select, textarea) { border-radius: var(--mh-control-radius); }
  #sunny-playground .mh-settings .mh-settings-nav .mh-quiet { border: 1px solid var(--mh-line); background: var(--mh-panel); }
  #sunny-playground :is(.mh-settings-nav .mh-quiet, .mh-custom-edit, .mh-class-roster-list button, .mh-backdrop-days button)[aria-pressed="true"] { border-color: var(--mh-moss); background: color-mix(in srgb, var(--mh-moss) 7%, var(--mh-panel)); color: var(--mh-ink); }
  #sunny-playground .mh-settings .mh-settings-nav .mh-quiet[aria-pressed="true"] { border-color: var(--mh-moss); background: color-mix(in srgb, var(--mh-moss) 7%, var(--mh-panel)); }
  #sunny-playground .mh-format-card:has(input:checked) { background: color-mix(in srgb, var(--mh-moss) 7%, var(--mh-panel)); }
  #sunny-playground .mh-pin {
    --mh-staff-scale: var(--mh-dialog-scale);
    width: min(calc(352px * var(--mh-staff-scale)), calc((100vw - 32px) / var(--mh-tablet-scale, 1)));
    max-width: calc((100vw - 32px) / var(--mh-tablet-scale, 1));
    max-height: calc((var(--mh-frame-height, 768px) - 24px) / var(--mh-tablet-scale, 1));
    padding: calc(22px * var(--mh-staff-scale));
    border: 1px solid var(--mh-line);
    border-radius: calc(18px * var(--mh-staff-scale));
    background: var(--mh-panel);
    font: calc(16px * var(--mh-staff-scale))/1.3 var(--mh-staff-font);
  }
  #sunny-playground .mh-action-dialog { width: min(calc(600px * var(--mh-staff-scale)), calc((100vw - 32px) / var(--mh-tablet-scale, 1))); }
  /* The keypad fits intrinsically; clip the one-pixel overflow caused by fractional zoom rounding. */
  #sunny-playground .mh-pin[data-pin-dialog] { overflow: clip; }
  #sunny-playground .mh-pin .mh-pin-top { align-items: flex-start; gap: 16px; }
  #sunny-playground .mh-pin h2 { min-width: 0; align-self: center; font: 650 calc(24px * var(--mh-staff-scale))/1.3 var(--mh-staff-font); overflow-wrap: anywhere; }
  #sunny-playground .mh-pin :is(p, label, .mh-quiet, input, select, textarea, button) { font-family: var(--mh-staff-font); font-size: calc(16px * var(--mh-staff-scale)); }
  #sunny-playground .mh-pin :is(input, select, textarea, button) { border-radius: var(--mh-control-radius); }
  #sunny-playground .mh-pin :is(button, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select) { min-height: calc(44px * var(--mh-staff-scale)); }
  #sunny-playground .mh-pin .mh-form { gap: calc(12px * var(--mh-staff-scale)); margin-top: calc(18px * var(--mh-staff-scale)); }
  #sunny-playground .mh-pin .mh-form > button[type="submit"] { width: 100%; }
  #sunny-playground .mh-pin input[name="pin"] { font-size: calc(24px * var(--mh-staff-scale)); background: var(--mh-done); }
  #sunny-playground .mh-pin .mh-option-check input { width: 21px; height: 21px; min-height: 0; accent-color: var(--mh-moss); }
  #sunny-playground .mh-pin .mh-keypad [data-digit] { font-size: calc(23px * var(--mh-staff-scale)); background: var(--mh-panel); border-color: var(--mh-line); box-shadow: 0 1px 2px color-mix(in srgb, var(--mh-ink) 8%, transparent); }
  #sunny-playground .mh-pin .mh-keypad { gap: calc(8px * var(--mh-staff-scale)); }
  #sunny-playground .mh-pin .mh-keypad [data-action="recover-pin"] { font-size: calc(13px * var(--mh-staff-scale)); line-height: 1.2; padding: 4px; }
  #sunny-playground .mh-pin .mh-dialog-close { display: grid; place-items: center; flex: 0 0 auto; width: calc(40px * var(--mh-staff-scale)); height: calc(40px * var(--mh-staff-scale)); min-height: 0; padding: 0; border: 0; border-radius: 50%; background: var(--mh-done); color: var(--mh-soft); }
  #sunny-playground .mh-pin .mh-dialog-close svg { width: calc(21px * var(--mh-staff-scale)); height: calc(21px * var(--mh-staff-scale)); }
  #sunny-playground :is(.mh-settings, .mh-pin) button:disabled { opacity: .45; }
  #sunny-playground .mh-overview-page:has(> .mh-settings) { height: 100%; min-height: 0; }
  #sunny-playground .mh-settings { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
  #sunny-playground .mh-settings .mh-settings-nav .mh-quiet { min-height: calc(40px * var(--mh-staff-scale)); }
  #sunny-playground .mh-settings-group { min-height: 0; align-content: stretch; }
  #sunny-playground .mh-settings .mh-settings-section { display: flex; flex-direction: column; min-height: 0; gap: 8px; padding: 10px 16px; }
  #sunny-playground .mh-settings .mh-settings-section > :is(.mh-form, .mh-profile-settings) { margin-top: 0; }
  #sunny-playground .mh-settings-group[data-settings-panel="pupil"] { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  #sunny-playground .mh-settings-group[data-settings-panel="pupil"]:has([data-custom-settings]:not([hidden])) { grid-template-rows: auto minmax(0, 1fr); }
  #sunny-playground .mh-settings .mh-feeling-settings { flex: 1; min-height: 0; grid-template-rows: auto minmax(0, 1fr); }
  #sunny-playground .mh-feeling-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
  #sunny-playground .mh-settings .mh-feeling-toolbar > label { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
  #sunny-playground .mh-feeling-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-height: 0; }
  #sunny-playground .mh-feeling-preview { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; min-width: 0; padding: 10px; border-radius: 10px; background: var(--mh-zone); color: var(--mh-zone-ink, var(--mh-ink)); font-size: calc(19px * var(--mh-staff-scale)); text-align: center; overflow-wrap: anywhere; }
  #sunny-playground .mh-feeling-preview-icon { font: calc(48px * var(--mh-staff-scale))/1 "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }
  #sunny-playground .mh-feeling-summary:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #sunny-playground .mh-settings .mh-custom-toolbar { grid-template-columns: 200px minmax(0, 1fr); align-items: center; }
  #sunny-playground .mh-settings .mh-custom-toolbar > label { grid-template-columns: minmax(0, 1fr) 76px; align-items: center; }
  #sunny-playground .mh-settings .mh-custom-picker { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); }
  #sunny-playground .mh-settings .mh-custom-picker .mh-custom-edit { justify-content: center; }
  #sunny-playground .mh-settings-columns { min-height: 0; align-items: stretch; }
  #sunny-playground .mh-settings-group[data-settings-panel="pupil"] .mh-settings-columns { grid-template-rows: minmax(0, 1fr); }
  #sunny-playground .mh-settings-group[data-settings-panel="pupil"] .mh-profile-settings { flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); justify-items: stretch; align-items: stretch; gap: 6px; }
  #sunny-playground .mh-settings-group[data-settings-panel="pupil"] .mh-option-check { min-height: 0; padding: 6px; border: 1px solid var(--mh-line); border-radius: 8px; font-size: calc(14px * var(--mh-staff-scale)); }
  #sunny-playground .mh-settings .mh-backdrop-settings { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
  #sunny-playground .mh-settings .mh-backdrop-editor { min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: stretch; }
  #sunny-playground .mh-settings .mh-backdrop-fields { align-content: start; }
  #sunny-playground .mh-settings .mh-backdrop-preview { min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
  #sunny-playground .mh-settings .mh-backdrop-preview .mh-meadow { min-height: 0; height: 100%; }
  #sunny-playground .mh-settings-group[data-settings-panel="names"] .mh-settings-columns { height: 100%; grid-template-rows: minmax(0, 1fr); }
  #sunny-playground .mh-settings .mh-pupil-editor .mh-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #sunny-playground .mh-settings .mh-pupil-editor .mh-settings-actions { grid-column: 1 / -1; }
  #sunny-playground .mh-settings-stack { height: 100%; min-height: 0; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); align-content: stretch; }
  #sunny-playground .mh-settings-stack > .mh-settings-section > :is(.mh-form, .mh-profile-settings) { flex: 1; align-content: start; }
  #sunny-playground .mh-settings-stack .mh-class-list-form { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; }
  #sunny-playground .mh-settings-stack .mh-class-list-form > label { height: 100%; grid-template-rows: auto minmax(0, 1fr); }
  #sunny-playground .mh-settings-stack textarea { min-height: 66px; height: 100%; }
  #sunny-playground .mh-settings .mh-records-grid { height: 100%; min-height: 0; grid-template-rows: minmax(0, 1.15fr) minmax(0, 1fr); align-content: stretch; }
  #sunny-playground .mh-settings .mh-records-grid .mh-settings-section { gap: 8px; }
  #sunny-playground .mh-records-grid .mh-settings-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #sunny-playground .mh-records-grid .mh-settings-actions button { min-width: 0; padding-inline: 8px; }
  #sunny-playground .mh-settings :is(button, .mh-quiet) { font-size: calc(16px * var(--mh-staff-scale)); }
  #sunny-playground .mh-settings .mh-pupil-editor .mh-settings-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #sunny-playground .mh-settings .mh-pupil-editor .mh-settings-actions > button { width: 100%; min-width: 0; justify-self: stretch; }
  #sunny-playground .mh-settings .mh-pupil-editor [data-pupil-edit-status] { grid-column: 1 / -1; }
  #sunny-playground .mh-settings-section:has(> .mh-class-roster) { position: relative; }
  #sunny-playground .mh-class-roster [data-class-count] { position: absolute; top: 13px; right: 16px; font-size: calc(13px * var(--mh-staff-scale)); }
  #sunny-playground .mh-settings-stack .mh-class-list-form > button { width: 100%; justify-self: stretch; }
  #sunny-playground .mh-whole-class-actions { display: grid; gap: 12px; }
  #sunny-playground .mh-whole-class-actions > button { width: 100%; min-height: 48px; }
  #sunny-playground .mh-whole-class-actions [role="status"] { margin: 0; }

html, body { margin:0; width:100%; height:100%; overflow:hidden; overscroll-behavior:none; background:#fff9e8; color-scheme:light; }
body { position:fixed; inset:0; }
#sunny-playground { color-scheme:light; height:100%; min-height:0; display:grid; place-items:start stretch; padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); overscroll-behavior:none; }
#sunny-playground[data-native-app] { padding:0; }
#sunny-playground textarea { overscroll-behavior:contain; }
#sunny-playground button, #sunny-playground label, #sunny-playground summary { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
#sunny-playground :is(button,input,textarea,select,summary):focus-visible { outline:3px solid #1463c4; outline-offset:3px; }
#sunny-playground input, #sunny-playground textarea, #sunny-playground select { font-size:max(16px,1em); }
#sunny-playground .mh-format-card:focus-within { outline:3px solid #1463c4; outline-offset:2px; }
#sunny-playground .mh-choice[aria-pressed=true] { border:2px solid var(--mh-moss); }
#sunny-playground .mh-option-check { min-height:44px; }
#sunny-playground .mh-dialog-actions { display:flex; flex-wrap:wrap; gap:10px; margin-block:18px; }
@media (prefers-reduced-motion:reduce) { #sunny-playground *, #sunny-playground *::before, #sunny-playground *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }