.g28 { padding-block:80px; scroll-margin-top:90px; }
.g28-head { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.g28-kicker { color:#ff4a52; font:600 12px 'IBM Plex Mono',monospace; letter-spacing:2px; }
.g28 h2 { margin:10px 0 12px; font-size:clamp(32px,5vw,62px); line-height:1.15; letter-spacing:-1.5px; }
.g28 h2 span { color:#a4a4ad; }
.g28-head p { color:#aaaab5; margin:0; font-size:15px; }
.g28-nav { display:flex; gap:8px; flex-shrink:0; }
.g28 button { font:inherit; cursor:pointer; }
.g28-nav button { width:44px; height:44px; border:1px solid #43434b; color:#fff; background:#17171b; border-radius:50%; font-size:22px; }
.g28-nav button:disabled { opacity:.3; cursor:default; }
.g28-themes { display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.g28-themes button { display:flex; align-items:center; gap:8px; background:#141418; border:1px solid #33333b; border-radius:30px; color:#b6b6c0; padding:10px 18px; font-size:14px; }
.g28-themes i { width:9px; height:9px; border-radius:50%; background:var(--ui); }
.g28-themes button[aria-pressed="true"] { border-color:var(--ui); color:#fff; }
.g28-track { display:flex; overflow-x:auto; gap:18px; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:#55555f #141418; padding-bottom:16px; overscroll-behavior-x:contain; }
.g28-slide { flex:0 0 94%; min-width:0; scroll-snap-align:start; border:1px solid #303038; border-radius:16px; background:radial-gradient(ellipse at 100% 0%,#24242d 0%,#101013 65%); display:grid; grid-template-columns:minmax(180px,.65fr) minmax(0,1.6fr); gap:28px; padding:32px; align-items:center; }
.g28-copy { align-self:center; }
.g28-index { color:var(--ui); font:500 12px 'IBM Plex Mono',monospace; letter-spacing:2px; }
.g28-copy h3 { font-size:clamp(28px,3vw,44px); line-height:1.2; color:#fff; margin:16px 0; }
.g28-copy p { color:#b5b5c0; font-size:15px; line-height:1.8; margin:0 0 22px; }
.g28-copy a { color:var(--ui); text-decoration:none; font-size:13px; }
.g28-media { min-width:0; }
.g28-screen { position:relative; overflow:hidden; aspect-ratio:4/3; border-radius:6px; border:1px solid #53535d; background:#050506; box-shadow:0 18px 45px #0008; }
.g28-screen img { position:absolute; width:200%; height:200%; max-width:none; left:0; top:0; object-fit:fill; }
.g28-pages { display:flex; gap:6px; margin-top:16px; flex-wrap:wrap; }
.g28-pages button { flex:1 1 auto; min-height:42px; padding:8px 12px; font-size:12px; color:#aaaab5; border:1px solid #303038; border-radius:6px; background:#17171c; }
.g28-pages button[aria-pressed="true"] { color:#080808; background:var(--ui); border-color:var(--ui); font-weight:700; }
.g28-foot { display:flex; justify-content:space-between; gap:16px; margin-top:12px; color:#8e8e9c; font-size:12px; }
.g28-status { color:#dddde5; font-family:'IBM Plex Mono',monospace; white-space:nowrap; }
.g28-real { margin-top:30px; border-top:1px solid #303038; }
.g28-real summary { cursor:pointer; color:#e9e9ef; padding:22px 0; font-size:16px; font-weight:600; }
.g28-photos { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.g28-photos a { display:block; background:#111115; border-radius:10px; overflow:hidden; text-align:center; }
.g28-photos img { width:100%; max-height:640px; object-fit:contain; display:block; }
.g28 button:focus-visible,.g28 a:focus-visible,.g28 summary:focus-visible,.g28-track:focus-visible { outline:2px solid #fff; outline-offset:4px; }
@media(max-width:760px) {
  .g28 { padding-block:48px; }
  .g28-head { gap:12px; }
  .g28 h2 { font-size:34px; }
  .g28-head p { font-size:13px; }
  .g28-slide { flex-basis:94%; grid-template-columns:minmax(0,1fr); padding:20px 14px; gap:20px; }
  .g28-copy h3 { font-size:28px; margin:8px 0; }
  .g28-copy p { margin:0 0 8px; font-size:13px; }
  .g28-themes { gap:6px; }
  .g28-themes button { padding:9px 13px; font-size:12px; }
  .g28-nav { gap:6px; }
  .g28-nav button { width:36px; height:36px; }
  .g28-foot { flex-direction:column; gap:6px; }
  .g28-photos { grid-template-columns:1fr; }
}

.g28-slide-red .g28-screen img { width:100%; height:100%; object-fit:contain; }
.g28-copy .g28-demo-note { margin:14px 0 0; font-size:12px; color:#92929e; }