.abs-band.abs-belt {
--abs-paper: #14141a;
--abs-ink: #f4f1ec;
--abs-ink-2: #cdc1b0;
--abs-ink-dim: #cdc1b0;
--abs-rule: #3c3c48;
--abs-line: #8c8c98;
--abs-tool: clamp(3.25rem, 14vw, 5rem);
background: var(--abs-paper);
color: var(--abs-ink);
color-scheme: dark;
}
.abs-belt__title::after {
content: "";
display: block;
width: 3rem;
height: 1px;
margin-top: 1.25rem;
background: var(--abs-gold);
}
.entry-content .abs-belt__lede { margin: 1.25rem 0 0; color: var(--abs-ink-dim); }
.abs-belt__game { margin-top: 2rem; }
.abs-belt__hint,
.abs-belt__note,
.abs-belt__status {
margin: 0;
font-size: var(--abs-t-micro);
line-height: 1.5;
color: var(--abs-ink-dim);
}
.abs-belt__hint { margin-bottom: 1rem; } .abs-belt__stage {
position: relative;
width: 100%;
max-width: 68rem;
margin-inline: auto; height: clamp(26rem, calc(100svh - var(--abs-belt-header, 4.5rem) - 1.5rem), 52rem);
scroll-margin-top: calc(var(--abs-belt-header, 4.5rem) + .5rem);
overflow: hidden;
touch-action: pan-y;
}
.abs-belt__sky {
position: absolute;
inset: 0 0 67% 0;
background-image:
radial-gradient(circle at 8% 34%, var(--abs-ink-dim) 0 1px, transparent 1.6px),
radial-gradient(circle at 17% 12%, var(--abs-ink) 0 1px, transparent 1.6px),
radial-gradient(circle at 29% 58%, var(--abs-ink-dim) 0 1px, transparent 1.6px),
radial-gradient(circle at 41% 20%, var(--abs-ink-dim) 0 1px, transparent 1.6px),
radial-gradient(circle at 63% 8%, var(--abs-ink) 0 1px, transparent 1.6px),
radial-gradient(circle at 74% 46%, var(--abs-ink-dim) 0 1px, transparent 1.6px),
radial-gradient(circle at 86% 22%, var(--abs-ink) 0 1px, transparent 1.6px),
radial-gradient(circle at 93% 62%, var(--abs-ink-dim) 0 1px, transparent 1.6px);
pointer-events: none;
} .abs-belt__bench {
position: absolute;
left: 0;
right: 0;
top: 31%;
height: 40%;
border-block: 1px solid var(--abs-rule);
pointer-events: none;
} .abs-belt__belt {
position: absolute;
left: 0;
right: 0;
top: 74%;
height: 20%;
border-block: 1px solid var(--abs-line);
pointer-events: none;
}
.abs-belt__belt::before {
content: "";
position: absolute;
inset: 6px 0;
border-block: 1px dashed var(--abs-rule);
}
.abs-belt__slots {
position: absolute;
left: 0;
right: 0;
top: 84%;
transform: translateY(-50%);
display: grid;
grid-template-columns: repeat(5, 1fr);
justify-items: center;
pointer-events: none;
}
.abs-belt__slot {
position: relative;
display: block;
width: calc(var(--abs-tool) + 10px);
height: calc(var(--abs-tool) + 14px);
border: 1px dashed var(--abs-line);
border-radius: 0 0 6px 6px;
background: var(--abs-paper);
}
.abs-belt__slot::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 22%;
border-top: 1px solid var(--abs-rule);
}
.abs-belt__slot.is-full { border-style: solid; } .abs-belt__tool {
position: absolute;
z-index: 2;
width: var(--abs-tool);
height: var(--abs-tool);
margin: calc(var(--abs-tool) / -2) 0 0 calc(var(--abs-tool) / -2);
padding: 0;
border: 0;
background: transparent;
color: var(--abs-ink);
cursor: grab;
touch-action: none;
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.abs-belt__tool svg {
display: block;
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
overflow: visible;
transform: rotate(var(--rot, 0deg));
transition: transform .2s ease-out;
pointer-events: none;
}
.abs-belt__tool svg * { vector-effect: non-scaling-stroke; }
.abs-belt__tool svg .c { stroke: var(--abs-ink-dim); }
.abs-belt__tool:hover svg { transform: rotate(var(--rot, 0deg)) scale(1.06); }
.abs-belt__tool.is-stowed svg { transform: scale(.78); }
.abs-belt__tool.is-dragging {
z-index: 4;
cursor: grabbing;
transition: none;
}
.abs-belt__tool.is-dragging svg { transform: rotate(var(--rot, 0deg)) scale(1.1); }
.is-complete .abs-belt__tool { cursor: default; } .abs-belt__stage.is-cinched .abs-belt__belt { animation: abs-belt-cinch .6s ease-in-out; }
@keyframes abs-belt-cinch {
0%, 100% { transform: scaleY(1); }
45% { transform: scaleY(.78); }
}
.abs-belt__beam {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
color: var(--abs-ink);
pointer-events: none;
clip-path: inset(100% 0 0 0);
transition: clip-path 1.7s cubic-bezier(.3, .1, .2, 1);
}
.abs-belt__cone { fill: currentColor; fill-opacity: .08; }
.abs-belt__edge { stroke: currentColor; stroke-opacity: .4; stroke-width: 1; vector-effect: non-scaling-stroke; }
.abs-belt__stage.is-lit .abs-belt__beam { clip-path: inset(0 0 0 0); }
.abs-belt__mark {
position: absolute; left: 50%;
top: 4%;
height: 24%;
width: clamp(6rem, 40%, 15rem);
display: flex;
align-items: center;
justify-content: center;
transform: translateX(-50%);
opacity: 0;
transition: opacity .9s ease-out 1.1s;
pointer-events: none;
}
.abs-belt__mark .abs-logo__mark {
height: 100%;
width: auto;
max-width: 100%;
--abs-gold: var(--abs-ink-dim);
}
.abs-belt__stage.is-lit .abs-belt__mark { opacity: 1; } .abs-belt__controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
max-width: 68rem;
margin: .5rem auto 0;
}
.abs-belt__reset {
min-height: 2.75rem;
padding: 0 .25rem;
border: 0;
background: none;
color: var(--abs-ink);
font: inherit;
font-size: var(--abs-t-micro);
text-decoration: underline;
text-underline-offset: .2em;
cursor: pointer;
} .abs-belt-reward { display: none; }
.abs-belt-reward.is-open { display: block; }
@media (prefers-reduced-motion: reduce) {
.abs-belt__tool,
.abs-belt__tool svg { transition: none; }
.abs-belt__beam { display: none; }
.abs-belt__mark { transition: none; }
.abs-belt__stage.is-cinched .abs-belt__belt { animation: none; }
}