/* ═══════════════════════════════════════
   WoGL — World of GL
   wogl.io | worldofgl.com | mundogl.com
   hello@wogl.io | hola@mundogl.com

   Proprietary. All rights reserved.
   ═══════════════════════════════════════ */

/* The Observatorium (observatorium.js) in the new WoGL's arrangement: the Shader of the Week running behind the
   hero, Shader Wars and the weekly challenge in wide bands under it, the feed in pill tabs with a card to publish
   first. Each card carries the Warning pill, the topic and the save mark. The museum's type only (Outfit and
   JetBrains Mono), over the museum's lava in the traveler's ship (lava.js), which the panels let through. */
:root {
  color-scheme: dark;
  --ink: #050403; --panel: rgba(16, 12, 9, .8);
  --line: rgba(232, 200, 154, .13); --line-2: rgba(232, 200, 154, .3);
  --gold: #e8c89a; --cream: #f4ece1;
  --text: #efe6d8; --muted: rgba(239, 230, 216, .64); --quiet: rgba(239, 230, 216, .42);
  --ok: #8fd3a4; --bad: #ff8a73; --bar: 64px;
  --sans: 'Outfit', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --gutter: clamp(16px, 5vw, 72px);
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--ink); scroll-padding-top: 90px; }
body { min-height: 100vh; background: var(--ink); color: var(--text); font: 300 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
button:disabled { cursor: default; opacity: .55; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.icon { width: 18px; height: 18px; display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* the museum's lava, in the traveler's ship */
#lava { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; opacity: .62; }
.ob-page { position: relative; z-index: 1; }
.wrap { width: min(1280px, 100%); margin: 0 auto; padding-inline: var(--gutter); }

/* ── The bar, as the other houses carry it ── */
.house-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 28px; height: var(--bar); padding: 0 clamp(16px, 3vw, 38px);
  background: rgba(5, 4, 3, .88); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.house-mark { font: 300 20px/1 var(--sans); letter-spacing: .18em; color: var(--gold); }
.ob-houses { display: contents; }
.house-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.house-actions #woglPerfMount { display: inline-flex; align-items: center; flex: none; }
.house-actions #woglPerfMount:empty { display: none; }
.house-actions #woglperf .wp-btn { min-height: 40px; padding: 0 10px; background: transparent; border-color: transparent; }
.ob-lang { display: inline-flex; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; }
.ob-lang button { min-width: 36px; height: 28px; border-radius: 999px; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; color: var(--quiet); }
.ob-lang button[aria-pressed="true"] { background: rgba(232, 200, 154, .14); color: var(--gold); }
#obStrip { position: relative; z-index: 35; }

/* ── Shared pieces: kicker, buttons, the heart, the traveler ── */
.kicker { font: 500 11px/1.4 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.kicker.live { display: inline-flex; align-items: center; gap: 10px; }
/* a label over a live piece sits on dark glass, so it reads over any light */
.kicker.glass { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(232, 200, 154, .3); background: rgba(5, 4, 3, .58);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }
.kicker.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 24px; border-radius: 999px; font-size: 15px; font-weight: 400;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s, color .3s, background .3s; white-space: nowrap; }
.btn .icon { width: 16px; height: 16px; }
.btn-gold { color: #1b130c; background: linear-gradient(180deg, #f3dcb6, #d7ad78); box-shadow: 0 10px 36px rgba(232, 200, 154, .22), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn-gold:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 48px rgba(232, 200, 154, .32), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn-ghost { color: var(--cream); border: 1px solid var(--line-2); background: rgba(10, 8, 6, .4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn-ghost:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.btn-ghost.on { border-color: var(--gold); color: var(--gold); }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 13.5px; }
.btn-quiet { border-color: transparent; background: none; color: var(--quiet); }
/* the heart: one per traveler per work; it pops when it lights */
.heart { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted);
  font: 500 12px/1 var(--mono); transition: color .3s, border-color .3s, background .3s; }
.heart svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.heart:hover:not(:disabled) { color: var(--cream); border-color: var(--line-2); }
.heart.on { color: #ff8d78; border-color: rgba(255, 141, 120, .45); background: rgba(255, 110, 90, .08); }
.heart.on svg { fill: currentColor; }
.heart.big { height: 48px; padding: 0 20px; font-size: 14px; gap: 9px; }
.heart.big svg { width: 19px; height: 19px; }
.heart.still { pointer-events: none; }
.who { display: inline-flex; align-items: center; gap: 9px; min-width: 0; font-size: 13.5px; color: var(--muted); transition: color .3s; }
.who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who:hover { color: var(--cream); }
.who-lg { gap: 12px; font-size: 16px; color: var(--cream); }
.who-lg span { display: grid; white-space: normal; }
.who-lg small { font: 400 10px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.ob-ship { flex: none; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--deep) 0 50%, var(--hot) 50% 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset; }
.ob-ship.big { width: 40px; height: 40px; }
/* the Warning pill: solid, in the top left corner of a thumbnail or a stage */
.ob-pill { padding: 5px 9px; border-radius: 6px; background: linear-gradient(180deg, #f3dcb6, #d7ad78); box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  font: 500 10.5px/1 var(--sans); letter-spacing: .02em; color: #1b130c; white-space: nowrap; }
.ob-note { margin: 24px 0; color: var(--muted); }
.ob-note-warn { color: var(--bad); }
.ob-back { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

/* ── The hero: the Shader of the Week running behind ── */
.ohero { position: relative; min-height: calc(100svh - var(--bar)); display: flex; align-items: flex-end; padding: 0 0 clamp(64px, 12vh, 120px); overflow: hidden; }
.ohero-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.ohero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 4, 3, .82), rgba(5, 4, 3, .4) 45%, rgba(5, 4, 3, 0) 75%), linear-gradient(to top, rgba(5, 4, 3, .9), rgba(5, 4, 3, 0) 55%); }
/* a hero without a Shader of the Week yet: the title over the lava */
.ohero.is-bare::before { background: linear-gradient(to top, rgba(5, 4, 3, .7), rgba(5, 4, 3, 0) 60%); }
.ohero-in { position: relative; z-index: 2; width: 100%; }
.ohero-title { margin-top: 16px; max-width: 14ch; font: 400 clamp(46px, 7vw, 108px)/.98 var(--sans); letter-spacing: -.035em; color: var(--cream); overflow-wrap: anywhere; }
.ohero-sub { margin-top: 14px; max-width: 48ch; font-size: 17px; color: var(--muted); }
.ohero .who-lg { margin-top: 22px; }
.ohero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 34px; }
.ohero .ob-pill { position: absolute; z-index: 3; top: 22px; right: var(--gutter); }
.ohero .ob-stage-state { z-index: 3; }

/* ── Shader Wars, in a wide band ── */
.obs-band { padding-top: clamp(48px, 7vh, 84px); }
.wars { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 34px; align-items: center; padding: 30px 34px; border-radius: 26px;
  border: 1px solid rgba(174, 156, 190, .28); background: radial-gradient(70% 140% at 100% 0%, rgba(140, 116, 150, .16), transparent 60%), var(--panel); overflow: hidden; }
.wars-copy { display: grid; gap: 10px; }
.wars-copy .kicker { color: #c8b4d8; display: inline-flex; align-items: center; gap: 8px; }
.wars-title { font: 200 clamp(42px, 5vw, 76px)/.95 var(--sans); letter-spacing: -.035em; color: var(--cream); }
.wars-copy p { color: var(--muted); font-size: 16px; }
.wars-meta { display: flex; flex-wrap: wrap; gap: 16px; font: 400 12px/1.4 var(--mono); letter-spacing: .08em; color: #c4b6d2; }
.battle { display: grid; gap: 12px; }
.battle-pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.battle-art { position: relative; display: block; aspect-ratio: 4 / 3; border: 1px solid rgba(174, 156, 190, .3); border-radius: 16px; overflow: hidden; background: #000; transition: border-color .3s, transform .4s var(--ease); }
.battle-art:hover { border-color: #c8b4d8; transform: translateY(-2px); }
.battle-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.battle-name { margin-top: 8px; font-size: 14px; color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.battle-name span { margin-right: 6px; font: 500 11px/1 var(--mono); color: #a99bb6; }
.vs { position: absolute; top: calc(50% - 16px); left: 50%; z-index: 3; display: grid; place-items: center; width: 40px; height: 40px; transform: translate(-50%, -50%);
  border: 1px solid rgba(200, 180, 216, .5); border-radius: 50%; background: rgba(12, 10, 14, .85); font: 500 11px/1 var(--mono); color: #e6dbee; }
.vote-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vote-button { min-height: 44px; border: 1px solid rgba(174, 156, 190, .35); border-radius: 999px; font-size: 14px; color: #ddd0e8; background: rgba(12, 10, 14, .5); transition: background .2s, border-color .2s; }
.vote-button:hover:not(:disabled) { background: rgba(140, 116, 150, .25); border-color: #c8b4d8; }
.vote-button.selected { background: rgba(140, 116, 150, .35); border-color: #e6dbee; color: #fff; opacity: 1; }
.vote-result { font: 400 12px/1.4 var(--mono); color: #ddd0e8; }
.vote-bar { position: relative; height: 6px; border-radius: 6px; background: rgba(174, 156, 190, .2); overflow: hidden; }
.vote-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: linear-gradient(90deg, #8c7496, #eadff2); }

/* ── This week's challenge: the theme in gold, its idea, the days left, the way in ── */
.challenge { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; padding: 34px 38px; border-radius: 26px;
  border: 1px solid var(--line-2); background: radial-gradient(70% 140% at 0% 0%, rgba(212, 165, 116, .12), transparent 60%), var(--panel); overflow: hidden; }
.ch-main, .ch-side { position: relative; z-index: 1; }
.ch-main { display: grid; gap: 8px; }
.ch-main small { font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.ch-main b { font: 200 clamp(48px, 6vw, 92px)/.95 var(--sans); letter-spacing: -.035em; padding-bottom: .06em;
  background: linear-gradient(180deg, #f6e2bf, #c99a62); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ch-main > span { font-size: 17px; color: var(--muted); }
.ch-side { display: grid; justify-items: end; gap: 10px; text-align: right; font: 400 12px/1.4 var(--mono); letter-spacing: .08em; color: var(--text); }
.ch-side .btn { margin-top: 6px; font: 400 15px/1 var(--sans); letter-spacing: 0; }

/* ── The feed ── */
.obs-feed { padding-top: 48px; padding-bottom: 24px; }
.feed-tabs { display: flex; flex-wrap: wrap; gap: 6px; width: fit-content; max-width: 100%; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: rgba(10, 8, 6, .6); }
.feed-tabs a { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border-radius: 999px; font-size: 14px; color: var(--muted); transition: color .3s, background .3s; white-space: nowrap; }
.feed-tabs a:hover { color: var(--cream); }
.feed-tabs a[aria-current="page"] { color: #1b130c; background: linear-gradient(180deg, #f3dcb6, #d7ad78); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips a { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; font: 400 12px/1 var(--mono); letter-spacing: .04em; color: var(--muted); transition: color .3s, border-color .3s; }
.chips a:hover { color: var(--cream); border-color: var(--line-2); }
.chips a[aria-current="page"] { color: var(--gold); border-color: var(--gold); }
.grid { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 18px; }
.card { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); overflow: hidden; transition: border-color .4s, transform .5s var(--ease), box-shadow .5s; }
.card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.card-art { position: relative; display: block; aspect-ratio: 4 / 3; background: #000; border-bottom: 1px solid var(--line); overflow: hidden; }
.card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-open { position: absolute; inset: 0; z-index: 3; }
.card-fallback { position: absolute; inset: 0; display: none; place-items: center; font: 200 64px/1 var(--sans); color: rgba(232, 200, 154, .5); background: radial-gradient(120% 90% at 30% 20%, #2a1d14, #070504); }
.card-art.no-thumb img { display: none; }
.card-art.no-thumb .card-fallback { display: grid; }
.card-tags { position: absolute; left: 12px; top: 12px; z-index: 4; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.art-category { padding: 5px 8px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; background: rgba(5, 4, 3, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 500 10px/1 var(--mono); letter-spacing: .04em; color: #e6dccd; }
.bookmark { position: absolute; right: 10px; top: 10px; z-index: 5; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%;
  background: rgba(5, 4, 3, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #e6dccd; transition: background .3s, border-color .3s, color .3s; }
.bookmark .icon { width: 15px; height: 15px; }
.bookmark:hover { border-color: var(--gold); }
.bookmark[aria-pressed="true"] { color: #1b130c; background: linear-gradient(180deg, #f3dcb6, #d7ad78); border-color: transparent; }
.bookmark[aria-pressed="true"] .icon { fill: currentColor; }
.card-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; padding: 14px 16px 16px; }
.card-title { font: 400 17px/1.25 var(--sans); color: var(--cream); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-title:hover { color: var(--gold); }
.card .who, .card .card-status, .card .card-actions { grid-column: 1 / -1; }
.card-status { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-tag { padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 999px; font: 500 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ob-tag-warn { border-color: rgba(255, 138, 115, .5); color: var(--bad); }
.card-actions { display: flex; gap: 16px; }
.card-actions a, .card-actions button { padding: 0; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.card-actions button { color: var(--bad); }
/* the card to publish: the featured work blurred far behind, and a gold plus on dark glass */
.card.add { border-style: dashed; border-color: rgba(232, 200, 154, .4); background: rgba(16, 12, 9, .45); }
.card.add:hover { border-color: var(--gold); }
.add-art { display: grid; place-items: center; overflow: hidden; background: #050403; border-bottom-style: dashed; }
.add-glow { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(22px) saturate(1.15); opacity: .5; transform: scale(1.05); transition: opacity .6s var(--ease), transform 1.2s var(--ease); }
.add-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(55% 60% at 50% 50%, rgba(5, 4, 3, .2), rgba(5, 4, 3, .78)); }
.card.add:hover .add-glow { opacity: .72; transform: scale(1.12); }
.plus, .see-more-arrow { position: relative; z-index: 1; width: 80px; height: 80px; border-radius: 50%; border: 1px solid rgba(232, 200, 154, .5); background: rgba(8, 6, 5, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 10px 40px rgba(0, 0, 0, .5); transition: transform .5s var(--ease), border-color .4s, box-shadow .4s, background .4s; }
.plus::before, .plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 28px; height: 2px; margin: -1px 0 0 -14px; border-radius: 2px; background: var(--gold); }
.plus::after { transform: rotate(90deg); }
.card.add:hover .plus { transform: scale(1.08) rotate(90deg); border-color: var(--gold); background: rgba(20, 14, 9, .6); box-shadow: 0 0 44px rgba(232, 200, 154, .4); }
.card.add .card-meta, .card.see-more .card-meta { grid-template-columns: 1fr; gap: 6px; }
.add-line { font-size: 13.5px; color: var(--muted); }
/* the card for the next works: the next thumbnails in a mosaic, darkened, behind a gold arrow */
.see-more-art { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; overflow: hidden; background: #050403; }
.see-more-art img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.see-more-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 65% at 50% 50%, rgba(5, 4, 3, .5), rgba(5, 4, 3, .86)); transition: opacity .6s var(--ease); }
.card.see-more:hover .see-more-art::after { opacity: .6; }
.see-more-arrow { position: absolute; left: 50%; top: 50%; margin: -40px 0 0 -40px; }
.see-more-arrow::before { content: ''; position: absolute; left: 26px; top: 39px; width: 28px; height: 2px; border-radius: 2px; background: var(--gold); }
.see-more-arrow::after { content: ''; position: absolute; left: 38px; top: 32px; width: 14px; height: 14px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); border-radius: 0 2px 0 0; transform: rotate(45deg); }
.card.see-more:hover .see-more-arrow { transform: translateX(6px) scale(1.06); border-color: var(--gold); background: rgba(20, 14, 9, .6); box-shadow: 0 0 44px rgba(232, 200, 154, .4); }
.see-more-btn { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; }
.empty { grid-column: 1 / -1; display: grid; place-items: center; gap: 10px; min-height: 200px; padding: 24px; border: 1px dashed var(--line-2); border-radius: 20px; text-align: center; color: var(--muted); background: rgba(10, 8, 6, .5); }
.empty .icon { width: 26px; height: 26px; color: var(--gold); }

/* ── Academy and the traveler's page, after the feed ── */
.bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 56px; }
.end-card { position: relative; display: grid; gap: 10px; align-content: start; padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); overflow: hidden; }
.end-card h3 { max-width: 18ch; font: 300 clamp(26px, 2.4vw, 34px)/1.15 var(--sans); letter-spacing: -.02em; color: var(--cream); }
.end-card p { max-width: 40ch; color: var(--muted); }
.end-card .btn { justify-self: start; margin-top: 8px; }
.code-decoration { position: absolute; right: 28px; top: 26px; font: 92px/1 var(--mono); letter-spacing: -15px; color: rgba(232, 200, 154, .1); pointer-events: none; }

/* ── A work ── */
.piece-page { padding-block: 32px 72px; }
.piece-page .ob-back { margin-bottom: 22px; }
.piece-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.ob-stage { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: 24px; background: #000; overflow: hidden; box-shadow: 0 50px 120px rgba(0, 0, 0, .55); }
.ob-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.ob-stage .ob-pill { position: absolute; z-index: 4; top: 14px; left: 14px; }
.ob-stage-bar { position: absolute; left: 14px; bottom: 14px; z-index: 4; display: flex; gap: 6px; }
.ob-icon { min-height: 32px; padding: 0 12px; border: 1px solid rgba(232, 200, 154, .3); border-radius: 999px; background: rgba(8, 6, 4, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cream); }
.ob-stage-state { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; gap: 14px; padding: 24px; text-align: center; background: rgba(5, 4, 3, .8); }
.ob-stage-state[hidden] { display: none; }
.ob-stage-state p { max-width: 36ch; color: var(--cream); }
.piece-side { display: grid; gap: 18px; align-content: start; }
.week-pill { width: fit-content; padding: 7px 12px; border: 1px solid var(--line-2); border-radius: 999px; font: 500 11px/1 var(--mono); letter-spacing: .08em; color: var(--gold); }
.piece-title { font: 400 clamp(34px, 3.6vw, 54px)/1.02 var(--sans); letter-spacing: -.025em; color: var(--cream); overflow-wrap: anywhere; }
.piece-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ob-facts { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.ob-facts dt { font: 500 10.5px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.ob-facts dd { display: grid; gap: 2px; margin-top: 4px; color: var(--muted); font-size: 14px; }
.ob-facts dd b { font-weight: 400; color: var(--cream); }
.code-panel { margin-top: 40px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel); overflow: hidden; }
/* Code in the lessons' own format (academy-site/clase.css · .ed): the head with its three dots, JetBrains Mono at 13.5 px
   on 1.75, the sand text and the same highlight colors (code.js). */
.code-head { display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 24px; border-bottom: 1px solid var(--line); font: 400 11px/1 var(--mono); color: var(--quiet); }
.code-head .dots { display: inline-flex; gap: 6px; }
.code-head .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(239, 230, 216, .16); }
.ob-code-format { margin-left: auto; }
.ob-code { margin: 0; max-height: 560px; overflow: auto; padding: 24px; font: 400 13.5px/1.75 var(--mono); color: #c7b8a5; tab-size: 2; white-space: pre; }
.ob-code-license { font-style: italic; color: rgba(239, 230, 216, .35); }
.ob-code i, .ob-ed-hl i { font-style: normal; }
.ob-code .kw, .ob-ed-hl .kw { color: var(--gold); } .ob-code .fn, .ob-ed-hl .fn { color: var(--cream); } .ob-code .bi, .ob-ed-hl .bi { color: #a99780; }
.ob-code .nu, .ob-ed-hl .nu { color: #e9b98a; } .ob-code .cm, .ob-ed-hl .cm { font-style: italic; color: rgba(239, 230, 216, .35); }

/* ── Create ── */
.create { padding-block: 32px 72px; }
/* a page's eyebrow and way back, in one line (crumb) */
.ob-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.ob-crumb .ob-back { transition: color .25s; }
.ob-crumb .ob-back:hover { color: var(--cream); }
.ob-crumb-sep { color: var(--quiet); }
.create-h { margin-top: 10px; font: 300 clamp(40px, 5vw, 72px)/1.02 var(--sans); letter-spacing: -.025em; color: var(--cream); }
.ob-editor { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 32px); align-items: start; margin-top: 28px; }
.ob-editor-code { display: grid; gap: 12px; }
/* The editor as the lesson's sandbox: the highlight drawn under a transparent textarea, the caret and selection in gold. */
.ob-ed { position: relative; min-height: min(62vh, 640px); border: 1px solid var(--line-2); border-radius: 24px; background: rgba(5, 4, 3, .82); overflow: hidden; }
.ob-ed:focus-within { border-color: var(--gold); }
.ob-ed-hl, .ob-textarea { position: absolute; inset: 0; margin: 0; padding: 24px; border: 0; font: 400 13.5px/1.75 var(--mono); tab-size: 2; white-space: pre; overflow: auto; }
.ob-ed-hl { color: #c7b8a5; pointer-events: none; }
.ob-textarea { width: 100%; height: 100%; resize: none; background: transparent; color: transparent; caret-color: var(--gold); outline: none; }
.ob-textarea::selection { background: rgba(232, 200, 154, .25); color: transparent; }
@media (max-width: 760px) { .ob-ed-hl, .ob-textarea, .ob-code { font-size: 12px; padding: 16px; } }
.ob-compile { font: 400 12px/1.5 var(--mono); }
.ob-compile ul { margin-top: 6px; padding-left: 18px; color: var(--muted); }
.ob-compile b { color: var(--bad); font-weight: 500; }
.ob-ok { color: var(--ok); }
.ob-bad { color: var(--bad); }
.ob-editor-side { display: grid; gap: 16px; }
.ob-editor-side .ob-stage { box-shadow: none; }
.ob-field { display: grid; gap: 8px; }
.ob-field > span { font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ob-field-inline { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.ob-field input, .ob-field select, .ob-field textarea { width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(5, 4, 3, .7); color: var(--cream); }
.ob-field select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.ob-field input:focus, .ob-field select:focus, .ob-field textarea:focus { border-color: var(--gold); outline: none; }
.check { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--cream); cursor: pointer; }
.check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: #e8c89a; }
.check.reto { padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(212, 165, 116, .08); }
.ob-form-error { min-height: 1.4em; font-size: 14px; color: var(--bad); }
.ob-submit { width: 100%; }

/* ── A traveler's page, the collection, the traveler's own, the challenge ── */
.ob-head { padding-top: 48px; }
.ob-head h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 12px; font: 300 clamp(40px, 5.4vw, 76px)/1.02 var(--sans); letter-spacing: -.03em; color: var(--cream); }
.ob-head h1 em { font-style: normal; color: var(--gold); }
.ob-head p:not(.kicker, .ob-crumb) { margin-top: 12px; max-width: 56ch; color: var(--muted); font-size: 17px; }
.ob-head .feed-tabs { margin-top: 28px; }
.ob-head-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* ── Dialog, toast, footer ── */
/* margin auto centers it: the reset above takes the browser's own centering away */
.ob-dialog { width: min(460px, calc(100% - 32px)); margin: auto; padding: 0; border: 1px solid var(--line-2); border-radius: 24px; background: #0c0907; color: var(--text); box-shadow: 0 30px 150px #000b; }
.ob-dialog::backdrop { background: rgba(0, 0, 0, .65); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ob-dialog-in { display: grid; gap: 16px; padding: 26px; }
.ob-dialog h2 { font: 400 24px/1.2 var(--sans); color: var(--cream); }
.ob-reasons { display: grid; gap: 8px; padding: 0; border: 0; }
.ob-reasons label { display: flex; align-items: center; gap: 10px; color: var(--muted); cursor: pointer; }
.ob-reasons input { accent-color: var(--gold); }
.ob-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.ob-toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; max-width: calc(100% - 32px); padding: 12px 18px; border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(12, 9, 7, .95); font-size: 14px; color: var(--cream); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease); }
.ob-toast.on { opacity: 1; transform: translate(-50%, 0); }
.ob-foot { position: relative; z-index: 1; margin-top: 40px; border-top: 1px solid var(--line); }
.ob-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 26px 34px; font-size: 13px; color: var(--quiet); }
.ob-foot .motto { font: 500 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.ob-foot nav { display: flex; gap: 18px; }
.ob-foot a:hover { color: var(--cream); }

@media (max-width: 960px) {
  .wars, .piece-grid, .ob-editor, .challenge { grid-template-columns: minmax(0, 1fr); }
  .ch-side { justify-items: start; text-align: left; }
}
@media (max-width: 760px) {
  .house-bar { gap: 14px; }
  .bottom-grid { grid-template-columns: minmax(0, 1fr); }
  .wars, .challenge { padding: 24px 22px; }
  .ohero { min-height: 78svh; }
  .feed-tabs { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .kicker.live i { animation: none; }
  .card, .card:hover, .btn, .btn-gold:hover { transition: none; transform: none; }
  .ob-toast { transition: none; }
}

/* ── A mainImage work's texture channels: four tiles under the code, each opening WoGL's textures ── */
.ob-channels { display: grid; gap: 10px; margin-top: 16px; }
.ob-channels[hidden] { display: none; }
.ob-channels-label { font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ob-ch-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ob-ch { display: grid; justify-items: start; gap: 6px; min-width: 0; padding: 8px 8px 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(16, 12, 9, .6); text-align: left;
  transition: border-color .25s, background .25s; }
.ob-ch:hover { border-color: var(--line-2); background: rgba(232, 200, 154, .06); }
.ob-ch small { font: 500 10px/1 var(--mono); letter-spacing: .08em; color: var(--gold); }
.ob-ch b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 400; color: var(--cream); }
.ob-ch.is-empty b { color: var(--quiet); }
.ob-ch-art { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 9px; background: repeating-linear-gradient(45deg, rgba(232, 200, 154, .06) 0 6px, transparent 6px 12px);
  box-shadow: inset 0 0 0 1px rgba(232, 200, 154, .14); }
.ob-ch-art canvas { display: block; width: 100%; height: 100%; }
.ob-dialog:has(.ob-tex-grid) { width: min(560px, calc(100% - 32px)); }
.ob-tex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 16px 0 6px; }
.ob-tex { display: grid; gap: 6px; padding: 6px 6px 8px; border: 1px solid var(--line); border-radius: 14px; background: rgba(16, 12, 9, .6); color: var(--cream); font-size: 13px; text-align: left;
  transition: border-color .25s; }
.ob-tex:hover { border-color: var(--line-2); }
.ob-tex.on { border-color: var(--gold); background: rgba(232, 200, 154, .1); }
.ob-fact-channels { display: grid; gap: 6px; }
.ob-fact-channels span { display: inline-flex; align-items: center; gap: 8px; }
.ob-ch-dot { display: inline-block; flex: none; width: 22px; height: 22px; overflow: hidden; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(232, 200, 154, .2); }
.ob-ch-dot canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 520px) { .ob-ch-row { gap: 6px; } .ob-ch { padding: 6px 6px 8px; } .ob-ch b { font-size: 12px; } .ob-tex-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .ob-tex { font-size: 12px; } }