:root {
  --night: #1b1446;
  --deep: #241a5e;
  --violet: #5b3fd6;
  --gold: #ffcf3f;
  --coral: #ff6b5e;
  --mint: #18b58c;
  --sky: #3aa0f0;
  --paper: #fffaf0;
  --ink: #1b1446;
  --display: 'Baloo 2', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --body: 'Nunito', 'Avenir Next', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html, body { min-height: 100%; }
body {
  font-family: var(--body); font-weight: 700; color: var(--ink); background-color: var(--night);
  background-image: radial-gradient(circle at 12px 12px, #fff8 0 1.5px, transparent 2px), radial-gradient(circle at 50px 44px, #ffcf3f99 0 2px, transparent 2.5px), radial-gradient(circle at 80px 20px, #fff5 0 1px, transparent 1.5px);
  background-size: 96px 96px;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 4px solid var(--sky); outline-offset: 2px; }

#app {
  max-width: 560px; min-height: 100dvh; margin: 0 auto; background: var(--paper);
  display: flex; flex-direction: column; position: relative; overflow-x: clip;
  box-shadow: 0 0 0 5px var(--violet), 0 0 60px #000a;
}
h1, h2 { font-family: var(--display); font-weight: 800; line-height: 1.05; }
.pad { padding: 16px 18px; }
.grow { flex: 1; }
.center { text-align: center; }
.muted { opacity: .72; font-weight: 500; }

/* Buttons */
.btn {
  display: block; width: 100%; padding: 14px; border-radius: 18px; font-family: var(--display); font-weight: 800;
  font-size: 1.3rem; background: #fff; border: 3px solid var(--night); box-shadow: 0 5px 0 var(--night);
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--night); }
.btn.primary { background: var(--gold); }
.btn.go { background: var(--mint); color: #fff; }
.btn:disabled { opacity: .4; cursor: default; }
.chip { padding: 7px 12px; border-radius: 999px; background: #fff; border: 2px solid var(--night); font-size: .88rem; white-space: nowrap; color: var(--ink); }
.chip.on { background: var(--gold); }

/* Title */
.title { flex: 1; display: flex; flex-direction: column; background: radial-gradient(ellipse at 50% 30%, #6a4be8, var(--night) 70%); position: relative; }
.stars-bg { position: absolute; inset: 0; background-image: radial-gradient(circle at 20px 30px, #fff 0 1.5px, transparent 2px), radial-gradient(circle at 70px 90px, #ffcf3f 0 2px, transparent 2.5px), radial-gradient(circle at 110px 50px, #fffa 0 1px, transparent 1.5px); background-size: 130px 130px; animation: twinkle 3s infinite alternate; }
@keyframes twinkle { to { opacity: .45; } }
.title .hero { flex: 1; display: grid; place-items: center; text-align: center; padding: 26px 18px 10px; position: relative; }
.machine { font-size: 4.6rem; animation: hover 2s ease-in-out infinite alternate; filter: drop-shadow(0 12px 14px #ffcf3f88); }
@keyframes hover { to { transform: translateY(-12px) rotate(-6deg); } }
.logo { font-size: clamp(3.4rem, 18vw, 5.6rem); line-height: .8; color: var(--gold); text-shadow: 0 5px 0 #b3401f; transform: rotate(-3deg); margin-top: 8px; }
.logo span { display: block; color: #fff; text-shadow: 0 5px 0 var(--violet); }
.chase { font-size: 2.8rem; margin-top: 20px; white-space: nowrap; animation: run 1.1s ease-in-out infinite alternate; }
@keyframes run { to { transform: translateX(26px) rotate(3deg); } }
.title .panel { position: relative; background: var(--paper); border-top: 4px solid var(--gold); border-radius: 26px 26px 0 0; padding: 20px 18px 24px; display: grid; gap: 12px; font-weight: 500; line-height: 1.4; }
.title input, .typed { width: 100%; padding: 14px 16px; font: inherit; font-size: 1.3rem; border-radius: 16px; border: 3px solid var(--night); background: #fff; color: var(--ink); }

/* Time map */
.topbar { display: flex; gap: 8px; align-items: center; padding: 10px 14px; background: var(--night); color: #fff; position: sticky; top: 0; z-index: 6; }
.topbar .rank { font-family: var(--display); font-size: 1.15rem; margin-right: auto; line-height: 1.1; }
.topbar .rank small { display: block; font-family: var(--body); font-size: .75rem; opacity: .8; font-weight: 500; }
.time { flex: 1; background: linear-gradient(#2a1f6e, #4a2f9e 30%, #23386f 65%, #1b1446); color: #fff; padding-bottom: 20px; position: relative; }
.time::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20px 30px, #fff 0 1.2px, transparent 2px), radial-gradient(circle at 90px 80px, #ffcf3fcc 0 1.6px, transparent 2.2px), radial-gradient(circle at 140px 20px, #fff8 0 1px, transparent 1.5px); background-size: 170px 150px; pointer-events: none; }
.settings { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 12px 10px 0; position: relative; }
.trail { position: relative; }
.trail svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.trail path { fill: none; stroke: var(--gold); stroke-width: 4; stroke-dasharray: 2 12; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.trail path.glow { stroke: #fff2; stroke-width: 26; stroke-dasharray: none; }
.pin { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; z-index: 2; color: #fff; text-align: left; }
.pin.rt { flex-direction: row-reverse; text-align: right; }
.pin.lt { transform: translate(-32px, -50%); }
.pin.rt { transform: translate(calc(-100% + 32px), -50%); }
.pin i { font-style: normal; flex: none; width: 64px; height: 64px; display: grid; place-items: center; font-size: 2.1rem; border-radius: 50%; background: #fff; border: 4px solid var(--night); box-shadow: 0 4px 0 var(--night); position: relative; }
.pin i em { position: absolute; right: -6px; bottom: -6px; font-size: 1.1rem; font-style: normal; }
.pin b { font-size: .92rem; line-height: 1.15; text-shadow: 0 2px 0 #0006; max-width: 150px; }
.pin b small { display: block; font-weight: 500; opacity: .85; font-size: .78rem; }
.pin.done i { background: var(--mint); }
.pin.now { z-index: 3; }
.pin.now i { background: var(--gold); animation: pulse 1s infinite alternate; }
.pin.locked i { background: #8d86b8; filter: grayscale(.7); }
.pin.locked b { opacity: .6; }
.pin .ship, .pin .thief { position: absolute; top: -30px; font-size: 1.8rem; animation: bob 1.2s infinite alternate; }
.pin.lt .ship, .pin.lt .thief { left: 40px; } .pin.rt .ship, .pin.rt .thief { right: 40px; }
@keyframes pulse { to { transform: scale(1.12); box-shadow: 0 4px 0 var(--night), 0 0 0 10px #ffcf3f55; } }
@keyframes bob { to { transform: translateY(-6px) rotate(8deg); } }
.next-card { border: 3px solid var(--night); border-radius: 18px; padding: 10px 14px; background: #fff; }
.next-card h2 { font-size: 1.35rem; color: var(--violet); }
.row { display: flex; gap: 10px; }
.row .btn { font-size: 1.1rem; padding: 12px 8px; }

/* Scene */
.scene { position: relative; height: 170px; overflow: hidden; flex: none; background: linear-gradient(var(--sky1, #6ec1f0), var(--sky2, #ffe7a3)); border-bottom: 4px solid var(--night); }
.scene::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: #0002; }
.scene .props { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: space-around; align-items: flex-end; font-size: 3.2rem; z-index: 1; }
.scene .props span:nth-child(odd) { font-size: 4.2rem; }
.scene.talk { height: auto; min-height: 120px; display: flex; align-items: flex-end; gap: 6px; padding: 12px 12px 10px; }
.scene.talk .props { opacity: .35; }
.scene .npc { font-size: 4rem; z-index: 2; animation: bob 1.4s infinite alternate; filter: drop-shadow(0 4px 0 #0003); line-height: 1; flex: none; }
.bubble { flex: 1; z-index: 3; background: #fff; border: 3px solid var(--night); border-radius: 18px 18px 18px 4px; padding: 9px 12px; font-size: 1.05rem; line-height: 1.3; box-shadow: 0 4px 0 var(--night); align-self: center; }
.bubble .who { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--coral); }

/* Briefing */
.brief { display: grid; gap: 10px; align-content: start; }
.brief h1 { font-size: 2.1rem; color: var(--violet); }
.brief .skill { justify-self: start; background: var(--gold); border: 2px solid var(--night); border-radius: 10px; padding: 4px 10px; }
.brief p { font-size: 1.08rem; line-height: 1.45; font-weight: 500; }
.fact { border: 3px dashed var(--violet); border-radius: 16px; padding: 10px 14px; background: #f1ecff; font-weight: 500; line-height: 1.4; }

/* Play */
.hud { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.hud .x { font-size: 1.3rem; width: 40px; height: 40px; border-radius: 50%; }
.bar { flex: 1; height: 16px; border-radius: 999px; background: #e7e1d0; border: 2px solid var(--night); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--mint); transition: width .3s; }
.stage { flex: 1; display: flex; flex-direction: column; padding: 8px 16px 20px; gap: 12px; }
.ask { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--violet); font-weight: 900; }
.prompt { font-family: var(--display); font-weight: 800; font-size: 1.75rem; line-height: 1.15; }
.qbox { flex: 1; display: grid; align-content: center; justify-items: center; gap: 16px; text-align: center; padding: 6px 0; }
.qbox .vis { width: 100%; }
.prompt.sum { font-size: 2.7rem; }
.big { font-size: 4.6rem; line-height: 1; text-align: center; }
.card { border: 3px solid var(--night); border-radius: 22px; background: #fff; padding: 16px 14px; display: grid; gap: 10px; box-shadow: 0 6px 0 var(--night); animation: pop .25s; }
.card h2 { font-size: 1.55rem; color: var(--violet); }
.tt { font-size: 1.1rem; line-height: 1.45; font-weight: 500; }
.trick { background: #fff3c4; border: 2px solid var(--gold); border-radius: 14px; padding: 8px 12px; font-weight: 500; line-height: 1.35; }
.trick b { color: #a85d00; margin-right: 4px; }
@keyframes pop { from { transform: scale(.85); } }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; }
.opt { min-height: 78px; font-size: 1.7rem; line-height: 1.1; }
.opt.right { background: var(--mint); color: #fff; }
.opt.wrong { background: var(--coral); color: #fff; }
.foot { position: sticky; bottom: 0; padding: 12px 16px 16px; background: linear-gradient(transparent, var(--paper) 22%); margin-top: auto; z-index: 4; }
.foot.dock { background: var(--paper); border-top: 4px solid var(--gold); display: grid; gap: 10px; border-radius: 22px 22px 0 0; margin-top: -18px; }
.fb { position: fixed; left: 50%; width: min(100%, 560px); translate: -50% 0; bottom: 0; padding: 14px 16px 18px; border-top: 4px solid var(--night); z-index: 8; animation: rise .2s; display: grid; gap: 8px; max-height: 88dvh; overflow-y: auto; }
.fb.ok { background: #c8f3e3; }
.fb.bad { background: #ffe6c7; }
.fb h2 { font-size: 1.45rem; }
.fb p { font-size: 1.08rem; font-weight: 500; line-height: 1.4; }
@keyframes rise { from { transform: translateY(100%); } }

/* Reward */
.reward { flex: 1; display: flex; flex-direction: column; background: linear-gradient(var(--sky1, #b9a6e8), var(--paper) 55%); }
.reward h1 { font-size: 2rem; color: var(--violet); }
.stamp { width: 190px; height: 190px; margin: 26px auto 8px; border-radius: 50%; border: 6px double var(--coral); color: #d43a2c; display: grid; place-items: center; align-content: center; gap: 2px; text-align: center; background: #fffd; transform: rotate(-12deg); font-family: var(--display); animation: stampIn .5s cubic-bezier(.2, 2, .4, 1); padding: 10px; }
.stamp .e { font-size: 3rem; line-height: 1; }
.stamp b { font-size: 1.5rem; text-transform: uppercase; line-height: 1; }
.stamp small { font-family: var(--body); font-size: .62rem; letter-spacing: .12em; font-weight: 900; }
@keyframes stampIn { from { transform: scale(2.4) rotate(20deg); } }
.stars { font-size: 2.6rem; text-align: center; letter-spacing: 6px; }
.stars .off { filter: grayscale(1); opacity: .3; }
.clue { border: 3px dashed var(--night); border-radius: 16px; padding: 12px 14px; background: #fff; font-weight: 500; line-height: 1.4; }
.clue b { color: var(--coral); }
s { text-decoration-color: var(--coral); text-decoration-thickness: 3px; }

/* Trick book */
.bookp { display: grid; gap: 8px; }
.bookp h2 { color: var(--violet); margin-top: 10px; font-size: 1.3rem; }
.tc { border: 2px solid var(--night); border-radius: 14px; background: #fff; padding: 10px 12px; }
.tc summary { font-family: var(--display); font-size: 1.15rem; cursor: pointer; }
.tc[open] { display: grid; gap: 10px; } .tc[open] summary { margin-bottom: 8px; color: var(--violet); }
.tc > * + * { margin-top: 8px; }

/* ---------- pictures ---------- */
.pop { animation: popin .35s both; }
@keyframes popin { from { opacity: 0; transform: scale(.3); } }
.visrow { display: flex; flex-wrap: wrap; gap: 12px 18px; justify-content: center; align-items: flex-end; }
.vis { display: grid; justify-items: center; gap: 4px; }
.vis figcaption { font-size: .95rem; color: var(--violet); font-weight: 900; text-align: center; }
.vin { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: flex-end; max-width: 100%; }
.c0, .a { --c: var(--violet); } .c1 { --c: var(--coral); } .c2 { --c: var(--mint); } .c3 { --c: #f0a800; } .b, .x { --c: var(--coral); }
.v-emo .vin { font-size: 2rem; gap: 2px 6px; max-width: 300px; }
.tal { display: inline-flex; gap: 7px; position: relative; padding: 0 6px; height: 46px; margin: 0 6px; }
.tal i { width: 5px; height: 46px; background: var(--ink); border-radius: 3px; transform: rotate(4deg); }
.tal i:nth-child(even) { transform: rotate(-3deg); }
.tal b { position: absolute; left: -2px; right: -2px; top: 21px; height: 5px; background: var(--coral); border-radius: 3px; transform: rotate(-24deg); }
.tf { display: grid; grid-template-columns: repeat(5, 34px); border: 3px solid var(--night); border-radius: 8px; overflow: hidden; background: #fff; margin: 0 4px; }
.tf i { height: 34px; border: 1px solid #c9c3e6; display: grid; place-items: center; animation: none; }
.tf i.a::after, .tf i.b::after { content: ''; width: 24px; height: 24px; border-radius: 50%; background: var(--c); animation: popin .35s both; animation-delay: inherit; }
.v-blocks .vin { gap: 5px; align-items: flex-end; }
.rod { width: 15px; height: 110px; border-radius: 3px; border: 2px solid var(--night); background: repeating-linear-gradient(var(--violet) 0 9.6px, var(--night) 9.6px 10.6px); }
.hun { width: 110px; height: 110px; border-radius: 3px; border: 2px solid var(--night); background: repeating-linear-gradient(transparent 0 9.6px, var(--night) 9.6px 10.6px), repeating-linear-gradient(90deg, var(--mint) 0 9.6px, var(--night) 9.6px 10.6px); }
.ones { display: flex; flex-direction: column-reverse; flex-wrap: wrap; gap: 3px; max-height: 110px; align-content: flex-start; margin-left: 6px; }
.ones i { width: 15px; height: 15px; border-radius: 3px; border: 2px solid var(--night); background: var(--coral); }
.v-line .vin, .v-line { width: 100%; } .v-line svg { width: 100%; max-width: 420px; }
.v-line .ax { stroke: var(--night); stroke-width: 2; stroke-linecap: round; }
.v-line text { font: 900 11px var(--body); text-anchor: middle; fill: #8a84a8; }
.v-line text.on { fill: var(--night); font-size: 13px; }
.v-line text.jl { fill: var(--coral); font-size: 12px; }
.v-line .jump { fill: none; stroke: var(--coral); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawj .5s forwards; }
@keyframes drawj { to { stroke-dashoffset: 0; } }
.arr { display: grid; gap: 4px; }
.arr i, .rw i, .v-pairs i { width: var(--s, 22px); height: var(--s, 22px); border-radius: 50%; background: var(--c, var(--violet)); }
.arr.sqr { gap: 1px; } .arr.sqr i { border-radius: 2px; background: var(--gold); outline: 1px solid var(--night); }
.arr.turn { animation: turn 5s ease-in-out 1s infinite; margin: 20px 0; }
@keyframes turn { 0%, 35% { transform: none; } 50%, 85% { transform: rotate(90deg); } }
.v-rows .vin, .v-pairs .vin { flex-direction: column; align-items: flex-start; gap: 5px; }
.rw, .v-pairs .vin div { display: flex; gap: 5px; }
.rw i.c1 { --c: var(--sky); }
.v-pairs i { --s: 24px; background: #8d7b68; border: 2px solid var(--night); }
.v-pairs i.lone { background: var(--coral); animation: popin .35s both, bob 1s .6s infinite alternate; }
.v-groups .vin { gap: 8px; }
.bagg { display: grid; grid-template-columns: repeat(2, auto); gap: 1px; padding: 6px; border: 3px solid var(--night); border-radius: 14px; background: #fff3c4; font-size: 1.25rem; line-height: 1.1; }
.crust { fill: #e9b86a; stroke: var(--night); stroke-width: 2; }
.sl { fill: #fff3c4; stroke: var(--night); stroke-width: 1.5; stroke-linejoin: round; } .sl.on { fill: var(--coral); }
.fing { display: flex; align-items: flex-end; gap: 5px; }
.fing span { display: grid; justify-items: center; gap: 3px; font-size: .75rem; color: #8a84a8; }
.fing span.gap { margin-left: 16px; }
.fing i { width: 19px; border-radius: 9px 9px 4px 4px; border: 2px solid var(--night); background: var(--violet); transition: height .4s; }
.fing .r i { background: var(--mint); } .fing .down i { background: #cfcbdc; } .fing .down { color: var(--coral); font-weight: 900; }
.hl { display: flex; gap: 14px; width: 100%; justify-content: center; font-size: .9rem; } .hl .l { color: var(--violet); } .hl .r { color: #0d8a6a; }
.v-hands .vin { flex-direction: column; align-items: center; }
.shp { fill: #d9cfff; stroke: var(--night); stroke-width: 3; stroke-linejoin: round; }
.mk { fill: var(--coral); stroke: var(--night); stroke-width: 1.5; } .cd { fill: var(--coral); stroke: var(--night); stroke-width: 2; }
.v-pyth svg { max-width: 100%; height: auto; }
.v-pyth .q1 { fill: #bfe9ff; } .v-pyth .q2 { fill: #ffe08a; } .v-pyth .q3 { fill: #ffc2ba; }
.v-pyth rect, .v-pyth .tri { stroke: var(--night); stroke-width: .09; } .v-pyth .tri { fill: #fff; }
.v-pyth .gl { stroke: var(--night); stroke-width: .04; fill: none; opacity: .55; }
.v-pyth text { font: 800 1.3px var(--display); text-anchor: middle; fill: var(--night); } .v-pyth text.sm { font-size: .7px; fill: var(--coral); }
.v-eq b { font-family: var(--display); font-size: 2rem; color: var(--night); background: #fff3c4; border-radius: 12px; padding: 2px 14px; }
.v-steps .vin { flex-direction: column; align-items: center; gap: 4px; }
.v-steps .vin div { font-family: var(--display); font-size: 1.35rem; background: #f1ecff; border-radius: 10px; padding: 1px 14px; text-align: center; }
.v-steps .vin div:last-child { background: var(--gold); }
.v-cross .vin { flex-direction: column; align-items: center; gap: 4px; }
.v-cross .vin > div { font-family: var(--display); font-size: 2.2rem; }
.v-cross s { color: var(--coral); text-decoration-thickness: 4px; animation: fadecross 1s .5s both; }
@keyframes fadecross { from { text-decoration-color: transparent; color: inherit; } }
.v-cross u { text-decoration-color: var(--mint); text-decoration-thickness: 4px; } .v-cross .no { color: var(--coral); border: 3px dashed var(--coral); border-radius: 10px; padding: 0 6px; }
.v-cross em { font-style: normal; font-size: 1rem; color: var(--violet); text-align: center; } .v-cross em.stop { color: #c2362a; }
.v-shift table { border-collapse: collapse; font-family: var(--display); }
.v-shift th { font: 900 .75rem var(--body); color: #8a84a8; padding: 0 4px; }
.v-shift td { width: 52px; height: 44px; text-align: center; font-size: 1.7rem; border: 2px solid var(--night); background: #fff; }
.v-shift td.mv { border: 0; background: none; font: 700 .85rem var(--body); color: var(--coral); height: 26px; width: auto; }
.v-shift td.z { background: var(--gold); }
.v-egy .vin { align-items: center; gap: 4px; }
.hoop { font-family: var(--display); font-size: 2.6rem; line-height: 1; color: #b3661a; }
.stroke { width: 6px; height: 34px; background: var(--ink); border-radius: 3px; margin: 0 3px; }
.v-maya .vin { flex-direction: column; align-items: center; gap: 5px; padding: 8px 12px; background: #e8dcc0; border: 3px solid var(--night); border-radius: 12px; min-width: 84px; min-height: 60px; justify-content: center; }
.md { display: flex; gap: 6px; } .md i { width: 13px; height: 13px; border-radius: 50%; background: var(--ink); }
.v-maya b { width: 62px; height: 10px; border-radius: 5px; background: var(--ink); }
.v-gauss .vin { gap: 8px; }
.v-gauss .vin div { display: grid; justify-items: center; font-family: var(--display); font-size: 1.25rem; line-height: 1.1; }
.v-gauss b { width: 40px; height: 34px; display: grid; place-items: center; background: #f1ecff; border: 2px solid var(--night); border-radius: 8px; }
.v-gauss span { color: var(--coral); } .v-gauss em { font-style: normal; background: var(--gold); border-radius: 8px; padding: 0 8px; margin-top: 3px; }
.v-seq .vin { gap: 4px; align-items: center; }
.v-seq span { min-width: 40px; padding: 4px 6px; text-align: center; font-family: var(--display); font-size: 1.35rem; background: #f1ecff; border: 2px solid var(--night); border-radius: 10px; }
.v-seq span.q { background: var(--gold); } .v-seq i { font-style: normal; color: var(--coral); }

.v-line .dot { fill: var(--gold); stroke: var(--night); stroke-width: 2; }
.v-clock .face { fill: #fff; stroke: var(--night); stroke-width: 3; }
.v-clock text { font: 800 9px var(--display); text-anchor: middle; fill: var(--night); }
.v-clock line { stroke-linecap: round; } .v-clock .hh { stroke: var(--night); stroke-width: 4.5; } .v-clock .mh { stroke: var(--coral); stroke-width: 3; }
.v-bar .vin { gap: 0; flex-wrap: nowrap; border: 3px solid var(--night); border-radius: 8px; overflow: hidden; }
.v-bar i { width: 27px; height: 40px; background: #fff; border-right: 1px solid var(--night); } .v-bar i:last-child { border: 0; }
.v-bar i.a { background: var(--violet); } .v-bar i.b { background: var(--coral); }
.v-grid100 .vin { display: grid; grid-template-columns: repeat(10, 15px); gap: 2px; }
.v-grid100 i { height: 15px; background: #e9e4f7; border-radius: 2px; } .v-grid100 i.a { background: var(--violet); }
.arr i.c1 { --c: var(--coral); }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition: none !important; } }