/* ════════════════════════════════════════════════════════════════════
   DIRECTION ★ — "SYNTHESIS" · monumental hero + playful chrome
   ════════════════════════════════════════════════════════════════════ */
.dir-synthesis {
  --disp: 'Oswald', 'Montserrat', sans-serif;
  --sans: 'Montserrat', system-ui, sans-serif;
  --serif: 'Alegreya', Georgia, serif;
  --pad: clamp(18px, 5vw, 78px);
  background:
    radial-gradient(1200px 560px at 82% -10%, var(--terra-soft), transparent 58%),
    radial-gradient(820px 460px at 2% 6%, var(--gold-soft), transparent 52%),
    var(--bg);
  color: var(--fg); font-family: var(--sans);
}
.dir-synthesis.density-compact { --pad: clamp(16px, 3.5vw, 54px); }

/* ── NAV (playful pill) ── */
/* Nav sits near the top now that the dev harness is hidden; taller + roomier so
   the brand, links, theme picker and action icons don't feel stacked. */
.syn-nav { padding: 18px var(--pad) 0; position:sticky; top:14px; z-index:40; }
.syn-nav__in {
  display:flex; align-items:center; gap:22px;
  background:color-mix(in srgb, var(--card) 86%, transparent); backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:999px; padding:13px 16px 13px 26px;
  box-shadow:0 10px 30px var(--shadow);
}
.syn-brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg); }
.syn-brand__mark { width:28px; height:28px; color:var(--fg); }
.syn-brand__wm { font-weight:800; font-size:19px; letter-spacing:-.01em; }
.syn-brand__wm span { color:var(--terra); }
.syn-nav__links { display:flex; align-items:center; gap:9px; margin-left:8px; flex:1; }
.syn-nav__lnk { font-size:13.5px; font-weight:600; color:var(--fg-70); text-decoration:none; padding:8px 14px; border-radius:999px; transition:.16s; }
.syn-nav__lnk:hover { background:var(--sink); color:var(--fg); }
.syn-nav__lnk.active { background:var(--terra-soft); color:var(--terra-dk); }
/* Agora link — distinct, glowing, with an icon */
.syn-nav__lnk--agora { display:inline-flex; align-items:center; gap:6px; color:var(--gold); background:var(--gold-soft); border:1px solid color-mix(in srgb,var(--gold) 32%, transparent); box-shadow:0 0 10px color-mix(in srgb,var(--gold) 26%, transparent); }
.syn-nav__lnk--agora.active { color:var(--gold); }
.syn-nav__ico { width:15px; height:15px; display:inline-block; color:currentColor; } .syn-nav__ico svg { width:100%; height:100%; display:block; }
@media (prefers-reduced-motion: no-preference){ .syn-nav__lnk--agora { animation: syn-agora-glow 2.6s ease-in-out infinite; } }
@keyframes syn-agora-glow {
  0%,100% { box-shadow: 0 0 0 1px color-mix(in srgb,var(--gold) 26%, transparent), 0 0 5px color-mix(in srgb,var(--gold) 18%, transparent); }
  50%     { box-shadow: 0 0 0 1px color-mix(in srgb,var(--gold) 55%, transparent), 0 0 14px color-mix(in srgb,var(--gold) 46%, transparent); }
}
/* Promo panel — reverse coloring so it stands out from the showcase beside it */
.syn-classes__showw .syn-promo { background:linear-gradient(155deg, var(--terra-dk), var(--terra)); border-color:transparent; color:#fff; box-shadow:0 14px 34px color-mix(in srgb,var(--terra) 30%, transparent); }
.syn-classes__showw .syn-promo .syn-promo__kick { color:color-mix(in srgb,#fff 82%, transparent); }
.syn-classes__showw .syn-promo .syn-promo__ttl,
.syn-classes__showw .syn-promo .syn-promo__desc { color:#fff; }
.syn-classes__showw .syn-promo .syn-promo__artillu { color:#fff; }
.syn-classes__showw .syn-promo .syn-promo__cta { background:#fff; color:var(--terra-dk); }
.syn-classes__showw .syn-promo .syn-promo__cta:hover { background:color-mix(in srgb,#fff 88%, var(--gold)); }
.syn-classes__showw .syn-promo .syn-promo__dot { background:color-mix(in srgb,#fff 38%, transparent); }
.syn-classes__showw .syn-promo .syn-promo__dot.on { background:#fff; }
.syn-nav__act { display:flex; align-items:center; gap:13px; }

/* ── Theme / colours picker in the nav (next to Ἀγορά) ── */
.syn-theme { position:relative; display:inline-flex; }
.syn-theme__btn { display:inline-flex; align-items:center; gap:6px; background:var(--sink); border:1px solid var(--line); border-radius:999px; padding:6px 10px; cursor:pointer; color:var(--fg); transition:.16s; }
.syn-theme__btn:hover { border-color:var(--terra); }
.syn-theme__sw { width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); }
.syn-theme__cv { font-size:10px; opacity:.6; }
.syn-theme__menu { position:absolute; top:calc(100% + 10px); right:0; width:300px; max-height:70vh; overflow-y:auto; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 50px var(--shadow); padding:12px; display:none; z-index:60; }
.syn-theme.open .syn-theme__menu { display:block; }
.syn-theme__sec { font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-50); margin:10px 2px 6px; }
.syn-theme__sec:first-child { margin-top:2px; }
.syn-theme__grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.syn-theme__opt { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:10px; border:1px solid transparent; background:var(--sink); cursor:pointer; color:var(--fg); text-align:left; font-family:inherit; }
.syn-theme__opt:hover { border-color:var(--line-bold); }
.syn-theme__opt.on { border-color:var(--terra); background:var(--terra-soft); }
.syn-theme__optsw { width:20px; height:20px; flex:none; border-radius:6px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); }
.syn-theme__optnm { font-size:11.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.syn-theme__lang { display:flex; gap:6px; }
.syn-theme__lang button { flex:1; padding:7px 0; border-radius:9px; border:1px solid var(--line); background:var(--sink); color:var(--fg-70); font-weight:700; font-size:12px; cursor:pointer; letter-spacing:.06em; }
.syn-theme__lang button.on { border-color:var(--terra); background:var(--terra-soft); color:var(--terra-dk); }
@media (max-width: 880px){ .syn-theme__menu { right:auto; left:0; } }
.syn-live { display:inline-flex; align-items:center; gap:6px; background:var(--gold-soft); color:var(--gold); border:0; font-family:var(--sans); font-weight:700; font-size:13px; padding:9px 15px; border-radius:999px; cursor:pointer; }
.syn-btn { font-family:var(--sans); font-weight:700; font-size:13.5px; padding:10px 18px; border-radius:999px; cursor:pointer; border:0; transition:.16s; }
.syn-btn--ghost { background:transparent; color:var(--fg); }
.syn-btn--ghost:hover { background:var(--sink); }
.syn-btn--solid { background:var(--terra-dk); color:#fff; box-shadow:0 6px 18px var(--terra-soft); }
.syn-btn--solid:hover { transform:translateY(-1px); }
/* cluster is transparent on desktop (children sit directly in the bar); becomes a drawer on mobile */
.syn-nav__cluster { display:contents; }
.syn-burger { display:none; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:44px; height:44px; margin-left:auto; padding:0; border:1px solid var(--line); border-radius:13px; background:var(--sink); cursor:pointer; flex:none; }
.syn-burger:hover { border-color:var(--terra); }
.syn-burger__b { display:block; width:18px; height:2px; background:var(--fg); border-radius:2px; transition:transform .22s ease, opacity .18s ease; }
.syn-nav.is-open .syn-burger__b:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.syn-nav.is-open .syn-burger__b:nth-child(2){ opacity:0; }
.syn-nav.is-open .syn-burger__b:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ── HERO (monumental + playful CTAs) ── */
.syn-hero { position:relative; display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(28px,5vw,68px); align-items:stretch; padding:clamp(40px,6vw,82px) var(--pad) clamp(30px,4vw,52px); }
.syn-hero__l, .syn-hero__r { position:relative; z-index:1; }
/* ancient-greek meander frame — runs the FULL height down each outer edge,
   wrapping the page περιφεριακά like a border */
.syn-hero__deco { position:absolute; top:0; bottom:0; height:auto; transform:none; display:flex; opacity:.26; pointer-events:none; z-index:0; }
.syn-hero__deco--l { left:0; }
.syn-hero__deco--r { right:0; }
.syn-mdr { width:26px; height:100%;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='60'%20viewBox='0%200%2040%2060'%20fill='none'%20stroke='%23C9A44A'%20stroke-width='2'%3E%3Cpath%20d='M0%2050L0%2014L30%2014L30%2038L14%2038L14%2026L22%2026L22%2032'/%3E%3Cline%20x1='0'%20y1='54'%20x2='40'%20y2='54'%20stroke-width='1.4'/%3E%3Cline%20x1='0'%20y1='10'%20x2='40'%20y2='10'%20stroke-width='1.4'/%3E%3C/svg%3E") repeat-y left top/100% auto;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent); }
.syn-hero__deco--r .syn-mdr { transform:scaleX(-1); }
.orn-subtle .syn-hero__deco { display:none; }
.syn-hero__ix { display:flex; align-items:center; gap:11px; font-family:var(--disp); font-weight:500; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:20px; }
.syn-hero__no { color:var(--terra); } .syn-hero__sl { color:var(--line-bold); }
.syn-hero__h1 { font-family:var(--disp); font-weight:600; font-size:clamp(46px,7.2vw,92px); line-height:.93; letter-spacing:.005em; text-transform:uppercase; margin:0 0 24px; }
.syn-line { display:block; overflow:hidden; }
.syn-word { display:inline-block; }
.syn-word.accent { color:var(--terra); }
.syn-hero__lede { font-family:var(--serif); font-size:clamp(16px,1.5vw,20px); line-height:1.55; color:var(--fg-70); max-width:30em; margin:0 0 28px; }
.syn-hero__cta { display:flex; gap:13px; flex-wrap:wrap; }
.syn-cta { font-family:var(--sans); font-weight:700; font-size:15px; cursor:pointer; display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:999px; border:0; }
.syn-cta--solid { background:var(--terra-dk); color:#fff; box-shadow:0 10px 28px var(--terra-soft); will-change:transform; }
.syn-cta--solid:hover { box-shadow:0 16px 36px var(--terra-soft); }
.syn-cta__ar { transition:transform .18s; } .syn-cta--solid:hover .syn-cta__ar { transform:translateX(4px); }
.syn-cta--ghost { background:var(--card); color:var(--fg); border:1.5px solid var(--line-bold); }
.syn-cta--ghost:hover { border-color:var(--terra); color:var(--terra-dk); }
.syn-cta__play { font-size:11px; }
.syn-hero__strip { grid-column:1 / -1; display:flex; flex-wrap:nowrap; gap:8px; margin-top:10px; padding-top:20px; border-top:1px solid var(--line); overflow-x:auto; scrollbar-width:thin; }
.syn-hero__strip .syn-chiplet { flex:none; }
.syn-chiplet { font-family:var(--disp); font-weight:400; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); padding:5px 12px; border-radius:999px; }

/* spec card */
.syn-hero__r { position:relative; display:flex; align-items:stretch; justify-content:center; }
.syn-spec { position:relative; width:min(100%,420px); height:100%; min-height:460px; background:var(--raise); border:1px solid var(--line-bold); border-radius:22px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; padding:30px; overflow:hidden; }
.syn-spec__glow { position:absolute; width:70%; height:50%; top:6%; background:radial-gradient(circle, var(--terra-soft), transparent 70%); filter:blur(10px); }
.syn-spec__illu { width:46%; color:color-mix(in srgb,var(--fg) 84%,var(--terra)); position:relative; z-index:1; }
.syn-spec__illu svg { width:100%; height:100%; }
.syn-spec__t { position:absolute; width:12px; height:12px; border:2px solid var(--terra); z-index:2; }
.syn-spec__t--tl{ top:12px; left:12px; border-right:0; border-bottom:0; } .syn-spec__t--tr{ top:12px; right:12px; border-left:0; border-bottom:0; }
.syn-spec__t--bl{ bottom:12px; left:12px; border-right:0; border-top:0; } .syn-spec__t--br{ bottom:12px; right:12px; border-left:0; border-top:0; }
.syn-spec__rows { width:100%; display:flex; flex-direction:column; gap:10px; position:relative; z-index:1; }
.syn-spec__row { display:flex; align-items:center; gap:10px; font-family:var(--disp); }
.syn-spec__k { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.syn-spec__dot { flex:1; height:1px; background:var(--line); }
.syn-spec__v { font-size:13px; letter-spacing:.04em; color:var(--fg); }
.syn-rail { position:absolute; right:-12px; top:50%; transform:translateY(-50%) rotate(90deg); transform-origin:right center; width:188px; height:30px; opacity:.5;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='60'%20viewBox='0%200%2040%2060'%20fill='none'%20stroke='%23C9A44A'%20stroke-width='2'%3E%3Cpath%20d='M0%2050L0%2014L30%2014L30%2038L14%2038L14%2026L22%2026L22%2032'/%3E%3Cline%20x1='0'%20y1='54'%20x2='40'%20y2='54'%20stroke-width='1.4'/%3E%3Cline%20x1='0'%20y1='10'%20x2='40'%20y2='10'%20stroke-width='1.4'/%3E%3C/svg%3E") repeat-x left center/auto 100%; }
.orn-subtle .syn-rail, .orn-subtle .syn-spec__t, .orn-subtle .syn-join__rail, .orn-subtle .syn-foot__rule { display:none; }
/* equipped profile seal, perched standing on top of the spec card — changes with the user's avatar */
.syn-spec__owl { position:absolute; top:0; left:50%; width:74px; height:74px; transform:translate(-50%,-80%); color:var(--terra); z-index:4; padding:0; border:0; background:none; cursor:pointer; filter:drop-shadow(0 7px 11px rgba(0,0,0,.4)); transition:transform .2s ease, color .2s ease; }
.syn-spec__owl:hover { transform:translate(-50%,-86%) scale(1.06); color:var(--terra-bright, var(--terra)); }
.syn-spec__owl svg { width:100%; height:100%; display:block; }

/* ── CLASS CHIPS ── */
.syn-classes { padding:8px var(--pad) clamp(8px,2vw,16px); }
.syn-classes__lbl { display:flex; align-items:center; gap:13px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.syn-classes__ln { width:40px; height:2px; background:var(--terra); }
.syn-classes__row { display:flex; flex-wrap:wrap; gap:11px; }
.syn-chip { display:inline-flex; align-items:center; gap:10px; padding:9px 18px 9px 9px; border-radius:999px; border:2px solid var(--ca-mid); background:var(--card); cursor:pointer; font-family:var(--sans); color:var(--fg); transition:transform .16s, box-shadow .16s, background .16s; }
.syn-chip:hover { transform:translateY(-2px); box-shadow:0 8px 20px var(--shadow); }
.syn-chip__rom { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--ca-soft); color:var(--ca-ink); font-family:var(--disp); font-weight:600; font-size:13px; }
.syn-chip__nm { font-weight:700; font-size:14px; }
.syn-chip.active { background:var(--ca); border-color:var(--ca); box-shadow:0 10px 24px var(--ca-mid); }
.syn-chip.active .syn-chip__rom { background:rgba(255,255,255,.25); color:#fff; }
.syn-chip.active .syn-chip__nm { color:#fff; }

/* grouped chips — three side-by-side columns w/ dividers BETWEEN them */
.syn-classes__lbl { margin-bottom:16px; }

/* section header — kicker + subtitle on the left, catalogue stats on the right */
.syn-classes__head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:20px; }
.syn-classes__lead { max-width:46ch; }
.syn-classes__lead .syn-classes__lbl { margin-bottom:9px; }
.syn-classes__hint { margin:0; font-family:var(--serif); font-size:15px; line-height:1.5; color:var(--fg-70); text-wrap:pretty; }
.syn-classes__stats { display:flex; align-items:center; gap:clamp(12px,1.6vw,20px); flex:none; }
.syn-cstat { display:flex; flex-direction:column; gap:2px; }
.syn-cstat__v { font-family:var(--disp); font-weight:600; font-size:clamp(22px,2.6vw,30px); line-height:1; color:var(--terra-dk); letter-spacing:.01em; }
.syn-cstat__l { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.syn-cstat__div { width:1px; height:34px; background:var(--line); }
@media (max-width:600px){
  .syn-classes__head { align-items:flex-start; }
  .syn-classes__stats { gap:14px; }
  .syn-cstat__v { font-size:22px; }
}

.syn-cgroups { display:flex; align-items:stretch; justify-content:flex-start; gap:clamp(18px,2.4vw,30px); }
.syn-cgroup { display:flex; flex-direction:column; gap:9px; }
.syn-cdiv { flex:none; width:1px; align-self:stretch; background:var(--line); }
.syn-cgroup__h { font-family:var(--disp); font-weight:600; font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--terra); margin-bottom:3px; }
.syn-cgroup .syn-classes__row { display:flex; flex-direction:column; flex-wrap:nowrap; align-items:flex-start; gap:8px; }
.syn-cgroup .syn-chip { width:auto; justify-content:flex-start; padding:6px 14px 6px 6px; gap:9px; }
.syn-cgroup .syn-chip__rom { width:24px; height:24px; font-size:12px; }
.syn-cgroup .syn-chip__nm { white-space:nowrap; font-size:13px; }
.syn-chip__rom--gl { padding:4px; } .syn-chip__rom--gl svg { width:100%; height:100%; }

/* "Build your own class" — fills the gap right of the grammar column, feels rewarding */
.syn-cadd { flex:1 1 auto; align-self:stretch; min-width:230px; display:flex; align-items:center; gap:18px; text-align:left;
  padding:20px 24px; border-radius:18px; cursor:pointer;
  background:linear-gradient(135deg, color-mix(in oklab, var(--terra) 16%, var(--raise)), var(--raise));
  border:1.5px dashed color-mix(in oklab, var(--terra) 55%, var(--line-bold));
  transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease, background .22s ease; }
.syn-cadd:hover { transform:translateY(-3px); border-color:var(--terra);
  background:linear-gradient(135deg, color-mix(in oklab, var(--terra) 26%, var(--raise)), var(--raise));
  box-shadow:0 16px 34px color-mix(in oklab, var(--terra) 26%, transparent); }
.syn-cadd__plus { flex:none; width:48px; height:48px; display:grid; place-items:center; border-radius:14px;
  font-family:var(--disp); font-size:30px; font-weight:300; line-height:1; color:#fff;
  background:var(--terra); box-shadow:0 8px 18px color-mix(in oklab, var(--terra) 45%, transparent); }
.syn-cadd__tx { display:flex; flex-direction:column; gap:4px; flex:1; }
.syn-cadd__h { font-family:var(--disp); font-weight:600; font-size:17px; color:var(--ink); letter-spacing:.01em; }
.syn-cadd__s { font-size:13px; line-height:1.45; color:var(--muted); }
.syn-cadd__cta { flex:none; align-self:center; font-family:var(--disp); font-weight:600; font-size:13px; letter-spacing:.04em;
  color:var(--terra); padding:8px 16px; border-radius:999px; border:1.5px solid color-mix(in oklab, var(--terra) 45%, transparent);
  transition:background .18s ease, color .18s ease; }
.syn-cadd:hover .syn-cadd__cta { background:var(--terra); color:#fff; border-color:var(--terra); }
@media (max-width:720px){
  .syn-cgroups { flex-direction:column; align-items:stretch; justify-content:flex-start; gap:4px; }
  .syn-cdiv { display:none; }
  .syn-cgroup .syn-classes__row { flex-direction:row; flex-wrap:wrap; }
}

/* ── SUBJECT BLOCKS (rounded card + module header) ── */
.syn-subjects { padding:clamp(20px,3vw,34px) var(--pad) 8px; display:flex; flex-direction:column; gap:clamp(22px,3vw,38px); }
.syn-subj { background:var(--card); border:1px solid var(--line); border-radius:24px; padding:clamp(18px,2.5vw,28px); box-shadow:0 10px 30px var(--shadow); }
.syn-subj__hd { display:flex; align-items:center; gap:15px; padding-bottom:16px; margin-bottom:18px; border-bottom:2px solid var(--ca); }
.syn-subj__no { font-family:var(--disp); font-weight:600; font-size:26px; color:var(--ca); line-height:1; }
.syn-subj__badge { display:grid; place-items:center; width:54px; height:54px; flex:none; border-radius:16px; background:var(--ca-soft); color:var(--ca-ink); }
.syn-subj__illu { width:34px; height:34px; } .syn-subj__illu svg{ width:100%; height:100%; }
.syn-subj__tx { flex:1; min-width:0; }
.syn-subj__ttl { font-family:var(--disp); font-weight:600; font-size:clamp(22px,2.6vw,30px); letter-spacing:.02em; text-transform:uppercase; margin:0 0 2px; }
.syn-subj__sum { font-family:var(--serif); font-size:15px; color:var(--fg-70); margin:0; }
.syn-subj__all { display:inline-flex; align-items:center; gap:9px; flex:none; text-decoration:none; font-weight:700; font-size:13px; color:var(--ca-ink); background:var(--ca-soft); padding:9px 9px 9px 16px; border-radius:999px; white-space:nowrap; }
.syn-subj__all:hover { background:var(--ca-mid); }
.syn-subj__cnt { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--ca); color:#fff; font-size:12px; }
.syn-subj__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:13px; }

.syn-tile { position:relative; display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--line); border-radius:18px; overflow:hidden; text-decoration:none; color:var(--fg); transition:transform .16s, box-shadow .16s, border-color .16s; }
.syn-tile:hover { transform:translateY(-4px); box-shadow:0 16px 32px var(--shadow); border-color:var(--ca-mid); }
.syn-tile__ban { display:grid; place-items:center; height:96px; background:var(--ca-tint); position:relative; overflow:hidden; }
.syn-tile__ban::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 20%, var(--ca-soft), transparent 60%); }
.syn-tile__illu { width:54px; height:54px; color:var(--ca-ink); position:relative; z-index:1; } .syn-tile__illu svg{ width:100%; height:100%; }
.syn-tile__body { padding:13px 14px 14px; display:flex; flex-direction:column; gap:4px; }
.syn-tile__nm { font-weight:700; font-size:15px; line-height:1.15; }
.syn-tile__mt { font-size:11px; font-weight:600; letter-spacing:.03em; color:var(--muted); text-transform:uppercase; }
.syn-tile__play { position:absolute; right:11px; top:84px; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--ca); color:#fff; font-size:11px; padding-left:2px; box-shadow:0 6px 14px var(--ca-mid); transform:scale(.85); opacity:0; transition:.18s; }
.syn-tile:hover .syn-tile__play { transform:scale(1); opacity:1; }

/* ── ENGINES ── */
.syn-engines { padding:clamp(28px,4vw,50px) 0 clamp(18px,3vw,28px); }
.syn-engines__hd { padding:0 var(--pad); margin-bottom:16px; }
.syn-engines__no { font-family:var(--disp); font-weight:600; font-size:18px; color:var(--terra); margin-right:8px; }
.syn-engines__ttl { display:inline; font-family:var(--disp); font-weight:600; font-size:clamp(24px,3vw,34px); letter-spacing:.02em; text-transform:uppercase; margin:0; }
.syn-engines__sub { font-family:var(--serif); font-size:16px; color:var(--fg-70); margin:5px 0 0; }
.syn-engines__scroll { display:flex; gap:14px; overflow-x:auto; padding:6px var(--pad) 18px; scroll-snap-type:x mandatory; scrollbar-width:thin; }
.syn-eng { scroll-snap-align:start; flex:0 0 198px; background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden; text-decoration:none; color:var(--fg); transition:transform .16s, box-shadow .16s; }
.syn-eng:hover { transform:translateY(-4px); box-shadow:0 16px 34px var(--shadow); }
.syn-eng__ban { display:grid; place-items:center; height:104px; background:var(--ca-tint); }
.syn-eng__illu { width:56px; height:56px; color:var(--ca-ink); } .syn-eng__illu svg{ width:100%; height:100%; }
.syn-eng__nm { display:block; font-weight:700; font-size:16px; padding:13px 15px 0; }
.syn-eng__mt { display:block; font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); padding:3px 15px 16px; }

/* ── JOIN ── */
.syn-join { padding:clamp(20px,3vw,30px) var(--pad) clamp(34px,5vw,54px); }
.syn-join__card { position:relative; display:flex; align-items:center; gap:20px; flex-wrap:wrap; background:linear-gradient(120deg, var(--terra-soft), var(--gold-soft)); border:1px solid var(--line); border-radius:26px; padding:clamp(22px,3vw,36px); overflow:hidden; }
.syn-join__rail { position:absolute; left:0; top:0; width:100%; height:20px; opacity:.3;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='60'%20viewBox='0%200%2040%2060'%20fill='none'%20stroke='%23C9A44A'%20stroke-width='2'%3E%3Cpath%20d='M0%2050L0%2014L30%2014L30%2038L14%2038L14%2026L22%2026L22%2032'/%3E%3Cline%20x1='0'%20y1='54'%20x2='40'%20y2='54'%20stroke-width='1.4'/%3E%3Cline%20x1='0'%20y1='10'%20x2='40'%20y2='10'%20stroke-width='1.4'/%3E%3C/svg%3E") repeat-x left center/auto 100%; }
.syn-join__bolt { font-size:40px; filter:saturate(1.3); }
.syn-join__tx { flex:1; min-width:200px; }
.syn-join__no { font-family:var(--disp); font-weight:500; font-size:11px; letter-spacing:.2em; color:var(--terra-dk); margin-bottom:6px; }
.syn-join__ttl { font-family:var(--disp); font-weight:600; font-size:clamp(24px,2.8vw,34px); letter-spacing:.02em; text-transform:uppercase; }
.syn-join__sub { font-family:var(--serif); font-size:15px; color:var(--fg-70); margin:4px 0 0; }
.syn-join__form { display:flex; gap:10px; }
.syn-join__pin { font-family:var(--sans); font-weight:800; letter-spacing:.22em; font-size:17px; text-align:center; text-transform:uppercase; width:168px; padding:13px 14px; border:2px solid var(--line-bold); border-radius:14px; background:var(--card); color:var(--fg); }
.syn-join__pin:focus { outline:none; border-color:var(--terra); }

/* ── FOOTER ── */
.syn-foot { padding:0 var(--pad) 26px; }
.syn-foot__rule { display:block; width:100%; height:22px; opacity:.45; margin:0 0 26px;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='60'%20viewBox='0%200%2040%2060'%20fill='none'%20stroke='%23C9A44A'%20stroke-width='2'%3E%3Cpath%20d='M0%2050L0%2014L30%2014L30%2038L14%2038L14%2026L22%2026L22%2032'/%3E%3Cline%20x1='0'%20y1='54'%20x2='40'%20y2='54'%20stroke-width='1.4'/%3E%3Cline%20x1='0'%20y1='10'%20x2='40'%20y2='10'%20stroke-width='1.4'/%3E%3C/svg%3E") repeat-x left center/auto 100%; }
.syn-foot__top { display:flex; gap:clamp(28px,6vw,80px); flex-wrap:wrap; padding-bottom:22px; border-bottom:1px solid var(--line); }
.syn-foot__brand { display:flex; gap:12px; align-items:flex-start; flex:1; min-width:230px; }
.syn-foot__mark { width:32px; height:32px; color:var(--fg); }
.syn-foot__wm { font-weight:800; font-size:20px; } .syn-foot__wm span { color:var(--terra); }
.syn-foot__tag { font-family:var(--serif); font-style:italic; color:var(--fg-70); margin:4px 0 0; font-size:14px; }
.syn-foot__col { display:flex; flex-direction:column; gap:10px; min-width:130px; }
.syn-foot__col h4 { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 3px; }
.syn-foot__col a { font-size:13.5px; font-weight:500; color:var(--fg-70); text-decoration:none; cursor:pointer; } .syn-foot__col a:hover { color:var(--terra-dk); }
.syn-foot__bot { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:18px; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.syn-foot__pro { background:var(--terra-dk); color:#fff; border:0; font-family:var(--sans); font-weight:700; font-size:13px; padding:10px 18px; border-radius:999px; cursor:pointer; }
.syn-foot__social { display:flex; gap:9px; margin-left:auto; margin-right:14px; }
.syn-soc { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--line-bold); color:var(--fg-70); transition:.16s; }
.syn-soc:hover { border-color:var(--terra); color:var(--terra-dk); transform:translateY(-2px); }
.syn-soc svg { width:19px; height:19px; }

/* subject marquee (rolling band) */
.syn-mq { padding:clamp(28px,4vw,50px) 0 clamp(18px,3vw,30px); overflow:hidden; }
.syn-mq__hd { display:flex; align-items:baseline; gap:8px; padding:0 var(--pad); margin-bottom:18px; }
.syn-mq__row { position:relative; overflow:hidden; padding:6px 0; -webkit-mask:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.syn-mq__track { display:flex; gap:13px; width:max-content; will-change:transform; }
.syn-mq__track--a { animation:mq-a 46s linear infinite; }
.syn-mq__track--b { animation:mq-b 54s linear infinite; }
.syn-mq:hover .syn-mq__track { animation-play-state:paused; }
@keyframes mq-a { from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes mq-b { from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion: reduce){ .syn-mq__track{ animation:none; } .syn-mq__row{ overflow-x:auto; } }
.syn-mq__card { display:flex; align-items:center; gap:13px; flex:0 0 auto; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:13px 18px 13px 13px; text-decoration:none; color:var(--fg); transition:transform .16s, box-shadow .16s, border-color .16s; }
.syn-mq__card:hover { transform:translateY(-3px); border-color:var(--ca-mid); box-shadow:0 12px 28px var(--shadow); }
.syn-mq__ic { display:grid; place-items:center; width:48px; height:48px; flex:none; border-radius:13px; background:var(--ca-tint); color:var(--ca-ink); }
.syn-mq__ic svg { width:30px; height:30px; }
.syn-mq__nm { display:block; font-family:var(--disp); font-weight:600; font-size:18px; letter-spacing:.01em; text-transform:uppercase; }
.syn-mq__meta { display:block; font-size:10.5px; font-weight:600; letter-spacing:.06em; color:var(--muted); margin-top:2px; }

/* accent intensity */
.dir-synthesis.accent-bold { background: radial-gradient(1200px 560px at 82% -10%, color-mix(in srgb,var(--terra) 22%, transparent), transparent 58%), radial-gradient(820px 460px at 2% 6%, var(--gold-soft), transparent 52%), var(--bg); }

@media (max-width:940px){
  /* ── hero stacks & actually fits ── */
  .syn-hero { grid-template-columns:1fr; }
  .syn-hero__l, .syn-hero__r { min-width:0; }   /* stop grid blow-out past the viewport */
  .syn-hero__r { order:-1; }
  .syn-spec { width:min(100%,330px); height:auto; min-height:0; aspect-ratio:4/5; }
  .syn-hero__h1 { font-size:clamp(34px,8vw,72px); }

  /* ── nav → burger + slide-down drawer ── */
  .syn-burger { display:inline-flex; }
  .syn-nav__in { gap:12px; padding:9px 12px 9px 18px; }
  .syn-nav__cluster {
    display:none; position:absolute; top:calc(100% + 9px); left:var(--pad); right:var(--pad);
    flex-direction:column; align-items:stretch; gap:10px;
    background:var(--card); border:1px solid var(--line); border-radius:18px;
    padding:14px; box-shadow:0 26px 64px var(--shadow); z-index:60; max-height:78vh; overflow:auto;
  }
  .syn-nav.is-open .syn-nav__cluster { display:flex; }
  .syn-nav__links { display:flex; flex-direction:column; gap:4px; margin:0; flex:none; }
  .syn-nav__lnk { padding:13px 14px; font-size:15px; border-radius:13px; }
  .syn-nav__lnk--agora { justify-content:flex-start; }
  .syn-nav__act { flex-direction:column; align-items:stretch; gap:8px; border-top:1px solid var(--line); padding-top:12px; }
  .syn-nav__act .syn-live, .syn-nav__act .syn-btn { width:100%; justify-content:center; padding:13px 18px; font-size:15px; min-height:46px; }
  .syn-prof { width:46px; height:46px; align-self:flex-start; }
  .syn-screens { width:100%; }
  .syn-screens__btn { width:100%; justify-content:center; min-height:46px; font-size:14px; }
  /* Screens mega-menu → an in-drawer sheet (no more off-screen overflow).
     .syn-screens ancestor added so these beat the base rule that follows in source order. */
  .syn-screens .syn-screens__menu--mega {
    display:none; position:static; width:100%; max-width:none; box-shadow:none; border:0;
    padding:8px 0 2px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 12px; max-height:none; transform:none; transition:none;
  }
  .syn-screens .syn-screens__menu--mega.open { display:grid; opacity:1; transform:none; pointer-events:auto; }
  .syn-screens .syn-screens__menu--mega .syn-screens__item { min-width:0; }
  .syn-screens .syn-screens__menu--mega .syn-screens__item, .syn-screens__lbl { overflow-wrap:anywhere; }
  .syn-screens .syn-screens__menu--mega .syn-screens__col--tags,
  .syn-screens .syn-screens__menu--mega .syn-screens__col--t { grid-column:1 / -1; }
  /* tap-target + legibility polish */
  .syn-chiplet { font-size:12px; padding:6px 13px; }
  /* class-chip groups: stop flex min-content blow-out, let chips wrap */
  .syn-classes__col, .syn-cgroups, .syn-cgroup, .syn-cgroup .syn-classes__row, .syn-cgroup__h, .syn-cadd { min-width:0; max-width:100%; }
  .syn-cgroup .syn-classes__row { flex-direction:row; flex-wrap:wrap; }
}

/* ── nav: Screens launcher + profile ── */
.syn-screens { position:relative; }
.syn-screens__btn { display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-weight:600; font-size:13px; color:var(--fg); background:var(--sink); border:1px solid var(--line); padding:8px 13px; border-radius:999px; cursor:pointer; white-space:nowrap; }
.syn-screens__btn:hover { border-color:var(--terra); }
.syn-screens__grid { color:var(--terra); }
.syn-screens__cv { font-size:10px; color:var(--muted); }
.syn-screens__menu { position:absolute; top:calc(100% + 9px); left:0; width:232px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 60px var(--shadow); padding:7px; display:grid; gap:2px; z-index:60; opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:opacity .16s, transform .16s; max-height:74vh; overflow:auto; }
.syn-screens__menu.open { opacity:1; transform:none; pointer-events:auto; }
.syn-screens__item { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:10px; border:0; background:none; color:var(--fg); font-family:var(--sans); font-weight:600; font-size:13px; cursor:pointer; text-align:left; }
.syn-screens__item:hover { background:var(--sink); }
.syn-screens__item.active { background:var(--terra-soft); color:var(--terra-dk); }
.syn-screens__ico { width:20px; text-align:center; color:var(--terra); font-size:14px; }
/* mega-panel — grouped columns covering every site area */
.syn-screens__menu--mega { width:max-content; max-width:min(640px,92vw); display:grid; grid-template-columns:repeat(3,minmax(168px,1fr)); gap:6px 16px; padding:16px; }
.syn-screens__menu--mega .syn-screens__col { display:flex; flex-direction:column; gap:2px; }
.syn-screens__menu--mega .syn-screens__col--tags { grid-column:1 / -1; }
.syn-screens__lbl { font-family:var(--disp,'Oswald',sans-serif); font-weight:600; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding:6px 8px 4px; }
.syn-screens__col + .syn-screens__col .syn-screens__lbl { margin-top:0; }
.syn-screens__menu--mega .syn-screens__item { padding:7px 9px; font-size:12.5px; }
.syn-screens__tags { display:flex; flex-wrap:wrap; gap:6px; padding:2px 8px 2px; }
.syn-screens__tag { padding:5px 11px; border:1px solid var(--line-bold); border-radius:999px; background:var(--bg); color:var(--fg); font-family:var(--sans); font-weight:600; font-size:11.5px; cursor:pointer; transition:.14s; }
.syn-screens__tag:hover { border-color:var(--terra); color:var(--terra-dk); background:var(--terra-soft); }
.syn-prof { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--terra-soft); border:1px solid var(--line); cursor:pointer; padding:0; }
.syn-prof:hover { border-color:var(--terra); }
.syn-prof__av { font-family:var(--disp); font-weight:600; font-size:13px; color:var(--terra-dk); }
.syn-prof__av[data-illu] { width:24px; height:24px; } .syn-prof__av[data-illu] svg{ width:100%; height:100%; color:var(--terra-dk); }

@media (max-width:560px){
  .syn-join__card { justify-content:center; text-align:center; } .syn-join__form { width:100%; justify-content:center; }
}

/* ════ HERO VISUAL variants ════ */
.syn-hero__l > .syn-show, .syn-hero__l > .syn-mono, .syn-hero__l > .syn-hero__min { margin: 6px 0 26px; }

/* showcase carousel */
.syn-show { position:relative; }

/* class section: groups (left) · right column keeps its original ~480px width;
   showcase + promo stacked, EACH split text-left / design-right (no wider) */
.syn-classes__split { display:grid; grid-template-columns: auto minmax(0,1fr); gap: clamp(20px,3vw,40px); align-items:start; }
.syn-classes__col { min-width:0; }
.syn-classes__showw { min-width:0; display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(14px,1.6vw,18px); align-items:stretch; }
.syn-classes__showcase { display:flex; flex-direction:column; gap:16px; }
/* SHOWCASE — text LEFT, design RIGHT (its original landscape shape) */
.syn-classes__showw .syn-show {
  display:grid; grid-template-columns: 1fr clamp(60px,6.5vw,92px); column-gap: clamp(10px,1.1vw,16px); align-content:center; overflow:hidden;
  padding: clamp(16px,1.6vw,22px); border:1px solid var(--line-bold); border-radius:18px;
  background: linear-gradient(180deg, var(--card), var(--bg)); box-shadow: 0 12px 34px var(--shadow);
}
.syn-classes__showw .syn-show__body { grid-column:1; grid-row:1; margin-top:0; gap:6px; }
.syn-classes__showw .syn-show__try { grid-column:1; grid-row:2; align-self:start; justify-self:start; margin-top:12px; }
.syn-classes__showw .syn-show__dots { grid-column:1; grid-row:3; margin-top:12px; }
.syn-classes__showw .syn-show__art { grid-column:2; grid-row:1 / span 3; align-self:center; justify-self:center; height:clamp(70px,7.5vw,98px); width:100%; margin:0; overflow:hidden; }
.syn-classes__showw .syn-show__slide svg { max-width: 84px; }
.syn-classes__showw .syn-show__nm { font-size: clamp(18px,1.7vw,23px); }
.syn-classes__showw .syn-show__desc { font-size:13.5px; }
/* PROMO — text LEFT, design RIGHT (same landscape shape, same width) */
.syn-classes__showw .syn-promo--split { display:grid; grid-template-columns: 1fr clamp(60px,6.5vw,92px); column-gap: clamp(10px,1.1vw,16px); align-items:center; overflow:hidden; }
.syn-classes__showw .syn-promo--split .syn-promo__cta { white-space:nowrap; padding:10px 14px; font-size:12.5px; }
.syn-classes__showw .syn-promo--split .syn-promo__txt { min-width:0; display:flex; flex-direction:column; gap:12px; }
.syn-classes__showw .syn-promo--split .syn-promo__hd { gap:5px; }
.syn-classes__showw .syn-promo--split .syn-promo__cta { margin-top:2px; }
.syn-classes__showw .syn-promo--split .syn-promo__dots { margin-top:0; }
.syn-promo__art { display:grid; place-items:center; align-self:stretch; }
.syn-promo__artillu { display:block; width:100%; max-width:84px; color:var(--terra-dk); }
.syn-promo__artillu svg { width:100%; height:auto; }
@media (max-width: 880px) {
  .syn-classes__split { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .syn-classes__showw { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .syn-classes__showw .syn-show,
  .syn-classes__showw .syn-promo--split { grid-template-columns: 1fr; }
  .syn-classes__showw .syn-show__art,
  .syn-promo__art { grid-column:1; grid-row:auto; justify-self:start; height:auto; }
  .syn-classes__showw .syn-show__body,
  .syn-classes__showw .syn-show__try,
  .syn-classes__showw .syn-show__dots { grid-column:1; grid-row:auto; }
}
.syn-show__edit { position:absolute; top:0; right:0; z-index:5; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1px solid color-mix(in srgb, var(--sage) 40%, transparent); background:color-mix(in srgb, var(--sage) 16%, var(--card)); color:var(--sage); font-family:var(--sans); font-weight:700; font-size:11.5px; cursor:pointer; box-shadow:0 4px 14px var(--shadow); transition:transform .16s, background .16s; }

/* promo card — rotating Anodos / Agora / How-to-play carousel (warm, contrasts the showcase) */
.syn-promo--carousel { gap:14px; }
.syn-promo__main { display:flex; align-items:center; gap:10px; }
.syn-promo__ico { width:30px; height:30px; flex:none; color:var(--terra-dk); }
.syn-promo__ico svg { width:100%; height:100%; }
.syn-promo__cta { display:inline-flex; align-items:center; gap:9px; align-self:flex-start; padding:11px 17px; border-radius:12px; border:0; background:var(--terra); color:#fff; font-family:var(--sans); font-weight:700; font-size:13.5px; cursor:pointer; transition:transform .15s, background .15s; }
.syn-promo__cta:hover { transform:translateY(-1px); background:var(--terra-dk); }
.syn-promo__ca { font-weight:800; }
.syn-promo__dots { display:flex; gap:7px; margin-top:auto; padding-top:4px; }
.syn-promo__dot { width:22px; height:5px; border-radius:99px; border:0; padding:0; cursor:pointer; background:color-mix(in srgb, var(--terra-dk) 24%, transparent); transition:background .18s, width .18s; }
.syn-promo__dot.on { width:30px; background:var(--terra); }
.syn-promo { padding: clamp(16px,1.6vw,20px); border:1px solid var(--line-bold); border-radius:18px; background: linear-gradient(180deg, var(--terra-soft), var(--bg)); display:flex; flex-direction:column; gap:12px; }
.syn-promo__hd { display:flex; flex-direction:column; gap:5px; }
.syn-promo__kick { font-family:var(--disp); font-weight:600; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--terra-dk); }
.syn-promo__ttl { margin:0; font-family:var(--serif); font-weight:700; font-size:clamp(20px,2.1vw,26px); line-height:1.1; color:var(--fg); }
.syn-promo__desc { margin:0; font-family:var(--serif); font-size:13.5px; line-height:1.45; color:var(--fg-70); text-wrap:pretty; }
.syn-promo__row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.syn-promo__b { display:flex; align-items:center; gap:8px; padding:11px 12px; border-radius:12px; border:1.5px solid var(--line-bold); background:var(--card); color:var(--fg); font-family:var(--sans); font-weight:700; font-size:14px; cursor:pointer; transition:border-color .16s, transform .16s; }
.syn-promo__b:hover { border-color:var(--terra); transform:translateY(-1px); }
.syn-promo__bi { width:22px; height:22px; flex:none; color:var(--terra-dk); }
.syn-promo__bl { flex:1; text-align:left; }
.syn-promo__ba { color:var(--terra-dk); font-weight:800; }
.syn-promo__guides { display:flex; align-items:center; gap:9px; padding:11px 13px; border-radius:12px; border:1px dashed color-mix(in srgb, var(--terra-dk) 50%, transparent); background:transparent; color:var(--terra-dk); font-family:var(--sans); font-weight:700; font-size:13.5px; cursor:pointer; transition:background .16s; }
.syn-promo__guides:hover { background:var(--terra-soft); }
.syn-promo__gi { width:19px; height:19px; flex:none; }
.syn-promo__gl { flex:1; text-align:left; }
@media (max-width: 520px) {
  .syn-promo__row { grid-template-columns:1fr; }
}
.syn-show__edit:hover { transform:translateY(-1px); background:color-mix(in srgb, var(--sage) 26%, var(--card)); }
.syn-show__editq { font-size:12px; line-height:1; }
.syn-show__art { position:relative; height: clamp(150px, 22vw, 240px); }
.syn-show__slide { position:absolute; inset:0; display:grid; place-items:center; color: color-mix(in srgb, var(--fg) 78%, var(--terra)); opacity:0; transform: scale(.9) rotate(-4deg); transition: opacity .8s, transform .8s cubic-bezier(.2,.7,.2,1); }
.syn-show__slide svg { width: 100%; height: 100%; max-width: 240px; }
.syn-show__slide.on { opacity:1; transform:none; }
.syn-show__body { display:flex; flex-direction:column; gap:5px; margin-top:10px; }
.syn-show__kind { align-self:flex-start; font-family:var(--disp); font-weight:600; font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.syn-show__kind--mode { color:var(--terra-dk); background:var(--terra-soft); }
.syn-show__kind--news { color:var(--sage); background:color-mix(in srgb,var(--sage) 16%,transparent); }
.syn-show__nm { font-family:var(--disp); font-weight:600; font-size:clamp(24px,3.2vw,36px); letter-spacing:.01em; text-transform:uppercase; line-height:1; }
.syn-show__desc { font-family:var(--serif); font-size:15px; color:var(--fg-70); line-height:1.4; max-width:26em; }
.syn-show__try { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; margin-top:12px; background:var(--terra-dk); color:#fff; border:0; font-family:var(--sans); font-weight:700; font-size:14px; padding:11px 20px; border-radius:999px; cursor:pointer; box-shadow:0 8px 22px var(--terra-soft); transition:transform .16s; }
.syn-show__try:hover { transform:translateY(-2px); }
.syn-show__arr { transition:transform .18s; } .syn-show__try:hover .syn-show__arr { transform:translateX(3px); }
.syn-show__dots { display:flex; gap:7px; margin-top:14px; }
.syn-show__dot { width:22px; height:5px; border-radius:3px; border:0; background:var(--line-bold); cursor:pointer; padding:0; transition:.2s; }
.syn-show__dot.on { background:var(--terra); width:34px; }

/* monogram */
.syn-mono { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.syn-mono__mark { width: clamp(90px,14vw,150px); height: clamp(90px,14vw,150px); color:var(--fg); }
.syn-mono__wm { font-family:var(--disp); font-weight:600; font-size:clamp(40px,6vw,72px); letter-spacing:.02em; text-transform:uppercase; line-height:.9; }
.syn-mono__wm span { color:var(--terra); }
.syn-mono__sub { font-family:var(--serif); font-style:italic; font-size:18px; color:var(--fg-70); }

/* minimal */
.syn-hero__min { height: 12px; }
.syn-hero__minrule { display:block; width:70px; height:3px; background:var(--terra); }

/* ════ interactive SPEC card ════ */
.syn-spec__art { position:relative; width:100%; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; background:none; border:0; cursor:pointer; padding:0; }
.syn-spec__art:hover .syn-spec__illu { transform: translateY(-4px) scale(1.03); }
.syn-spec__art:hover .syn-spec__taphint { opacity:1; transform:none; }
.syn-spec__illu { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.syn-spec__taphint { position:absolute; bottom:6px; left:50%; transform:translateX(-50%) translateY(4px); font-family:var(--disp); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--terra-dk); background:var(--terra-soft); padding:5px 11px; border-radius:999px; opacity:0; transition:.2s; white-space:nowrap; }
.syn-spec__ticker { min-height:56px; display:flex; align-items:center; }
.syn-tick { width:100%; }
.syn-tick--fact { display:flex; flex-direction:column; gap:3px; text-align:left; }
.syn-tick__lbl { font-family:var(--disp); font-weight:600; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--terra); }
.syn-tick__tx { font-family:var(--serif); font-size:13.5px; line-height:1.35; color:var(--fg-70); }
.syn-tick--live { display:flex; align-items:center; gap:9px; }
.syn-tick__k { color:var(--terra); font-size:15px; }
.syn-tick__v { font-family:var(--disp); font-weight:600; font-size:24px; color:var(--gold); }
.syn-tick__l { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }

/* ════ acroteria gallery overlay ════ */
.acro-ov { position:fixed; inset:0; z-index:9600; display:grid; place-items:center; padding:24px; background:color-mix(in srgb, #07080c 64%, transparent); backdrop-filter:blur(3px); opacity:0; transition:opacity .2s; }
.acro-ov.in { opacity:1; }
.acro-box { width:min(560px,96vw); max-height:88vh; overflow:auto; background:var(--card); border:1px solid var(--line-bold); border-radius:20px; box-shadow:0 40px 90px rgba(0,0,0,.5); }
.acro-box__bar { position:sticky; top:0; display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--card); border-bottom:1px solid var(--line); z-index:1; }
.acro-box__ttl { display:flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:600; font-size:16px; letter-spacing:.03em; text-transform:uppercase; }
.acro-box__ic { width:22px; height:22px; color:var(--gold); } .acro-box__ic svg{ width:100%; height:100%; }
.acro-box__kleos { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--muted); }
.acro-box__kleos b { color:var(--gold); font-family:var(--disp); font-size:15px; }
.acro-box__kic { width:18px; height:18px; color:var(--gold); } .acro-box__kic svg{ width:100%; height:100%; }
.acro-box__x { background:var(--sink); border:1px solid var(--line); color:var(--fg); width:32px; height:32px; border-radius:8px; font-size:18px; cursor:pointer; }
.acro-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:11px; padding:16px; }
.acro-card { display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 10px; border:1px solid var(--line); border-radius:16px; background:var(--bg); }
.acro-card.eq { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 10px 24px var(--shadow); }
.acro-card.locked { opacity:.72; }
.acro-card.shake { animation: acro-shake .4s; }
@keyframes acro-shake { 0%,100%{transform:none} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.acro-card__art { display:grid; place-items:center; width:64px; height:64px; border-radius:14px; background:var(--terra-soft); color:var(--terra-dk); }
.acro-card.locked .acro-card__art { background:var(--sink); color:var(--muted); filter:grayscale(.5); }
.acro-card__illu { width:42px; height:42px; } .acro-card__illu svg{ width:100%; height:100%; }
.acro-card__nm { font-family:var(--disp); font-weight:500; font-size:13px; letter-spacing:.02em; }
.acro-card__btn { font-family:var(--sans); font-weight:700; font-size:11.5px; padding:7px 12px; border-radius:999px; border:1px solid var(--line-bold); background:var(--card); color:var(--fg); cursor:pointer; }
.acro-card__btn.on { background:var(--gold); border-color:transparent; color:#1a1407; }
.acro-card__btn--buy { border-color:var(--gold); color:var(--gold); }
.acro-box__foot { position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; background:var(--card); border-top:1px solid var(--line); font-size:12px; color:var(--muted); flex-wrap:wrap; }
.acro-box__temple { display:inline-flex; align-items:center; gap:5px; background:var(--terra-dk); color:#fff; border:0; font-family:var(--sans); font-weight:700; font-size:13px; padding:10px 16px; border-radius:999px; cursor:pointer; }

/* acro detail pane (click a piece to check it out) */
.acro-detail { display:flex; gap:16px; align-items:center; margin:14px 16px 0; padding:16px; background:var(--sink); border:1px solid var(--line); border-radius:16px; }
.acro-detail.shake { animation: acro-shake .4s; }
.acro-detail__art { display:grid; place-items:center; width:84px; height:84px; flex:none; border-radius:16px; background:var(--terra-soft); color:var(--terra-dk); }
.acro-detail__art.locked { background:var(--card); color:var(--muted); filter:grayscale(.5); }
.acro-detail__illu { width:54px; height:54px; } .acro-detail__illu svg{ width:100%; height:100%; }
.acro-detail__b { flex:1; min-width:0; }
.acro-detail__nm { font-family:var(--disp); font-weight:600; font-size:20px; letter-spacing:.02em; text-transform:uppercase; }
.acro-detail__lore { font-family:var(--serif); font-style:italic; font-size:14px; color:var(--fg-70); margin:4px 0 10px; line-height:1.4; }
.acro-detail__act { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.acro-detail__price { font-family:var(--disp); font-weight:600; font-size:13px; color:var(--gold); }
.acro-detail__btn { font-family:var(--sans); font-weight:700; font-size:13px; padding:9px 18px; border-radius:999px; border:1px solid var(--line-bold); background:var(--card); color:var(--fg); cursor:pointer; }
.acro-detail__btn.on { background:var(--gold); border-color:transparent; color:#1a1407; }
.acro-detail__btn--buy { background:var(--terra-dk); border-color:transparent; color:#fff; }
.acro-card { cursor:pointer; }
.acro-card.sel { outline:2px solid var(--terra); outline-offset:1px; }
.acro-card__tag { font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); }
.acro-card.eq .acro-card__tag { color:var(--gold); }

/* ════════════════════════════════════════════════════════════════════
   GAME TAGS — interactive hero strip, tag pages, admin tag/reward editors
   ════════════════════════════════════════════════════════════════════ */
/* hero-strip chiplets are now buttons that open a tag page */
.syn-chiplet--tag { display:inline-flex; align-items:center; gap:7px; background:none; cursor:pointer; transition:border-color .16s, color .16s, transform .16s, background .16s; }
.syn-chiplet--tag:hover { border-color:var(--terra); color:var(--terra-dk); transform:translateY(-1px); }
.syn-chiplet--tag:active { transform:none; }
.syn-chiplet--tag.on { border-color:transparent; background:var(--ca,var(--terra)); color:#fff; }
.syn-chiplet__n { display:inline-grid; place-items:center; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:color-mix(in srgb, currentColor 16%, transparent); font-size:9.5px; font-weight:700; letter-spacing:0; }

/* tag page (symposion/<tag>) */
.tagpg__tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.tagpg__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.tagpg__empty { display:flex; flex-direction:column; align-items:center; gap:14px; padding:54px 22px; text-align:center; color:var(--muted); border:1px dashed var(--line-bold); border-radius:18px; }
.tagpg__empty-ic { width:60px; height:60px; color:var(--terra-dk); opacity:.55; } .tagpg__empty-ic svg { width:100%; height:100%; }
.tagpg__empty p { margin:0; font-family:var(--serif); font-size:15px; }

/* admin — tag manager */
.sc-tagmgr { display:flex; flex-wrap:wrap; gap:8px; }
.sc-tagchip { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid var(--line-bold); border-radius:999px; background:var(--card); font-family:var(--sans); font-weight:600; font-size:12.5px; color:var(--fg); }
.sc-tagchip__n { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--sink); color:var(--ca,var(--terra-dk)); font-size:10px; font-weight:700; }
.sc-tagchip__x { border:0; background:none; color:var(--muted); cursor:pointer; font-size:15px; line-height:1; padding:0 0 0 2px; }
.sc-tagchip__x:hover { color:var(--terra-dk); }
.sc-tagchip--custom { border-color:var(--ca,var(--terra)); }
.sc-tagchip--add { cursor:pointer; border-style:dashed; color:var(--terra-dk); }
.sc-tagchip--add:hover { background:var(--terra-soft); }

/* admin — games × tags grid */
.sc-tagrows { display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.sc-tagrow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--line); border-radius:14px; background:var(--card); }
.sc-tagrow__g { display:flex; align-items:center; gap:9px; min-width:172px; flex:0 0 auto; }
.sc-tagrow__ic { width:26px; height:26px; color:var(--ca,var(--terra-dk)); flex:none; } .sc-tagrow__ic svg { width:100%; height:100%; }
.sc-tagrow__nm { font-family:var(--disp); font-weight:500; font-size:14px; }
.sc-tagrow__tags { display:flex; flex-wrap:wrap; gap:6px; flex:1; }
.sc-tagtoggle { padding:5px 11px; border:1px solid var(--line-bold); border-radius:999px; background:var(--bg); color:var(--muted); font-family:var(--sans); font-weight:600; font-size:11.5px; cursor:pointer; transition:.14s; }
.sc-tagtoggle:hover { border-color:var(--terra); color:var(--fg); }
.sc-tagtoggle.on { background:var(--ca,var(--terra)); border-color:transparent; color:#fff; }

/* admin — level rewards editor */
.sc-rewards { display:flex; flex-direction:column; gap:12px; }
.sc-rwd { border:1px solid var(--line); border-radius:16px; background:var(--card); padding:14px; }
.sc-rwd__h { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.sc-rwd__lv { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-family:var(--disp); text-transform:uppercase; font-size:11px; letter-spacing:.08em; }
.sc-rwd__lvi { width:54px; padding:6px 8px; border:1px solid var(--line-bold); border-radius:8px; background:var(--bg); color:var(--fg); font-family:var(--sans); font-weight:700; font-size:14px; }
.sc-rwd__ttl { flex:1; min-width:120px; padding:8px 11px; border:1px solid var(--line-bold); border-radius:10px; background:var(--bg); color:var(--fg); font-family:var(--serif); font-weight:600; font-size:15px; }
.sc-rwd__del { border:0; background:var(--sink); color:var(--muted); width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:16px; flex:none; }
.sc-rwd__del:hover { color:var(--terra-dk); }
.sc-rwd__list { display:flex; flex-direction:column; gap:8px; }
.sc-rwd__row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sc-rwd__ic { width:34px; height:34px; flex:none; border:1px solid var(--line-bold); border-radius:9px; background:var(--bg); color:var(--ca,var(--terra-dk)); font-size:16px; cursor:pointer; display:grid; place-items:center; }
.sc-rwd__lbl { flex:1; min-width:140px; padding:8px 11px; border:1px solid var(--line-bold); border-radius:10px; background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:13.5px; }
.sc-rwd__type { flex:0 0 auto; width:auto; min-width:120px; padding:8px 10px; }
.sc-rwd__x { border:0; background:none; color:var(--muted); cursor:pointer; font-size:18px; line-height:1; flex:none; }
.sc-rwd__x:hover { color:var(--terra-dk); }
.sc-rwd__addr { align-self:flex-start; margin-top:2px; border:1px dashed var(--line-bold); background:none; color:var(--terra-dk); font-family:var(--sans); font-weight:600; font-size:12px; padding:7px 12px; border-radius:999px; cursor:pointer; }
.sc-rwd__addr:hover { background:var(--terra-soft); }
.sc-rwd__foot { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }

/* promo title scaled to match the showcase ("navigation") panel beside it */
.syn-classes__showw .syn-promo__ttl { font-size: clamp(18px,1.7vw,23px); }
.syn-classes__showw .syn-promo__kick { font-size: 10px; }

/* refresh control on game-reading admin panels */
.sc-tagrow__bar, .sc-refreshbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:18px 0 8px; }
.sc-refreshbar { justify-content:flex-end; margin:0 0 12px; }
.sc-refresh { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border:1px solid var(--line-bold); border-radius:999px; background:var(--card); color:var(--fg); font-family:var(--sans); font-weight:600; font-size:12px; cursor:pointer; transition:.16s; }
.sc-refresh:hover { border-color:var(--ca,var(--terra)); color:var(--ca-ink,var(--terra-dk)); }
.sc-refresh__ic { font-size:14px; line-height:1; transition:transform .4s ease; }
.sc-refresh:hover .sc-refresh__ic { transform:rotate(180deg); }
.sc-refresh:active .sc-refresh__ic { transform:rotate(360deg); }

/* premium acroteria — gilded card + star badge (Agora grid & home overlay) */
.sc-acro, .acro-card { position:relative; }
.sc-acro--premium, .acro-card--premium {
  border-color:var(--gold);
  background:linear-gradient(180deg, color-mix(in srgb,var(--gold) 12%, var(--card)), var(--card));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 42%,transparent), 0 12px 28px var(--shadow);
}
.sc-acro--premium .sc-acro__art, .acro-card--premium .acro-card__art {
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--gold) 55%,transparent);
  color:var(--gold);
}
.sc-acro__prem, .acro-card__prem {
  position:absolute; top:7px; right:8px; z-index:2; color:var(--gold); font-size:13px; line-height:1;
  filter:drop-shadow(0 0 4px color-mix(in srgb,var(--gold) 60%,transparent));
  pointer-events:none;
}
.acro-card__prem { top:9px; right:9px; }