.template-catalog,.template-detail { color:#1c2030; padding-top:2rem; padding-bottom:3rem; }
.template-catalog-header { max-width:860px; margin-bottom:2.5rem; }
.template-catalog h1,.template-detail h1 { font-family:Newsreader,Georgia,serif; letter-spacing:-.045em; line-height:1.05; font-size:clamp(2.5rem,5vw,4.8rem); margin-bottom:1.3rem; }
.template-eyebrow { font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#626577; margin-bottom:.75rem; }
.template-lead { font-size:clamp(1.06rem,2vw,1.28rem); color:#5d6070; line-height:1.7; max-width:760px; }
.template-filters { display:flex; flex-wrap:wrap; gap:.6rem; padding:0 0 2.2rem; }
.template-filters a { display:inline-block; padding:.7rem 1rem; border:1px solid #dcdce5; border-radius:999px; color:#3b4050; text-decoration:none; font-size:.88rem; }
.template-filters a[aria-current],.template-filters a:hover { background:#23243b; border-color:#23243b; color:white; }
.template-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.template-card { --template-primary:#4338ca; --template-secondary:#38bdf8; --template-bg:linear-gradient(135deg,#4338ca,#38bdf8); --template-font:inherit; border:1px solid #e3e4eb; border-radius:1.25rem; overflow:hidden; background:#fff; display:flex; flex-direction:column; box-shadow:0 5px 25px #17153206; }
.template-card-art { height:160px; background:var(--template-bg); position:relative; overflow:hidden; display:flex; align-items:center; padding:2rem; }
.template-card-art::after { content:''; position:absolute; width:170px; height:170px; border:1px solid #ffffff70; border-radius:50%; right:-25px; bottom:-60px; }
.template-card-art>.site-icon { width:48px; height:48px; color:#fff; padding:9px; border-radius:14px; background:#15152e90; }
.template-card-mark { font-family:Georgia,serif; position:absolute; right:2rem; top:0; font-size:8rem; line-height:1.2; color:#fff; opacity:.55; transform:rotate(-12deg); }
.template-card-mark span { font-size:4rem; }
.template-card-copy { padding:1.6rem; display:flex; flex-direction:column; flex:1; }
.template-card h3 { font:700 1.32rem/1.3 var(--template-font); margin-bottom:.7rem; }
.template-card h3 a { color:#202337; text-decoration:none; }
.template-card h3 a:hover { text-decoration:underline; }
.template-card-copy>p:not(.template-eyebrow) { font-size:.95rem; line-height:1.65; color:#626577; }
.template-card-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; padding-top:1.5rem; margin-top:auto; font-size:.86rem; }
.template-card-bottom>span { color:#626577; }
.template-card-bottom a { font-weight:700; color:#4338ca; }
.template-style-brutalist { border:2px solid #202337; border-radius:0; box-shadow:6px 6px 0 #202337; }
.template-style-glassmorphism .template-card-art>.site-icon { backdrop-filter:blur(8px); border:1px solid #ffffff70; }
.template-empty { background:#f6f5fb; border-radius:1rem; padding:3rem; }
.template-catalog-note { display:flex; align-items:flex-start; gap:1rem; padding:2rem 0; margin-top:2rem; border-top:1px solid #e3e4eb; color:#626577; }
.template-catalog-note .site-icon { width:28px; height:28px; flex-shrink:0; }
.template-home { padding:4rem 0; background:#f7f7fb; }
.template-home-header { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:2rem; }
.template-home-header h2 { font-family:Newsreader,Georgia,serif; font-size:clamp(2rem,4vw,3.4rem); letter-spacing:-.035em; max-width:700px; }
.template-home-header p { color:#626577; max-width:650px; margin:1rem 0 0; }
.template-home-header>a { flex-shrink:0; }
.template-home .template-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.template-breadcrumb { font-size:.86rem; margin-bottom:2.5rem; color:#626577; }
.template-breadcrumb a { color:#4338ca; }
.template-detail-header { max-width:950px; }
.template-intro { max-width:800px; line-height:1.8; color:#51566a; margin:1.8rem 0 2.5rem; }
.template-player { max-width:900px; margin:2rem auto 3rem; padding:clamp(1rem,3vw,2rem); background:var(--template-bg); border-radius:1.5rem; }
.template-player-label { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; width:fit-content; max-width:100%; padding:.5rem .8rem; margin-bottom:1rem; border-radius:99px; background:#17152be6; color:#fff; font-size:.8rem; }
.template-player-label>span:last-child { border-left:1px solid #ffffff60; padding-left:.6rem; }
.template-live-dot { width:7px; height:7px; border-radius:50%; background:#8df5bc; }
.template-player-card { background:#fff; border-radius:1rem; padding:clamp(1.3rem,4vw,3rem); min-height:300px; }
.template-style-glassmorphism .template-player-card { background:#fffffff2; backdrop-filter:blur(16px); border:1px solid #fff; }
.template-player.template-style-brutalist,.template-style-brutalist .template-player-card { border-radius:0; }
.template-player h2 { font:700 clamp(1.4rem,3vw,2rem)/1.3 var(--template-font); margin-bottom:1.2rem; overflow-wrap:anywhere; }
.template-player p { line-height:1.7; }
.template-player .site-button { margin-top:.6rem; }
.template-progress { color:#626577; font-size:.82rem; margin-bottom:.4rem; }
.template-player progress { width:100%; height:6px; display:block; margin-bottom:1.8rem; border:0; border-radius:10px; background:#e4e4ef; accent-color:#4338ca; }
.template-player progress::-webkit-progress-bar { background:#e4e4ef; border-radius:10px; }
.template-player progress::-webkit-progress-value { background:#4338ca; border-radius:10px; }
.template-options { display:grid; gap:.7rem; }
.template-option { padding:1rem 1.2rem; border:1px solid #d5d6e4; border-radius:.75rem; background:white; color:#252940; text-align:left; line-height:1.45; }
.template-option:not(:disabled):hover { border-color:#4338ca; background:#f5f4ff; }
.template-option:disabled { opacity:1; cursor:default; }
.template-option.is-correct { background:#e8f8ed; border-color:#277344; color:#18502c; }
.template-option.is-incorrect { background:#fff0f1; border-color:#ad3947; color:#8c2632; }
.template-feedback { border-left:3px solid #4338ca; padding:.8rem 1rem; margin:1.2rem 0; background:#f3f2fd; color:#34334c; line-height:1.65; }
.template-b2b { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:2rem; margin:3rem 0; background:#f3f2fa; border-radius:1rem; }
.template-b2b h2 { font-size:1.7rem; }
.template-b2b p { max-width:620px; color:#626577; }
.template-b2b>.site-button { max-width:320px; flex-shrink:0; }
.template-answers { max-width:900px; margin:4rem auto 2rem; }
.template-answers h2 { font-family:Newsreader,Georgia,serif; font-size:clamp(2rem,4vw,3rem); }
.template-answers>p { color:#626577; margin-bottom:1.5rem; }
.template-answers details { border-top:1px solid #dfe1eb; padding:1.2rem 0; }
.template-answers summary { cursor:pointer; font-weight:700; line-height:1.5; }
.template-answers details ol { margin-top:1.2rem; color:#626577; }
.template-answers details li { margin:.5rem 0; }
.template-back { max-width:900px; margin:2rem auto; }
.template-detail [hidden] { display:none!important; }
.template-detail :focus-visible,.template-catalog :focus-visible,.template-home :focus-visible { outline:3px solid #a995fb; outline-offset:4px; }
@media(max-width:1199px) { .template-home .template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:900px) { .template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .template-b2b,.template-home-header { display:block; } .template-home-header>a { margin-top:1.4rem; } .template-b2b>.site-button { margin-top:1rem; } }
@media(max-width:575px) { .template-grid,.template-home .template-grid { grid-template-columns:1fr; } .template-catalog,.template-detail { padding-top:.5rem; } .template-catalog-header { margin-bottom:1.8rem; } .template-card-art { height:135px; } .template-b2b { padding:1.5rem; } .template-player { padding:.75rem; margin-left:-.1rem; margin-right:-.1rem; } .template-player-label { font-size:.7rem; } .template-empty { padding:1.5rem; } }