body.guest.demo-mode #app{grid-template-columns:248px minmax(0,1fr);grid-template-rows:64px minmax(0,1fr)}body.guest.demo-mode .sidebar{display:flex}.demo-hero{position:relative;padding:20px 0 35px;margin-bottom:25px;border-bottom:1px solid var(--line)}.demo-hero h1{font-size:clamp(36px,4.6vw,66px);font-weight:700;letter-spacing:-.055em;line-height:1.08;margin:25px 0 20px}.demo-hero em{font-style:normal;color:var(--radiant)}.demo-hero>p{color:var(--text-dim);line-height:1.9;font-size:16px;margin-bottom:24px}.demo-hero>small{display:block;margin-top:18px;font-size:11px}.demo-mode-label{position:absolute;top:17px;right:0}.demo-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-bottom:28px}.demo-benefits>div{display:flex;align-items:center;gap:14px;padding:18px 0}.demo-benefits strong{font-size:30px;letter-spacing:-.04em;color:var(--gold);white-space:nowrap}.demo-benefits span{font-size:12px;color:var(--text-dim);line-height:1.7}.demo-challenge{display:flex;align-items:center;gap:18px}.demo-hero-avatar{width:100px;flex-shrink:0}.demo-hero-avatar img{display:block;width:100%;border-radius:12px}.demo-challenge h2{font-size:24px;margin-bottom:8px}.demo-challenge .eyebrow{font-size:9px}.demo-lock-region{position:relative;min-height:225px;display:grid;align-items:center}.demo-blur{filter:blur(7px);opacity:.32;pointer-events:none;user-select:none}.demo-unlock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:10px;padding:10px}.demo-unlock>b{font-size:17px}.demo-unlock>p{font-size:12px;color:var(--text-dim)}.demo-unlock>.btn{margin-top:6px}.demo-lock-icon{font-size:26px;color:var(--gold)}.demo-build{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.demo-item{width:100%;border-radius:8px}.demo-result-row{display:flex;justify-content:space-between;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}.demo-result-row>strong{color:var(--gold)}.demo-badges{margin-top:20px;color:var(--gold)}.demo-steps{padding-left:20px;margin:20px 0;display:grid;gap:18px}.demo-steps li::marker{color:var(--radiant);font-weight:700}.demo-steps p{margin-top:5px;color:var(--text-dim);font-size:12px}
.hero-select{position:relative;min-width:0;width:100%}.hero-select__trigger{display:flex;align-items:center;text-align:left;gap:10px;width:100%;min-height:45px}.hero-select__icon{width:36px;height:21px;object-fit:cover;border-radius:4px;flex-shrink:0}.hero-select__glyph{display:grid;place-items:center;width:36px;font-size:22px;color:var(--gold);flex-shrink:0}.hero-select__chevron{margin-left:auto;color:var(--text-dim)}.hero-select__panel{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:50;background:#1d1a18;border:1px solid var(--line-strong);padding:10px;border-radius:12px;box-shadow:0 18px 45px #0007}.hero-select__panel>.input{width:100%;margin-bottom:8px}.hero-select__list{display:grid;max-height:290px;overflow:auto;overscroll-behavior:contain;gap:2px}.hero-select__list>button{display:flex;align-items:center;gap:10px;text-align:left;padding:9px 10px;background:transparent;border:1px solid transparent;border-radius:7px;width:100%}.hero-select__list>button:hover,.hero-select__list>button:focus-visible{background:#ffffff08}.hero-select__list>button[aria-selected=true]{background:#e4c68b10;border-color:#e4c68b40}.tpl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tpl__xp{display:block;color:var(--gold);font-size:12px;line-height:1.7;margin:10px 0}.tpl small{display:block;line-height:1.7}.xp-multiplier-note{margin:12px 0;color:var(--gold);font-size:12px;line-height:1.7}.result-rate{display:block;margin-top:4px;font-size:11px}
@media(max-width:900px){.demo-benefits{grid-template-columns:1fr;gap:0}.demo-benefits>div{padding:12px 0}.demo-mode-label{position:static}.demo-hero .eyebrow{margin-bottom:15px}.demo-challenge{align-items:flex-start}.demo-challenge h2{font-size:19px}}
@media(max-width:800px){body.guest.demo-mode #app{grid-template-columns:1fr;grid-template-rows:64px auto minmax(0,1fr)}body.guest.demo-mode .sidebar{display:block}.demo-challenge{flex-direction:column}.tpl-grid{grid-template-columns:1fr}.hero-select__list{max-height:230px}.demo-hero h1{font-size:38px}.demo-hero>p{font-size:14px}}

.hero-select--above .hero-select__panel{top:auto;bottom:calc(100% + 8px)}.hero-select__list{max-height:var(--hero-list-height,290px)}