/* Kinoward home page (30 Oct 2026). Shorter page, glass surfaces, cinematic imagery, quiet motion.
   Shared chrome (tokens, header, buttons, dialogs, footer) stays in style.css; this file owns the home sections. */
:root{--glass:rgba(29,32,36,.58);--glass-strong:rgba(22,25,28,.78);--glass-line:rgba(244,241,234,.09);--glass-blur:blur(18px) saturate(140%);--ease:cubic-bezier(.2,.65,.3,1)}
.kw-home{overflow-x:clip;background:var(--bg)}

/* Glass: frosted graphite, a gradient hairline edge, and a soft light that follows the pointer. */
.kw-glass{position:relative;background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid rgba(244,241,234,.12);border-radius:var(--radius-card);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.kw-glass>*{position:relative;z-index:1}

/* Navigation experience: a thin progress line and a header that settles once you scroll. */
.kw-progress{position:fixed;left:0;top:0;z-index:40;height:2px;width:100%;transform:scaleX(var(--kw-progress,0));transform-origin:left;background:var(--accent);pointer-events:none}
.kw-js .header{transition:height .3s var(--ease),background-color .3s}
@media(min-width:1101px){.kw-js .header.is-scrolled{height:64px}.kw-js .header.is-scrolled nav a{padding-block:21px 18px}}

/* Reveals: only when scripting is on, so the page is complete without it. */
.kw-js [data-reveal]{opacity:0;translate:0 22px;transition:opacity .8s var(--ease) calc(var(--i,0)*90ms),translate .9s var(--ease) calc(var(--i,0)*90ms)}
.kw-js [data-reveal].in{opacity:1;translate:0 0}

/* Hero: a full-bleed sunset, text on the left, one glass scene card on the right. */
.kw-hero{position:relative;isolation:isolate;min-height:calc(100svh - 76px);display:grid;align-items:center;padding-block:clamp(48px,8svh,96px) clamp(72px,10svh,140px);overflow:clip}
.kw-hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.kw-hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;transform:translateY(var(--kw-parallax,0px)) scale(1.06);animation:kw-drift 36s var(--ease) both;will-change:transform}
.kw-hero-media:after{content:'';position:absolute;inset:0;background:rgba(17,19,21,.5)}
@keyframes kw-drift{from{scale:1.06}to{scale:1.12}}
.kw-hero-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(32px,5vw,80px);align-items:end}
.kw-hero h1{margin:26px 0 22px;font-size:clamp(68px,9.5vw,140px);line-height:.9;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.kw-hero h1 span{display:block;color:var(--accent)}
.kw-hero h1 .kw-light{color:var(--text)}
.kw-lede{max-width:520px;color:var(--text-2);font-size:clamp(17px,1.4vw,21px);line-height:1.5}
.kw-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:30px}
.kw-glass-button{background:var(--glass-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-color:var(--glass-line)}
.button.secondary.kw-glass-button:hover{background:var(--surface-2);border-color:var(--line-strong)}
.kw-scene{padding:22px 22px 20px;max-width:460px;justify-self:end;width:100%;background:rgba(41,45,49,.66)}
.kw-scene-head{display:flex;flex-direction:column;gap:10px}
.kw-scene-slug{color:var(--muted);font-size:10px;letter-spacing:1.4px}
.kw-scene-frames{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 16px}
.kw-scene-frames figure{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:calc(var(--radius-card) - 4px)}
.kw-scene-frames img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.kw-scene-frames figure:first-child img{object-position:46% center}
.kw-scene:hover .kw-scene-frames img{transform:scale(1.05)}
.kw-scene-frames figcaption{position:absolute;left:10px;bottom:9px;color:var(--text);font-size:9px;letter-spacing:1.3px;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.kw-scene-foot{display:flex;flex-direction:column;gap:10px}
.kw-scene-foot strong{font:600 22px/1.1 var(--display)}
.kw-scene-foot span{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:9px;letter-spacing:1.2px}
.kw-scene-foot .marketing-arrow{width:14px;height:14px;flex-basis:14px}

/* Film strip: every frame at its true shape. It drifts on its own, slows under the pointer,
   drags and swipes, and a tap opens the frame in the viewer. Equal space above and below. */
.kw-strip{--strip-h:clamp(150px,15vw,220px);padding-block:clamp(34px,4.5vw,58px) clamp(40px,5vw,64px)}
.kw-strip-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:10px}
.kw-strip-hint{color:var(--muted);font-size:12px}
.kw-strip-viewport{overflow:hidden;padding-block:10px 6px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.kw-strip.is-dragging .kw-strip-viewport{cursor:grabbing}
.kw-strip-track{position:relative;display:flex;width:max-content;will-change:transform}
.kw-strip-set{display:flex;gap:16px;padding-right:16px}
.kw-shot{flex:0 0 auto;display:flex;flex-direction:column;gap:12px;margin:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:inherit;transition:opacity .35s var(--ease)}
.kw-shot-frame{display:block;height:var(--strip-h);aspect-ratio:var(--ar);overflow:hidden;border-radius:10px;border:1px solid var(--line);background:var(--surface);transition:border-color .3s,transform .5s var(--ease)}
.kw-shot-frame img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;transition:transform .8s var(--ease)}
.kw-shot-cap{display:flex;gap:10px;align-items:baseline;color:var(--muted);font-size:10px;letter-spacing:1.3px;white-space:nowrap;transition:color .3s}
.kw-shot-cap b{color:var(--accent);font-weight:600}
.kw-strip-viewport:hover .kw-shot{opacity:.55}
.kw-strip-viewport .kw-shot:hover,.kw-strip-viewport .kw-shot:focus-visible{opacity:1}
.kw-shot:hover .kw-shot-frame{border-color:var(--accent);transform:translateY(-4px)}
.kw-shot:hover .kw-shot-frame img{transform:scale(1.03)}
.kw-shot:hover .kw-shot-cap{color:var(--text)}
.kw-shot:focus-visible{outline:none}
.kw-shot:focus-visible .kw-shot-frame{outline:2px solid var(--accent);outline-offset:3px}
.kw-strip.is-dragging .kw-shot{opacity:1}
.kw-strip.is-dragging .kw-shot-frame{transform:none}

/* Frame viewer */
#frame-dialog{width:min(1240px,calc(100% - 32px));padding:16px 20px 12px}
#frame-dialog .dialog-head{margin-bottom:12px}
#frame-dialog .dialog-head h2{font:600 11px 'Barlow',Arial,sans-serif;letter-spacing:1.6px;color:var(--accent)}
.kw-frame-image{display:block;width:100%;max-height:calc(min(100dvh,var(--visible-height,100dvh)) - 190px);object-fit:contain;border-radius:8px;background:var(--bg)}
.kw-frame-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px}
.kw-frame-nav button{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;border:0;background:transparent;color:var(--text-2);font:600 14px 'Barlow',Arial,sans-serif;cursor:pointer}
.kw-frame-nav button:hover{color:var(--accent)}
.kw-frame-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.kw-frame-count{color:var(--muted);font-size:12px;letter-spacing:1.2px;font-variant-numeric:tabular-nums}

/* Sections: the page alternates photo, ink and graphite. Bands are the brand's Graphite, full width. */
.kw-section{position:relative;padding-block:clamp(72px,9vw,128px)}
.kw-band{background:var(--surface-2);border-block:1px solid rgba(244,241,234,.06)}
.kw-band .kw-glass{background:rgba(17,19,21,.62)}
.kw-band .kw-tabs{border-bottom-color:rgba(244,241,234,.14)}
.kw-band .kw-tabs button{color:var(--text-2)}
.kw-band .kw-tabs button[aria-selected=true]{color:var(--text)}
.kw-band .kw-note{color:var(--text-2)}
.kw-band .kw-tiles article:hover{background:rgba(17,19,21,.82)}

.kw-head{margin-bottom:clamp(28px,4vw,48px)}
.kw-head h2,.kw-split-copy h2,.kw-closing h2{font-size:clamp(40px,4.8vw,66px);line-height:.96;letter-spacing:-.02em;margin-top:16px;text-wrap:balance}
.kw-head h2,.kw-split-copy h2{color:var(--text)}
.kw-head-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);align-items:end;gap:40px}
.kw-head-row p{max-width:440px;color:var(--text-2);font-size:16px}

/* Workflow: open tabs, one glass panel, the visual fills it and the caption floats inside. */
.kw-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 16px;border-bottom:1px solid var(--line);margin-bottom:24px}
.kw-tabs button{position:relative;display:flex;align-items:center;gap:12px;min-height:54px;padding:0;border:0;background:transparent;text-align:left;color:var(--muted);font:500 14px 'Barlow',Arial,sans-serif;transition:color .25s}
.kw-tabs button b{color:var(--accent);font-size:10px;letter-spacing:1px}
.kw-tabs button:hover{color:var(--text)}
.kw-tabs button[aria-selected=true]{color:var(--text);font-weight:600}
.kw-tabs button:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.kw-tabs button[aria-selected=true]:after{transform:scaleX(1)}
.kw-tabs.is-auto button[aria-selected=true]:after{animation:kw-tab-fill 5.2s linear both}
@keyframes kw-tab-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.kw-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.kw-panel{overflow:hidden;padding:8px}
.kw-visuals{position:relative;aspect-ratio:16/8.2;overflow:hidden;border-radius:calc(var(--radius-card) - 3px);background:var(--bg-soft)}
.kw-visual{position:absolute;inset:0;margin:0;animation:kw-visual-in .7s var(--ease) both}
.kw-visual[hidden]{display:none!important}
.kw-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.kw-visual[data-step-visual=world] img{object-position:center 52%}
.kw-visual[data-step-visual=cast] img,.kw-visual[data-step-visual=shot] img,.kw-visual[data-step-visual=finish] img{object-fit:contain}
.kw-visual[data-step-visual=cast] img{object-position:center 30%}
.kw-visual[data-step-visual=beauty] img{inset:0 auto auto 0;width:149.0683%;height:auto;max-width:none;object-fit:initial;transform:translate(-22.4479%,-22.8718%)}
@keyframes kw-visual-in{from{opacity:.2;translate:0 10px;filter:blur(4px)}to{opacity:1;translate:0 0;filter:blur(0)}}
.kw-script{display:flex;flex-direction:column;justify-content:center;padding:clamp(18px,3vw,40px) clamp(18px,5vw,64px) clamp(120px,14vw,170px);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(12px,1.15vw,16px);line-height:1.65;color:var(--text-2);background:var(--bg-soft)}
.kw-script-title{display:flex;justify-content:space-between;gap:12px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:.8em;letter-spacing:1px;color:var(--muted)}
.kw-script>p{margin:0 0 12px;max-width:62ch}
.kw-slug{font-weight:700;color:var(--text)}
.kw-script mark{padding:2px 5px;border-radius:4px;background:var(--surface-2);color:var(--text);box-shadow:inset 0 -1px 0 var(--accent)}
.kw-dialogue{margin:16px auto;max-width:28ch;text-align:center}
.kw-dialogue b{display:block;font-weight:600;color:var(--text)}
.kw-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.kw-tags span{padding:6px 10px;border:1px solid var(--line-strong);border-radius:6px;font-size:.8em;color:var(--text)}
.kw-breakdown{position:absolute;right:clamp(18px,3vw,36px);top:clamp(18px,3vw,36px);width:min(300px,34%);padding:16px 18px 14px;border-radius:10px;font-family:'Barlow',Arial,sans-serif;font-size:13px;box-shadow:0 18px 50px rgba(0,0,0,.4)}
.kw-breakdown dl{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;margin:14px 0 0}
.kw-breakdown dt{color:var(--muted);font-size:10px;letter-spacing:1.2px;text-transform:uppercase;padding-top:2px}
.kw-breakdown dd{margin:0;color:var(--text)}
.kw-panel-copy{position:absolute;left:24px;bottom:24px;z-index:2;max-width:min(440px,calc(100% - 48px));padding:18px 20px 16px;border-radius:10px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.kw-panel-copy h3{margin-top:10px;font-size:clamp(22px,2.2vw,30px);line-height:1.05}
.kw-panel-copy p{margin:6px 0 0;color:var(--text-2);font-size:14px;max-width:46ch}

/* Continuity: Lena fills the right of the screen, copy sits on the left, and the reference card rests on the
   photo's lower corner over her jacket, clear of her face. */
.kw-continuity{position:relative;display:grid;align-items:center;min-height:min(88svh,780px);padding-block:clamp(64px,8vw,110px);overflow:clip}
.kw-continuity-media{position:absolute;inset:0 0 0 46%;pointer-events:none}
.kw-continuity-media img{width:100%;height:100%;object-fit:cover;object-position:70% 28%}
.kw-continuity-media:after{content:'';position:absolute;inset:0;background:rgba(17,19,21,.22)}
.kw-continuity-inner{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:end;gap:40px;width:min(1240px,calc(100% - 96px))}
.kw-split-copy{align-self:center}
.kw-split-copy>p{max-width:440px;margin-top:20px;color:var(--text-2);font-size:17px}
.kw-list{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px}
.kw-list li{display:flex;gap:14px;align-items:baseline;color:var(--text-2);font-size:15px}
.kw-list li:before{content:'';flex:0 0 18px;height:1px;background:var(--accent);translate:0 -4px}
.kw-ref{position:absolute;right:clamp(20px,3vw,48px);bottom:clamp(20px,3.5vw,48px);z-index:2;width:min(320px,calc(100% - 40px));padding:16px 18px;background:rgba(41,45,49,.72);border-color:rgba(244,241,234,.14)}
.kw-pill{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:7px 11px;border:1px solid var(--line-strong);border-radius:999px;color:var(--text-2);font-size:9px;letter-spacing:1.3px}
.kw-ref em{display:block;color:var(--muted);font-style:normal;font-size:9px;letter-spacing:1.3px}
.kw-ref strong{display:block;margin:6px 0 12px;font:600 30px/1 var(--display)}
.kw-ref div{display:flex;flex-wrap:wrap;gap:8px}
.kw-ref div span{padding:6px 10px;border:1px solid var(--line-strong);border-radius:6px;color:var(--text-2);font-size:10px}

/* 3D Stager */
.kw-frame{position:relative;margin:0;overflow:hidden;border-radius:var(--radius-card);border:1px solid var(--line);background:var(--surface);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.kw-frame>img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.kw-frame:hover>img{transform:scale(1.02)}
.kw-media{aspect-ratio:1908/1070;background:var(--bg-soft)}
.kw-media>img{object-fit:contain}
.kw-media figcaption{position:absolute;left:14px;bottom:14px;padding:8px 12px;border-radius:999px;background:rgba(41,45,49,.78);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-line);color:var(--text-2);font-size:9px;letter-spacing:1.3px}
.kw-steps,.kw-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.kw-steps article,.kw-tiles article{padding:24px 24px 22px;transition:transform .5s var(--ease),background-color .3s}
.kw-steps article{background:var(--surface-2);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.kw-steps article:hover,.kw-tiles article:hover{transform:translateY(-4px)}
.kw-steps article:hover{background:#30353B}
.kw-steps span,.kw-tiles span{color:var(--accent);font-size:10px;letter-spacing:1.3px}
.kw-steps h3,.kw-tiles h3{margin:14px 0 6px;font-size:24px;line-height:1.05}
.kw-steps p,.kw-tiles p{margin:0;color:var(--text-2);font-size:14px}
.kw-aside{margin:28px 0 0}
.kw-aside .text-link{border:0;background:transparent;padding:0;gap:14px;color:var(--text);cursor:pointer}
.kw-tiles h3{font:600 22px/1.2 'Barlow',Arial,sans-serif}
.kw-note{margin:22px 0 0;color:var(--muted);font-size:12px}

/* Closing: the pier at dusk behind one glass card. */
.kw-closing{position:relative;padding-block:clamp(72px,10vw,140px);overflow:clip;margin-bottom:0}
.kw-closing-media{position:absolute;inset:0;pointer-events:none}
.kw-closing-media img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;filter:saturate(.9)}
.kw-closing-media:after{content:'';position:absolute;inset:0;background:rgba(17,19,21,.6)}
.kw-closing .wrap{position:relative}
.kw-closing-card{padding:clamp(40px,6vw,80px) clamp(24px,5vw,72px);text-align:center;background:var(--glass-strong)}
.kw-closing .eyebrow,.kw-closing .kw-actions{justify-content:center}
.kw-closing h2{margin:18px auto;font-size:clamp(52px,7vw,96px);line-height:.88;letter-spacing:-.02em;text-transform:uppercase}
.kw-closing p{color:var(--text-2);font-size:16px}
.kw-closing .kw-actions{margin-top:26px;gap:24px}
.kw-home footer{position:relative;margin-top:0;padding-block:34px;background:var(--surface-2);box-shadow:0 0 0 100vmax var(--surface-2);clip-path:inset(0 -100vmax);color:var(--text-2);border-top:0}
.kw-home footer a:hover{color:var(--text)}

/* Arrows nudge on hover. */
.button .marketing-arrow,.text-link .marketing-arrow{transition:transform .25s var(--ease)}
.button:hover .marketing-arrow,.text-link:hover .marketing-arrow{transform:translate(2px,-2px)}
.kw-glass-button:hover .marketing-arrow{transform:translateY(3px)}

/* Layout at tablet and phone widths */
@media(max-width:1100px){
 .kw-hero{min-height:0}
 .kw-hero-inner{grid-template-columns:1fr;align-items:start}
 .kw-scene{justify-self:start;max-width:520px}
 .kw-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
 .kw-tabs button{border-bottom:1px solid var(--line)}
 .kw-continuity-inner{width:min(100% - 48px,1240px)}
 .kw-head-row{grid-template-columns:1fr;gap:16px}
}
@media(max-width:1040px){.kw-continuity-inner{width:min(100% - 48px,1240px)}}
@media(max-width:760px){
 .kw-hero{padding-block:36px 48px}
 .kw-hero h1{font-size:clamp(54px,15vw,84px);margin:20px 0 16px}
 .kw-lede{font-size:17px}
 .kw-actions{flex-direction:column;align-items:stretch}
 .kw-actions .button{width:100%}
 .kw-scene{padding:16px}
 .kw-scene-foot strong{font-size:20px}
 .kw-strip{--strip-h:132px}
 .kw-strip-head{flex-direction:column;gap:6px;margin-bottom:16px}
 .kw-shot-cap{font-size:9px}
 .kw-head h2,.kw-split-copy h2{font-size:clamp(36px,10vw,48px)}
 .kw-head h2 br,.kw-closing h2 br{display:none}
 .kw-tabs{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .kw-tabs::-webkit-scrollbar{display:none}
 .kw-tabs button{flex:0 0 auto;scroll-snap-align:start;border-bottom:0;min-height:48px}
 .kw-visuals{aspect-ratio:auto}
 .kw-visual{position:relative;inset:auto}
 .kw-visual:not(.kw-script){aspect-ratio:4/3}
 .kw-visual:not(.kw-script)::after{content:none}
 .kw-script{padding:18px 16px;font-size:12px}
 .kw-breakdown{display:none}
 .kw-panel-copy{position:static;max-width:none;margin-top:8px;box-shadow:none}
 .kw-continuity{display:block;min-height:0;padding-block:56px 64px}
 .kw-continuity-media{position:relative;inset:auto;aspect-ratio:4/5;margin:0 0 24px}
 .kw-continuity-media img{object-position:center 25%}
 .kw-continuity-media:after{background:none}
 .kw-continuity-inner{grid-template-columns:1fr;width:calc(100% - var(--mobile-gutter)*2);gap:24px}
 .kw-continuity-media{margin-bottom:132px}
 .kw-ref{left:12px;right:12px;bottom:0;width:auto;translate:0 58%}
 .kw-js .kw-ref[data-reveal].in{translate:0 58%}
 .kw-js .kw-ref[data-reveal]{translate:0 calc(58% + 22px)}
 .kw-steps,.kw-tiles{grid-template-columns:1fr;gap:12px}
 .kw-closing h2{font-size:clamp(44px,13vw,64px)}
 .kw-closing .kw-actions{flex-direction:column;align-items:center}
 .kw-closing .kw-actions .button{width:100%;max-width:360px}
}
@media(prefers-reduced-motion:reduce){
 .kw-js [data-reveal]{opacity:1;translate:none;transition:none}
 .kw-hero-media img{animation:none;transform:none}
 .kw-shot,.kw-shot-frame,.kw-shot-frame img{transition:none}
 .kw-visual,.kw-tabs.is-auto button[aria-selected=true]:after{animation:none}
 .kw-frame>img,.kw-scene-frames img,.kw-steps article,.kw-tiles article{transition:none}
}

/* Compare switch (only with ?compare in the address): original page or this one. */
.look-switch{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom,0px));z-index:60;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);box-shadow:0 12px 40px rgba(0,0,0,.45);transform:translateX(-50%);font:600 13px 'Barlow',Arial,sans-serif;color:var(--muted);white-space:nowrap}
.look-switch>span{padding:0 8px 0 14px;font-size:10px;letter-spacing:1.4px;text-transform:uppercase}
.look-switch a{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:999px;color:var(--text-2);transition:color .16s,background-color .16s}
.look-switch a:hover{color:var(--text)}
.look-switch a[aria-current]{background:var(--surface-2);color:var(--accent)}
.look-switch a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
html:has(dialog[open]) .look-switch{display:none}
@media(max-width:760px){.look-switch>span{display:none}}