:root { color-scheme:dark; --page:#0a0a09; --panel:#11110f; --raised:#181713;
    --field:#22211d; --line:#575143; --gold:#c6a55c; --gold-light:#ead49c;
    --text:#e8e3d7; --muted:#aaa394; --error:#e49b8f; --success:#9ec58c; --focus:#8ecbff; }
* { box-sizing:border-box; }
html { background:#060605; }
body { margin:0; min-width:300px; background:
    linear-gradient(90deg,transparent 0,rgba(198,165,92,.025) 50%,transparent 100%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0,rgba(255,255,255,.012) 1px,transparent 1px,transparent 4px),
    var(--page); color:var(--text); font:16px/1.5 "Segoe UI",Tahoma,sans-serif; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea,summary { outline-color:var(--focus); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
    outline:3px solid var(--focus); outline-offset:2px;
}
a { color:var(--gold-light); }
code,pre { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
code { color:var(--gold-light); }
.shell { width:min(1240px,calc(100% - 32px)); margin:auto; }
header { border-top:2px solid #7b6534; border-bottom:1px solid #4a4437; background:#0d0d0b; }
header .shell { display:flex; align-items:center; justify-content:space-between; min-height:58px; gap:20px; }
.brand { color:var(--gold-light); font:700 1.08rem/1.2 Georgia,"Times New Roman",serif; letter-spacing:.015em; text-decoration:none; }
header .shell>a:last-child:not(.brand) { color:var(--muted); font-size:.9rem; text-decoration:none; }
header .shell>a:last-child:not(.brand):hover { color:var(--gold-light); }
main { padding:34px 0 70px; }
h1,h2,h3,h4 { line-height:1.2; font-family:Georgia,"Times New Roman",serif; }
h1 { margin:0 0 10px; color:var(--gold-light); font-size:clamp(2rem,4vw,2.8rem); font-weight:normal; }
h2 { color:var(--gold-light); font-weight:normal; }
h3 { margin:0 0 14px; }
p { max-width:82ch; }
p,h1,h2,h3,h4,label,legend,button,.button { overflow-wrap:anywhere; }
.intro { color:var(--muted); }
.panel { position:relative; margin:22px 0; padding:22px; border:1px solid var(--line); border-top-color:var(--gold); background:rgba(17,17,15,.94); box-shadow:inset 0 1px rgba(255,255,255,.025); }
.panel::before { content:""; position:absolute; top:-1px; left:-1px; width:34px; border-top:3px solid var(--gold-light); }
.toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:12px; }
.toolbar > * { min-width:0; }
.toolbar .grow { flex:1 1 260px; }
.toolbar.compact { align-items:center; justify-content:flex-end; }
.catalog-picker { min-width:min(290px,100%); }
.catalog-notice { margin:-4px 0 18px; padding:9px 12px; border-left:2px solid var(--gold); background:#17150f; color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
label { display:block; color:var(--muted); font-size:.88rem; }
input,select,textarea { width:100%; min-height:42px; margin-top:5px; padding:8px 10px; border:1px solid var(--line);
    border-radius:1px; background:var(--field); color:var(--text); box-shadow:inset 0 1px 4px rgba(0,0,0,.35); }
textarea { min-height:92px; resize:vertical; }
button,.button { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:8px 13px;
    border:1px solid var(--gold); border-radius:1px; background:#6e592c; color:#fff3d1; font-weight:700; text-decoration:none; cursor:pointer; }
button:hover,.button:hover { background:#836b35; }
button.secondary,.button.secondary { border-color:var(--line); background:#151512; color:var(--text); }
button.secondary:hover,.button.secondary:hover { border-color:var(--gold); background:#1c1a14; color:var(--gold-light); }
button.danger { border-color:#8c4c46; background:transparent; color:var(--error); }
button:disabled { cursor:not-allowed; opacity:.48; }
.actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.tabs { display:flex; gap:0; overflow-x:auto; padding:0; border:1px solid var(--line); border-bottom-color:var(--gold); background:#0e0e0c; }
.tab { flex:0 0 auto; border:0; border-right:1px solid #36332b; border-bottom:3px solid transparent; background:transparent; color:var(--muted); }
.tab[aria-selected="true"] { border-bottom-color:var(--gold-light); background:#211e16; color:var(--gold-light); }
.tab .count { margin-left:6px; color:var(--muted); font-size:.78rem; }
.section-head { display:flex; align-items:start; justify-content:space-between; gap:18px; margin-bottom:18px; }
.section-head h2,.section-head p { margin-top:0; }
.section-head p { margin-bottom:0; color:var(--muted); }
fieldset { min-width:0; margin:14px 0; padding:16px; border:1px solid var(--line); border-radius:0; background:var(--raised); }
legend { padding:0 8px; color:var(--gold-light); font-weight:750; }
.row-head { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:13px; }
.row-head h3,.row-head h4 { margin:0; }
.hint,.empty,.status { color:var(--muted); font-size:.9rem; }
.empty { padding:24px; border:1px dashed #696252; background:#12110e; text-align:center; }
.skill-bars { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.skill-slot { display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:start; margin:10px 0; padding:12px; border:1px solid var(--line); background:#13120f; }
.slot-number { display:grid; width:40px; height:40px; place-items:center; border:1px solid var(--line); color:var(--gold-light); font-weight:750; }
.slot-number.ultimate { border-color:var(--gold); }
.attribute-total { margin:14px 0; font-weight:750; }
.attribute-total.invalid { color:var(--error); }
.discipline { border-top:3px solid var(--gold); }
.allocation { margin:12px 0; padding:14px; border:1px solid var(--line); background:#14130f; }
.inline-check { display:flex; align-items:center; gap:8px; min-height:42px; color:var(--text); }
.inline-check input { width:auto; min-height:0; margin:0; }
.errors { border-color:#9d4339; background:#291918; color:var(--error); }
.errors h2 { color:var(--error); }
.error-link { min-height:30px; margin-left:8px; padding:3px 8px; border-color:currentColor; background:transparent; color:inherit; font-size:.82rem; }
.success { color:var(--success); }
.developer-example { margin-top:24px; padding:14px 16px; border:1px solid var(--line); background:#0e0e0c; }
.developer-example summary { color:var(--gold-light); font-weight:750; cursor:pointer; }
.developer-example h3 { margin-top:18px; }
.developer-example pre { min-height:0; max-height:360px; }
.output-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
pre { min-height:330px; max-height:680px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere;
    margin:0; padding:14px; border:1px solid var(--line); border-radius:0; background:#080807; }
#code-output { min-height:170px; overflow-wrap:anywhere; }
.runtime { display:flex; align-items:center; gap:9px; color:var(--muted); }
.runtime::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--gold); }
.runtime.ready { color:var(--success); }
.runtime.ready::before { background:var(--success); }
.runtime.failed { color:var(--error); }
.runtime.failed::before { background:var(--error); }
[hidden] { display:none!important; }
@media(max-width:980px){ .grid,.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.skill-bars,.output-grid{grid-template-columns:1fr} }
@media(max-width:650px){ header .shell{align-items:flex-start;flex-direction:column;padding:13px 0}.grid,.grid.two,.grid.four{grid-template-columns:1fr}.section-head{display:block}.skill-slot{grid-template-columns:1fr}.slot-number{width:100%} }