:root {
    --mural-paper: #fff;
    --mural-ink: #171717;
    --mural-muted: #6d6d6d;
    --mural-hairline: #e6e6e6;
    --mural-accent-red: #e33b2e;
    --mural-accent-yellow: #f2cf38;
    --mural-accent-blue: #2457cf;
    --mural-toolbar-offset: calc(0.75rem + env(safe-area-inset-bottom));
}

* {
    box-sizing: border-box;
}

html {
    background: var(--mural-paper);
    color: var(--mural-ink);
    font-family: "Helvetica Neue", "Nimbus Sans L", sans-serif;
}

body {
    min-block-size: 100dvh;
    margin: 0;
    overflow-x: hidden;
    background: var(--mural-paper);
}

button,
input,
output {
    font: inherit;
}

button {
    color: inherit;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--mural-accent-blue);
    outline-offset: 3px;
}

.mural-skip-link,
.mural-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.mural-skip-link:focus {
    z-index: 100;
    inset: 0.75rem auto auto 0.75rem;
    inline-size: auto;
    block-size: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    padding: 0.75rem 1rem;
    background: var(--mural-paper);
    border: 1px solid var(--mural-ink);
    color: var(--mural-ink);
}

.mural-topbar {
    position: relative;
    z-index: 12;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    min-block-size: 3.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mural-hairline);
    background: var(--mural-paper);
}

.mural-wordmark {
    color: var(--mural-ink);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-decoration: none;
    white-space: nowrap;
}

.mural-topbar__title {
    display: flex;
    grid-column: 1 / -1;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    min-inline-size: 0;
}

.mural-topbar__title p,
.mural-topbar__title output {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.mural-topbar__title p {
    font-weight: 700;
}

.mural-topbar__title output {
    color: var(--mural-muted);
    font-variant-numeric: tabular-nums;
}

.mural-view-toggle {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--mural-hairline);
    border-radius: 0.45rem;
    overflow: hidden;
}

.mural-view-toggle button,
.mural-toolbar button,
.mural-transform-controls button,
.mural-confirm {
    min-block-size: 44px;
    padding: 0.55rem 0.8rem;
    border: 0;
    background: var(--mural-paper);
    color: var(--mural-ink);
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.mural-view-toggle button + button,
.mural-toolbar button + button,
.mural-transform-controls button + button {
    border-inline-start: 1px solid var(--mural-hairline);
}

.mural-view-toggle button[aria-pressed="true"] {
    background: var(--mural-ink);
    color: var(--mural-paper);
}

.mural-view-toggle button:hover,
.mural-toolbar button:hover:not(:disabled),
.mural-transform-controls button:hover:not(:disabled),
.mural-confirm:hover:not(:disabled) {
    background: #f7f7f7;
}

.mural-toolbar button:disabled,
.mural-transform-controls button:disabled,
.mural-confirm:disabled {
    color: #a1a1a1;
    cursor: not-allowed;
}

#mural-main {
    position: relative;
    min-block-size: calc(100dvh - 7.65rem);
}

.mural-status {
    position: absolute;
    z-index: 3;
    inset: 0.75rem auto auto 1rem;
    max-inline-size: min(34rem, calc(100% - 2rem));
    margin: 0;
    color: var(--mural-muted);
    font-size: 0.75rem;
}

.mural-wall-view {
    position: relative;
    min-block-size: calc(100dvh - 7.65rem);
}

.mural-viewport {
    position: relative;
    inline-size: 100%;
    min-block-size: calc(100dvh - 7.65rem);
    overflow: hidden;
    background: var(--mural-paper);
    cursor: grab;
}

.mural-viewport:active {
    cursor: grabbing;
}

.mural-world {
    position: absolute;
    inset: 0 auto auto 0;
    inline-size: 6400px;
    block-size: 3200px;
    transform-origin: 0 0;
    background: var(--mural-paper);
}

.mural-bauhaus-accents,
.mural-approved-artworks,
.mural-available-lots,
.mural-render-canvas,
.mural-transform-handles {
    position: absolute;
    inset: 0;
}

.mural-bauhaus-accents {
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.mural-accent {
    position: absolute;
    display: block;
    opacity: 0.82;
}

.mural-accent--red {
    inset: 305px auto auto 670px;
    inline-size: 84px;
    block-size: 84px;
    border-radius: 50%;
    background: var(--mural-accent-red);
}

.mural-accent--yellow {
    inset: 2550px auto auto 1700px;
    inline-size: 420px;
    block-size: 18px;
    background: var(--mural-accent-yellow);
}

.mural-accent--blue {
    inset: 540px 760px auto auto;
    inline-size: 92px;
    block-size: 92px;
    background: var(--mural-accent-blue);
}

.mural-approved-artworks {
    z-index: 2;
}

.mural-artwork {
    position: absolute;
    display: block;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.mural-artwork img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.mural-artwork:focus-visible {
    z-index: 5;
    outline-offset: -4px;
}

.mural-available-lots {
    z-index: 4;
}

.mural-available-lot {
    position: absolute;
    display: grid;
    place-items: center;
    border: 1px solid #bebebe;
    background: rgb(255 255 255 / 0.08);
    color: var(--mural-ink);
    cursor: pointer;
    font-size: 0.7rem;
}

.mural-available-lot[aria-pressed="true"] {
    border: 2px solid var(--mural-accent-blue);
    background: rgb(36 87 207 / 0.08);
}

.mural-render-canvas {
    z-index: 5;
    display: block;
    pointer-events: none;
}

.mural-transform-handles {
    z-index: 6;
    pointer-events: none;
}

.mural-transform-handles button {
    position: absolute;
    inline-size: 44px;
    block-size: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: -22px 0 0 -22px;
    border: 1px solid var(--mural-ink);
    border-radius: 50%;
    background: var(--mural-paper);
    cursor: grab;
    pointer-events: auto;
}

.mural-transform-handles button:active {
    cursor: grabbing;
}

.mural-empty {
    position: absolute;
    z-index: 3;
    inset: 50% auto auto 50%;
    margin: 0;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--mural-hairline);
    background: var(--mural-paper);
    color: var(--mural-muted);
    font-size: 0.8rem;
    transform: translate(-50%, -50%);
}

.mural-list {
    max-inline-size: 72rem;
    margin: 0 auto;
    padding: 5rem 1rem 8rem;
}

.mural-list h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.25rem, 4vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.04em;
}

.mural-list ul {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--mural-hairline);
    list-style: none;
}

.mural-list-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    min-block-size: 72px;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--mural-hairline);
}

.mural-list-item button {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    gap: inherit;
    align-items: center;
    min-block-size: 56px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: start;
}

.mural-list-item img {
    inline-size: 56px;
    block-size: 56px;
    object-fit: cover;
}

.mural-list-item strong,
.mural-list-item span,
.mural-list-item small {
    min-inline-size: 0;
}

.mural-list-item strong {
    display: block;
    font-size: 0.94rem;
}

.mural-list-item span,
.mural-list-item small {
    color: var(--mural-muted);
    font-size: 0.76rem;
}

.mural-toolbar,
.mural-transform-controls {
    position: fixed;
    z-index: 20;
    display: flex;
    align-items: stretch;
    max-inline-size: calc(100vw - 1.5rem);
    border: 1px solid var(--mural-hairline);
    border-radius: 0.5rem;
    background: var(--mural-paper);
}

.mural-toolbar {
    inset: auto 0.75rem var(--mural-toolbar-offset);
    min-block-size: 44px;
    min-height: 44px;
    gap: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.mural-toolbar button,
.mural-transform-controls button {
    flex: 0 0 auto;
}

.mural-toolbar__zoom {
    display: inline-flex;
    align-items: stretch;
    border-inline-start: 1px solid var(--mural-hairline);
}

.mural-toolbar__zoom button {
    min-inline-size: 44px;
    font-size: 1.1rem;
}

.mural-toolbar output {
    display: grid;
    place-items: center;
    min-inline-size: 3.75rem;
    color: var(--mural-muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.mural-transform-controls {
    inset: auto 0.75rem calc(var(--mural-toolbar-offset) + 3.5rem);
    overflow-x: auto;
    max-inline-size: calc(100vw - 1.5rem);
}

.mural-confirm {
    position: fixed;
    z-index: 21;
    inset: auto 0.75rem calc(var(--mural-toolbar-offset) + 7rem);
    min-inline-size: min(15rem, calc(100vw - 1.5rem));
    border: 1px solid var(--mural-ink);
    border-radius: 0.45rem;
    background: var(--mural-ink);
    color: var(--mural-paper);
}

.mural-artwork-dialog {
    inline-size: min(42rem, calc(100vw - 2rem));
    max-block-size: min(50rem, calc(100dvh - 2rem));
    padding: 0;
    border: 1px solid var(--mural-ink);
    background: var(--mural-paper);
    color: var(--mural-ink);
}

.mural-artwork-dialog::backdrop {
    background: rgb(23 23 23 / 0.28);
}

[data-mural-modal-content] {
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

[data-mural-modal-content] > button {
    justify-self: end;
    min-block-size: 44px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--mural-hairline);
    background: var(--mural-paper);
    cursor: pointer;
}

[data-mural-modal-artwork] {
    inline-size: 100%;
    max-block-size: 56dvh;
    object-fit: contain;
}

[data-mural-modal-content] section {
    display: grid;
    gap: 0.75rem;
}

[data-mural-modal-content] section > div {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

[data-mural-modal-content] section > div img {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 50%;
    object-fit: cover;
}

[data-mural-modal-content] h2,
[data-mural-modal-content] p,
[data-mural-modal-content] ul,
[data-mural-modal-content] time {
    margin: 0;
}

[data-mural-modal-content] ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0;
    list-style: none;
}

[data-mural-modal-content] li,
[data-mural-founder-badge] {
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--mural-hairline);
    color: var(--mural-muted);
    font-size: 0.7rem;
}

[data-mural-modal-content] a {
    color: var(--mural-ink);
    font-weight: 700;
}

@media (min-width: 42rem) {
    .mural-topbar {
        grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr);
        min-block-size: 4rem;
        padding-inline: clamp(1.25rem, 3vw, 3rem);
    }

    .mural-topbar__title {
        grid-column: auto;
        justify-content: center;
    }

    .mural-view-toggle {
        justify-self: end;
    }

    #mural-main,
    .mural-wall-view,
    .mural-viewport {
        min-block-size: calc(100dvh - 4rem);
    }

    .mural-toolbar {
        inset-inline: 50% auto;
        transform: translateX(-50%);
    }

    .mural-transform-controls {
        inset-inline: 50% auto;
        transform: translateX(-50%);
    }

    .mural-confirm {
        inset-inline: auto calc(1rem + env(safe-area-inset-right)) auto;
        inset-block-end: var(--mural-toolbar-offset);
        min-inline-size: auto;
    }

    .mural-list {
        padding-inline: clamp(1.5rem, 5vw, 4rem);
    }
}

@media (min-width: 64rem) {
    .mural-status {
        inset-inline-start: 2rem;
    }

    .mural-list-item {
        grid-template-columns: 72px minmax(0, 1fr) 10rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}