/* Matter · Unit 05 — thumbnail art and Reading figure styles (unit template). */
.va-gold { fill: #ffb22e; stroke: #ffd27a; stroke-width: 1.5; filter: drop-shadow(0 0 6px rgba(255,178,46,.5)); }
.va-orbit { fill: none; stroke: rgba(141,182,255,.45); stroke-width: 2; }
.va-p { fill: #ffb22e; } .va-n { fill: #9aa8cf; } .va-e { fill: #5eead4; filter: drop-shadow(0 0 6px #5eead4); }
.va-tile { fill: #13224d; stroke: #8db6ff; stroke-width: 1.5; }
.va-z { fill: #8db6ff; font: 600 10px var(--font-mono); }
.va-sym { fill: #fff; font: 700 22px var(--font-display); }
.va-sym.dark { fill: #050a18; } .va-sym.small { font-size: 15px; }
.va-bond { stroke: #c9d7ff; stroke-width: 6; stroke-linecap: round; }
.va-o { fill: #ff6b6b; } .va-h { fill: #e9eefc; }
.va-cell { fill: #13224d; stroke: rgba(141,182,255,.4); } .va-col { fill: #ffb22e; } .va-col2 { fill: #5eead4; }

.ar-sliders.one { grid-template-columns: 1fr; }
.w-goldbar { fill: #ffb22e; filter: drop-shadow(0 0 8px rgba(255,178,46,.5)); }
.w-foil { fill: #ffd27a; opacity: .85; }
.w-a { fill: #8db6ff; } .w-a2 { fill: #ffb22e; }

.w-sort { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 4px; }
.w-item { padding: 10px; border-radius: 14px; background: rgba(5,10,24,.55); border: 1px solid rgba(141,182,255,.16); text-align: center; }
.w-item b { display: block; margin: 4px 0 8px; font-size: 14px; }
.w-mini { width: 100%; height: 70px; }
.w-el { fill: #050a18; font: 700 9px var(--font-mono); }
.w-btns { display: flex; gap: 6px; justify-content: center; }
.w-btns button { flex: 1; padding: 6px 4px; border-radius: 9px; border: 1px solid rgba(141,182,255,.3); background: transparent; color: #e9eefc; font-size: 12px; font-weight: 700; cursor: pointer; }
.w-btns button:disabled { opacity: .5; cursor: default; }
.w-btns .right { opacity: 1 !important; border-color: #3ccf8e; background: rgba(60,207,142,.18); }
.w-btns .wrong { opacity: 1 !important; border-color: #ff6b6b; background: rgba(255,107,107,.14); }
.w-why { margin: 8px 0 0 !important; font-size: 12px; line-height: 1.4; color: #c9d7ff; text-align: left; }

.w-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 64px; padding: 12px; border-radius: 14px; background: rgba(5,10,24,.55); border: 1px solid rgba(141,182,255,.16); }
.w-atom { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #050a18; font: 700 13px var(--font-mono); box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.w-count { flex-basis: 100%; margin-top: 8px; font: 500 14px var(--font-mono); color: #c9d7ff; }
.w-count b { color: #fff; }

.w-pt { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 3px; margin: 4px 0; }
.w-cell { aspect-ratio: 1; display: grid; place-items: center; padding: 0; border-radius: 5px; border: 1px solid rgba(141,182,255,.25); background: #0e1a3d; color: #e9eefc; font: 700 clamp(8px, 1.6vw, 13px) var(--font-display); cursor: pointer; position: relative; }
.w-cell i { position: absolute; top: 1px; left: 3px; font: 500 clamp(5px, .9vw, 8px) var(--font-mono); font-style: normal; color: #8db6ff; }
.w-cell:hover { border-color: var(--volt); }
.w-cell.on { background: var(--amber); color: #1a1205; border-color: var(--amber); }
.w-cell.on i { color: #1a1205; }