.tbdd-app,
.tbdd-app * {
    box-sizing: border-box;
}

.tbdd-app {
    --tbdd-ink: #26334a;
    --tbdd-green: #4d9f45;
    --tbdd-gold: #f3bd3f;
    --tbdd-cream: #fff8e8;
    --tbdd-paper: #fffdf8;
    color: var(--tbdd-ink);
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 auto;
    max-width: 1500px;
    width: 100%;
}

.tbdd-shell {
    background: linear-gradient(180deg, #fffaf0 0%, #f7edd6 100%);
    border: 3px solid #8c6239;
    border-radius: 24px;
    box-shadow: 0 14px 32px rgba(60, 40, 20, 0.18);
    min-height: 720px;
    overflow: hidden;
}

.tbdd-header {
    align-items: center;
    background: #fff;
    border-bottom: 3px solid #e6d3ad;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 22px 28px;
}

.tbdd-header h1 {
    color: var(--tbdd-ink);
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1;
    margin: 0;
}

.tbdd-eyebrow {
    color: #8a5b23;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.12em;
    margin: 0 0 7px;
    text-transform: uppercase;
}

.tbdd-help-button,
.tbdd-modal-close {
    align-items: center;
    background: var(--tbdd-gold);
    border: 2px solid #9a6c16;
    border-radius: 50%;
    color: #35240b;
    cursor: pointer;
    display: inline-flex;
    font-size: 24px;
    font-weight: 900;
    height: 48px;
    justify-content: center;
    width: 48px;
}

.tbdd-home {
    padding: 34px;
}

.tbdd-intro {
    font-size: 19px;
    font-weight: 700;
    margin: 0 auto 28px;
    max-width: 760px;
    text-align: center;
}

.tbdd-choice-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 auto;
    max-width: 1050px;
}

.tbdd-choice-card {
    align-items: center;
    background: #fff;
    border: 4px solid #d6c39d;
    border-radius: 22px;
    box-shadow: 0 8px 0 rgba(123, 91, 45, 0.16);
    color: var(--tbdd-ink);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 210px;
    padding: 26px;
    text-align: center;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.tbdd-choice-card:hover,
.tbdd-choice-card:focus-visible {
    box-shadow: 0 12px 0 rgba(123, 91, 45, 0.13);
    transform: translateY(-4px);
}

.tbdd-choice-card strong {
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.1;
    margin: 8px 0;
}

.tbdd-choice-card span:last-child {
    font-size: 16px;
    line-height: 1.4;
    max-width: 330px;
}

.tbdd-choice-icon {
    font-size: 50px;
    line-height: 1;
}

.tbdd-choice-color { border-color: #e7a53a; }
.tbdd-choice-blank { border-color: #56a9dc; }
.tbdd-choice-challenge { border-color: #7ebd64; }
.tbdd-choice-saved { border-color: #ad78c6; }

.tbdd-device-note {
    color: #695d4c;
    font-size: 13px;
    margin: 26px auto 0;
    max-width: 720px;
    text-align: center;
}

.tbdd-studio {
    min-height: 650px;
}

.tbdd-studio-topbar {
    align-items: center;
    background: #f7ecd7;
    border-bottom: 2px solid #d9c39a;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
}

.tbdd-small-button,
.tbdd-action-bar button,
.tbdd-modal-actions button,
.tbdd-saved-actions button {
    background: #fff;
    border: 2px solid #b2915f;
    border-radius: 10px;
    color: var(--tbdd-ink);
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    min-height: 42px;
    padding: 8px 13px;
}

.tbdd-small-button:hover,
.tbdd-action-bar button:hover,
.tbdd-modal-actions button:hover,
.tbdd-saved-actions button:hover {
    background: #fff5ce;
}

.tbdd-small-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.tbdd-title-field {
    align-items: center;
    display: flex;
    flex: 1 1 320px;
    gap: 8px;
}

.tbdd-title-field span {
    font-size: 13px;
    font-weight: 800;
}

.tbdd-title-field input {
    background: #fff;
    border: 2px solid #cbb58f;
    border-radius: 9px;
    flex: 1;
    font: inherit;
    min-height: 42px;
    padding: 8px 10px;
}

.tbdd-history-buttons {
    display: flex;
    gap: 7px;
}

.tbdd-save-status {
    color: #48733f;
    font-size: 13px;
    font-weight: 800;
    min-width: 130px;
}

.tbdd-studio-layout {
    display: grid;
    grid-template-columns: 285px minmax(0, 1fr);
    min-height: 560px;
}

.tbdd-tools {
    background: #fffaf0;
    border-right: 2px solid #d9c39a;
    overflow-y: auto;
    padding: 16px;
}

.tbdd-tool-group + .tbdd-tool-group {
    border-top: 1px solid #ddcaa6;
    margin-top: 16px;
    padding-top: 16px;
}

.tbdd-tool-label {
    display: block;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.04em;
    margin-bottom: 9px;
    text-transform: uppercase;
}

.tbdd-tool-grid {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tbdd-tool {
    background: #fff;
    border: 2px solid #c8b28a;
    border-radius: 9px;
    color: var(--tbdd-ink);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    min-height: 44px;
    padding: 6px;
}

.tbdd-tool.is-active {
    background: #ffe49b;
    border-color: #a96d11;
    box-shadow: inset 0 0 0 2px #fff4cf;
}

.tbdd-color-row {
    align-items: center;
    display: flex;
    gap: 10px;
}

.tbdd-color-row input[type="color"] {
    height: 44px;
    width: 72px;
}

.tbdd-current-color {
    border: 2px solid transparent;
    border-radius: 50%;
    display: inline-block;
    height: 34px;
    width: 34px;
}

.tbdd-palette {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(6, 1fr);
    margin-top: 10px;
}

.tbdd-swatch {
    border: 2px solid rgba(0, 0, 0, 0.22);
    border-radius: 50%;
    cursor: pointer;
    height: 27px;
    padding: 0;
    width: 27px;
}

.tbdd-tools input[type="range"] {
    width: 100%;
}

.tbdd-size-tool-group {
    align-items: stretch;
}

.tbdd-size-preview {
    align-items: center;
    background-color: #fff;
    background-image: linear-gradient(45deg, #ececec 25%, transparent 25%), linear-gradient(-45deg, #ececec 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ececec 75%), linear-gradient(-45deg, transparent 75%, #ececec 75%);
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
    border: 2px solid #c5b18c;
    border-radius: 14px;
    display: flex;
    height: 82px;
    justify-content: center;
    margin: 8px 0 10px;
    overflow: hidden;
}

.tbdd-size-preview.is-fill-tool::after {
    color: #6b5435;
    content: attr(data-no-size-label);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .1em;
}

.tbdd-size-preview.is-fill-tool .tbdd-size-dot {
    display: none;
}

.tbdd-size-dot {
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 50%;
    box-sizing: border-box;
    display: block;
    flex: 0 0 auto;
    min-height: 2px;
    min-width: 2px;
    transition: width 80ms linear, height 80ms linear, background 80ms linear, opacity 80ms linear;
}

.tbdd-size-adjuster {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
}

.tbdd-size-step {
    align-items: center;
    background: #fff8e8;
    border: 2px solid #9b7b45;
    border-radius: 50%;
    color: #402f18;
    cursor: pointer;
    display: inline-flex;
    font-size: 23px;
    font-weight: 900;
    height: 36px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    width: 36px;
}

.tbdd-size-step:disabled {
    cursor: not-allowed;
    opacity: .38;
}

.tbdd-size-value {
    color: #5b452b;
    display: block;
    font-size: 13px;
    font-weight: 900;
    margin-top: 7px;
    min-height: 20px;
    text-align: center;
}

.tbdd-zoom-controls {
    display: grid;
    gap: 7px;
    grid-template-columns: 1fr 1fr;
}

.tbdd-zoom-controls .tbdd-tool-label {
    grid-column: 1 / -1;
}

.tbdd-canvas-stage {
    align-items: flex-start;
    background-color: #c9c2b5;
    background-image: linear-gradient(45deg, rgba(255,255,255,.24) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,.24) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255,255,255,.24) 75%), linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.24) 75%);
    background-position: 0 0, 0 12px, 12px -12px, -12px 0;
    background-size: 24px 24px;
    display: flex;
    justify-content: center;
    min-width: 0;
    overflow: auto;
    padding: 20px;
}

.tbdd-canvas-wrap {
    background: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    flex: 0 0 auto;
    position: relative;
}

.tbdd-canvas-wrap canvas {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.tbdd-paint-canvas {
    cursor: crosshair;
    touch-action: none;
    z-index: 1;
}

.tbdd-line-canvas {
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 2;
}

.tbdd-action-bar {
    align-items: center;
    background: #fff;
    border-top: 2px solid #d9c39a;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 14px;
}

.tbdd-action-bar button {
    min-width: 108px;
}

.tbdd-action-bar .tbdd-finished-button {
    background: var(--tbdd-green);
    border-color: #2f6e2b;
    color: #fff;
}

.tbdd-modal[hidden] {
    display: none;
}

.tbdd-modal {
    align-items: center;
    background: rgba(24, 24, 28, 0.72);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 100000;
}

body.tbdd-modal-open {
    overflow: hidden;
}

.tbdd-modal-card {
    background: var(--tbdd-paper);
    border: 4px solid #8c6239;
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
    max-height: 90vh;
    max-width: 660px;
    overflow: auto;
    padding: 34px;
    position: relative;
    text-align: center;
    width: 100%;
}

.tbdd-large-modal {
    max-width: 1040px;
}

.tbdd-modal-card h2 {
    color: var(--tbdd-ink);
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1.15;
    margin: 8px 0 14px;
}

.tbdd-modal-close {
    height: 42px;
    position: absolute;
    right: 12px;
    top: 12px;
    width: 42px;
}

.tbdd-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 22px;
}

.tbdd-modal-actions button:first-child {
    background: var(--tbdd-green);
    border-color: #2f6e2b;
    color: #fff;
}

.tbdd-challenge-category {
    color: #805c2d;
    font-weight: 800;
}

.tbdd-sheet-gallery,
.tbdd-saved-gallery {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 24px;
}

.tbdd-sheet-card {
    background: #fff;
    border: 3px solid #d7c29c;
    border-radius: 15px;
    color: var(--tbdd-ink);
    cursor: pointer;
    overflow: hidden;
    padding: 10px;
}

.tbdd-sheet-card img {
    aspect-ratio: 17 / 22;
    background: #fff;
    border-radius: 9px;
    display: block;
    object-fit: contain;
    width: 100%;
}

.tbdd-sheet-card strong {
    display: block;
    font-size: 16px;
    padding: 10px 4px 4px;
}

.tbdd-saved-card {
    background: #fff;
    border: 2px solid #d7c29c;
    border-radius: 15px;
    overflow: hidden;
    text-align: left;
}

.tbdd-saved-card > img {
    aspect-ratio: 17 / 22;
    background: #eee;
    display: block;
    object-fit: contain;
    width: 100%;
}

.tbdd-saved-card > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    padding: 12px;
}

.tbdd-saved-card strong {
    font-size: 17px;
}

.tbdd-saved-card span {
    color: #6b6254;
    font-size: 13px;
    margin-top: 4px;
}

.tbdd-saved-actions {
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr 1fr;
    padding: 0 12px 12px;
}

.tbdd-saved-actions button {
    font-size: 12px;
    min-height: 36px;
    padding: 5px 7px;
}

.tbdd-saved-actions .tbdd-delete-button {
    color: #a52121;
    grid-column: 1 / -1;
}

.tbdd-empty-state {
    align-items: center;
    background: #fff;
    border: 2px dashed #c1a97f;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    grid-column: 1 / -1;
    padding: 36px;
}

.tbdd-completion-actions button {
    min-width: 150px;
}

.tbdd-toast {
    background: #26334a;
    border: 2px solid #fff;
    border-radius: 12px;
    bottom: 24px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
    color: #fff;
    font-weight: 800;
    left: 50%;
    max-width: min(90vw, 520px);
    padding: 13px 18px;
    position: fixed;
    transform: translateX(-50%);
    z-index: 100001;
}

@media (max-width: 960px) {
    .tbdd-studio-layout {
        grid-template-columns: 1fr;
    }

    .tbdd-tools {
        border-bottom: 2px solid #d9c39a;
        border-right: 0;
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-height: none;
    }

    .tbdd-tool-group + .tbdd-tool-group {
        border-left: 1px solid #ddcaa6;
        border-top: 0;
        margin: 0;
        padding: 0 0 0 14px;
    }

    .tbdd-zoom-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .tbdd-shell {
        border-left: 0;
        border-radius: 0;
        border-right: 0;
    }

    .tbdd-header,
    .tbdd-home {
        padding: 18px;
    }

    .tbdd-choice-grid,
    .tbdd-sheet-gallery,
    .tbdd-saved-gallery {
        grid-template-columns: 1fr;
    }

    .tbdd-choice-card {
        min-height: 170px;
    }

    .tbdd-tools {
        display: block;
        padding: 12px;
    }

    .tbdd-tool-group + .tbdd-tool-group {
        border-left: 0;
        border-top: 1px solid #ddcaa6;
        margin-top: 12px;
        padding: 12px 0 0;
    }

    .tbdd-tool-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tbdd-palette {
        grid-template-columns: repeat(8, 1fr);
    }

    .tbdd-canvas-stage {
        min-height: 500px;
        padding: 12px;
    }

    .tbdd-action-bar {
        bottom: 0;
        position: sticky;
        z-index: 20;
    }

    .tbdd-action-bar button {
        flex: 1 1 42%;
    }

    .tbdd-modal {
        padding: 10px;
    }

    .tbdd-modal-card {
        max-height: 95vh;
        padding: 26px 18px;
    }
}


/* v0.1.3 text, shapes, and color editor */
.tbdd-tool-options[hidden] {
    display: none;
}

.tbdd-shape-grid {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tbdd-shape-button,
.tbdd-shape-mode-button {
    background: #fff;
    border: 2px solid #c8b28a;
    border-radius: 9px;
    color: var(--tbdd-ink);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    min-height: 38px;
    padding: 5px;
}

.tbdd-shape-button.is-active,
.tbdd-shape-mode-button.is-active {
    background: #dff3d6;
    border-color: #4d8d40;
    box-shadow: inset 0 0 0 2px #f5fff1;
}

.tbdd-shape-mode {
    display: grid;
    gap: 7px;
    grid-template-columns: 1fr 1fr;
    margin-top: 8px;
}

.tbdd-tool-hint {
    color: #6b5b46;
    font-size: 12px;
    line-height: 1.35;
    margin: 8px 0 0;
}

.tbdd-color-row {
    align-items: stretch;
}

.tbdd-color-editor-launch {
    align-items: center;
    background: #fff;
    border: 2px solid #b2915f;
    border-radius: 10px;
    color: var(--tbdd-ink);
    cursor: pointer;
    display: flex;
    flex: 1;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    gap: 8px;
    justify-content: center;
    min-height: 46px;
    padding: 5px 9px;
}

.tbdd-color-editor-launch .tbdd-current-color {
    flex: 0 0 auto;
    height: 30px;
    width: 30px;
}

.tbdd-color-row input[type="color"] {
    border: 2px solid #b2915f;
    border-radius: 10px;
    cursor: pointer;
    flex: 0 0 54px;
    height: 46px;
    padding: 3px;
    width: 54px;
}

.tbdd-color-actions {
    display: grid;
    gap: 6px;
    grid-template-columns: 1fr 1fr;
    margin-top: 9px;
}

.tbdd-color-actions .tbdd-small-button {
    font-size: 11px;
    min-height: 38px;
    padding: 5px;
}

.tbdd-paint-canvas.is-color-matcher {
    cursor: copy;
}

.tbdd-paint-canvas.is-text-placement {
    cursor: text;
}

.tbdd-field-label,
.tbdd-text-settings label,
.tbdd-color-values label {
    color: var(--tbdd-ink);
    display: flex;
    flex-direction: column;
    font-size: 13px;
    font-weight: 900;
    gap: 6px;
    text-align: left;
}

.tbdd-text-modal-card textarea,
.tbdd-text-modal-card select,
.tbdd-color-values input {
    background: #fff;
    border: 2px solid #c7ad82;
    border-radius: 10px;
    color: var(--tbdd-ink);
    font: inherit;
    min-height: 44px;
    padding: 9px 11px;
    width: 100%;
}

.tbdd-text-modal-card textarea {
    margin: 8px 0 16px;
    resize: vertical;
}

.tbdd-text-settings {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr 1fr;
    margin-top: 10px;
}

.tbdd-text-settings output {
    color: #6b5435;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.tbdd-text-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    justify-content: center;
    margin: 18px 0;
}

.tbdd-text-toggles label {
    align-items: center;
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    gap: 5px;
}

.tbdd-text-preview {
    align-items: center;
    background: #fff;
    border: 2px dashed #c7ad82;
    border-radius: 13px;
    display: flex;
    justify-content: center;
    min-height: 110px;
    overflow-wrap: anywhere;
    padding: 18px;
    white-space: pre-wrap;
}

.tbdd-color-modal-card {
    text-align: left;
}

.tbdd-color-modal-card > h2,
.tbdd-color-modal-card > .tbdd-eyebrow {
    text-align: center;
}

.tbdd-color-editor-layout {
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1.45fr) minmax(250px, .85fr);
    margin-top: 22px;
}

.tbdd-spectrum-column {
    min-width: 0;
}

.tbdd-color-spectrum {
    border: 2px solid #aaa;
    border-radius: 12px;
    cursor: crosshair;
    display: block;
    height: auto;
    max-height: 330px;
    touch-action: none;
    width: 100%;
}

.tbdd-hue-label {
    align-items: center;
    display: grid;
    font-size: 13px;
    font-weight: 900;
    gap: 10px;
    grid-template-columns: 42px 1fr;
    margin-top: 12px;
}

.tbdd-hue-label input[type="range"] {
    appearance: none;
    background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    border: 1px solid #888;
    border-radius: 999px;
    height: 18px;
    width: 100%;
}

.tbdd-hue-label input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    background: #fff;
    border: 2px solid #222;
    border-radius: 50%;
    height: 28px;
    width: 28px;
}

.tbdd-color-values {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.tbdd-color-comparison {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr 1fr;
}

.tbdd-color-comparison > div {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 900;
    gap: 6px;
}

.tbdd-color-large-swatch {
    border: 2px solid #666;
    border-radius: 10px;
    display: block;
    height: 70px;
    width: 100%;
}

.tbdd-rgb-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, 1fr);
}

.tbdd-color-match-actions {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr 1fr;
}

.tbdd-editor-color-section {
    border-top: 1px solid #d7c29c;
    margin-top: 22px;
    padding-top: 18px;
}

.tbdd-editor-palette {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(12, minmax(24px, 1fr));
}

.tbdd-editor-swatch,
.tbdd-custom-color {
    aspect-ratio: 1;
    border: 2px solid rgba(0,0,0,.28);
    border-radius: 50%;
    cursor: pointer;
    min-height: 28px;
    padding: 0;
}

.tbdd-custom-color-heading {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.tbdd-custom-colors {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(12, minmax(28px, 1fr));
}

.tbdd-custom-color:not(.has-color) {
    background: transparent;
    border-style: dashed;
    cursor: default;
}

@media (max-width: 960px) {
    .tbdd-color-editor-layout {
        grid-template-columns: 1fr;
    }

    .tbdd-editor-palette {
        grid-template-columns: repeat(8, minmax(24px, 1fr));
    }
}

@media (max-width: 720px) {
    .tbdd-text-settings,
    .tbdd-rgb-grid,
    .tbdd-color-match-actions {
        grid-template-columns: 1fr;
    }

    .tbdd-editor-palette,
    .tbdd-custom-colors {
        grid-template-columns: repeat(6, minmax(28px, 1fr));
    }

    .tbdd-color-editor-layout {
        gap: 16px;
    }
}

/* -------------------------------------------------------------------------
 * Remy Le-Cluck' Doodle Den visual system, v0.2.0
 * ---------------------------------------------------------------------- */
.tbdd-app {
    --tbdd-ink: #3e2a1f;
    --tbdd-deep-brown: #3b2418;
    --tbdd-brown: #6d4125;
    --tbdd-wood: #754725;
    --tbdd-green: #3f7837;
    --tbdd-green-dark: #285a29;
    --tbdd-gold: #d9a93d;
    --tbdd-orange: #c75d28;
    --tbdd-purple: #765095;
    --tbdd-cream: #f8eed2;
    --tbdd-paper: #fffaf0;
    --tbdd-paper-dark: #ead9af;
    color: var(--tbdd-ink);
    font-family: "Trebuchet MS", Arial, sans-serif;
    max-width: 1560px;
}

.tbdd-shell {
    background:
        radial-gradient(circle at 8% 12%, rgba(91, 135, 70, .22), transparent 21%),
        radial-gradient(circle at 92% 30%, rgba(210, 160, 61, .18), transparent 18%),
        repeating-linear-gradient(90deg, rgba(74, 43, 24, .07) 0 2px, transparent 2px 18px),
        linear-gradient(180deg, #5b351e 0%, #7a4b2a 45%, #4a2a19 100%);
    border: 5px solid #3a2318;
    border-radius: 20px;
    box-shadow: inset 0 0 0 3px rgba(221, 177, 91, .35), 0 18px 42px rgba(39, 24, 12, .28);
    overflow: hidden;
}

.tbdd-site-header {
    align-items: center;
    background:
        linear-gradient(rgba(255, 250, 237, .96), rgba(239, 222, 181, .97)),
        repeating-linear-gradient(8deg, transparent 0 20px, rgba(95, 66, 36, .06) 20px 21px);
    border-bottom: 4px solid #5d3922;
    display: grid;
    gap: 18px;
    grid-template-columns: 108px minmax(240px, 1fr) auto;
    min-height: 96px;
    padding: 8px 22px;
    position: relative;
    z-index: 5;
}

.tbdd-club-logo-link {
    align-items: center;
    display: flex;
    justify-content: center;
}

.tbdd-club-logo {
    display: block;
    height: 88px;
    object-fit: contain;
    width: 88px;
}

.tbdd-breadcrumb {
    align-items: center;
    color: #4d3a2c;
    display: flex;
    flex-wrap: wrap;
    font-family: Georgia, serif;
    font-size: 17px;
    gap: 10px;
}

.tbdd-breadcrumb strong {
    color: var(--tbdd-green-dark);
}

.tbdd-header-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: flex-end;
}

.tbdd-header-actions button,
.tbdd-header-actions a,
.tbdd-painted-button,
.tbdd-home-feature-card button,
.tbdd-finish-top {
    background: linear-gradient(#fffdf6, #ead7ad);
    border: 2px solid #795333;
    border-radius: 9px;
    color: #38271c;
    cursor: pointer;
    display: inline-flex;
    font: 800 14px/1.15 "Trebuchet MS", Arial, sans-serif;
    justify-content: center;
    min-height: 42px;
    padding: 10px 15px;
    text-decoration: none;
}

.tbdd-header-actions a:last-child,
.tbdd-painted-button,
.tbdd-finish-top {
    background: linear-gradient(#598e49, #326b34);
    border-color: #234d27;
    color: #fffbea;
}

.tbdd-home {
    padding: 0 22px 30px;
}

.tbdd-home > section,
.tbdd-home-lower-grid,
.tbdd-home-motto,
.tbdd-home > .tbdd-device-note {
    margin-left: auto;
    margin-right: auto;
    max-width: 1320px;
}

.tbdd-hero {
    background:
        linear-gradient(90deg, rgba(26, 18, 12, .18), transparent 25%, transparent 75%, rgba(26, 18, 12, .2)),
        radial-gradient(circle at 17% 20%, rgba(255, 246, 188, .32), transparent 24%),
        repeating-linear-gradient(90deg, rgba(50, 27, 14, .15) 0 1px, transparent 1px 52px),
        linear-gradient(180deg, #816044 0%, #4f3424 100%);
    border: 3px solid #342116;
    border-top: 0;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
    min-height: 480px;
    overflow: hidden;
    padding: 30px 32px 0;
    position: relative;
}

.tbdd-hero::before,
.tbdd-hero::after {
    content: "";
    pointer-events: none;
    position: absolute;
}

.tbdd-hero::before {
    background:
        radial-gradient(circle, #f5dc7a 0 2px, transparent 3px) 0 0 / 28px 28px,
        radial-gradient(circle, rgba(91, 161, 73, .65) 0 3px, transparent 4px) 12px 10px / 42px 42px;
    height: 120px;
    left: -20px;
    opacity: .35;
    top: 42px;
    width: 190px;
}

.tbdd-hero::after {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
    height: 3px;
    left: 0;
    right: 0;
    top: 12px;
}

.tbdd-hero-copy {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 28px;
    position: relative;
    z-index: 2;
}

.tbdd-title-sign {
    background:
        radial-gradient(circle at 10% 15%, rgba(56, 116, 55, .16) 0 4px, transparent 5px),
        radial-gradient(circle at 85% 18%, rgba(126, 65, 136, .16) 0 5px, transparent 6px),
        repeating-linear-gradient(2deg, rgba(93, 61, 33, .08) 0 1px, transparent 1px 14px),
        linear-gradient(#f8efd3, #e8d19f);
    border: 7px solid #4e2d1b;
    border-radius: 38% 18% 31% 16% / 12% 18% 11% 15%;
    box-shadow: inset 0 0 0 3px #b8894e, 0 11px 0 rgba(43, 26, 16, .28);
    max-width: 735px;
    padding: 28px 44px 23px;
    position: relative;
    text-align: center;
    transform: rotate(-1deg);
    width: 100%;
}

.tbdd-title-sign::before,
.tbdd-title-sign::after {
    background: #4d7838;
    border-radius: 50%;
    content: "";
    height: 14px;
    position: absolute;
    top: 16px;
    width: 14px;
}

.tbdd-title-sign::before { left: 22px; }
.tbdd-title-sign::after { right: 22px; }

.tbdd-title-sign h1 {
    color: #3f6c32;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 5vw, 68px);
    letter-spacing: .025em;
    line-height: .98;
    margin: 0;
    overflow-wrap: anywhere;
    text-shadow: 2px 2px 0 #f5dd9b, 4px 4px 0 rgba(81, 47, 24, .17);
}

.tbdd-title-sign p {
    border-top: 2px solid rgba(82, 50, 29, .35);
    color: #4d2c20;
    font: italic 700 22px/1.2 Georgia, serif;
    margin: 16px 0 4px;
    padding-top: 12px;
}

.tbdd-title-sign span {
    color: #59422e;
    font: 700 15px/1.2 Georgia, serif;
}

.tbdd-remy-greeting {
    background: #fff8e6;
    border: 3px solid #98724a;
    box-shadow: 7px 8px 0 rgba(45, 27, 15, .2);
    margin-top: 24px;
    max-width: 570px;
    padding: 17px 24px 15px;
    position: relative;
    text-align: center;
    transform: rotate(.5deg);
}

.tbdd-remy-greeting::before,
.tbdd-remy-greeting::after {
    background: #9b773e;
    border: 2px solid #5c3d23;
    border-radius: 50%;
    content: "";
    height: 14px;
    position: absolute;
    top: 8px;
    width: 14px;
}
.tbdd-remy-greeting::before { left: 10px; }
.tbdd-remy-greeting::after { right: 10px; }

.tbdd-remy-greeting strong {
    color: #8b3d2e;
    display: block;
    font: italic 700 25px/1.2 Georgia, serif;
}

.tbdd-remy-greeting p {
    font: 17px/1.45 Georgia, serif;
    margin: 8px auto 11px;
    max-width: 480px;
}

.tbdd-read-greeting {
    background: transparent;
    border: 0;
    color: var(--tbdd-green-dark);
    cursor: pointer;
    font: 800 13px/1 "Trebuchet MS", Arial, sans-serif;
    text-decoration: underline;
}

.tbdd-hero-remy {
    align-items: end;
    display: flex;
    justify-content: center;
    min-height: 450px;
    position: relative;
}

.tbdd-hero-remy > img {
    filter: drop-shadow(0 14px 8px rgba(22, 13, 8, .3));
    height: min(455px, 38vw);
    max-height: 455px;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

.tbdd-hero-masterpiece {
    background: #b16a33;
    border: 8px solid #4a2a18;
    box-shadow: 7px 8px 0 rgba(28, 17, 10, .25);
    height: 265px;
    overflow: hidden;
    position: absolute;
    right: 4px;
    top: 26px;
    transform: rotate(3deg);
    width: 185px;
    z-index: 1;
}

.tbdd-hero-masterpiece img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.tbdd-create-section,
.tbdd-masterpiece-section,
.tbdd-gallery-section,
.tbdd-featured-challenge,
.tbdd-home-lower-grid {
    background:
        repeating-linear-gradient(7deg, transparent 0 13px, rgba(108, 77, 45, .035) 13px 14px),
        linear-gradient(#fff9e9, #edddb7);
    border: 3px solid #5d3a23;
    box-shadow: 0 9px 0 rgba(46, 27, 15, .18);
    margin-top: 22px;
}

.tbdd-create-section,
.tbdd-masterpiece-section,
.tbdd-gallery-section {
    padding: 27px 28px 30px;
}

.tbdd-create-section > h2,
.tbdd-masterpiece-section h2,
.tbdd-gallery-section h2,
.tbdd-home-feature-card h2,
.tbdd-featured-challenge h2 {
    color: var(--tbdd-green-dark);
    font-family: Georgia, serif;
    letter-spacing: .02em;
    margin-top: 0;
}

.tbdd-create-section > h2 {
    font-size: clamp(30px, 3vw, 44px);
    margin-bottom: 5px;
    text-align: center;
}

.tbdd-section-lead {
    font: 16px/1.45 Georgia, serif;
    margin: 0 auto 22px;
    max-width: 760px;
    text-align: center;
}

.tbdd-choice-grid {
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
}

.tbdd-choice-card {
    background: linear-gradient(#fffdf5, #f0dfb9);
    border: 3px solid #8a6943;
    border-radius: 11px;
    box-shadow: 0 6px 0 rgba(87, 55, 30, .18);
    min-height: 300px;
    padding: 20px 18px 16px;
    position: relative;
}

.tbdd-choice-card::before {
    background: rgba(141, 100, 53, .12);
    border-radius: 50%;
    content: "";
    height: 11px;
    left: 10px;
    position: absolute;
    top: 10px;
    width: 11px;
}

.tbdd-choice-card strong {
    color: var(--tbdd-green-dark);
    font-family: Georgia, serif;
    font-size: clamp(22px, 2.1vw, 30px);
}

.tbdd-choice-card > span:not(.tbdd-card-object) {
    font: 15px/1.4 Georgia, serif;
}

.tbdd-choice-card em {
    color: #6a5034;
    font: italic 14px/1.35 Georgia, serif;
    margin-top: 13px;
}

.tbdd-card-object {
    align-items: center;
    background: #fffdf8;
    border: 5px solid #775032;
    box-shadow: 4px 5px 0 rgba(69, 41, 20, .15);
    color: #9c5229;
    display: flex;
    font: 800 54px/1 Georgia, serif;
    height: 120px;
    justify-content: center;
    margin-bottom: 5px;
    width: 100px;
}

.tbdd-clipboard-art { transform: rotate(-3deg); }
.tbdd-blank-canvas { border-color: #99714a; position: relative; }
.tbdd-blank-canvas::after { background: #7c512e; bottom: -22px; content: ""; height: 24px; left: 42px; position: absolute; width: 10px; }
.tbdd-challenge-card { background: #e8d3a2; border-color: #7a5d35; transform: rotate(2deg); }

.tbdd-section-heading-row {
    align-items: end;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.tbdd-section-heading-row h2 {
    font-size: clamp(28px, 3vw, 40px);
    margin-bottom: 4px;
}

.tbdd-section-heading-row p {
    font-family: Georgia, serif;
    margin: 0;
}

.tbdd-remy-quote {
    background: #f7edcf;
    border: 2px dashed #9a7448;
    color: #6d3f2c;
    font: italic 15px/1.3 Georgia, serif;
    max-width: 290px;
    padding: 10px 13px;
    transform: rotate(1deg);
}

.tbdd-masterpiece-grid {
    align-items: stretch;
    display: grid;
    gap: 23px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tbdd-masterpiece {
    background: #fff8e7;
    margin: 0;
    padding: 11px;
}

.tbdd-masterpiece img {
    background: #f5e7c4;
    display: block;
    height: 310px;
    object-fit: cover;
    width: 100%;
}

.tbdd-frame-red { border: 13px ridge #9c4b32; }
.tbdd-frame-gold { border: 13px ridge #bd8c34; }
.tbdd-frame-blue { border: 13px ridge #477b82; }

.tbdd-masterpiece figcaption {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 5px 2px;
    text-align: center;
}

.tbdd-masterpiece figcaption strong {
    color: #4a2c1e;
    font: 700 18px/1.2 Georgia, serif;
}

.tbdd-masterpiece figcaption span {
    color: #68503c;
    font: italic 14px/1.3 Georgia, serif;
}

.tbdd-home-sheet-grid {
    display: grid;
    gap: 17px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tbdd-home-sheet-card {
    background: #fffaf0;
    border: 3px solid #a18155;
    box-shadow: 0 5px 0 rgba(70, 43, 23, .15);
    padding: 8px;
}

.tbdd-home-sheet-card button {
    background: transparent;
    border: 0;
    color: var(--tbdd-ink);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    gap: 8px;
    padding: 0;
    text-align: center;
    width: 100%;
}

.tbdd-sheet-thumb {
    align-items: center;
    background: #fff;
    border: 1px solid #d2c2a0;
    display: flex;
    height: 230px;
    justify-content: center;
    overflow: hidden;
    width: 100%;
}

.tbdd-sheet-thumb img {
    height: 100%;
    object-fit: contain;
    width: 100%;
}

.tbdd-home-sheet-card strong {
    font: 700 16px/1.25 Georgia, serif;
    min-height: 40px;
}

.tbdd-home-sheet-card button > span:last-child {
    background: var(--tbdd-green);
    border: 2px solid var(--tbdd-green-dark);
    border-radius: 7px;
    color: #fff;
    font-weight: 800;
    padding: 8px;
}

.tbdd-empty-message {
    grid-column: 1 / -1;
    text-align: center;
}

.tbdd-featured-challenge {
    align-items: center;
    display: grid;
    gap: 22px;
    grid-template-columns: 170px minmax(0, 1fr) auto;
    padding: 22px 28px;
}

.tbdd-featured-challenge h2 {
    color: var(--tbdd-purple);
    font-size: clamp(22px, 2.5vw, 34px);
    margin-bottom: 6px;
}

.tbdd-featured-challenge p {
    font-family: Georgia, serif;
    margin: 0;
}

.tbdd-challenge-doodle {
    background: #f7e9be;
    border: 3px solid #87633b;
    color: #8f4c37;
    font: 800 45px/1.08 "Comic Sans MS", cursive;
    min-height: 130px;
    padding: 12px;
    text-align: center;
    transform: rotate(-2deg);
}

.tbdd-purple-button {
    background: linear-gradient(#916bb0, #674382);
    border-color: #4f3566;
}

.tbdd-home-lower-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 17px;
}

.tbdd-home-feature-card {
    background: rgba(255, 250, 237, .86);
    border: 2px solid #a48255;
    min-height: 205px;
    padding: 20px;
    text-align: center;
}

.tbdd-home-feature-card h2 {
    font-size: 25px;
    margin-bottom: 8px;
}

.tbdd-home-feature-card p {
    font-family: Georgia, serif;
    line-height: 1.45;
}

.tbdd-feature-icon {
    color: var(--tbdd-orange);
    font-size: 45px;
}

.tbdd-home-feature-card button {
    background: var(--tbdd-green);
    border-color: var(--tbdd-green-dark);
    color: #fff;
}

.tbdd-ask-remy-card {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 38% 1fr;
    text-align: left;
}

.tbdd-ask-remy-card img {
    height: 175px;
    max-width: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.tbdd-home > .tbdd-device-note {
    background: rgba(255, 248, 225, .92);
    border: 2px solid #8d6941;
    color: #5f4936;
    margin-top: 23px;
    padding: 11px 15px;
}

.tbdd-home-motto,
.tbdd-studio-motto {
    background: #efe0b7;
    border: 3px solid #6d4528;
    color: #5d3c28;
    font: italic 700 17px/1.35 Georgia, serif;
    margin-top: 20px;
    padding: 11px 15px;
    text-align: center;
}

/* Branded studio workspace */
.tbdd-studio {
    background:
        radial-gradient(circle at 15% 15%, rgba(103, 145, 77, .16), transparent 18%),
        linear-gradient(180deg, #4d301f, #6e4328 45%, #402619);
    padding-bottom: 15px;
}

.tbdd-studio-topbar {
    background: linear-gradient(#fff9e9, #ead7ac);
    border-bottom: 4px solid #56351f;
    flex-wrap: nowrap;
    gap: 9px;
    padding: 9px 13px;
}

.tbdd-studio-logo {
    height: 72px;
    object-fit: contain;
    width: 72px;
}

.tbdd-finish-top {
    white-space: nowrap;
}

.tbdd-studio-layout {
    display: grid;
    grid-template-columns: 190px minmax(380px, 1fr) 320px;
    min-height: 650px;
}

.tbdd-tools,
.tbdd-options {
    background:
        repeating-linear-gradient(8deg, transparent 0 11px, rgba(92, 64, 35, .035) 11px 12px),
        linear-gradient(#fff8e8, #e8d4a7);
    border: 0;
    overflow-y: auto;
    padding: 14px 12px;
}

.tbdd-tools { border-right: 4px solid #5d3b24; }
.tbdd-options { border-left: 4px solid #5d3b24; }

.tbdd-panel-title {
    background: linear-gradient(#80502d, #56321d);
    border: 3px solid #3a2418;
    color: #fff0c5;
    font: 700 20px/1 Georgia, serif;
    margin: 0 0 13px;
    padding: 9px;
    text-align: center;
    text-transform: uppercase;
}

.tbdd-tools .tbdd-tool-grid {
    display: grid;
    gap: 7px;
    grid-template-columns: 1fr;
}

.tbdd-tool {
    align-items: center;
    background: linear-gradient(#fffdf7, #ead6ab);
    border: 2px solid #8c6a42;
    border-radius: 6px;
    display: flex;
    font-size: 14px;
    gap: 9px;
    justify-content: flex-start;
    min-height: 45px;
    padding: 7px 9px;
}

.tbdd-tool span {
    align-items: center;
    color: #8d4728;
    display: inline-flex;
    font: 800 22px/1 Georgia, serif;
    justify-content: center;
    min-width: 26px;
}

.tbdd-tool.is-active {
    background: #d9edbd;
    border-color: var(--tbdd-green-dark);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
}

.tbdd-match-tool {
    width: 100%;
}

.tbdd-remy-tip {
    align-items: end;
    border-top: 2px solid #b59a6d;
    display: grid;
    gap: 3px;
    grid-template-columns: 72px 1fr;
    margin-top: 15px;
    padding-top: 13px;
}

.tbdd-remy-tip img {
    height: 98px;
    object-fit: contain;
    object-position: center bottom;
    width: 72px;
}

.tbdd-remy-tip p {
    background: #fff5d8;
    border: 2px solid #957044;
    font: italic 12px/1.35 Georgia, serif;
    margin: 0;
    padding: 8px;
}

.tbdd-remy-tip strong {
    color: var(--tbdd-purple);
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.tbdd-canvas-stage {
    background:
        radial-gradient(circle at 10% 85%, rgba(46, 90, 45, .25), transparent 18%),
        repeating-linear-gradient(90deg, rgba(45, 25, 13, .11) 0 2px, transparent 2px 38px),
        linear-gradient(180deg, #5e3b27, #3d281d);
    padding: 48px 20px 28px;
    position: relative;
}

.tbdd-canvas-label {
    background: #6f4428;
    border: 3px solid #2f1e15;
    color: #fff0c5;
    font: 700 17px/1 Georgia, serif;
    left: 50%;
    padding: 8px 26px;
    position: absolute;
    top: 10px;
    transform: translateX(-50%);
}

.tbdd-canvas-wrap {
    border: 9px solid #7a4d2a;
    box-shadow: 0 0 0 4px #362218, 0 16px 22px rgba(24, 15, 9, .35);
}

.tbdd-options .tbdd-tool-group {
    background: rgba(255, 252, 242, .65);
    border: 2px solid #b69a6c;
    margin: 0 0 12px;
    padding: 12px;
}

.tbdd-options .tbdd-tool-group + .tbdd-tool-group {
    border-top: 2px solid #b69a6c;
    margin-top: 0;
}

.tbdd-options .tbdd-palette {
    grid-template-columns: repeat(6, 1fr);
}

.tbdd-size-preview {
    background: #f7eed6;
    border: 2px dashed #a08155;
    min-height: 92px;
}

.tbdd-size-dot {
    max-height: 64px;
    max-width: 64px;
}

.tbdd-shape-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tbdd-zoom-controls {
    display: grid;
    gap: 7px;
    grid-template-columns: 1fr 1fr;
}

.tbdd-zoom-controls .tbdd-tool-label {
    grid-column: 1 / -1;
}

.tbdd-action-bar {
    background: linear-gradient(#f6ead0, #dfc58d);
    border-top: 4px solid #52321d;
    gap: 9px;
    padding: 13px;
}

.tbdd-action-bar button {
    border-color: #795331;
    font-size: 15px;
    min-height: 52px;
}

.tbdd-action-bar .tbdd-finished-button {
    background: linear-gradient(#5d914e, #356a34);
    color: #fff;
}

.tbdd-studio-motto {
    margin: 13px auto 0;
    max-width: 760px;
}

/* Modal refinements */
.tbdd-modal {
    background: rgba(36, 23, 14, .82);
}

.tbdd-modal-card {
    background:
        repeating-linear-gradient(8deg, transparent 0 14px, rgba(99, 68, 36, .035) 14px 15px),
        linear-gradient(#fffaf0, #ead8ad);
    border: 4px solid #5b3822;
    box-shadow: 0 16px 0 rgba(28, 17, 10, .25);
}

.tbdd-modal-card h2 {
    color: var(--tbdd-green-dark);
    font-family: Georgia, serif;
}

.tbdd-sheet-card {
    background: #fffaf0;
    border-color: #9b7b50;
}

@media (max-width: 1180px) {
    .tbdd-site-header {
        grid-template-columns: 88px 1fr;
    }
    .tbdd-club-logo { height: 76px; width: 76px; }
    .tbdd-header-actions { grid-column: 1 / -1; justify-content: center; padding-bottom: 5px; }
    .tbdd-hero { grid-template-columns: 1fr minmax(300px, .65fr); }
    .tbdd-hero-masterpiece { height: 210px; width: 145px; }
    .tbdd-home-sheet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tbdd-studio-layout { grid-template-columns: 175px minmax(340px, 1fr) 275px; }
    .tbdd-studio-topbar { flex-wrap: wrap; }
}

@media (max-width: 960px) {
    .tbdd-home { padding-left: 12px; padding-right: 12px; }
    .tbdd-hero { grid-template-columns: 1fr; padding-bottom: 0; }
    .tbdd-hero-remy { min-height: 370px; }
    .tbdd-hero-remy > img { height: 390px; max-height: 390px; }
    .tbdd-hero-masterpiece { right: 8%; top: 15px; }
    .tbdd-choice-grid,
    .tbdd-masterpiece-grid,
    .tbdd-home-lower-grid { grid-template-columns: 1fr 1fr; }
    .tbdd-choice-card:last-child,
    .tbdd-masterpiece:last-child,
    .tbdd-home-feature-card:last-child { grid-column: 1 / -1; }
    .tbdd-featured-challenge { grid-template-columns: 135px 1fr; }
    .tbdd-featured-challenge .tbdd-painted-button { grid-column: 1 / -1; }
    .tbdd-studio-layout { grid-template-columns: 170px minmax(0, 1fr); }
    .tbdd-options {
        border-left: 0;
        border-top: 4px solid #5d3b24;
        grid-column: 1 / -1;
        max-height: none;
    }
    .tbdd-options .tbdd-tool-group { display: inline-block; margin: 6px; vertical-align: top; width: calc(50% - 15px); }
}

@media (max-width: 720px) {
    .tbdd-shell { border-radius: 0; border-left-width: 2px; border-right-width: 2px; }
    .tbdd-site-header {
        gap: 8px;
        grid-template-columns: 62px 1fr auto;
        min-height: 74px;
        padding: 6px 9px;
    }
    .tbdd-club-logo { height: 58px; width: 58px; }
    .tbdd-breadcrumb { font-size: 13px; gap: 5px; }
    .tbdd-header-actions { grid-column: auto; padding: 0; }
    .tbdd-header-actions button,
    .tbdd-header-actions a:not(:last-child) { display: none; }
    .tbdd-header-actions a:last-child { font-size: 0; min-height: 44px; padding: 9px 11px; }
    .tbdd-header-actions a:last-child::after { content: "Back"; font-size: 14px; }
    .tbdd-home { padding: 0 7px 18px; }
    .tbdd-hero { min-height: 0; padding: 18px 10px 0; }
    .tbdd-title-sign { padding: 20px 16px 17px; }
    .tbdd-title-sign h1 { font-size: 38px; }
    .tbdd-title-sign p { font-size: 18px; }
    .tbdd-remy-greeting { margin-top: 16px; padding: 15px; }
    .tbdd-remy-greeting strong { font-size: 21px; }
    .tbdd-remy-greeting p { font-size: 15px; }
    .tbdd-hero-remy { min-height: 300px; }
    .tbdd-hero-remy > img { height: 315px; max-height: 315px; }
    .tbdd-hero-masterpiece { height: 155px; right: 0; top: 20px; width: 105px; }
    .tbdd-create-section,
    .tbdd-masterpiece-section,
    .tbdd-gallery-section { padding: 20px 12px; }
    .tbdd-choice-grid,
    .tbdd-masterpiece-grid,
    .tbdd-home-lower-grid { grid-template-columns: 1fr; }
    .tbdd-choice-card:last-child,
    .tbdd-masterpiece:last-child,
    .tbdd-home-feature-card:last-child { grid-column: auto; }
    .tbdd-choice-card { min-height: 260px; }
    .tbdd-masterpiece img { height: 300px; }
    .tbdd-section-heading-row { align-items: stretch; flex-direction: column; }
    .tbdd-remy-quote { max-width: none; }
    .tbdd-home-sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .tbdd-sheet-thumb { height: 185px; }
    .tbdd-featured-challenge { grid-template-columns: 1fr; padding: 18px 13px; text-align: center; }
    .tbdd-challenge-doodle { min-height: 90px; }
    .tbdd-ask-remy-card { grid-template-columns: 105px 1fr; }
    .tbdd-ask-remy-card img { height: 145px; }
    .tbdd-studio-topbar { gap: 6px; padding: 7px; }
    .tbdd-studio-logo { height: 54px; width: 54px; }
    .tbdd-title-field { flex-basis: calc(100% - 64px); order: 2; }
    .tbdd-history-buttons { order: 3; }
    .tbdd-save-status { order: 4; }
    .tbdd-finish-top { margin-left: auto; }
    .tbdd-studio-layout { display: flex; flex-direction: column; }
    .tbdd-tools {
        border-bottom: 4px solid #5d3b24;
        border-right: 0;
        max-height: none;
        order: 2;
    }
    .tbdd-tools .tbdd-tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tbdd-tool { flex-direction: column; font-size: 11px; gap: 2px; justify-content: center; min-height: 60px; padding: 5px; }
    .tbdd-remy-tip { display: none; }
    .tbdd-canvas-stage { min-height: 490px; order: 1; padding: 48px 8px 18px; }
    .tbdd-options { order: 3; padding: 10px 6px; }
    .tbdd-options .tbdd-tool-group { display: block; margin: 8px 0; width: 100%; }
    .tbdd-options .tbdd-palette { grid-template-columns: repeat(8, 1fr); }
    .tbdd-action-bar { display: grid; grid-template-columns: 1fr 1fr; }
    .tbdd-action-bar .tbdd-finished-button { grid-column: 1 / -1; }
    .tbdd-studio-motto { margin-left: 8px; margin-right: 8px; }
}

@media (max-width: 430px) {
    .tbdd-home-sheet-grid { grid-template-columns: 1fr 1fr; }
    .tbdd-sheet-thumb { height: 150px; }
    .tbdd-home-sheet-card strong { font-size: 13px; min-height: 34px; }
    .tbdd-tools .tbdd-tool-grid { grid-template-columns: repeat(3, 1fr); }
    .tbdd-options .tbdd-palette { grid-template-columns: repeat(6, 1fr); }
}

/* -------------------------------------------------------------------------
 * Doodle Den visual refinement, v0.2.1
 * ---------------------------------------------------------------------- */
body.tbdd-page-active {
    overflow-x: hidden;
}

.tbdd-app {
    background:
        radial-gradient(circle at 8% 6%, rgba(119, 164, 78, .22), transparent 20%),
        radial-gradient(circle at 91% 16%, rgba(210, 168, 67, .18), transparent 18%),
        repeating-linear-gradient(90deg, rgba(69, 40, 22, .07) 0 2px, transparent 2px 34px),
        linear-gradient(180deg, #5a371f 0%, #77502f 45%, #44291a 100%);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: none;
    min-height: 100vh;
    padding: clamp(18px, 2vw, 34px) clamp(8px, 2vw, 30px) 52px;
    width: 100vw;
}

.tbdd-shell {
    margin: 0 auto;
    max-width: 1560px;
    width: 100%;
}

.tbdd-site-header {
    box-shadow: inset 0 -2px 0 rgba(84, 53, 28, .18);
}

.tbdd-hero {
    background:
        linear-gradient(90deg, rgba(26, 18, 12, .24), transparent 28%, transparent 73%, rgba(26, 18, 12, .27)),
        radial-gradient(circle at 16% 16%, rgba(255, 242, 172, .34), transparent 25%),
        radial-gradient(circle at 79% 64%, rgba(78, 125, 58, .12), transparent 20%),
        repeating-linear-gradient(90deg, rgba(50, 27, 14, .16) 0 1px, transparent 1px 48px),
        linear-gradient(180deg, #86664b 0%, #513724 100%);
    gap: clamp(12px, 2vw, 30px);
    grid-template-columns: minmax(0, 1.08fr) minmax(410px, .92fr);
    min-height: 520px;
    padding: 34px 36px 0;
}

.tbdd-hero-copy {
    padding-bottom: 32px;
}

.tbdd-title-sign {
    border-radius: 34% 18% 29% 15% / 11% 17% 12% 15%;
    max-width: 790px;
    overflow: visible;
    padding: 34px clamp(34px, 4vw, 62px) 25px;
    transform: rotate(-.7deg);
}

.tbdd-title-sign h1 {
    display: block;
    letter-spacing: .012em;
    line-height: 1;
    overflow-wrap: normal;
    text-wrap: nowrap;
    word-break: normal;
}

.tbdd-title-line {
    display: block;
    white-space: nowrap;
}

.tbdd-title-realm {
    font-size: clamp(42px, 5vw, 74px);
}

.tbdd-title-den {
    font-size: clamp(37px, 4.4vw, 66px);
    margin-top: 3px;
}

.tbdd-title-sign p {
    margin-top: 18px;
}

.tbdd-host-subtitle {
    display: block;
}

.tbdd-title-sign::before,
.tbdd-title-sign::after {
    content: none;
}

.tbdd-sign-nail {
    background:
        radial-gradient(circle at 34% 30%, #f8e6a8 0 11%, transparent 12%),
        radial-gradient(circle at 45% 40%, #b6924d 0 38%, #67451f 67%, #2f1d0e 100%);
    border: 1px solid #37210f;
    border-radius: 50%;
    box-shadow: 1px 2px 2px rgba(41, 23, 10, .35);
    height: 15px;
    position: absolute;
    width: 15px;
    z-index: 4;
}

.tbdd-sign-nail-tl { left: 22px; top: 18px; }
.tbdd-sign-nail-tr { right: 22px; top: 18px; }
.tbdd-sign-nail-bl { bottom: 18px; left: 25px; }
.tbdd-sign-nail-br { bottom: 18px; right: 25px; }

.tbdd-sign-clover {
    filter: drop-shadow(1px 2px 1px rgba(34, 63, 29, .25));
    height: 40px;
    pointer-events: none;
    position: absolute;
    width: 40px;
    z-index: 3;
}

.tbdd-sign-clover::before {
    background:
        radial-gradient(ellipse at 50% 18%, #5b9548 0 24%, #3d7334 25% 31%, transparent 33%),
        radial-gradient(ellipse at 82% 50%, #5b9548 0 24%, #3d7334 25% 31%, transparent 33%),
        radial-gradient(ellipse at 50% 82%, #5b9548 0 24%, #3d7334 25% 31%, transparent 33%),
        radial-gradient(ellipse at 18% 50%, #5b9548 0 24%, #3d7334 25% 31%, transparent 33%);
    content: "";
    inset: 0;
    position: absolute;
}

.tbdd-sign-clover::after {
    background: #3f7435;
    border-radius: 999px;
    bottom: -12px;
    content: "";
    height: 19px;
    left: 20px;
    position: absolute;
    transform: rotate(24deg);
    transform-origin: top center;
    width: 4px;
}

.tbdd-sign-clover-one { left: -11px; top: 24px; transform: rotate(-21deg) scale(.95); }
.tbdd-sign-clover-two { right: -8px; top: 53px; transform: rotate(18deg) scale(.82); }
.tbdd-sign-clover-three { bottom: -15px; left: 12%; transform: rotate(15deg) scale(.7); }
.tbdd-sign-clover-four { bottom: -13px; right: 15%; transform: rotate(-16deg) scale(.76); }
.tbdd-sign-clover-five { left: 48%; top: -23px; transform: rotate(4deg) scale(.62); }

.tbdd-remy-greeting {
    margin-top: 27px;
    max-width: 610px;
    padding: 20px 30px 18px;
}

.tbdd-read-greeting {
    align-items: center;
    background: linear-gradient(#fffdf5, #ead7ad);
    border: 2px solid #795333;
    border-radius: 8px;
    display: inline-flex;
    min-height: 42px;
    padding: 9px 18px;
    text-decoration: none;
}

.tbdd-read-greeting::before {
    content: "🔊";
    margin-right: 7px;
}

.tbdd-hero-remy {
    align-items: end;
    justify-content: flex-start;
    min-height: 490px;
    padding-left: 2%;
}

.tbdd-hero-remy::after {
    background: radial-gradient(ellipse, rgba(28, 16, 8, .45), transparent 68%);
    bottom: -2px;
    content: "";
    height: 35px;
    left: 4%;
    position: absolute;
    width: 58%;
    z-index: 1;
}

.tbdd-remy-host,
.tbdd-hero-remy > img {
    filter: drop-shadow(0 13px 8px rgba(22, 13, 8, .28));
    height: min(475px, 36vw);
    max-height: 475px;
    object-fit: contain;
    position: relative;
    z-index: 4;
}

.tbdd-easel-station {
    bottom: 1px;
    height: 438px;
    position: absolute;
    right: 0;
    width: 245px;
    z-index: 2;
}

.tbdd-hero-masterpiece {
    background: #f5ead0;
    border: 9px ridge #6d3c20;
    box-shadow: 7px 8px 0 rgba(28, 17, 10, .24);
    height: 275px;
    left: 29px;
    position: absolute;
    right: auto;
    top: 14px;
    transform: rotate(2deg);
    width: 194px;
    z-index: 3;
}

.tbdd-hero-masterpiece img {
    object-fit: cover;
}

.tbdd-easel-crossbar {
    background: linear-gradient(90deg, #5b321b, #9a6334 45%, #5b321b);
    border: 2px solid #3d2414;
    bottom: 123px;
    height: 23px;
    left: 8px;
    position: absolute;
    transform: rotate(1deg);
    width: 230px;
    z-index: 2;
}

.tbdd-easel-leg {
    background: linear-gradient(90deg, #492816, #91603a 52%, #4d2a16);
    border: 2px solid #352013;
    bottom: 0;
    height: 180px;
    position: absolute;
    transform-origin: top center;
    width: 23px;
    z-index: 1;
}

.tbdd-easel-leg-left { left: 56px; transform: rotate(8deg); }
.tbdd-easel-leg-right { right: 48px; transform: rotate(-8deg); }

.tbdd-paint-stool {
    background:
        radial-gradient(circle at 23% 31%, #e7b42d 0 5px, transparent 6px),
        radial-gradient(circle at 58% 62%, #4b92ca 0 6px, transparent 7px),
        radial-gradient(circle at 78% 27%, #c34a37 0 5px, transparent 6px),
        linear-gradient(#8f613e, #654126);
    border: 3px solid #392316;
    border-radius: 50%;
    bottom: 37px;
    height: 55px;
    position: absolute;
    right: 13px;
    width: 82px;
    z-index: 5;
}

.tbdd-paint-stool::before,
.tbdd-paint-stool::after {
    background: #5b361f;
    border: 2px solid #342015;
    bottom: -51px;
    content: "";
    height: 54px;
    position: absolute;
    width: 10px;
}

.tbdd-paint-stool::before { left: 18px; transform: rotate(8deg); }
.tbdd-paint-stool::after { right: 18px; transform: rotate(-8deg); }

.tbdd-brush-pot {
    background: linear-gradient(90deg, #8b5730, #c0884a, #704122);
    border: 3px solid #3c2415;
    bottom: 9px;
    height: 55px;
    position: absolute;
    left: 2px;
    transform: rotate(-5deg);
    width: 43px;
    z-index: 5;
}

.tbdd-brush-pot::before {
    background:
        linear-gradient(82deg, transparent 0 17%, #4f2d18 18% 23%, transparent 24%),
        linear-gradient(98deg, transparent 0 40%, #5a351d 41% 46%, transparent 47%),
        linear-gradient(76deg, transparent 0 64%, #3f2617 65% 70%, transparent 71%);
    content: "";
    height: 83px;
    left: -5px;
    position: absolute;
    top: -65px;
    width: 52px;
}

.tbdd-create-section,
.tbdd-masterpiece-section,
.tbdd-gallery-section,
.tbdd-featured-challenge,
.tbdd-home-lower-grid {
    border-radius: 8px;
}

.tbdd-choice-card {
    overflow: hidden;
}

.tbdd-choice-card::after {
    background: linear-gradient(110deg, transparent, rgba(255,255,255,.42), transparent);
    content: "";
    height: 160%;
    left: -65%;
    pointer-events: none;
    position: absolute;
    top: -25%;
    transform: rotate(8deg);
    transition: left 220ms ease;
    width: 38%;
}

.tbdd-choice-card:hover::after,
.tbdd-choice-card:focus-visible::after {
    left: 128%;
}

.tbdd-masterpiece-section {
    background:
        radial-gradient(circle at 8% 17%, rgba(116, 151, 80, .12), transparent 16%),
        repeating-linear-gradient(7deg, transparent 0 13px, rgba(108, 77, 45, .035) 13px 14px),
        linear-gradient(#fff9e9, #e7d1a4);
}

.tbdd-masterpiece-grid {
    background: linear-gradient(180deg, transparent 0 84%, #6e4328 84% 91%, #3e2517 91% 100%);
    padding: 0 10px 24px;
}

.tbdd-home-sheet-card {
    display: flex;
    flex-direction: column;
}

.tbdd-home-sheet-card .tbdd-sheet-open {
    flex: 1;
}

.tbdd-print-blank {
    background: #f3e3bd;
    border: 2px solid #8b6a43;
    border-radius: 7px;
    color: #4e3424;
    cursor: pointer;
    font: 800 13px/1.2 "Trebuchet MS", Arial, sans-serif;
    margin-top: 8px;
    min-height: 42px;
    padding: 8px;
    width: 100%;
}

.tbdd-print-blank:hover,
.tbdd-print-blank:focus-visible {
    background: #fff0c9;
}

.tbdd-featured-challenge {
    background:
        radial-gradient(circle at 5% 18%, rgba(156, 74, 47, .1), transparent 15%),
        repeating-linear-gradient(45deg, rgba(105, 69, 35, .045) 0 1px, transparent 1px 9px),
        linear-gradient(#d2a76e, #ad7e49);
    border-width: 5px;
}

.tbdd-featured-challenge > div:nth-child(2) {
    background: #fff5d9;
    border: 2px solid #8b683f;
    box-shadow: 5px 6px 0 rgba(67, 39, 20, .16);
    padding: 16px 20px;
    transform: rotate(.35deg);
}

.tbdd-home-feature-card {
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.35);
}

.tbdd-ask-remy-card img {
    filter: drop-shadow(0 8px 5px rgba(50, 30, 16, .2));
}

.tbdd-home-motto,
.tbdd-studio-motto {
    box-shadow: 0 7px 0 rgba(43, 26, 15, .16);
}

@media (max-width: 1180px) {
    .tbdd-hero {
        grid-template-columns: minmax(0, 1fr) minmax(355px, .78fr);
    }

    .tbdd-easel-station {
        transform: scale(.88);
        transform-origin: right bottom;
    }

    .tbdd-remy-host,
    .tbdd-hero-remy > img {
        height: 420px;
        max-height: 420px;
    }
}

@media (max-width: 960px) {
    .tbdd-app {
        padding-left: 0;
        padding-right: 0;
    }

    .tbdd-shell {
        border-left-width: 0;
        border-radius: 0;
        border-right-width: 0;
    }

    .tbdd-hero {
        grid-template-columns: 1fr;
        padding-bottom: 0;
    }

    .tbdd-hero-remy {
        justify-content: center;
        min-height: 420px;
        padding-left: 0;
    }

    .tbdd-remy-host,
    .tbdd-hero-remy > img {
        height: 410px;
        max-height: 410px;
        transform: translateX(-55px);
    }

    .tbdd-easel-station {
        right: 8%;
        transform: scale(.84);
        transform-origin: right bottom;
    }

    .tbdd-hero-remy::after {
        left: 20%;
        width: 50%;
    }
}

@media (max-width: 720px) {
    .tbdd-app {
        padding-bottom: 28px;
    }

    .tbdd-title-sign {
        padding: 27px 29px 22px;
    }

    .tbdd-title-realm {
        font-size: clamp(30px, 10.2vw, 45px);
    }

    .tbdd-title-den {
        font-size: clamp(29px, 9.4vw, 42px);
    }

    .tbdd-sign-nail {
        height: 12px;
        width: 12px;
    }

    .tbdd-sign-nail-tl { left: 14px; top: 14px; }
    .tbdd-sign-nail-tr { right: 14px; top: 14px; }
    .tbdd-sign-nail-bl { bottom: 14px; left: 16px; }
    .tbdd-sign-nail-br { bottom: 14px; right: 16px; }

    .tbdd-sign-clover-one { left: -7px; top: 25px; transform: rotate(-21deg) scale(.7); }
    .tbdd-sign-clover-two { right: -5px; top: 49px; transform: rotate(18deg) scale(.62); }
    .tbdd-sign-clover-three { bottom: -14px; left: 11%; transform: rotate(15deg) scale(.55); }
    .tbdd-sign-clover-four { bottom: -12px; right: 13%; transform: rotate(-16deg) scale(.58); }
    .tbdd-sign-clover-five { top: -20px; transform: rotate(4deg) scale(.48); }

    .tbdd-hero-remy {
        min-height: 335px;
    }

    .tbdd-remy-host,
    .tbdd-hero-remy > img {
        height: 320px;
        max-height: 320px;
        transform: translateX(-39px);
    }

    .tbdd-easel-station {
        bottom: -7px;
        right: -15px;
        transform: scale(.61);
    }

    .tbdd-hero-remy::after {
        left: 13%;
        width: 53%;
    }

    .tbdd-masterpiece-grid {
        background: none;
        padding: 0;
    }
}

@media (max-width: 430px) {
    .tbdd-title-sign {
        padding-left: 23px;
        padding-right: 23px;
    }

    .tbdd-title-realm {
        font-size: clamp(28px, 9.8vw, 39px);
        letter-spacing: 0;
    }

    .tbdd-title-den {
        font-size: clamp(27px, 9vw, 37px);
    }

    .tbdd-remy-host,
    .tbdd-hero-remy > img {
        height: 290px;
        max-height: 290px;
        transform: translateX(-32px);
    }

    .tbdd-easel-station {
        right: -28px;
        transform: scale(.54);
    }
}

/* Clean Remy creator-supplied assets, v0.2.2 */
.tbdd-hero-remy {
    align-items: flex-end;
    justify-content: center;
    min-height: 500px;
    overflow: visible;
    padding: 0 0 0 1%;
}

.tbdd-hero-remy::after {
    background: radial-gradient(ellipse, rgba(28, 16, 8, .36), transparent 70%);
    bottom: 0;
    height: 38px;
    left: 10%;
    width: 80%;
}

.tbdd-remy-studio {
    display: block;
    filter: drop-shadow(0 13px 9px rgba(22, 13, 8, .28));
    height: auto;
    max-height: 500px;
    max-width: 100%;
    object-fit: contain;
    object-position: center bottom;
    position: relative;
    width: auto;
    z-index: 4;
}

.tbdd-ask-remy-card img,
.tbdd-remy-tip img {
    background: transparent;
    object-fit: contain;
    object-position: center bottom;
}

@media (max-width: 1180px) {
    .tbdd-hero-remy { min-height: 455px; }
    .tbdd-remy-studio { max-height: 455px; }
}

@media (max-width: 960px) {
    .tbdd-hero-remy {
        min-height: 470px;
        padding: 0;
    }
    .tbdd-remy-studio {
        max-height: 465px;
        transform: none;
    }
    .tbdd-hero-remy::after {
        left: 12%;
        width: 76%;
    }
}

@media (max-width: 720px) {
    .tbdd-hero-remy { min-height: 365px; }
    .tbdd-remy-studio {
        max-height: 360px;
        transform: none;
    }
    .tbdd-hero-remy::after {
        left: 8%;
        width: 84%;
    }
}

@media (max-width: 430px) {
    .tbdd-hero-remy { min-height: 315px; }
    .tbdd-remy-studio {
        max-height: 310px;
        transform: none;
    }
}

/* Specificity-safe sizing for the creator-supplied studio composite. */
.tbdd-hero-remy > img.tbdd-remy-studio {
    height: auto;
    max-height: none;
    max-width: 650px;
    transform: none;
    width: 100%;
}

@media (max-width: 1180px) {
    .tbdd-hero-remy > img.tbdd-remy-studio {
        height: auto;
        max-height: none;
        max-width: 600px;
        transform: none;
    }
}

@media (max-width: 960px) {
    .tbdd-hero-remy > img.tbdd-remy-studio {
        height: auto;
        max-height: none;
        max-width: 620px;
        transform: none;
    }
}

@media (max-width: 720px) {
    .tbdd-hero-remy > img.tbdd-remy-studio {
        height: auto;
        max-height: none;
        max-width: 500px;
        transform: none;
    }
}

@media (max-width: 430px) {
    .tbdd-hero-remy > img.tbdd-remy-studio {
        height: auto;
        max-height: none;
        max-width: 390px;
        transform: none;
    }
}

/* -------------------------------------------------------------------------
 * Standalone Doodle Den page template, v0.2.3
 * Removes theme chrome only on singular pages containing the Doodle Den
 * shortcode. The WordPress admin toolbar remains available to logged-in users.
 * ---------------------------------------------------------------------- */
html:has(body.tbdd-standalone-page),
body.tbdd-standalone-page {
    background: #4b2d1c;
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
    padding: 0;
}

body.tbdd-standalone-page .tbdd-standalone-main,
body.tbdd-standalone-page #tbdd-standalone-main {
    display: block;
    margin: 0;
    max-width: none;
    min-height: 100vh;
    overflow: hidden;
    padding: 0;
    width: 100%;
}

body.tbdd-standalone-page #tbdd-standalone-main > :first-child,
body.tbdd-standalone-page #tbdd-standalone-main > .wp-block-shortcode,
body.tbdd-standalone-page #tbdd-standalone-main .wp-block-shortcode,
body.tbdd-standalone-page #tbdd-standalone-main .wp-block-group,
body.tbdd-standalone-page #tbdd-standalone-main .wp-block-group__inner-container {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    max-width: none !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
}

body.tbdd-standalone-page .tbdd-app {
    margin-bottom: 0;
    margin-top: 0;
    min-height: 100vh;
}

/* Fallback protection if another plugin or theme overrides template_include. */
body.tbdd-standalone-page #masthead,
body.tbdd-standalone-page header#masthead,
body.tbdd-standalone-page .site-header:not(.tbdd-site-header),
body.tbdd-standalone-page .site-header-wrap,
body.tbdd-standalone-page .site-top-header-wrap,
body.tbdd-standalone-page .site-main-header-wrap,
body.tbdd-standalone-page .site-bottom-header-wrap,
body.tbdd-standalone-page .entry-hero,
body.tbdd-standalone-page .entry-header:not(.tbdd-site-header),
body.tbdd-standalone-page .page-header,
body.tbdd-standalone-page .page-title,
body.tbdd-standalone-page #colophon,
body.tbdd-standalone-page footer#colophon,
body.tbdd-standalone-page .site-footer,
body.tbdd-standalone-page .site-footer-wrap {
    display: none !important;
}

body.tbdd-standalone-page #page,
body.tbdd-standalone-page #inner-wrap,
body.tbdd-standalone-page #wrapper,
body.tbdd-standalone-page .site,
body.tbdd-standalone-page .site-container,
body.tbdd-standalone-page .content-container,
body.tbdd-standalone-page #primary,
body.tbdd-standalone-page .content-area,
body.tbdd-standalone-page .site-main,
body.tbdd-standalone-page article.page,
body.tbdd-standalone-page .entry-content-wrap,
body.tbdd-standalone-page .entry-content {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    width: 100% !important;
}

@media (max-width: 782px) {
    body.admin-bar.tbdd-standalone-page {
        min-height: calc(100vh - 46px);
    }
}

/* -------------------------------------------------------------------------
 * Full-gallery choice tile, v0.2.9
 * Desktop: four sheets on row one, three sheets plus this same-size tile on row two.
 * ---------------------------------------------------------------------- */
.tbdd-see-all-card {
    background:
        radial-gradient(circle at 16% 20%, rgba(87, 126, 57, .17), transparent 28%),
        radial-gradient(circle at 84% 78%, rgba(201, 149, 49, .16), transparent 30%),
        linear-gradient(135deg, #fffaf0, #ead9ad);
    border-color: #56713c;
    grid-column: auto;
    min-height: 100%;
    padding: 8px;
}

.tbdd-see-all-card .tbdd-see-all-tile {
    align-items: center;
    border: 3px dashed #71854f;
    border-radius: 8px;
    color: var(--tbdd-ink);
    display: flex;
    height: 100%;
    justify-content: center;
    min-height: 100%;
    padding: 13px 10px;
    position: relative;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.tbdd-see-all-card .tbdd-see-all-tile:hover,
.tbdd-see-all-card .tbdd-see-all-tile:focus-visible {
    background: rgba(247, 238, 200, .78);
    border-color: var(--tbdd-green-dark);
    transform: translateY(-2px);
}

.tbdd-see-all-stack {
    height: 132px;
    margin: 2px auto 2px;
    position: relative;
    width: 150px;
}

.tbdd-see-all-stack > span {
    background: #fff;
    border: 3px solid #765236;
    box-shadow: 4px 5px 0 rgba(71, 43, 23, .13);
    height: 108px;
    left: 50%;
    position: absolute;
    top: 7px;
    transform-origin: bottom center;
    width: 78px;
}

.tbdd-see-all-stack > span:nth-child(1) {
    transform: translateX(-84%) rotate(-10deg);
}

.tbdd-see-all-stack > span:nth-child(2) {
    transform: translateX(-50%) rotate(0deg);
    z-index: 2;
}

.tbdd-see-all-stack > span:nth-child(3) {
    transform: translateX(-16%) rotate(10deg);
}

.tbdd-see-all-stack::after {
    align-items: center;
    background: var(--tbdd-green);
    border: 3px solid var(--tbdd-green-dark);
    border-radius: 50%;
    bottom: 0;
    color: #fff;
    content: "+";
    display: flex;
    font: 900 32px/1 Arial, sans-serif;
    height: 50px;
    justify-content: center;
    position: absolute;
    right: 3px;
    width: 50px;
    z-index: 4;
}

.tbdd-see-all-card strong {
    color: var(--tbdd-green-dark);
    font: 800 18px/1.18 Georgia, serif;
    min-height: 44px;
}

.tbdd-see-all-count {
    color: #66482f;
    font: 700 13px/1.3 "Trebuchet MS", Arial, sans-serif;
    min-height: 34px;
}

.tbdd-see-all-card .tbdd-see-all-cta {
    background: var(--tbdd-green);
    border: 2px solid var(--tbdd-green-dark);
    border-radius: 7px;
    color: #fff;
    font-weight: 800;
    margin-top: 2px;
    padding: 8px;
    width: 100%;
}

@media (max-width: 1180px) {
    .tbdd-see-all-card {
        grid-column: auto;
    }

    .tbdd-see-all-card .tbdd-see-all-tile {
        min-height: 100%;
    }
}

@media (max-width: 720px) {
    .tbdd-see-all-card {
        grid-column: auto;
    }

    .tbdd-see-all-card .tbdd-see-all-tile {
        min-height: 100%;
        padding: 12px 8px;
    }

    .tbdd-see-all-stack {
        height: 102px;
        width: 126px;
    }

    .tbdd-see-all-stack > span {
        height: 84px;
        width: 62px;
    }

    .tbdd-see-all-stack::after {
        font-size: 27px;
        height: 42px;
        width: 42px;
    }

    .tbdd-see-all-card strong {
        font-size: 15px;
        min-height: 38px;
    }

    .tbdd-see-all-count {
        font-size: 12px;
    }
}


/* Adventure Club membership/content access integration. */
.tbdd-access-gate {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 980px;
    padding: 48px 22px;
}

.tbdd-access-gate-card {
    background: #fffaf0;
    border: 4px solid #8b6a43;
    border-radius: 18px;
    box-shadow: 0 7px 0 rgba(70, 43, 23, .16);
    color: #4e3424;
    margin: 0 auto;
    max-width: 680px;
    padding: 34px;
    text-align: center;
}

.tbdd-access-gate-card h2 {
    margin: 8px 0 12px;
}

.tbdd-access-eyebrow {
    color: #6d4f2c;
    font-weight: 900;
    letter-spacing: .06em;
    margin: 0;
    text-transform: uppercase;
}

.tbdd-access-level {
    background: #f3e3bd;
    border-radius: 9px;
    display: inline-block;
    padding: 9px 12px;
}

.tbdd-access-home {
    background: var(--tbdd-green);
    border: 2px solid #2f6e2b;
    border-radius: 8px;
    color: #fff;
    display: inline-block;
    font-weight: 900;
    margin-top: 12px;
    padding: 11px 16px;
    text-decoration: none;
}

.tbdd-home-sheet-card.is-locked,
.tbdd-sheet-card.is-locked {
    opacity: 1;
}

.tbdd-home-sheet-card.is-locked .tbdd-sheet-open {
    cursor: not-allowed;
}

.tbdd-home-sheet-card.is-locked .tbdd-sheet-thumb img,
.tbdd-sheet-card.is-locked .tbdd-sheet-card-image img {
    filter: saturate(.72);
    opacity: .78;
}

.tbdd-sheet-thumb,
.tbdd-sheet-card-image {
    position: relative;
}

.tbdd-sheet-card-image {
    display: block;
}

.tbdd-sheet-lock {
    align-items: center;
    background: rgba(255, 250, 240, .92);
    border: 2px solid #8b6a43;
    border-radius: 999px;
    display: flex;
    font-size: 22px;
    height: 44px;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
}

.tbdd-sheet-access-label,
.tbdd-locked-label {
    color: #654728;
    display: block;
    font-size: 13px;
    font-weight: 900;
    padding: 7px 4px;
    text-align: center;
}

.tbdd-sheet-card.is-locked {
    cursor: default;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.tbdd-sheet-unlock {
    align-items: center;
    align-self: stretch;
    background: #17603d;
    border: 2px solid #0f492e;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: 900 12px/1.25 "Trebuchet MS", Arial, sans-serif;
    justify-content: center;
    margin: 6px 8px 10px;
    min-height: 38px;
    padding: 8px 10px;
    text-align: center;
    text-decoration: none;
}

.tbdd-sheet-unlock:hover,
.tbdd-sheet-unlock:focus-visible {
    background: #fff4d8;
    border-color: #8b693c;
    color: #173f2f;
    outline: 3px solid rgba(211, 161, 75, .28);
    outline-offset: 2px;
}

.tbdd-sheet-unlock:disabled {
    cursor: wait;
    opacity: .72;
}

.tbdd-home-sheet-card .tbdd-sheet-unlock {
    width: calc(100% - 16px);
}

.tbdd-home-sheet-card.is-locked .tbdd-sheet-open > span:last-child {
    background: #806e58;
    border-color: #655443;
}


.tbdd-vip-jump {
    color: var(--tbdd-green-dark);
    display: block;
    font: 800 12px/1.25 "Trebuchet MS", Arial, sans-serif;
    margin: 4px 7px 9px;
    text-align: center;
    text-decoration: underline;
}

.tbdd-home-sheet-card.is-locked .tbdd-vip-jump {
    cursor: pointer;
    opacity: 1;
}

.tbdd-vip-section {
    align-items: start;
    background: #fff8e6;
    border: 3px solid #9a7447;
    box-shadow: 7px 8px 0 rgba(45, 27, 15, .18);
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    margin: 24px 0;
    padding: 22px;
}

.tbdd-vip-copy h2 {
    color: var(--tbdd-green-dark);
    font-family: Georgia, "Times New Roman", serif;
    margin: 5px 0 8px;
}

.tbdd-vip-copy p {
    margin: 0;
}

.tbdd-vip-eyebrow {
    color: #6d4b24;
    font: 900 12px/1.2 "Trebuchet MS", Arial, sans-serif;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.tbdd-vip-form-wrap .tbac-vip-access {
    box-sizing: border-box;
    max-width: none !important;
    width: 100%;
}

@media (max-width: 760px) {
    .tbdd-vip-section {
        grid-template-columns: 1fr;
    }
}


.tbdd-completion-reward {
    background: #eef7e7;
    border: 2px solid #4d7f3d;
    border-radius: 12px;
    color: #27552d;
    font-weight: 800;
    margin: 12px 0 4px;
    min-height: 0;
    padding: 10px 12px;
}

.tbdd-completion-reward:empty {
    display: none;
}

/* -------------------------------------------------------------------------
 * Doodle Depot homepage visual refresh, v0.3.4
 * Mirrors the approved storybook UI while retaining the existing mechanics.
 * Remy art in this build is creator-supplied artwork only.
 * ---------------------------------------------------------------------- */

.tbdd-home {
    padding: 0 18px 24px;
}

.tbdd-home > section,
.tbdd-home-lower-grid,
.tbdd-home-motto,
.tbdd-home > .tbdd-device-note {
    max-width: 1240px;
}

.tbdd-hero {
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
    min-height: 520px;
    padding: 28px 28px 0;
}

.tbdd-hero-copy {
    padding-bottom: 26px;
}

.tbdd-title-sign {
    max-width: 650px;
    padding: 24px 38px 20px;
}

.tbdd-title-sign h1 {
    font-size: clamp(30px, 4vw, 54px);
}

.tbdd-remy-greeting {
    margin-top: 20px;
    max-width: 520px;
}

/* Ground the exact creator-supplied hero composite with a soft floor shadow. */
.tbdd-hero-remy {
    isolation: isolate;
    min-height: 500px;
    overflow: visible;
    padding: 0;
}

.tbdd-hero-remy::after {
    background: radial-gradient(ellipse at center, rgba(25, 14, 7, .42) 0%, rgba(25, 14, 7, .2) 43%, transparent 73%);
    bottom: 8px;
    content: "";
    filter: blur(2px);
    height: 46px;
    left: 7%;
    position: absolute;
    width: 88%;
    z-index: 1;
}

.tbdd-hero-remy > img.tbdd-remy-studio {
    filter: drop-shadow(0 9px 8px rgba(24, 13, 7, .22));
    max-width: 620px;
    position: relative;
    width: 100%;
    z-index: 2;
}

.tbdd-create-section,
.tbdd-masterpiece-section,
.tbdd-gallery-section,
.tbdd-featured-challenge,
.tbdd-home-lower-grid {
    margin-top: 14px;
}

.tbdd-create-section,
.tbdd-masterpiece-section,
.tbdd-gallery-section {
    padding: 22px 22px 24px;
}

.tbdd-choice-card {
    min-height: 225px;
    padding: 15px 14px 14px;
}

.tbdd-card-object {
    border-width: 3px;
    font-size: 40px;
    height: 84px;
    width: 74px;
}

.tbdd-blank-canvas::after {
    bottom: -16px;
    height: 18px;
    left: 31px;
    width: 7px;
}

/* Premium gallery treatment: these are Remy's displayed paintings, not choices. */
.tbdd-masterpiece-section {
    background:
        radial-gradient(circle at 8% 17%, rgba(116, 151, 80, .08), transparent 16%),
        repeating-linear-gradient(7deg, transparent 0 13px, rgba(108, 77, 45, .025) 13px 14px),
        linear-gradient(#fffdf4, #f4e6c4);
}

.tbdd-masterpiece-grid {
    align-items: end;
    background: linear-gradient(180deg, transparent 0 88%, #6f452b 88% 93%, #3f2719 93% 100%);
    gap: 24px;
    padding: 0 8px 24px;
}

.tbdd-masterpiece {
    background:
        linear-gradient(135deg, #6d4314 0%, #d5a63f 10%, #f6da77 20%, #9f6b1d 31%, #e4b94d 44%, #fff0a0 54%, #9a641a 70%, #deb149 82%, #6a3f12 100%);
    border: 3px solid #5e3b16;
    box-shadow:
        inset 0 0 0 3px #f3d56f,
        inset 0 0 0 7px #80511b,
        inset 0 0 0 10px #e0b84e,
        0 10px 8px rgba(47, 27, 13, .28);
    margin: 0;
    padding: 18px 18px 0;
    position: relative;
}

.tbdd-masterpiece::before,
.tbdd-masterpiece::after {
    background: radial-gradient(circle, #f4d26f 0 23%, #8b591b 28% 48%, #d6a13b 52% 68%, transparent 70%);
    content: "";
    height: 32px;
    position: absolute;
    top: -13px;
    width: 32px;
    z-index: 2;
}

.tbdd-masterpiece::before { left: 14px; }
.tbdd-masterpiece::after { right: 14px; }

.tbdd-masterpiece img {
    background: #f8eccf;
    border: 8px solid #f4e7c2;
    box-shadow:
        0 0 0 2px #6d4518,
        inset 0 0 14px rgba(75, 46, 18, .16);
    height: 300px;
    object-fit: contain;
    width: 100%;
}

.tbdd-frame-red,
.tbdd-frame-gold,
.tbdd-frame-blue,
.tbdd-frame-ornate {
    border-color: #5e3b16;
}

.tbdd-masterpiece figcaption {
    background: linear-gradient(#e0bd70, #c49a4c);
    border: 2px solid #79511d;
    box-shadow: inset 0 0 0 2px rgba(255, 240, 175, .65);
    margin: 14px -8px -14px;
    min-height: 78px;
    padding: 10px 8px;
    position: relative;
    transform: translateY(12px);
}

.tbdd-masterpiece figcaption strong {
    font-size: 16px;
}

.tbdd-masterpiece figcaption span {
    color: #4f3929;
    font-size: 12px;
}

/* Match the approved compact 4-sheet + Full Gallery homepage row. */
.tbdd-home-sheet-grid {
    gap: 12px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tbdd-home-sheet-card {
    box-shadow: 0 4px 0 rgba(70, 43, 23, .13);
    padding: 7px;
}

.tbdd-sheet-thumb {
    height: 185px;
}

.tbdd-home-sheet-card strong {
    font-size: 13px;
    min-height: 34px;
}

.tbdd-home-sheet-card button > span:last-child,
.tbdd-print-blank {
    font-size: 12px;
    min-height: 34px;
    padding: 7px 5px;
}

.tbdd-featured-challenge {
    gap: 16px;
    grid-template-columns: 120px minmax(0, 1fr) 110px auto;
    padding: 14px 20px;
}

.tbdd-challenge-doodle {
    font-size: 32px;
    min-height: 96px;
    padding: 8px;
}

.tbdd-featured-challenge h2 {
    font-size: clamp(22px, 2.1vw, 30px);
}

.tbdd-featured-challenge-remy-wrap {
    align-self: end;
    height: 108px;
    isolation: isolate;
    justify-self: center;
    position: relative;
    width: 100px;
}

.tbdd-featured-challenge-remy-wrap::after {
    background: radial-gradient(ellipse, rgba(49, 28, 13, .34), transparent 72%);
    bottom: 0;
    content: "";
    height: 18px;
    left: 9%;
    position: absolute;
    width: 82%;
    z-index: 0;
}

.tbdd-featured-challenge-remy {
    bottom: 3px;
    filter: drop-shadow(0 5px 4px rgba(46, 25, 12, .18));
    height: 110px;
    left: 50%;
    object-fit: contain;
    position: absolute;
    transform: translateX(-50%);
    width: auto;
    z-index: 1;
}

.tbdd-home-lower-grid {
    gap: 10px;
    padding: 12px;
}

.tbdd-home-feature-card {
    min-height: 155px;
    padding: 14px;
}

.tbdd-home-feature-card h2 {
    font-size: 20px;
}

.tbdd-home-feature-card p {
    font-size: 13px;
}

.tbdd-ask-remy-card {
    grid-template-columns: 34% 1fr;
    isolation: isolate;
    position: relative;
}

.tbdd-ask-remy-card::before {
    background: radial-gradient(ellipse, rgba(49, 28, 13, .3), transparent 73%);
    bottom: 16px;
    content: "";
    height: 18px;
    left: 4%;
    position: absolute;
    width: 31%;
    z-index: 0;
}

.tbdd-ask-remy-card img {
    filter: drop-shadow(0 5px 4px rgba(46, 25, 12, .16));
    height: 125px;
    position: relative;
    z-index: 1;
}

.tbdd-remy-tip {
    position: relative;
}

.tbdd-remy-tip img {
    filter: drop-shadow(0 5px 4px rgba(46, 25, 12, .18));
}

/* Younger-reader shape menu: visual outline symbol + label. */
.tbdd-shape-button {
    align-items: center;
    display: flex;
    gap: 7px;
    justify-content: flex-start;
    text-align: left;
}

.tbdd-shape-choice-icon {
    color: #6b4427;
    display: inline-flex;
    flex: 0 0 27px;
    font: 700 24px/1 Georgia, serif;
    justify-content: center;
}

.tbdd-shape-button.is-active .tbdd-shape-choice-icon {
    color: #234f2b;
}

@media (max-width: 1180px) {
    .tbdd-home-sheet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tbdd-hero { grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr); }
    .tbdd-hero-remy > img.tbdd-remy-studio { max-width: 560px; }
    .tbdd-featured-challenge { grid-template-columns: 105px minmax(0, 1fr) 90px auto; }
}

@media (max-width: 960px) {
    .tbdd-hero { grid-template-columns: 1fr; }
    .tbdd-hero-remy { min-height: 470px; }
    .tbdd-hero-remy > img.tbdd-remy-studio { max-width: 600px; }
    .tbdd-masterpiece-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tbdd-masterpiece img { height: 245px; }
    .tbdd-featured-challenge { grid-template-columns: 95px minmax(0, 1fr) 85px; }
    .tbdd-featured-challenge .tbdd-purple-button { grid-column: 1 / -1; justify-self: center; }
}

@media (max-width: 720px) {
    .tbdd-home { padding-left: 7px; padding-right: 7px; }
    .tbdd-masterpiece-grid { background: none; grid-template-columns: 1fr; padding: 0; }
    .tbdd-masterpiece { margin: 0 auto 20px; max-width: 390px; width: 100%; }
    .tbdd-masterpiece img { height: auto; max-height: 420px; }
    .tbdd-home-sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tbdd-featured-challenge { grid-template-columns: 82px minmax(0, 1fr); }
    .tbdd-featured-challenge-remy-wrap { display: none; }
    .tbdd-featured-challenge .tbdd-purple-button { grid-column: 1 / -1; }
}

@media (max-width: 430px) {
    .tbdd-home-sheet-grid { grid-template-columns: 1fr 1fr; }
    .tbdd-sheet-thumb { height: 150px; }
    .tbdd-hero-remy > img.tbdd-remy-studio { max-width: 390px; }
}


/* -------------------------------------------------------------------------
 * Doodle Depot polished homepage, v0.3.6
 * Uses creator-approved art assets and the locked Masterpiece Wall treatment.
 * ---------------------------------------------------------------------- */

/* Remove the disconnected decorative dot field from the hero permanently. */
.tbdd-hero::before {
    content: none !important;
    display: none !important;
}

/* Ground the creator-supplied Remy/easel composite directly beneath its alpha. */
.tbdd-hero-remy::after {
    content: none !important;
    display: none !important;
}

.tbdd-hero-remy > img.tbdd-remy-studio {
    filter: drop-shadow(0 7px 4px rgba(29, 16, 8, .30)) !important;
}

/* Three primary creation choices: exact creator-supplied transparent PNGs. */
.tbdd-choice-card {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 430px;
    padding: 16px 18px 18px;
}

.tbdd-choice-art-wrap,
.tbdd-choice-card > span.tbdd-choice-art-wrap {
    align-items: flex-end;
    display: flex;
    flex: 0 0 270px;
    height: 270px;
    justify-content: center;
    margin: 0 auto 8px;
    max-width: 100%;
    position: relative;
    width: 100%;
}

.tbdd-choice-art {
    display: block;
    filter: drop-shadow(0 7px 4px rgba(52, 31, 16, .25));
    height: 255px;
    max-width: 100%;
    object-fit: contain;
    object-position: center bottom;
    width: auto;
}

.tbdd-choice-card strong {
    line-height: 1.08;
    margin: 1px 0 7px;
    min-height: 2.16em;
    text-align: center;
}

.tbdd-choice-card > span:not(.tbdd-choice-art-wrap) {
    display: block;
    line-height: 1.35;
    margin: 0 auto;
    max-width: 95%;
    text-align: center;
}

.tbdd-choice-card em {
    display: block;
    margin-top: 10px;
    text-align: center;
}

/* The old paper/clipart symbols are no longer used on the homepage. */
.tbdd-choice-card .tbdd-card-object {
    display: none !important;
}

/* Locked approved Masterpiece Wall presentation. */
.tbdd-masterpiece-section {
    background: linear-gradient(180deg, #fffdf5 0%, #f6ead0 100%);
    overflow: hidden;
    padding-bottom: 26px;
}

.tbdd-masterpiece-grid {
    align-items: end;
    background:
        linear-gradient(180deg,
            transparent 0 calc(100% - 94px),
            #6f4529 calc(100% - 94px) calc(100% - 82px),
            #4a2c1a calc(100% - 82px) calc(100% - 10px),
            #2f1b11 calc(100% - 10px) 100%);
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0 4px 12px;
}

.tbdd-masterpiece.tbdd-masterpiece-approved {
    background: transparent;
    border: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    margin: 0;
    min-width: 0;
    padding: 0 0 15px;
    position: relative;
}

.tbdd-masterpiece.tbdd-masterpiece-approved::before,
.tbdd-masterpiece.tbdd-masterpiece-approved::after {
    content: none;
    display: none;
}

.tbdd-masterpiece.tbdd-masterpiece-approved > img {
    background: transparent;
    border: 0;
    box-shadow: 0 10px 9px rgba(42, 24, 11, .26);
    display: block;
    height: 350px;
    margin: 0 auto;
    max-width: 100%;
    object-fit: contain;
    width: 100%;
}

.tbdd-masterpiece.tbdd-masterpiece-approved figcaption {
    align-items: center;
    background: linear-gradient(180deg, #efd48f 0%, #c99e4e 100%);
    border: 2px solid #704817;
    border-radius: 4px;
    box-shadow:
        inset 0 0 0 2px rgba(255, 244, 192, .56),
        0 4px 3px rgba(52, 29, 13, .20);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: -3px 12px 0;
    min-height: 76px;
    padding: 8px 10px;
    position: relative;
    transform: none;
    z-index: 2;
}

.tbdd-masterpiece.tbdd-masterpiece-approved figcaption::before,
.tbdd-masterpiece.tbdd-masterpiece-approved figcaption::after {
    background: radial-gradient(circle at 40% 35%, #f7dc86 0 18%, #7a4d17 22% 100%);
    border: 1px solid #5f3c15;
    border-radius: 50%;
    content: "";
    height: 8px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
}

.tbdd-masterpiece.tbdd-masterpiece-approved figcaption::before { left: 6px; }
.tbdd-masterpiece.tbdd-masterpiece-approved figcaption::after { right: 6px; }

.tbdd-masterpiece.tbdd-masterpiece-approved figcaption strong {
    color: #3d291b;
    font: 700 15px/1.12 Georgia, serif;
    padding: 0 8px;
    text-align: center;
}

.tbdd-masterpiece.tbdd-masterpiece-approved figcaption span {
    color: #4a3525;
    font: italic 11px/1.25 Georgia, serif;
    margin-top: 4px;
    padding: 0 8px;
    text-align: center;
}

.tbdd-remy-quote {
    white-space: normal;
}

/* Keep approved small Remy art grounded without detached ellipse shadows. */
.tbdd-ask-remy-card::before {
    content: none !important;
    display: none !important;
}

.tbdd-ask-remy-card img,
.tbdd-remy-tip img {
    filter: drop-shadow(0 5px 3px rgba(46, 25, 12, .24)) !important;
}

@media (max-width: 1180px) {
    .tbdd-choice-art-wrap,
    .tbdd-choice-card > span.tbdd-choice-art-wrap { flex-basis: 235px; height: 235px; }
    .tbdd-choice-art { height: 220px; }
    .tbdd-choice-card { min-height: 395px; }
    .tbdd-masterpiece.tbdd-masterpiece-approved > img { height: 300px; }
}

@media (max-width: 960px) {
    .tbdd-choice-grid { gap: 12px; }
    .tbdd-choice-art-wrap,
    .tbdd-choice-card > span.tbdd-choice-art-wrap { flex-basis: 210px; height: 210px; }
    .tbdd-choice-art { height: 198px; }
    .tbdd-choice-card { min-height: 370px; padding-left: 12px; padding-right: 12px; }
    .tbdd-masterpiece.tbdd-masterpiece-approved > img { height: 245px; }
    .tbdd-masterpiece.tbdd-masterpiece-approved figcaption { margin-left: 5px; margin-right: 5px; }
}

@media (max-width: 720px) {
    .tbdd-choice-grid { grid-template-columns: 1fr; }
    .tbdd-choice-card { min-height: 0; }
    .tbdd-choice-art-wrap,
    .tbdd-choice-card > span.tbdd-choice-art-wrap { flex-basis: 300px; height: 300px; }
    .tbdd-choice-art { height: 285px; }
    .tbdd-masterpiece-grid {
        background: none;
        grid-template-columns: 1fr;
        padding: 0;
    }
    .tbdd-masterpiece.tbdd-masterpiece-approved {
        background: linear-gradient(180deg, transparent 0 calc(100% - 92px), #4a2c1a calc(100% - 92px) 100%);
        margin: 0 auto 18px;
        max-width: 520px;
        padding-bottom: 16px;
        width: 100%;
    }
    .tbdd-masterpiece.tbdd-masterpiece-approved > img {
        height: auto;
        max-height: 520px;
    }
    .tbdd-masterpiece.tbdd-masterpiece-approved figcaption {
        margin-left: 18px;
        margin-right: 18px;
    }
}

@media (max-width: 430px) {
    .tbdd-choice-art-wrap,
    .tbdd-choice-card > span.tbdd-choice-art-wrap { flex-basis: 245px; height: 245px; }
    .tbdd-choice-art { height: 232px; }
}

/* ----------------------------------------------------------------------
 * v0.3.7 interaction contrast hardening
 * Keep homepage creation cards and Print Blank Page controls readable on
 * mouse hover and keyboard focus even when the active WordPress theme has
 * broad button:hover rules.
 * ---------------------------------------------------------------------- */

.tbdd-app button.tbdd-choice-card,
.tbdd-app button.tbdd-choice-card:visited {
    background: linear-gradient(180deg, #fffdf5 0%, #f0dfb9 100%) !important;
    color: #342518 !important;
}

.tbdd-app button.tbdd-choice-card:hover,
.tbdd-app button.tbdd-choice-card:focus-visible {
    background: linear-gradient(180deg, #fff9e7 0%, #ead3a2 100%) !important;
    border-color: #6d4b2d !important;
    color: #342518 !important;
    box-shadow: 0 10px 0 rgba(87, 55, 30, .16), 0 0 0 3px rgba(41, 108, 65, .18) !important;
}

.tbdd-app button.tbdd-choice-card:hover strong,
.tbdd-app button.tbdd-choice-card:focus-visible strong {
    color: #1f633f !important;
}

.tbdd-app button.tbdd-choice-card:hover > span:not(.tbdd-choice-art-wrap),
.tbdd-app button.tbdd-choice-card:focus-visible > span:not(.tbdd-choice-art-wrap) {
    color: #342518 !important;
}

.tbdd-app button.tbdd-choice-card:hover em,
.tbdd-app button.tbdd-choice-card:focus-visible em {
    color: #5b3d26 !important;
}

.tbdd-app button.tbdd-print-blank {
    background: #f3e3bd !important;
    border-color: #7b5937 !important;
    color: #3b291d !important;
}

.tbdd-app button.tbdd-print-blank:hover,
.tbdd-app button.tbdd-print-blank:focus-visible {
    background: #684529 !important;
    border-color: #4c301c !important;
    color: #fffdf5 !important;
    box-shadow: 0 0 0 3px rgba(41, 108, 65, .18) !important;
}

.tbdd-app button.tbdd-choice-card:focus-visible,
.tbdd-app button.tbdd-print-blank:focus-visible {
    outline: 3px solid #2b7048 !important;
    outline-offset: 3px;
}


/* ----------------------------------------------------------------------
 * v0.3.8 studio interaction and mobile title polish
 * Hardens all studio-area hover/focus colors against broad theme rules,
 * fixes low-contrast action buttons, and keeps the Current Masterpiece
 * plaque on one visible line on phones.
 * ---------------------------------------------------------------------- */

.tbdd-app .tbdd-studio .tbdd-small-button,
.tbdd-app .tbdd-studio .tbdd-color-editor-launch,
.tbdd-app .tbdd-studio .tbdd-tool,
.tbdd-app .tbdd-studio .tbdd-shape-button,
.tbdd-app .tbdd-studio .tbdd-shape-mode-button,
.tbdd-app .tbdd-studio .tbdd-size-step,
.tbdd-app .tbdd-studio .tbdd-action-bar button,
.tbdd-app .tbdd-studio .tbdd-modal-actions button,
.tbdd-app .tbdd-studio .tbdd-saved-actions button,
.tbdd-app .tbdd-studio .tbdd-home-feature-card button,
.tbdd-app .tbdd-studio .tbdd-sheet-card,
.tbdd-app .tbdd-studio .tbdd-saved-card button,
.tbdd-app .tbdd-studio .tbdd-modal-close,
.tbdd-app .tbdd-studio .tbdd-finish-top,
.tbdd-app .tbdd-home-feature-card button,
.tbdd-app .tbdd-modal-close,
.tbdd-app .tbdd-modal-actions button,
.tbdd-app .tbdd-saved-actions button {
    color: #38271c !important;
}

.tbdd-app .tbdd-studio .tbdd-small-button:not(:disabled):hover,
.tbdd-app .tbdd-studio .tbdd-small-button:not(:disabled):focus-visible,
.tbdd-app .tbdd-studio .tbdd-color-editor-launch:hover,
.tbdd-app .tbdd-studio .tbdd-color-editor-launch:focus-visible,
.tbdd-app .tbdd-studio .tbdd-tool:hover,
.tbdd-app .tbdd-studio .tbdd-tool:focus-visible,
.tbdd-app .tbdd-studio .tbdd-shape-button:hover,
.tbdd-app .tbdd-studio .tbdd-shape-button:focus-visible,
.tbdd-app .tbdd-studio .tbdd-shape-mode-button:hover,
.tbdd-app .tbdd-studio .tbdd-shape-mode-button:focus-visible,
.tbdd-app .tbdd-studio .tbdd-size-step:not(:disabled):hover,
.tbdd-app .tbdd-studio .tbdd-size-step:not(:disabled):focus-visible,
.tbdd-app .tbdd-studio .tbdd-action-bar button:not(:disabled):hover,
.tbdd-app .tbdd-studio .tbdd-action-bar button:not(:disabled):focus-visible,
.tbdd-app .tbdd-modal-actions button:not(:disabled):hover,
.tbdd-app .tbdd-modal-actions button:not(:disabled):focus-visible,
.tbdd-app .tbdd-saved-actions button:not(:disabled):hover,
.tbdd-app .tbdd-saved-actions button:not(:disabled):focus-visible,
.tbdd-app .tbdd-home-feature-card button:not(:disabled):hover,
.tbdd-app .tbdd-home-feature-card button:not(:disabled):focus-visible {
    background: #fff0cc !important;
    border-color: #6b4728 !important;
    color: #38271c !important;
    box-shadow: 0 0 0 3px rgba(41, 108, 65, .18) !important;
}

.tbdd-app .tbdd-studio .tbdd-tool.is-active,
.tbdd-app .tbdd-studio .tbdd-shape-button.is-active,
.tbdd-app .tbdd-studio .tbdd-shape-mode-button.is-active {
    color: #234224 !important;
}

.tbdd-app .tbdd-studio .tbdd-tool.is-active:hover,
.tbdd-app .tbdd-studio .tbdd-tool.is-active:focus-visible,
.tbdd-app .tbdd-studio .tbdd-shape-button.is-active:hover,
.tbdd-app .tbdd-studio .tbdd-shape-button.is-active:focus-visible,
.tbdd-app .tbdd-studio .tbdd-shape-mode-button.is-active:hover,
.tbdd-app .tbdd-studio .tbdd-shape-mode-button.is-active:focus-visible {
    background: #d3ebc8 !important;
    border-color: #3f7838 !important;
    color: #234224 !important;
}

.tbdd-app .tbdd-finish-top,
.tbdd-app .tbdd-studio .tbdd-action-bar .tbdd-finished-button,
.tbdd-app .tbdd-modal-actions button:first-child {
    background: linear-gradient(#598e49, #326b34) !important;
    border-color: #234d27 !important;
    color: #fffbea !important;
}

.tbdd-app .tbdd-finish-top:hover,
.tbdd-app .tbdd-finish-top:focus-visible,
.tbdd-app .tbdd-studio .tbdd-action-bar .tbdd-finished-button:hover,
.tbdd-app .tbdd-studio .tbdd-action-bar .tbdd-finished-button:focus-visible,
.tbdd-app .tbdd-modal-actions button:first-child:hover,
.tbdd-app .tbdd-modal-actions button:first-child:focus-visible {
    background: linear-gradient(#6aa555, #2c5d2c) !important;
    border-color: #1f4121 !important;
    color: #fffbea !important;
    box-shadow: 0 0 0 3px rgba(41, 108, 65, .22) !important;
}

.tbdd-app .tbdd-modal-close {
    color: #35240b !important;
}

.tbdd-app .tbdd-modal-close:hover,
.tbdd-app .tbdd-modal-close:focus-visible {
    background: #f1c865 !important;
    border-color: #8d6215 !important;
    color: #35240b !important;
    box-shadow: 0 0 0 3px rgba(41, 108, 65, .18) !important;
}

.tbdd-app .tbdd-studio button:focus-visible,
.tbdd-app .tbdd-modal button:focus-visible,
.tbdd-app .tbdd-home-feature-card button:focus-visible {
    outline: 3px solid #2b7048 !important;
    outline-offset: 2px;
}

.tbdd-canvas-label {
    box-sizing: border-box;
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tbdd-action-bar button {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
}

@media (max-width: 720px) {
    .tbdd-canvas-stage {
        padding-top: 54px;
    }

    .tbdd-canvas-label {
        font-size: 14px;
        max-width: calc(100% - 16px);
        padding: 7px 14px;
        top: 8px;
    }

    .tbdd-action-bar {
        align-items: stretch;
    }

    .tbdd-action-bar button {
        min-height: 50px;
        padding: 10px 12px;
    }
}


/* v0.3.9: show whether account-based Clover Coin rewards can save. */
.tbdd-adventure-save-state {
    box-sizing: border-box;
    margin: 10px 16px 14px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 2px solid rgba(91, 63, 34, .35);
    border-radius: 12px;
    background: #fff4d9;
    color: #442d1d;
    font-weight: 800;
    text-align: center;
}
.tbdd-adventure-save-state.is-signed-in { background: #eef8e8; }
.tbdd-adventure-save-state a {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border: 2px solid #2c5c33;
    border-radius: 9px;
    background: #397540;
    color: #fff !important;
    text-decoration: none;
    white-space: nowrap;
}
.tbdd-adventure-save-state a:hover,
.tbdd-adventure-save-state a:focus-visible { background: #2d6035; outline: 3px solid #e7bd58; outline-offset: 2px; }
@media (max-width: 620px) {
    .tbdd-adventure-save-state { margin-inline: 10px; flex-direction: column; align-items: stretch; font-size: 13px; }
    .tbdd-adventure-save-state a { width: 100%; box-sizing: border-box; }
}

/* ======================================================================
 * v0.4.2 PREMIUM ART STUDIO EXPERIENCE
 * Presentation-only layer built from the stable v0.3.9 functional baseline.
 * The drawing engine, storage, rewards, VIP access, printing, downloads,
 * sharing, completion workflow, data attributes and JS hooks are untouched.
 * ====================================================================== */

.tbdd-app {
    --tbdd42-ink: #2c342f;
    --tbdd42-muted: #686b64;
    --tbdd42-green: #214d3e;
    --tbdd42-green-deep: #16372d;
    --tbdd42-green-bright: #39745d;
    --tbdd42-gold: #d3a14b;
    --tbdd42-gold-dark: #8b6429;
    --tbdd42-paper: #fffaf0;
    --tbdd42-paper-2: #f5ead6;
    --tbdd42-wall: #cbb89a;
    --tbdd42-wood: #5a3825;
    --tbdd42-wood-dark: #3a2419;
    --tbdd42-coral: #c75a42;
    --tbdd42-plum: #72507f;
    --tbdd42-blue: #4d8193;
    --tbdd42-border: rgba(50, 52, 44, .16);
    --tbdd42-shadow: 0 18px 44px rgba(36, 27, 21, .18);
    --tbdd42-shadow-soft: 0 8px 22px rgba(36, 27, 21, .11);
    background: transparent !important;
    color: var(--tbdd42-ink);
    margin: 0 auto !important;
    max-width: 1420px !important;
    min-height: 100vh;
    padding: 0 !important;
    width: min(100%, 1420px) !important;
}

html:has(body.tbdd-standalone-page),
body.tbdd-standalone-page {
    background:
        radial-gradient(circle at 7% 16%, rgba(225, 169, 70, .12), transparent 19%),
        radial-gradient(circle at 93% 12%, rgba(71, 111, 91, .13), transparent 22%),
        linear-gradient(180deg, #402819 0%, #694628 48%, #3a251a 100%) !important;
}

body.tbdd-standalone-page #tbdd-standalone-main {
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 74px),
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.03));
    padding: 20px clamp(8px, 2vw, 30px) 38px !important;
}

/* Remove the accidental pale frame/rim. The shell itself becomes the room. */
.tbdd-shell {
    background:
        radial-gradient(circle at 12% 23%, rgba(201, 86, 61, .09) 0 14px, transparent 15px),
        radial-gradient(circle at 16% 27%, rgba(73, 126, 148, .08) 0 10px, transparent 11px),
        radial-gradient(circle at 88% 31%, rgba(224, 176, 67, .10) 0 18px, transparent 19px),
        repeating-linear-gradient(0deg, rgba(82,61,40,.025) 0 1px, transparent 1px 7px),
        linear-gradient(180deg, #d7c8b1 0%, #cdbb9f 100%) !important;
    border: 0 !important;
    border-radius: 24px !important;
    box-shadow: 0 30px 76px rgba(22, 14, 10, .30) !important;
    overflow: clip !important;
}

.tbdd-site-header {
    background:
        linear-gradient(180deg, rgba(255,252,243,.99), rgba(247,238,221,.98)) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(91,67,42,.18) !important;
    box-shadow: 0 5px 18px rgba(56,39,25,.09) !important;
    min-height: 80px;
    padding: 9px 22px !important;
    position: relative !important;
    top: auto !important;
}

.admin-bar .tbdd-site-header { top: auto !important; }
.tbdd-club-logo { height: 62px !important; width: 62px !important; filter: drop-shadow(0 4px 6px rgba(42,30,20,.18)); }
.tbdd-breadcrumb { color: #675f55 !important; font: 800 14px/1.2 "Trebuchet MS", Arial, sans-serif !important; }
.tbdd-breadcrumb strong { background: #e8efe8 !important; border: 1px solid rgba(33,77,62,.17) !important; border-radius: 999px !important; color: var(--tbdd42-green-deep) !important; padding: 7px 12px !important; }
.tbdd-header-actions { gap: 8px !important; }
.tbdd-header-actions button,
.tbdd-header-actions a {
    background: #fffdf8 !important;
    background-image: none !important;
    border: 1px solid rgba(62,64,55,.18) !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 10px rgba(44,34,25,.08) !important;
    color: #35413b !important;
    min-height: 40px !important;
    padding: 8px 15px !important;
}
.tbdd-header-actions button:hover,
.tbdd-header-actions button:focus-visible,
.tbdd-header-actions a:hover,
.tbdd-header-actions a:focus-visible {
    background: #f1eadc !important;
    border-color: #927448 !important;
    color: #263b32 !important;
}
.tbdd-header-actions a:last-child,
.tbdd-header-actions a:last-child:visited {
    background: var(--tbdd42-green) !important;
    border-color: var(--tbdd42-green-deep) !important;
    color: #fff !important;
}
.tbdd-header-actions a:last-child:hover,
.tbdd-header-actions a:last-child:focus-visible { background: #2f6854 !important; color: #fff !important; }

/* Status ribbon: clearly separate it from both home and studio content. */
.tbdd-adventure-save-state {
    background: rgba(255,250,239,.96) !important;
    border: 1px solid rgba(94,72,46,.20) !important;
    border-radius: 13px !important;
    box-shadow: 0 8px 18px rgba(49,34,23,.10) !important;
    color: #3e433f !important;
    margin: 16px auto 24px !important;
    max-width: 1160px !important;
    padding: 10px 16px !important;
}
.tbdd-adventure-save-state.is-signed-in { background: rgba(237,247,238,.96) !important; border-color: rgba(33,77,62,.19) !important; }
.tbdd-adventure-save-state a,
.tbdd-adventure-save-state a:visited { background: var(--tbdd42-green) !important; border-color: var(--tbdd42-green-deep) !important; color: #fff !important; }
.tbdd-adventure-save-state a:hover,
.tbdd-adventure-save-state a:focus-visible { background: #2f6854 !important; color: #fff !important; outline: 3px solid rgba(211,161,75,.50) !important; }

.tbdd-home { padding: 0 14px 30px !important; }
.tbdd-home > section,
.tbdd-home-lower-grid,
.tbdd-home-motto,
.tbdd-home > .tbdd-device-note { margin-left: auto !important; margin-right: auto !important; max-width: 1280px !important; }

/* ------------------------------------------------------------------
 * HERO: a real art studio entrance, not an empty green utility block.
 * ------------------------------------------------------------------ */
.tbdd-hero {
    background:
        radial-gradient(circle at 8% 14%, rgba(220, 83, 61, .78) 0 8px, transparent 9px),
        radial-gradient(circle at 11% 18%, rgba(236, 184, 63, .76) 0 12px, transparent 13px),
        radial-gradient(circle at 15% 12%, rgba(75, 140, 159, .72) 0 7px, transparent 8px),
        radial-gradient(circle at 68% 9%, rgba(244,198,101,.20), transparent 19%),
        radial-gradient(circle at 84% 34%, rgba(237,181,81,.20), transparent 22%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 82px),
        linear-gradient(112deg, #17392f 0%, #24513f 49%, #6b4a31 78%, #4c3123 100%) !important;
    border: 1px solid rgba(255,248,226,.18) !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 38px rgba(43,27,18,.24) !important;
    display: grid !important;
    gap: 20px !important;
    grid-template-columns: minmax(360px, .88fr) minmax(470px, 1.12fr) !important;
    margin-top: 0 !important;
    min-height: 430px !important;
    overflow: hidden !important;
    padding: 28px 30px 0 !important;
    position: relative !important;
}
.tbdd-hero::before {
    background:
        radial-gradient(ellipse at 20% 72%, rgba(255,255,255,.055), transparent 26%),
        radial-gradient(ellipse at 82% 16%, rgba(255,218,141,.12), transparent 28%),
        linear-gradient(115deg, transparent 0 61%, rgba(255,255,255,.045) 61% 62%, transparent 62% 100%) !important;
    content: "" !important;
    display: block !important;
    inset: 0 !important;
    opacity: 1 !important;
    pointer-events: none !important;
    position: absolute !important;
}
.tbdd-hero::after {
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 76px),
        linear-gradient(180deg, #6e4932, #493021) !important;
    border-top: 1px solid rgba(255,221,157,.22) !important;
    bottom: 0 !important;
    content: "" !important;
    display: block !important;
    height: 54px !important;
    left: 0 !important;
    position: absolute !important;
    right: 0 !important;
    top: auto !important;
}
.tbdd-hero-copy,
.tbdd-hero-remy { position: relative !important; z-index: 2 !important; }
.tbdd-hero-copy { align-items: flex-start !important; justify-content: center !important; padding: 18px 0 72px !important; }
.tbdd-title-sign {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-width: 520px !important;
    overflow: visible !important;
    padding: 0 !important;
    text-align: left !important;
    transform: none !important;
}
.tbdd-title-sign::before,
.tbdd-title-sign::after,
.tbdd-title-sign .tbdd-sign-nail,
.tbdd-title-sign .tbdd-sign-clover { display: none !important; content: none !important; }
.tbdd-title-sign h1 {
    color: #fffdf7 !important;
    display: block !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1rem !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
    margin: 0 !important;
    overflow: visible !important;
    text-shadow: none !important;
    white-space: normal !important;
}
.tbdd-title-sign .tbdd-title-line { display: block !important; white-space: normal !important; }
.tbdd-title-sign .tbdd-title-realm {
    color: #f0cf88 !important;
    font-family: "Trebuchet MS", Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    letter-spacing: .20em !important;
    line-height: 1.15 !important;
    margin: 0 0 10px !important;
    text-transform: uppercase !important;
}
.tbdd-title-sign .tbdd-title-den {
    color: #fffaf0 !important;
    display: block !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(58px, 6.4vw, 90px) !important;
    font-weight: 900 !important;
    letter-spacing: -.055em !important;
    line-height: .82 !important;
    margin: 0 !important;
    max-width: 7.2ch !important;
    text-shadow: 0 5px 16px rgba(0,0,0,.22) !important;
    white-space: normal !important;
}
.tbdd-title-sign p {
    border-top: 1px solid rgba(255,246,224,.28) !important;
    color: #fff3d5 !important;
    font: 700 18px/1.2 Georgia, "Times New Roman", serif !important;
    margin: 18px 0 3px !important;
    padding-top: 15px !important;
}
.tbdd-title-sign span.tbdd-host-subtitle {
    color: rgba(255,250,239,.76) !important;
    display: block !important;
    font: 800 12px/1.35 "Trebuchet MS", Arial, sans-serif !important;
    letter-spacing: .03em !important;
}
.tbdd-remy-greeting {
    background:
        repeating-linear-gradient(0deg, rgba(102,76,45,.025) 0 1px, transparent 1px 5px),
        #fffaf0 !important;
    border: 1px solid rgba(113,80,43,.28) !important;
    border-radius: 12px !important;
    box-shadow: 7px 9px 0 rgba(35,25,17,.16) !important;
    margin-top: 20px !important;
    max-width: 500px !important;
    padding: 16px 20px !important;
    position: relative !important;
    text-align: center !important;
    transform: rotate(-.35deg) !important;
}
.tbdd-remy-greeting::before {
    background: rgba(226,197,134,.80) !important;
    box-shadow: 0 1px 2px rgba(60,44,24,.10) !important;
    content: "" !important;
    display: block !important;
    height: 18px !important;
    left: 50% !important;
    position: absolute !important;
    top: -9px !important;
    transform: translateX(-50%) rotate(1deg) !important;
    width: 72px !important;
}
.tbdd-remy-greeting::after { display: none !important; content: none !important; }
.tbdd-remy-greeting strong { color: #8a4339 !important; font: italic 700 23px/1.1 Georgia, serif !important; }
.tbdd-remy-greeting p { color: #4d504a !important; font: 14px/1.48 "Trebuchet MS", Arial, sans-serif !important; margin: 8px 0 11px !important; }
.tbdd-read-greeting {
    background: #f4e4c3 !important;
    background-image: none !important;
    border: 1px solid #a98142 !important;
    border-radius: 999px !important;
    color: #24483a !important;
    min-height: 34px !important;
    padding: 6px 14px !important;
}
.tbdd-read-greeting:hover,
.tbdd-read-greeting:focus-visible { background: #e9f0ea !important; border-color: #547665 !important; color: #17392f !important; }
.tbdd-hero-remy { align-items: flex-end !important; min-height: 400px !important; padding-bottom: 20px !important; }
.tbdd-hero-remy::after {
    background: radial-gradient(ellipse, rgba(20,12,8,.38), transparent 70%) !important;
    bottom: 38px !important;
    content: "" !important;
    display: block !important;
    height: 36px !important;
    left: 10% !important;
    position: absolute !important;
    width: 82% !important;
    z-index: 1 !important;
}
.tbdd-hero-remy > img.tbdd-remy-studio {
    filter: drop-shadow(0 15px 11px rgba(22,12,8,.28)) !important;
    height: auto !important;
    max-height: 420px !important;
    max-width: 610px !important;
    object-fit: contain !important;
    position: relative !important;
    transform: none !important;
    width: 100% !important;
    z-index: 2 !important;
}

/* ------------------------------------------------------------------
 * HOME SECTIONS: paper, paint and gallery furniture rather than admin UI.
 * ------------------------------------------------------------------ */
.tbdd-create-section,
.tbdd-gallery-section,
.tbdd-vip-section,
.tbdd-home-lower-grid {
    background:
        repeating-linear-gradient(0deg, rgba(88,68,43,.018) 0 1px, transparent 1px 6px),
        linear-gradient(180deg, rgba(255,252,245,.98), rgba(248,239,223,.98)) !important;
    border: 1px solid rgba(91,68,42,.17) !important;
    border-radius: 18px !important;
    box-shadow: var(--tbdd42-shadow-soft) !important;
    margin-top: 18px !important;
}
.tbdd-create-section,
.tbdd-gallery-section { padding: 26px clamp(16px, 2.3vw, 30px) 28px !important; }
.tbdd-create-section > h2,
.tbdd-masterpiece-section h2,
.tbdd-gallery-section h2,
.tbdd-home-feature-card h2,
.tbdd-vip-section h2 { color: var(--tbdd42-green-deep) !important; font-family: Georgia, "Times New Roman", serif !important; letter-spacing: -.015em !important; }
.tbdd-create-section > h2 { font-size: clamp(34px, 3.4vw, 48px) !important; margin: 0 0 4px !important; text-align: center !important; }
.tbdd-section-lead { color: #6d6b61 !important; font: 15px/1.45 Georgia, serif !important; margin: 0 auto 20px !important; text-align: center !important; }
.tbdd-section-heading-row { align-items: flex-end !important; display: flex !important; gap: 16px !important; justify-content: space-between !important; }
.tbdd-section-heading-row h2 { font-size: clamp(30px, 3vw, 44px) !important; margin: 0 !important; }
.tbdd-section-heading-row p { color: #6c6a62 !important; margin: 3px 0 0 !important; }

.tbdd-choice-grid { gap: 15px !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; max-width: none !important; }
.tbdd-app button.tbdd-choice-card {
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,244,234,.98)) !important;
    background-image: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,244,234,.98)) !important;
    border: 1px solid rgba(77,70,57,.16) !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 18px rgba(51,38,27,.09) !important;
    color: var(--tbdd42-ink) !important;
    min-height: 330px !important;
    overflow: hidden !important;
    padding: 12px 14px 18px !important;
    position: relative !important;
    transform: none !important;
}
.tbdd-app button.tbdd-choice-card::before {
    background: var(--tbdd42-gold) !important;
    border-radius: 999px !important;
    content: "" !important;
    display: block !important;
    height: 3px !important;
    left: 28px !important;
    opacity: .92 !important;
    position: absolute !important;
    right: 28px !important;
    top: 0 !important;
    width: auto !important;
}
.tbdd-app button.tbdd-choice-color::before { background: #d18d37 !important; }
.tbdd-app button.tbdd-choice-blank::before { background: #4d8193 !important; }
.tbdd-app button.tbdd-choice-challenge::before { background: #865a95 !important; }
.tbdd-app button.tbdd-choice-card::after { display: none !important; content: none !important; }
.tbdd-app button.tbdd-choice-card:hover,
.tbdd-app button.tbdd-choice-card:focus-visible {
    background: #fffdf7 !important;
    border-color: rgba(139,100,41,.46) !important;
    box-shadow: 0 0 0 3px rgba(211,161,75,.12), 0 14px 28px rgba(51,38,27,.13) !important;
    color: #26342e !important;
    transform: translateY(-3px) !important;
}
.tbdd-choice-art-wrap,
.tbdd-choice-card > span.tbdd-choice-art-wrap { flex-basis: 185px !important; height: 185px !important; margin-bottom: 4px !important; }
.tbdd-choice-art { filter: drop-shadow(0 9px 7px rgba(70,43,24,.18)) !important; height: 176px !important; max-width: 100% !important; object-fit: contain !important; }
.tbdd-choice-card strong { color: var(--tbdd42-green-deep) !important; font: 700 clamp(21px, 2vw, 28px)/1.08 Georgia, serif !important; margin: 5px 0 7px !important; }
.tbdd-choice-card > span:not(.tbdd-choice-art-wrap) { color: #5d625e !important; font: 13px/1.42 "Trebuchet MS", Arial, sans-serif !important; }
.tbdd-choice-card em { color: #8b7254 !important; font: italic 12px/1.35 Georgia, serif !important; margin-top: 9px !important; }

/* Masterpiece Wall becomes a gallery alcove with picture lights and a wood ledge. */
.tbdd-masterpiece-section {
    background:
        radial-gradient(ellipse at 18% 14%, rgba(255,222,151,.15), transparent 24%),
        radial-gradient(ellipse at 50% 14%, rgba(255,222,151,.15), transparent 24%),
        radial-gradient(ellipse at 82% 14%, rgba(255,222,151,.15), transparent 24%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 84px),
        linear-gradient(180deg, #244b3d 0%, #173b31 100%) !important;
    border: 1px solid rgba(255,240,202,.16) !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 30px rgba(35,27,19,.17) !important;
    margin-top: 18px !important;
    padding: 24px 26px 20px !important;
}
.tbdd-masterpiece-section h2 { color: #fff8e8 !important; }
.tbdd-masterpiece-section .tbdd-section-heading-row p { color: rgba(255,248,232,.74) !important; }
.tbdd-remy-quote { background: rgba(255,248,230,.08) !important; border: 1px solid rgba(231,196,126,.35) !important; border-radius: 999px !important; color: #f3dca7 !important; padding: 7px 12px !important; }
.tbdd-masterpiece-grid {
    align-items: end !important;
    background: linear-gradient(180deg, transparent 0 88%, #67432d 88% 94%, #3f281c 94% 100%) !important;
    gap: 24px !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    padding: 8px 12px 22px !important;
}
.tbdd-masterpiece.tbdd-masterpiece-approved {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 28px 0 0 !important;
    position: relative !important;
}
.tbdd-masterpiece.tbdd-masterpiece-approved::before {
    background: linear-gradient(180deg, #e7c46c, #8e652a) !important;
    border: 1px solid #6f4b1e !important;
    border-radius: 999px !important;
    box-shadow: 0 5px 18px rgba(249,212,129,.22) !important;
    content: "" !important;
    display: block !important;
    height: 8px !important;
    left: 50% !important;
    position: absolute !important;
    top: 6px !important;
    transform: translateX(-50%) !important;
    width: 58px !important;
}
.tbdd-masterpiece.tbdd-masterpiece-approved::after {
    background: radial-gradient(ellipse, rgba(255,224,155,.22), transparent 72%) !important;
    content: "" !important;
    display: block !important;
    height: 70px !important;
    left: 17% !important;
    position: absolute !important;
    right: 17% !important;
    top: 0 !important;
    width: auto !important;
}
.tbdd-masterpiece.tbdd-masterpiece-approved > img {
    background: transparent !important;
    border: 0 !important;
    box-shadow: 0 18px 24px rgba(7,15,11,.34) !important;
    height: auto !important;
    max-height: 330px !important;
    object-fit: contain !important;
    width: 100% !important;
}
.tbdd-masterpiece.tbdd-masterpiece-approved figcaption {
    background: linear-gradient(180deg, #f1d99f, #d8ae61) !important;
    border: 1px solid #8f672b !important;
    border-radius: 7px !important;
    box-shadow: 0 7px 14px rgba(7,15,11,.22), inset 0 1px 0 rgba(255,255,255,.55) !important;
    margin: -4px 10px 0 !important;
    min-height: 66px !important;
    padding: 8px !important;
    position: relative !important;
    z-index: 3 !important;
}
.tbdd-masterpiece.tbdd-masterpiece-approved figcaption strong { color: #342820 !important; font-size: 14px !important; }
.tbdd-masterpiece.tbdd-masterpiece-approved figcaption span { color: #624e39 !important; font-size: 11px !important; }

/* Coloring-page library looks like an artist's portfolio rack. */
.tbdd-gallery-section { overflow: hidden !important; }
.tbdd-home-sheet-grid { gap: 12px !important; grid-template-columns: repeat(5, minmax(0,1fr)) !important; }
.tbdd-home-sheet-card {
    background: #fffdf8 !important;
    border: 1px solid rgba(76,68,55,.15) !important;
    border-radius: 12px !important;
    box-shadow: 0 7px 16px rgba(49,37,27,.08) !important;
    padding: 8px !important;
    position: relative !important;
    transform: none !important;
}
.tbdd-home-sheet-card::before {
    background: #c99b4b !important;
    border-radius: 0 0 5px 5px !important;
    content: "" !important;
    height: 9px !important;
    left: 40% !important;
    opacity: .70 !important;
    position: absolute !important;
    right: 40% !important;
    top: -1px !important;
}
.tbdd-home-sheet-card:hover,
.tbdd-home-sheet-card:focus-within { border-color: rgba(139,100,41,.42) !important; box-shadow: 0 0 0 3px rgba(211,161,75,.10), 0 12px 22px rgba(49,37,27,.12) !important; transform: translateY(-2px) !important; }
.tbdd-home-sheet-card .tbdd-sheet-open { background: transparent !important; color: #34403b !important; }
.tbdd-home-sheet-card .tbdd-sheet-open:hover,
.tbdd-home-sheet-card .tbdd-sheet-open:focus-visible { background: transparent !important; color: #26342e !important; }
.tbdd-sheet-thumb { background: #fff !important; border: 1px solid rgba(70,62,51,.10) !important; border-radius: 8px !important; height: 164px !important; }
.tbdd-home-sheet-card strong { color: #38413c !important; font: 700 12px/1.22 "Trebuchet MS", Arial, sans-serif !important; min-height: 31px !important; }
.tbdd-app .tbdd-home-sheet-card .tbdd-sheet-open > span:last-child,
.tbdd-app .tbdd-see-all-cta { background: var(--tbdd42-green) !important; background-image: none !important; border: 1px solid var(--tbdd42-green-deep) !important; border-radius: 7px !important; color: #fff !important; font-size: 11px !important; min-height: 32px !important; padding: 6px !important; }
.tbdd-app .tbdd-home-sheet-card .tbdd-sheet-open:hover > span:last-child,
.tbdd-app .tbdd-home-sheet-card .tbdd-sheet-open:focus-visible > span:last-child,
.tbdd-app .tbdd-see-all-tile:hover .tbdd-see-all-cta,
.tbdd-app .tbdd-see-all-tile:focus-visible .tbdd-see-all-cta { background: #2f6854 !important; color: #fff !important; }
.tbdd-app button.tbdd-print-blank { background: #f4e5c7 !important; background-image: none !important; border: 1px solid #b28a4c !important; border-radius: 7px !important; color: #4b3a28 !important; min-height: 34px !important; }
.tbdd-app button.tbdd-print-blank:hover,
.tbdd-app button.tbdd-print-blank:focus-visible { background: #fff5df !important; border-color: #816235 !important; color: #33271d !important; }
.tbdd-see-all-card { background: linear-gradient(145deg, #f0eee5, #e4eadf) !important; border-color: rgba(33,77,62,.24) !important; }
.tbdd-see-all-tile,
.tbdd-see-all-tile:hover,
.tbdd-see-all-tile:focus-visible { background: transparent !important; color: #304039 !important; }
.tbdd-see-all-tile strong { color: var(--tbdd42-green-deep) !important; }
.tbdd-see-all-count { color: #676d68 !important; }

/* VIP and lower utility area are compact, warm studio furniture. */
.tbdd-vip-section {
    background:
        radial-gradient(circle at 8% 50%, rgba(114,80,127,.11), transparent 28%),
        linear-gradient(135deg, #fffaf1, #eee2cc) !important;
    display: grid !important;
    gap: 20px !important;
    grid-template-columns: minmax(260px,.72fr) minmax(360px,1.28fr) !important;
    padding: 20px 22px !important;
}
.tbdd-vip-eyebrow { color: #765288 !important; font-weight: 900 !important; letter-spacing: .11em !important; }
.tbdd-vip-section h2 { margin: 2px 0 7px !important; }
.tbdd-vip-copy p { color: #62635e !important; }
.tbdd-vip-form-wrap .tbac-vip-access { background: rgba(255,253,248,.86) !important; border: 1px solid rgba(80,68,52,.16) !important; border-radius: 12px !important; box-shadow: none !important; color: #333e38 !important; max-width: none !important; padding: 14px !important; width: 100% !important; }
.tbdd-vip-form-wrap .tbac-vip-access :is(h1,h2,h3,h4,p,label,span,strong) { color: #34403b !important; }
.tbdd-vip-form-wrap .tbac-vip-access input { background: #fff !important; border: 1px solid #b6b9b2 !important; color: #27322d !important; }
.tbdd-vip-form-wrap .tbac-vip-access button,
.tbdd-vip-form-wrap .tbac-vip-access input[type="submit"] { background: var(--tbdd42-green) !important; background-image: none !important; border-color: var(--tbdd42-green-deep) !important; color: #fff !important; }
.tbdd-vip-form-wrap .tbac-vip-access button:hover,
.tbdd-vip-form-wrap .tbac-vip-access button:focus-visible,
.tbdd-vip-form-wrap .tbac-vip-access input[type="submit"]:hover,
.tbdd-vip-form-wrap .tbac-vip-access input[type="submit"]:focus-visible { background: #2f6854 !important; color: #fff !important; }
.tbdd-home-lower-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; overflow: hidden !important; }
.tbdd-home-feature-card { background: transparent !important; border: 0 !important; border-right: 1px solid rgba(79,66,51,.15) !important; box-shadow: none !important; min-height: 150px !important; padding: 18px 16px !important; }
.tbdd-home-feature-card:last-child { border-right: 0 !important; }
.tbdd-home-feature-card h2 { font-size: 20px !important; margin: 2px 0 5px !important; }
.tbdd-home-feature-card p { color: #686861 !important; font-size: 12px !important; }
.tbdd-home-feature-card button { background: #fffaf0 !important; background-image: none !important; border: 1px solid #a98854 !important; border-radius: 999px !important; color: #32443b !important; min-height: 36px !important; }
.tbdd-home-feature-card button:hover,
.tbdd-home-feature-card button:focus-visible { background: #edf2ec !important; border-color: #567765 !important; color: #17392f !important; }
.tbdd-ask-remy-card img { filter: drop-shadow(0 7px 6px rgba(55,35,22,.18)) !important; }
.tbdd-device-note { color: #665f55 !important; margin-top: 14px !important; }
.tbdd-home-motto {
    background: var(--tbdd42-green-deep) !important;
    border: 1px solid rgba(255,242,210,.20) !important;
    border-radius: 999px !important;
    color: #fff4d9 !important;
    font: italic 700 14px/1.3 Georgia, serif !important;
    margin-top: 10px !important;
    padding: 9px 16px !important;
    text-align: center !important;
}

/* ------------------------------------------------------------------
 * DRAWING STUDIO: an art desk with real breathing room and visual depth.
 * ------------------------------------------------------------------ */
.tbdd-studio {
    background: #4d3424 !important;
    border: 1px solid rgba(255,231,187,.16) !important;
    border-radius: 20px !important;
    box-shadow: 0 22px 48px rgba(37,23,15,.23) !important;
    margin: 0 auto 26px !important;
    max-width: 1280px !important;
    min-height: 650px !important;
    overflow: clip !important;
}
.tbdd-studio-topbar {
    background:
        repeating-linear-gradient(0deg, rgba(89,67,43,.018) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, #fffaf0, #f0e3cc) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(81,59,38,.20) !important;
    box-shadow: 0 6px 14px rgba(39,27,19,.09) !important;
    gap: 9px !important;
    padding: 10px 12px !important;
    position: relative !important;
    z-index: 3 !important;
}
.tbdd-studio-logo { filter: drop-shadow(0 3px 4px rgba(48,33,22,.17)) !important; height: 46px !important; width: 46px !important; }
.tbdd-small-button,
.tbdd-action-bar button,
.tbdd-modal-actions button,
.tbdd-saved-actions button,
.tbdd-finish-top {
    background: #fffdf8 !important;
    background-image: none !important;
    border: 1px solid #a58a61 !important;
    border-radius: 8px !important;
    color: #333b37 !important;
    box-shadow: none !important;
    font-weight: 800 !important;
    min-height: 38px !important;
}
.tbdd-small-button:hover,
.tbdd-small-button:focus-visible,
.tbdd-action-bar button:hover,
.tbdd-action-bar button:focus-visible,
.tbdd-modal-actions button:hover,
.tbdd-modal-actions button:focus-visible,
.tbdd-saved-actions button:hover,
.tbdd-saved-actions button:focus-visible {
    background: #f1eadc !important;
    border-color: #7f6846 !important;
    color: #263a31 !important;
}
.tbdd-finish-top,
.tbdd-action-bar .tbdd-finished-button { background: var(--tbdd42-green) !important; border-color: var(--tbdd42-green-deep) !important; color: #fff !important; }
.tbdd-finish-top:hover,
.tbdd-finish-top:focus-visible,
.tbdd-action-bar .tbdd-finished-button:hover,
.tbdd-action-bar .tbdd-finished-button:focus-visible { background: #2f6854 !important; color: #fff !important; }
.tbdd-title-field span { color: #554f47 !important; }
.tbdd-title-field input { background: #fff !important; border: 1px solid #b7aa94 !important; border-radius: 7px !important; color: #28332e !important; min-height: 38px !important; }
.tbdd-save-status { color: #356449 !important; }

.tbdd-studio-layout {
    background: #34251c !important;
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: 155px minmax(0,1fr) 255px !important;
    min-height: 570px !important;
    padding: 10px !important;
}
.tbdd-tools,
.tbdd-options {
    background:
        repeating-linear-gradient(0deg, rgba(91,70,46,.018) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, #fffaf0, #efe2c9) !important;
    border: 1px solid rgba(115,84,47,.25) !important;
    border-radius: 13px !important;
    box-shadow: 0 8px 18px rgba(28,18,12,.16) !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 10px !important;
}
.tbdd-tools { border-right: 1px solid rgba(115,84,47,.25) !important; }
.tbdd-options { padding: 10px !important; }
.tbdd-panel-title {
    background: linear-gradient(180deg, #244f40, #183b31) !important;
    border: 1px solid #112d25 !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
    color: #fff3d5 !important;
    font: 900 12px/1.1 "Trebuchet MS", Arial, sans-serif !important;
    letter-spacing: .09em !important;
    margin-bottom: 9px !important;
    padding: 8px !important;
    text-align: center !important;
    text-transform: uppercase !important;
}
.tbdd-tools .tbdd-tool-grid { gap: 5px !important; grid-template-columns: 1fr !important; }
.tbdd-app .tbdd-studio .tbdd-tool {
    align-items: center !important;
    background: #fffdf8 !important;
    background-image: none !important;
    border: 1px solid rgba(101,87,67,.24) !important;
    border-radius: 8px !important;
    color: #37413c !important;
    display: flex !important;
    font-size: 12px !important;
    gap: 7px !important;
    justify-content: flex-start !important;
    min-height: 38px !important;
    padding: 6px 8px !important;
}
.tbdd-app .tbdd-studio .tbdd-tool:hover,
.tbdd-app .tbdd-studio .tbdd-tool:focus-visible { background: #f0eadc !important; border-color: #8c714b !important; color: #23382f !important; }
.tbdd-app .tbdd-studio .tbdd-tool.is-active {
    background: #e3eee5 !important;
    border-color: #557865 !important;
    box-shadow: inset 4px 0 0 #c75a42 !important;
    color: #193a2e !important;
}
.tbdd-remy-tip {
    background: #fff5d9 !important;
    border: 1px solid #c8a971 !important;
    border-radius: 8px !important;
    box-shadow: 3px 4px 0 rgba(82,58,33,.10) !important;
    margin-top: 12px !important;
    padding: 8px 7px !important;
    transform: rotate(-.5deg) !important;
}
.tbdd-remy-tip p { color: #6b5c49 !important; font-size: 11px !important; }
.tbdd-remy-tip strong { color: #735184 !important; }

.tbdd-canvas-stage {
    align-items: flex-start !important;
    background:
        radial-gradient(circle at 10% 15%, rgba(206,78,58,.32) 0 9px, transparent 10px),
        radial-gradient(circle at 89% 22%, rgba(224,173,61,.26) 0 12px, transparent 13px),
        radial-gradient(circle at 18% 88%, rgba(74,127,146,.24) 0 8px, transparent 9px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.024) 0 1px, transparent 1px 68px),
        repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 1px, transparent 1px 9px),
        linear-gradient(180deg, #5b3d2b 0%, #3d2a20 100%) !important;
    border: 1px solid rgba(255,225,179,.14) !important;
    border-radius: 13px !important;
    box-shadow: inset 0 0 0 5px rgba(34,22,16,.12) !important;
    justify-content: center !important;
    min-width: 0 !important;
    overflow: auto !important;
    padding: 50px 16px 18px !important;
    position: relative !important;
}
.tbdd-canvas-label {
    background: linear-gradient(180deg, #f0d38d, #c89b49) !important;
    border: 1px solid #795625 !important;
    border-radius: 999px !important;
    box-shadow: 0 5px 10px rgba(34,21,13,.18) !important;
    color: #3e3024 !important;
    font: 900 12px/1 "Trebuchet MS", Arial, sans-serif !important;
    letter-spacing: .06em !important;
    padding: 7px 15px !important;
    position: absolute !important;
    top: 12px !important;
}
.tbdd-canvas-wrap {
    background: #fff !important;
    border: 4px solid #d3a14b !important;
    border-radius: 3px !important;
    box-shadow: 0 13px 28px rgba(18,11,7,.34), 0 0 0 1px #6f4d24 !important;
}
.tbdd-options .tbdd-tool-group { background: rgba(255,253,248,.72) !important; border: 1px solid rgba(107,89,64,.18) !important; border-radius: 9px !important; margin: 8px 0 !important; padding: 9px !important; }
.tbdd-options .tbdd-tool-group + .tbdd-tool-group { border-top: 1px solid rgba(107,89,64,.18) !important; }
.tbdd-tool-label { color: #666055 !important; font-size: 10px !important; }
.tbdd-color-editor-launch,
.tbdd-color-actions .tbdd-small-button,
.tbdd-zoom-controls .tbdd-small-button { background: #fff !important; background-image: none !important; border: 1px solid #b7aa94 !important; color: #34403a !important; }
.tbdd-color-editor-launch:hover,
.tbdd-color-editor-launch:focus-visible,
.tbdd-color-actions .tbdd-small-button:hover,
.tbdd-color-actions .tbdd-small-button:focus-visible,
.tbdd-zoom-controls .tbdd-small-button:hover,
.tbdd-zoom-controls .tbdd-small-button:focus-visible { background: #edf2ec !important; border-color: #687f72 !important; color: #19372d !important; }
.tbdd-size-preview { background-color: #fffdf8 !important; border: 1px dashed #b99c69 !important; height: 78px !important; }
.tbdd-size-step { background: #fffaf0 !important; background-image: none !important; border: 1px solid #9e8257 !important; color: #433526 !important; }
.tbdd-size-step:hover,
.tbdd-size-step:focus-visible { background: #f0eadc !important; border-color: #735c3d !important; color: #263a31 !important; }
.tbdd-action-bar {
    background:
        repeating-linear-gradient(0deg, rgba(89,67,43,.018) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, #f8edda, #fffaf0) !important;
    border: 0 !important;
    border-top: 1px solid rgba(81,59,38,.20) !important;
    gap: 8px !important;
    padding: 12px !important;
}
.tbdd-action-bar button { min-width: 100px !important; }
.tbdd-studio-motto { background: var(--tbdd42-green-deep) !important; border: 1px solid rgba(255,241,210,.18) !important; border-radius: 999px !important; color: #fff2d0 !important; font: italic 700 13px/1.3 Georgia, serif !important; margin: 10px auto 12px !important; max-width: 650px !important; padding: 8px 14px !important; text-align: center !important; }

/* Modal and dynamic-card consistency. */
.tbdd-modal-card { background: #fffaf0 !important; border: 2px solid #8b693c !important; border-radius: 18px !important; color: #303b35 !important; }
.tbdd-modal-card h2 { color: var(--tbdd42-green-deep) !important; }
.tbdd-sheet-card,
.tbdd-saved-card,
.tbdd-empty-state { background: #fffdf8 !important; border-color: rgba(91,73,50,.20) !important; color: #34403b !important; }
.tbdd-saved-card strong,
.tbdd-saved-card span,
.tbdd-empty-state { color: #34403b !important; }
.tbdd-saved-actions .tbdd-delete-button,
.tbdd-delete-button { background: #fff3ef !important; border-color: #c99b94 !important; color: #783c35 !important; }
.tbdd-saved-actions .tbdd-delete-button:hover,
.tbdd-saved-actions .tbdd-delete-button:focus-visible,
.tbdd-delete-button:hover,
.tbdd-delete-button:focus-visible { background: #f8e5e0 !important; border-color: #a86e66 !important; color: #67312b !important; }

/* ------------------------------------------------------------------
 * THEME-PROOF INTERACTION CONTRAST. No blue mouse-over states.
 * ------------------------------------------------------------------ */
.tbdd-app button,
.tbdd-app a,
.tbdd-app [role="button"] { text-shadow: none !important; -webkit-tap-highlight-color: transparent; }
.tbdd-app button:focus-visible,
.tbdd-app a:focus-visible,
.tbdd-app [role="button"]:focus-visible { outline: 3px solid rgba(211,161,75,.72) !important; outline-offset: 2px !important; }
.tbdd-app button:hover *,
.tbdd-app button:focus-visible *,
.tbdd-app a:hover *,
.tbdd-app a:focus-visible * { text-shadow: none !important; }
.tbdd-app :is(.tbdd-header-actions a:last-child,.tbdd-adventure-save-state a,.tbdd-home-sheet-card .tbdd-sheet-open > span:last-child,.tbdd-see-all-cta,.tbdd-vip-form-wrap .tbac-vip-access button,.tbdd-vip-form-wrap .tbac-vip-access input[type="submit"],.tbdd-finish-top,.tbdd-action-bar .tbdd-finished-button,.tbdd-modal-actions button:first-child),
.tbdd-app :is(.tbdd-header-actions a:last-child,.tbdd-adventure-save-state a,.tbdd-home-sheet-card .tbdd-sheet-open > span:last-child,.tbdd-see-all-cta,.tbdd-vip-form-wrap .tbac-vip-access button,.tbdd-vip-form-wrap .tbac-vip-access input[type="submit"],.tbdd-finish-top,.tbdd-action-bar .tbdd-finished-button,.tbdd-modal-actions button:first-child):hover,
.tbdd-app :is(.tbdd-header-actions a:last-child,.tbdd-adventure-save-state a,.tbdd-home-sheet-card .tbdd-sheet-open > span:last-child,.tbdd-see-all-cta,.tbdd-vip-form-wrap .tbac-vip-access button,.tbdd-vip-form-wrap .tbac-vip-access input[type="submit"],.tbdd-finish-top,.tbdd-action-bar .tbdd-finished-button,.tbdd-modal-actions button:first-child):focus-visible { color: #fff !important; }

/* ------------------------------------------------------------------
 * TABLET QA TARGET: 768x1024, 820x1180, 1024x768, 1180x820.
 * ------------------------------------------------------------------ */
@media (max-width: 1180px) {
    body.tbdd-standalone-page #tbdd-standalone-main { padding-inline: 10px !important; }
    .tbdd-app { max-width: 1160px !important; width: 100% !important; }
    .tbdd-hero { grid-template-columns: minmax(320px,.90fr) minmax(410px,1.10fr) !important; min-height: 410px !important; padding-inline: 24px !important; }
    .tbdd-title-sign .tbdd-title-den { font-size: clamp(54px, 6.5vw, 76px) !important; }
    .tbdd-hero-remy > img.tbdd-remy-studio { max-height: 398px !important; max-width: 560px !important; }
    .tbdd-studio-layout { grid-template-columns: 145px minmax(0,1fr) 235px !important; }
    .tbdd-masterpiece.tbdd-masterpiece-approved > img { max-height: 300px !important; }
}

@media (max-width: 900px) {
    body.tbdd-standalone-page #tbdd-standalone-main { padding-inline: 6px !important; }
    .tbdd-shell { border-radius: 18px !important; }
    .tbdd-site-header { grid-template-columns: 64px minmax(0,1fr) !important; }
    .tbdd-header-actions { grid-column: 1/-1 !important; justify-content: center !important; }
    .tbdd-home { padding-inline: 8px !important; }
    .tbdd-hero { gap: 10px !important; grid-template-columns: minmax(285px,.90fr) minmax(340px,1.10fr) !important; min-height: 390px !important; padding: 22px 18px 0 !important; }
    .tbdd-hero-copy { padding: 12px 0 64px !important; }
    .tbdd-title-sign .tbdd-title-realm { font-size: 14px !important; }
    .tbdd-title-sign .tbdd-title-den { font-size: clamp(48px, 7.8vw, 66px) !important; }
    .tbdd-title-sign p { font-size: 16px !important; margin-top: 14px !important; padding-top: 12px !important; }
    .tbdd-remy-greeting { margin-top: 14px !important; padding: 12px 14px !important; }
    .tbdd-remy-greeting strong { font-size: 20px !important; }
    .tbdd-remy-greeting p { font-size: 12px !important; }
    .tbdd-hero-remy { min-height: 360px !important; }
    .tbdd-hero-remy > img.tbdd-remy-studio { max-height: 365px !important; }
    .tbdd-choice-grid { gap: 10px !important; }
    .tbdd-app button.tbdd-choice-card { min-height: 285px !important; padding-inline: 10px !important; }
    .tbdd-choice-art-wrap,
    .tbdd-choice-card > span.tbdd-choice-art-wrap { flex-basis: 145px !important; height: 145px !important; }
    .tbdd-choice-art { height: 138px !important; }
    .tbdd-choice-card strong { font-size: 20px !important; }
    .tbdd-choice-card > span:not(.tbdd-choice-art-wrap) { font-size: 11px !important; }
    .tbdd-masterpiece-grid { gap: 14px !important; padding-inline: 4px !important; }
    .tbdd-masterpiece.tbdd-masterpiece-approved > img { max-height: 260px !important; }
    .tbdd-masterpiece.tbdd-masterpiece-approved figcaption { margin-inline: 4px !important; min-height: 62px !important; }
    .tbdd-home-sheet-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
    .tbdd-home-sheet-card.tbdd-see-all-card { grid-column: auto !important; }
    .tbdd-vip-section { grid-template-columns: 1fr !important; }

    /* Tablet portrait: tools left, canvas right, options become a full-width tray below. */
    .tbdd-studio-layout { grid-template-columns: 145px minmax(0,1fr) !important; }
    .tbdd-tools { grid-column: 1 !important; grid-row: 1 !important; }
    .tbdd-canvas-stage { grid-column: 2 !important; grid-row: 1 !important; min-height: 560px !important; }
    .tbdd-options {
        display: grid !important;
        gap: 9px !important;
        grid-column: 1/-1 !important;
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
        grid-row: 2 !important;
    }
    .tbdd-options > .tbdd-panel-title { grid-column: 1/-1 !important; margin-bottom: 0 !important; }
    .tbdd-options .tbdd-tool-group { margin: 0 !important; }
    .tbdd-options .tbdd-tool-group + .tbdd-tool-group { border-left: 0 !important; }
    .tbdd-tools .tbdd-tool-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 720px) {
    body.tbdd-standalone-page #tbdd-standalone-main { padding: 0 0 24px !important; }
    .tbdd-shell { border-radius: 0 0 16px 16px !important; }
    .tbdd-site-header { padding: 8px 10px !important; }
    .tbdd-club-logo { height: 54px !important; width: 54px !important; }
    .tbdd-header-actions { gap: 6px !important; }
    .tbdd-header-actions button,
    .tbdd-header-actions a { flex: 1 1 30% !important; min-width: 0 !important; padding-inline: 7px !important; }
    .tbdd-adventure-save-state { margin: 12px 8px 18px !important; }
    .tbdd-home { padding: 0 7px 22px !important; }
    .tbdd-hero { grid-template-columns: 1fr !important; min-height: 0 !important; padding: 22px 14px 0 !important; }
    .tbdd-hero-copy { align-items: center !important; padding: 8px 0 18px !important; text-align: center !important; }
    .tbdd-title-sign { max-width: 500px !important; text-align: center !important; }
    .tbdd-title-sign .tbdd-title-realm { font-size: 14px !important; }
    .tbdd-title-sign .tbdd-title-den { font-size: clamp(50px, 15vw, 68px) !important; margin-inline: auto !important; max-width: 7.3ch !important; }
    .tbdd-remy-greeting { margin: 16px auto 0 !important; max-width: 470px !important; }
    .tbdd-hero-remy { min-height: 300px !important; padding-bottom: 12px !important; }
    .tbdd-hero-remy > img.tbdd-remy-studio { max-height: 320px !important; max-width: 460px !important; }
    .tbdd-create-section,
    .tbdd-masterpiece-section,
    .tbdd-gallery-section { border-radius: 14px !important; padding: 20px 11px 22px !important; }
    .tbdd-section-heading-row { align-items: flex-start !important; flex-direction: column !important; }
    .tbdd-choice-grid { grid-template-columns: 1fr !important; }
    .tbdd-app button.tbdd-choice-card { min-height: 0 !important; }
    .tbdd-choice-art-wrap,
    .tbdd-choice-card > span.tbdd-choice-art-wrap { flex-basis: 205px !important; height: 205px !important; }
    .tbdd-choice-art { height: 195px !important; }
    .tbdd-masterpiece-grid { background: none !important; grid-template-columns: 1fr !important; padding: 6px 0 0 !important; }
    .tbdd-masterpiece.tbdd-masterpiece-approved { margin: 0 auto 14px !important; max-width: 450px !important; }
    .tbdd-masterpiece.tbdd-masterpiece-approved > img { max-height: none !important; }
    .tbdd-home-sheet-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .tbdd-vip-section { padding: 17px 13px !important; }
    .tbdd-home-lower-grid { grid-template-columns: 1fr !important; }
    .tbdd-home-feature-card { border-bottom: 1px solid rgba(79,66,51,.15) !important; border-right: 0 !important; min-height: 0 !important; }
    .tbdd-home-feature-card:last-child { border-bottom: 0 !important; }

    /* Mobile: compact tool dock first, canvas second, options third. */
    .tbdd-studio { border-radius: 14px !important; margin-inline: 5px !important; }
    .tbdd-studio-topbar { padding: 7px !important; }
    .tbdd-studio-layout { display: flex !important; flex-direction: column !important; padding: 7px !important; }
    .tbdd-tools { order: 1 !important; }
    .tbdd-tools .tbdd-tool-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
    .tbdd-app .tbdd-studio .tbdd-tool { flex-direction: column !important; gap: 3px !important; justify-content: center !important; min-height: 58px !important; text-align: center !important; }
    .tbdd-remy-tip { display: none !important; }
    .tbdd-canvas-stage { min-height: 500px !important; order: 2 !important; padding: 48px 7px 14px !important; }
    .tbdd-options { display: block !important; order: 3 !important; }
    .tbdd-action-bar { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; position: sticky !important; bottom: 0 !important; z-index: 20 !important; }
    .tbdd-action-bar .tbdd-finished-button { grid-column: 1/-1 !important; }
}

@media (max-width: 430px) {
    .tbdd-home-sheet-grid { grid-template-columns: 1fr 1fr !important; }
    .tbdd-sheet-thumb { height: 138px !important; }
    .tbdd-title-sign .tbdd-title-den { font-size: clamp(46px, 15vw, 60px) !important; }
    .tbdd-tools .tbdd-tool-grid { grid-template-columns: repeat(3,1fr) !important; }
    .tbdd-options .tbdd-palette { grid-template-columns: repeat(6,1fr) !important; }
}

/* v0.4.2 tablet correction found during real Chromium visual QA:
   legacy <=960px rules turn the entire tools sidebar into a 3-column grid.
   Force it back to a normal vertical palette on tablet portrait. */
@media (max-width: 900px) and (min-width: 721px) {
    .tbdd-tools {
        display: block !important;
        padding: 10px !important;
    }
    .tbdd-tools .tbdd-panel-title,
    .tbdd-tools .tbdd-tool-grid,
    .tbdd-tools .tbdd-remy-tip {
        width: 100% !important;
    }
}

/* Tablet portrait balance: legacy <=960px rules made every third card span the
   full row. Keep the premium three-across destination/gallery rhythm on tablets. */
@media (max-width: 900px) and (min-width: 721px) {
    .tbdd-choice-card:last-child,
    .tbdd-masterpiece:last-child,
    .tbdd-home-feature-card:last-child {
        grid-column: auto !important;
    }
    .tbdd-home-lower-grid {
        grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    }
}

/* Final active-tool state lock, including hover/focus, to prevent theme colors. */
.tbdd-app .tbdd-studio .tbdd-tool.is-active,
.tbdd-app .tbdd-studio .tbdd-tool.is-active:hover,
.tbdd-app .tbdd-studio .tbdd-tool.is-active:focus-visible {
    background: #e3eee5 !important;
    background-image: none !important;
    border-color: #557865 !important;
    color: #193a2e !important;
    box-shadow: inset 4px 0 0 #c75a42 !important;
}

/* ========================================================================
 * v0.5.0 REALM SCENIC BACKGROUND SYSTEM + ORIENTATION-STABLE PRESENTATION
 * A fixed DOM layer, modeled after the proven Mega Moo Mall approach, keeps
 * Realm artwork locked to the browser viewport while long Doodle Depot pages
 * scroll above it. The drawing engine remains separate and untouched.
 * ===================================================================== */

html:has(body.tbdd-has-page-bg),
body.tbdd-has-page-bg {
    background: #d9d0c2 !important;
}

body.tbdd-has-page-bg .tbdd-page-bg-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: #d9d0c2;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    width: 100vw;
    width: 100dvw;
    min-width: 100lvw;
    height: 100vh;
    height: 100dvh;
    min-height: 100lvh;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: background-image;
}

/* Purposeful premium fallbacks until custom Realm art is uploaded. */
body.tbdd-has-page-bg:not(.tbdd-has-uploaded-bg) .tbdd-page-bg-layer.is-home {
    background-image:
        radial-gradient(circle at 12% 18%, rgba(225,91,62,.35) 0 10px, transparent 11px),
        radial-gradient(circle at 18% 22%, rgba(239,186,70,.32) 0 15px, transparent 16px),
        radial-gradient(circle at 87% 16%, rgba(71,132,154,.30) 0 12px, transparent 13px),
        linear-gradient(115deg, rgba(35,73,57,.93) 0 38%, rgba(98,65,42,.88) 72%, rgba(48,31,23,.95) 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 92px) !important;
}
body.tbdd-has-page-bg:not(.tbdd-has-uploaded-bg) .tbdd-page-bg-layer.is-studio {
    background-image:
        radial-gradient(circle at 10% 12%, rgba(227,177,78,.22), transparent 24%),
        radial-gradient(circle at 92% 30%, rgba(79,129,142,.18), transparent 25%),
        linear-gradient(120deg, #2b2019 0%, #46301f 35%, #183a30 72%, #102a23 100%) !important;
}
body.tbdd-has-page-bg.tbdd-christmas:not(.tbdd-has-uploaded-bg) .tbdd-page-bg-layer {
    background-image:
        radial-gradient(circle at 15% 12%, rgba(255,232,171,.28), transparent 22%),
        radial-gradient(circle at 86% 14%, rgba(183,42,43,.24), transparent 24%),
        linear-gradient(120deg, #17392e 0%, #1f5a43 43%, #713229 79%, #3d201c 100%) !important;
}

body.tbdd-has-page-bg #tbdd-standalone-main,
body.tbdd-has-page-bg .tbdd-standalone-main {
    background: transparent !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    position: relative !important;
    z-index: 1 !important;
}

body.tbdd-has-page-bg .tbdd-app {
    margin-inline: auto !important;
    max-width: 1320px !important;
    position: relative !important;
    width: min(100%,1320px) !important;
    z-index: 1 !important;
}

body.tbdd-has-page-bg .tbdd-shell {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body.tbdd-has-page-bg .tbdd-site-header {
    background: rgba(255,251,242,.94) !important;
    backdrop-filter: blur(12px) saturate(1.06);
    -webkit-backdrop-filter: blur(12px) saturate(1.06);
    border: 1px solid rgba(255,255,255,.50) !important;
    border-radius: 20px 20px 13px 13px !important;
    box-shadow: 0 15px 38px rgba(24,19,15,.20) !important;
    margin-inline: 10px !important;
}

body.tbdd-has-page-bg .tbdd-adventure-save-state {
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
    margin-bottom: 34px !important;
    margin-top: 20px !important;
}

/* Home content floats over the fixed Realm scene instead of becoming the bg. */
body.tbdd-has-page-bg .tbdd-home {
    background: transparent !important;
    padding-bottom: 54px !important;
}
body.tbdd-has-page-bg .tbdd-hero {
    background:
        linear-gradient(112deg, rgba(16,54,43,.94) 0%, rgba(24,75,57,.91) 51%, rgba(87,57,37,.90) 100%) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 24px 54px rgba(22,15,11,.34) !important;
}
body.tbdd-has-page-bg .tbdd-create-section,
body.tbdd-has-page-bg .tbdd-gallery-section,
body.tbdd-has-page-bg .tbdd-vip-section,
body.tbdd-has-page-bg .tbdd-home-lower-grid {
    background-color: rgba(255,250,240,.94) !important;
    backdrop-filter: blur(8px) saturate(1.03);
    -webkit-backdrop-filter: blur(8px) saturate(1.03);
    box-shadow: 0 18px 40px rgba(33,24,17,.20) !important;
}
body.tbdd-has-page-bg .tbdd-masterpiece-section {
    background: linear-gradient(180deg,rgba(18,58,46,.96),rgba(17,47,40,.96)) !important;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    box-shadow: 0 20px 46px rgba(19,14,11,.30) !important;
}

/* Studio is its own scenic location. The workspace stays readable while the
   Realm-specific Studio background remains visible around the application. */
body.tbdd-has-page-bg .tbdd-studio {
    background: transparent !important;
    margin-inline: 10px !important;
}
body.tbdd-has-page-bg .tbdd-studio-topbar,
body.tbdd-has-page-bg .tbdd-action-bar {
    background: rgba(255,250,241,.95) !important;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    box-shadow: 0 10px 28px rgba(28,20,15,.16) !important;
}
body.tbdd-has-page-bg .tbdd-studio-layout {
    background: rgba(31,47,41,.93) !important;
    border: 1px solid rgba(255,255,255,.17) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 56px rgba(19,14,11,.34) !important;
    overflow: hidden !important;
}
body.tbdd-has-page-bg .tbdd-tools,
body.tbdd-has-page-bg .tbdd-options {
    background: rgba(255,252,246,.97) !important;
}
body.tbdd-has-page-bg .tbdd-canvas-stage {
    background:
        radial-gradient(circle at 15% 12%, rgba(230,177,78,.08), transparent 26%),
        linear-gradient(145deg, rgba(26,49,42,.98), rgba(18,36,31,.98)) !important;
}
body.tbdd-has-page-bg .tbdd-studio-motto {
    background: rgba(21,66,52,.96) !important;
    box-shadow: 0 10px 30px rgba(18,12,9,.24) !important;
    color: #fff8e8 !important;
}

/* Runtime device classes are authoritative on real phones/tablets. This fixes
   phone landscape widths that would otherwise miss max-width:720 CSS and iPad
   landscape widths that Safari can report as desktop-class. */
body.tbdd-responsive-tablet #tbdd-standalone-main {
    padding-inline: clamp(6px,1.6vw,18px) !important;
}
body.tbdd-responsive-tablet .tbdd-app {
    max-width: 1160px !important;
    width: 100% !important;
}
body.tbdd-responsive-tablet .tbdd-home {
    padding-inline: 8px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-hero {
    gap: 10px !important;
    grid-template-columns: minmax(285px,.90fr) minmax(340px,1.10fr) !important;
    min-height: 390px !important;
    padding: 22px 18px 0 !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-studio-layout {
    grid-template-columns: 145px minmax(0,1fr) !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-tools {
    display:block !important;
    grid-column:1 !important;
    grid-row:1 !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-canvas-stage {
    grid-column:2 !important;
    grid-row:1 !important;
    min-height:560px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-options {
    display:grid !important;
    gap:9px !important;
    grid-column:1/-1 !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-row:2 !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-options > .tbdd-panel-title {
    grid-column:1/-1 !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-tools .tbdd-tool-grid {
    grid-template-columns:1fr !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-studio-layout {
    grid-template-columns:145px minmax(0,1fr) 235px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-options {
    display:block !important;
    grid-column:auto !important;
    grid-row:auto !important;
}

/* Real phone layout, portrait AND landscape. */
body.tbdd-responsive-phone #tbdd-standalone-main {
    padding:0 0 24px !important;
}
body.tbdd-responsive-phone .tbdd-app {
    max-width:100% !important;
    width:100% !important;
}
body.tbdd-responsive-phone .tbdd-shell {
    border-radius:0 !important;
}
body.tbdd-responsive-phone .tbdd-site-header {
    border-radius:0 0 14px 14px !important;
    margin-inline:0 !important;
    padding:8px 10px !important;
}
body.tbdd-responsive-phone .tbdd-club-logo {
    height:54px !important;
    width:54px !important;
}
body.tbdd-responsive-phone .tbdd-header-actions {
    gap:6px !important;
}
body.tbdd-responsive-phone .tbdd-header-actions button,
body.tbdd-responsive-phone .tbdd-header-actions a {
    flex:1 1 30% !important;
    min-width:0 !important;
    padding-inline:7px !important;
}
body.tbdd-responsive-phone .tbdd-adventure-save-state {
    margin:12px 8px 24px !important;
}
body.tbdd-responsive-phone .tbdd-home {
    padding:0 7px 28px !important;
}
body.tbdd-responsive-phone .tbdd-hero {
    grid-template-columns:1fr !important;
    min-height:0 !important;
    padding:22px 14px 0 !important;
}
body.tbdd-responsive-phone .tbdd-hero-copy {
    align-items:center !important;
    padding:8px 0 18px !important;
    text-align:center !important;
}
body.tbdd-responsive-phone .tbdd-title-sign {
    max-width:500px !important;
    text-align:center !important;
}
body.tbdd-responsive-phone .tbdd-title-sign .tbdd-title-den {
    font-size:clamp(46px,15vw,68px) !important;
    margin-inline:auto !important;
    max-width:7.3ch !important;
}
body.tbdd-responsive-phone .tbdd-remy-greeting {
    margin:16px auto 0 !important;
    max-width:470px !important;
}
body.tbdd-responsive-phone .tbdd-hero-remy {
    min-height:280px !important;
    padding-bottom:12px !important;
}
body.tbdd-responsive-phone .tbdd-hero-remy > img.tbdd-remy-studio {
    max-height:310px !important;
    max-width:460px !important;
}
body.tbdd-responsive-phone .tbdd-choice-grid,
body.tbdd-responsive-phone .tbdd-masterpiece-grid,
body.tbdd-responsive-phone .tbdd-home-lower-grid {
    grid-template-columns:1fr !important;
}
body.tbdd-responsive-phone .tbdd-home-sheet-grid {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
body.tbdd-responsive-phone .tbdd-studio {
    margin-inline:5px !important;
}
body.tbdd-responsive-phone .tbdd-studio-layout {
    display:flex !important;
    flex-direction:column !important;
    padding:7px !important;
}
body.tbdd-responsive-phone .tbdd-tools {
    order:1 !important;
}
body.tbdd-responsive-phone .tbdd-tools .tbdd-tool-grid {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
body.tbdd-responsive-phone .tbdd-app .tbdd-studio .tbdd-tool {
    flex-direction:column !important;
    gap:3px !important;
    justify-content:center !important;
    min-height:58px !important;
    text-align:center !important;
}
body.tbdd-responsive-phone .tbdd-remy-tip {
    display:none !important;
}
body.tbdd-responsive-phone .tbdd-canvas-stage {
    min-height:470px !important;
    order:2 !important;
    padding:48px 7px 14px !important;
}
body.tbdd-responsive-phone .tbdd-options {
    display:block !important;
    order:3 !important;
}
body.tbdd-responsive-phone .tbdd-action-bar {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    position:sticky !important;
    bottom:0 !important;
    z-index:20 !important;
}
body.tbdd-responsive-phone .tbdd-action-bar .tbdd-finished-button {
    grid-column:1/-1 !important;
}

/* Phone landscape gets a little more horizontal economy while retaining the
   phone tool/canvas/options order. */
body.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-hero {
    grid-template-columns:minmax(270px,.9fr) minmax(300px,1.1fr) !important;
    padding:14px 18px 0 !important;
}
body.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-hero-copy {
    align-items:flex-start !important;
    padding:4px 0 12px !important;
    text-align:left !important;
}
body.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-title-sign {
    text-align:left !important;
}
body.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-title-sign .tbdd-title-den {
    font-size:clamp(42px,8vw,60px) !important;
    margin-inline:0 !important;
    max-width:none !important;
}
body.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-remy-greeting {
    margin:12px 0 0 !important;
}
body.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-hero-remy {
    min-height:290px !important;
}
body.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-hero-remy > img.tbdd-remy-studio {
    max-height:300px !important;
}
body.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-home-sheet-grid {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

/* Prevent theme hover contamination in the new background/admin presentation. */
body.tbdd-has-page-bg .tbdd-app :is(button,a,[role="button"]):focus-visible {
    outline:3px solid rgba(211,161,75,.72) !important;
    outline-offset:2px !important;
}

/* -------------------------------------------------------------------------
 * v0.5.1 DRAWING BOARD CENTERLINE + NAV LABEL ALIGNMENT
 *
 * The canvas is the visual anchor of the Drawing Studio.  Keep its physical
 * center on the application centerline at every supported orientation rather
 * than centering it only inside an asymmetrical middle grid column.
 * ---------------------------------------------------------------------- */

/* Header pills: center the label inside the pill itself, not merely the pill
   inside the header row. */
.tbdd-header-actions button,
.tbdd-header-actions a {
    align-items: center !important;
    line-height: 1.15 !important;
}

/* Desktop: equal-width utility rails preserve the canvas on the true page
   centerline. 205 + canvas + 205 retains almost exactly the same total rail
   footprint as the prior 155 + canvas + 255 layout. */
@media (min-width: 961px) {
    body:not(.tbdd-responsive-tablet):not(.tbdd-responsive-phone) .tbdd-studio-layout {
        grid-template-columns: 205px minmax(0, 1fr) 205px !important;
    }
}

/* Tablet landscape keeps the three-part workstation, but the rails are now
   symmetric so the board is centered through rotation. */
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-studio-layout {
    grid-template-columns: 190px minmax(0, 1fr) 190px !important;
}

/* Tablet portrait becomes a centered art-desk stack.  This avoids shifting
   the board to the right simply because Tools previously occupied a permanent
   left rail while Colors & Options lived below. */
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-studio-layout {
    grid-template-columns: minmax(0, 1fr) !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-tools {
    border-bottom: 1px solid rgba(115,84,47,.25) !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    max-height: none !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-tools .tbdd-tool-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-app .tbdd-studio .tbdd-tool {
    flex-direction: column !important;
    gap: 3px !important;
    justify-content: center !important;
    min-height: 58px !important;
    text-align: center !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-remy-tip {
    align-items: center !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    margin: 10px auto 0 !important;
    max-width: 430px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-remy-tip img {
    height: 74px !important;
    width: 58px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-canvas-stage {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-height: 560px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-options {
    display: grid !important;
    gap: 9px !important;
    grid-column: 1 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-row: 3 !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-options > .tbdd-panel-title {
    grid-column: 1 / -1 !important;
}

/* The phone layouts are intentionally already stacked. Make the centering
   contract explicit so future desktop/tablet changes cannot contaminate them. */
body.tbdd-responsive-phone .tbdd-canvas-stage {
    align-items: flex-start !important;
    justify-content: center !important;
    width: 100% !important;
}


/* ========================================================================
 * v0.5.2 LIVE CANVAS CENTERLINE CORRECTION
 *
 * The production coloring sheets are tall enough to make the canvas stage
 * scroll. A normal right-side scrollbar reduces only the right side of the
 * flex scrollport, which makes a technically centered board look left-biased.
 * Reserve equal scrollbar space on both sides and allow presentation.js to
 * apply a small measured correction against the real Studio centerline.
 * ===================================================================== */
.tbdd-studio .tbdd-canvas-stage {
    box-sizing: border-box !important;
    scrollbar-gutter: stable both-edges !important;
}

.tbdd-studio .tbdd-canvas-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
    transform: translateX(var(--tbdd-board-center-correction, 0px)) !important;
    transform-origin: center center !important;
}

/* Keep the structural rails symmetric even before the runtime device class
   arrives. The runtime rules below still own tablet portrait and phone stacks. */
@media (min-width: 961px) {
    .tbdd-studio-layout {
        grid-template-columns: 205px minmax(0, 1fr) 205px !important;
    }
}

body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-studio-layout {
    grid-template-columns: 190px minmax(0, 1fr) 190px !important;
}

body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-canvas-stage,
body.tbdd-responsive-phone .tbdd-canvas-stage {
    width: 100% !important;
}

/* ------------------------------------------------------------------------
 * v0.5.2 VIEWPORT CENTERLINE LOCK
 *
 * The standalone main element had legacy horizontal padding while still using
 * width:100%, which made its rendered box wider than the browser viewport.
 * The Doodle app could also inherit a high-specificity first-child width rule,
 * and the scenic Studio rule replaced auto side margins with fixed margins.
 * Together those rules moved the entire Studio off the viewport centerline.
 * These late, high-specificity rules neutralize that legacy geometry.
 * --------------------------------------------------------------------- */
body.tbdd-has-page-bg #tbdd-standalone-main,
body.tbdd-has-page-bg .tbdd-standalone-main {
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

body.tbdd-has-page-bg #tbdd-standalone-main > .tbdd-app,
body.tbdd-has-page-bg #tbdd-standalone-main .wp-block-shortcode > .tbdd-app,
body.tbdd-has-page-bg #tbdd-standalone-main .wp-block-group__inner-container > .tbdd-app,
body.tbdd-has-page-bg #tbdd-standalone-main .entry-content > .tbdd-app,
body.tbdd-has-page-bg .tbdd-app {
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1320px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: min(100%, 1320px) !important;
}

body.tbdd-has-page-bg .tbdd-studio {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1280px !important;
    width: calc(100% - 20px) !important;
}

body.tbdd-responsive-phone.tbdd-has-page-bg .tbdd-studio {
    margin-left: auto !important;
    margin-right: auto !important;
    width: calc(100% - 10px) !important;
}

/* ========================================================================
 * v0.5.3 TABLET HEADER / NAVIGATION LOCK
 *
 * Tablet portrait and landscape use explicit grid areas so the Club logo,
 * breadcrumb, and action pills cannot collapse into an empty cream strip.
 * These rules are intentionally scoped to the runtime tablet class and do
 * not alter desktop or phone navigation.
 * ===================================================================== */
body.tbdd-responsive-tablet .tbdd-site-header {
    align-items: center !important;
    box-sizing: border-box !important;
    display: grid !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}
body.tbdd-responsive-tablet .tbdd-club-logo-link {
    align-items: center !important;
    align-self: center !important;
    display: flex !important;
    justify-content: center !important;
    min-height: 54px !important;
    min-width: 54px !important;
    opacity: 1 !important;
    visibility: visible !important;
}
body.tbdd-responsive-tablet .tbdd-club-logo {
    display: block !important;
    flex: 0 0 auto !important;
    height: 54px !important;
    max-height: 54px !important;
    max-width: 54px !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 54px !important;
}
body.tbdd-responsive-tablet .tbdd-breadcrumb {
    align-items: center !important;
    align-self: center !important;
    display: flex !important;
    margin: 0 !important;
    min-height: 40px !important;
    min-width: 0 !important;
}
body.tbdd-responsive-tablet .tbdd-header-actions {
    align-items: center !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.tbdd-responsive-tablet .tbdd-header-actions button,
body.tbdd-responsive-tablet .tbdd-header-actions a {
    align-items: center !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    justify-content: center !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    min-height: 40px !important;
    white-space: nowrap !important;
}

/* Portrait tablet: identity row first, then three balanced actions. */
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-site-header {
    gap: 8px 10px !important;
    grid-template-areas:
        "tbdd-logo tbdd-crumb"
        "tbdd-actions tbdd-actions" !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    padding: 10px 12px 12px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-club-logo-link { grid-area: tbdd-logo !important; }
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-breadcrumb { grid-area: tbdd-crumb !important; }
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-header-actions {
    display: grid !important;
    gap: 8px !important;
    grid-area: tbdd-actions !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    width: 100% !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-header-actions button,
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-header-actions a {
    min-width: 0 !important;
    padding: 8px 10px !important;
    width: 100% !important;
}

/* Landscape tablet: keep the complete navigation on one centered row. */
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-site-header {
    gap: 12px !important;
    grid-template-areas: "tbdd-logo tbdd-crumb tbdd-actions" !important;
    grid-template-columns: 58px minmax(150px, 1fr) auto !important;
    padding: 9px 14px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-club-logo-link { grid-area: tbdd-logo !important; }
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-breadcrumb { grid-area: tbdd-crumb !important; }
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-header-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    grid-area: tbdd-actions !important;
    justify-content: flex-end !important;
    width: auto !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-header-actions button,
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-header-actions a {
    flex: 0 0 auto !important;
    padding: 8px 12px !important;
}


/* ========================================================================
 * v0.5.4 TABLET CLUB LOGO HARD FALLBACK
 *
 * Live WordPress/theme tablet CSS can suppress or fail to paint the <img>
 * even when the Doodle Depot grid area is correct.  The navigation link now
 * carries the same approved Club logo as a CSS background on tablets.  This
 * is deliberately redundant with the real <img>: if the image element is
 * visible they occupy the exact same box; if an outside rule hides/breaks
 * the image, the approved logo remains visible from the plugin asset.
 * ===================================================================== */
body.tbdd-responsive-tablet .tbdd-club-logo-link {
    background-image: url("../images/terri-bull-adventure-club-logo.webp") !important;
    background-position: 50% 50% !important;
    background-repeat: no-repeat !important;
    background-size: 54px 54px !important;
    box-sizing: border-box !important;
    height: 58px !important;
    min-height: 58px !important;
    min-width: 58px !important;
    overflow: visible !important;
    width: 58px !important;
}
body.tbdd-responsive-tablet .tbdd-club-logo-link > .tbdd-club-logo {
    display: block !important;
    height: 54px !important;
    margin: 0 !important;
    max-height: 54px !important;
    max-width: 54px !important;
    object-fit: contain !important;
    opacity: 1 !important;
    position: relative !important;
    visibility: visible !important;
    width: 54px !important;
    z-index: 1 !important;
}

/* Keep the first tablet column large enough for the protected logo box. */
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-site-header {
    grid-template-columns: 62px minmax(0, 1fr) !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-site-header {
    grid-template-columns: 62px minmax(150px, 1fr) auto !important;
}


/* v0.5.4 actual tablet logo fallback element.  This is a second paint path
 * using the same approved image URL emitted by PHP, so the Club mark remains
 * visible even if the live theme suppresses <img> elements at tablet widths. */
.tbdd-club-logo-fallback {
    display: none;
}
body.tbdd-responsive-tablet .tbdd-club-logo-link {
    position: relative !important;
}
body.tbdd-responsive-tablet .tbdd-club-logo-fallback {
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    display: block !important;
    height: 54px !important;
    inset: 2px !important;
    opacity: 1 !important;
    pointer-events: none !important;
    position: absolute !important;
    visibility: visible !important;
    width: 54px !important;
    z-index: 0 !important;
}
body.tbdd-responsive-tablet .tbdd-club-logo {
    position: relative !important;
    z-index: 1 !important;
}

/* ========================================================================
 * v0.5.5 QUICK COLOR CONTAINMENT + ENLARGE STUDIO FOCUS MODE
 * ===================================================================== */

/* Quick Colors: fixed-size circles inside fractional grid tracks can overflow
   the narrow Options rail.  Let the grid tracks shrink and let each swatch
   shrink with its track while keeping a consistent circular appearance. */
.tbdd-options,
.tbdd-options .tbdd-tool-group,
.tbdd-options .tbdd-palette {
    box-sizing: border-box !important;
    min-width: 0 !important;
}
.tbdd-options .tbdd-palette {
    align-items: center !important;
    display: grid !important;
    gap: 6px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
}
.tbdd-options .tbdd-swatch {
    aspect-ratio: 1 / 1 !important;
    box-sizing: border-box !important;
    height: auto !important;
    justify-self: center !important;
    margin: 0 !important;
    max-height: 27px !important;
    max-width: 27px !important;
    min-height: 20px !important;
    min-width: 20px !important;
    padding: 0 !important;
    width: min(27px, 100%) !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-options .tbdd-palette {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
}
body.tbdd-responsive-phone .tbdd-options .tbdd-palette {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

/* Focus toggle is deliberately neutral so it reads as a workspace control,
   not a destructive or completion action. */
.tbdd-studio-focus-toggle {
    align-items: center !important;
    display: inline-flex !important;
    gap: 6px !important;
    justify-content: center !important;
    white-space: nowrap !important;
}
.tbdd-studio-focus-toggle .tbdd-studio-focus-icon {
    display: inline-block !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}
.tbdd-studio-focus-toggle[aria-pressed="true"] {
    background: #e8efe9 !important;
    border-color: #5f796b !important;
    color: #183a2f !important;
}

body.tbdd-studio-focus-active {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

/* v0.5.6: focus mode deliberately starts below any persistent WordPress /
   Club navigation chrome measured by presentation.js.  The value is runtime
   because the Club News ticker and admin toolbar can have different heights
   on desktop, tablet portrait/landscape, and phone portrait/landscape. */
html {
    --tbdd-focus-top-offset: 0px;
}
body.tbdd-studio-focus-active .tbdd-studio.is-focus-mode {
    background: #30231c !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    bottom: 0 !important;
    height: calc(100dvh - var(--tbdd-focus-top-offset, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--tbdd-focus-top-offset, 0px) !important;
    margin: 0 !important;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: fixed !important;
    width: 100vw !important;
    z-index: 99990 !important;
}
body.tbdd-studio-focus-active .tbdd-studio.is-focus-mode .tbdd-studio-topbar {
    flex: 0 0 auto !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
}
body.tbdd-studio-focus-active .tbdd-studio.is-focus-mode .tbdd-studio-layout {
    box-sizing: border-box !important;
    height: 100% !important;
    margin: 0 !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
}
body.tbdd-studio-focus-active .tbdd-studio.is-focus-mode .tbdd-tools,
body.tbdd-studio-focus-active .tbdd-studio.is-focus-mode .tbdd-options {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
body.tbdd-studio-focus-active .tbdd-studio.is-focus-mode .tbdd-canvas-stage {
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: auto !important;
}
body.tbdd-studio-focus-active .tbdd-studio.is-focus-mode .tbdd-action-bar {
    bottom: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    position: relative !important;
    width: 100% !important;
    z-index: 4 !important;
}
body.tbdd-studio-focus-active .tbdd-studio.is-focus-mode .tbdd-studio-motto {
    display: none !important;
}

/* Desktop focus mode: balanced permanent rails with the artwork centered in
   the remaining viewport. */
body.tbdd-studio-focus-active.tbdd-responsive-desktop .tbdd-studio.is-focus-mode .tbdd-studio-layout,
body.tbdd-studio-focus-active:not(.tbdd-responsive-tablet):not(.tbdd-responsive-phone) .tbdd-studio.is-focus-mode .tbdd-studio-layout {
    grid-template-columns: 220px minmax(0, 1fr) 220px !important;
}

/* Tablet landscape retains the familiar three-part art desk, with equal rails
   so the board remains centered. */
body.tbdd-studio-focus-active.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-studio.is-focus-mode .tbdd-studio-layout {
    grid-template-columns: 180px minmax(0, 1fr) 180px !important;
}

/* Tablet portrait: compact horizontal tool dock, centered canvas, then compact
   options tray.  The middle row is the only flexible-height row. */
body.tbdd-studio-focus-active.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-studio-layout {
    display: grid !important;
    gap: 7px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    padding: 7px !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-tools {
    grid-row: 1 !important;
    max-height: 150px !important;
    overflow-y: auto !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-canvas-stage {
    grid-row: 2 !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-options {
    grid-row: 3 !important;
    max-height: 210px !important;
    overflow-y: auto !important;
}

/* Phones get swipeable compact control docks rather than a tall stack that
   would leave no room for the artwork in focus mode. */
body.tbdd-studio-focus-active.tbdd-responsive-phone .tbdd-studio.is-focus-mode {
    grid-template-rows: auto minmax(0, 1fr) auto !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone .tbdd-studio.is-focus-mode .tbdd-studio-topbar {
    gap: 5px !important;
    max-height: 118px !important;
    overflow-y: auto !important;
    padding: 6px !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone .tbdd-studio.is-focus-mode .tbdd-studio-logo {
    height: 34px !important;
    width: 34px !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone .tbdd-studio.is-focus-mode .tbdd-title-field {
    flex-basis: calc(100% - 44px) !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone .tbdd-studio.is-focus-mode .tbdd-studio-focus-toggle [data-role="studio-focus-label"] {
    display: none !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone .tbdd-studio.is-focus-mode .tbdd-studio-layout {
    display: grid !important;
    gap: 5px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    min-height: 0 !important;
    padding: 5px !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone .tbdd-studio.is-focus-mode .tbdd-tools {
    grid-row: 1 !important;
    max-height: 92px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 5px !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone .tbdd-studio.is-focus-mode .tbdd-tools .tbdd-panel-title,
body.tbdd-studio-focus-active.tbdd-responsive-phone .tbdd-studio.is-focus-mode .tbdd-remy-tip {
    display: none !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone .tbdd-studio.is-focus-mode .tbdd-tool-grid {
    display: flex !important;
    gap: 5px !important;
    min-width: max-content !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone .tbdd-studio.is-focus-mode .tbdd-tool {
    flex: 0 0 70px !important;
    min-height: 70px !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone .tbdd-studio.is-focus-mode .tbdd-canvas-stage {
    grid-row: 2 !important;
    min-height: 0 !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone .tbdd-studio.is-focus-mode .tbdd-options {
    display: flex !important;
    gap: 6px !important;
    grid-row: 3 !important;
    max-height: 138px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 5px !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone .tbdd-studio.is-focus-mode .tbdd-options > .tbdd-panel-title {
    display: none !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone .tbdd-studio.is-focus-mode .tbdd-options > .tbdd-tool-group {
    flex: 0 0 230px !important;
    margin: 0 !important;
    min-width: 230px !important;
    overflow-y: auto !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone .tbdd-studio.is-focus-mode .tbdd-action-bar {
    display: flex !important;
    gap: 5px !important;
    overflow-x: auto !important;
    padding: 6px !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone .tbdd-studio.is-focus-mode .tbdd-action-bar button {
    flex: 0 0 auto !important;
    min-width: 92px !important;
}

/* Focus mode must never bury Doodle Depot dialogs behind the fixed Studio. */
body.tbdd-studio-focus-active .tbdd-modal {
    z-index: 100000 !important;
}

/* v0.5.5 placement refinement: keep the focus toggle out of the already busy
   artwork-title toolbar. It floats in the upper-right of the canvas stage. */
.tbdd-canvas-stage {
    position: relative !important;
}
.tbdd-canvas-stage > .tbdd-studio-focus-toggle {
    position: absolute !important;
    right: 12px !important;
    top: 10px !important;
    z-index: 8 !important;
}
body.tbdd-responsive-phone .tbdd-canvas-stage > .tbdd-studio-focus-toggle [data-role="studio-focus-label"] {
    display: none !important;
}
body.tbdd-responsive-phone .tbdd-canvas-stage > .tbdd-studio-focus-toggle {
    min-width: 40px !important;
    padding: 7px 9px !important;
    right: 8px !important;
    top: 8px !important;
}

/* v0.5.5 phone-landscape focus refinement: use the wide orientation as a
   compact three-rail workstation instead of stacking docks above/below the
   artwork. This preserves meaningful canvas height on short landscape phones. */
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-studio.is-focus-mode .tbdd-studio-topbar {
    flex-wrap: nowrap !important;
    gap: 5px !important;
    max-height: 54px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 5px 6px !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-studio.is-focus-mode .tbdd-studio-logo {
    display: none !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-studio.is-focus-mode .tbdd-title-field {
    flex: 0 0 250px !important;
    min-width: 250px !important;
    order: initial !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-studio.is-focus-mode .tbdd-title-field span {
    display: none !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-studio.is-focus-mode .tbdd-save-status {
    flex: 0 0 auto !important;
    min-width: 84px !important;
    white-space: nowrap !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-studio.is-focus-mode .tbdd-studio-layout {
    display: grid !important;
    gap: 5px !important;
    grid-template-columns: 125px minmax(0, 1fr) 170px !important;
    grid-template-rows: minmax(0, 1fr) !important;
    padding: 5px !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-studio.is-focus-mode .tbdd-tools {
    grid-column: 1 !important;
    grid-row: 1 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 5px !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-studio.is-focus-mode .tbdd-tools .tbdd-panel-title {
    display: block !important;
    font-size: 10px !important;
    padding: 5px !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-studio.is-focus-mode .tbdd-tool-grid {
    display: grid !important;
    gap: 4px !important;
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-studio.is-focus-mode .tbdd-tool {
    flex: none !important;
    flex-direction: row !important;
    font-size: 10px !important;
    gap: 5px !important;
    justify-content: flex-start !important;
    min-height: 34px !important;
    padding: 4px 6px !important;
    text-align: left !important;
    width: 100% !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-studio.is-focus-mode .tbdd-canvas-stage {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 0 !important;
    padding: 44px 5px 8px !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-studio.is-focus-mode .tbdd-options {
    display: block !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 5px !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-studio.is-focus-mode .tbdd-options > .tbdd-panel-title {
    display: block !important;
    font-size: 10px !important;
    padding: 5px !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-studio.is-focus-mode .tbdd-options > .tbdd-tool-group {
    display: block !important;
    margin: 5px 0 !important;
    min-width: 0 !important;
    padding: 6px !important;
    width: 100% !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-studio.is-focus-mode .tbdd-options .tbdd-palette {
    gap: 3px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-studio.is-focus-mode .tbdd-options .tbdd-swatch {
    min-height: 18px !important;
    min-width: 18px !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-studio.is-focus-mode .tbdd-action-bar {
    flex-wrap: nowrap !important;
    min-height: 44px !important;
    overflow-x: auto !important;
    padding: 4px 6px !important;
}


/* ========================================================================
 * v0.5.7 REAL iPHONE SAFARI FOCUS-MODE HARDENING
 *
 * The v0.5.5 phone focus layout used nested CSS Grid + intrinsic overflow.
 * Chromium emulation tolerated it, but real Mobile Safari can collapse the
 * tool and options docks into narrow edge slivers.  Phone focus mode now uses
 * explicit Flexbox geometry with fixed dock heights/widths, which is much more
 * stable in WebKit.  Desktop/tablet rules remain unchanged.
 * ===================================================================== */
body.tbdd-studio-focus-active.tbdd-responsive-phone .tbdd-studio.is-focus-mode {
    height: calc(var(--tbdd-focus-visual-height, 100dvh) - var(--tbdd-focus-top-offset, 0px)) !important;
    max-height: calc(var(--tbdd-focus-visual-height, 100dvh) - var(--tbdd-focus-top-offset, 0px)) !important;
    width: var(--tbdd-focus-visual-width, 100vw) !important;
    max-width: var(--tbdd-focus-visual-width, 100vw) !important;
    left: var(--tbdd-focus-visual-left, 0px) !important;
    right: auto !important;
}

/* Portrait phones: compact header + horizontal tool dock + canvas + horizontal
   options dock. All widths are explicit so Safari cannot collapse a dock to
   the width of its first child. */
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-portrait .tbdd-studio.is-focus-mode {
    display: flex !important;
    flex-direction: column !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-studio-topbar {
    display: grid !important;
    grid-template-columns: 34px minmax(0,1fr) auto auto !important;
    grid-template-areas:
        "logo back help finish"
        "title title title title"
        "history history save save" !important;
    gap: 5px 6px !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-studio-logo {
    display: block !important;
    grid-area: logo !important;
    height: 32px !important;
    width: 32px !important;
    align-self: center !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-studio-topbar > [data-action="home"] {
    grid-area: back !important;
    justify-self: start !important;
    min-width: 0 !important;
    padding-inline: 10px !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-title-field {
    grid-area: title !important;
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    width: 100% !important;
    flex-basis: auto !important;
    order: initial !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-title-field input {
    min-width: 0 !important;
    width: 100% !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-history-buttons {
    grid-area: history !important;
    display: flex !important;
    gap: 5px !important;
    min-width: 0 !important;
    order: initial !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-save-status {
    grid-area: save !important;
    align-self: center !important;
    justify-self: end !important;
    min-width: 0 !important;
    order: initial !important;
    white-space: nowrap !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-studio-topbar > [data-action="help"] {
    grid-area: help !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-finish-top {
    grid-area: finish !important;
    margin-left: 0 !important;
}

body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-studio-layout {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    gap: 5px !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-tools {
    display: block !important;
    flex: 0 0 74px !important;
    height: 74px !important;
    max-height: 74px !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    order: 1 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px !important;
    width: 100% !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-tools .tbdd-panel-title,
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-remy-tip {
    display: none !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-tool-grid {
    display: flex !important;
    gap: 4px !important;
    height: 100% !important;
    min-width: max-content !important;
    width: max-content !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-tool {
    flex: 0 0 62px !important;
    flex-direction: column !important;
    font-size: 10px !important;
    gap: 1px !important;
    justify-content: center !important;
    min-height: 58px !important;
    padding: 3px !important;
    text-align: center !important;
    width: 62px !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-canvas-stage {
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    order: 2 !important;
    overflow: auto !important;
    padding: 46px 5px 8px !important;
    width: 100% !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-options {
    display: flex !important;
    flex: 0 0 104px !important;
    gap: 5px !important;
    height: 104px !important;
    max-height: 104px !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    order: 3 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px !important;
    width: 100% !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-options > .tbdd-panel-title {
    display: none !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-options > .tbdd-tool-group {
    display: block !important;
    flex: 0 0 205px !important;
    height: 94px !important;
    margin: 0 !important;
    min-height: 0 !important;
    min-width: 205px !important;
    overflow-y: auto !important;
    padding: 5px !important;
    width: 205px !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-action-bar {
    flex: 0 0 auto !important;
    position: relative !important;
    width: 100% !important;
}

/* Landscape phones: use Flexbox rails instead of Grid. This keeps the art
   stage stable on short WebKit viewports and preserves every control. */
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-studio.is-focus-mode {
    display: flex !important;
    flex-direction: column !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-studio.is-focus-mode .tbdd-studio-layout {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    gap: 4px !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 4px !important;
    width: 100% !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-studio.is-focus-mode .tbdd-tools {
    flex: 0 0 112px !important;
    height: 100% !important;
    max-height: none !important;
    min-width: 112px !important;
    order: 1 !important;
    overflow-y: auto !important;
    width: 112px !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-studio.is-focus-mode .tbdd-canvas-stage {
    flex: 1 1 auto !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    order: 2 !important;
    overflow: auto !important;
    width: auto !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-landscape .tbdd-studio.is-focus-mode .tbdd-options {
    display: block !important;
    flex: 0 0 150px !important;
    height: 100% !important;
    max-height: none !important;
    min-width: 150px !important;
    order: 3 !important;
    overflow-y: auto !important;
    width: 150px !important;
}

/* WebKit/iOS containment: don't allow a transformed canvas to escape the art
   stage or force the control docks outside the viewport. */
body.tbdd-studio-focus-active.tbdd-responsive-phone .tbdd-studio.is-focus-mode .tbdd-canvas-wrap {
    max-width: 100% !important;
}
body.tbdd-studio-focus-active.tbdd-responsive-phone .tbdd-studio.is-focus-mode :is(.tbdd-tools,.tbdd-options,.tbdd-canvas-stage,.tbdd-action-bar,.tbdd-studio-topbar) {
    box-sizing: border-box !important;
}


/* ========================================================================
 * v0.6.7 SERVER-CONFIRMED TABLET LANDING CONTRACT
 *
 * The landing page no longer depends on presentation.js adding a runtime
 * tablet body class. WordPress marks the Doodle Depot root as a tablet on the
 * server from the request user agent. Desktop and phone roots never receive
 * tbdd-server-tablet, so this contract cannot leak into those layouts.
 * ===================================================================== */
.tbdd-app.tbdd-server-tablet .tbdd-home {
    padding-inline: 8px !important;
}

/* Hero: make the destination name unmistakably dominant on a real tablet. */
.tbdd-app.tbdd-server-tablet .tbdd-title-sign .tbdd-title-den {
    display: block !important;
    font-size: 86px !important;
    font-size: clamp(86px, 10vw, 112px) !important;
    line-height: .86 !important;
    max-width: none !important;
    white-space: normal !important;
}
@media (orientation: portrait) {
    .tbdd-app.tbdd-server-tablet .tbdd-title-sign .tbdd-title-den {
        font-size: 88px !important;
        font-size: clamp(88px, 11.5vw, 104px) !important;
    }
}
@media (orientation: landscape) {
    .tbdd-app.tbdd-server-tablet .tbdd-title-sign .tbdd-title-den {
        font-size: 96px !important;
        font-size: clamp(96px, 9.5vw, 116px) !important;
    }
}

/* Native tablet controls. No synthetic taps or click proxies. */
.tbdd-app.tbdd-server-tablet .tbdd-choice-card,
.tbdd-app.tbdd-server-tablet .tbdd-home-sheet-card .tbdd-sheet-open,
.tbdd-app.tbdd-server-tablet .tbdd-home-sheet-card .tbdd-print-blank,
.tbdd-app.tbdd-server-tablet .tbdd-see-all-card .tbdd-see-all-tile,
.tbdd-app.tbdd-server-tablet .tbdd-read-greeting,
.tbdd-app.tbdd-server-tablet .tbdd-vip-form-wrap .tbac-vip-access button,
.tbdd-app.tbdd-server-tablet .tbdd-vip-form-wrap .tbac-vip-access input[type="submit"] {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    z-index: 2 !important;
}

.tbdd-app.tbdd-server-tablet .tbdd-choice-grid {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 10px !important;
}
.tbdd-app.tbdd-server-tablet .tbdd-choice-card:last-child {
    grid-column: auto !important;
}
.tbdd-app.tbdd-server-tablet button.tbdd-choice-card:hover,
.tbdd-app.tbdd-server-tablet button.tbdd-choice-card:focus,
.tbdd-app.tbdd-server-tablet button.tbdd-choice-card:focus-visible,
.tbdd-app.tbdd-server-tablet button.tbdd-choice-card:active {
    background: #fff8e8 !important;
    background-color: #fff8e8 !important;
    background-image: none !important;
    border-color: #b78a42 !important;
    color: #263a31 !important;
    box-shadow: 0 0 0 3px rgba(183,138,66,.18), 0 12px 24px rgba(35,29,22,.12) !important;
}
.tbdd-app.tbdd-server-tablet button.tbdd-choice-card:hover *,
.tbdd-app.tbdd-server-tablet button.tbdd-choice-card:focus *,
.tbdd-app.tbdd-server-tablet button.tbdd-choice-card:focus-visible *,
.tbdd-app.tbdd-server-tablet button.tbdd-choice-card:active * {
    color: inherit !important;
}

/* Approved Masterpiece frames sit directly on the wall, with no white cards. */
.tbdd-app.tbdd-server-tablet .tbdd-masterpiece.tbdd-masterpiece-approved {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.tbdd-app.tbdd-server-tablet .tbdd-masterpiece.tbdd-masterpiece-approved > img {
    background: transparent !important;
    background-color: transparent !important;
}

/* Coloring-sheet tiles stay readable through hover/focus/active states. */
.tbdd-app.tbdd-server-tablet .tbdd-home-sheet-card .tbdd-sheet-open,
.tbdd-app.tbdd-server-tablet .tbdd-home-sheet-card .tbdd-sheet-open:hover,
.tbdd-app.tbdd-server-tablet .tbdd-home-sheet-card .tbdd-sheet-open:focus,
.tbdd-app.tbdd-server-tablet .tbdd-home-sheet-card .tbdd-sheet-open:focus-visible,
.tbdd-app.tbdd-server-tablet .tbdd-home-sheet-card .tbdd-sheet-open:active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #26342e !important;
}
.tbdd-app.tbdd-server-tablet .tbdd-home-sheet-card .tbdd-sheet-open:hover > span:last-child,
.tbdd-app.tbdd-server-tablet .tbdd-home-sheet-card .tbdd-sheet-open:focus > span:last-child,
.tbdd-app.tbdd-server-tablet .tbdd-home-sheet-card .tbdd-sheet-open:focus-visible > span:last-child,
.tbdd-app.tbdd-server-tablet .tbdd-home-sheet-card .tbdd-sheet-open:active > span:last-child {
    background: #2f6854 !important;
    background-image: none !important;
    color: #fff !important;
}

/* Print Blank Page: centered label and no inherited dark-blue state. */
.tbdd-app.tbdd-server-tablet button.tbdd-print-blank {
    align-items: center !important;
    display: flex !important;
    justify-content: center !important;
    line-height: 1.15 !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    text-align: center !important;
    width: 100% !important;
}
.tbdd-app.tbdd-server-tablet button.tbdd-print-blank:hover,
.tbdd-app.tbdd-server-tablet button.tbdd-print-blank:focus,
.tbdd-app.tbdd-server-tablet button.tbdd-print-blank:focus-visible,
.tbdd-app.tbdd-server-tablet button.tbdd-print-blank:active {
    background: #fff5df !important;
    background-color: #fff5df !important;
    background-image: none !important;
    border-color: #816235 !important;
    color: #33271d !important;
}

/* Full Gallery: explicitly defeat the global dark-blue button/focus treatment. */
.tbdd-app.tbdd-server-tablet .tbdd-see-all-card button.tbdd-see-all-tile,
.tbdd-app.tbdd-server-tablet .tbdd-see-all-card button.tbdd-see-all-tile:hover,
.tbdd-app.tbdd-server-tablet .tbdd-see-all-card button.tbdd-see-all-tile:focus,
.tbdd-app.tbdd-server-tablet .tbdd-see-all-card button.tbdd-see-all-tile:focus-visible,
.tbdd-app.tbdd-server-tablet .tbdd-see-all-card button.tbdd-see-all-tile:active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: #71854f !important;
    color: #304039 !important;
    outline-color: #b78a42 !important;
}
.tbdd-app.tbdd-server-tablet .tbdd-see-all-card button.tbdd-see-all-tile:hover *,
.tbdd-app.tbdd-server-tablet .tbdd-see-all-card button.tbdd-see-all-tile:focus *,
.tbdd-app.tbdd-server-tablet .tbdd-see-all-card button.tbdd-see-all-tile:focus-visible *,
.tbdd-app.tbdd-server-tablet .tbdd-see-all-card button.tbdd-see-all-tile:active * {
    color: inherit !important;
}
.tbdd-app.tbdd-server-tablet .tbdd-see-all-card button.tbdd-see-all-tile .tbdd-see-all-cta,
.tbdd-app.tbdd-server-tablet .tbdd-see-all-card button.tbdd-see-all-tile:hover .tbdd-see-all-cta,
.tbdd-app.tbdd-server-tablet .tbdd-see-all-card button.tbdd-see-all-tile:focus .tbdd-see-all-cta,
.tbdd-app.tbdd-server-tablet .tbdd-see-all-card button.tbdd-see-all-tile:focus-visible .tbdd-see-all-cta,
.tbdd-app.tbdd-server-tablet .tbdd-see-all-card button.tbdd-see-all-tile:active .tbdd-see-all-cta {
    background: #2f6854 !important;
    background-color: #2f6854 !important;
    background-image: none !important;
    border-color: #214c3d !important;
    color: #fff !important;
}

/* VIP field and button share one baseline and one height. */
.tbdd-app.tbdd-server-tablet .tbdd-vip-form-wrap .tbac-vip-access form {
    align-items: end !important;
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    width: 100% !important;
}
.tbdd-app.tbdd-server-tablet .tbdd-vip-form-wrap .tbac-vip-access form > label {
    display: block !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
}
.tbdd-app.tbdd-server-tablet .tbdd-vip-form-wrap .tbac-vip-access input[type="text"],
.tbdd-app.tbdd-server-tablet .tbdd-vip-form-wrap .tbac-vip-access input[type="password"] {
    box-sizing: border-box !important;
    height: 42px !important;
    margin: 4px 0 0 !important;
    min-height: 42px !important;
    padding-block: 0 !important;
    width: 100% !important;
}
.tbdd-app.tbdd-server-tablet .tbdd-vip-form-wrap .tbac-vip-access button,
.tbdd-app.tbdd-server-tablet .tbdd-vip-form-wrap .tbac-vip-access input[type="submit"] {
    align-items: center !important;
    align-self: end !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    height: 42px !important;
    justify-content: center !important;
    margin: 0 !important;
    min-height: 42px !important;
    padding-block: 0 !important;
    white-space: nowrap !important;
}
.tbdd-app.tbdd-server-tablet .tbdd-vip-form-wrap .tbac-vip-access button:hover,
.tbdd-app.tbdd-server-tablet .tbdd-vip-form-wrap .tbac-vip-access button:focus,
.tbdd-app.tbdd-server-tablet .tbdd-vip-form-wrap .tbac-vip-access button:focus-visible,
.tbdd-app.tbdd-server-tablet .tbdd-vip-form-wrap .tbac-vip-access button:active,
.tbdd-app.tbdd-server-tablet .tbdd-vip-form-wrap .tbac-vip-access input[type="submit"]:hover,
.tbdd-app.tbdd-server-tablet .tbdd-vip-form-wrap .tbac-vip-access input[type="submit"]:focus,
.tbdd-app.tbdd-server-tablet .tbdd-vip-form-wrap .tbac-vip-access input[type="submit"]:focus-visible,
.tbdd-app.tbdd-server-tablet .tbdd-vip-form-wrap .tbac-vip-access input[type="submit"]:active {
    background: #2f6854 !important;
    background-color: #2f6854 !important;
    background-image: none !important;
    color: #fff !important;
}



/* ========================================================================
 * v0.7.3 TABLET PORTRAIT DRAWING STUDIO FORMATTING POLISH
 *
 * The iPad modal-opening issue is solved in v0.7.2. The remaining problem is
 * the portrait tablet studio layout: the Colors & Options tray is too cramped,
 * Quick Colors overlaps the native color input, and the canvas does not get
 * enough dedicated space. This block keeps the engines unchanged and only
 * improves the tablet-portrait workspace geometry.
 * ===================================================================== */
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-studio-layout {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    padding: 10px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-tools {
    padding: 10px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-tools .tbdd-tool-grid {
    gap: 6px !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-app .tbdd-studio .tbdd-tool {
    min-height: 62px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-canvas-stage {
    min-height: 620px !important;
    padding: 46px 10px 16px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-canvas-label {
    font-size: 16px !important;
    padding: 7px 18px !important;
    top: 8px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-canvas-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-options {
    align-items: start !important;
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-options > .tbdd-panel-title {
    grid-column: 1 / -1 !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-options > .tbdd-tool-group {
    height: 100% !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: auto !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-options > .tbdd-tool-group:nth-child(2),
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-options > .tbdd-tool-group:nth-child(5) {
    grid-column: 1 / -1 !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-color-row {
    align-items: stretch !important;
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: minmax(0, 1fr) 64px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-color-editor-launch {
    justify-content: flex-start !important;
    padding: 8px 10px !important;
    text-align: left !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-color-row input[type="color"] {
    height: 56px !important;
    width: 64px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-palette {
    gap: 6px !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-swatch {
    height: 26px !important;
    justify-self: center !important;
    width: 26px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-color-actions {
    gap: 8px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-color-actions .tbdd-small-button {
    font-size: 12px !important;
    min-height: 42px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-size-preview {
    height: 100px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-size-adjuster {
    gap: 10px !important;
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-size-step {
    height: 40px !important;
    width: 40px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-shape-grid {
    gap: 8px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-app .tbdd-studio .tbdd-shape-button,
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-app .tbdd-studio .tbdd-shape-mode-button {
    min-height: 56px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-zoom-controls {
    display: grid !important;
    gap: 8px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-zoom-controls .tbdd-small-button {
    min-height: 44px !important;
    width: 100% !important;
}


/* ========================================================================
 * v0.7.4 TABLET PORTRAIT STUDIO TOPBAR REFINEMENT
 *
 * The Studio is now opening correctly and the options tray has been widened.
 * The remaining portrait-tablet issue is the Studio topbar, which was still
 * wrapping awkwardly. These rules convert that control band into a deliberate
 * two-row tablet layout and recover space by hiding the decorative logo.
 * ===================================================================== */
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-studio-topbar {
    align-items: center !important;
    display: grid !important;
    gap: 8px 10px !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    grid-template-areas:
        "back title undo redo"
        "status status help finish" !important;
    padding: 10px 12px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-studio-logo {
    display: none !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-studio-topbar > [data-action="home"] {
    grid-area: back !important;
    justify-self: start !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-title-field {
    align-items: start !important;
    display: grid !important;
    gap: 4px !important;
    grid-area: title !important;
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-title-field span {
    font-size: 12px !important;
    line-height: 1.15 !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-title-field input {
    min-width: 0 !important;
    width: 100% !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-history-buttons {
    display: flex !important;
    gap: 6px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-history-buttons button:first-child {
    grid-area: undo !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-history-buttons button:last-child {
    grid-area: redo !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-history-buttons,
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-studio-topbar > .tbdd-history-buttons {
    grid-column: 3 / 5 !important;
    grid-row: 1 !important;
    justify-self: end !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-studio-topbar > .tbdd-history-buttons button {
    min-width: 78px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-save-status {
    grid-area: status !important;
    min-width: 0 !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-studio-topbar > [data-action="help"] {
    grid-area: help !important;
    justify-self: start !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-finish-top {
    grid-area: finish !important;
    justify-self: end !important;
    margin-left: 0 !important;
}


/* ========================================================================
 * v0.7.5 CONSOLIDATED TABLET VISUAL-QA PASS
 * Portrait: 768x1024 and 820x1180
 * Landscape: 1024x768 and 1180x820
 * ===================================================================== */

/* Hidden controls must remain hidden even when older responsive rules assign
   display values to generic tool groups. This fixes Shape Options appearing
   while Brush (or another non-shape tool) is selected. */
.tbdd-tool-options[hidden] {
    display: none !important;
}

/* The v0.7.2 anchoring script gives tablet modals an exact visual-viewport
   height. Size cards against that container rather than browser vh so older
   Safari chrome cannot crop the bottom edge. */
body.tbdd-responsive-tablet .tbdd-modal {
    padding: 10px !important;
}
body.tbdd-responsive-tablet .tbdd-modal-card {
    max-height: calc(100% - 20px) !important;
}

/* Older iPad Safari on the test device displays the fullscreen-style glyph as
   a missing-character box. The control remains fully labeled and functional. */
body.tbdd-responsive-tablet .tbdd-studio-focus-icon {
    display: none !important;
}
body.tbdd-responsive-tablet .tbdd-studio-focus-toggle {
    gap: 0 !important;
}

/* Guest save-state copy should read as an intentional status line rather than
   a centered fragment when it wraps beside the Sign In button. */
body.tbdd-responsive-tablet .tbdd-adventure-save-state {
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}
body.tbdd-responsive-tablet .tbdd-adventure-save-state > strong {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
}
body.tbdd-responsive-tablet .tbdd-adventure-save-state > a {
    flex: 0 0 auto !important;
}

/* Portrait Studio control deck. v0.7.4 established the two-row layout; keep it
   explicit here so later tablet rules cannot reintroduce flex wrapping. */
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-studio-topbar {
    align-items: center !important;
    display: grid !important;
    gap: 8px 10px !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    grid-template-areas:
        "back title history history"
        "status status help finish" !important;
    padding: 10px 12px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-studio-logo {
    display: none !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-studio-topbar > [data-action="home"] { grid-area: back !important; }
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-title-field {
    align-items: start !important;
    display: grid !important;
    gap: 4px !important;
    grid-area: title !important;
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-title-field span { font-size: 12px !important; line-height: 1.15 !important; }
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-title-field input { min-width: 0 !important; width: 100% !important; }
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-history-buttons {
    grid-area: history !important;
    justify-self: end !important;
    gap: 6px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-history-buttons button { min-width: 76px !important; }
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-save-status { grid-area: status !important; min-width: 0 !important; }
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-studio-topbar > [data-action="help"] { grid-area: help !important; }
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-finish-top { grid-area: finish !important; margin-left: 0 !important; }

/* Portrait options deck: no dead half-column when Shape Options is hidden. */
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-options {
    align-items: start !important;
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-options > .tbdd-panel-title {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-options > .tbdd-tool-group {
    height: auto !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: auto !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-options > .tbdd-tool-group:nth-child(2) {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-options > .tbdd-tool-group:nth-child(3) {
    grid-column: 1 !important;
    grid-row: 3 !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-options > .tbdd-tool-group:nth-child(5) {
    grid-column: 2 !important;
    grid-row: 3 !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-options > .tbdd-tool-group:nth-child(4) {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-zoom-controls {
    align-content: start !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-zoom-controls .tbdd-tool-label { grid-column: 1 / -1 !important; }
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-zoom-controls .tbdd-small-button { min-height: 44px !important; width: 100% !important; }

/* Keep Edit Colors useful above the fold in portrait rather than forcing the
   entire editor into a very tall single column. */
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-color-editor-layout {
    gap: 16px !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr) !important;
}

/* Tablet landscape: 1024px was the only QA width where Finish dropped onto a
   second line. Use a compact single-row control deck and hide the decorative
   logo so all real controls stay together. */
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-studio-topbar {
    align-items: center !important;
    display: grid !important;
    gap: 6px !important;
    grid-template-columns: auto minmax(220px, 1fr) auto minmax(88px, auto) auto auto !important;
    grid-template-areas: "back title history status help finish" !important;
    padding: 8px 10px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-studio-logo { display: none !important; }
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-studio-topbar > [data-action="home"] { grid-area: back !important; }
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-title-field { grid-area: title !important; min-width: 0 !important; }
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-title-field input { min-width: 0 !important; width: 100% !important; }
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-history-buttons { grid-area: history !important; gap: 5px !important; }
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-history-buttons button { min-width: 58px !important; padding-inline: 8px !important; }
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-save-status { grid-area: status !important; min-width: 88px !important; white-space: nowrap !important; }
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-studio-topbar > [data-action="help"] { grid-area: help !important; }
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-finish-top { grid-area: finish !important; margin-left: 0 !important; }

/* Short landscape screens should not produce side rails hundreds of pixels
   taller than the working canvas. Let each rail scroll independently. */
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-tools,
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-options {
    max-height: 560px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Four cards use landscape width more efficiently and reduce unnecessary modal
   scrolling without making the touch targets too small. */
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-sheet-gallery {
    gap: 12px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}


/* ========================================================================
 * v0.7.6 SAFE NAVIGATION DEFAULT
 *
 * Pointer is the default Studio tool on every device. Unlike drawing tools,
 * Pointer does not suppress native touch gestures, so a drag that begins on
 * the artwork can scroll/navigate instead of leaving an accidental stroke.
 * ===================================================================== */
.tbdd-app .tbdd-studio .tbdd-pointer-tool .tbdd-pointer-icon {
    color: #8d4728 !important;
    display: inline-flex !important;
    height: 23px !important;
    min-width: 26px !important;
    width: 26px !important;
}
.tbdd-app .tbdd-studio .tbdd-pointer-tool .tbdd-pointer-icon svg {
    display: block !important;
    height: 22px !important;
    width: 22px !important;
}
.tbdd-paint-canvas.is-pointer-navigation {
    cursor: grab !important;
    touch-action: auto !important;
}
.tbdd-paint-canvas.is-pointer-navigation:active {
    cursor: grabbing !important;
}


/* ========================================================================
 * v0.7.7 ARTBOARD CONTROL POLISH + CONSISTENT BRUSH-TIP PREVIEW
 * ===================================================================== */
.tbdd-canvas-controls {
    align-items: center !important;
    display: flex !important;
    gap: 6px !important;
    position: absolute !important;
    right: 12px !important;
    top: 10px !important;
    z-index: 8 !important;
}
.tbdd-canvas-controls .tbdd-canvas-history {
    align-items: center !important;
    display: flex !important;
    gap: 5px !important;
    grid-area: auto !important;
    justify-self: auto !important;
}
.tbdd-canvas-controls .tbdd-history-icon-button {
    align-items: center !important;
    display: inline-flex !important;
    height: 42px !important;
    justify-content: center !important;
    min-height: 42px !important;
    min-width: 42px !important;
    padding: 7px !important;
    width: 42px !important;
}
.tbdd-canvas-controls .tbdd-history-icon-button svg {
    display: block !important;
    height: 23px !important;
    width: 23px !important;
}
.tbdd-canvas-controls .tbdd-studio-focus-toggle {
    position: static !important;
    right: auto !important;
    top: auto !important;
    z-index: auto !important;
}

/* History controls now live beside Enlarge Studio, so the top control deck no
   longer reserves empty columns for Undo / Redo. */
body.tbdd-responsive-tablet.tbdd-orientation-portrait .tbdd-studio-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    grid-template-areas:
        "back title help finish"
        "status status status status" !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-studio-topbar {
    grid-template-columns: auto minmax(220px, 1fr) minmax(88px, auto) auto auto !important;
    grid-template-areas: "back title status help finish" !important;
}

/* Phone focus mode also no longer needs a history row in the header. */
body.tbdd-studio-focus-active.tbdd-responsive-phone.tbdd-orientation-portrait .tbdd-studio.is-focus-mode .tbdd-studio-topbar {
    grid-template-areas:
        "logo back help finish"
        "title title title title"
        "save save save save" !important;
}

/* On narrow phones, keep the shorter My Artboard plaque clear of the three
   artboard controls by docking the plaque to the left. */
body.tbdd-responsive-phone .tbdd-canvas-controls {
    gap: 4px !important;
    right: 8px !important;
    top: 8px !important;
}
body.tbdd-responsive-phone .tbdd-canvas-controls .tbdd-history-icon-button {
    height: 38px !important;
    min-height: 38px !important;
    min-width: 38px !important;
    padding: 6px !important;
    width: 38px !important;
}
body.tbdd-responsive-phone .tbdd-canvas-controls .tbdd-history-icon-button svg {
    height: 21px !important;
    width: 21px !important;
}
body.tbdd-responsive-phone .tbdd-canvas-controls .tbdd-studio-focus-toggle {
    min-width: 40px !important;
    padding: 7px 9px !important;
}
body.tbdd-responsive-phone .tbdd-canvas-controls .tbdd-studio-focus-toggle [data-role="studio-focus-label"] {
    display: none !important;
}
body.tbdd-responsive-phone .tbdd-canvas-label {
    left: 10px !important;
    max-width: 126px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    transform: none !important;
    white-space: nowrap !important;
}

/* The Actual Brush Tip panel always shows the configured tip visually. It is
   never replaced by mode words such as FILL or NAVIGATE. */
.tbdd-size-preview.is-fill-tool::after {
    content: none !important;
    display: none !important;
}
.tbdd-size-preview.is-fill-tool .tbdd-size-dot {
    display: block !important;
}

/* v0.7.7 final cross-device artboard-control geometry corrections. */
.tbdd-canvas-controls .tbdd-canvas-history {
    order: 0 !important;
}
.tbdd-canvas-controls .tbdd-studio-focus-toggle {
    order: 1 !important;
}
body.tbdd-responsive-tablet .tbdd-canvas-controls .tbdd-history-icon-button {
    height: 42px !important;
    min-height: 42px !important;
    min-width: 42px !important;
    padding: 7px !important;
    width: 42px !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-canvas-label {
    left: 12px !important;
    transform: none !important;
    white-space: nowrap !important;
}
body.tbdd-responsive-tablet .tbdd-canvas-controls .tbdd-history-buttons .tbdd-history-icon-button {
    height: 42px !important;
    min-height: 42px !important;
    min-width: 42px !important;
    padding: 7px !important;
    width: 42px !important;
}

/* ========================================================================
 * v0.7.8 PREMIUM ON-ARTBOARD TOOL-TIP FOOTPRINT
 * Shows the true rendered drawing footprint at the pointer, scaled to the
 * displayed artboard. Presentation-only: never paints into either canvas.
 * ===================================================================== */
.tbdd-paint-canvas.is-tip-preview-tool {
    cursor: none !important;
}

.tbdd-tip-preview {
    --tbdd-tip-color: #111111;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(18, 18, 18, .9);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .96),
        0 1px 4px rgba(0, 0, 0, .28);
    box-sizing: border-box;
    display: none;
    left: 0;
    min-height: 1px;
    min-width: 1px;
    pointer-events: none;
    position: absolute;
    top: 0;
    transform: translate(-50%, -50%);
    z-index: 6;
}

.tbdd-tip-preview.is-visible {
    display: block;
}

.tbdd-tip-preview::after {
    background: var(--tbdd-tip-color);
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .65);
    content: "";
    height: 4px;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
}

.tbdd-tip-preview.is-tiny::after {
    display: none;
}

.tbdd-tip-preview.is-marker {
    background: rgba(255, 255, 255, .16);
    border-style: dashed;
}

.tbdd-tip-preview.is-eraser {
    background: rgba(255, 255, 255, .45);
    border: 1px dashed rgba(30, 30, 30, .92);
}

.tbdd-tip-preview.is-eraser::after {
    background: #ffffff;
}

.tbdd-tip-preview.is-rainbow::after {
    background: conic-gradient(#e53935, #fdd835, #43a047, #1e88e5, #8e24aa, #e53935);
}

.tbdd-tip-preview.is-sparkle::after {
    border-radius: 1px;
    transform: translate(-50%, -50%) rotate(45deg);
}

@media (forced-colors: active) {
    .tbdd-tip-preview {
        background: transparent;
        border: 2px solid CanvasText;
        box-shadow: none;
    }
    .tbdd-tip-preview::after {
        background: CanvasText;
        border: 0;
        box-shadow: none;
    }
}


/* ========================================================================
 * v0.7.9 SHAPE CONTROL POLISH + POINTER CURSOR + AIRBRUSH
 * ===================================================================== */
.tbdd-paint-canvas.is-pointer-navigation,
.tbdd-paint-canvas.is-pointer-navigation:active {
    cursor: default !important;
}

.tbdd-app .tbdd-studio .tbdd-shape-grid {
    gap: 6px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.tbdd-app .tbdd-studio .tbdd-shape-button {
    align-items: center !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    font-size: 10px !important;
    gap: 2px !important;
    justify-content: center !important;
    line-height: 1.05 !important;
    min-height: 48px !important;
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 4px 2px !important;
    text-align: center !important;
    white-space: normal !important;
}

.tbdd-app .tbdd-studio .tbdd-shape-button > span:last-child {
    display: block !important;
    max-width: 100% !important;
    overflow-wrap: normal !important;
    text-align: center !important;
    word-break: normal !important;
}

.tbdd-app .tbdd-studio .tbdd-shape-choice-icon {
    flex: 0 0 auto !important;
    font-size: 20px !important;
    line-height: 1 !important;
    min-width: 0 !important;
    width: auto !important;
}

.tbdd-app .tbdd-studio .tbdd-shape-mode {
    gap: 6px !important;
}

.tbdd-app .tbdd-studio .tbdd-shape-mode-button {
    box-sizing: border-box !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    min-width: 0 !important;
    padding: 6px 3px !important;
    white-space: normal !important;
}

.tbdd-airbrush-symbol {
    color: #8d4728;
    display: inline-flex;
    font-size: 21px;
    font-weight: 900;
    justify-content: center;
    line-height: 1;
    min-width: 26px;
}

.tbdd-tip-preview.is-airbrush {
    background: radial-gradient(circle, var(--tbdd-tip-color) 0 8%, transparent 70%);
    border-style: dotted;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .94),
        inset 0 0 10px rgba(0, 0, 0, .08);
}

.tbdd-tip-preview.is-airbrush::after {
    background: var(--tbdd-tip-color);
    height: 3px;
    opacity: .7;
    width: 3px;
}

/* ========================================================================
 * v0.8.0 HYBRID COLORING-SHEET ENTITLEMENT PRESENTATION
 * Locked Coin/member sheets need enough room for meaningful CTA copy on
 * phones without sacrificing the compact two-up layout of ordinary sheets.
 * ===================================================================== */
.tbdd-sheet-unlock {
    box-sizing: border-box;
    max-width: calc(100% - 16px);
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

@media (max-width: 720px) {
    .tbdd-sheet-gallery {
        grid-template-columns: 1fr !important;
    }

    .tbdd-sheet-card.is-locked,
    .tbdd-sheet-card.is-locked .tbdd-sheet-unlock {
        min-width: 0 !important;
    }
}

@media (max-width: 430px) {
    /* Keep ordinary free/included sheets compact, but give a locked sheet a
       full row so its membership/Coin choice reads like a premium store card. */
    .tbdd-home-sheet-card.is-locked {
        grid-column: 1 / -1 !important;
    }

    .tbdd-home-sheet-card.is-locked .tbdd-sheet-unlock,
    .tbdd-sheet-card.is-locked .tbdd-sheet-unlock {
        font-size: 11px;
        line-height: 1.25;
        min-height: 40px;
        padding: 8px;
    }
}


/* ========================================================================
 * v0.8.2 TABLET STUDIO RELIABILITY / SPACING PASS
 * Real iPad/tablet fixes validated with the tablet-legacy drawing engine.
 * ===================================================================== */

/* Keep the current-color dot visually separated from the Edit Colors label,
   even when a theme resets flex gap on buttons. */
.tbdd-app .tbdd-color-editor-launch {
    gap: 0 !important;
}
.tbdd-app .tbdd-color-editor-launch .tbdd-current-color {
    margin-right: 10px !important;
}

/* Tablet controls must never inherit a dark/blue theme hover behind dark text. */
body.tbdd-responsive-tablet .tbdd-app .tbdd-studio :is(
    .tbdd-tool,
    .tbdd-small-button,
    .tbdd-color-editor-launch,
    .tbdd-shape-button,
    .tbdd-shape-mode-button,
    .tbdd-size-step
):not(:disabled):hover,
body.tbdd-responsive-tablet .tbdd-app .tbdd-studio :is(
    .tbdd-tool,
    .tbdd-small-button,
    .tbdd-color-editor-launch,
    .tbdd-shape-button,
    .tbdd-shape-mode-button,
    .tbdd-size-step
):not(:disabled):focus-visible {
    background: #f1eadc !important;
    background-color: #f1eadc !important;
    background-image: none !important;
    border-color: #7d6a4c !important;
    color: #23382f !important;
    -webkit-text-fill-color: #23382f !important;
}
body.tbdd-responsive-tablet .tbdd-app .tbdd-studio :is(
    .tbdd-tool,
    .tbdd-small-button,
    .tbdd-color-editor-launch,
    .tbdd-shape-button,
    .tbdd-shape-mode-button,
    .tbdd-size-step
):not(:disabled):hover *,
body.tbdd-responsive-tablet .tbdd-app .tbdd-studio :is(
    .tbdd-tool,
    .tbdd-small-button,
    .tbdd-color-editor-launch,
    .tbdd-shape-button,
    .tbdd-shape-mode-button,
    .tbdd-size-step
):not(:disabled):focus-visible * {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}
body.tbdd-responsive-tablet .tbdd-app .tbdd-studio .tbdd-tool.is-active,
body.tbdd-responsive-tablet .tbdd-app .tbdd-studio .tbdd-tool.is-active:hover,
body.tbdd-responsive-tablet .tbdd-app .tbdd-studio .tbdd-tool.is-active:focus-visible,
body.tbdd-responsive-tablet .tbdd-app .tbdd-studio .tbdd-shape-button.is-active,
body.tbdd-responsive-tablet .tbdd-app .tbdd-studio .tbdd-shape-button.is-active:hover,
body.tbdd-responsive-tablet .tbdd-app .tbdd-studio .tbdd-shape-mode-button.is-active,
body.tbdd-responsive-tablet .tbdd-app .tbdd-studio .tbdd-shape-mode-button.is-active:hover {
    background: #e3eee5 !important;
    background-color: #e3eee5 !important;
    color: #214936 !important;
    -webkit-text-fill-color: #214936 !important;
}

/* In tablet landscape, the two utility rails should use the full artboard row
   rather than stopping at the legacy 560px cap. presentation.js sets an exact
   measured rail height from the live canvas stage. */
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-studio-layout {
    align-items: stretch !important;
}
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-tools,
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-options {
    align-self: stretch !important;
    box-sizing: border-box !important;
    height: var(--tbdd-tablet-studio-rail-height, auto) !important;
    max-height: var(--tbdd-tablet-studio-rail-height, none) !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
}

/* ========================================================================
 * v0.8.3 TABLET FINAL ALIGNMENT / CONTRAST FIX
 * Rails terminate at the actual displayed artboard bottom. Tablet hover
 * colors are hardened at the generic button level so theme CSS cannot turn
 * readable controls into dark-blue-on-dark combinations.
 * ===================================================================== */
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-studio-layout {
    align-items:start!important;
}
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-tools,
body.tbdd-responsive-tablet.tbdd-orientation-landscape .tbdd-options {
    align-self:start!important;
    height:var(--tbdd-tablet-studio-rail-height,auto)!important;
    max-height:var(--tbdd-tablet-studio-rail-height,none)!important;
    overflow-y:auto!important;
}

/* Strong tablet hover contract. Excludes color swatches because their color is
   the control itself. */
body.tbdd-responsive-tablet .tbdd-app .tbdd-studio button:not(.tbdd-swatch):not(:disabled):hover,
body.tbdd-responsive-tablet .tbdd-app .tbdd-studio button:not(.tbdd-swatch):not(:disabled):focus-visible,
.tbdd-app.tbdd-server-tablet .tbdd-studio button:not(.tbdd-swatch):not(:disabled):hover,
.tbdd-app.tbdd-server-tablet .tbdd-studio button:not(.tbdd-swatch):not(:disabled):focus-visible {
    background:#f1eadc!important;
    background-color:#f1eadc!important;
    background-image:none!important;
    border-color:#7d6a4c!important;
    color:#23382f!important;
    -webkit-text-fill-color:#23382f!important;
    text-shadow:none!important;
}
body.tbdd-responsive-tablet .tbdd-app .tbdd-studio button:not(.tbdd-swatch):not(:disabled):hover *,
body.tbdd-responsive-tablet .tbdd-app .tbdd-studio button:not(.tbdd-swatch):not(:disabled):focus-visible *,
.tbdd-app.tbdd-server-tablet .tbdd-studio button:not(.tbdd-swatch):not(:disabled):hover *,
.tbdd-app.tbdd-server-tablet .tbdd-studio button:not(.tbdd-swatch):not(:disabled):focus-visible * {
    color:inherit!important;
    -webkit-text-fill-color:inherit!important;
}
body.tbdd-responsive-tablet .tbdd-app .tbdd-studio button.is-active,
body.tbdd-responsive-tablet .tbdd-app .tbdd-studio button.is-active:hover,
body.tbdd-responsive-tablet .tbdd-app .tbdd-studio button.is-active:focus-visible,
.tbdd-app.tbdd-server-tablet .tbdd-studio button.is-active,
.tbdd-app.tbdd-server-tablet .tbdd-studio button.is-active:hover,
.tbdd-app.tbdd-server-tablet .tbdd-studio button.is-active:focus-visible {
    background:#e3eee5!important;
    background-color:#e3eee5!important;
    background-image:none!important;
    color:#214936!important;
    -webkit-text-fill-color:#214936!important;
}

/* Explicit spacing between the current-color dot and Edit Colors text. */
body.tbdd-responsive-tablet .tbdd-color-editor-launch,
.tbdd-app.tbdd-server-tablet .tbdd-color-editor-launch {
    column-gap:10px!important;
    gap:10px!important;
}
body.tbdd-responsive-tablet .tbdd-color-editor-launch .tbdd-current-color,
.tbdd-app.tbdd-server-tablet .tbdd-color-editor-launch .tbdd-current-color {
    margin-right:0!important;
}

/* Pointer means selection/navigation, not a grab-hand. */
.tbdd-paint-canvas.is-pointer-navigation,
.tbdd-app.tbdd-server-tablet .tbdd-paint-canvas.is-pointer-navigation {
    cursor:default!important;
}


/* ========================================================================
 * v0.8.4 TABLET CACHE-BUST / QUICK-COLOR SPACING LOCK
 * Layout values from v0.8.3 are intentionally unchanged.
 * ===================================================================== */
body.tbdd-server-tablet .tbdd-app .tbdd-color-editor-launch,
body.tbdd-responsive-tablet .tbdd-app .tbdd-color-editor-launch,
.tbdd-app.tbdd-server-tablet .tbdd-color-editor-launch {
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    column-gap:10px!important;
}
body.tbdd-server-tablet .tbdd-app .tbdd-color-editor-launch .tbdd-current-color,
body.tbdd-responsive-tablet .tbdd-app .tbdd-color-editor-launch .tbdd-current-color,
.tbdd-app.tbdd-server-tablet .tbdd-color-editor-launch .tbdd-current-color {
    flex:0 0 auto!important;
    margin:0!important;
    margin-right:0!important;
}


/* v0.8.5 final tablet hover containment. This intentionally covers controls
   outside .tbdd-studio too, including add-on modals and launch controls. */
body.tbdd-responsive-tablet .tbdd-app :is(button,a,[role="button"]):not(.tbdd-swatch):hover,
body.tbdd-responsive-tablet .tbdd-app :is(button,a,[role="button"]):not(.tbdd-swatch):focus-visible,
.tbdd-app.tbdd-server-tablet :is(button,a,[role="button"]):not(.tbdd-swatch):hover,
.tbdd-app.tbdd-server-tablet :is(button,a,[role="button"]):not(.tbdd-swatch):focus-visible {
    background:#f1eadc!important;
    background-color:#f1eadc!important;
    background-image:none!important;
    border-color:#7d6a4c!important;
    color:#23382f!important;
    -webkit-text-fill-color:#23382f!important;
    text-shadow:none!important;
}
body.tbdd-responsive-tablet .tbdd-app :is(button,a,[role="button"]):not(.tbdd-swatch):hover *,
body.tbdd-responsive-tablet .tbdd-app :is(button,a,[role="button"]):not(.tbdd-swatch):focus-visible *,
.tbdd-app.tbdd-server-tablet :is(button,a,[role="button"]):not(.tbdd-swatch):hover *,
.tbdd-app.tbdd-server-tablet :is(button,a,[role="button"]):not(.tbdd-swatch):focus-visible * {
    color:inherit!important;
    -webkit-text-fill-color:inherit!important;
    text-shadow:none!important;
}
body.tbdd-responsive-tablet .tbdd-app :is(button,a,[role="button"]).is-active:hover,
.tbdd-app.tbdd-server-tablet :is(button,a,[role="button"]).is-active:hover {
    background:#e3eee5!important;
    background-color:#e3eee5!important;
    color:#214936!important;
    -webkit-text-fill-color:#214936!important;
}


/* ========================================================================
 * v0.8.6 PORTRAIT QUICK-COLOR PHYSICAL SPACING LOCK
 * Older Safari/WebKit can ignore flex gap. Use a real margin on the color
 * dot so Edit Colors can never collapse against it in tablet portrait.
 * Landscape keeps the same harmless physical spacing.
 * ===================================================================== */
body.tbdd-server-tablet .tbdd-app .tbdd-color-editor-launch .tbdd-current-color,
body.tbdd-responsive-tablet .tbdd-app .tbdd-color-editor-launch .tbdd-current-color,
.tbdd-app.tbdd-server-tablet .tbdd-color-editor-launch .tbdd-current-color {
    margin-right:10px!important;
}