:root { color-scheme:dark; --bg:#241a26; --panel:#352738; --raised:#443046; --header:#62384e; --ink:#fceff4; --muted:#cbb8c5; --accent:#f2aac7; --mint:#e9ca91; --line:#5a4055; font:16px/1.6 system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); }
h1,h2,p,figure,dl,dd { margin:0; }
h1 { font-size:2rem; line-height:1.2; margin-bottom:.6rem; }
h2 { font-size:1.13rem; line-height:1.4; margin-bottom:.7rem; }
a { color:var(--accent); text-underline-offset:3px; }
a:hover { color:#fff; }
img { display:block; max-width:100%; }
button,input,select { font:inherit; }
button { cursor:pointer; }
[hidden] { display:none !important; }
:focus-visible { outline:2px solid var(--mint); outline-offset:4px; }
.shell { width:min(1230px,calc(100% - 72px)); margin-inline:auto; }
header { background:var(--header); box-shadow:0 2px 10px #10091640; }
.header-inner { display:flex; justify-content:space-between; gap:1rem; align-items:center; min-height:60px; padding-block:.6rem; }
.brand { display:flex; align-items:center; gap:.6rem; font-size:1.2rem; font-weight:700; color:var(--ink); text-decoration:none; white-space:nowrap; }
nav { display:flex; gap:1.3rem; flex-wrap:wrap; }
nav a { color:#f4dce7; font-size:.88rem; text-decoration:none; padding-block:.35rem; }
nav a[aria-current] { color:#fff; border-bottom:2px solid var(--accent); }
main { padding-block:2.2rem 3rem; min-height:calc(100vh - 150px); }
.back { display:inline-block; margin-bottom:1.3rem; font-size:.9rem; text-decoration:none; }
.profile { display:grid; grid-template-columns:240px minmax(0,1fr); gap:1.6rem; align-items:start; margin-bottom:1.7rem; }
.avatar { width:240px; height:240px; padding:7px; background:var(--panel); border-radius:9px; box-shadow:0 4px 14px #110a1830; }
.avatar img { width:100%; height:100%; object-fit:cover; object-position:right 35%; border-radius:5px; }
.subtitle { margin-bottom:.65rem; color:var(--mint); }
.profile p:last-child { margin-top:.7rem; max-width:65ch; color:var(--muted); font-size:.94rem; }
.badges { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.7rem; }
.badges span,.badge { font-size:.75rem; padding:.13rem .55rem; border-radius:12px; background:var(--header); color:var(--ink); }
.facts > div { display:flex; gap:.45rem; margin-bottom:.3rem; }
dt { color:var(--muted); }
dt::after { content:":"; }
.panel { background:var(--panel); border:1px solid #6b4d612d; border-radius:10px; padding:1.25rem; box-shadow:0 3px 10px #100a1524; margin-bottom:1.25rem; }
.muted { color:var(--muted); font-size:.9rem; }
.color-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.65rem 1rem; margin-block:.9rem .65rem; }
.color-chip { display:flex; align-items:center; text-align:left; gap:.6rem; color:var(--ink); background:none; border:1px solid transparent; border-radius:6px; padding:.3rem; min-width:0; font-size:.8rem; }
.color-chip:hover { background:var(--raised); border-color:var(--line); }
.chip { width:38px; height:38px; background:var(--swatch); border-radius:6px; border:1px solid #ffffff40; flex-shrink:0; }
code { display:block; color:var(--muted); font-size:.72rem; }
.check { display:flex; align-items:center; gap:.4rem; color:var(--muted); font-size:.8rem; }
input[type=checkbox] { accent-color:var(--accent); width:15px; height:15px; }
.status { color:var(--mint); font-size:.85rem; margin-top:.5rem; }
.status:empty { display:none; }
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.cards h2 { color:var(--accent); }
.cards p,.cards li { font-size:.92rem; }
ul { padding-left:1.15rem; margin:0; }
li { margin:.3rem 0; }
.feature { display:grid; grid-template-columns:1fr 1.6fr; gap:1.5rem; align-items:center; }
.feature img { border-radius:5px; }
.button { display:inline-flex; justify-content:center; align-items:center; padding:.5rem .9rem; margin-top:.85rem; border:1px solid #e5a8c0; border-radius:6px; background:var(--header); color:var(--ink); font-size:.88rem; text-decoration:none; }
.button:hover { background:#7d4864; }
.secondary { background:transparent; border-color:var(--line); }
.page-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.page-links a { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:1rem 1.25rem; text-decoration:none; }
.page-links span { display:block; color:var(--muted); font-size:.9rem; margin-top:.2rem; }
.page-heading { margin-bottom:1.6rem; }
.character-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,250px)); gap:1rem; }
.character-card { padding:.7rem; background:var(--panel); border-radius:9px; text-decoration:none; text-align:center; box-shadow:0 4px 12px #130d1830; border:1px solid transparent; }
.character-card:hover { border-color:var(--accent); }
.character-card .avatar { width:100%; height:auto; aspect-ratio:1; padding:0; }
.character-card h2 { margin:.5rem 0 0; color:var(--ink); font-size:1rem; }
.character-card p { color:var(--muted); font-size:.85rem; }
.character-card > span { font-size:.75rem; }
.sheet { padding:.65rem; }
.sheet img { width:100%; height:auto; border-radius:4px; }
.sheet figcaption { display:flex; justify-content:space-between; align-items:center; gap:.7rem; flex-wrap:wrap; padding:.65rem .35rem .3rem; color:var(--muted); font-size:.86rem; }
.sheet figcaption > div { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.sheet .button { margin:0; }
.notice { padding:1.25rem; background:#51334740; border:1px solid #a2738e; border-radius:7px; }
.notice p { margin:.4rem 0; color:var(--muted); }
.notes { grid-template-columns:repeat(2,minmax(0,1fr)); }
#checklist { margin-bottom:.4rem; }
.text-link { display:inline-block; margin-top:.5rem; }
summary { cursor:pointer; font-weight:600; color:var(--accent); }
.filters { padding:.8rem 1rem; }
.filter-fields { display:grid; grid-template-columns:2fr 1fr auto; gap:1rem; align-items:end; margin-top:.9rem; }
.filter-fields label { display:grid; gap:.4rem; font-size:.83rem; color:var(--muted); }
input[type=search],select { width:100%; min-height:42px; padding:.5rem .7rem; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:5px; }
.filter-fields button { margin:0; min-height:42px; }
.gallery-count { margin-bottom:.75rem; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.art-card { background:var(--panel); border-radius:8px; padding:.55rem; border:1px solid var(--line); }
.art-card > a { display:block; position:relative; overflow:hidden; border-radius:4px; }
.art-card img { width:100%; aspect-ratio:1.2; object-fit:cover; }
.art-card:first-child img { object-position:center 28%; }
.art-card .badge { position:absolute; left:.6rem; bottom:.6rem; background:#392233e8; }
.art-card h2 { font-size:.95rem; margin:.65rem .2rem .25rem; }
.art-card:hover { border-color:var(--accent); }
footer { padding-block:1.3rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; color:var(--muted); font-size:.8rem; }
.skip { position:absolute; top:1rem; left:1rem; z-index:5; padding:.6rem 1rem; background:var(--header); transform:translateY(-200%); }
.skip:focus { transform:none; }
dialog { width:min(1050px,calc(100% - 2rem)); max-height:calc(100% - 2rem); color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:.8rem; }
dialog::backdrop { background:#110b16e8; }
.viewer-bar { display:flex; align-items:center; gap:.85rem; margin-bottom:.65rem; }
.viewer-bar h2 { margin:0 auto 0 0; }
.viewer-bar a { font-size:.85rem; }
.viewer-bar button { min-width:42px; min-height:42px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:5px; font-size:1.4rem; }
#viewer-image { width:100%; height:min(72vh,780px); object-fit:contain; }
@media(max-width:900px) {
 .header-inner { align-items:start; flex-direction:column; gap:.4rem; }
 nav { gap:1.2rem; }
 .color-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .cards { grid-template-columns:1fr; gap:0; }
 .notes { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
 .feature { grid-template-columns:1fr; }
}
@media(max-width:580px) {
 .shell { width:calc(100% - 32px); }
 main { padding-top:1.5rem; }
 .profile { grid-template-columns:1fr; gap:1rem; }
 .avatar { width:180px; height:180px; }
 nav { gap:.6rem 1rem; }
 nav a { font-size:.78rem; }
 .color-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; }
 .panel { padding:1rem; }
 .sheet { padding:.4rem; }
 .notes,.page-links,.filter-fields { grid-template-columns:1fr; }
 .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
 .viewer-bar { flex-wrap:wrap; }
 .viewer-bar h2 { font-size:1rem; }
 .viewer-bar a { font-size:.75rem; }
}
@media(prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }
/* Gallery and reference additions */
.filter-fields { grid-template-columns:1.7fr 1fr 1.25fr auto; }
.reference-card img { object-fit:contain; background:#211a22; }
.art-origin { color:var(--muted); font-size:.75rem; margin:.15rem .2rem .35rem; }
.adult-placeholder { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.4rem; aspect-ratio:1.2; background:var(--raised); padding:1.5rem; text-align:center; color:var(--muted); font-size:.8rem; }
.adult-placeholder strong { font-size:2rem; color:var(--accent); }
.adult-placeholder span:last-child { margin-bottom:.8rem; }
.adult-reference > p { margin-top:.7rem; }
.art-card img { object-fit:contain; background:#211a22; }
@media(max-width:900px) { .filter-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:580px) { .filter-fields { grid-template-columns:1fr; } .gallery-grid { grid-template-columns:1fr; } }
/* AI artwork stays behind an explicit reveal control. */
.avatar img { object-position:left center; }
.art-spoiler { border-radius:4px; overflow:hidden; }
.art-spoiler summary { list-style:none; color:var(--accent); text-align:center; }
.art-spoiler summary::-webkit-details-marker { display:none; }
.spoiler-cover { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.55rem; aspect-ratio:1.2; padding:1rem; background:linear-gradient(135deg,#493247,#2b2030); }
.spoiler-cover strong { font-size:1rem; }
.spoiler-cover > span { font-size:.85rem; color:var(--muted); }
.spoiler-toggle { display:block; padding:.35rem; background:var(--raised); font-size:.78rem; }
.when-open { display:none; }
.art-spoiler[open] .spoiler-cover,.art-spoiler[open] .when-closed { display:none; }
.art-spoiler[open] .when-open { display:inline; }
.art-spoiler > a { display:block; position:relative; }
.ai-card .art-origin { color:var(--accent); font-weight:600; }
.reference-priority { margin-bottom:1.25rem; }
.art-credit,.art-notes { font-size:.85rem; margin:.4rem .2rem; color:var(--muted); white-space:pre-wrap; overflow-wrap:anywhere; }
.notes p { white-space:pre-wrap; }