:root { color-scheme: dark; --bg:#111713; --panel:#1a231c; --line:#303c30; --text:#eef0df; --muted:#a9b1a0; --accent:#d2df98; font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; color:inherit; background:transparent; border:1px solid var(--line); border-radius:10px; padding:10px 16px; }
button:hover { border-color:var(--accent); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
button:disabled { cursor:wait; opacity:.5; }
a { color:inherit; text-decoration:none; }
.site-header { height:90px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding:0 5vw; }
.brand { display:flex; align-items:center; gap:14px; font-size:14px; letter-spacing:.13em; }
.brand-icon { display:grid; place-items:center; width:43px; height:43px; border:1px solid #677354; border-radius:50%; color:var(--accent); font-family:serif; font-size:24px; }
.brand small { display:block; font-size:10px; color:var(--muted); letter-spacing:.18em; margin-top:5px; }
.header-right { display:flex; gap:20px; align-items:center; }
.readonly-badge { border:1px solid #4d6145; color:var(--accent); padding:6px 10px; border-radius:6px; font-size:12px; }
.quiet { color:var(--muted); font-size:13px; }
.gallery-main { max-width:1680px; margin:auto; padding:0 5vw; }
.intro { padding:62px 0 38px; max-width:780px; }
.eyebrow { font-size:11px; letter-spacing:.17em; color:var(--accent); line-height:1.7; margin:0 0 12px; overflow-wrap:anywhere; }
h1 { font-family:"Noto Serif SC","Songti SC","SimSun",serif; font-size:clamp(30px,3.6vw,53px); font-weight:500; letter-spacing:.04em; margin:0 0 20px; }
.muted { color:var(--muted); font-size:14px; line-height:1.8; }
.toolbar { display:flex; gap:12px; align-items:center; margin:6px 0 26px; flex-wrap:wrap; }
.search-wrap { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; padding:0 14px; min-width:260px; max-width:600px; flex:1; height:48px; background:#18201a; }
.search-wrap span { font-size:25px; color:var(--muted); }
.search-wrap input { min-width:0; width:100%; border:0; background:transparent; color:var(--text); outline:0; height:100%; font-size:14px; }
select { height:48px; background:#18201a; border:1px solid var(--line); color:var(--text); border-radius:10px; padding:0 14px; }
#count { margin-left:auto; font-size:12px; }
.gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.art-card { border:1px solid var(--line); border-radius:13px; overflow:hidden; background:var(--panel); transition:transform .15s ease,border-color .15s ease; }
.art-card:hover { transform:translateY(-4px); border-color:#718262; }
.card-open { display:block; padding:0; width:100%; border:none; border-radius:0; text-align:left; }
.card-picture { position:relative; aspect-ratio:4/3; background:#e4e5db; overflow:hidden; display:grid; place-items:center; }
.card-picture img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.audio-symbol { color:#314936; font-size:clamp(78px,9vw,156px); line-height:1; }
.card-audio { display:block; width:calc(100% - 32px); margin:0 16px 16px; height:42px; }
.detail-audio-symbol { color:#314936; font-size:clamp(120px,20vw,260px); line-height:1; align-self:end; }
.detail-audio { width:min(80%,600px); align-self:start; }
.version-audio-symbol { display:grid; place-items:center; width:62px; height:57px; margin-bottom:5px; background:#dfe1d7; color:#314936; border-radius:4px; font-size:35px; }
.model-badge { position:absolute; left:12px; bottom:12px; padding:5px 9px; border-radius:5px; background:#17271fe8; color:var(--accent); font-size:11px; }
.card-info { padding:18px 18px 19px; }
.card-kicker { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; margin-bottom:11px; gap:6px; }
.card-info h2 { font-size:17px; margin:0 0 9px; line-height:1.5; }
.asset-code { font-size:10px; letter-spacing:.04em; color:#99a18c; overflow-wrap:anywhere; }
.tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
.tag { color:#b9c4a9; font-size:10px; background:#283426; padding:4px 7px; border-radius:4px; overflow-wrap:anywhere; }
.gallery-footer { display:flex; justify-content:space-between; color:#839079; border-top:1px solid var(--line); margin-top:55px; padding:24px 0 36px; font-size:11px; gap:20px; }
dialog { color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:0; }
dialog::backdrop { background:#040a07d9; backdrop-filter:blur(8px); }
.detail-dialog { width:min(1540px,94vw); max-height:92vh; }
.detail-toolbar { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:18px 24px; border-bottom:1px solid var(--line); }
.detail-toolbar .eyebrow { margin:0 0 3px; }
.detail-toolbar h2 { font-size:20px; margin:0; }
.icon-button { width:36px; height:36px; flex-shrink:0; display:grid; place-items:center; padding:0; font-size:25px; border-radius:50%; }
.detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 270px; }
.preview-stage { min-height:400px; height:min(72vh,800px); display:grid; place-items:center; background:#dfe1d7; position:relative; overflow:hidden; }
.preview-image { width:100%; height:100%; object-fit:contain; cursor:zoom-in; }
.preview-stage model-viewer { width:100%; height:100%; min-height:400px; background:linear-gradient(135deg,#e5e6db,#bcc5b2); }
.detail-side { padding:22px; overflow-y:auto; max-height:72vh; }
.version-picker { display:flex; gap:8px; overflow-x:auto; overscroll-behavior:contain; padding-bottom:10px; }
.version-button { min-width:72px; width:72px; padding:4px; flex-shrink:0; border-radius:8px; color:var(--muted); font-size:11px; }
.version-button img { width:62px; height:57px; object-fit:contain; display:block; background:#dfe1d7; border-radius:4px; margin-bottom:5px; }
.version-button.active,.mode-button.active { border-color:var(--accent); color:var(--accent); background:#2d3a27; }
.view-modes { display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; }
.mode-button { font-size:12px; padding:8px 10px; }
.detail-side .quiet { margin-top:8px; width:100%; }
.footnote { font-size:11px; color:#909b85; line-height:1.8; margin-top:24px; }
.image-dialog { width:96vw; max-width:96vw; height:94vh; max-height:94vh; background:#171d17; }
.image-dialog img { width:100%; height:100%; object-fit:contain; }
.image-close { position:absolute; top:15px; right:15px; background:#1b251de8; z-index:1; }
.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(ellipse at 50% 20%,#293723,var(--bg) 65%); }
.login-card { width:min(460px,100%); border:1px solid #43513a; padding:38px; border-radius:18px; background:#19221beb; }
.login-card h1 { font-size:28px; margin-top:22px; }
.login-card form { margin-top:30px; display:grid; gap:12px; }
.login-card label { font-size:13px; color:var(--muted); }
.login-card input { width:100%; height:48px; padding:0 14px; background:#111a14; border:1px solid #43513a; border-radius:8px; color:var(--text); }
.primary { background:var(--accent); color:#1b2916; font-weight:600; display:flex; justify-content:space-between; margin-top:4px; padding:14px; border-color:var(--accent); }
.login-error { color:#efb396; font-size:13px; display:none; }
.login-error.visible { display:block; }
[hidden] { display:none !important; }
@media(min-width:1800px) { .gallery { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media(max-width:1100px) { .gallery { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:800px) { .gallery { grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }.detail-layout { grid-template-columns:1fr; }.detail-side { max-height:30vh;padding:16px; }.preview-stage { height:53vh;min-height:260px; }.preview-stage model-viewer { min-height:260px; }.intro { padding-top:38px; }.site-header { height:76px; } }
@media(max-width:480px) { .gallery { grid-template-columns:1fr; }.intro .muted { font-size:13px; }.brand small { display:none; }.header-right { gap:10px; }.search-wrap { min-width:180px; }.login-card { padding:26px; }.detail-toolbar h2 { font-size:16px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important;scroll-behavior:auto!important; } }