.ability-tabs{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-bottom:0;background:var(--card)}
.ability-tabs button{min-height:72px;padding:15px 20px;border:0;border-right:1px solid var(--line);border-bottom:3px solid transparent;background:transparent;color:var(--fg);text-align:left;cursor:pointer;transition:background .25s,border-color .25s}
.ability-tabs button:last-child{border-right:0}.ability-tabs button:hover{background:var(--soft)}.ability-tabs button.active{border-bottom-color:var(--acid);background:color-mix(in srgb,var(--acid) 8%,var(--card))}
.ability-tabs b{display:block;font:600 10px DM Mono;color:var(--muted)}.ability-tabs button.active b{color:var(--acid)}.ability-tabs span{display:block;margin-top:7px;font:500 12px Onest,sans-serif}
.demo-layout{grid-template-columns:minmax(0,1fr) 300px;min-height:590px}.demo-main{min-width:0}.scene-demo{padding-top:130px}
.artifact-card{margin-top:26px;border:1px solid var(--line);background:var(--soft);padding:28px}.artifact-head{display:flex;justify-content:space-between;align-items:center}.artifact-head span,.artifact-head small{font:8px DM Mono;color:var(--muted)}
.artifact-card h3{margin:34px 0 10px;font:600 clamp(24px,3vw,42px)/1.05 Manrope,sans-serif;letter-spacing:-.04em}.artifact-card>p{max-width:620px;margin:0 0 26px;color:var(--muted);font-size:12px;line-height:1.65}
.artifact-items{border-top:1px solid var(--line)}.artifact-items>div{display:grid;grid-template-columns:46px 1fr;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--line)}.artifact-items span{font:9px DM Mono;color:var(--acid)}.artifact-items p{margin:0;font-size:12px;line-height:1.45}
.artifact-card footer{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:24px}.artifact-card footer span{font:8px DM Mono;color:var(--muted)}.artifact-card footer button{border:0;background:var(--fg);color:var(--bg);padding:13px 17px;font:9px DM Mono;cursor:pointer}.artifact-card footer button:hover{background:var(--acid)}
@media(max-width:900px){.demo-layout{grid-template-columns:1fr}.explain-card{display:none}.ability-tabs button{padding:13px 14px}.ability-tabs span{font-size:10px}}
@media(max-width:600px){.scene-demo{padding-top:100px}.ability-tabs{grid-template-columns:repeat(2,1fr)}.ability-tabs button:nth-child(2){border-right:0}.ability-tabs button{min-height:64px}.ability-tabs span{font-size:9px}.artifact-card{padding:20px}.artifact-card footer{align-items:stretch;flex-direction:column}.artifact-card footer button{width:100%}}