/* Trailwright site. A dark, game-style theme: midnight blue, gold, and the add-on's own orange line.
   No web fonts or third-party loads. The demo windows copy the add-on's real colours (UI.lua THEME/COLORS). */
:root {
  --bg: #0a0e17; --bg2: #0e1422; --panel: #121a2c; --panel2: #18223a; --line: #22304a; --line2: #33456a;
  --text: #e9eef7; --muted: #a3b2c9; --faint: #6f819c;
  --gold: #f2b640; --gold2: #ffdc85; --gold-ink: #1d1404; --orange: #ff8019;
  /* the add-on's step colours */
  --pick: #ffd133; --do: #ff7866; --hand: #66e673; --travel: #73bfff;
  --kofi: #ff5e5b; --patreon: #f1465a; --discord: #5865f2;
  --radius: 16px; --shadow: 0 30px 70px -30px rgb(0 0 0 / .9);
  --display: Bahnschrift, "Barlow Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.65 var(--sans); }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--gold2); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.05; margin: 0 0 .45em; letter-spacing: .01em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6.6vw, 5.2rem); text-transform: uppercase; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); text-transform: uppercase; }
h3 { font-size: clamp(1.45rem, 2.4vw, 2rem); }
p { margin: 0 0 1em; }
code, kbd, pre { font-family: var(--mono); font-size: .88em; }
code { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: .08em .35em; word-break: break-word; }
kbd { border: 1px solid var(--line2); border-bottom-width: 3px; border-radius: 6px; padding: 0 .4em; background: var(--panel); }
pre { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; overflow-x: auto; }
pre code { border: 0; padding: 0; background: none; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--gold); color: var(--gold-ink); padding: 8px 14px; border-radius: 8px; z-index: 50; }
.skip:focus { top: 12px; }
.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
.muted { color: var(--muted); }
.eyebrow { font: 700 .8rem/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.lead { font-size: 1.18rem; color: #d3dcea; max-width: 58ch; }
.gold-text { background: linear-gradient(180deg, #fff1c4 0%, var(--gold2) 35%, var(--gold) 70%, #c9831c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-block: .12em; }
.c-pick { color: var(--pick); } .c-do { color: var(--do); } .c-hand { color: var(--hand); } .c-travel { color: var(--travel); }

/* Header: over the hero on the home page, solid elsewhere and once scrolled */
.top { position: sticky; top: 0; z-index: 30; background: rgb(10 14 23 / .82); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(255 255 255 / .06); transition: background .25s; }
.page-index .top { position: fixed; left: 0; right: 0; background: linear-gradient(180deg, rgb(5 8 14 / .75), transparent); border-color: transparent; backdrop-filter: none; }
.page-index .top.is-solid { background: rgb(10 14 23 / .9); backdrop-filter: blur(12px); border-color: rgb(255 255 255 / .06); }
.top__in { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none;
  font: 700 1.45rem var(--display); letter-spacing: .04em; text-transform: uppercase; margin-right: auto; }
.brand:hover { color: #fff; }
.brand img { height: 47px; width: auto; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .5)); transition: filter .2s; }
.brand:hover img { filter: drop-shadow(0 2px 10px rgb(242 182 64 / .35)); }
@media (max-width: 420px) { .brand img { height: 40px; } }
.nav { display: flex; align-items: center; gap: 16px; }
.nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a { color: #c7d2e3; text-decoration: none; padding: 8px 12px; border-radius: 8px; font: 600 .95rem var(--display);
  letter-spacing: .08em; text-transform: uppercase; }
.nav a:hover { color: #fff; background: rgb(255 255 255 / .06); }
.nav a[aria-current="page"] { color: var(--gold2); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }
.nav__lang { border: 1px solid rgb(255 255 255 / .2); border-radius: 8px !important; }
.navtoggle { display: none; background: rgb(0 0 0 / .3); border: 1px solid rgb(255 255 255 / .2); border-radius: 10px; width: 44px; height: 40px;
  color: var(--text); cursor: pointer; }
.navtoggle__bars, .navtoggle__bars::before, .navtoggle__bars::after { display: block; width: 18px; height: 2px;
  background: currentColor; margin: auto; position: relative; content: ""; transition: transform .2s; }
.navtoggle__bars::before { position: absolute; top: -6px; } .navtoggle__bars::after { position: absolute; top: 6px; }
.navtoggle[aria-expanded="true"] .navtoggle__bars { background: transparent; }
.navtoggle[aria-expanded="true"] .navtoggle__bars::before { transform: translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bars::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 900px) {
  .navtoggle { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 68px; background: rgb(10 14 23 / .97); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; padding: 12px 16px 18px; gap: 10px; }
  .nav.is-open { display: flex; }
  .nav ul { flex-direction: column; }
  .nav a { display: block; padding: 12px; font-size: 1.05rem; }
  .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--gold); }
  .nav__lang { text-align: center; }
}

/* Buttons */
.btnrow { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0; }
.btnrow--center { justify-content: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
  border-radius: 10px; font: 700 1rem var(--display); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; color: #fff; transition: transform .15s, filter .15s, background .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); color: #fff; }
.btn--big { min-height: 56px; padding: 0 30px; font-size: 1.1rem; }
.btn--primary { color: var(--gold-ink); background: linear-gradient(180deg, #ffe08f, var(--gold) 55%, #d58f1e);
  border-color: #ffe9b0; box-shadow: 0 10px 30px -10px rgb(242 182 64 / .7), inset 0 1px 0 rgb(255 255 255 / .6); }
.btn--primary:hover { color: var(--gold-ink); box-shadow: 0 14px 40px -10px rgb(242 182 64 / .9), inset 0 1px 0 rgb(255 255 255 / .6); }
.btn--glass { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .28); backdrop-filter: blur(6px); }
.btn--ghost { color: var(--text); border-color: var(--line2); background: transparent; }
.btn--ghost:hover { background: rgb(255 255 255 / .05); }
.btn--kofi { background: var(--kofi); } .btn--patreon { background: var(--patreon); } .btn--discord { background: var(--discord); }
.btn--off { opacity: .5; cursor: not-allowed; filter: saturate(.35); flex-direction: column; gap: 0; line-height: 1.15; }
.btn--off:hover { transform: none; filter: saturate(.35); }
.btn--off small { font: 500 .7rem var(--sans); letter-spacing: 0; text-transform: none; opacity: .9; }

/* Hero */
.hero { position: relative; min-height: min(92vh, 900px); display: flex; align-items: center; padding: 120px 0 90px; overflow: hidden;
  background:
    linear-gradient(90deg, rgb(8 11 19 / .94) 0%, rgb(8 11 19 / .78) 32%, rgb(8 11 19 / .15) 62%, transparent 80%),
    linear-gradient(0deg, var(--bg) 0%, transparent 22%),
    var(--art) 62% center / cover no-repeat, var(--bg); }
.hero__in { position: relative; z-index: 1; }
.hero h1 { max-width: 12ch; text-shadow: 0 4px 30px rgb(0 0 0 / .6); }
.hero .lead { text-shadow: 0 2px 12px rgb(0 0 0 / .8); }
.badge { display: inline-block; font: 700 .78rem/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--gold2);
  border: 1px solid rgb(242 182 64 / .5); background: rgb(242 182 64 / .1); padding: 9px 14px; border-radius: 999px; margin-bottom: 22px; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { font-size: .88rem; color: #dbe3ef; padding: 6px 12px; border-radius: 999px; background: rgb(0 0 0 / .35); border: 1px solid rgb(255 255 255 / .12); }
.chips li::before { content: "✓ "; color: var(--hand); font-weight: 700; }
@media (max-width: 760px) {
  .hero { min-height: 0; padding: 110px 0 56px; align-items: flex-end;
    background: linear-gradient(180deg, rgb(8 11 19 / .25) 0%, rgb(8 11 19 / .75) 45%, var(--bg) 92%),
      var(--art-s, var(--art)) 75% top / auto 70% no-repeat, var(--bg); }
  .hero__in { padding-top: 34vh; }
}

/* Stats */
.stats { border-block: 1px solid var(--line); background: linear-gradient(180deg, var(--bg2), var(--bg)); }
.stats__in { display: grid; grid-template-columns: repeat(6, 1fr); }
.stat { padding: 28px 12px; text-align: center; border-left: 1px solid var(--line); text-decoration: none; transition: background .2s; }
.stat:hover { background: rgb(242 182 64 / .06); }
.stat:first-child { border-left: 0; }
.stat b { display: block; font: 700 clamp(2.2rem, 4vw, 3.2rem)/1 var(--display); }
.stat b { background: linear-gradient(180deg, #fff1c4, var(--gold) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat b { height: 3.6rem; display: grid; place-items: center; }
.stat .stat__word { font-size: clamp(1.2rem, 1.9vw, 1.55rem); text-transform: uppercase; letter-spacing: .03em; line-height: 1.08; }
.stat span { display: block; margin-top: 8px; color: var(--muted); font-size: .9rem; line-height: 1.4; }
.stat b:not(.stat__word) { font-size: clamp(2.4rem, 3.8vw, 3.2rem); }
@media (max-width: 1100px) { .stats__in { grid-template-columns: repeat(3, 1fr); } .stat:nth-child(4) { border-left: 0; } .stat:nth-child(n+4) { border-top: 1px solid var(--line); } }
@media (max-width: 600px) { .stats__in { grid-template-columns: 1fr 1fr; } .stat { border-left: 0; } .stat:nth-child(even) { border-left: 1px solid var(--line); } .stat:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* Section heads */
.sechead { text-align: center; margin: 0 auto clamp(40px, 6vw, 70px); max-width: 760px; }
.sechead__sub { color: var(--muted); }

/* Showcase rows */
.show { padding: clamp(70px, 10vw, 130px) 0 40px;
  background: radial-gradient(1000px 600px at 50% 0%, rgb(242 182 64 / .07), transparent 70%); }
.showrow { scroll-margin-top: 90px; display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(28px, 4.5vw, 64px); align-items: center; margin-bottom: clamp(70px, 10vw, 130px); }
.showrow--flip { grid-template-columns: 1fr 1.7fr; }
.showrow--flip > .scene { order: 2; }
.showrow__text p { color: #c9d4e4; }
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; padding-left: 28px; margin-bottom: .55em; color: var(--muted); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; border-radius: 3px;
  background: var(--hand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4 8-9' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4 8-9' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
@media (max-width: 900px) { .showrow, .showrow--flip { grid-template-columns: 1fr; } .showrow--flip > .scene { order: 0; } }

/* A "game screen": the art behind, the add-on's windows on top, all sized from the scene's width */
.scene { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; container-type: inline-size;
  background: var(--art) center / cover no-repeat, var(--panel); box-shadow: var(--shadow), 0 0 0 1px rgb(242 182 64 / .25);
  font-family: var(--sans); }
.scene::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / .45)); }
.scene--dim::before { content: ""; position: absolute; inset: 0; background: rgb(5 8 14 / .35); }
.scene > * { position: absolute; z-index: 1; }
.scene { font-size: clamp(6px, 1.32cqw, 15px); }
@container (max-width: 520px) { .scene > .frw { font-size: 1.3em; } }

/* The add-on's window look: dark grey, black hairline, rounded, orange line under the title bar */
.frw { background: rgb(27 27 29 / .95); border: 1px solid #000; border-radius: .8em; color: #f2f2f2;
  box-shadow: 0 .4em 1.6em rgb(0 0 0 / .55); text-shadow: 1px 1px 0 rgb(0 0 0 / .9); overflow: hidden; line-height: 1.35; }
.frw__bar { display: flex; align-items: center; gap: .6em; height: 2.6em; padding: 0 .9em; position: relative; font-size: .95em; color: #ddd; }
.frw__bar::after { content: ""; position: absolute; left: .8em; right: .8em; bottom: 0; height: 1px; background: rgb(255 128 25 / .85); }
.frw__sp { flex: 1; }
.frw__nav { color: #bbb; font-size: 1.3em; line-height: 1; }
.frw__count b { color: #fff; }
.frw__btn { background: rgb(255 255 255 / .07); border-radius: .35em; padding: .15em .6em; font-size: .9em; }
.frw__x { color: #e04a3a; font-weight: 700; }
.frw__title { font-weight: 600; color: #f5f5f5; }
.frw__time { color: #bbb; } .frw__time b { color: #fff; }
.frw__foot { margin: 0; padding: .6em 1em .9em; color: #9a9aa2; font-size: .85em; }

/* Guide demo */
.frw--guide { right: 3%; bottom: 5%; width: 60%; }
.frw__body { display: flex; gap: .8em; padding: .8em 1em .4em; }
.frw__main { flex: 1; min-width: 0; }
.frw__verb { font-size: 1.45em; margin: 0 0 .35em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frw__verb span { color: #fff; }
.goals { list-style: none; margin: 0; padding: 0; }
.goal { display: flex; align-items: center; gap: .5em; margin: .25em 0; color: #ececec; transition: color .3s, opacity .3s; }
.goal span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.goal i { width: .95em; height: .95em; border: 1px solid #8a8a90; border-radius: .2em; flex: none; background: rgb(0 0 0 / .4); position: relative; }
.goal b { margin-left: auto; font-weight: 600; color: #fff; }
.goal.is-done { color: #73d973; }
.goal.is-done b { color: #73d973; }
.goal.is-done i { border-color: #4caf50; background: #2e7d32; }
.goal.is-done i::after { content: ""; position: absolute; left: .25em; top: .05em; width: .3em; height: .55em; border: solid #fff; border-width: 0 .14em .14em 0; transform: rotate(45deg); }
.goal--next { color: #9a9aa2; }
.goal.is-now { box-shadow: inset .2em 0 0 #ff8019; background: rgb(255 255 255 / .06); padding-left: .4em; border-radius: .2em; }
.frw__model { width: 6em; height: 6em; border-radius: .6em; overflow: hidden; background: #0d0d0f; border: 1px solid #000; flex: none; }
.frw__model img { width: 100%; height: 100%; object-fit: cover; animation: turn 6s ease-in-out infinite alternate; }
@keyframes turn { from { transform: scale(1.05) translateX(-3%); } to { transform: scale(1.12) translateX(3%) scaleX(-1); } }
.xpbar { position: relative; height: 1.5em; margin: .5em 1em .9em; background: #0c0c0e; border: 1px solid #000; border-radius: .3em; overflow: hidden; }
.xpbar__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--xp, .42) * 100%); background: linear-gradient(180deg, #b36bff, #6a2bb3); transition: width .6s; }
.xpbar__route { position: absolute; inset: 0 auto 0 calc(var(--xp, .42) * 100%); width: 22%; background: rgb(128 196 255 / .35); transition: left .6s; }
.xpbar em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: .85em; color: #fff; }

/* 3D arrow */
.arrow3d { left: 30%; top: 3%; width: 24%; text-align: center; filter: drop-shadow(0 .4em .5em rgb(0 0 0 / .6)); }
.arrow3d svg { width: 46%; margin: 0 auto; transform: rotateX(55deg) rotateZ(var(--rot, 0deg)); transition: transform .9s cubic-bezier(.3,.7,.2,1); }
.arrow3d p { margin: .3em 0 0; font-size: 1.05em; color: #fff; text-shadow: 1px 1px 0 #000, 0 0 .5em #000; line-height: 1.3; }
.arrow3d b { color: var(--do); }

/* Menu demo */
.frw--menu { left: 5%; right: 5%; top: 9%; bottom: 9%; display: flex; flex-direction: column; }
.menu { flex: 1; display: grid; grid-template-columns: 22% 1fr 30%; min-height: 0; }
.menu__side { list-style: none; margin: 0; padding: .6em; background: rgb(0 0 0 / .25); }
.menu__side li { padding: .45em .6em; border-radius: .3em; color: #cfcfd4; display: flex; justify-content: space-between; }
.menu__side li em { font-style: normal; color: #8d8d95; }
.menu__side li.is-on { background: rgb(255 255 255 / .1); box-shadow: inset .2em 0 0 #ff8019; color: #fff; }
.menu__list { list-style: none; margin: 0; padding: .6em .8em; overflow: hidden; }
.menu__head { color: #ff9a40; font-size: .82em; text-transform: uppercase; letter-spacing: .08em; margin: .6em 0 .3em; }
.menu__head:first-child { margin-top: 0; }
.zrow { display: grid; grid-template-columns: 1.4em 1fr 26% 4em; gap: .6em; align-items: center; padding: .38em .5em; border-radius: .3em; transition: background .3s; }
.zrow.is-sel { background: rgb(255 255 255 / .11); }
.zrow--off { opacity: .45; }
.zrow__ic { width: 1.2em; height: 1.2em; border-radius: .25em; background: #3b3b42; }
.zrow__ic--path { background: linear-gradient(135deg, #ffd133, #ff8019); } .zrow__ic--auto { background: linear-gradient(135deg, #73bfff, #3c7bd6); }
.zrow__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zrow__name small { color: #8d8d95; font-size: .85em; margin-left: .3em; }
.zrow__bar { height: .55em; background: #0c0c0e; border-radius: .3em; overflow: hidden; }
.zrow__bar i { display: block; height: 100%; width: calc(var(--p) * 100%); background: linear-gradient(90deg, #4caf50, #8bdc5a); }
.zrow__xp { text-align: right; color: #ffd133; font-size: .9em; }
.menu__card { padding: .8em 1em; border-left: 1px solid #000; background: rgb(255 255 255 / .03); }
.menu__cardtitle { font-weight: 700; color: #ffd133; font-size: 1.15em; margin-bottom: .3em; }
.menu__card p { margin: 0 0 .7em; font-size: .92em; color: #d7d7dc; }
.minibtn { display: inline-block; background: linear-gradient(180deg, #ff9a40, #c65a10); color: #fff; padding: .3em .9em; border-radius: .3em; font-weight: 700; }
@container (max-width: 520px) { .menu { grid-template-columns: 1fr; } .menu__side, .menu__card { display: none; } }

/* Travel demo */
.frw--travel { left: 5%; bottom: 8%; width: 50%; }
.legs { list-style: none; margin: 0; padding: .5em .7em 0; counter-reset: l; }
.leg { display: grid; grid-template-columns: 1.6em 1fr auto; gap: .6em; align-items: center; padding: .45em .5em; border-radius: .3em; color: #9a9aa2; transition: color .3s, background .3s; }
.leg em { font-style: normal; color: #77777f; }
.leg.is-done { color: #6fbf6f; } .leg.is-done em { color: #6fbf6f; }
.leg.is-now { color: #fff; background: rgb(255 255 255 / .08); box-shadow: inset .2em 0 0 #73bfff; }
.leg.is-now em { color: #73bfff; }
.leg__ic { width: 1.4em; height: 1.4em; border-radius: 50%; background: #73bfff; -webkit-mask: var(--m) center/70% no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: var(--m) center/70% no-repeat exclude, linear-gradient(#000 0 0); }
.leg__ic--walk { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='13' cy='4' r='2.5'/%3E%3Cpath d='M10 9l3-2 3 4 3 1-1 2-4-1-1 3 3 3v5h-2v-4l-3-2-2 6H7l3-9-2 1v3H6V11z'/%3E%3C/svg%3E"); }
.leg__ic--zep { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='8' rx='10' ry='5'/%3E%3Crect x='9' y='15' width='6' height='4' rx='1'/%3E%3Cpath d='M9 13l1 2M15 13l-1 2' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); }
.leg__ic--fly { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12c4-1 6-5 10-5s6 4 10 5c-4 1-6 4-10 4S6 13 2 12z'/%3E%3C/svg%3E"); }

/* Dungeon demo */
.frw--dmap { left: 4%; right: 4%; top: 8%; bottom: 8%; display: flex; flex-direction: column; }
.dmap { flex: 1; display: grid; grid-template-columns: 1fr 34%; min-height: 0; }
.dmap__svg { width: 100%; height: 100%; padding: .4em; }
.dmap__cave { fill: none; stroke: #3a3f2e; stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
.dmap__route { fill: none; stroke: #ffd133; stroke-width: 3.5; stroke-dasharray: 2 9; stroke-linecap: round; }
.dmap__bosses circle { fill: #2a2a2e; stroke: #ff8019; stroke-width: 2.5; transition: fill .3s; }
.dmap__bosses circle.is-dead { fill: #4caf50; stroke: #2e7d32; }
.dmap__bosses circle.is-next { fill: #ff8019; stroke: #fff; }
.dmap__nums text { fill: #fff; font: 700 12px var(--sans); text-anchor: middle; pointer-events: none; }
.dmap__card { padding: .8em 1em; border-left: 1px solid #000; background: rgb(0 0 0 / .2); }
.dmap__next { color: #ff9a40; font-size: .8em; text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.dmap__boss { font-size: 1.3em; font-weight: 700; margin: .1em 0 .4em; }
.dmap__tip { font-size: .88em; color: #cfcfd4; margin: 0 0 .6em; }
.loot { list-style: none; margin: 0; padding: 0; font-size: .9em; }
.loot li { padding: .15em 0; }
.loot li::before { content: ""; display: inline-block; width: .9em; height: .9em; margin-right: .45em; vertical-align: -.1em; border: 1px solid currentColor; border-radius: .15em; background: rgb(0 0 0 / .4); }
.q-rare { color: #4d8bff; } .q-unc { color: #3ad13a; }
@container (max-width: 520px) { .dmap { grid-template-columns: 1fr; } .dmap__card { display: none; } }

/* Gold demo */
.frw--gold { right: 5%; top: 9%; bottom: 9%; width: 56%; display: flex; flex-direction: column; }
.gold { padding: .6em .9em; flex: 1; display: flex; flex-direction: column; }
.gold__tabs { list-style: none; margin: 0 0 .7em; padding: 0; display: flex; gap: .3em; flex-wrap: wrap; }
.gold__tabs li { padding: .25em .7em; border-radius: .3em; background: rgb(255 255 255 / .05); color: #bdbdc4; font-size: .9em; }
.gold__tabs li.is-on { background: rgb(255 255 255 / .12); color: #fff; box-shadow: inset 0 -.15em 0 #ff8019; }
.gold__scan { display: grid; grid-template-columns: auto 1fr auto; gap: .6em; align-items: center; font-size: .9em; color: #d7d7dc; margin-bottom: .8em; }
.gold__bar { height: .6em; background: #0c0c0e; border-radius: .3em; overflow: hidden; }
.gold__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffd133, #ff8019); }
.farm { list-style: none; margin: 0; padding: 0; }
.frow { display: grid; grid-template-columns: 1fr 22% 6em; gap: .6em; align-items: center; padding: .42em .5em; border-radius: .3em; }
.frow:nth-child(odd) { background: rgb(255 255 255 / .03); }
.frow__name small { display: block; color: #8d8d95; font-size: .82em; }
.frow__bar { height: .55em; background: #0c0c0e; border-radius: .3em; overflow: hidden; }
.frow__bar i { display: block; height: 100%; width: calc(var(--p) * var(--grow, 1) * 100%); background: linear-gradient(90deg, #c9831c, #ffd133); transition: width 1s; }
.coins { text-align: right; color: #fff; white-space: nowrap; }
.coins i { display: inline-block; width: .7em; height: .7em; border-radius: 50%; margin: 0 .25em 0 .1em; vertical-align: -.02em; }
.coins .g { background: radial-gradient(circle at 35% 35%, #fff3b0, #e8b100 60%, #8a6400); }
.coins .s { background: radial-gradient(circle at 35% 35%, #fff, #b8c0c8 60%, #6c747c); }
.gold__note { margin: auto 0 0; padding-top: .6em; font-size: .8em; color: #8d8d95; }
@container (max-width: 520px) { .frw--gold { left: 4%; right: 4%; width: auto; } }

/* Auction helper demo */
.frw--ah { left: 4%; top: 8%; width: 62%; }
.sell { list-style: none; margin: 0; padding: 0; }
.srow { display: grid; grid-template-columns: 1.6em 1fr 5em 5.5em 4.2em; gap: .5em; align-items: center; padding: .4em .5em; border-radius: .3em; transition: background .3s, opacity .3s; }
.srow:nth-child(odd) { background: rgb(255 255 255 / .03); }
.srow.is-now { background: rgb(255 255 255 / .1); box-shadow: inset .2em 0 0 #ff8019; }
.srow.is-posted { opacity: .45; }
.srow.is-posted .minibtn { background: #2e7d32; }
.srow__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow__name small { color: #8d8d95; }
.srow__vs { color: #8d8d95; font-size: .85em; text-align: right; white-space: nowrap; }
.srow .minibtn { text-align: center; padding: .2em .3em; font-size: .85em; }
.icon { width: 1.5em; height: 1.5em; border-radius: .25em; border: 1px solid; background: linear-gradient(135deg, #3a3a40, #1b1b1f); }
.q-c.icon { border-color: #9d9d9d; } .q-u.icon { border-color: #1eff00; } .q-u { color: #1eff00; }
.tip { right: 4%; bottom: 8%; width: 30%; background: rgb(8 10 22 / .95); border: 1px solid #5a6a8a; border-radius: .4em; padding: .6em .8em;
  color: #fff; font-size: .95em; line-height: 1.5; box-shadow: 0 .4em 1.2em rgb(0 0 0 / .6); transition: opacity .4s, transform .4s; }
.tip p { margin: 0; display: flex; justify-content: space-between; gap: .6em; }
.tip .tip__name { font-weight: 700; margin-bottom: .2em; }
.tip.is-off { opacity: 0; transform: translateY(.6em); }
@container (max-width: 520px) { .frw--ah { left: 3%; right: 3%; width: auto; } .tip { display: none; } .srow__vs { display: none; } .srow { grid-template-columns: 1.6em 1fr 5em 4.2em; } }

/* Profession guide demo */
.frw--prof { left: 4%; right: 4%; top: 7%; bottom: 7%; display: flex; flex-direction: column; }
.prof { flex: 1; display: grid; grid-template-columns: 26% 1fr; min-height: 0; }
.prof__main { padding: .6em .9em; }
.prof__sum { margin: 0 0 .5em; color: #d7d7dc; }
.prof__sum b { color: #ffd133; }
.psteps { list-style: none; margin: 0; padding: 0; }
.pstep { display: grid; grid-template-columns: 5.2em 1fr 20%; gap: .6em; align-items: center; padding: .38em .5em; border-radius: .3em; color: #cfcfd4; transition: background .3s, color .3s; }
.pstep__range { color: #ff9a40; font-variant-numeric: tabular-nums; }
.pstep__name small { color: #8d8d95; }
.pstep__chance { height: .55em; background: #0c0c0e; border-radius: .3em; overflow: hidden; }
.pstep__chance i { display: block; height: 100%; width: calc(var(--p) * 100%); background: linear-gradient(90deg, #ffd133, #66e673); }
.pstep.is-now { background: rgb(255 255 255 / .1); box-shadow: inset .2em 0 0 #ff8019; color: #fff; }
.pstep.is-done { color: #6fbf6f; } .pstep.is-done .pstep__range { color: #6fbf6f; }
.shop { list-style: none; margin: 0; padding: 0; columns: 2; font-size: .92em; }
.shop li { display: flex; align-items: center; gap: .45em; padding: .2em 0; color: #d7d7dc; }
.shop li small { color: #8d8d95; }
.shop i { width: .9em; height: .9em; border: 1px solid #8a8a90; border-radius: .2em; flex: none; position: relative; }
.shop li.is-done i { background: #2e7d32; border-color: #4caf50; }
.shop li.is-done i::after { content: ""; position: absolute; left: .22em; top: .03em; width: .28em; height: .5em; border: solid #fff; border-width: 0 .13em .13em 0; transform: rotate(45deg); }
@container (max-width: 520px) { .prof { grid-template-columns: 1fr; } .prof .menu__side { display: none; } .shop { columns: 1; } }

/* Marker wheel demo */
.wheel { left: 50%; top: 50%; width: 38%; transform: translate(-50%, -50%); }
.wheel__svg { width: 100%; overflow: visible; filter: drop-shadow(0 .4em 1em rgb(0 0 0 / .6)); }
.wheel__ring { fill: rgb(10 10 14 / .78); stroke: rgb(255 255 255 / .18); stroke-width: 1.5; }
.wheel__mid { fill: rgb(0 0 0 / .6); stroke: rgb(255 128 25 / .8); stroke-width: 1.5; }
.wheel__ptr { stroke: #ff8019; stroke-width: 3; stroke-linecap: round; transform-origin: 0 0; transform: rotate(var(--a, 0deg)); transition: transform .5s cubic-bezier(.3,.7,.2,1); }
.mk > * { transition: transform .25s; }
.mk.is-hot > * { transform: scale(1.35); }
.mk-star { fill: #ffe14d; } .mk-circle { fill: #ff9b2e; } .mk-diamond { fill: #c45cff; } .mk-triangle { fill: #4fd65a; }
.mk-moon { fill: #d7e3f0; } .mk-square { fill: #3d8bff; } .mk-cross { fill: #ff3b30; } .mk-skull path { fill: #f4f4f4; } .mk-eye { fill: #222; }
.mk path, .mk circle, .mk rect { stroke: rgb(0 0 0 / .55); stroke-width: 1.2; }
.mob { right: 9%; bottom: 14%; text-align: center; }
.mob__plate { display: block; background: rgb(150 20 20 / .85); border: 1px solid #000; border-radius: .2em; padding: .1em .6em; color: #fff; font-size: 1.05em; text-shadow: 1px 1px 0 #000; }
.mob__mark { display: block; width: 2.6em; height: 2.6em; margin: 0 auto .3em; background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .3s; }
.mob__mark.is-on { opacity: 1; transform: scale(1); }

/* Shared bits of the add-on's windows */
.frw__icon { width: 1.25em; height: 1.25em; border-radius: .25em; background: rgb(255 255 255 / .08); position: relative; }
.frw__icon::before { content: ""; position: absolute; inset: .22em; background: #d6d6db; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.frw__icon--menu { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 3h14v2H1zm0 4h14v2H1zm0 4h14v2H1z'/%3E%3C/svg%3E"); }
.frw__icon--gear { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 0h2l.4 2.1 1.3.6 1.8-1.2 1.4 1.4-1.2 1.8.6 1.3L16 7v2l-2.1.4-.6 1.3 1.2 1.8-1.4 1.4-1.8-1.2-1.3.6L9 16H7l-.4-2.1-1.3-.6-1.8 1.2-1.4-1.4 1.2-1.8-.6-1.3L0 9V7l2.1-.4.6-1.3-1.2-1.8 1.4-1.4 1.8 1.2 1.3-.6zm1 5a3 3 0 1 0 0 6 3 3 0 0 0 0-6z' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.frw__verb--pad { padding: .6em 1em 0; margin: 0; }
.qbtns { right: calc(3% - 2.9em); bottom: 18%; display: none; }
.qbtns { right: .8%; bottom: 30%; display: flex; flex-direction: column; gap: .4em; }
.qbtn { width: 2.4em; height: 2.4em; border-radius: .3em; border: 1px solid #000; box-shadow: 0 0 0 1px rgb(255 209 51 / .5); background: #222 center/70% no-repeat; }
.qbtn--item { background-image: radial-gradient(circle at 40% 35%, #f6d36b, #9a6a12 60%, #3a2604); }
.qbtn--target { background-image: radial-gradient(circle, transparent 30%, #ff5a4a 32% 42%, transparent 44% 60%, #ff5a4a 62% 70%, transparent 72%); }
.frw--guide { right: 6.5%; }
.arrow3d--travel { left: 58%; top: 6%; }
.pill { display: inline-block; padding: .15em .65em; border-radius: 999px; background: rgb(255 255 255 / .06); color: #c9c9cf; font-size: .85em; margin-right: .3em; }
.pill.is-on { background: rgb(255 128 25 / .25); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 128 25 / .7); }
.pill--check::before { content: "☑ "; color: #9a9aa2; }
.sortrow { margin: 0 0 .6em; }
.prof__sum .pill { margin-right: .2em; }
.frw--gold .menu__side, .frw--prof .menu__side { font-size: .92em; }
.q-r { color: #4d8bff; } .q-r.icon { border-color: #4d8bff; }
.menu__btn { color: #ffd133 !important; }
.menu__side li.is-on2 { background: rgb(255 255 255 / .06); color: #fff; }
.zrow.js-row { transition: background .3s; }
.zrow.is-now { background: rgb(255 255 255 / .11); }
.zrow .icon { width: 1.3em; height: 1.3em; }
.zrow .zrow__xp i { display: inline-block; width: .7em; height: .7em; border-radius: 50%; vertical-align: -.02em; margin-left: .15em; background: radial-gradient(circle at 35% 35%, #fff3b0, #e8b100 60%, #8a6400); }

/* Party demo */
.frw--party { right: 5%; top: 8%; bottom: 8%; width: 58%; display: flex; flex-direction: column; }
.members { margin: 0 0 .5em; display: flex; gap: .4em; flex-wrap: wrap; }
.mbr { padding: .15em .7em; border-radius: .3em; background: rgb(255 255 255 / .07); }
.mbr--you { box-shadow: inset 0 0 0 1px #ff8019; }
.pstep__who { color: #9a9aa2; text-align: right; white-space: nowrap; }
.frw--party .pstep { grid-template-columns: 5.6em 1fr auto; }
.pstep.is-now { background: rgb(255 255 255 / .1); box-shadow: inset .2em 0 0 #ff8019; }

/* Disenchant demo */
.de { list-style: none; margin: 0; padding: 0; }
.de { font-size: .9em; }
.de li > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.de li .coins { text-align: right; }
.de li { display: grid; grid-template-columns: minmax(0, 1fr) 4.6em 4.2em 4.8em; gap: .5em; align-items: center; padding: .4em .5em; border-radius: .3em; transition: background .3s; }
.de__head { color: #ff9a40; font-size: .8em; text-transform: uppercase; letter-spacing: .06em; }
.de__head span { text-align: right; }
.de li.is-now { background: rgb(255 255 255 / .09); }
.de .coins.is-best { color: #66e673; font-weight: 700; }

/* Stats demo */
.frw--stats { right: 5%; top: 7%; bottom: 7%; width: 52%; display: flex; flex-direction: column; }
.stat-rows { list-style: none; margin: 0 0 .3em; padding: 0; }
.stat-rows li { display: grid; grid-template-columns: 1fr auto 6.5em; gap: .6em; padding: .32em .5em; border-radius: .3em; transition: background .3s; }
.stat-rows li:nth-child(odd) { background: rgb(255 255 255 / .03); }
.stat-rows li.is-now { background: rgb(255 255 255 / .1); }
.stat-rows b { color: #fff; font-variant-numeric: tabular-nums; }
.stat-rows em { font-style: normal; font-size: .9em; }

/* Quest help demo: the game's own quest window, with Trailwright's marks */
.qframe { left: 5%; top: 7%; width: 44%; padding: 1em 1.2em; border-radius: .3em; color: #2b1a08; text-shadow: none;
  background: linear-gradient(180deg, #f1e3c0, #dcc699); border: .25em solid #6b4a1f; box-shadow: 0 .4em 1.4em rgb(0 0 0 / .6); }
.qframe__title { font: 700 1.25em var(--serif, Georgia, serif); margin: 0 0 .4em; }
.qframe__text { font-size: .9em; margin: 0 0 .7em; }
.qframe__head { font-weight: 700; margin: 0 0 .3em; font-size: .9em; }
.qframe__rewards { list-style: none; margin: 0 0 .8em; padding: 0; }
.qframe__rewards li { display: flex; align-items: center; gap: .5em; padding: .25em .3em; border-radius: .2em; font-size: .9em; transition: background .3s, box-shadow .3s; }
.qframe__rewards li:first-child { box-shadow: inset 0 0 0 2px #ff8019; background: rgb(255 209 51 / .25); }
.qframe__rewards li.is-now { background: rgb(0 0 0 / .08); }
.qframe__tag { margin-left: auto; font-style: normal; font-size: .8em; color: #1d6b22; font-weight: 700; }
.qframe__btn { display: inline-block; background: linear-gradient(180deg, #b32a1e, #7a1209); color: #ffd133; padding: .3em 1em; border-radius: .2em; font-weight: 700; font-size: .9em; }
.toasts { right: 5%; top: 14%; width: 40%; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5em; }
.toasts li { background: rgb(27 27 29 / .95); border: 1px solid #000; border-left: .25em solid #66e673; border-radius: .3em; padding: .5em .8em; color: #f2f2f2;
  opacity: 0; transform: translateX(1em); transition: opacity .4s, transform .4s; }
.toasts li:last-child { border-left-color: #8d8d95; }
.toasts li.is-seen { opacity: 1; transform: none; }
@container (max-width: 520px) {
  .frw--party, .frw--stats { left: 3%; right: 3%; width: auto; }
  .qframe { width: 60%; } .toasts { width: 34%; font-size: .85em; }
  .de li { grid-template-columns: 1fr 4.6em 4.6em 4.6em; }
}

/* Gold window demos: room for the side list, rows on one line */
.frw--gold { width: 66%; }
.frw--gold .frow { grid-template-columns: 1fr 16% 5.2em; }
.frw--gold .frow__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu__side { overflow: hidden; }
.menu__side li { padding: .34em .6em; }

/* Gallery of real clips (only when files exist) */
.gallery { padding: 30px 0 90px; }
.gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.shot { margin: 0; }
.shot img, .shot video { border-radius: 12px; border: 1px solid var(--line2); box-shadow: var(--shadow); width: 100%; }
.shot figcaption { color: var(--faint); font-size: .85rem; margin-top: 10px; }

/* Tools grid */
.tools { padding: clamp(70px, 9vw, 120px) 0; background: linear-gradient(180deg, var(--bg), var(--bg2)); border-top: 1px solid var(--line); }
.tools__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tool { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line); border-radius: 14px; padding: 22px 20px;
  transition: transform .2s, border-color .2s; }
.tool:hover { transform: translateY(-3px); border-color: rgb(242 182 64 / .5); }
.tool h3 { font-size: 1.2rem; margin: 14px 0 6px; letter-spacing: .03em; }
.tool p { color: var(--muted); font-size: .92rem; margin: 0; }
.ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  background: radial-gradient(circle at 30% 25%, rgb(255 220 133 / .35), rgb(242 182 64 / .08)); border: 1px solid rgb(242 182 64 / .4); }
.ic::before { content: ""; width: 24px; height: 24px; background: var(--gold2); -webkit-mask: var(--i) center/contain no-repeat; mask: var(--i) center/contain no-repeat; }
.ic-arrow { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 18-8-5-8 5z'/%3E%3C/svg%3E"); }
.ic-target { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3' fill='black'/%3E%3Cpath d='M12 1v4M12 19v4M1 12h4M19 12h4'/%3E%3C/svg%3E"); }
.ic-bag { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4h6l-1 3h-4zM7 8h10c3 3 4 7 3 11-1 2-3 3-8 3s-7-1-8-3C3 15 4 11 7 8z'/%3E%3C/svg%3E"); }
.ic-flag { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2h2v20H5zM8 3h11l-3 4 3 4H8z'/%3E%3C/svg%3E"); }
.ic-party { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='7' r='3'/%3E%3Ccircle cx='16' cy='7' r='3'/%3E%3Cpath d='M2 20c0-4 3-7 6-7s6 3 6 7zM12 20c0-3 1-5 3-6 4 0 7 2 7 6z'/%3E%3C/svg%3E"); }
.ic-scroll { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12a2 2 0 0 1 0 4h-1v12a2 2 0 0 1-2 2H5a2 2 0 0 1 0-4h1zM9 9h6v1.5H9zm0 3h6v1.5H9z' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.ic-wheel { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l3 6 6.5 1-4.7 4.6 1.1 6.4L12 16l-5.9 3 1.1-6.4L2.5 8 9 7z'/%3E%3C/svg%3E"); }
.ic-coin { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); }
.ic-anvil { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 6h14c0 3 3 4 6 4v2c-3 0-5 1-6 3l2 4H6l2-4c-2-2-6-3-6-6z'/%3E%3C/svg%3E"); }
.ic-shop { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h18l-1 6H4zM4 10h16v11H4zm5 3v8h6v-8z' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.ic-chart { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21h18v-2H3zM5 17h3V9H5zm5.5 0h3V4h-3zM16 17h3v-6h-3z'/%3E%3C/svg%3E"); }
.ic-brain { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 5v5.2l4 2.4-1 1.7-5-3V7z' fill-rule='evenodd'/%3E%3C/svg%3E"); }
@media (max-width: 1000px) { .tools__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tools__grid { grid-template-columns: 1fr; } }

/* Coming soon: languages */
.soon { padding: clamp(60px, 8vw, 100px) 0; border-top: 1px solid var(--line); }
.langs { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; }
.langs li { padding: 10px 18px; border-radius: 999px; border: 1px dashed var(--line2); color: var(--muted); background: var(--panel); font-weight: 600; }
.langs li.is-now { border: 1px solid rgb(242 182 64 / .6); color: var(--gold2); background: rgb(242 182 64 / .1); }
.langs__note { text-align: center; color: var(--faint); font-size: .88rem; margin-top: 18px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px dashed var(--line2); margin: 0 6px 0 14px; vertical-align: -1px; }
.dot--now { border: 1px solid var(--gold); background: rgb(242 182 64 / .4); margin-left: 0; }

/* How it decides */
.how { padding: clamp(60px, 8vw, 100px) 0; border-top: 1px solid var(--line); }
.how__in { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.how p { color: var(--muted); max-width: 60ch; }
.formula { display: grid; justify-items: center; gap: 12px; font: 700 clamp(1.2rem, 2.6vw, 1.7rem) var(--display); letter-spacing: .04em; text-align: center;
  background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid rgb(242 182 64 / .35); border-radius: var(--radius); padding: 36px 24px; }
.formula__top { color: var(--gold2); }
.formula__line { width: min(100%, 380px); height: 2px; background: var(--gold); }
@media (max-width: 860px) { .how__in { grid-template-columns: 1fr; } }

/* Art band (call to action) */
.band { position: relative; padding: clamp(90px, 13vw, 170px) 0; text-align: center;
  background: linear-gradient(180deg, var(--bg) 0%, rgb(10 14 23 / .55) 25%, rgb(10 14 23 / .55) 75%, var(--bg) 100%), var(--art) center / cover no-repeat; }
.band h2 { text-shadow: 0 4px 30px rgb(0 0 0 / .8); }
.band p { max-width: 56ch; margin-inline: auto; color: #e2e8f2; text-shadow: 0 2px 10px rgb(0 0 0 / .9); }

/* Inner pages */
.pagehead { position: relative; padding: clamp(70px, 10vw, 120px) 0 clamp(30px, 4vw, 48px); margin-bottom: 40px; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgb(10 14 23 / .96) 25%, rgb(10 14 23 / .6)), linear-gradient(0deg, var(--bg), transparent 40%),
    url("../art/crossroads-1200.webp") center 40% / cover no-repeat, var(--bg2); }
.pagehead--center { text-align: center; border: 0; padding-block: clamp(110px, 16vw, 200px); }
.pagehead--center .lead { margin-inline: auto; }
.prose { max-width: 880px; padding-bottom: 90px; }
.prose h2 { margin-top: 1.8em; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .45em; }
.prose p, .prose li { color: #cdd7e6; }
.steps { counter-reset: s; list-style: none; padding-left: 0 !important; }
.steps li { counter-increment: s; position: relative; padding-left: 50px; min-height: 34px; margin-bottom: 16px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: -3px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font: 700 1.05rem var(--display); color: var(--gold-ink); background: linear-gradient(180deg, #ffe08f, var(--gold)); }
.two, .three { display: grid; gap: 18px; margin: 22px 0; }
.two { grid-template-columns: 1fr 1fr; } .three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .two, .three { grid-template-columns: 1fr; } }
.box { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; display: flex; flex-direction: column; }
.box h3 { font-size: 1.35rem; } .box p, .box li { color: var(--muted); }
.box .btn { margin-top: auto; align-self: flex-start; }
.box > p:last-of-type { flex-grow: 1; }

/* Download card */
.dlcard { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid rgb(242 182 64 / .45); border-radius: 18px; padding: 28px 30px; box-shadow: var(--shadow); }
.dlcard__ver { font: 700 1.9rem var(--display); text-transform: uppercase; margin-bottom: 4px; }
.dlcard__meta { color: var(--muted); }
.dlcard--soon p:not(.dlcard__ver) { color: var(--muted); }
.dlcard__sha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; font-size: .85rem; color: var(--faint); }
.dlcard__sha code { word-break: break-all; }

/* FAQ */
.faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); margin-bottom: 12px; }
.faq details[open] { border-color: rgb(242 182 64 / .4); }
.faq summary { cursor: pointer; padding: 18px 22px; font: 700 1.15rem var(--display); letter-spacing: .02em; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 22px 8px; color: var(--muted); }

/* Changelog */
.release { border-left: 3px solid var(--gold); padding-left: 24px; margin-bottom: 40px; }
.release header { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.release h2 { margin: 0 0 .3em; }
.tag { font-size: .8rem; border: 1px solid var(--line2); border-radius: 999px; padding: 2px 10px; color: var(--muted); }

/* Credits */
.credits dt { font-weight: 650; margin-top: 18px; }
.credits dd { margin: 4px 0 0; color: var(--muted); }
.names { columns: 3 180px; list-style: none; padding: 0 !important; }

/* Footer */
.foot { border-top: 1px solid var(--line); background: #070a11; padding: 44px 0 52px; color: var(--muted); font-size: .92rem; }
.foot__in { display: grid; grid-template-columns: 1fr auto; gap: 18px 40px; }
.foot__brand { display: flex; gap: 12px; align-items: flex-start; } .foot__brand p { margin: 0; }
.foot__brand strong { color: var(--text); font: 700 1.2rem var(--display); text-transform: uppercase; letter-spacing: .04em; }
.foot__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; align-content: flex-start; }
.foot__links a { color: var(--muted); }
.foot__legal { grid-column: 1 / -1; margin: 0; font-size: .82rem; color: var(--faint); max-width: 90ch; }
@media (max-width: 700px) { .foot__in { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .navtoggle__bars, .tool, .frw__model img { transition: none; animation: none; }
}

/* Guide cards: illustrated picker */
.guides { padding: 72px 0 24px; background: linear-gradient(180deg, var(--bg2), var(--bg)); border-top: 1px solid var(--line); }
.gcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gcard { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--text);
  background: var(--art) center 20% / cover no-repeat, var(--panel); border: 1px solid var(--line2);
  box-shadow: var(--shadow); transition: transform .25s, border-color .25s, box-shadow .25s; isolation: isolate; }
.gcard::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 45%, rgb(6 9 16 / .75) 70%, rgb(6 9 16 / .96)); }
.gcard:hover { transform: translateY(-4px); border-color: var(--gold); color: var(--text);
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / .9), 0 0 0 1px rgb(242 182 64 / .4), 0 0 40px -10px rgb(242 182 64 / .35); }
.gcard__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px 22px; text-align: center; }
.gcard b { display: block; font: 700 clamp(1.3rem, 2.1vw, 1.75rem)/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em;
  background: linear-gradient(180deg, #fff1c4, var(--gold) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gcard b + span { display: block; margin-top: 8px; color: var(--muted); font-size: .92rem; line-height: 1.4; }
@media (max-width: 900px) { .gcards { grid-template-columns: 1fr 1fr; gap: 12px; } .gcard__body { padding: 14px; } }
@media (max-width: 480px) { .gcard b + span { display: none; } }