.gal-sub{font-family:var(--mono);font-size:0.85rem;color:#808080;letter-spacing:0.3px;margin:-10px 0 18px}.gal-sub b{color:#cfcfcf;font-weight:700}.gal-sub a{color:#ff7a1a;text-decoration:none}.gal-sub a:hover{text-decoration:underline}h1 .accent{color:#ff7a1a}.xbx-nav a.nav-counter{color:#cfcfcf}.cnt-sec{margin:0 0 26px}.cnt-h{font-family:var(--mono);font-size:0.78rem;color:#7d7d7d;text-transform:uppercase;letter-spacing:1.4px;border-bottom:1px solid #1c1c1c;padding-bottom:7px;margin:0 0 12px}.cnt-h b{color:#ff7a1a;font-weight:700}.cnt-styles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:7px}.cnt-style{background:#131313;border:1px solid #1d1d1d;border-radius:5px;padding:9px 10px 8px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:6px;transition:border-color 0.12s,background 0.12s,transform 0.12s}.cnt-style:hover{border-color:#333;background:#171717;transform:translateY(-1px)}.cnt-style.on{border-color:#6b3708;background:#1c1207;box-shadow:0 0 0 1px #6b3708}.cnt-style img{display:block;image-rendering:pixelated;max-width:100%;height:auto}.cnt-style-name{font-family:var(--mono);font-size:0.85rem;color:#c4c4c4}.cnt-style.on .cnt-style-name{color:#ff9a4a}.cnt-style-blurb{font-family:var(--mono);font-size:0.75rem;color:#5e5e5e;line-height:1.4}.cnt-anim{font-size:0.6rem;text-transform:uppercase;letter-spacing:0.7px;color:#ff9a4a;border:1px solid #6b3708;background:#241207;border-radius:2px;padding:0 4px;vertical-align:1px}.cnt-build{background:#111;border:1px solid #1d1d1d;border-radius:6px;padding:14px 16px;display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}.cnt-field{display:flex;flex-direction:column;gap:5px}.cnt-label{font-family:var(--mono);font-size:0.7rem;color:#7a7a7a;text-transform:uppercase;letter-spacing:0.8px}.cnt-in,.cnt-sel{background:#141414;border:1px solid #242424;border-radius:5px;color:#e0e0e0;font-family:var(--mono);font-size:0.85rem;padding:8px 10px;outline:none;height:36px}.cnt-in:focus,.cnt-sel:focus{border-color:#6b3708}.cnt-in::placeholder{color:#585858}.cnt-sel{cursor:pointer}.cnt-go{background:#241207;border:1px solid #6b3708;border-radius:5px;color:#ff9a4a;font-family:var(--mono);font-size:0.78rem;font-weight:700;padding:0 16px;height:36px;cursor:pointer;text-transform:uppercase;letter-spacing:0.8px;transition:background 0.12s,box-shadow 0.12s}.cnt-go:hover{background:#331a09;box-shadow:0 0 0 1px #8a4a0d}.cnt-go:active{transform:translateY(1px)}.cnt-go[disabled]{opacity:0.5;cursor:default}.cnt-preview{display:flex;align-items:center;justify-content:center;gap:0;background:#0a0a0a;border:1px solid #1d1d1d;border-radius:5px;padding:14px;min-height:62px}.cnt-preview img{display:block;image-rendering:pixelated}.cnt-result{display:none;background:#111;border:1px solid #1d1d1d;border-left:2px solid #6b3708;border-radius:6px;padding:14px 16px;margin-top:14px}.cnt-result.on{display:block}.cnt-result-live{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}.cnt-result-live img{image-rendering:pixelated}.cnt-result-note{font-family:var(--mono);font-size:0.8rem;color:#8d8d8d;line-height:1.7}.cnt-result-note b{color:#ff9a4a}.cnt-code{position:relative;background:#0a0a0a;border:1px solid #202020;border-radius:5px;margin:10px 0 0}.cnt-code pre{margin:0;padding:11px 74px 11px 12px;overflow-x:auto;font-family:var(--mono);font-size:0.8rem;color:#cbcbcb;line-height:1.6;white-space:pre}.cnt-copy{position:absolute;top:7px;right:7px;background:#141414;border:1px solid #2a2a2a;border-radius:4px;color:#8a8a8a;font-family:var(--mono);font-size:0.66rem;padding:4px 8px;cursor:pointer;text-transform:uppercase;letter-spacing:0.5px}.cnt-copy:hover{color:#ff7a1a;border-color:#6b3708}.cnt-err{font-family:var(--mono);font-size:0.8rem;color:#ff6b6b;padding:8px 0 0;display:none}.cnt-err.on{display:block}.cnt-how{background:#111;border:1px solid #1d1d1d;border-left:2px solid #6b3708;border-radius:5px;padding:12px 14px;margin:0 0 20px;font-family:var(--mono);font-size:0.85rem;color:#909090;line-height:1.7}.cnt-how b{color:#ff7a1a}.cnt-how code{background:#0a0a0a;border:1px solid #202020;border-radius:3px;padding:1px 5px;color:#b9b9b9;font-size:0.8rem}.cnt-how a{color:#ff7a1a;text-decoration:none}.cnt-how a:hover{text-decoration:underline}@media (max-width:560px){.cnt-build{gap:11px}.cnt-field{flex:1 1 100%}.cnt-go{width:100%}}
