.prerequisite-name{display:flex;gap:8px;align-items:center;line-height:1.5}.prerequisite-name .system-icon{width:24px;height:24px}.prerequisite-effect{display:block;color:var(--text-2);font-size:12px;line-height:1.7;margin-top:10px}.system-prerequisite{margin-top:24px;border-top:1px solid var(--line-2);padding-top:16px}.system-prerequisite>p{font-size:9px;color:var(--accent)}.system-prerequisite summary{font-size:12px;line-height:1.6;cursor:pointer;padding:12px 0;color:var(--text-1)}.system-prerequisite summary:focus-visible{outline:2px solid var(--accent-fill-hover);outline-offset:4px}
.specializations,.buildings{position:relative}.capability-panel,.building-card{position:relative;border:1px solid var(--line-3);background:var(--bg-1-solid);isolation:isolate}.capability-panel{margin-top:32px}.system-header{display:flex;align-items:center;gap:24px;padding:20px 26px;border-bottom:1px solid var(--line-2);background:var(--bg-3)}.system-header h3{font-size:32px;letter-spacing:-.02em}.system-header>.mono{font-size:9px;color:var(--accent)}.system-header>.mono:last-child{margin-left:auto;color:var(--text-3)}.system-layout{display:grid;grid-template-columns:1.08fr 1fr;min-width:0}.system-visual{position:relative;min-width:0;display:flex;flex-direction:column;background:var(--bg-0);border-right:1px solid var(--line-2)}.system-visual .micro{padding:16px 20px;border-top:1px solid var(--line-2);font-size:9px;color:var(--text-2)}.system-controls{min-width:0;padding:24px}.system-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px}.system-tabs button{display:flex;align-items:center;gap:7px;text-align:left;max-width:100%;font-size:12px;line-height:1.4;min-height:44px;border:1px solid var(--line-3);background:var(--bg-2);padding:9px 12px;position:relative;transition:transform .2s}.system-tabs button:hover{transform:translateY(-2px);border-color:var(--accent)}.system-tabs button[aria-selected=true]{background:var(--accent-fill);color:var(--on-accent);border-color:var(--accent-fill)}.system-icon{display:inline-block;flex:0 0 auto;width:30px;height:30px;mask-repeat:no-repeat;mask-position:center;mask-size:contain;background:currentColor;color:var(--accent)}.system-tabs .system-icon{width:23px;height:23px;color:inherit}.system-readout h4{font-size:24px;line-height:1.2;margin:0 0 14px;font-weight:600}.system-readout>p{font-size:17px;line-height:1.65}.system-readout .system-prerequisite{margin-top:22px;padding-top:16px;border-top:1px solid var(--line-2);font-size:12px;line-height:1.8}.system-prerequisite .mono{color:var(--accent);font-size:9px}.system-controls>.micro{margin-top:20px}.system-controls>.text-link{font-size:13px;margin-top:18px;display:inline-block}.building-filters{margin-bottom:28px}.building-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}.building-card{padding:26px;min-width:0}.building-card>.eyebrow{font-size:9px;margin-bottom:22px}.building-title{display:flex;align-items:center;gap:18px;margin-bottom:20px;min-height:60px}.building-title .system-icon{width:48px;height:48px}.building-title h3{font-size:25px;line-height:1.2;letter-spacing:-.015em}.building-card>p{font-size:15px;line-height:1.65}.building-card .building-badge{font-size:10px;color:var(--accent);padding-left:10px;border-left:2px solid var(--accent);margin-top:18px}.building-card details{margin-top:24px;border-top:1px solid var(--line-3)}.building-card summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;min-height:52px;padding:12px 0;color:var(--accent);font:10px/1.6 Plex,monospace;list-style:none}.building-card summary::-webkit-details-marker{display:none}.building-card details[open] summary>span{transform:rotate(45deg)}.building-card summary:focus-visible{outline:2px solid var(--accent-fill-hover);outline-offset:4px}.building-card dl{margin:4px 0 0}.building-card dt{color:var(--text-3);font:10px/1.6 Plex,monospace;margin-top:15px}.building-card dd{margin:5px 0 0;font-size:13px;line-height:1.6}.building-costs>span{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:8px;padding:5px 0}.building-costs .system-icon{width:18px;height:18px}.building-costs strong{font-weight:400;color:var(--text-1)}.buildings>.micro{margin-top:24px}.building-card:hover{border-color:var(--accent)}
@media(max-width:1100px){.building-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.system-layout{grid-template-columns:1fr 1fr}.system-header>.mono:last-child{display:none}.system-controls{padding:20px}}
@media(max-width:760px){.system-header{padding:16px;gap:14px}.system-header h3{font-size:27px}.system-header>.mono{font-size:8px}.system-layout{display:block}.system-visual{border-right:0;border-bottom:1px solid var(--line-2)}.system-visual .micro{font-size:8px;padding:12px 16px}.system-controls{padding:20px 16px}.system-tabs{gap:6px}.system-tabs button{font-size:11px;padding:8px;flex:1 1 45%}.system-readout h4{font-size:23px}.system-readout>p{font-size:16px}.building-grid{grid-template-columns:1fr;gap:16px}.building-card{padding:22px}.building-title h3{font-size:25px}.building-card>p{font-size:16px}.building-filters{gap:6px;flex-wrap:wrap}.building-filters button{font-size:12px;min-height:44px}.building-card summary{font-size:11px}.building-card .c2-corners{opacity:.7}}

/* Same C2 glass, frame tokens and typography as the game menu. */
.clip-panel{margin:0;min-width:0;width:100%;position:relative;background:var(--bg-0)}.clip-screen{position:relative;aspect-ratio:16/9;overflow:hidden;isolation:isolate;background:#070c10}.clip-screen::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px var(--line-3);background:linear-gradient(180deg,#070c1070,transparent 24%,transparent 75%,#070c1070)}.clip-poster,.clip-screen video{display:block;width:100%;height:100%;object-fit:contain}.clip-screen video{position:absolute;inset:0;opacity:0;transition:opacity .28s ease}.clip-screen.is-playing video{opacity:1}.clip-code{position:absolute;top:14px;left:14px;z-index:1;padding:6px 9px;background:#070c10ed;color:var(--accent);font-size:9px;letter-spacing:.1em;pointer-events:none}.clip-play{position:absolute;bottom:14px;right:14px;z-index:1;min-width:72px;min-height:44px;padding:10px 16px;background:var(--bg-0);color:var(--accent);border:1px solid var(--accent);font:12px Plex,monospace;transition:transform .2s}.clip-play:hover{transform:translateY(-2px);background:var(--accent-fill);color:var(--on-accent)}.clip-play:focus-visible,.clip-thumbnail:focus-visible{outline:2px solid var(--accent-fill-hover);outline-offset:3px}.clip-panel figcaption{padding:18px 20px;border-top:1px solid var(--line-2)}.clip-caption{color:var(--accent);font-size:10px;line-height:1.7;letter-spacing:.04em}.clip-description{color:var(--text-2);font-size:14px;line-height:1.6;margin-top:8px}.system-visual{justify-content:center}.building-showcase{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:22px;margin-bottom:32px;padding:20px;border:1px solid var(--line-3);background:var(--bg-1-solid);position:relative}.building-clips{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}.clip-thumbnail{padding:0;overflow:hidden;border:1px solid var(--line-3);background:var(--bg-2);text-align:left;min-width:0;transition:transform .2s}.clip-thumbnail:hover{transform:translateY(-2px);border-color:var(--accent)}.clip-thumbnail[aria-pressed=true]{border-color:var(--accent);background:var(--accent-fill);color:var(--on-accent)}.clip-thumbnail img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}.clip-thumbnail span{display:block;font:11px/1.5 Plex,monospace;padding:12px 9px;overflow-wrap:anywhere}.building-showcase::before{content:"";position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(var(--accent),var(--accent)) top left/24px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) top left/2px 24px no-repeat,linear-gradient(var(--accent),var(--accent)) bottom right/24px 2px no-repeat,linear-gradient(var(--accent),var(--accent)) bottom right/2px 24px no-repeat}
@media(max-width:1000px){.building-showcase{grid-template-columns:minmax(0,1fr)}.building-clips{grid-template-columns:repeat(4,minmax(0,1fr))}.system-layout{grid-template-columns:1fr}.system-visual{border-right:0;border-bottom:1px solid var(--line-2)}}
@media(max-width:600px){.building-showcase{padding:12px;gap:16px}.building-clips{grid-template-columns:repeat(2,minmax(0,1fr))}.clip-panel figcaption{padding:16px}.clip-code{top:8px;left:8px;font-size:8px}.clip-play{bottom:8px;right:8px}.clip-description{font-size:13px}}
@media(prefers-reduced-motion:reduce){.clip-screen video,.clip-play,.clip-thumbnail{transition:none;transform:none}}
.motion-paused .clip-screen video,.motion-paused .clip-play,.motion-paused .clip-thumbnail{transition:none;transform:none}