/* Self-contained preview rows; dark artwork stays readable in either site palette. */
.example-row{margin-top:52px;padding-top:36px;border-top:1px solid var(--line)}
.example-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}
.example-heading .eyebrow{color:var(--purple);font-size:.6875rem;margin-bottom:10px}
.example-heading h3{font-size:clamp(1.5rem,2.5vw,2.1rem);letter-spacing:-.04em}
.example-heading>p{font-size:.8125rem;color:var(--muted);line-height:1.7}
.example-card{min-width:0}.example-card h4{font-size:1.2rem;line-height:1.25;letter-spacing:-.025em;margin:8px 0 0;font-weight:600}
.example-hint{font-size:.75rem;color:var(--muted);margin-top:8px}
.colour-compare{isolation:isolate;color:#fff}
.colour-compare>img,.compare-after img{width:100%;height:100%;object-fit:cover;opacity:1;transition:none}
.compare-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--split));pointer-events:none}
.look-warm .compare-after img{filter:sepia(.42) saturate(1.5) contrast(1.12) brightness(1.04)}
.look-cool .compare-after img{filter:sepia(.4) hue-rotate(135deg) saturate(1.6) contrast(1.16)}
.look-noir .compare-after img{filter:grayscale(1) contrast(1.28) brightness(1.15)}
.compare-corners{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;gap:10px;pointer-events:none}
.compare-corners span{padding:4px 7px;border-radius:5px;background:#080b12b8;font-size:.5625rem;letter-spacing:.08em;font-weight:700}
.compare-divider{position:absolute;inset:0 auto 0 var(--split);width:2px;background:#fff;transform:translateX(-1px);box-shadow:0 0 12px #0005;pointer-events:none}
.compare-divider>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;width:38px;height:38px;display:grid;place-items:center;background:#10131de0;border:1px solid #fff;color:white;font-size:22px}
.compare-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.colour-compare:focus-within{outline:3px solid var(--cyan);outline-offset:5px}
.type-stage{color:#fff;display:flex;align-items:center;justify-content:center;container-type:inline-size;isolation:isolate}
.type-index{position:absolute;top:17px;left:18px;font-size:.5625rem;letter-spacing:.16em;opacity:.6}
.type-art{font-size:clamp(30px,12cqw,64px);font-weight:850;line-height:.94;letter-spacing:-.065em;width:100%;padding:0 10%;text-align:left}
.type-line{display:block}.type-line>span{display:inline-block}
.type-kinetic{background:radial-gradient(ellipse at 90% 15%,#6650b780,transparent 65%),#171326}
.type-kinetic:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#ffffff05 1px,transparent 1px),linear-gradient(#ffffff05 1px,transparent 1px);background-size:32px 32px;z-index:-1}
.type-kinetic .type-line:last-child{color:#c2a2ff;font-size:1.25em}
.type-reveal{background:linear-gradient(145deg,#093b35,#10231e 65%,#0a1917)}
.type-reveal .type-art{font-size:11cqw;line-height:1.04}.type-reveal .type-line{overflow:hidden}
.type-reveal .type-line:last-child{color:#a8f6c7}
.type-caption{background:radial-gradient(ellipse at 100% 0,#61452566,transparent 75%),#1a1712}
.type-caption .type-art{font-size:13cqw;line-height:1.13}
.type-caption .type-line:last-child>span{background:#f3d482;color:#20180a;padding:0 .12em .05em;border-radius:.08em;transform:rotate(-3deg)}
.example-play{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-top:9px;padding:5px 0;background:none;font-size:.8125rem;color:var(--purple);font-weight:600}
.example-play .icon{width:16px;height:16px;fill:currentColor;stroke-width:0}@media(hover:hover){
.example-play:hover{color:var(--text)}}.example-play:disabled{cursor:default;color:var(--muted)}
.example-disclosure{max-width:900px}
.is-playing.type-kinetic .type-line>span{animation:demo-kinetic 3.8s cubic-bezier(.22,.8,.25,1) both;animation-delay:calc(var(--line)*.13s)}
.is-playing.type-reveal .type-line>span{animation:demo-reveal 3.5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--line)*.18s)}
.is-playing.type-caption .type-line:first-child>span{animation:demo-reveal 3.5s ease both}
.is-playing.type-caption .type-line:last-child>span{animation:demo-highlight 3.6s cubic-bezier(.2,.8,.2,1) both;animation-delay:.25s}
@keyframes demo-kinetic{0%{opacity:0;transform:translateX(-35px) scale(.85)}18%,65%{opacity:1;transform:translateX(0) scale(1)}78%{transform:translateX(9px) scale(1.05)}100%{opacity:1;transform:translateX(0) scale(1)}}
@keyframes demo-reveal{0%{opacity:0;transform:translateY(110%)}24%,100%{opacity:1;transform:translateY(0)}}
@keyframes demo-highlight{0%{opacity:0;transform:rotate(0) scale(.7)}22%{opacity:1;transform:rotate(-5deg) scale(1.07)}35%,70%{transform:rotate(-3deg) scale(1)}82%{transform:rotate(-1deg) scale(1.05)}100%{opacity:1;transform:rotate(-3deg) scale(1)}}
@media(max-width:700px){.example-row{margin-top:38px;padding-top:28px}.example-heading{display:block;margin-bottom:24px}.example-heading>p{margin-top:12px}.example-card h4{font-size:1.2rem}.example-heading .eyebrow{font-size:.625rem}.type-art{font-size:12cqw}.type-index{font-size:.5rem}.example-row .preview-grid{gap:30px}.compare-corners{top:12px;left:12px;right:12px}}
@media(prefers-reduced-motion:reduce){.type-stage *{animation:none!important;transition:none!important}}