.xyk{--xyk-bg:#0c0a12;--xyk-card:#151121d1;--xyk-red:#ff7b72;--impact:var(--accent);isolation:isolate;background:radial-gradient(80% 45% at 85% 0%, #b392f029, transparent 70%), radial-gradient(60% 35% at 0% 20%, #f778ba14, transparent 70%), var(--xyk-bg);position:relative;overflow:hidden}main:has(>.xyk){flex-direction:column;display:flex}main>.xyk{flex:1}.xyk:before{content:"";z-index:-1;pointer-events:none;background-image:radial-gradient(#b392f038 1px,#0000 1.4px);background-size:22px 22px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 70%);mask-image:linear-gradient(#000,#0000 70%)}.xyk :focus-visible{outline-color:var(--tag-toy)}.xyk-title{text-shadow:3px 3px #f778ba,6px 6px #3b2266}.xyk [data-level=low]{--impact:var(--accent)}.xyk [data-level=mid]{--impact:var(--tag-game)}.xyk [data-level=high]{--impact:var(--xyk-red)}.xyk-card{background:var(--xyk-card);border:1px solid #b392f038;box-shadow:0 0 40px -18px #b392f073}.xyk-seg{background:#0c0a12cc;border:1px solid #b392f040;gap:.25rem}.xyk-seg label>span{color:var(--muted-foreground);transition:background-color .15s,color .15s}.xyk-seg label:hover>span{color:var(--hi);background:#b392f01a}.xyk-seg input:checked+span{color:#120d1f;background:var(--tag-toy);font-weight:700;box-shadow:0 3px #6b4fa8}.xyk-seg input:checked+span .xyk-seg-hint{color:#120d1fb3}.xyk-seg-hint{color:var(--dim);font-weight:400}.xyk-seg input:focus-visible+span{outline:2px solid var(--tag-toy);outline-offset:2px}.xyk-tank{background:#b392f01a}.xyk-tank-now{background:linear-gradient(90deg, #8a6ad6, var(--tag-toy));transition:width .45s cubic-bezier(.2,1.3,.4,1)}.xyk-tank-next{background:repeating-linear-gradient(-45deg, color-mix(in srgb, var(--impact) 55%, transparent) 0 3px, transparent 3px 6px)}.xyk-pop{animation:.42s cubic-bezier(.2,1.6,.4,1) xyk-pop}@keyframes xyk-pop{0%{color:var(--tag-toy);transform:scale(1.18)}}.xyk-grid{stroke:#b392f017}.xyk-dot{transition:transform .5s cubic-bezier(.2,1.35,.4,1)}.xyk-walk{filter:drop-shadow(0 0 5px var(--impact))}.xyk-key{vertical-align:middle;border-top:2px solid;width:14px;height:0;margin-right:4px;display:inline-block}.xyk-key-curve{border-color:var(--tag-toy)}.xyk-key-spot{border-top-style:dashed;border-color:var(--hi);opacity:.6}.xyk-key-fill{border-top-width:4px;border-color:var(--impact);border-radius:2px}.xyk-field{background:#0c0a12d9;border:1px solid #b392f04d;transition:border-color .15s}.xyk-field:focus-within{border-color:var(--tag-toy);box-shadow:0 0 0 3px #b392f033}.xyk-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.xyk-field input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.xyk-field input{appearance:textfield}.xyk-range{appearance:none;cursor:pointer;touch-action:pan-y;background:0 0;height:36px}.xyk-range::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--accent), var(--tag-game) 55%, var(--xyk-red));opacity:.85;border-radius:999px;height:8px}.xyk-range::-moz-range-track{background:linear-gradient(90deg, var(--accent), var(--tag-game) 55%, var(--xyk-red));opacity:.85;border-radius:999px;height:8px}.xyk-range::-webkit-slider-thumb{-webkit-appearance:none;background:var(--tag-toy);width:26px;height:26px;box-shadow:0 0 0 2px var(--tag-toy), 0 3px 0 2px #6b4fa8;border:3px solid #120d1f;border-radius:50%;margin-top:-9px}.xyk-range::-moz-range-thumb{background:var(--tag-toy);width:22px;height:22px;box-shadow:0 0 0 2px var(--tag-toy), 0 3px 0 2px #6b4fa8;border:3px solid #120d1f;border-radius:50%}.xyk-range:focus-visible{outline:2px solid var(--tag-toy);outline-offset:2px;border-radius:8px}.xyk-chip{color:var(--tag-toy);border:1px solid #b392f073;transition:background-color .15s,border-color .15s}.xyk-chip:hover{border-color:var(--tag-toy);background:#b392f01f}.xyk-impact{border:1px solid color-mix(in srgb, var(--impact) 45%, transparent);background:color-mix(in srgb, var(--impact) 9%, transparent);transition:border-color .2s,background-color .2s}.xyk-impact-value,.xyk-tape-impact{color:var(--impact)}.xyk-btn{color:#120d1f;background:var(--tag-toy);transition:transform 80ms ease-out,box-shadow 80ms ease-out,opacity .15s;box-shadow:0 5px #6b4fa8}.xyk-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px #6b4fa8}.xyk-btn:active:not(:disabled){transform:translateY(5px);box-shadow:0 0 #0000}.xyk-btn:disabled{opacity:.4;cursor:not-allowed}.xyk-ghost{border:1px solid var(--line-strong);color:var(--muted-foreground);transition:color .15s,border-color .15s}.xyk-ghost:hover{color:var(--hi);border-color:var(--tag-toy)}@media (prefers-reduced-motion:reduce){.xyk-dot,.xyk-tank-now,.xyk-btn,.xyk-impact,.xyk-seg label>span{transition:none}.xyk-pop{animation:none}.xyk-btn:hover:not(:disabled),.xyk-btn:active:not(:disabled){transform:none}}
