:root{--cream:#f3eee6;--ink:#2d2925;--accent:#b99670;--panel:#6b4938;--line:rgba(45,41,37,.18)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:"Microsoft YaHei",Arial,sans-serif}.showcase{min-height:100dvh;padding:18px;transition:background-color .4s ease}.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;max-width:1500px;margin:auto}.brand{display:flex;align-items:center;gap:14px;color:inherit;text-decoration:none;font-size:14px;letter-spacing:.12em}.brand img{width:158px;height:40px;object-fit:contain;object-position:left center}.counter{font-family:Georgia,serif;font-size:18px;margin:0}.counter b{font-size:30px;font-weight:400}.counter span{opacity:.55}.stage{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.72fr) minmax(320px,.72fr);min-height:calc(100dvh - 190px);gap:0}.image-panel{position:relative;min-height:560px;background:#fff;overflow:hidden}.image-panel img{width:100%;height:100%;position:absolute;inset:0;object-fit:contain;transition:opacity .28s ease,transform .45s ease}.image-panel:hover img{transform:scale(1.015)}.image-hit{position:absolute;inset:0;border:0;background:transparent;cursor:pointer}.hint{position:absolute;left:22px;bottom:20px;background:rgba(255,255,255,.8);padding:10px 14px;font-size:12px;pointer-events:none}.info-panel{background:var(--panel);color:#fff;padding:clamp(40px,7vw,96px) clamp(28px,5vw,70px);display:flex;flex-direction:column;transition:background-color .45s ease}.eyebrow{font-size:10px;letter-spacing:3px;opacity:.72;margin:0 0 55px}.info-panel h1{font-family:Georgia,"Times New Roman","Noto Serif SC",serif;font-size:clamp(42px,5vw,76px);line-height:1.12;font-weight:400;letter-spacing:-.04em;margin:0 0 40px;text-wrap:balance}.description{font-family:"Noto Serif SC","Microsoft YaHei",serif;font-size:15px;line-height:2.05;max-width:18em;opacity:.82;margin:0}.tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:42px}.tags span{border:1px solid rgba(255,255,255,.4);padding:9px 12px;font-size:11px}.arrows{display:flex;gap:12px;margin-top:auto;padding-top:52px}.arrows button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.62);background:transparent;color:#fff;font-size:22px;cursor:pointer;transition:background .2s,transform .2s}.arrows button:hover{background:rgba(255,255,255,.15);transform:translateY(-2px)}.arrows button:active{transform:scale(.96)}.browser{max-width:1500px;margin:18px auto 0;padding:0 2px}.browser-heading{display:flex;align-items:baseline;gap:15px;margin-bottom:10px;font-size:12px;letter-spacing:.12em}.browser-heading small{font-size:11px;opacity:.55;letter-spacing:0}.thumbs{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}.thumb{flex:0 0 132px;height:84px;border:2px solid transparent;padding:0;background:#fff;cursor:pointer;overflow:hidden;opacity:.65;transition:opacity .2s,border-color .2s,transform .2s}.thumb:hover,.thumb.active{opacity:1;border-color:var(--accent);transform:translateY(-2px)}.thumb img{width:100%;height:100%;object-fit:cover}.thumb span{display:none}.image-hit:focus-visible,.arrows button:focus-visible,.thumb:focus-visible{outline:3px solid #d5a56e;outline-offset:3px}@media(max-width:800px){.showcase{padding:10px}.topbar{height:56px;padding:0 8px}.brand{gap:8px;font-size:11px;letter-spacing:.06em}.brand img{width:126px;height:32px}.counter b{font-size:24px}.stage{display:flex;flex-direction:column;min-height:auto}.image-panel{height:55svh;min-height:330px}.info-panel{min-height:380px;padding:34px 26px 28px}.eyebrow{margin-bottom:30px}.info-panel h1{font-size:44px;margin-bottom:22px}.description{font-size:14px;line-height:1.85}.tags{margin-top:25px}.arrows{padding-top:30px}.browser{margin-top:18px}.thumb{flex-basis:108px;height:68px}}@media(max-width:480px){.brand span{display:none}.image-panel{height:49svh}.info-panel{min-height:360px}.info-panel h1{font-size:40px}.browser-heading{padding-left:2px}}
:root{--cream:#f3eee6;--ink:#2d2925;--accent:#b99670;--panel:#6b4938;--line:rgba(45,41,37,.18)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:"Microsoft YaHei",Arial,sans-serif}.showcase{min-height:100dvh;padding:18px;transition:background-color .4s ease}.topbar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;max-width:1500px;margin:auto}.brand{display:flex;align-items:center;gap:14px;color:inherit;text-decoration:none;font-size:14px;letter-spacing:.12em}.brand img{width:158px;height:40px;object-fit:contain;object-position:left center}.counter{font-family:Georgia,serif;font-size:18px;margin:0}.counter b{font-size:30px;font-weight:400}.counter span{opacity:.55}.stage{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.72fr) minmax(320px,.72fr);min-height:calc(100dvh - 190px);gap:0}.image-panel{position:relative;min-height:560px;background:#fff;overflow:hidden;aspect-ratio:4/3}.image-panel img{width:100%;height:100%;position:absolute;inset:0;display:block;object-fit:contain;object-position:center center;transition:opacity .28s ease}.image-panel:hover img{transform:none}.image-hit{position:absolute;inset:0;border:0;background:transparent;cursor:pointer}.hint{position:absolute;left:22px;bottom:20px;background:rgba(255,255,255,.8);padding:10px 14px;font-size:12px;pointer-events:none}.info-panel{background:var(--panel);color:#fff;padding:clamp(40px,7vw,96px) clamp(28px,5vw,70px);display:flex;flex-direction:column;transition:background-color .45s ease}.eyebrow{font-size:10px;letter-spacing:3px;opacity:.72;margin:0 0 55px}.info-panel h1{font-family:Georgia,"Times New Roman","Noto Serif SC",serif;font-size:clamp(42px,5vw,76px);line-height:1.12;font-weight:400;letter-spacing:-.04em;margin:0 0 40px;text-wrap:balance}.description{font-family:"Noto Serif SC","Microsoft YaHei",serif;font-size:15px;line-height:2.05;max-width:18em;opacity:.82;margin:0}.tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:42px}.tags span{border:1px solid rgba(255,255,255,.4);padding:9px 12px;font-size:11px}.arrows{display:flex;gap:12px;margin-top:auto;padding-top:52px}.arrows button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.62);background:transparent;color:#fff;font-size:22px;cursor:pointer;transition:background .2s,transform .2s}.arrows button:hover{background:rgba(255,255,255,.15);transform:translateY(-2px)}.arrows button:active{transform:scale(.96)}.browser{max-width:1500px;margin:18px auto 0;padding:0 2px}.browser-heading{display:flex;align-items:baseline;gap:15px;margin-bottom:10px;font-size:12px;letter-spacing:.12em}.browser-heading small{font-size:11px;opacity:.55;letter-spacing:0}.thumbs{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}.thumb{flex:0 0 132px;height:84px;border:2px solid transparent;padding:0;background:#fff;cursor:pointer;overflow:hidden;opacity:.65;transition:opacity .2s,border-color .2s,transform .2s}.thumb:hover,.thumb.active{opacity:1;border-color:var(--accent);transform:translateY(-2px)}.thumb img{width:100%;height:100%;display:block;object-fit:contain;object-position:center;background:#fff}.thumb span{display:none}.image-hit:focus-visible,.arrows button:focus-visible,.thumb:focus-visible{outline:3px solid #d5a56e;outline-offset:3px}@media(max-width:800px){.showcase{padding:10px}.topbar{height:56px;padding:0 8px}.brand{gap:8px;font-size:11px;letter-spacing:.06em}.brand img{width:126px;height:32px}.counter b{font-size:24px}.stage{display:flex;flex-direction:column;min-height:auto}.image-panel{height:55svh;min-height:330px;aspect-ratio:auto}.info-panel{min-height:380px;padding:34px 26px 28px}.eyebrow{margin-bottom:30px}.info-panel h1{font-size:44px;margin-bottom:22px}.description{font-size:14px;line-height:1.85}.tags{margin-top:25px}.arrows{padding-top:30px}.browser{margin-top:18px}.thumb{flex-basis:108px;height:68px}}@media(max-width:480px){.brand span{display:none}.image-panel{height:49svh}.info-panel{min-height:360px}.info-panel h1{font-size:40px}.browser-heading{padding-left:2px}}