.project-main {
    padding: 36px 0 110px;
}

.cube-wrap {
    --cube-cell: min(42px, 10vw);
    --cube-gap: 3px;
    --cube-grid: calc(5 * var(--cube-cell) + 4 * var(--cube-gap));
    --cube-box-border: 2.4px;
    margin: 0 auto;
    aspect-ratio: auto;
    min-height: calc(var(--page-width) * 11 / 8.5);
    background: var(--paper);
    color: var(--ink);
}

.cube-header {
    margin: 0 auto 2em;
}

.cube-eyebrow {
    color: var(--paper-muted);
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    margin: 0 0 22px;
    text-align: center;
}

.cube-header h1 {
    margin: 0 0 1.4em;
    font-family: var(--serif);
    font-size: clamp(1.375rem, 3.4vw, 1.75rem);
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
}

.cube-lede {
    margin: 0;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 0.9375rem;
    line-height: 1.62;
    text-align: left;
    text-rendering: optimizeLegibility;
}

.cube-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: 10px 22px;
    margin: 0 0 22px;
}

.cube-mag,
.cube-space,
.cube-axes,
.cube-hex {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}

.cube-mag-label {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--paper-muted);
}

.cube-mag-opts {
    display: flex;
    gap: 4px;
}

.cube-mag-btn,
.cube-axis,
.cube-ctl {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    background: transparent;
    border: var(--cube-box-border) solid var(--ink);
    color: var(--ink);
    cursor: pointer;
}

.cube-mag-btn {
    min-width: 1.85em;
    padding: 5px 0;
    letter-spacing: 0;
}

.cube-space .cube-mag-btn {
    min-width: 3.1em;
    padding: 5px 8px;
}

.cube-axis {
    padding: 6px 9px;
}

.cube-mag-btn:hover,
.cube-mag-btn.is-on,
.cube-axis:hover,
.cube-axis.is-on,
.cube-ctl:hover {
    background: var(--ink);
    color: var(--paper);
}

.cube-mag-btn:focus-visible,
.cube-axis:focus-visible,
.cube-ctl:focus-visible,
.cube-cell:focus-visible,
.cube-crumb:focus-visible,
.cube-hex-input:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.cube-crumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 20px 0 0;
    flex-wrap: wrap;
}

.cube-crumb {
    width: 22px;
    height: 22px;
    border: var(--cube-box-border) solid var(--ink);
    cursor: pointer;
    padding: 0;
    background: var(--paper);
}

.cube-crumb.start {
    font-family: var(--mono);
    font-size: 0.5625rem;
    color: var(--paper-muted);
}

.cube-crumb:hover {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
}

.cube-crumb-sep {
    color: var(--paper-muted);
    font-family: var(--mono);
    font-size: 0.6875rem;
}

.cube-layout {
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: center;
    align-items: start;
    column-gap: 28px;
    width: 100%;
}

.cube-search {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.cube-slice {
    display: flex;
    align-items: stretch;
    gap: 10px;
    max-width: 100%;
}

.cube-y-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--paper-muted);
    text-align: center;
    padding: 22px 0 28px;
}

.cube-plot {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto auto;
    gap: 6px 8px;
    min-width: 0;
}

.cube-y-ticks,
.cube-x-ticks {
    display: grid;
    font-family: var(--mono);
    font-size: 0.5625rem;
    color: var(--paper-muted);
    text-align: center;
}

.cube-y-ticks {
    grid-template-rows: repeat(5, 1fr);
    align-items: center;
    justify-items: end;
}

.cube-x-ticks {
    grid-column: 2;
    grid-template-columns: repeat(5, 1fr);
}

.cube-x-title {
    grid-column: 2;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--paper-muted);
    text-align: center;
}

.cube-grid {
    display: grid;
    width: var(--cube-grid);
    height: var(--cube-grid);
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: var(--cube-gap);
}

.cube-cell {
    position: relative;
    border: var(--cube-box-border) solid var(--ink);
    padding: 0;
    cursor: pointer;
    min-width: 0;
}

.cube-cell:hover {
    transform: scale(0.96);
    z-index: 2;
}

.cube-cell.is-center,
.cube-cell.is-last {
    z-index: 3;
}

.cube-cell-mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
    pointer-events: none;
    text-shadow: 0 0 1px #000, 0 0 3px #000;
}

.cube-cell-l {
    font-size: 0.625rem;
}

.cube-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: var(--cube-grid);
    flex: 0 0 var(--cube-grid);
}

.cube-swatch {
    display: flex;
    flex-direction: row;
    width: var(--cube-grid);
    height: var(--cube-grid);
    border: var(--cube-box-border) solid var(--ink);
    padding: 0;
    overflow: hidden;
    color: #fff;
}

.cube-swatch-half {
    flex: 1 1 50%;
    min-width: 0;
    height: 100%;
}

.cube-swatch.is-empty {
    border-style: dashed;
    background: transparent;
}

.cube-preview-title {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--paper-muted);
}

.cube-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.cube-ctl {
    padding: 9px 16px;
}

.cube-defaults {
    margin: 10px 0 0;
    text-align: center;
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--paper-muted);
}

.cube-hex-input {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: var(--ink);
    background: transparent;
    border: var(--cube-box-border) solid var(--ink);
    width: 8.2em;
    padding: 6px 8px;
    text-align: center;
}

.cube-hex-input::placeholder {
    color: var(--paper-muted);
}

.cube-hex-input.is-bad {
    outline: var(--cube-box-border) solid var(--ink);
}

.cube-ctl:disabled {
    opacity: 0.4;
    cursor: default;
}

.cube-ctl:disabled:hover {
    background: transparent;
    color: var(--ink);
}

@media (hover: none) {
    .cube-cell:hover {
        transform: none;
    }

    .cube-mag-btn:hover:not(.is-on),
    .cube-axis:hover:not(.is-on),
    .cube-ctl:hover {
        background: transparent;
        color: var(--ink);
    }
}

@media (max-width: 720px) {
    .project-main {
        padding: 12px 0 64px;
    }

    .cube-wrap {
        --cube-gap: 4px;
        min-height: 0;
        margin-inline: 0;
        padding: 22px 16px 36px;
    }

    .cube-header {
        margin: 0 auto 1em;
    }

    .cube-eyebrow {
        margin: 0 0 10px;
        font-size: 0.6875rem;
    }

    .cube-header h1 {
        margin: 0 0 0.65em;
        font-size: 1.3125rem;
    }

    .cube-lede {
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .cube-toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        flex-wrap: unset;
        align-items: stretch;
        gap: 10px 8px;
        margin: 0 0 16px;
    }

    .cube-axes {
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        width: auto;
    }

    .cube-mag,
    .cube-space {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        width: auto;
    }

    .cube-mag-opts {
        width: 100%;
    }

    .cube-axes .cube-mag-opts,
    .cube-mag .cube-mag-opts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .cube-space .cube-mag-opts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .cube-mag-btn,
    .cube-axis {
        min-height: 44px;
        min-width: 0;
        width: 100%;
        padding: 10px 6px;
        font-size: 0.75rem;
    }

    .cube-space .cube-mag-btn {
        min-width: 0;
        padding: 10px 6px;
    }

    .cube-hex {
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        width: auto;
    }

    .cube-hex-input {
        min-height: 44px;
        width: 100%;
        font-size: 0.75rem;
        padding: 10px 6px;
    }

    .cube-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        row-gap: 14px;
    }

    .cube-search {
        width: 100%;
    }

    .cube-slice {
        width: 100%;
        align-items: flex-start;
        gap: 6px;
    }

    .cube-plot {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }

    .cube-grid {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .cube-y-title {
        font-size: 0.625rem;
        padding: 8px 0 20px;
    }

    .cube-y-ticks,
    .cube-x-ticks {
        font-size: 0.5rem;
    }

    .cube-cell {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .cube-preview {
        width: 100%;
        flex: none;
        align-items: stretch;
        gap: 8px;
    }

    .cube-swatch {
        width: 100%;
        height: 56px;
    }

    .cube-preview-title {
        text-align: center;
    }

    .cube-crumbs {
        margin-top: 12px;
    }

    .cube-crumb {
        width: 28px;
        height: 28px;
    }

    .cube-controls {
        width: 100%;
        gap: 8px;
        margin-top: 14px;
    }

    .cube-ctl {
        flex: 1 1 0;
        min-height: 44px;
        padding: 12px 10px;
        font-size: 0.75rem;
    }
}