/* Ported verbatim from the desktop design board (Main.dc.html). Generated: re-run the port instead of editing. */
a {
    color: #D9B866
}

a:hover {
    color: #EFE6D0
}

button {
    font: inherit;
    cursor: pointer
}

button:focus-visible, a:focus-visible {
    outline: 3px solid #E8A33C;
    outline-offset: 3px
}

.scale:focus-within {
    outline: 3px solid #E8A33C;
    outline-offset: 4px
}

.brass {
    transition: transform 90ms ease-out, box-shadow 90ms ease-out, filter 180ms ease
}

.brass:hover {
    filter: brightness(1.1) saturate(1.08)
}

.brass:active {
    transform: translateY(4px);
    filter: brightness(0.94)
}

.brass-face {
    background: radial-gradient(circle closest-side, transparent 0 62%, rgba(58, 42, 16, .45) 64%, rgba(255, 240, 200, .35) 67%, transparent 70%), radial-gradient(circle at 35% 28%, #F4E2A8, #C9A24E 45%, #8C6A28 80%, #6E5220);
    border: 2px solid #4A360F;
    box-shadow: inset 0 2px 1px rgba(255, 248, 220, .6), inset 0 -3px 4px rgba(58, 42, 16, .6), 0 5px 0 #6E5220, 0 6px 0 #3A2A10, 0 9px 8px rgba(0, 0, 0, .55)
}

.brass-face:active {
    box-shadow: inset 0 3px 4px rgba(58, 42, 16, .65), inset 0 -1px 1px rgba(255, 248, 220, .3), 0 1px 0 #6E5220, 0 2px 0 #3A2A10, 0 3px 3px rgba(0, 0, 0, .5)
}

.mount {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    padding: 12px;
    background: radial-gradient(circle at 50% 30%, #324C63, #1C2D3D 72%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -2px 3px rgba(0, 0, 0, .55), 0 2px 0 #0E1822, 0 6px 12px rgba(0, 0, 0, .45)
}

.collar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    padding: 5px;
    background: conic-gradient(from 210deg, #5E4718, #F4E2A8 55deg, #B8923A 110deg, #4A360F 190deg, #9A7630 280deg, #5E4718);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 0 0 3px rgba(255, 240, 200, .12), 0 2px 4px rgba(0, 0, 0, .6)
}

.screw {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: linear-gradient(35deg, transparent 40%, #2E2008 40%, #2E2008 60%, transparent 60%), radial-gradient(circle at 35% 30%, #F4E2A8, #B8923A 55%, #5E4718);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(46, 32, 8, .55)
}

.s2 {
    transform: rotate(70deg)
}

.s3 {
    transform: rotate(-50deg)
}

.s4 {
    transform: rotate(125deg)
}

.tl {
    top: calc(14.6% - 1px);
    left: calc(14.6% - 1px)
}

.tr {
    top: calc(14.6% - 1px);
    right: calc(14.6% - 1px)
}

.bl {
    bottom: calc(14.6% - 1px);
    left: calc(14.6% - 1px)
}

.br {
    bottom: calc(14.6% - 1px);
    right: calc(14.6% - 1px)
}

.ctl {
    top: 9px;
    left: 9px
}

.ctr {
    top: 9px;
    right: 9px
}

.cbl {
    bottom: 9px;
    left: 9px
}

.cbr {
    bottom: 9px;
    right: 9px
}

.tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 15px;
    background: linear-gradient(180deg, #DDBF70, #B8923A 60%, #9A7630);
    border: 1px solid #4A360F;
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(58, 42, 16, .4), 0 1px 0 #0E1822, 0 2px 4px rgba(0, 0, 0, .45);
    color: #2A1D0A;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .22em;
    text-shadow: 0 1px 0 rgba(255, 236, 190, .55);
    white-space: nowrap
}

.tag::before, .tag::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 4px;
    height: 4px;
    margin-top: -2px;
    border-radius: 50%;
    background: #5E4718;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35)
}

.tag::before {
    left: 4px
}

.tag::after {
    right: 4px
}

.bs-slot {
    position: relative;
    align-self: stretch;
    height: 40px
}

.bs-slot .bs-caption {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 240ms ease, transform 420ms cubic-bezier(.34, 1.5, .5, 1)
}

.bs-slot.bs-open .bs-caption {
    opacity: 0;
    transform: translate(-50%, -14px);
    pointer-events: none
}

.bs-drawer {
    position: absolute;
    left: 26px;
    top: 0;
    width: 600px;
    height: 40px;
    z-index: 1;
    transform-origin: 50% 0;
    transform: translateY(-110%) scaleY(.55);
    opacity: 0;
    visibility: hidden;
    transition: transform 360ms cubic-bezier(.55, 0, .25, 1), opacity 200ms ease, visibility 0s linear 360ms
}

.bs-slot.bs-open .bs-drawer {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: transform 520ms cubic-bezier(.34, 1.45, .5, 1) 90ms, opacity 240ms ease 90ms, visibility 0s linear 0s
}

.bs-link {
    position: absolute;
    top: -8px;
    height: 8px;
    width: 3px;
    background: #B8653A;
    box-shadow: 0 0 6px rgba(232, 163, 60, .7);
    opacity: 0;
    transition: opacity 200ms ease
}

.bs-slot.bs-open .bs-link {
    opacity: 1;
    transition: opacity 300ms ease 260ms
}

.nut {
    position: absolute;
    width: 20px;
    height: 20px;
    clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
    background: linear-gradient(160deg, #F4E2A8, #B8923A 45%, #6E5220)
}

.silk {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-weight: 600;
    color: #D9B866;
    letter-spacing: .18em;
    text-shadow: 0 0 1px rgba(217, 184, 102, .35)
}

.jewel {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    box-sizing: border-box;
    border-radius: 50%;
    padding: 3px;
    background: repeating-conic-gradient(#F0DDA0 0deg 9deg, #7A5D22 9deg 18deg);
    box-shadow: 0 0 0 1px #3A2A10, 0 2px 3px rgba(0, 0, 0, .7);
    transition: box-shadow 260ms ease
}

.jewel .glass {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    transition: background 260ms ease;
    background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .7) 0 9%, rgba(255, 255, 255, 0) 26%), radial-gradient(circle at 50% 62%, #6B4A22 0, #3A240E 55%, #1E1206 100%);
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .55), inset 0 1px 1px rgba(255, 255, 255, .25)
}

.jewel.on {
    box-shadow: 0 0 0 1px #3A2A10, 0 2px 3px rgba(0, 0, 0, .7), 0 0 14px 3px rgba(242, 178, 78, .55);
    animation: flicker 650ms linear 1, jewelBreathe 2.6s ease-in-out 650ms infinite
}

.jewel.on .glass {
    background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .9) 0 9%, rgba(255, 255, 255, 0) 26%), radial-gradient(circle at 50% 60%, #FFF4CC 0, #F7C063 30%, #D47A1E 70%, #7A3A0C 100%)
}

.jewel.red .glass {
    background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .6) 0 9%, rgba(255, 255, 255, 0) 26%), radial-gradient(circle at 50% 62%, #5A2418 0, #3A140C 55%, #1A0804 100%)
}

.jewel.red.on {
    box-shadow: 0 0 0 1px #3A2A10, 0 2px 3px rgba(0, 0, 0, .7), 0 0 14px 3px rgba(224, 98, 46, .7);
    animation: flicker 180ms linear 1
}

.jewel.red.on .glass {
    background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .9) 0 9%, rgba(255, 255, 255, 0) 26%), radial-gradient(circle at 50% 60%, #FFD9C4 0, #F07A45 35%, #B8361A 72%, #5A1408 100%)
}

@keyframes jewelBreathe {
    0%, 100% {
        box-shadow: 0 0 0 1px #3A2A10, 0 2px 3px rgba(0, 0, 0, .7), 0 0 8px 2px rgba(242, 178, 78, .45)
    }
    50% {
        box-shadow: 0 0 0 1px #3A2A10, 0 2px 3px rgba(0, 0, 0, .7), 0 0 18px 5px rgba(242, 178, 78, .75)
    }
}

.enamel-frame {
    position: relative;
    padding: 4px;
    background: radial-gradient(circle at 0 0, transparent 9px, #C9A24E 10px) top left, radial-gradient(circle at 100% 0, transparent 9px, #C9A24E 10px) top right, radial-gradient(circle at 0 100%, transparent 9px, #9A7630 10px) bottom left, radial-gradient(circle at 100% 100%, transparent 9px, #9A7630 10px) bottom right;
    background-size: 51% 51%;
    background-repeat: no-repeat;
    filter: drop-shadow(0 3px 0 #3A2A10) drop-shadow(0 6px 6px rgba(0, 0, 0, .45))
}

.enamel {
    position: relative;
    background: radial-gradient(circle at 0 0, transparent 8px, #172542 9px) top left, radial-gradient(circle at 100% 0, transparent 8px, #172542 9px) top right, radial-gradient(circle at 0 100%, transparent 8px, #101B33 9px) bottom left, radial-gradient(circle at 100% 100%, transparent 8px, #101B33 9px) bottom right;
    background-size: 51% 51%;
    background-repeat: no-repeat
}

.enamel-rule {
    position: absolute;
    inset: 5px 12px;
    border: 1px solid rgba(217, 184, 102, .75);
    border-radius: 2px;
    pointer-events: none
}

.vents {
    display: flex;
    gap: 9px
}

.vents span {
    width: 9px;
    height: 34px;
    border-radius: 5px;
    background: #070C12;
    box-shadow: inset 0 3px 4px #000, 0 1px 0 rgba(255, 255, 255, .09)
}

.slot {
    position: absolute;
    width: 15px;
    height: 30px;
    border-radius: 8px;
    background: #070C12;
    box-shadow: inset 0 3px 5px #000, 0 1px 0 rgba(255, 255, 255, .1)
}

.bolt {
    position: absolute;
    left: 1px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #E8E8E8, #8C8C8C 55%, #3A3A3A);
    box-shadow: 0 1px 2px #000
}

.bolt::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    top: 5px;
    height: 3px;
    background: #2A2A2A;
    border-radius: 1px;
    transform: rotate(-30deg)
}

.bakelite:active {
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, .08), inset 0 -2px 4px rgba(0, 0, 0, .6), 0 2px 0 #050505, 0 3px 4px rgba(0, 0, 0, .5) !important
}

.bakelite:hover .cap {
    filter: brightness(1.08)
}

.cap {
    transition: transform 360ms cubic-bezier(.3, 1.5, .5, 1), filter 160ms
}

.lever {
    transition: transform 160ms cubic-bezier(.6, 0, .3, 1)
}

/* mechanical: a single ease-in-out with no overshoot, so the lever stops dead at its end of travel (control points stay inside 0 to 1) */
.toggle:hover .lever {
    filter: brightness(1.12)
}

.toggle-label {
    transition: color 300ms ease
}

.station {
    transition: color 300ms ease
}

.station:hover {
    color: #8A3E18 !important
}

.logrow {
    transition: background-color 220ms ease, color 220ms ease
}

.logrow:hover {
    background-color: #221910 !important
}

.lamp {
    transition: background-color 220ms ease, box-shadow 220ms ease
}

.lamp-live {
    animation: flicker 650ms linear 1, breathe 2.6s ease-in-out 650ms infinite
}

.lamp-peak {
    animation: flicker 180ms linear 1
}

.roll-a {
    display: inline-block;
    animation: rollA 420ms cubic-bezier(.3, 1.4, .5, 1)
}

.roll-b {
    display: inline-block;
    animation: rollB 420ms cubic-bezier(.3, 1.4, .5, 1)
}

.needle-hum {
    animation: hum 3.2s ease-in-out infinite
}

@keyframes flicker {
    0% {
        opacity: .15
    }
    10% {
        opacity: 1
    }
    18% {
        opacity: .35
    }
    30% {
        opacity: 1
    }
    44% {
        opacity: .6
    }
    60%, 100% {
        opacity: 1
    }
}

@keyframes breathe {
    0%, 100% {
        box-shadow: 0 0 5px 1px rgba(242, 178, 78, .65)
    }
    50% {
        box-shadow: 0 0 14px 4px rgba(242, 178, 78, .95)
    }
}

@keyframes rollA {
    0% {
        transform: translateY(-80%);
        opacity: 0;
        filter: blur(2px)
    }
    100% {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0)
    }
}

@keyframes rollB {
    0% {
        transform: translateY(-80%);
        opacity: 0;
        filter: blur(2px)
    }
    100% {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0)
    }
}

@keyframes hum {
    0%, 100% {
        box-shadow: 0 0 8px rgba(232, 163, 60, .7)
    }
    50% {
        box-shadow: 0 0 16px rgba(242, 178, 78, 1)
    }
}

.drum-wrap {
    position: relative
}

.drum-exit {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    animation: drumSink var(--sink, 200ms) cubic-bezier(.3, 0, .5, 1) both, drumOut var(--slide, 200ms) var(--sink, 200ms) cubic-bezier(.4, 0, .6, 1) both
}

.drum-enter {
    position: relative;
    animation: drumIn var(--slide, 200ms) cubic-bezier(.4, 0, .6, 1) both, drumPush var(--sink, 200ms) var(--slide, 200ms) cubic-bezier(.2, .7, .3, 1) both
}

.drum-pending {
    position: relative;
    translate: 0 calc(var(--dist, 600px) * var(--dir, 1));
    scale: .9
}

@keyframes drumSink {
    from {
        scale: 1
    }
    to {
        scale: .93
    }
}

@keyframes drumOut {
    from {
        translate: 0 0
    }
    to {
        translate: 0 calc(var(--dist, 600px) * var(--dir, 1) * -1)
    }
}

@keyframes drumIn {
    from {
        translate: 0 calc(var(--dist, 600px) * var(--dir, 1))
    }
    to {
        translate: 0 0
    }
}

@keyframes drumPush {
    from {
        scale: .9
    }
    to {
        scale: 1
    }
}

.dock {
    position: relative;
    z-index: 6;
    flex-shrink: 0;
    height: 300px;
    transition: height 520ms cubic-bezier(.55, 0, .25, 1)
}

/* z-index 6 puts the whole dock, tabs included, above the rolling panel layers (exit layer is 2), so a panel rolling down
   out of the window passes behind the console rail and the tabs instead of over them */
.dock-console {
    transition: transform 520ms cubic-bezier(.55, 0, .25, 1), visibility 0s linear 0s
}

.dock.is-collapsed {
    height: 96px
}

.dock.is-collapsed .dock-console {
    transform: translateY(calc(100% + 24px));
    visibility: hidden;
    transition: transform 520ms cubic-bezier(.55, 0, .25, 1), visibility 0s linear 520ms
}

.dock-mini {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(calc(100% + 40px));
    visibility: hidden;
    transition: transform 420ms cubic-bezier(.55, 0, .25, 1), visibility 0s linear 420ms
}

.dock.is-collapsed .dock-mini {
    transform: translateY(0);
    visibility: visible;
    transition: transform 460ms cubic-bezier(.2, .8, .3, 1) 200ms, visibility 0s linear 200ms
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important
    }
}