.gallery-page { background: #ece6da; }
.gallery-hero { border-bottom: 2px solid var(--ink); background: var(--paper-hi); }
.gallery-hero__bar { display:flex; justify-content:space-between; gap:20px; align-items:center; max-width:1440px; margin:auto; padding:14px var(--gutter); border-bottom:1px solid var(--rule); font:700 12px/1.2 var(--font-mono); letter-spacing:.08em; }
.gallery-hero__back { text-decoration-thickness:1px; text-underline-offset:4px; }
.gallery-hero__label { margin:0; color:var(--signal); }
.gallery-hero__lang { text-decoration-thickness:1px; text-underline-offset:4px; white-space:nowrap; }
.gallery-hero__body { display:grid; grid-template-columns:minmax(340px,.8fr) minmax(360px,1.2fr); gap:clamp(36px,7vw,110px); max-width:1440px; margin:auto; padding:clamp(42px,6vw,78px) var(--gutter) 48px; }
.gallery-hero__eyebrow { margin:0 0 12px; font:700 12px/1 var(--font-mono); letter-spacing:.16em; color:var(--signal); }
.gallery-hero h1 { margin:0; font:900 clamp(58px,8vw,118px)/.86 var(--font-serif); letter-spacing:-.08em; word-break:keep-all; overflow-wrap:normal; }
.gallery-hero__intro { align-self:end; max-width:680px; }
.gallery-hero__intro>p { margin:0 0 28px; font-size:clamp(18px,2vw,25px); line-height:1.65; }
.gallery-hero__intro dl { display:flex; gap:36px; margin:0; }
.gallery-hero__intro dl div { border-left:4px solid var(--signal); padding-left:14px; }
.gallery-hero__intro dt { font-size:12px; font-weight:700; }
.gallery-hero__intro dd { margin:0; font:700 38px/1.1 var(--font-mono); }
.gallery-hero__notice { max-width:1440px; margin:0 auto; padding:14px var(--gutter); border-top:1px solid var(--rule); color:var(--ink-2); font-size:13px; }
.gallery-main { max-width:1440px; margin:auto; padding:36px var(--gutter) 100px; }
.gallery-filter { display:grid; grid-template-columns:minmax(220px,1.7fr) repeat(4,minmax(140px,1fr)) auto; gap:1px; padding:1px; background:var(--ink); border:1px solid var(--ink); position:sticky; top:0; z-index:10; }
.gallery-filter>div { background:var(--paper-hi); padding:9px 12px 12px; }
.gallery-filter label { display:block; margin-bottom:4px; font:700 10px/1.2 var(--font-mono); letter-spacing:.08em; color:var(--ink-2); }
.gallery-filter input,.gallery-filter select { width:100%; min-height:40px; padding:5px 0; border:0; border-bottom:2px solid var(--rule-strong); background:transparent; font-weight:700; }
.gallery-filter .btn { align-self:stretch; background:var(--marker); border:0; min-width:118px; }
.gallery-results { margin-top:64px; }
.gallery-results__head { display:flex; align-items:baseline; justify-content:space-between; gap:24px; border-bottom:4px solid var(--ink); margin-bottom:28px; }
.gallery-results__head h2 { margin:0; font:800 clamp(32px,5vw,64px)/1 var(--font-serif); }
.gallery-results__head p { margin:0; font:700 14px/1 var(--font-mono); }
.gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--ink); border:1px solid var(--ink); }
.gallery-card { min-width:0; background:var(--paper-hi); display:flex; flex-direction:column; }
.gallery-card__media { position:relative; aspect-ratio:16/11; overflow:hidden; background:#171411; border-bottom:1px solid var(--ink); }
.gallery-card__media video { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-card__play { position:absolute; left:14px; bottom:14px; min-width:64px; min-height:40px; border:1px solid var(--paper-hi); background:rgba(25,22,19,.88); color:var(--paper-hi); font-weight:800; }
.gallery-card__format { position:absolute; right:0; top:0; padding:6px 10px; background:var(--marker); color:var(--ink); font:700 11px/1 var(--font-mono); }
.gallery-card__body { display:flex; flex:1; flex-direction:column; padding:22px; }
.gallery-card__index { margin:0 0 8px; color:var(--signal); font:700 11px/1 var(--font-mono); letter-spacing:.1em; }
.gallery-card h3 { margin:0 0 16px; font:800 clamp(20px,2vw,28px)/1.25 var(--font-serif); word-break:keep-all; overflow-wrap:normal; }
.gallery-card__tags { display:flex; flex-wrap:wrap; gap:5px; }
.gallery-tag { display:inline-flex; min-height:27px; border:1px solid var(--rule-strong); font:700 11px/1.2 var(--font-sans); }
.gallery-tag span { display:flex; align-items:center; padding:4px 6px; background:var(--paper-band); color:var(--ink-2); font:700 9px/1 var(--font-mono); }
.gallery-tag:not(:has(span:only-child)) { padding-right:7px; align-items:center; gap:7px; }
.gallery-tag--engine { border-color:var(--signal); color:var(--signal); }
.gallery-tag--model { border-color:#24634d; color:#174c3a; }
.gallery-tag--unknown { border-style:dashed; color:var(--ink-2); }
.gallery-card__description { margin:18px 0 24px; color:var(--ink-2); font-size:14px; line-height:1.65; }
.gallery-card__detail { margin-top:auto; align-self:flex-start; }
.gallery-detail { width:min(1100px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; border:2px solid var(--ink); background:var(--paper-hi); color:var(--ink); }
.gallery-detail::backdrop { background:rgba(20,17,14,.72); }
.gallery-detail__head { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:10px 12px 10px 22px; border-bottom:1px solid var(--ink); background:var(--marker); }
.gallery-detail__label { margin:0; font:800 11px/1 var(--font-mono); letter-spacing:.12em; }
.gallery-detail__close { width:44px; height:44px; border:0; background:var(--ink); color:var(--paper); font-size:26px; }
.gallery-detail__layout { display:grid; grid-template-columns:minmax(260px,.75fr) minmax(340px,1.25fr); gap:0; border-bottom:1px solid var(--ink); }
.gallery-detail__visual { background:#171411; padding:28px; display:flex; justify-content:center; }
.gallery-detail__visual video { width:min(100%,320px); max-height:600px; display:block; }
.gallery-detail__info { padding:36px; }
.gallery-detail__info h2 { margin:0 0 22px; font:800 clamp(30px,4vw,52px)/1.1 var(--font-serif); }
.generation-spec { margin:30px 0 0; border-top:2px solid var(--ink); }
.generation-spec div { display:grid; grid-template-columns:150px 1fr; gap:14px; padding:12px 0; border-bottom:1px solid var(--rule); }
.generation-spec dt { font:700 11px/1.4 var(--font-mono); color:var(--ink-2); }
.generation-spec dd { margin:0; font-weight:700; }
.gallery-prompt { padding:32px 36px 44px; }
.gallery-prompt__head { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.gallery-prompt h3 { font:800 24px/1.2 var(--font-serif); }
.gallery-prompt pre { white-space:pre-wrap; overflow-wrap:anywhere; margin:16px 0 8px; padding:24px; background:var(--deck); color:var(--deck-ink); font:13px/1.8 var(--font-mono); }
.gallery-prompt [role=status] { min-height:1.5em; margin:0; color:#174c3a; font-weight:700; }
@media (max-width:1000px) { .gallery-filter{grid-template-columns:repeat(2,minmax(0,1fr));position:static}.gallery-filter .btn{min-height:58px}.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:680px) { .gallery-hero__bar,.gallery-results__head{align-items:flex-start;flex-direction:column}.gallery-hero__body{grid-template-columns:1fr;gap:38px;padding-top:48px}.gallery-hero h1{font-size:clamp(54px,19vw,82px)}.gallery-hero__intro>p{font-size:17px}.gallery-filter{grid-template-columns:1fr}.gallery-grid{grid-template-columns:1fr}.gallery-detail__layout{grid-template-columns:1fr}.gallery-detail__info,.gallery-prompt{padding:24px 18px}.generation-spec div{grid-template-columns:1fr;gap:4px}.gallery-prompt__head{align-items:flex-start;flex-direction:column}.gallery-main{padding-bottom:60px} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.gallery-card__media video{animation:none} }
@media (forced-colors:active) { .gallery-tag,.gallery-card,.gallery-filter{border:1px solid CanvasText}.gallery-card__format{border:1px solid CanvasText} }
