/*
 * Ninabella designmanual — shared CSS for dark and white editions.
 * Rules are scoped to .designmanual-page; shared site styles are unchanged.
 * 1. Artwork: original drawings, isolated in a lower-priority cascade layer.
 * 2. Reset and tokens: typography, spacing and dark/light colour values.
 * 3. Base and layout: inherited text and layout primitives.
 * 4. Components: one definition per component; variants change local variables.
 * 5. Responsive: explicit breakpoint and reduced-motion variants only.
 * Never append game-specific corrections; edit the owning rule or its token.
 */
@layer manual-artwork;


@layer manual-artwork {
    .designmanual-page .gradient-night {
        background: radial-gradient(circle at 35% 30%, #25d7ff, rgba(37, 215, 255, .18) 25%, #080b16 70%);
    }

    .designmanual-page .gradient-pink {
        background: radial-gradient(circle at 65% 35%, #ff63da, rgba(255, 99, 218, .2) 28%, #080b16 72%);
    }

    .designmanual-page .gradient-purple {
        background: linear-gradient(135deg, #31124a, #111526 48%, #0a2034);
    }

    .designmanual-page .gradient-sky {
        background: linear-gradient(#78c8ff, #bce9ff);
    }

    .designmanual-page .gradient-dot {
        background: radial-gradient(circle at 35% 30%, #fff 0 8%, #ffb8f3 18%, #ff4fd8 45%, #8d42ff 72%, #080b16 74%);
    }

    .designmanual-page .gradient-win {
        background: linear-gradient(135deg, #ffe66d, #ff9b45 42%, #ff63da);
    }

    .designmanual-page .type-display strong {
        color: var(--yellow);
        font: 700 clamp(34px, 6vw, 62px) "Ninabella Montserrat", Arial, sans-serif;
        font-variant-numeric: tabular-nums;
        letter-spacing: .08em;
    }

    .designmanual-page .type-body strong {
        color: var(--cyan);
        font: 900 clamp(26px, 4vw, 43px) Poppins, Arial, sans-serif;
    }

    .designmanual-page .mbw-player .body {
        fill: #ff4fd8;
    }

    .designmanual-page .mbw-player .face {
        fill: #ffd7ed;
    }

    .designmanual-page .mbw-player .hair {
        fill: #b91b91;
    }

    .designmanual-page .mbw-player .eye {
        fill: #16141b;
    }

    .designmanual-page .mbw-player .outline {
        fill: none;
        stroke: rgba(0, 0, 0, .55);
        stroke-width: 2;
    }

    .designmanual-page .blue-player .body {
        fill: #34bfff;
    }

    .designmanual-page .blue-player .hair {
        fill: #176fa8;
    }

    .designmanual-page .ninabot-wall {
        width: 76px;
        height: 76px;
        display: block;
        background: #2b3048;
        box-shadow: 0 0 8px #69739e;
    }

    .designmanual-page .ninabot-grid {
        width: 82px;
        height: 82px;
        display: block;
        border: 1px solid rgba(72, 247, 255, .25);
        background-color: #080b18;
        background-image: linear-gradient(rgba(72, 247, 255, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(72, 247, 255, .18) 1px, transparent 1px);
        background-size: 20px 20px;
    }

    .designmanual-page .ninabot-commands {
        display: grid;
        grid-template-columns: repeat(2, 38px);
        gap: 5px;
    }

    .designmanual-page .ninabot-commands i {
        height: 38px;
        display: grid;
        place-items: center;
        border: 2px solid #48f7ff;
        border-radius: 7px;
        color: #fff;
        background: #15223a;
        font: 900 22px Arial;
        font-style: normal;
    }

    .designmanual-page .game-block {
        width: 72px;
        height: 72px;
        position: relative;
        display: block;
        border: 2px solid rgba(0, 0, 0, .2);
        image-rendering: pixelated;
        background-size: 20px 20px;
    }

    .designmanual-page .game-block.pink-diamond,
    .designmanual-page .game-block.blue-crystal {
        background: #777b83;
    }

    .designmanual-page .game-block.pink-diamond b {
        position: absolute;
        inset: 10px 13px;
        background: #e66cff;
        clip-path: polygon(
    50% 0,
    100% 32%,
    76% 72%,
    50% 100%,
    24% 72%,
    0 32%
    );
        filter: drop-shadow(0 0 6px rgba(230,108,255,.55));
    }

    .designmanual-page .game-block.pink-diamond b::before {
        content: "";
        position: absolute;
        left: 18%;
        top: 16%;
        width: 31%;
        height: 55%;
        background: #ffd6ff;
        clip-path: polygon(
    100% 0,
    100% 100%,
    0 68%,
    20% 15%
    );
    }

    .designmanual-page .game-block.pink-diamond b::after {
        content: "";
        position: absolute;
        right: 0;
        top: 32%;
        width: 50%;
        height: 68%;
        background: #bd45df;
        clip-path: polygon(
    100% 0,
    52% 100%,
    0 58%,
    0 0
    );
    }

    .designmanual-page .game-block.blue-crystal {
        background: #777b83;
    }

    .designmanual-page .game-block.blue-crystal b {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 48px;
        height: 68px;
        background: #38c7ff;
        clip-path: polygon(
    50% 0,
    88% 24%,
    78% 82%,
    50% 100%,
    22% 82%,
    12% 24%
    );
        filter:
    drop-shadow(0 0 5px rgba(56,199,255,.7))
    drop-shadow(0 0 10px rgba(56,199,255,.35));
    }

    .designmanual-page .game-block.blue-crystal b::before {
        content: "";
        position: absolute;
        left: 15%;
        top: 18%;
        width: 28%;
        height: 63%;
        background: #dff9ff;
        clip-path: polygon(
    100% 0,
    100% 100%,
    12% 76%,
    0 18%
    );
        opacity: .9;
    }

    .designmanual-page .game-block.blue-crystal b::after {
        content: "";
        position: absolute;
        right: 0;
        top: 23%;
        width: 48%;
        height: 65%;
        background: #169bd7;
        clip-path: polygon(
    100% 0,
    78% 88%,
    0 100%,
    0 0
    );
        opacity: .9;
    }

    .designmanual-page .magic-dot {
        width: 46px;
        height: 46px;
        position: relative;
        isolation: isolate;
        display: block;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #fff 0 8%, #ffb8f3 24%, #ff4fd8 64%, #8d42ff 100%);
        box-shadow: 0 0 9px 2px rgba(255, 255, 255, .7), 0 0 22px 8px rgba(255, 79, 216, .88), 0 0 50px 20px rgba(150, 70, 255, .52), 0 0 86px 34px rgba(100, 50, 255, .2);
        animation: manual-dot-pulse 1.8s ease-in-out infinite;
    }

    .designmanual-page .magic-dot::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: -55px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 255, 255, .23) 0 5%, rgba(255, 110, 225, .22) 14%, rgba(150, 70, 255, .14) 35%, rgba(100, 50, 255, 0) 70%);
    }

    .designmanual-page .magic-dot::after {
        content: "";
        position: absolute;
        left: 10px;
        top: 9px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .95);
        box-shadow: 0 0 8px #fff;
    }

    @keyframes manual-dot-pulse {
        50% {
            transform: scale(1.1);
            box-shadow: 0 0 12px 3px rgba(255, 255, 255, .75), 0 0 28px 11px rgba(255, 79, 216, .95), 0 0 62px 25px rgba(150, 70, 255, .58), 0 0 100px 42px rgba(100, 50, 255, .24);
        }
    }

    .designmanual-page .dot-sky {
        width: 92px;
        height: 68px;
        display: block;
        border: 2px solid rgba(37, 215, 255, .45);
        border-radius: 10px;
        background-color: #101522;
        background-image: radial-gradient(circle at 18% 25%, #fff 0 1px, transparent 2px), radial-gradient(circle at 70% 20%, #a66aff 0 1px, transparent 2px), radial-gradient(circle at 82% 70%, #fff 0 1px, transparent 2px), radial-gradient(circle at 35% 76%, #66deff 0 1px, transparent 2px), radial-gradient(circle at 48% 50%, rgba(108, 65, 185, .2), transparent 42%);
        box-shadow: inset 0 0 22px rgba(81, 58, 161, .22), 0 0 14px rgba(37, 215, 255, .14);
    }

    .designmanual-page .robo-asset {
        fill: #8be8ee;
        color: #8be8ee;
        filter: drop-shadow(0 0 8px rgba(36, 201, 236, .5));
    }

    .designmanual-page .robo-asset .robo-eye {
        fill: #0b1224;
    }

    .designmanual-page .robo-asset path {
        fill: none;
        stroke: currentColor;
        stroke-width: 6;
        stroke-linecap: round;
    }

    .designmanual-page .robo-cell {
        width: 78px;
        height: 78px;
        display: grid;
        place-items: center;
        border: 2px solid #1d2b48;
        border-radius: 12px;
        background: #081022;
    }

    .designmanual-page .robo-cell.path {
        border-color: #ed4dd9;
        box-shadow: 0 0 0 1px #ed4dd9, 0 0 14px #f05bdb88;
    }

    .designmanual-page .robo-cell.goal {
        border-color: #20d7f4;
        box-shadow: 0 0 0 1px #20d7f4, 0 0 14px #20d7f466;
    }

    .designmanual-page .robo-cell.goal svg {
        width: 38px;
        height: 38px;
        fill: #e065db;
    }



    .designmanual-page .robo-plan-slot {
        --preview-size: 30px;
        width: 82px;
        height: 58px;
        display: grid;
        place-items: center;
        border: 2px dashed #5da9b8;
        border-radius: 10px;
        background: transparent;
        color: #96a9cb;
        font: 700 22px Arial;
        font-style: normal;
    }

    .designmanual-page .robo-plan-slot.filled {
        border-style: solid;
        border-color: #b15df0;
        background: #b15df020;
        color: #fff;
    }

    .designmanual-page .robo-plan-slot svg {
        fill: currentColor;
    }

    .designmanual-page .robo-action {
        min-height: 46px;
        padding: 0 16px;
        display: inline-grid;
        place-items: center;
        border: 2px solid;
        border-radius: 12px;
        font-weight: 800;
    }

    .designmanual-page .robo-action.run {
        color: #071329;
        background: #2bc4d2;
        border-color: #a85cff;
    }

    .designmanual-page .robo-action.next {
        color: #071329;
        background: #4bea82;
        border-color: #a85cff;
    }

    .designmanual-page .robo-action.clear {
        color: #27385f;
        background: #fff;
        border-color: #dce6f5;
    }

    .designmanual-page .robo-action.sound {
        color: #fff;
        background: #122542;
        border-color: #7fa7c8;
    }

    .designmanual-page .robo-message {
        color: #9af5b5;
        font-weight: 800;
    }

    .designmanual-page .pixel-shape {
        --unit: 24px;
        position: relative;
        width: calc(var(--cols)*var(--unit));
        height: calc(var(--rows)*var(--unit));
        color: #6cf7ff;
    }

    .designmanual-page .pixel-shape i {
        position: absolute;
        left: calc(var(--x)*var(--unit));
        top: calc(var(--y)*var(--unit));
        width: var(--unit);
        height: var(--unit);
        border: 1px solid rgba(255, 255, 255, .36);
        border-radius: 3px;
        background: currentColor;
        box-shadow: 0 0 9px currentColor;
    }

    .designmanual-page .pixel-shape.c1 {
        color: #6cf7ff;
    }

    .designmanual-page .pixel-shape.c2 {
        color: #d46cff;
    }

    .designmanual-page .pixel-shape.c3 {
        color: #ffdf6c;
    }

    .designmanual-page .pixel-shape.c4 {
        color: #ff77b7;
    }

    .designmanual-page .pixel-shape.c5 {
        color: #74ff8d;
    }

    .designmanual-page .pixel-shape.c6 {
        color: #ff9d57;
    }

    .designmanual-page .pixel-shape.c7 {
        color: #8ea2ff;
    }

    .designmanual-page .pixel-shape.c8 {
        color: #ff6d6d;
    }

    .designmanual-page .pixel-shape.c9 {
        color: #72ffd8;
    }

    .designmanual-page .pixeliq-cell {
        width: 78px;
        height: 78px;
        display: block;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 2px;
        background: rgba(255, 255, 255, .025);
        box-shadow: inset 0 0 16px rgba(255, 255, 255, .018);
    }

    .designmanual-page .pixeliq-cell.off {
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        outline: 1px dashed rgba(158, 182, 202, .28);
    }

    .designmanual-page .pixeliq-tray {
        width: 112px;
        height: 86px;
        position: relative;
        display: block;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 16px;
        background: rgba(255, 255, 255, .055);
    }

    .designmanual-page .pixeliq-tray b,
    .designmanual-page .pixeliq-selected b {
        position: absolute;
        width: 28px;
        height: 28px;
        border: 1px solid rgba(255, 255, 255, .34);
        border-radius: 3px;
        background: #6cf7ff;
        color: #6cf7ff;
        box-shadow: 0 0 10px currentColor;
    }

    .designmanual-page .pixeliq-tray b:nth-child(1) {
        left: 27px;
        top: 15px;
    }

    .designmanual-page .pixeliq-tray b:nth-child(2) {
        left: 55px;
        top: 15px;
    }

    .designmanual-page .pixeliq-tray b:nth-child(3) {
        left: 27px;
        top: 43px;
    }

    .designmanual-page .pixeliq-selected {
        width: 92px;
        height: 72px;
        position: relative;
        display: block;
        border: 2px solid #71f6ff;
        border-radius: 14px;
        box-shadow: 0 0 0 2px #71f6ff, 0 0 22px rgba(113, 246, 255, .28);
    }

    .designmanual-page .pixeliq-selected b {
        top: 21px;
        background: #ff77b7;
        color: #ff77b7;
    }

    .designmanual-page .pixeliq-selected b:first-child {
        left: 17px;
    }

    .designmanual-page .pixeliq-selected b:last-child {
        left: 45px;
    }

    .designmanual-page .pixeliq-confetti {
        width: 100px;
        height: 82px;
        position: relative;
        display: block;
        border: 1px solid rgba(255, 255, 255, .14);
        border-radius: 18px;
        background: #091424;
        box-shadow: 0 0 28px rgba(113, 246, 255, .22);
    }

    .designmanual-page .pixeliq-confetti::after {
        content: "LØST";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: #fff;
        font: 900 17px Arial;
    }

    .designmanual-page .pixeliq-confetti b {
        position: absolute;
        width: 7px;
        height: 14px;
        border-radius: 2px;
        transform: rotate(var(--r));
    }

    .designmanual-page .pixeliq-confetti b:nth-child(1) {
        left: 12px;
        top: 8px;
        background: #6cf7ff;
        --r: 18deg;
    }

    .designmanual-page .pixeliq-confetti b:nth-child(2) {
        right: 14px;
        top: 13px;
        background: #ff77b7;
        --r: -24deg;
    }

    .designmanual-page .pixeliq-confetti b:nth-child(3) {
        left: 20px;
        bottom: 9px;
        background: #ffdf6c;
        --r: 45deg;
    }

    .designmanual-page .pixeliq-confetti b:nth-child(4) {
        right: 20px;
        bottom: 8px;
        background: #74ff8d;
        --r: -38deg;
    }

    .designmanual-page .material-row {
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
    }

    .designmanual-page .tile {
        width: 52px;
        height: 52px;
        border: 3px solid rgba(255, 255, 255, .14);
        image-rendering: pixelated;
        background-size: 14px 14px;
    }

    .designmanual-page .dirt {
        background-color: #8f572f;
        background-image: linear-gradient(90deg, transparent 65%, #6d3e21 65% 80%, transparent 80%), linear-gradient(transparent 65%, #6d3e21 65% 80%, transparent 80%);
    }

    .designmanual-page .stone {
        background-color: #777e8b;
        background-image: linear-gradient(90deg, transparent 65%, #545b67 65% 80%, transparent 80%);
    }

    .designmanual-page .wood {
        background: repeating-linear-gradient(90deg, #6e3c20 0 7px, #9b5b31 7px 12px);
    }

    .designmanual-page .sand {
        background-color: #dcc982;
        background-image: linear-gradient(90deg, transparent 70%, #b5a05f 70% 80%, transparent 80%);
    }

    .designmanual-page .water-tile {
        background: repeating-linear-gradient(0deg, #2389be 0 8px, #35a7dc 8px 13px);
    }

    .designmanual-page .leaf {
        background-color: #348943;
        background-image: linear-gradient(90deg, transparent 65%, #1d652c 65% 80%, transparent 80%);
    }

    .designmanual-page .grass {
        background: linear-gradient(#42a844 0 25%, #8f572f 25% 100%);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .designmanual-page .frame-samples,
    .designmanual-page .glow-samples,
    .designmanual-page .background-samples {
        display: flex;
        align-items: center;
        gap: 16px;
        min-height: 70px;
    }

    .designmanual-page .frame-samples i {
        width: 68px;
        height: 58px;
        border: 2px solid var(--cyan);
        background: #0b1020;
    }

    .designmanual-page .frame-samples i:nth-child(2) {
        border-color: var(--pink);
        border-radius: 12px;
    }

    .designmanual-page .frame-samples i:nth-child(3) {
        border-color: var(--purple);
        border-radius: 22px;
    }

    .designmanual-page .glow-samples i {
        width: 54px;
        height: 54px;
        background: var(--cyan);
        box-shadow: 0 0 16px currentColor;
    }

    .designmanual-page .glow-samples i:nth-child(2) {
        color: var(--pink);
        background: var(--pink);
        border-radius: 8px;
    }

    .designmanual-page .glow-samples i:nth-child(3) {
        color: var(--yellow);
        background: var(--yellow);
        clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%);
    }

    .designmanual-page .background-samples i {
        flex: 1;
        height: 76px;
        border: 1px solid #38415c;
        background-color: #080b16;
    }

    .designmanual-page .background-samples i:first-child {
        background-image: linear-gradient(rgba(37, 215, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 215, 255, .08) 1px, transparent 1px);
        background-size: 16px 16px;
    }

    .designmanual-page .background-samples i:last-child {
        background-image: radial-gradient(circle at 25% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 70% 65%, #b968ff 0 2px, transparent 3px), radial-gradient(circle at 50% 50%, rgba(255, 99, 218, .25), transparent 45%);
    }

    .designmanual-page .sound-wave {
        width: 54px;
        height: 54px;
        flex: none;
        display: block;
        background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px);
        clip-path: polygon(0 40%, 15% 40%, 15% 25%, 30% 25%, 30% 8%, 45% 8%, 45% 92%, 60% 92%, 60% 20%, 75% 20%, 75% 36%, 100% 36%, 100% 64%, 75% 64%, 75% 80%, 60% 80%, 60% 100%, 45% 100%, 45% 0, 30% 0, 30% 75%, 15% 75%, 15% 60%, 0 60%);
        filter: drop-shadow(0 0 7px currentColor);
        color: var(--cyan);
    }

    .designmanual-page .sound-wave.high {
        color: var(--yellow);
    }

    .designmanual-page .sound-wave.danger {
        color: #ff6688;
    }

    .designmanual-page .sound-wave.rising {
        color: var(--purple);
        transform: rotate(-8deg);
    }

    .designmanual-page .sound-wave.victory {
        color: var(--pink);
    }

    .designmanual-page .demo-button {
        min-height: 56px;
        padding: 0 20px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border: 2px solid;
        border-radius: 14px;
        color: white;
        font: 900 16px Poppins, Arial, sans-serif;
    }

    .designmanual-page .demo-button svg {
        width: 25px;
        height: 25px;
        fill: currentColor;
    }

    .designmanual-page .demo-button.primary {
        background: #581149;
        border-color: var(--pink);
        box-shadow: 0 0 18px rgba(255, 99, 218, .28);
    }

    .designmanual-page .demo-button.secondary {
        background: #102b36;
        border-color: var(--cyan);
    }

    .designmanual-page .demo-counter {
        min-width: 120px;
        padding: 10px 18px;
        text-align: center;
        border: 2px solid var(--yellow);
        background: #19170d;
    }

    .designmanual-page .demo-counter small,
    .designmanual-page .demo-counter strong {
        display: block;
        font-family: "Ninabella Montserrat", Arial, sans-serif;
    }

    .designmanual-page .demo-counter strong {
        font-size: 28px;
    }

    .designmanual-page .demo-panel {
        flex: 1 1 280px;
        padding: 18px;
        border: 2px solid var(--purple);
        border-radius: 16px;
        background: var(--panel-2);
    }

    .designmanual-page .demo-panel span,
    .designmanual-page .demo-panel b {
        display: block;
    }

    .designmanual-page .demo-panel span {
        color: var(--purple);
        font: 900 13px "Ninabella Montserrat", Arial, sans-serif;
    }

    .designmanual-page .demo-panel b {
        margin-top: 5px;
    }

    .designmanual-page .jelly-preview {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        min-height: 150px;
    }

    .designmanual-page .jelly-preview span {
        width: 54px;
        height: 68px;
        display: grid;
        place-items: center;
        border: 3px solid currentColor;
        border-radius: 18px;
        background: #141a30;
        font: 900 38px/1 "Ninabella Montserrat", Arial, sans-serif;
        box-shadow: 0 9px 0 color-mix(in srgb, currentColor, transparent 55%), 0 0 18px color-mix(in srgb, currentColor, transparent 35%);
        animation: jelly-bounce 1.8s ease-in-out infinite;
    }

    .designmanual-page .jelly-preview span:nth-child(1) {
        color: var(--cyan);
        animation-delay: 0s;
    }

    .designmanual-page .jelly-preview span:nth-child(2) {
        color: var(--pink);
        animation-delay: .18s;
    }

    .designmanual-page .jelly-preview span:nth-child(3) {
        color: var(--yellow);
        animation-delay: .36s;
    }

    .designmanual-page .jelly-preview span:nth-child(4) {
        color: var(--purple);
        animation-delay: .54s;
    }

    @keyframes jelly-bounce {
        0%,
        100% {
            transform: translateY(0) rotate(0);
        }

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

        65% {
            transform: translateY(2px) scaleY(.9) rotate(2deg);
        }
    }

    @media(prefers-reduced-motion:reduce) {
        .designmanual-page .jelly-preview span {
            animation: none;
        }
    }

    @media(max-width:720px) {
        .designmanual-page .jelly-preview {
            justify-content: flex-start;
        }
    }

    .designmanual-page .control-demo {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .designmanual-page .control-demo img {
        display: block;
        width: 30px;
        height: 30px;
        transform-origin: center;
    }

    .designmanual-page .control-demo img[alt="Pause"] {
        transform: none;
    }

    .designmanual-page .control-demo .arrow-left {
        transform: none;
    }

    .designmanual-page .control-demo .arrow-down {
        transform: rotate(90deg);
    }

    .designmanual-page .control-demo .arrow-right {
        transform: rotate(180deg);
    }

    .designmanual-page .control-demo .arrow-up {
        transform: rotate(270deg);
    }

    .designmanual-page .control-demo span {
        width: 62px;
        height: 62px;
        display: grid;
        place-items: center;
        border: 2px solid #737a9a;
        border-radius: 16px;
        background: #12172c;
        color: #fff;
        font: 900 28px/1 Arial;
        box-shadow: 0 0 16px rgba(37, 215, 255, .16);
    }

    @media(max-width:720px) {
        .designmanual-page .control-demo {
            justify-content: flex-start;
        }

        .designmanual-page .control-demo span {
            width: 58px;
            height: 58px;
        }
    }

    .designmanual-page .adventure-font-card strong {
        font-family: "Nunito", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
        letter-spacing: 0;
    }

    .designmanual-page .adventure-font-card {
        border-color: rgba(114, 239, 255, .5);
        background: linear-gradient(135deg, rgba(114, 239, 255, .08), var(--panel));
    }

    .designmanual-page .montserrat-font-card {
        border-color: rgba(255, 99, 218, .44);
        background: radial-gradient(circle at 78% 18%, rgba(255, 99, 218, .14), transparent 34%), #111522;
    }

    .designmanual-page .montserrat-font-card strong {
        font-family: "Ninabella Montserrat", Arial, sans-serif;
        font-weight: 700;
        letter-spacing: .03em;
        color: #ff63da;
        text-shadow: 0 0 16px rgba(255, 99, 218, .34);
    }

    .designmanual-page .montserrat-font-card span {
        color: #ff63da;
    }

    .designmanual-page .rounded-font-card strong {
        font-family: 'Arial Rounded MT Bold', 'Ninabella Navigation', ui-rounded, sans-serif;
        font-weight: 700;
        color: #25d7ff;
    }
}

/* RESET */
.designmanual-page :where(h1, h2, h3, h4, h5, h6, p, figure) {
    margin: 0;
}

.designmanual-page :where(article, section, div) {
    min-inline-size: 0;
}

.designmanual-page :where(img, svg, canvas) {
    max-inline-size: 100%;
}

/* TOKENS */
.designmanual-page {
    color-scheme: dark;
    padding-block-start: var(--site-header-height);
    background: var(--page-background);
    background-attachment: fixed;
    color: var(--text);
    font: 400 var(--size-body)/1.6 var(--body-font);
    --night: #080b16;
    --page-background: radial-gradient(ellipse 55% 85% at 12% 12%, rgba(37, 215, 255, .11), transparent 70%), radial-gradient(ellipse 50% 90% at 90% 20%, rgba(255, 99, 218, .12), transparent 75%), linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px), var(--night);
    background-size: auto, auto, 32px 32px, 32px 32px, auto;
    --chapter-accent: var(--pink);
    --tone-cyan: var(--cyan);
    --tone-pink: var(--pink);
    --tone-purple: var(--purple);
    --panel: #111526;
    --panel-inner: #171b2a;
    --border: #35405b;
    --text: #f7f8ff;
    --muted: #aeb9d1;
    --muted-text: var(--muted);
    --heading-accent: #71f6ff;
    --cyan: #25d7ff;
    --pink: #ff63da;
    --purple: #b968ff;
    --yellow: #ffe66d;
    --green: #54d68d;
    --orange: #ff9b45;
    --link: #71f6ff;
    --focus: #ffe66d;
    --badge-text: #111;
    --header-background: rgb(9 12 24 / 96%);
    --heading-font: 'Arial Rounded MT Bold', 'Ninabella Navigation', ui-rounded, Arial, sans-serif;
    --body-font: Poppins, Arial, sans-serif;
    --size-title: clamp(36px, 5vw, 60px);
    --size-section: 32px;
    --size-subsection: 24px;
    --size-card-title: 20px;
    --size-body: 18px;
    --size-caption: 14px;
    --space-small: 12px;
    --space: 16px;
    --space-content: 20px;
    --space-block: 24px;
    --space-section: 48px;
    --padding-card: 20px;
    --padding-sample: 16px;
    --padding-section: 24px;
    --radius-card: 16px;
    --radius-sample: 12px;
    --radius-section: 20px;
    --nav-width: 250px;
    --swatch-size: 50px;
    --sample-width: 110px;
    --sample-height: 116px;
    --art-size: 64px;
    --chapter-columns: 3;
    --anchor-offset: 104px;
}

/* BASE */
@font-face {
    font-family: 'Ninabella Montserrat';
    src: url('../assets/fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

.designmanual-page main :where(h1, h2, h3, h4, h5, h6) {
    color: var(--local-heading-color, var(--text));
    font-family: var(--heading-font);
    font-weight: 700;
    line-height: 1.3;
}

.designmanual-page main h1 {
    font-size: var(--size-title);
    line-height: 1.15;
}

.designmanual-page main h2 {
    font-size: var(--size-section);
}

.designmanual-page main h3 {
    font-size: var(--local-h3-size, var(--size-subsection));
}

.designmanual-page main :where(h4, h5, h6) {
    font-size: var(--size-card-title);
}

.designmanual-page main p {
    max-inline-size: var(--copy-width, 65ch);
    color: var(--copy-color, var(--muted));
    font-size: var(--size-body);
    line-height: 1.6;
}

.designmanual-page main :where(small, figcaption, label, th, td) {
    font-size: var(--size-caption);
    line-height: 1.5;
}

.designmanual-page main :where(code, .dm-hex) {
    color: var(--copy-color, var(--muted));
    font: 400 var(--size-caption)/1.5 var(--body-font);
}

.designmanual-page main a {
    color: var(--link);
    text-underline-offset: 4px;
    overflow-wrap: anywhere;
}

.designmanual-page main a:hover {
    color: var(--text);
}

.designmanual-page :where(a, button, summary):focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 4px;
}

.designmanual-page :where(.manual-chapter, .manual-section, .manual-overview) {
    scroll-margin-block-start: var(--anchor-offset);
}

.designmanual-page :where(.site-header, .site-footer) {
    background: var(--header-background);
    color: var(--text);
    border-color: var(--border);
}

.designmanual-page .menu-toggle,
.designmanual-page .site-nav-mega summary,
.designmanual-page .site-footer a {
    color: var(--text);
}

.designmanual-page .menu-toggle span {
    background: currentColor;
}

/* LAYOUT */
.designmanual-page main {
    inline-size: calc(100% - var(--nav-width) - 64px);
    max-inline-size: 1400px;
    margin-inline: calc(var(--nav-width) + 40px) 24px;
    padding-block-end: var(--space-section);
}

.designmanual-page .manual-hero,
.designmanual-page .manual-overview,
.designmanual-page .manual-section,
.designmanual-page .dm-game-part,
.designmanual-page .manual-palette-intro {
    display: grid;
    gap: var(--space-block);
}

.designmanual-page .manual-hero,
.designmanual-page .manual-section {
    padding-block: var(--space-section);
}

.designmanual-page .manual-section {
    border-block-end: 1px solid var(--border);
}

.designmanual-page .manual-overview {
    padding-block-end: var(--space-section);
}

.designmanual-page .manual-overview nav {
    display: grid;
    grid-template-columns: repeat(var(--chapter-columns), minmax(0, 1fr));
    gap: var(--space);
}

.designmanual-page .dm-grid {
    --grid-columns: 2;
    display: grid;
    grid-template-columns: var(--grid-template, repeat(var(--grid-columns), minmax(0, 1fr)));
    align-items: stretch;
    gap: var(--space);
}

.designmanual-page .world-grid,
.designmanual-page .dm-sound-grid {
    --grid-columns: 3;
}

.designmanual-page .dm-grid--3 {
    --grid-columns: 3;
}

.designmanual-page .dm-grid--4 {
    --grid-columns: 4;
}

.designmanual-page .dm-grid--5 {
    --grid-columns: 5;
}

.designmanual-page .dm-art-grid {
    /* At least 160 px per card, with no more than six equal columns. */
    --grid-template: repeat(auto-fit, minmax(max(160px, calc((100% - 5 * var(--space)) / 6)), 1fr));
}

.designmanual-page .dm-game-part > .dm-grid > :only-child {
    grid-column: 1 / -1;
}

.designmanual-page .hero-badges,
.designmanual-page .manual-link-row,
.designmanual-page .dm-game-nav,
.designmanual-page .component-board {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-small);
}

.designmanual-page .hero-badges > span {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    background: var(--panel);
    font-size: var(--size-caption);
    line-height: 1.5;
}

.designmanual-page .logo-lock-card,
.designmanual-page .manual-sound-columns,
.designmanual-page .mine-color-groups,
.designmanual-page .jelly-manual-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space);
}

.designmanual-page .logo-spec-grid {
    grid-column: 1 / -1;
}

.designmanual-page .frequency-meaning-grid,
.designmanual-page .gradient-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space);
}

.designmanual-page .inline-icon-sprite {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    overflow: hidden;
}

.designmanual-page .manual-empty-status:empty {
    display: none;
}

/* COMPONENTS */
.designmanual-page .dm-card {
    --local-h3-size: var(--size-card-title);
    --local-heading-color: var(--heading-accent);
    display: var(--card-display, flex);
    flex-direction: column;
    gap: var(--card-gap, var(--space));
    padding: var(--card-padding, var(--padding-card));
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--panel-inner);
}

.designmanual-page .dm-art-card {
    --card-padding: var(--padding-sample);
    --card-gap: var(--space-small);
    align-items: center;
    text-align: center;
}

.designmanual-page .dm-art-card :is(h3, h4, strong) {
    max-inline-size: 100%;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.designmanual-page .world-grid > .dm-card {
    --card-padding: 0;
    --card-gap: 0;
    overflow: hidden;
}

.designmanual-page .origin-card {
    --card-display: grid;
    grid-template-columns: var(--art-size) minmax(0, 1fr);
    align-items: center;
    --card-gap: var(--space-content);
}

.designmanual-page .origin-card h3 {
    margin-block-end: var(--space);
}

.designmanual-page .logo-lock-preview {
    --card-display: grid;
    place-items: center;
    min-block-size: 200px;
}

.designmanual-page .logo-lock-preview > .site-brand {
    transform: scale(2);
    transform-origin: center;
}

.designmanual-page .manual-chapter,
.designmanual-page .dm-game-part,
.designmanual-page .jelly-manual-card {
    padding: var(--padding-section);
    border: 1px solid var(--border);
    border-radius: var(--radius-section);
    background: var(--panel);
}

.designmanual-page .manual-chapter {
    display: flex;
    align-items: flex-start;
    gap: var(--space-content);
    margin-block-start: var(--space-section);
}

.designmanual-page .manual-chapter > span {
    flex: none;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--panel-inner);
    color: var(--heading-accent);
    font-size: var(--size-caption);
    font-weight: 700;
}

.designmanual-page .manual-chapter p {
    margin-block-start: 8px;
}

.designmanual-page .section-heading,
.designmanual-page .dm-numbered-heading {
    display: flex;
    gap: var(--space-small);
    align-items: baseline;
}

.designmanual-page .section-heading {
    align-items: flex-start;
}

.designmanual-page .section-heading > span {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    block-size: 48px;
    border-radius: 8px;
    color: var(--badge-text);
    background: var(--pink);
    font-size: 16px;
    font-weight: 700;
}

.designmanual-page .dm-numbered-heading > span {
    display: inline-grid;
    place-items: center;
    flex: 0 0 28px;
    block-size: 28px;
    border-radius: 8px;
    color: var(--heading-accent);
    background: color-mix(in srgb, var(--cyan) 10%, var(--panel));
    font: 700 16px/1 var(--body-font);
}

.designmanual-page .eyebrow,
.designmanual-page .section-heading p {
    font-family: var(--body-font);
    --copy-width: none;
    --copy-color: var(--heading-accent);
    --size-body: var(--size-caption);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.designmanual-page .manual-palette-intro {
    padding-block-start: var(--space-block);
    border-block-start: 1px solid var(--border);
}

.designmanual-page .manual-overview h2 span {
    color: var(--chapter-accent);
}

.designmanual-page .manual-overview nav a {
    display: grid;
    align-content: start;
    gap: var(--space-small);
    padding: var(--padding-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--panel);
    text-decoration: none;
}

.designmanual-page .manual-overview nav b {
    font-size: var(--size-caption);
    color: var(--chapter-accent);
}

.designmanual-page .manual-overview nav strong {
    color: var(--text);
    font-family: var(--heading-font);
    font-size: var(--size-card-title);
}

.designmanual-page .manual-overview nav span {
    color: var(--muted);
    font-size: 16px;
}

.designmanual-page .designm-nav {
    position: fixed;
    z-index: 20;
    inset: 100px auto calc(max(18px, env(safe-area-inset-bottom)) + 52px + var(--space)) 16px;
    inline-size: var(--nav-width);
    overflow: auto;
    overscroll-behavior: contain;
    padding: var(--space);
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
}

.designmanual-page .designm-nav:not([open]) {
    inset-block-end: auto;
}

.designmanual-page .designm-nav summary {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: var(--panel);
    box-shadow: 0 calc(-1 * var(--space)) 0 var(--panel);
    color: var(--heading-accent);
    font-size: var(--size-body);
    font-weight: 700;
    cursor: pointer;
}

.designmanual-page .designm-nav nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-block-start: var(--space);
}

.designmanual-page .designm-nav a {
    display: block;
    padding: 7px 10px;
    border-inline-start: 3px solid transparent;
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
}

.designmanual-page .designm-nav a[data-chapter] {
    margin-block-start: var(--space-small);
    color: var(--heading-accent);
    font-weight: 700;
}

.designmanual-page .designm-nav a:is(:hover, [aria-current='location']) {
    color: var(--text);
    background: var(--panel-inner);
    border-inline-start-color: var(--pink);
}

.designmanual-page .dm-colour-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 14px;
}

.designmanual-page .dm-colour-card,
.designmanual-page .logo-effect-token {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    inline-size: var(--sample-width);
    min-block-size: var(--sample-height);
    padding: var(--padding-sample) 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sample);
    background: var(--panel-inner);
    text-align: center;
}

.designmanual-page .dm-colour-card :is(strong, b) {
    font-size: var(--size-caption);
    line-height: 1.5;
    font-weight: 600;
}

.designmanual-page .dm-swatch,
.designmanual-page .dm-colour-card > i {
    display: block;
    flex: 0 0 var(--swatch-size);
    inline-size: var(--swatch-size);
    block-size: var(--swatch-size);
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 4px;
    background: var(--swatch);
}

.designmanual-page .theme-token {
    display: block;
}

.designmanual-page .gradient-grid article {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 10px;
    padding: var(--padding-sample);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--panel-inner);
    text-align: center;
}

.designmanual-page .gradient-grid i {
    display: block;
    inline-size: 100px;
    block-size: 100px;
    border-radius: 4px;
}

.designmanual-page .dm-illustration {
    display: block;
    block-size: auto;
    max-inline-size: 100%;
    align-self: start;
}

.designmanual-page .dm-art {
    display: block;
    flex: none;
    inline-size: var(--preview-size, var(--art-size));
    block-size: var(--preview-size, var(--art-size));
    object-fit: contain;
    margin-inline: auto;
}

.designmanual-page .orientation-card > .dm-art {
    --preview-size: 154px;
    align-self: center;
}

.designmanual-page .dm-catalog-group {
    display: grid;
    gap: var(--space-content);
}

.designmanual-page .dm-catalog-item {
    display: grid;
    grid-template-columns: var(--art-size) minmax(0, 1fr);
    align-items: start;
    gap: var(--space);
}

.designmanual-page .dm-catalog-copy {
    display: grid;
    gap: var(--space-small);
}

.designmanual-page .command-library {
    --preview-size: 32px;
}

.designmanual-page .command-library .dm-art {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
}

.designmanual-page .dm-art-card .game-block {
    inline-size: var(--art-size);
    block-size: var(--art-size);
}

.designmanual-page .dm-art-card > strong {
    font-size: 16px;
    line-height: 1.4;
}

.designmanual-page .original-icon {
    object-fit: contain;
}

.designmanual-page .audio-manual-icon .original-icon,
.designmanual-page .jelly-manual-card--stacked {
    grid-template-columns: minmax(0, 1fr);
}

.designmanual-page .jelly-manual-card--stacked > img {
    display: block;
    inline-size: min(100%, 720px);
    block-size: auto;
    justify-self: center;
}

.designmanual-page .manual-audio-icon {
    filter: var(--audio-icon-filter, brightness(0) invert(1));
}

.designmanual-page .world-grid img {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.designmanual-page .world-grid article > div {
    display: grid;
    gap: 6px;
    padding: var(--padding-card);
}

.designmanual-page .world-grid span {
    font-size: 16px;
    line-height: 1.5;
    color: var(--muted);
}

.designmanual-page .dm-link,
.designmanual-page .dm-game-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-inline-size: 100%;
    min-block-size: 44px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel);
    text-decoration: none;
}

.designmanual-page :is(.dm-link, .dm-game-nav a, .manual-overview nav a):hover {
    border-color: var(--cyan);
}

.designmanual-page .manual-float-actions {
    position: fixed;
    z-index: 30;
    inset-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right));
    inset-block-end: max(18px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.designmanual-page .manual-float-actions a {
    display: grid;
    place-items: center;
    inline-size: 52px;
    block-size: 52px;
    border: 2px solid var(--cyan);
    border-radius: 16px;
    background: var(--night);
    color: var(--link);
    box-shadow: 0 0 18px #25d7ff33;
    pointer-events: auto;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.designmanual-page .manual-float-actions a:is(:hover, :focus-visible) {
    color: var(--link);
    transform: translateY(-3px);
    box-shadow: 0 0 25px #25d7ff66;
}

.designmanual-page .manual-float-actions svg {
    inline-size: 25px;
    block-size: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.designmanual-page .manual-float-actions .to-games {
    display: flex;
    justify-content: center;
    inline-size: 76px;
    gap: 7px;
}

.designmanual-page .manual-float-actions .to-games svg:last-child {
    inline-size: 28px;
    block-size: 28px;
    fill: currentColor;
    stroke: none;
}

.designmanual-page .dm-button {
    min-block-size: 44px;
    padding: 10px 18px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sample);
    background: var(--panel);
    color: var(--text);
    font: 600 16px/1.5 var(--body-font);
    cursor: pointer;
}

.designmanual-page .dm-button:hover {
    border-color: var(--cyan);
}

.designmanual-page .sound-sample {
    display: flex;
    gap: var(--space);
    flex-direction: row;
    align-items: center;
    text-align: start;
}

.designmanual-page .sound-sample :is(span, strong, small) {
    display: block;
}

.designmanual-page .sound-sample strong {
    margin-block-end: 6px;
    font-size: var(--size-body);
}

.designmanual-page .sound-sample small {
    color: var(--muted);
    font-weight: 400;
}

.designmanual-page .dm-tone-frequency {
    font-variant-numeric: tabular-nums;
}

.designmanual-page .frequency-meaning-grid article {
    --tone-accent: var(--tone-cyan);
    --tone-border: var(--border);
    display: grid;
    gap: var(--space-small);
    padding: var(--padding-sample);
    border: 2px solid var(--tone-border);
    border-radius: var(--radius-card);
    background: var(--panel);
}

.designmanual-page .frequency-meaning-grid article:nth-child(3n + 2) {
    --tone-accent: var(--tone-pink);
    --tone-border: color-mix(in srgb, var(--tone-pink) 42%, var(--panel));
}

.designmanual-page .frequency-meaning-grid article:nth-child(3n) {
    --tone-accent: var(--tone-purple);
    --tone-border: color-mix(in srgb, var(--tone-purple) 46%, var(--panel));
}

.designmanual-page .frequency-meaning-grid strong {
    color: var(--tone-accent);
}

.designmanual-page .frequency-meaning-grid span {
    font-size: var(--size-caption);
    color: var(--text);
}

.designmanual-page .frequency-tone {
    justify-self: start;
    align-self: end;
    border-color: currentColor;
    background: var(--night);
    color: var(--link);
}

.designmanual-page .logo-spec-grid article > b,
.designmanual-page .logo-signature-section > b {
    display: block;
    color: var(--heading-accent);
    font-size: var(--size-caption);
}

.designmanual-page .logo-hover-demo,
.designmanual-page .logo-signature-section {
    display: grid;
    gap: var(--space);
}

.designmanual-page .logo-hover-stage,
.designmanual-page .cursor-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.designmanual-page .logo-effect-token {
    justify-content: center;
    color: var(--text);
    font: 800 26px/1 Poppins, Arial, sans-serif;
    cursor: pointer;
}

.designmanual-page .logo-effect-token small {
    color: var(--muted);
    font-weight: 400;
}

.designmanual-page .logo-effect-token .brand-sparkle {
    margin: 0;
}

.designmanual-page .logo-effect-token.demo-nina:hover .brand-nina {
    transform: translateY(-2px) rotate(-3deg);
}

.designmanual-page .logo-effect-token.demo-bella:hover .brand-bella {
    transform: translateY(3px);
}

.designmanual-page .logo-effect-token.demo-plus:hover .brand-sparkle {
    transform: rotate(90deg) scale(1.15);
}

.designmanual-page .cursor-preview > span {
    display: grid;
    justify-items: center;
    gap: 10px;
}

.designmanual-page .cursor-preview img {
    inline-size: var(--art-size);
    block-size: var(--art-size);
}

.designmanual-page .background-demo {
    display: grid;
    position: relative;
    overflow: hidden;
    min-block-size: 300px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: #080b16;
}

.designmanual-page .background-demo canvas {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
}

.designmanual-page .background-demo-copy {
    --text: #f7f8ff;
    --copy-color: #f7f8ff;
    --link: #71f6ff;
    position: relative;
    z-index: 1;
    display: grid;
    align-content: end;
    gap: var(--space);
    min-block-size: 300px;
    padding: var(--padding-section);
    background: linear-gradient(transparent, #080b16ef);
}

.designmanual-page .background-demo-copy b {
    font-size: var(--size-caption);
}

.designmanual-page .background-demo-copy a {
    justify-self: start;
}

.designmanual-page .type-grid article > :is(span, strong) {
    display: block;
}

.designmanual-page .type-grid article > span {
    font-size: var(--size-caption);
    color: var(--heading-accent);
}

.designmanual-page .jelly-manual-card > div:last-child {
    display: grid;
    align-content: center;
    gap: var(--space);
}

.designmanual-page .manual-audio-icon {
    display: block;
    inline-size: var(--art-size);
    block-size: var(--art-size);
    object-fit: contain;
}

.designmanual-page .manual-clock-figure {
    display: grid;
    align-content: start;
    gap: var(--space);
}

.designmanual-page .manual-clock-figure > img {
    display: block;
    inline-size: min(100%, 320px);
    block-size: auto;
    margin-inline: auto;
}

.designmanual-page .manual-day-card {
    --card-display: grid;
    align-content: start;
}

.designmanual-page .manual-day-card > img {
    display: block;
    inline-size: 140px;
    block-size: 140px;
    object-fit: contain;
}

.designmanual-page .manual-day-card figcaption {
    display: grid;
    gap: var(--space);
}

.designmanual-page .mine-color-table {
    inline-size: 100%;
    border-collapse: collapse;
    text-align: start;
}

.designmanual-page .mine-color-table :is(th, td) {
    padding: 10px 6px;
    border-block-end: 1px solid var(--border);
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.designmanual-page .mine-color-table th {
    font-weight: 500;
}

.designmanual-page .mine-color-table td:last-child {
    inline-size: 160px;
    white-space: nowrap;
}

.designmanual-page .mine-color-swatch {
    display: inline-block;
    vertical-align: middle;
    margin-inline-end: 8px;
}

.designmanual-page .mine-color-subhead th {
    padding-block-start: var(--space-block);
    color: var(--heading-accent);
}

.designmanual-page .mine-manual-mirror {
    transform: scaleX(-1);
}

/* RESPONSIVE */
@media (max-width: 1100px) {
    .designmanual-page .dm-grid--5 {
        --grid-columns: 2;
    }

    .designmanual-page .dm-catalog-grid {
        --grid-columns: 2;
    }

    .designmanual-page .world-grid {
        --grid-columns: 2;
    }

    .designmanual-page .theme-colour-grid {
        --grid-columns: 1;
    }
}

@media (max-width: 1000px) {
    .designmanual-page {
        --anchor-offset: 160px;
    }

    .designmanual-page main {
        inline-size: calc(100% - 32px);
        margin: 96px 16px 0;
    }

    .designmanual-page .designm-nav {
        inset: 84px 12px auto;
        inline-size: auto;
        max-block-size: min(65dvh, calc(100dvh - 84px - max(18px, env(safe-area-inset-bottom)) - 52px - var(--space)));
    }

    .designmanual-page .designm-nav:not([open]) {
        padding: 12px 16px;
    }
}

@media (max-width: 700px) {
    .designmanual-page {
        --space-section: 32px;
        --padding-card: 16px;
        --padding-section: 16px;
        --size-section: 26px;
        --size-subsection: 22px;
        --chapter-columns: 1;
    }

    .designmanual-page .dm-grid {
        --grid-columns: 1;
    }

    .designmanual-page .logo-lock-card,
    .designmanual-page .manual-sound-columns,
    .designmanual-page .mine-color-groups,
    .designmanual-page .jelly-manual-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .designmanual-page .manual-chapter {
        flex-direction: column;
    }

    .designmanual-page .logo-lock-preview > .site-brand {
        transform: scale(1.5);
    }

    .designmanual-page .logo-lock-preview {
        min-block-size: 130px;
    }
}

@media (max-width: 480px) {
    .designmanual-page .dm-art-grid {
        --grid-template: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .designmanual-page *,
    .designmanual-page *::before,
    .designmanual-page *::after {
        scroll-behavior: auto;
        animation: none;
        transition: none;
    }
}