
:root{--bg:#f6f5f0;--ink:#182b29;--muted:#677974;--accent:#126c5c;--line:#dbe3dc;--white:#fff;--wash:#e6ede5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:"Microsoft YaHei UI","PingFang SC",sans-serif}a{color:inherit}button,input{font:inherit}.wrap{max-width:1480px;margin:auto;padding:0 36px}.top{height:68px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:13px;font-weight:800;letter-spacing:.12em}.top span{font-size:12px;color:var(--muted)}.hero{display:grid;grid-template-columns:1.3fr .7fr;gap:50px;align-items:end;padding:78px 0 66px}.eyebrow{font-size:12px;color:var(--accent);letter-spacing:.18em;font-weight:700}.hero h1{font-family:Georgia,"Songti SC",serif;font-size:clamp(42px,6.4vw,88px);line-height:1.05;letter-spacing:-.05em;margin:20px 0 24px}.hero p{font-size:16px;line-height:1.9;color:var(--muted);max-width:570px;margin:0}.hero-side{border-left:1px solid var(--line);padding-left:30px}.hero-side strong{display:block;font-family:Georgia,serif;color:var(--accent);font-size:56px;font-weight:400;line-height:1}.hero-side p{font-size:13px;line-height:1.8;margin-top:12px}.hero-side a{display:inline-block;margin-top:22px;color:var(--accent);font-size:14px;font-weight:700;text-decoration:none}.toolbar{border-top:1px solid var(--ink);padding:28px 0 25px}.toolbar-head{display:flex;justify-content:space-between;align-items:end;gap:20px}.toolbar h2{font-family:Georgia,"Songti SC",serif;font-size:28px;margin:0}.toolbar small{color:var(--muted)}.search{border:1px solid var(--line);border-radius:6px;padding:11px 14px;background:var(--white);width:240px;outline-color:var(--accent)}.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.filters button{border:1px solid var(--line);border-radius:30px;background:transparent;padding:8px 15px;cursor:pointer;color:var(--muted);font-size:13px}.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:white}.summary{font-size:13px;color:var(--muted);margin:23px 0 17px}.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.card{background:var(--white);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;min-width:0}.card[hidden]{display:none}.card-media{background:var(--wash);padding:10px}.media{display:grid;grid-template-columns:1fr;gap:5px}.media:has(> :nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr))}.media img,.media video{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#edf1ec;border-radius:3px}.media figure{margin:0;min-width:0}.media figcaption{font-size:11px;color:var(--muted);padding:4px}.card-body{padding:18px;display:flex;flex-direction:column;flex:1}.card-meta{font-size:11px;color:var(--accent);display:flex;justify-content:space-between;gap:8px}.card h3{font-size:16px;line-height:1.5;margin:10px 0}.card p{font-size:13px;color:var(--muted);line-height:1.7;margin:0 0 18px}.source{font-size:12px;color:var(--accent);text-decoration:none;margin-top:auto;padding-top:10px;font-weight:700}.source:hover{text-decoration:underline}.empty{display:none;padding:55px 0;color:var(--muted)}footer{margin-top:80px;border-top:1px solid var(--line);padding:28px 0 45px;color:var(--muted);font-size:12px;line-height:1.8}footer a{color:var(--accent)}@media(max-width:1000px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.wrap{padding:0 20px}.hero{grid-template-columns:1fr;gap:30px;padding:55px 0 45px}.hero-side{padding-left:18px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.toolbar-head{align-items:start;flex-direction:column}.search{width:100%}.card-body{padding:12px}.card h3{font-size:14px}.top span{display:none}}@media(max-width:420px){.gallery{grid-template-columns:1fr}}

.no-preview{min-height:100px;display:flex;align-items:center;justify-content:center;padding:20px;color:#677974;font-size:12px;text-align:center}.media img:focus{outline:2px solid #126c5c}

/* Consistent media windows; multi-image examples are horizontally navigable. */
.gallery{align-items:stretch}.card{min-width:0}.card-media{position:relative;padding:0;background:#e8eee8}.card-media .media,.card-media .media:has(> :nth-child(2)){display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:0}.card-media .media::-webkit-scrollbar{display:none}.card-media .media>img,.card-media .media>video,.card-media .media>figure{flex:0 0 100%;width:100%;min-width:0;scroll-snap-align:start}.card-media .media img,.card-media .media video{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;border-radius:0;background:#e8eee8}.card-media .media figure{position:relative}.card-media .media figcaption{position:absolute;bottom:7px;left:8px;padding:3px 7px;background:rgba(255,255,255,.9);border-radius:4px;font-size:11px;color:#263e37}.no-preview{aspect-ratio:4/3;min-height:0;display:flex;align-items:center;justify-content:center;padding:20px}.media-nav{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.95);border:1px solid #dbe3dc;border-radius:6px;padding:3px;box-shadow:0 2px 8px rgba(24,43,41,.1)}.media-nav button{border:0;border-radius:3px;background:transparent;color:#126c5c;font-size:16px;line-height:1;min-width:28px;min-height:27px;cursor:pointer}.media-nav button:hover{background:#e6ede5}.media-nav button:disabled{color:#b6c2ba;cursor:default}.media-nav span{min-width:33px;text-align:center;color:#526a61;font-size:11px}.card-body{min-height:150px}.card h3{margin-bottom:8px}.card p{margin-bottom:10px}.source{padding-top:12px}@media(max-width:700px){.card-body{min-height:140px}}

/* Gallery redesign: warm editorial canvas, real case imagery and compact browsing. */
:root{--bg:#f5f2eb;--ink:#252824;--muted:#666d65;--accent:#345d4d;--line:#dedfd6;--white:#fffefa;--wash:#e7e9df;--dark:#1f3029}
body{font-family:"Microsoft YaHei UI","PingFang SC",system-ui,sans-serif;color:var(--ink)}
.wrap{max-width:1560px;padding:0 48px}.top{height:80px;border-color:var(--line)}.brand{font-size:13px;letter-spacing:.13em}.top span{font-size:12px;color:var(--muted)}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,.88fr);align-items:center;gap:56px;padding:48px 0 72px}.hero h1{font-family:Georgia,"Songti SC",serif;font-size:clamp(48px,5.3vw,78px);line-height:1.12;letter-spacing:-.045em;margin:24px 0}.hero h1 em{font-style:normal;color:var(--accent)}.hero p{font-size:16px;line-height:1.9;max-width:510px}.eyebrow{font-size:11px;letter-spacing:.16em;color:var(--accent)}
.hero-actions{display:flex;align-items:center;gap:24px;margin-top:32px}.hero-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;background:var(--dark);color:#fff;text-decoration:none;font-size:14px;font-weight:700;border-radius:4px}.hero-actions span{font-size:12px;color:var(--muted)}
.hero-art{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:145px 145px;gap:8px;padding:12px;background:#e5e7dc;border-radius:8px;overflow:hidden}.hero-art img{width:100%;height:100%;object-fit:cover;display:block;border-radius:4px}.hero-art img:first-child{grid-row:span 2}.hero-art-note{position:absolute;bottom:24px;left:24px;background:rgba(31,48,41,.9);color:white;padding:8px 12px;font-size:11px;letter-spacing:.08em;border-radius:3px}
.toolbar{border-color:var(--ink);padding:32px 0 12px}.toolbar-head{align-items:center}.toolbar h2{font-family:Georgia,"Songti SC",serif;font-size:32px;margin:8px 0 0}.search{width:280px;min-height:48px;background:var(--white);border-color:#d3d9ce;border-radius:4px}.filters{gap:8px;margin-top:24px}.filters button{min-height:44px;padding:8px 16px;color:#4e6055;background:#eeefe8;border:1px solid transparent;border-radius:4px}.filters button:hover{border-color:#9aada0}.filters button[aria-pressed=true]{background:var(--dark);color:white;border-color:var(--dark)}.summary{margin:18px 0;color:var(--muted)}
.gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px;align-items:start}.card{border:0;border-radius:4px;background:transparent;overflow:hidden}.card-media{padding:0;background:var(--wash);border-radius:5px;overflow:hidden}.media{gap:0}.media img,.media video,.media figure img{width:100%;height:230px;object-fit:cover;display:block}.media figure{margin:0;position:relative}.media figcaption{position:absolute;left:8px;bottom:8px;background:rgba(31,48,41,.85);color:white;padding:4px 8px;font-size:11px;border-radius:3px}.media-nav{padding:8px 10px;background:var(--wash)}.media-nav button{min-width:36px;min-height:36px}.card-body{padding:16px 2px 4px;display:flex;flex-direction:column;gap:8px}.card-meta{font-size:11px;letter-spacing:.02em;color:var(--accent)}.card-meta span:last-child{color:var(--muted)}.card h3{font-size:17px;line-height:1.5;margin:0}.card p{font-size:13px;line-height:1.7;color:var(--muted);margin:0}.source{font-size:12px;margin-top:4px;color:var(--accent);text-decoration:none;font-weight:700}.source:hover{text-decoration:underline}.empty{padding:40px 0;color:var(--muted)}footer{margin-top:80px;padding:32px 0;border-top:1px solid var(--line);font-size:12px;line-height:1.8;color:var(--muted)}
@media(max-width:1050px){.wrap{padding:0 32px}.hero{gap:32px;grid-template-columns:1fr 1fr}.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.wrap{padding:0 20px}.top{height:64px}.top span{display:none}.hero{display:flex;flex-direction:column;align-items:stretch;gap:32px;padding:40px 0 48px}.hero h1{font-size:48px;margin:16px 0}.hero p{font-size:15px}.hero-actions{margin-top:24px;gap:16px}.hero-art{grid-template-rows:105px 105px}.toolbar-head{display:block}.toolbar h2{font-size:28px}.search{width:100%;margin-top:20px}.filters{gap:6px;margin-top:16px}.filters button{font-size:12px;padding:8px 12px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}.media img,.media video,.media figure img{height:160px}.card h3{font-size:15px}.card p{font-size:12px}.card-meta{font-size:10px}.card-body{padding-top:12px}footer{margin-top:48px}}
@media(max-width:380px){.media img,.media video,.media figure img{height:130px}.hero h1{font-size:42px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{scroll-behavior:auto!important}}

/* Text-only cases have a compact, explicit presentation. */
.card.text-case{background:#e9ede4;border:1px solid #d9e1d6;border-radius:5px;min-height:200px}.text-case .card-body{padding:20px;min-height:0;gap:12px}.text-case-label{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid #cad6ca;color:#345d4d;font-size:12px;font-weight:700}.text-case-label span{font-weight:400;color:#666d65}.text-case .source{margin-top:4px}.media figure{min-width:0}

/* Case browsing: media controls occupy their own row, never the video controls. */
.gallery{align-items:stretch;gap:24px 20px}.card{background:#fffefa;border:1px solid #e2e4db;border-radius:10px;overflow:hidden;display:flex;flex-direction:column}.card-media{border-radius:0;background:#ecefe9}.card-media .media img,.card-media .media video{aspect-ratio:4/3;object-fit:contain;background:#e9ede7}.card-media .media-nav{position:static;width:100%;min-height:42px;justify-content:center;border:0;border-top:1px solid #dfe5dc;border-radius:0;box-shadow:none;background:#f5f7f1;padding:2px}.media-nav button{min-height:36px;min-width:44px}.card-body{padding:18px;min-height:150px}.card h3{font-size:17px}.card p{line-height:1.7}.source{margin-top:auto;padding-top:14px}.text-case{min-height:200px}@media(max-width:700px){.gallery{gap:14px}.card-body{padding:13px;min-height:130px}.card-media .media img,.card-media .media video{height:auto;aspect-ratio:4/3}}
.language-switch{background:transparent;border:1px solid #c8d7cb;border-radius:20px;padding:7px 15px;color:#245647;cursor:pointer;font-size:12px;font-weight:700}.language-switch:hover,.language-switch:focus-visible{background:#e6ede5;outline-color:#126c5c}@media(max-width:700px){.top .language-switch{display:block;margin-left:auto}}

/* Model discovery follows the existing gallery controls and stays readable on narrow screens. */
.model-filter-row{display:flex;align-items:center;gap:12px;margin-top:18px;color:var(--muted);font-size:13px}.model-filter-row select{min-height:42px;max-width:100%;padding:8px 34px 8px 12px;border:1px solid #d3d9ce;border-radius:4px;background:var(--white);color:var(--ink);font:inherit}.model-filter-row select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.model-badge{align-self:flex-start;color:#50685b;background:#eff3ed;border-radius:3px;padding:4px 7px;font-size:11px;line-height:1.4}.card-body .source+.model-badge{margin-top:0}@media(max-width:700px){.model-filter-row{flex-wrap:wrap}}

/* A case opens as a focused reading panel; the collection remains visible underneath. */
.case-details-button{align-self:flex-start;border:1px solid #abc2b2;border-radius:5px;background:#f7faf5;color:#175f4c;padding:8px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}.case-details-button:hover,.case-details-button:focus-visible{background:#dfece2;outline-color:#175f4c}.case-dialog{position:fixed;inset:0 0 0 auto;margin:0;width:min(580px,100%);max-width:none;height:100dvh;max-height:none;padding:0;border:0;background:#fbfcf8;color:#182c25;box-shadow:-20px 0 70px #19352730}.case-dialog::backdrop{background:#10241bb3}.case-panel{height:100%;overflow:auto}.case-panel-head{display:flex;align-items:center;justify-content:space-between;padding:23px 30px;border-bottom:1px solid #e3e9df;position:sticky;top:0;background:#fbfcf8;z-index:1}.case-kicker{font-size:11px;letter-spacing:.18em;font-weight:700;color:#57816d}.case-close{border:0;background:#e9f0e8;border-radius:50%;width:38px;height:38px;font-size:24px;cursor:pointer;color:#315d4b}.case-panel-content{padding:35px 30px 60px}.case-category{font-size:12px;font-weight:700;color:#28816b}.case-panel h2{font-size:30px;line-height:1.25;letter-spacing:-.02em;margin:10px 0 18px}.case-value{color:#53685e;line-height:1.8}.case-panel-model{display:inline-block;margin:10px 0 28px;padding:5px 9px;border-radius:4px;background:#edf3eb;color:#4b6b59;font-size:12px}.case-prompts{border-top:1px solid #dce5d9;padding-top:25px}.case-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.case-section-head h3{margin:0;font-size:17px}.case-copy{background:none;border:1px solid #c9d9c9;border-radius:5px;padding:7px 11px;color:#24694f;cursor:pointer}.case-attribution{color:#708078;font-size:12px;line-height:1.6}.case-prompt-list pre{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.75 ui-monospace,Consolas,monospace;background:#eef3ec;border:1px solid #e0e9de;border-radius:7px;padding:16px}.case-original{display:inline-block;margin-top:26px;color:#126c55;font-weight:700;text-decoration:none}.case-original:hover{text-decoration:underline}@media(max-width:600px){.case-dialog{width:100%}.case-panel-head{padding:18px 20px}.case-panel-content{padding:25px 20px 50px}.case-panel h2{font-size:25px}}

.case-preview .media{display:flex;overflow-x:auto;gap:8px;max-height:340px;border-radius:8px;background:#e9efe7}.case-preview img,.case-preview video{max-width:100%;max-height:340px;object-fit:contain;flex:0 0 auto}.card{cursor:pointer}.card a,.card button,.card video{cursor:pointer}.other-source{display:inline-block;margin:8px 8px 0 0;color:#126c55;font-size:13px}

.case-model-notes{border-top:1px solid #dce5d9;padding:22px 0 18px}.case-model-notes[hidden]{display:none}.case-model-notes h3{margin:0 0 10px;font-size:17px}.case-model-notes p{margin:0;color:#53685e;font-size:14px;line-height:1.75}
