.workbench-card {
    --surface-proximity: 0;
    position: relative;
    padding: 12px;
    border: 1px solid rgb(214 104 69 / calc(.14 + var(--surface-proximity) * .52));
    background: rgba(255, 255, 255, .025);
    box-shadow:
        0 0 0 1px rgb(238 139 91 / calc(.025 + var(--surface-proximity) * .16)),
        0 0 calc(7px + var(--surface-proximity) * 27px) rgb(214 104 69 / calc(.035 + var(--surface-proximity) * .38)),
        inset 0 0 calc(3px + var(--surface-proximity) * 8px) rgb(242 162 112 / calc(.015 + var(--surface-proximity) * .08));
    transition: border-color .3s ease, box-shadow .4s ease, transform .4s ease;
}
.workbench-card:hover { transform: translateY(-2px); }
.workbench-card.is-surface-clicked {
    box-shadow:
        0 0 0 1px rgba(255, 190, 145, .72),
        0 0 38px rgba(224, 105, 62, .72),
        inset 0 0 10px rgba(255, 180, 125, .13);
}

@media (prefers-reduced-motion: reduce) {
    .workbench-card { transition: none; }
}

.workbench-project-back {
    --back-proximity: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: clamp(28px, 4vw, 52px);
    padding: 9px 13px;
    border: 1px solid rgb(214 104 69 / calc(.22 + var(--back-proximity) * .48));
    color: inherit;
    font-size: 13px;
    font-weight: 650;
    box-shadow: 0 0 calc(5px + var(--back-proximity) * 18px) rgb(214 104 69 / calc(.04 + var(--back-proximity) * .3));
    transition: border-color .3s ease, box-shadow .35s ease, transform .3s ease;
}
.workbench-project-back:hover,
.workbench-project-back:focus-visible {
    --back-proximity: 1;
    transform: translateX(-3px);
}