.gallery{max-width:1320px;margin:auto;padding:96px 22px 60px}.g-intro{max-width:780px;margin:0 0 34px}.g-intro h1{font-size:clamp(38px,6vw,64px);font-weight:600;letter-spacing:-.045em;line-height:1.02;margin:0 0 14px}.g-intro h1 em{font-style:normal;color:var(--headline-em)}.g-intro p{color:var(--muted);margin:0;font-size:17px}.g-layout{display:grid;grid-template-columns:270px 1fr;gap:28px;align-items:start}.g-list{position:sticky;top:80px;display:flex;flex-direction:column;gap:2px}.g-list button{font:inherit;text-align:left;background:none;border:0;border-left:2px solid var(--line);padding:9px 12px 9px 14px;color:var(--muted);cursor:pointer;display:grid;grid-template-columns:28px 1fr;column-gap:4px}.g-list button:hover{color:var(--ink)}.g-list button[aria-current=true]{color:var(--ink);border-left-color:var(--accent)}.g-list .n{font-size:12px;color:var(--accent);padding-top:3px}.g-list .t{font-weight:600;font-size:15px;line-height:1.3}.g-list .c{grid-column:2;font-size:13px;line-height:1.35}.g-list .grow{margin:12px 0 0 14px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}.g-list .grow i{flex:1;height:1px;background:linear-gradient(90deg,var(--line),var(--accent))}.g-stage{min-width:0;padding:0}.g-intro{padding:0}.g-head .eyebrow{margin-bottom:6px}.g-head h2{font-size:clamp(28px,3.4vw,40px);line-height:1.08;margin:0 0 8px}.g-head p{margin:0;color:var(--muted);max-width:760px}.g-back{font:inherit;font-size:14px;background:none;border:0;padding:0;margin:0 0 8px;color:var(--accent);cursor:pointer}.g-try{margin:16px 0 0;padding:14px 16px;border-radius:12px;background:var(--raised);border:1px solid var(--line);display:flex;gap:14px;align-items:baseline}.g-try b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);white-space:nowrap}.g-try p{margin:0}.g-try strong{font-weight:600;color:var(--headline-em)}.g-links{scroll-margin-top:70px;margin:16px 0 0;display:flex;flex-direction:column;gap:8px}.g-links .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.g-links .row>span{font-size:12px;color:var(--muted);min-width:86px}.g-links button{font:inherit;font-size:13px;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer}.g-links button:hover{color:var(--ink)}.g-links button[aria-pressed=true]{color:var(--ink);border-color:var(--accent)}.g-trail{margin:12px 0 0;font-size:14px;color:var(--muted);border-left:2px solid var(--accent);padding:2px 0 2px 12px}.g-trail b{color:var(--ink);font-weight:600}.g-tabs{display:flex;gap:4px;margin:18px 0 10px;border-bottom:1px solid var(--line)}.g-tabs button{font:inherit;font-size:14px;padding:8px 14px;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--muted);cursor:pointer}.g-tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}.g-tabs .spacer{flex:1}.g-tabs a{align-self:center;font-size:13px;color:var(--accent);text-decoration:none}.g-frame{border:1px solid var(--line);border-radius:14px;overflow:hidden;height:min(72svh,700px);background:var(--raised)}.g-frame .loading{height:100%;display:grid;place-items:center;color:var(--muted);font-size:14px}.g-code{margin:0;height:min(72svh,700px);overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--raised);padding:14px 0;font:13px/1.65 ui-monospace,Menlo,monospace;counter-reset:line;tab-size:2}.g-code span{display:block;padding:0 16px 0 0;white-space:pre-wrap;word-break:break-word}.g-code span:before{counter-increment:line;content:counter(line);display:inline-block;width:42px;padding-right:14px;text-align:right;color:var(--muted);opacity:.55;user-select:none}.g-code .h{color:var(--headline-em);font-weight:600}.g-code .f{color:var(--accent)}.g-code .m{color:var(--ink)}.g-code .p{color:var(--muted)}.g-code[hidden],.g-frame[hidden]{display:none}.g-compare{margin:16px 0 0;display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:start;color:var(--muted);font-size:15px}.g-compare b{grid-column:1/-1;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}.g-compare p{margin:0}.g-compare .links{display:flex;flex-direction:column;gap:6px;font-size:14px;text-align:right}.g-compare a{color:var(--accent)}@media(max-width:900px){.gallery{padding-top:80px}.g-layout{grid-template-columns:1fr}.g-list{position:static;flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:6px;scrollbar-width:thin}.g-list button{border:1px solid var(--line);border-radius:12px;min-width:200px;padding:9px 12px}.g-list button[aria-current=true]{border-color:var(--accent)}.g-list .grow{display:none}.g-try{flex-direction:column;gap:4px}.gallery{padding-inline:12px}.g-frame,.g-code{width:max(320px,90vw);margin-left:calc((100vw - max(320px,90vw)) / 2 - var(--g-stage-x,0px));height:200svh;border-radius:10px}.g-compare{grid-template-columns:1fr}.g-compare .links{text-align:left}}
