.codex-page nav a[aria-current]{color:var(--accent)}.codex-main{max-width:1240px;padding:48px 40px 0}.codex-hero{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:4px 0 32px}.codex-hero .eyebrow{font:10.5px 'IBM Plex Mono',monospace;letter-spacing:.12em;color:var(--muted)}.codex-hero .eyebrow span{margin:0 10px;color:var(--line)}.codex-hero h1{font-family:var(--serif);margin-inline:0}.codex-intro{font-size:15px;line-height:1.7;color:var(--muted);margin:0;text-wrap:pretty}.codex-hero-mark{padding:0 60px;border-left:1px solid var(--line)}.codex-hero-mark .class-insignia{width:140px;height:160px}
.codex-player{display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid var(--line);background:var(--surface);padding:17px 22px;border-radius:3px;margin-bottom:30px}.codex-player-label{font:10.5px 'IBM Plex Mono',monospace;letter-spacing:.13em;color:var(--muted)}.codex-player p{font-size:13px;line-height:1.6;margin:6px 0 0;font-variant-numeric:tabular-nums}.codex-player>a{display:flex;align-items:center;gap:24px;font-size:12px;color:var(--accent);min-height:44px;flex:none}.codex-error{font-size:14px;line-height:1.6;border-left:2px solid var(--red);padding:12px 16px}.codex-tiers{display:flex;gap:28px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:28px;scrollbar-width:thin}.codex-tiers button{white-space:nowrap;font-size:13px;color:var(--muted);background:transparent;border:0;border-bottom:2px solid transparent;padding:14px 0 18px;min-height:48px}.codex-tiers button span{font:10.5px 'IBM Plex Mono',monospace;padding:3px 5px;margin-left:6px;color:var(--muted);border:1px solid var(--line);border-radius:3px}.codex-tiers button:hover,.codex-tiers button[aria-pressed=true]{color:var(--accent)}.codex-tiers button[aria-pressed=true]{border-bottom-color:var(--accent)}
.codex-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:32px;align-items:start}.codex-library{min-width:0}.codex-controls{display:flex;gap:12px}.codex-search{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:3px;padding:0 12px;flex:1;min-width:0;background:var(--surface)}.codex-search:focus-within{outline:2px solid var(--accent);outline-offset:2px}.codex-search svg{width:17px;height:17px;fill:none;stroke:var(--muted);stroke-width:1.5;flex:none}.codex-search input{min-width:0;width:100%;background:transparent;color:var(--fg);border:0;outline:none;font:13px var(--sans);height:44px}.codex-search input::placeholder{color:var(--muted)}.codex-controls select{height:44px;padding:0 28px 0 12px;border:1px solid var(--line);border-radius:3px;background:var(--surface);color:var(--fg);font:12px var(--sans);max-width:180px}.collection-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:18px 0 14px;font:10.5px 'IBM Plex Mono',monospace;color:var(--muted);letter-spacing:.02em}.collection-heading p{margin:0}.collection-heading>span{font-size:10.5px}
.class-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.class-card{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:3px;min-height:150px;padding:18px 14px;background:var(--surface);transition:border-color .15s,background-color .15s;position:relative;min-width:0}.class-card:hover{border-color:var(--muted);background:var(--hover)}.class-card[aria-current]{border-color:var(--fg);background:var(--tile2)}.class-card .class-insignia{width:54px;height:64px}.class-card-copy{min-width:0;flex:1}.class-card-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font:10.5px 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.class-card h2{font:500 17px/1.2 var(--serif);letter-spacing:0;margin:10px 0 8px;overflow-wrap:anywhere}.class-card p{color:var(--muted);font-size:11px;line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.class-state{white-space:nowrap}.class-card[data-state=earned] .class-state,.detail-top[data-state=earned] .class-state{color:var(--green)}.class-card[data-state=obtainable] .class-state,.detail-top[data-state=obtainable] .class-state{color:var(--accent)}.class-card[data-tier=elite] h2{color:var(--tier-elite)}.class-card[data-tier=legendary] h2{color:var(--tier-legendary)}.class-card[data-tier=hybrid] h2{color:var(--tier-hybrid)}.more-classes{display:block;width:100%;margin:20px 0 0;font-size:12px;min-height:44px}.codex-empty{text-align:center;padding:70px 20px;border:1px dashed var(--line);border-radius:3px}.codex-empty h2{font:500 22px var(--serif)}.codex-empty p{font-size:13px;color:var(--muted)}.codex-empty button{color:var(--accent);min-height:44px}
.codex-aside{position:sticky;top:24px}.class-detail{border:1px solid var(--line);border-radius:3px;background:var(--surface);padding:24px}.class-detail[data-tier=hybrid]{border-color:var(--tier-hybrid)}.class-detail[data-tier=elite]{border-color:var(--tier-elite)}.class-detail[data-tier=legendary]{border-color:var(--tier-legendary)}.detail-top{display:flex;justify-content:space-between;gap:12px;font:10.5px 'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.detail-art{display:grid;place-items:center;min-height:166px;border-bottom:1px solid var(--line);margin-bottom:22px;background-image:radial-gradient(var(--line) .7px,transparent .7px);background-size:16px 16px}.detail-art .class-insignia{width:108px;height:128px}.detail-title{font:500 29px/1.12 var(--serif);letter-spacing:-.01em;margin:0 0 14px}.detail-description{font-size:14px;line-height:1.65;color:var(--muted);margin:0}.class-skills{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0}.class-skills span{font:10.5px 'IBM Plex Mono',monospace;border:1px solid var(--line);border-radius:3px;padding:5px 7px;color:var(--muted)}.class-requirement{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}.class-detail .eyebrow{font:10.5px 'IBM Plex Mono',monospace;letter-spacing:.08em;margin:0 0 12px;color:var(--muted)}.class-requirement>p{font-size:13px;line-height:1.65;text-wrap:pretty;margin:0 0 16px}.class-relation{display:flex;align-items:center;gap:10px;min-height:54px;border-bottom:1px solid var(--line);font-size:12px;line-height:1.4}.class-relation:hover{color:var(--accent)}.class-relation .class-insignia{width:24px;height:29px}.class-relation>span{flex:1}.class-relation small{font-size:10.5px;color:var(--muted);flex:none}.class-paths{margin-top:28px}.trial-progress{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:11px;line-height:1.5;padding:12px 0;color:var(--accent)}.trial-progress strong{font:11px 'IBM Plex Mono',monospace;white-space:nowrap}.class-requirement .trial-reward{font:10.5px/1.6 'IBM Plex Mono',monospace;color:var(--muted);margin:0}.class-action{width:100%;font-size:12px;min-height:44px;margin-top:24px;padding:10px 14px}.class-action:disabled{opacity:.8;background:transparent;border-color:var(--green);color:var(--green);cursor:default}.detail-hint,.future-trial{font-size:11px;line-height:1.7;color:var(--muted);margin:14px 0 0}.future-trial{padding:14px;border:1px dashed var(--line);border-radius:4px}.class-action-error{font-size:12px;line-height:1.5;color:var(--red)}
.codex-footer{border-top:1px solid var(--line);margin-top:48px;padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:28px;color:var(--muted)}.codex-footer p{font-size:11px;line-height:1.8;margin:0}.codex-footer>div{display:flex;gap:24px;flex:none}.codex-footer a{font-size:12px;min-height:44px;display:flex;align-items:center}.codex-footer a:hover{color:var(--accent)}.class-dialog{width:min(470px,calc(100% - 24px));max-height:92dvh;overflow:auto;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:3px;padding:0}.class-dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(4px)}.class-dialog .class-detail{border:0;padding:8px var(--dialog-inset) 28px}.class-dialog #close-class{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;position:sticky;top:0;z-index:1;background:var(--surface);padding:12px var(--dialog-inset);border-bottom:1px solid var(--line);font-size:12px}.class-dialog #close-class span{font-size:22px}
@media(max-width:1100px){.codex-layout{grid-template-columns:minmax(0,1fr) 300px;gap:24px}.class-card{gap:10px;padding:14px 12px}.class-card .class-insignia{width:42px;height:50px}.class-card h2{font-size:15px}.class-card-meta{font-size:10.5px}.codex-hero-mark{padding:0 32px}}
@media(max-width:900px){.codex-layout{grid-template-columns:1fr}.codex-aside{display:none}.class-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.class-card{align-items:flex-start;flex-direction:column;gap:12px}.class-card-copy{width:100%}.class-card .class-insignia{width:50px;height:58px}.codex-hero-mark{padding-right:0}}
@media(max-width:760px){.codex-main{padding:28px 20px 0}.codex-page .site-header nav{gap:14px;font-size:11px}.codex-hero{gap:18px;padding-bottom:24px;align-items:flex-start}.codex-hero .eyebrow{font-size:10.5px}.codex-hero .eyebrow span{margin:0 4px}.codex-intro{font-size:13px}.codex-intro br{display:none}.codex-hero-mark{display:none}.codex-player{padding:14px 16px;gap:12px;margin-bottom:18px;align-items:flex-start;flex-direction:column}.codex-player p{font-size:12px}.codex-player>a{min-height:36px}.codex-tiers{gap:22px;margin-bottom:22px}.codex-tiers button{font-size:12px;padding-bottom:14px}.codex-tiers button span{font-size:10.5px;margin-left:3px}.codex-controls{gap:8px}.codex-controls select{max-width:132px;font-size:11px;padding:0 18px 0 8px}.codex-search{padding:0 10px;gap:6px}.codex-search input{font-size:12px}.collection-heading>span{display:none}.class-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.class-card{padding:16px 12px;min-height:203px}.class-card h2{font-size:16px;line-height:1.2}.class-card-meta{font-size:10.5px;gap:8px}.class-card p{font-size:11px}.class-card .class-insignia{width:53px;height:63px}.codex-footer{align-items:flex-start;flex-direction:column;gap:16px;margin-top:32px}.codex-footer p{font-size:10.5px}.codex-footer>div{gap:24px}.class-dialog .detail-title{font-size:28px}}
/* Keep the collection and requirements in view, including with short result sets. */
@media(min-width:901px){.codex-main{padding-top:32px}.codex-hero{padding-bottom:24px}.codex-intro{font-size:14px;line-height:1.6}.codex-hero-mark .class-insignia{width:108px;height:124px}.codex-player{padding:12px 18px;margin-bottom:20px}.codex-tiers{margin-bottom:20px}.codex-aside .class-detail{max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.detail-art{min-height:124px;margin-bottom:18px}.detail-art .class-insignia{width:84px;height:100px}.detail-title{font-size:26px}}
.class-card-meta{font-size:10.5px}.class-card p{font-size:12px;line-height:1.5}
.class-track{width:100%;font-size:12px;min-height:44px;margin-top:20px}
.class-training{display:flex;align-items:center;justify-content:center;width:100%;font-size:12px;min-height:44px;margin-top:12px}
@media(prefers-reduced-motion:reduce){.class-card{transition:none}}