/* The hero engine injects `html,body{background:var(--sw-bg,#F5EDE0)}` globally. styles.css
   only paints `html`, so once the engine has mounted, body kept the cream fallback and every
   later SPA route rendered light text on cream. Give --sw-bg the site background at :root. */
:root{--display-ko:"IBM Plex Sans KR",sans-serif;--sw-bg:#090d0c}
/* The engine also injects `html{overflow-x:hidden}`, which turns <html> into a scroll
   container and stops the sticky site header from sticking on the hero page. styles.css
   already clips overflow on body, so hand the axis back to html. */
html{overflow-x:visible}
#scroll-world-hero{--sw-bg:#090d0c;--sw-ink:#f5f7ed;--sw-ink-soft:#c1cbc3;--sw-accent:#c8ff38;--sw-font-display:"IBM Plex Sans KR",sans-serif;--sw-font-body:"IBM Plex Sans KR",sans-serif;min-height:100vh}
/* The site header already carries the PULSE90 mark, so the engine's topbar only holds
   the scene nav — pushed right, and repainted dark because its default light pill puts
   light text on a light background in this theme. */
#scroll-world-hero .sw-topbar{top:72px;justify-content:flex-end}
#scroll-world-hero .sw-nav{background:rgba(9,13,12,.72);border-color:rgba(200,255,56,.26)}
#scroll-world-hero .sw-nav__item.is-active{color:#090d0c}
/* The engine's primary button is white-on-ink; in this dark theme --sw-ink is the light
   token, so the label vanished into its own pill. Brand accent + dark label instead. */
#scroll-world-hero .sw-btn--primary{color:#090d0c;background:var(--sw-accent)}
#scroll-world-hero .sw-btn--ghost{color:var(--sw-ink);border-color:rgba(245,247,237,.42)}#scroll-world-hero .sw-brand__name{font-family:"Archivo Black",sans-serif;letter-spacing:.08em}#scroll-world-hero .sw-copy__title{line-height:1.1;letter-spacing:-.035em;word-break:keep-all}#scroll-world-hero .sw-stage::after{content:"";position:absolute;inset:0;z-index:125;pointer-events:none;background:linear-gradient(90deg,rgba(9,13,12,.78),rgba(9,13,12,.14) 58%,rgba(9,13,12,.32))}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero h1,.section h2,.workspace h1,.login-intro h1{font-family:var(--display-ko);font-weight:700;line-height:1.08;letter-spacing:-.035em}
.section h2{line-height:1.12;letter-spacing:-.025em}
.workspace h1{line-height:1.1}
.login-intro a{color:var(--lime);font-weight:700;text-underline-offset:5px}
.button{transition:transform .18s ease-out,background-color .18s ease-out,color .18s ease-out}
.button:active{transform:translateY(1px) scale(.98)}
.ticker{overflow:hidden;gap:0;padding:0}
.ticker-track{display:flex;align-items:center;gap:42px;min-width:max-content;padding-left:5vw;animation:ticker-slide 24s linear infinite}
@keyframes ticker-slide{to{transform:translateX(-50%)}}
.live-label::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--lime);animation:live-pulse 1.4s ease-out infinite}
@keyframes live-pulse{50%{opacity:.35;transform:scale(.72)}}
.public-product{max-width:var(--max);margin:auto;padding:42px max(20px,5vw) 90px}
.public-product .workspace-head{align-items:center}
.workspace .section{padding-top:56px;padding-bottom:56px}.workspace .section h2{font-size:clamp(32px,4vw,50px)}
.match-row{grid-template-columns:110px minmax(0,1fr) 44px;padding:14px 12px}
.match-meta{display:grid;gap:3px}.match-meta small{color:var(--muted)}
.match-contest{display:grid;grid-template-columns:minmax(90px,1fr) auto minmax(90px,1fr);align-items:center;gap:14px}
.match-contest .home{text-align:right}.match-contest .away{text-align:left}
.match-score{min-width:92px;padding:8px 12px;background:#0b110e;border:1px solid var(--line);font:24px var(--display);font-variant-numeric:tabular-nums}
.match-arrow{color:var(--lime);font-size:22px;text-align:right}
.empty-state{padding:30px 12px;color:var(--muted)}
.score-board .crest[data-team="SE"]{background:#c8ff38}.score-board .crest[data-team="BU"]{background:#ffcf4a}
.post{grid-template-columns:minmax(0,1fr) auto}.post-body{margin:8px 0;color:#d2d9d3;line-height:1.55}
.text-form select{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--line);background:#090e0b;color:var(--paper)}
.match-detail-grid{grid-template-columns:minmax(0,1.2fr) minmax(380px,.8fr);align-items:start}.chat-panel{padding:0;position:sticky;top:94px;overflow:hidden}.chat-head{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}.chat-head h2{margin:0 0 4px}.chat-head span{color:var(--muted);font-size:11px}.chat-head i{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(200,255,56,.1)}.chat-head button{border:0;background:none;color:var(--muted);font-size:11px;cursor:pointer}.cheer-list{height:min(58vh,610px);display:block;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--line) transparent}.chat-event{display:flex;gap:10px;padding:10px 16px;background:rgba(200,255,56,.08);border-bottom:1px solid rgba(200,255,56,.18);font-size:12px}.chat-event b{color:var(--lime)}.chat-event span{color:var(--muted)}.cheer{padding:0 14px;border:0;border-bottom:1px solid #202a24;background:#0d1310}.cheer-line{min-height:46px;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:8px}.cheer-line>b{color:#c3cdc5;font-size:12px;white-space:nowrap}.cheer-line p{margin:0;line-height:1.4;font-size:14px}.cheer-line time{color:#718078;font-size:10px}.reply{display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px;margin:0 0 7px 52px;padding:6px 9px;border-left:1px solid var(--lime);background:#0a100d;font-size:12px}.reply>b{color:var(--lime)}.reply strong{color:#c3cdc5}.chat-actions{position:relative}.chat-actions summary{width:28px;padding:5px 0;color:var(--muted);list-style:none;text-align:center;cursor:pointer}.chat-actions summary::-webkit-details-marker{display:none}.chat-actions>div{position:absolute;right:0;top:30px;z-index:4;width:270px;padding:9px;border:1px solid var(--line);background:#0a100d;box-shadow:0 12px 30px rgba(0,0,0,.45)}.reply-form{display:flex;gap:6px}.reply-form input{min-width:0;flex:1;padding:8px;border:1px solid var(--line);background:#090e0b;color:var(--paper)}.reply-form button,.danger-link{border:1px solid var(--line);background:none;color:var(--paper);font-size:11px;font-weight:700;cursor:pointer}.danger-link{margin-top:7px;padding:6px 9px;border-color:var(--danger);color:var(--danger)}.chat-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--panel)}.chat-composer input{min-width:0;padding:0 12px;border:1px solid var(--line);background:#090e0b;color:var(--paper)}.chat-composer .button{min-height:44px;padding:0 18px}.chat-login{display:block;padding:17px;color:var(--lime);text-align:center}.new-message-button{position:absolute;right:18px;bottom:76px;z-index:3;padding:8px 12px;border:0;background:var(--lime);color:#111;font-weight:700;cursor:pointer}.new-message-button[hidden]{display:none}
.mobile-account{display:none}
@media(max-width:900px){.public-product{padding-top:28px}.match-row{grid-template-columns:92px minmax(0,1fr) 30px}.app-layout{grid-template-columns:1fr}.sidebar{scrollbar-width:none}.match-detail-grid{grid-template-columns:1fr}.chat-panel{position:relative;top:auto}.cheer-list{height:62vh}}
@media(max-width:600px){.hero h1{font-size:46px;line-height:1.1}.ticker-track{animation-duration:18s}.public-product{padding:24px 20px 70px}.public-product .workspace-head{display:block}.workspace .section{padding-top:44px;padding-bottom:44px}.match-row{grid-template-columns:72px minmax(0,1fr) 20px;gap:10px;padding:13px 4px}.match-contest{grid-template-columns:minmax(54px,1fr) auto minmax(54px,1fr);gap:7px}.match-score{min-width:66px;padding:7px 6px;font-size:18px}.match-contest b{font-size:14px}.match-meta{font-size:12px}.mobile-account{display:inline-flex}.post{grid-template-columns:1fr}.cheer-list{height:64dvh}.cheer-line{grid-template-columns:auto minmax(0,1fr) auto}.cheer-line time{display:none}.chat-actions{grid-column:3}.reply{margin-left:16px}.chat-head{padding-inline:14px}}
@media(prefers-reduced-motion:reduce){.ticker-track,.live-label::before{animation:none}}
/* Landing capability table + metric row. Reuses the workspace .metric / .health-table
   /.role-card styles; only the pending-state chip and a little spacing are new. */
.status-chip.is-pending{color:var(--muted)}
.section .metric-grid{margin-top:26px}
.section .metric p{margin:10px 0 0;line-height:1.55}
.section .health-table{margin-top:28px}
.section .health-table th{color:var(--muted);font-size:13px;font-weight:700}
.section .health-table td:nth-child(2){white-space:nowrap}
.section .role-card p{margin:10px 0 0;line-height:1.6}
.section .demo-note{row-gap:8px}
.section .actions{margin-top:36px}
@media(max-width:600px){
  .section .health-table,.section .health-table tbody,.section .health-table tr,.section .health-table td{display:block}
  .section .health-table thead{display:none}
  .section .health-table tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .section .health-table td{padding:2px 0;border:0}
  .section .health-table td:first-child{font-weight:700}
}