.whenStage{--when-paper:#f1ecf3;--when-ink:#191916;--when-accent:#7a3e8f;--when-margin:64px;--wr-paper:var(--when-paper);--wr-ink:var(--when-ink);--wr-accent:var(--when-accent);background:var(--when-paper);background-image:repeating-linear-gradient(to bottom, transparent 0 35px, color-mix(in srgb, var(--when-ink) 4%, transparent) 35px 36px);color:var(--when-ink);position:fixed;inset:0;overflow:hidden}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .whenStage{--when-paper:#161311;--when-ink:#f3f1e9;--when-accent:#c08ad2}}:root[data-theme=dark] .whenStage{--when-paper:#161311;--when-ink:#f3f1e9;--when-accent:#c08ad2}.whenColumn{padding:calc(50px + env(safe-area-inset-top)) 18px calc(16px + env(safe-area-inset-bottom));grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);place-items:start center;gap:10px;display:grid;position:absolute;inset:0}.whenHand{justify-items:center;gap:6px;width:min(100%,640px);display:grid}.whenHand .wrHint,.whenHand .wrChallengeBanner{text-align:center;margin:0}.whenCard{grid-template-columns:var(--when-margin) minmax(0, 1fr);border:1.5px solid color-mix(in srgb, var(--when-ink) 78%, transparent);background:var(--when-paper);width:100%;min-height:64px;box-shadow:0 2px 0 color-mix(in srgb, var(--when-ink) 22%, transparent);touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;border-radius:10px;align-items:center;padding:10px 16px 11px 0;display:grid}.whenCard[data-phase=aim][data-dragging]{box-shadow:none;border-style:dashed}.whenCard[data-phase=revealing],.whenCard[data-phase=result]{cursor:default}.whenCardYear{text-align:right;font-family:var(--display-stack);letter-spacing:-.01em;color:var(--when-accent);font-variant-numeric:tabular-nums;padding-right:12px;font-size:1.55rem;font-weight:600;line-height:1}.whenCardPrompt{border-left:1px solid color-mix(in srgb, var(--when-accent) 45%, transparent);font-family:var(--display-stack);letter-spacing:-.012em;text-wrap:pretty;margin:0;padding-left:14px;font-size:clamp(1.12rem,3.6vw,1.5rem);font-weight:580;line-height:1.16}.whenLadderZone{grid-template-rows:minmax(0,1fr);place-self:stretch center;width:min(100%,640px);min-height:0;display:grid}.whenLadder{overscroll-behavior:contain;scrollbar-width:thin;border-radius:8px;outline:none;flex-direction:column;min-height:0;padding:2px 0;display:flex;position:relative;overflow-y:auto}.whenLadder:focus-visible{outline:3px solid var(--when-ink);outline-offset:4px}.whenLadder[data-more]{-webkit-mask-image:linear-gradient(#000 calc(100% - 34px),#0000);mask-image:linear-gradient(#000 calc(100% - 34px),#0000)}.whenLadder:before,.whenLadder:after{content:"";flex:1 1 0;min-height:0}.whenRung,.whenGap{flex:none}.whenGap[data-state=open],.whenGap[data-state=held]{flex:auto;min-height:26px;max-height:100px}.whenRung,.whenGap{grid-template-columns:var(--when-margin) minmax(0, 1fr);align-items:center;display:grid;position:relative}.whenRung:before,.whenGap:before{content:"";top:0;bottom:0;left:calc(var(--when-margin) - .5px);background:color-mix(in srgb, var(--when-accent) 42%, transparent);pointer-events:none;width:1px;position:absolute}.whenRung{min-height:38px}.whenRungYear{text-align:right;letter-spacing:.01em;font-variant-numeric:tabular-nums;padding-right:12px;font-size:.92rem;font-weight:760}.whenRungName{min-width:0;color:color-mix(in srgb, var(--when-ink) 84%, transparent);text-overflow:ellipsis;white-space:nowrap;padding:0 8px 0 14px;font-size:.95rem;font-weight:520;overflow:hidden}.whenRung[data-own] .whenRungYear{color:var(--when-accent)}.whenRung[data-own]:after{content:"";top:50%;left:var(--when-margin);background:var(--when-accent);border-radius:999px;width:7px;height:7px;position:absolute;transform:translate(-50%,-50%)}.whenSlot{grid-column:1/-1;grid-template-columns:var(--when-margin) minmax(0, 1fr);min-height:26px;color:inherit;cursor:pointer;background:0 0;border:0;align-self:stretch;align-items:center;margin:0;padding:0;display:grid;position:relative}.whenSlot:before{content:"";position:absolute;inset:-9px 0}.whenSlot:after{content:"";top:50%;left:var(--when-margin);border:1.5px solid color-mix(in srgb, var(--when-accent) 60%, transparent);background:var(--when-paper);border-radius:999px;width:9px;height:9px;position:absolute;transform:translate(-50%,-50%)}.whenSlotRule{border-top:1.5px dashed color-mix(in srgb, var(--when-ink) 32%, transparent);grid-column:2;height:0;margin:0 8px 0 14px}@media (hover:hover){.whenSlot:hover .whenSlotRule{border-color:var(--when-accent)}.whenSlot:hover:after{background:var(--when-accent)}}.whenGap[data-hover] .whenSlotRule{border-color:var(--when-accent);border-top-width:2px}.whenGap[data-hover] .whenSlot:after{background:var(--when-accent)}.whenSlot:focus-visible{outline:3px solid var(--when-ink);outline-offset:-2px;border-radius:6px}.whenSlotRule[data-quiet]{border-top:1px dashed color-mix(in srgb, var(--when-ink) 16%, transparent);margin:4px 8px 4px 14px}.whenLadder[data-phase=result] .whenRung{min-height:34px}.whenTicket{z-index:2;grid-column:1/-1;grid-template-columns:var(--when-margin) minmax(0, 1fr);border:1.5px solid var(--when-ink);background:var(--when-paper);min-height:46px;box-shadow:0 2px 0 color-mix(in srgb, var(--when-ink) 20%, transparent);touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;border-radius:8px;align-items:center;margin:3px 0;display:grid;position:relative}.whenTicket:before{content:"";top:6px;bottom:6px;left:calc(var(--when-margin) - .5px);background:color-mix(in srgb, var(--when-accent) 45%, transparent);width:1px;position:absolute}.whenTicketYear{text-align:right;font-family:var(--display-stack);color:var(--when-accent);font-variant-numeric:tabular-nums;padding-right:12px;font-size:1.12rem;font-weight:600}.whenTicketName{text-overflow:ellipsis;white-space:nowrap;min-width:0;padding:0 12px 0 14px;font-size:1rem;font-weight:700;overflow:hidden}.whenTicket[data-dragging]{opacity:.3;box-shadow:none;border-style:dashed}.whenTicket[data-state=placed]{border-color:var(--when-accent);box-shadow:none;cursor:default;animation:.42s cubic-bezier(.2,1.2,.4,1) both whenLand}.whenTicket[data-state=placed][data-hit=true]{background:color-mix(in srgb, var(--when-accent) 13%, var(--when-paper))}.whenTicket[data-floating]{z-index:20;box-shadow:0 6px 0 color-mix(in srgb, var(--when-ink) 12%, transparent);pointer-events:none;margin:0;position:fixed;transform:translateY(-50%)rotate(-.6deg)}.whenNeighbors{grid-column:1/-1;gap:3px;padding:1px 0 7px;display:grid}.whenNeighbor{grid-template-columns:var(--when-margin) minmax(0, 1fr);color:color-mix(in srgb, var(--when-ink) 66%, transparent);align-items:baseline;margin:0;font-size:.82rem;line-height:1.3;display:grid;position:relative}.whenNeighbors .whenNeighbor{animation:.34s cubic-bezier(.16,1,.3,1) both whenFadeIn;animation-delay:calc(.62s + var(--wr-i,0) * .16s)}.whenNeighborYear{text-align:right;color:var(--when-accent);font-variant-numeric:tabular-nums;padding-right:12px;font-weight:800}.whenNeighborText{padding:0 8px 0 14px}.whenMiss{margin:4px 8px 4px calc(var(--when-margin) + 8px);border:1.5px dashed color-mix(in srgb, var(--when-accent) 55%, transparent);border-radius:8px;grid-column:1/-1;gap:2px;padding:6px 10px 7px;animation:.3s .2s both whenFadeIn;display:grid}.whenMissTag{letter-spacing:.01em;color:color-mix(in srgb, var(--when-ink) 62%, transparent);margin:0;font-size:.72rem;font-style:italic}.whenMiss .whenNeighbor{grid-template-columns:auto minmax(0,1fr)}.whenMiss .whenNeighborYear{padding-right:8px}.whenMiss .whenNeighborText{padding:0}.whenActions{align-content:end;justify-items:center;gap:8px;width:100%;min-height:88px;display:grid}.whenCommit{animation:.2s both wrRise}.whenHudTop{padding:calc(12px + env(safe-area-inset-top)) 16px 8px;border-bottom:1px solid color-mix(in srgb, currentColor 14%, transparent);pointer-events:none;justify-content:space-between;align-items:baseline;display:flex;position:absolute;top:0;left:0;right:0}.whenHudTop a{pointer-events:auto}.whenWordmark{font-family:var(--display-stack);font-variation-settings:"WONK" 1;letter-spacing:-.008em;color:var(--when-ink);font-size:1.02rem;font-weight:640;text-decoration:none}.whenRound{letter-spacing:.15em;text-transform:uppercase;color:color-mix(in srgb, var(--when-ink) 55%, transparent);margin:0;font-size:.75rem;font-weight:560}.whenLoading,.whenError{color:color-mix(in srgb, var(--when-ink) 60%, transparent);place-items:center;margin:0;font-weight:650;display:grid;position:absolute;inset:0}.whenError{text-align:center;place-content:center;justify-items:center;gap:14px}.whenError p{color:var(--when-ink);margin:0;font-size:1.1rem}@keyframes whenLand{0%{box-shadow:0 6px 0 color-mix(in srgb, var(--when-ink) 12%, transparent)}to{box-shadow:none}}@keyframes whenFadeIn{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.whenTicket[data-state=placed],.whenNeighbors .whenNeighbor,.whenMiss,.whenCommit{animation:none}.whenLadder{scroll-behavior:auto}}@media (min-width:860px){.whenStage{--when-margin:78px}.whenHand,.whenLadderZone{width:min(100%,680px)}.whenRung{min-height:42px}.whenRungName{font-size:1rem}.whenSlot{min-height:28px}.whenGap[data-state=open],.whenGap[data-state=held]{max-height:104px}.whenLadder[data-phase=result] .whenRung{min-height:36px}.whenTicket{min-height:50px}.whenCard{min-height:74px}}