.interface-article{max-width:1120px;margin:0 auto;padding:2rem clamp(1rem,4vw,3rem) 4rem}.interface-breadcrumb{display:flex;flex-wrap:wrap;gap:.65rem;font-size:.8rem;color:var(--ink-soft)}.interface-breadcrumb a{color:inherit;text-decoration:none}.interface-breadcrumb a:hover{color:var(--ink)}.interface-heading{padding:clamp(2.5rem,6vw,5rem) 0 2.5rem}.interface-eyebrow{display:flex;align-items:center;gap:.75rem;color:var(--ink-soft);font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 1.25rem}.interface-heading h1{max-width:17ch;font-size:clamp(2.2rem,5.2vw,4.5rem);font-weight:500;letter-spacing:-.055em;line-height:1.06;text-wrap:balance;margin:0 0 1.5rem}.interface-lead{max-width:62ch;font-size:clamp(1rem,2vw,1.2rem);color:var(--ink-soft);line-height:1.65;margin:0 0 1.75rem}.interface-byline{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;font-size:.78rem;color:var(--ink-soft)}.interface-byline a,.interface-colophon a{color:var(--ink);text-underline-offset:.2em}.interface-demo{border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}.interface-demo__bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1rem;padding:.9rem 1.25rem;background:var(--surface);font-size:.75rem;color:var(--ink-soft);border-bottom:1px solid var(--line)}.interface-demo__status{display:flex;align-items:center;gap:.5rem}.interface-demo__status span{width:6px;height:6px;border-radius:50%;background:var(--success)}.warp-example__stage{position:relative;overflow:hidden;height:clamp(360px,54vw,610px);background:var(--surface-soft)}.warp-example__canvas:focus-visible{outline:3px solid var(--accent-dark);outline-offset:-4px}.warp-example__controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.25rem;padding:1rem 1.25rem;border-top:1px solid var(--line);background:var(--surface)}.warp-example__transport{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}.warp-example__transport button{min-width:44px;min-height:44px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:var(--radius-sm);padding:.5rem .85rem;font:inherit;font-size:.85rem;cursor:pointer}.warp-example__transport button:hover{border-color:var(--ink-soft)}.warp-example__transport button:focus-visible,.warp-example__setting input:focus-visible{outline:3px solid var(--accent-dark);outline-offset:3px}.warp-example__transport button:disabled{cursor:default;color:var(--ink-soft)}.warp-example__count{min-width:4.5rem;text-align:center;font-size:.8rem;font-variant-numeric:tabular-nums;color:var(--ink-soft)}.warp-example__setting{min-width:180px;max-width:260px;flex:1;font-size:.75rem;color:var(--ink-soft)}.warp-example__setting span{display:flex;justify-content:space-between;margin-bottom:.25rem}.warp-example__setting input{display:block;width:100%;height:24px;accent-color:var(--accent-dark);cursor:pointer}.warp-example__hint{padding:0 1.25rem 1rem;margin:0;font-size:.75rem;line-height:1.6;color:var(--ink-soft);background:var(--surface)}.interface-demo noscript img{display:block;width:100%;height:auto}.interface-demo noscript p{padding:1rem}.interface-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3rem;padding:3rem 0}.interface-content h2{font-size:1.3rem;font-weight:500;letter-spacing:-.025em;margin:0 0 1rem}.interface-notes p,.interface-code p{font-size:.95rem;line-height:1.8;color:var(--ink-soft);margin:0 0 1rem}.interface-code{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.25rem 0}.interface-code summary{cursor:pointer;font-size:1rem;font-weight:600;min-height:28px}.interface-code[open] summary{margin-bottom:1.5rem}.interface-code pre{padding:1.25rem;overflow-x:auto;border-radius:var(--radius-sm);font-size:.82rem}.interface-code :not(pre)>code{font-size:.85em;background:var(--surface-soft);border-radius:.2rem;padding:.15rem .25rem;overflow-wrap:anywhere}.interface-code a{color:var(--accent-dark)}.interface-colophon{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem;padding-top:2.5rem;font-size:.85rem}.interface-colophon .interface-eyebrow{margin-bottom:.5rem}.interface-colophon p{margin:0}.interface-back{white-space:nowrap}.interface-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}.interface-tile{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:var(--surface)}.interface-tile__link{position:absolute;inset:0;z-index:1;border-radius:inherit}.interface-tile:has(.interface-tile__link:focus-visible){outline:3px solid var(--accent-dark);outline-offset:3px}.interface-tile:has(.interface-tile__link:hover){border-color:var(--ink-soft)}.interface-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.interface-tile__caption{display:flex;justify-content:space-between;gap:1rem;font-size:.8rem;color:var(--ink-soft);margin:0 0 1rem}.interface-tile__creator{font-size:.72rem;color:var(--ink-soft);margin-top:auto}.interface-tile__poster{width:100%;height:auto;aspect-ratio:8 / 5;object-fit:cover}.interface-tile__image{position:relative;display:block;background:var(--surface-soft);overflow:hidden}.interface-tile__image img{width:100%;height:100%;object-fit:cover;aspect-ratio:8 / 5;display:block;transition:transform .6s}.interface-tile__image:hover img{transform:scale(1.03)}.interface-tile__open{position:absolute;right:1rem;bottom:1rem;display:grid;place-items:center;width:40px;height:40px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:50%;font-size:1.3rem}.interface-tile__body{display:flex;flex-direction:column;padding:clamp(1.5rem,3vw,2.5rem)}.interface-tile h2{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:500;letter-spacing:-.04em;line-height:1.1;margin:0 0 1rem}.interface-tile h2 a{text-decoration:none;color:var(--ink)}.interface-tile__description{color:var(--ink-soft);line-height:1.7;font-size:.95rem;margin:0 0 1.5rem}.interface-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:2rem}.interface-tags span{font-size:.7rem;padding:.3rem .65rem;border:1px solid var(--line);border-radius:100px;color:var(--ink-soft)}.interface-tile__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:auto;font-size:.8rem;color:var(--ink-soft)}.interface-tile__bottom a{color:var(--ink);text-decoration:none;font-weight:600;padding:.5rem 0}.interface-gallery--single{grid-template-columns:1fr}.interface-gallery--single .interface-tile{display:grid;grid-template-columns:1.25fr 1fr}.interface-tile__live{position:relative;z-index:2;min-width:0;border-bottom:1px solid var(--line)}.interface-tile__live noscript img{display:block;width:100%;height:auto}.interface-tile__live .warp-example__stage{height:400px}.interface-tile__live .live-demo{height:400px;aspect-ratio:auto}.interface-tile__live .warp-example__controls{gap:.75rem}.interface-tile__live .warp-example__setting{max-width:none}.interface-gallery-note{margin:2rem 0;color:var(--ink-soft);font-size:.85rem;max-width:60ch}@media(max-width:640px){.interface-gallery,.interface-gallery--single .interface-tile,.interface-notes{grid-template-columns:1fr}.interface-tile__live{border-bottom:1px solid var(--line)}.interface-tile__live .warp-example__stage,.interface-tile__live .live-demo{height:360px}.interface-notes{gap:1.25rem;padding:2rem 0}.interface-heading{padding-top:2.5rem}.warp-example__controls{padding:.9rem}.warp-example__transport{gap:.35rem}.warp-example__transport button{padding-inline:.65rem}.warp-example__count{min-width:3.5rem}.warp-example__setting{max-width:none}.interface-byline{flex-direction:column}}@media(prefers-reduced-motion:reduce){.interface-tile__image img{transition:none}.interface-tile__image:hover img{transform:none}}