:root { --color-accent: oklch(82% 0.125 85); --color-accent-2: oklch(88% 0.1 88); --color-accent-deep: oklch(52% 0.09 80); --color-focus: oklch(88% 0.1 88); --tile: oklch(21.5% 0.048 158); --slab: oklch(27% 0.05 158); --slab-edge: oklch(17% 0.04 158); --slab-edge-2: oklch(21% 0.045 158); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-short); }

.shell { grid-template-columns: 232px minmax(0, 1fr); }
.side { padding: var(--space-md) var(--space-sm); gap: var(--space-md); }
.side nav a { min-height: 34px; }
.side nav .group { margin: var(--space-sm) 0 var(--space-2xs) var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); }
.work { min-width: 0; }
.top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-xl); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
.top button { min-height: 32px; font-size: var(--text-xs); }

.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.tile { background: var(--tile); border: var(--rule-hair) solid var(--color-rule); padding: var(--space-md); margin: 0; display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; animation: rise var(--dur-long) var(--ease-out) both; transition: border-color var(--dur-short); }
section + section.tile { margin-top: 0; }
.tile:hover { border-color: var(--color-accent-deep); }
.tile > h2 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); margin: 0 0 var(--space-xs); max-width: none; }
.tile-tower { grid-column: span 2; grid-row: span 3; }
.tile-wide { grid-column: span 2; }
.big { font-family: var(--font-display); font-weight: 400; font-size: var(--text-3xl); line-height: 1.1; font-variant-numeric: tabular-nums; }
.target { display: flex; align-items: center; gap: var(--space-md); }
.target .big, .target .sub { display: block; }
.ring { position: relative; width: 96px; flex: none; }
.ring strong { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--text-md); }
.ring svg { transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; }
.ring .track { stroke: var(--color-paper-3); }
.ring .val { stroke: var(--color-accent); stroke-linecap: round; stroke-dasharray: var(--p) 100; animation: ringin 1.1s var(--ease-out) both; }
@keyframes ringin { from { stroke-dasharray: 0 100; } }
.area { position: relative; height: 200px; }
.area svg { width: 100%; height: 100%; }
.ag1 { stop-color: var(--color-accent); stop-opacity: 0.32; } .ag2 { stop-color: var(--color-accent); stop-opacity: 0; }
.area .stroke { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-dasharray: 1; animation: draw 1.4s var(--ease-out) both; }
.area .fill { animation: fadein 1.2s 0.3s var(--ease-out) both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fadein { from { opacity: 0; } }
.cross { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--color-ink-2); pointer-events: none; }
.tip { position: absolute; top: 0; left: 0; background: var(--color-ink); color: var(--color-accent-ink); font-size: var(--text-xs); padding: var(--space-3xs) var(--space-xs); pointer-events: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plain { list-style: none; margin: var(--space-xs) 0 0; padding: 0; font-size: var(--text-sm); }
.plain li { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-2xs) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.dl { margin: 0; font-size: var(--text-sm); }
.dl div { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-2xs) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.dl dt { color: var(--color-ink-2); } .dl dd { margin: 0; font-variant-numeric: tabular-nums; }
.queue a, .queue .q { grid-template-columns: minmax(0, 1fr); padding: var(--space-xs) 0; }

/* tower */
.tower-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-md); align-items: center; }
.tower-wrap { width: 100%; height: 480px; display: grid; place-items: center; perspective: 1400px; }
.tower-wrap.small { height: 400px; }
.tower { position: relative; width: 230px; height: 230px; transform: translateY(100px) rotateX(58deg) rotateZ(-42deg); transform-style: preserve-3d; }
.slab { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--space-2xs); padding: var(--space-xs); background: var(--slab); transform: translateZ(calc(var(--i) * 62px)); transform-style: preserve-3d; cursor: pointer; transition: transform 0.6s var(--ease-out), background-color var(--dur-short); animation: drop 0.8s var(--ease-out) backwards; animation-delay: calc(var(--i) * 130ms); }
.slab::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 50px; background: linear-gradient(var(--slab-edge), var(--slab-edge-2)); transform-origin: top; transform: rotateX(-90deg); }
.slab::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 50px; background: linear-gradient(90deg, var(--slab-edge-2), var(--slab-edge)); transform-origin: left; transform: rotateY(90deg); }
@keyframes drop { from { opacity: 0; transform: translateZ(calc(var(--i) * 62px + 260px)); } }
.slab i { display: block; background: var(--glow); opacity: var(--lit); box-shadow: 0 0 22px var(--glow-2); animation: lighton 0.6s var(--ease-out) both; animation-delay: var(--d); }
.slab:hover { background: var(--color-paper-3); }
.slab.sel { background: var(--color-accent-deep); }
.slab.raised { transform: translateZ(calc(var(--i) * 62px + 80px)); }
.small .slab { cursor: default; }
.still .slab, .still .slab i { animation: none; }
.floor-tabs { display: grid; gap: var(--space-2xs); }
.floor-tabs button { justify-content: space-between; border-radius: 0; min-height: 44px; flex-wrap: wrap; }
.floor-tabs button[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-paper-3); }
.floor-detail { margin-top: var(--space-sm); animation: rise var(--dur-short) var(--ease-out) both; }
.floor-detail a { display: flex; justify-content: space-between; gap: var(--space-xs); padding: var(--space-2xs) 0; font-size: var(--text-sm); border-top: var(--rule-hair) solid var(--color-rule); text-decoration: none; }
.floor-detail a:hover { color: var(--color-accent); }
.minis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-sm); margin-bottom: var(--space-xs); }
.minis strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); }
.minis span { font-size: var(--text-xs); color: var(--color-muted); }

/* gate */
.gate { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); background: radial-gradient(ellipse at 30% 55%, var(--color-paper-3), var(--color-paper-2) 65%); }
.gate-art { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.gate-sign { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--glow); text-align: center; animation: sign 1.4s steps(4) 0.8s both; }
.gate-sign small { display: block; font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-ink-2); }
.gate-form { background: var(--color-paper); border-left: var(--rule-hair) solid var(--color-rule); padding: var(--space-xl); display: flex; flex-direction: column; justify-content: center; gap: var(--space-sm); }
.gate-form > *, .gate-form > p { width: 100%; max-width: 420px; margin-inline: auto; }
.stack { display: grid; gap: var(--space-sm); }
.stack input, .stack select { width: 100%; }
.pwrow { position: relative; display: block; }
.pwrow .link { position: absolute; right: var(--space-2xs); top: var(--space-2xs); }
.err { color: var(--color-error); font-size: var(--text-sm); }
.demo { font-size: var(--text-sm); margin-top: var(--space-sm); }
.demo summary { cursor: pointer; color: var(--color-ink-2); padding-block: var(--space-xs); }
.demo td { padding: var(--space-2xs) var(--space-xs); }
.demo .link { padding: 0; }
code { font-size: var(--text-xs); color: var(--color-ink-2); }

/* modules */
.racks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); }
.rack { border: var(--rule-hair) solid var(--color-rule); padding: var(--space-sm); background: var(--tile); min-height: 120px; animation: rise var(--dur-long) var(--ease-out) both; }
.rack.short { border-color: var(--glow-2); }
.rack h2 { font-size: var(--text-md); margin-bottom: var(--space-xs); }
.rack-i { display: grid; grid-template-columns: 40px minmax(0, 1fr) 64px; gap: var(--space-xs); align-items: center; font-size: var(--text-sm); padding-block: var(--space-2xs); }
.board.three { grid-template-columns: repeat(3, minmax(190px, 1fr)); }
.hbar { display: grid; grid-template-columns: 120px minmax(0, 1fr) 90px; gap: var(--space-xs); align-items: center; font-size: var(--text-sm); padding-block: var(--space-2xs); }
.hbar i { display: block; height: 8px; background: var(--color-accent); transform-origin: left; transform: scaleX(var(--w)); animation: growx var(--dur-long) var(--ease-out) both; }
.statement { max-width: 640px; font-size: var(--text-sm); }
.statement > div { display: flex; justify-content: space-between; padding: var(--space-xs) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.statement .subt { font-weight: 700; }
.statement .grand { font-family: var(--font-display); font-size: var(--text-xl); border-top: 3px solid var(--color-accent); }
.check { display: flex; gap: var(--space-xs); align-items: center; font-size: var(--text-sm); min-height: 32px; color: var(--color-ink); }
.check input { min-height: 0; width: 18px; height: 18px; }
.matrix td:not(:first-child), .matrix th:not(:first-child) { text-align: center; }
.matrix input { min-height: 0; width: 18px; height: 18px; }
.drawer { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--scrim); display: flex; justify-content: flex-end; }
.drawer aside { width: min(480px, 100%); height: 100%; overflow-y: auto; background: var(--color-paper-2); border-left: var(--rule-hair) solid var(--color-muted); padding: var(--space-lg); animation: slidein var(--dur-long) var(--ease-out) both; }
.drawer textarea { width: 100%; }
.drawer .close { float: right; }
@keyframes slidein { from { transform: translateX(100%); } }

@media (max-width: 75rem) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile-tower, .tile-wide { grid-column: span 2; grid-row: auto; } }
@media (max-width: 60rem) {
  .top { padding: var(--space-xs) var(--space-md); }
  .side.open { overflow-y: auto; }
  .bento, .racks, .gate, .tower-grid, .board.three { grid-template-columns: minmax(0, 1fr); }
  .tile-tower, .tile-wide { grid-column: auto; }
  .tower-wrap { height: 340px; } .tower-wrap.small { height: 300px; }
  .tower { width: 170px; height: 170px; transform: translateY(50px) rotateX(58deg) rotateZ(-42deg); }
  .gate-form { border-left: 0; padding: var(--space-lg) var(--space-md); }
}