.systems-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; margin:22px 0; }.systems-toolbar label { display:flex; flex-wrap:wrap; gap:10px; align-items:center; color:#c4a8bc; font-size:.69rem; }.systems-toolbar input,.systems-toolbar select { padding:11px 13px; color:#e7c7ab; background:#0f141f; border:1px solid #b87b654d; border-radius:7px; font:inherit; font-size:.77rem; min-width:0; }.systems-note { color:#bba5bc; font-size:.72rem; line-height:1.9; }.systems-demo { border-left:2px solid #b85c76; padding-left:13px; color:#bca2ba; font-size:.68rem; line-height:1.9; margin-top:22px; }
.systems-native-icon { display:block; position:relative; width:35px; height:35px; overflow:hidden; border:1px solid #c6ac8059; border-radius:5px; background:#0b1320; flex-shrink:0; }.systems-native-icon img { position:absolute; top:0; left:0; width:160%; height:160%; max-width:none; object-fit:fill; }
.runes-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:start; }.runes-group { padding:13px; border:1px solid #ac776443; border-radius:12px; background:linear-gradient(140deg,#44232e1c,#11151e); }.runes-heading { display:flex; justify-content:space-between; align-items:center; padding:9px 6px 19px; border-bottom:1px solid #b382632e; margin-bottom:13px; }.runes-heading h4 { font-size:1rem; color:#f0d4b1; font-weight:500; }.runes-heading>span { color:#ad94af; font-size:.62rem; }.rune-item { display:flex; align-items:start; gap:13px; padding:15px; border:1px solid #ae806330; border-radius:8px; background:#ffffff02; margin-top:10px; }.rune-item>div { min-width:0; }.rune-item h5 { color:#e4cfda; font-size:.78rem; line-height:1.6; font-weight:500; margin-bottom:5px; }.rune-item small { color:#b49bb4; font-size:.63rem; display:block; line-height:1.8; }.rune-item p { color:#d2b79e; font-size:.73rem; line-height:1.8; margin:7px 0; }.runes-group>.systems-note { padding:20px 8px; }
.anima-presets { display:flex; flex-wrap:wrap; gap:9px; }.loyalty-profile .anima-preset { padding:12px 15px; background:#141722; border-color:#b6806440; color:#bfaaba; }.anima-preset small { margin-left:9px; color:#e2bd83; font-size:.5rem; letter-spacing:.5px; }.loyalty-profile .anima-preset[aria-pressed=true] { border-color:#cc818477; background:linear-gradient(120deg,#7931443d,#201822); box-shadow:inset 0 -2px #ccaa77; color:#efd4af; }
.anima-layout { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:23px; align-items:start; }.anima-boards { display:grid; gap:17px; min-width:0; }.anima-category { padding:22px; border:1px solid color-mix(in srgb,var(--anima-color),transparent 65%); border-left:2px solid var(--anima-color); border-radius:11px; background:radial-gradient(ellipse at bottom,color-mix(in srgb,var(--anima-color),transparent 94%),transparent 65%),#10151e; }.anima-category-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:22px; }.anima-category-heading h4 { color:var(--anima-color); font-size:.89rem; font-weight:500; }.anima-category-heading small { color:#b29ab3; font-size:.63rem; }.anima-board { position:relative; width:min(100%,580px); aspect-ratio:3/1; margin:0 auto; border:1px solid color-mix(in srgb,var(--anima-color),transparent 75%); border-radius:8px; background:linear-gradient(165deg,transparent 45%,color-mix(in srgb,var(--anima-color),transparent 94%)); }
.loyalty-profile .anima-slot { position:absolute; width:10%; aspect-ratio:1; height:auto; transform:translate(-50%,-50%); padding:0; border-radius:50%; border:1px solid color-mix(in srgb,var(--anima-color),transparent 15%); background:radial-gradient(circle at 35% 30%,#2d3c43,#071019 72%); box-shadow:0 0 0 3px #0a141e,0 0 0 4px color-mix(in srgb,var(--anima-color),transparent 70%); display:grid; place-items:center; }.anima-slot::before { content:''; position:absolute; inset:-7px; border:1px solid color-mix(in srgb,var(--anima-color),transparent 60%); clip-path:polygon(50% 0,94% 25%,94% 75%,50% 100%,6% 75%,6% 25%); pointer-events:none; }.loyalty-profile .anima-slot[aria-pressed=true] { border-color:#f1c991; box-shadow:0 0 0 3px #101522,0 0 0 5px #dc9d8799; }.anima-slot .systems-native-icon { width:67%; height:67%; border-radius:50%; border:0; }.anima-aside { border:1px solid #b7806545; border-radius:12px; background:linear-gradient(140deg,#4a233024,#11151e); padding:23px 19px; }.anima-aside h4 { font-size:.88rem; font-weight:500; color:#e7c6a3; margin-bottom:18px; }.anima-aside dl { margin:17px 0; }.anima-aside dl>div { border-top:1px solid #ae7a602b; padding:12px 0; }.anima-aside dt { color:#bba2b9; font-size:.68rem; line-height:1.7; }.anima-aside dd { color:#dfbe97; font-size:.71rem; margin:7px 0 0; }.anima-aside .anima-detail-heading { margin-top:27px; padding-top:20px; border-top:1px solid #b1796340; }.anima-detail strong { display:block; font-size:.83rem; color:#e1bf9e; line-height:1.7; margin-bottom:15px; }.anima-detail .systems-native-icon { margin-bottom:13px; }
@media(max-width:1050px) { .runes-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }.anima-layout { grid-template-columns:1fr; }.anima-aside dl { display:grid; grid-template-columns:repeat(2,1fr); gap:0 22px; } }
@media(max-width:650px) { .runes-columns { grid-template-columns:1fr; }.systems-toolbar { align-items:start; }.systems-toolbar label { width:100%; }.systems-toolbar input { flex:1; }.anima-category { padding:17px 13px; }.anima-board { margin:8px 0; }.anima-presets { gap:7px; }.loyalty-profile .anima-preset { padding:11px 9px; font-size:.66rem; }.anima-preset small { display:block; margin:6px 0 0; } }
@media(prefers-reduced-motion:reduce) { .anima-system *,.runes-system * { transition:none!important; animation:none!important; } }
.systems-native-icon img { width:var(--icon-width,100%); height:var(--icon-height,100%); visibility:hidden; }.systems-native-icon.is-ready img { visibility:visible; }
.rune-item .systems-native-icon { width:40px; height:40px; border-radius:4px; box-sizing:content-box; }.rune-item { align-items:center; }