@font-face { font-family:"Bricolage Grotesque"; font-style:normal; font-weight:500 800; font-display:swap; src:url("../fonts/bricolage-grotesque-latin.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-style:normal; font-weight:400 700; font-display:swap; src:url("../fonts/source-sans-3-latin.woff2") format("woff2"); }
:root { color-scheme:light; --orange:#ff4d00; --ink:#111; --line:#dcdcd7; --sans:"Source Sans 3","PingFang SC","Microsoft YaHei",sans-serif; --display:"Bricolage Grotesque",var(--sans); }
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; background:#f7f7f4; color:var(--ink); font:400 1rem/1.6 var(--sans); }
a { color:inherit; }
.wrap { width:min(1184px,calc(100% - 64px)); margin-inline:auto; }
.skip { position:absolute; top:8px; left:16px; padding:12px 18px; background:var(--ink); color:#fff; transform:translateY(-150%); z-index:10; }
.skip:focus { transform:none; }
:focus-visible { outline:3px solid var(--orange); outline-offset:5px; }
.preview-strip { background:var(--orange); color:var(--ink); font-size:.72rem; font-weight:650; letter-spacing:.04em; }
.preview-strip>.wrap { min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.preview-header { min-height:106px; display:flex; align-items:center; justify-content:space-between; gap:2rem; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:18px; min-height:44px; text-decoration:none; }
.brand img { display:block; width:auto; height:25px; }
.brand img.brand-cn { height:19px; }
.header-note { color:#666660; font-size:.85rem; }
.preview-intro { padding:58px 0 42px; }
.eyebrow { display:flex; align-items:center; gap:12px; font-size:.8rem; font-weight:600; margin:0 0 25px; }
.eyebrow>span { width:26px; height:3px; background:var(--orange); }
h1 { margin:0; font-size:clamp(2.6rem,5.5vw,5rem); font-weight:750; line-height:1.18; letter-spacing:-.04em; }
h1>span { color:var(--orange); }
.intro-bottom { display:flex; justify-content:space-between; align-items:end; gap:2rem; margin-top:26px; }
.intro-bottom p { margin:0; color:#62625c; font-size:1rem; }
.intro-bottom .credits { font-size:.9rem; }
.credits strong { color:var(--ink); font-weight:600; padding-inline:4px; }
.versions { padding:24px 0 36px; scroll-margin-top:24px; }
.versions-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-top:20px; border-top:1px solid var(--line); margin-bottom:20px; }
.versions-heading h2 { margin:0; font-size:1rem; font-weight:600; }
.versions-heading>span { font-size:.68rem; letter-spacing:.07em; color:#666660; }
.version-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.version-card { position:relative; isolation:isolate; display:flex; flex-direction:column; min-width:0; min-height:260px; padding:28px 30px 22px; border:1px solid #d4d4cf; background:#fff; text-decoration:none; transition:border-color .24s ease,background-color .24s ease,transform .24s ease; }
.version-copy { position:relative; z-index:1; }
.version-label { margin:0 0 12px; font-size:.85rem; font-weight:600; }
.version-copy h3 { margin:0; font:700 clamp(2.5rem,4.5vw,4rem)/1.1 var(--display); letter-spacing:-.04em; }
.version-author { margin:12px 0 24px; font-size:.9rem; color:#62625c; }
.version-number { position:absolute; top:12px; right:24px; z-index:-1; color:#ff4d0018; font:750 7.5rem/1 var(--display); letter-spacing:-.07em; user-select:none; }
.version-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:auto; border-top:1px solid var(--line); padding-top:16px; }
.version-bottom>span:first-child { color:#666660; font-size:.85rem; overflow-wrap:anywhere; }
.enter { display:inline-flex; align-items:center; gap:18px; font-size:.85rem; font-weight:650; }
.enter>span { display:grid; place-items:center; width:32px; height:32px; background:var(--orange); font-size:1.3rem; transition:transform .24s ease; }
.version-card:focus-visible { border-color:var(--orange); background:#fff9f3; }
.version-note { margin:20px 0 0; color:#666660; font-size:.8rem; }
.preview-footer { display:flex; justify-content:space-between; gap:16px; padding:24px 0 30px; border-top:1px solid var(--line); color:#666660; font-size:.75rem; }
.preview-footer>span:first-child { font-family:var(--display); color:var(--ink); font-weight:700; }
@media(hover:hover) { .version-card:hover { transform:translateY(-4px); border-color:var(--orange); background:#fff9f3; } .version-card:hover .enter>span { transform:translateX(3px); } }
@media(max-width:700px) {
  .wrap { width:calc(100% - 36px); }
  .preview-header { min-height:82px; gap:1rem; }
  .brand { gap:12px; }
  .brand img { height:21px; }
  .brand img.brand-cn { height:16px; }
  .header-note { display:none; }
  .preview-intro { padding:36px 0 30px; }
  .eyebrow { margin-bottom:20px; font-size:.75rem; }
  h1 { font-size:clamp(2rem,8.3vw,3.5rem); letter-spacing:-.035em; }
  .intro-bottom { align-items:start; flex-direction:column; gap:16px; margin-top:22px; }
  .intro-bottom p { font-size:.95rem; }
  .desktop-break { display:none; }
  .versions { padding-top:12px; }
  .versions-heading { align-items:start; flex-direction:column; gap:4px; margin-bottom:16px; }
  .version-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .version-card { min-height:238px; padding:24px 22px 20px; }
  .version-copy h3 { font-size:3rem; }
  .version-number { right:20px; font-size:7rem; }
  .version-bottom { gap:10px; }
  .version-bottom>span:first-child { font-size:.8rem; }
  .enter { gap:10px; font-size:.8rem; }
  .preview-footer { flex-direction:column; gap:6px; }
}
@media(max-width:359px) { .brand img { height:19px; } .brand img.brand-cn { height:14px; } .preview-strip { font-size:.62rem; } .version-card { padding-inline:18px; } .version-bottom { align-items:start; flex-direction:column; gap:14px; } }
@media(prefers-reduced-motion:reduce) { .version-card,.enter>span { transition:none; transform:none!important; } }
@media print { .preview-strip { background:none; } .version-card { break-inside:avoid; } }