:root{--systems-surface:var(--panel);--systems-border:var(--line);--systems-text:var(--text);--systems-muted:var(--muted);--systems-accent:var(--gold);--systems-radius:14px}
.systems-head{padding:0 0 42px}.systems-title-row{display:flex;align-items:center;gap:10px}.systems-head h1{margin:0;font:650 clamp(1.8rem,3vw,2rem)/1.1 var(--display);letter-spacing:-.04em}.systems-head>p{max-width:60ch;margin:10px 0 0;color:var(--systems-muted);font-size:.94rem;text-wrap:pretty}.systems-group{margin:0 0 48px}.systems-group-head{display:flex;align-items:baseline;gap:8px;margin:0 0 14px}.systems-group-head h2{margin:0;font-size:1rem;letter-spacing:-.015em}.systems-group-head span{color:var(--dim);font:500 .72rem var(--mono)}
.systems-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.system-item{min-width:0;border:1px solid var(--systems-border);border-radius:var(--systems-radius);overflow:hidden;background:var(--systems-surface)}.system-cover,.system-detail-cover{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg-2);border:0;border-radius:0;box-shadow:none;color:var(--systems-text);text-decoration:none}.system-cover{aspect-ratio:16/9;min-height:0}.system-cover::before,.system-cover::after,.system-detail-cover::before,.system-detail-cover::after{display:none}.system-mark{position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);color:rgba(255,255,255,.055);font-size:clamp(8rem,16vw,15rem);font-weight:700;line-height:.8;letter-spacing:-.08em}.system-cover-name{position:relative;z-index:1;max-width:78%;font-size:1.1rem;font-weight:600;letter-spacing:-.025em;text-align:center;text-wrap:balance}.system-meta{padding:14px}.system-meta h3{margin:0;font-size:1.05rem;letter-spacing:-.02em}.system-meta h3 a{color:var(--systems-text);text-decoration:none}.system-description{margin:7px 0 0;color:var(--systems-muted);font-size:.9rem;line-height:1.5;text-wrap:pretty}.system-category{margin:12px 0 0;color:var(--dim);font:.68rem var(--mono)}.system-state{display:block;margin-top:6px;color:var(--dim);font:500 .65rem var(--mono);letter-spacing:.04em;text-transform:uppercase}.system-cover,.system-meta h3 a,.system-action{transition:transform 150ms cubic-bezier(.2,0,0,1),border-color 150ms cubic-bezier(.2,0,0,1),color 150ms cubic-bezier(.2,0,0,1)}@media (hover:hover){.system-item:hover{border-color:var(--line-strong)}.system-item:hover .system-cover{transform:translateY(-2px)}.system-item:hover .system-meta h3 a{color:var(--gold-2)}}
.system-detail{max-width:980px;padding:0}.system-back{display:inline-flex;align-items:center;min-height:44px;margin-bottom:18px;color:var(--muted);font-size:.9rem;text-decoration:none}.system-back::before{content:"←";margin-inline-end:8px}.system-detail-cover{aspect-ratio:16/9;min-height:0;border:1px solid var(--systems-border);border-radius:var(--systems-radius)}.system-detail-cover .system-mark{font-size:clamp(8rem,22vw,18rem)}.system-detail-cover .system-cover-name{font-size:clamp(1.4rem,3vw,2rem)}.system-detail-head{padding:28px 0}.system-detail-head>p:first-child{margin:0 0 8px;color:var(--systems-muted);font:.72rem var(--mono)}.system-detail-head h1{max-width:22ch;margin:0;font-size:clamp(2rem,4vw,3rem);line-height:1.08;letter-spacing:-.05em;text-wrap:balance}.system-summary{max-width:60ch;margin:14px 0;color:var(--systems-muted);font-size:1rem;line-height:1.55;text-wrap:pretty}.system-outcome{border-block:1px solid var(--systems-border);padding:28px 0}.system-outcome h2,.system-facts h2{margin:0;font:.7rem var(--mono);letter-spacing:.06em;text-transform:uppercase}.system-outcome>p{max-width:48ch;margin:12px 0;font-size:1.1rem;line-height:1.5;text-wrap:pretty}.system-action{display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;border-radius:8px;background:var(--gold);color:#13110a;font-weight:600;text-decoration:none}.system-action-secondary{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--text)}.system-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding-top:32px}.system-facts ul{margin:12px 0 0;padding-inline-start:18px;color:var(--systems-muted);line-height:1.6}.system-facts li+li{margin-top:7px}
/* Shared framed surfaces and true two-pixel control pills. */
.system-item{padding:var(--frame-inset);border:1px solid var(--systems-border);border-radius:var(--frame-radius);box-shadow:var(--frame-shadow);transition:border-color 150ms cubic-bezier(.2,0,0,1),box-shadow 150ms cubic-bezier(.2,0,0,1),transform 150ms cubic-bezier(.2,0,0,1)}
.system-cover{border-radius:var(--frame-inner-radius);outline:1px solid rgba(255,255,255,.10);outline-offset:-1px}
.system-meta{padding:18px 10px 10px}
@media (hover:hover){.system-item:hover{border-color:var(--line-strong);box-shadow:var(--frame-shadow-hover);transform:translateY(-2px)}.system-item:hover .system-cover{transform:none}}
.system-detail-cover{border:1px solid var(--systems-border);border-radius:var(--frame-radius);box-shadow:var(--frame-shadow)}
.systems-group-head>span,.system-category,.system-state,.system-detail-head>p:first-child,.system-back,.system-action{display:inline-flex;align-items:center;min-height:28px;border:var(--pill-border-width) solid var(--line);border-radius:var(--pill-radius);padding:3px 9px}
.systems-group-head>span,.system-category,.system-state,.system-detail-head>p:first-child{color:var(--dim)}
.system-category{width:max-content;margin:12px 6px 0 0;flex-wrap:wrap}
.system-state{width:max-content;margin-top:6px;flex-wrap:wrap}
.system-back{min-height:44px;padding:7px 12px;margin-bottom:18px}
.system-action{min-height:44px;border-color:var(--gold);border-radius:var(--pill-radius)}
.system-action-secondary{border-color:var(--line-strong);box-shadow:none}
@media(max-width:980px){.systems-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.systems-grid,.system-facts{grid-template-columns:1fr}.systems-head{padding-bottom:32px}.system-detail-head{padding-block:22px}.system-item{padding:8px;border-radius:28px}.system-cover{border-radius:20px}}
@media(prefers-reduced-motion:reduce){.system-cover,.system-meta h3 a,.system-action,.system-item{transition:none}.system-cover:active,.system-action:active,.system-item:hover{transform:none}}

/* Generated 960 × 600 resource covers retain the shared framed-card treatment. */
.system-cover,.system-detail-cover{aspect-ratio:8/5}
.system-cover-image{display:block;width:100%;height:100%;object-fit:cover}
.system-detail-cover{padding:var(--frame-inset);border-radius:var(--frame-radius)}
.system-detail-cover .system-cover-image{border-radius:var(--frame-inner-radius);outline:1px solid rgba(255,255,255,.10);outline-offset:-1px}

/* Display titles: the plain result-first title leads; the product name sits under it. */
.system-subtitle{margin:4px 0 0;color:var(--systems-muted,var(--dim));font:500 .72rem var(--mono);letter-spacing:.02em}
.system-detail-head .system-subtitle{margin:8px 0 12px;font-size:.8rem}