@font-face{font-family:Emilio;src:url('assets/fonts/Emilio-Light.woff2')}
@font-face{font-family:Emilio;src:url('assets/fonts/Emilio-LightItalic.woff2');font-style:italic}
@font-face{font-family:Switzer;src:url('assets/fonts/Switzer-Regular.woff2')}
@font-face{font-family:SwitzerMedium;src:url('assets/fonts/Switzer-Medium.woff2')}
:root{--serif:Emilio,Georgia,serif;--sans:Switzer,Arial,sans-serif;--paper:#F7F6F1;--ink:#15130E}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#07100A;color:var(--ink);font-family:var(--sans)}
body{overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
.txt a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.slide{position:absolute;left:0;top:0;width:1920px;height:1080px;overflow:hidden;display:none}
.slide.active{display:block}
/* Full bleed: the page fills the window; letterbox bars stay the house ground. */
#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform:translate(-50%,-50%) scale(var(--scale,1));transform-origin:center center}
.el{position:absolute;margin:0}
.txt{line-height:1.18;font-weight:400;letter-spacing:-.013em;white-space:normal;overflow:visible;text-wrap:pretty}
.plate>svg{width:100%;height:100%;max-height:100%;display:block}
.plate svg text{font-family:Switzer,Arial,sans-serif!important}
.glass{-webkit-backdrop-filter:blur(26px) saturate(1.35);backdrop-filter:blur(26px) saturate(1.35)}
::selection{background:#11462C;color:#F7F6F1}
button:focus-visible,a:focus-visible{outline:2px solid #A8DDB5;outline-offset:3px}
.txt a[href]:focus-visible{outline:2px solid currentColor}
*{scrollbar-color:#53665A #0A1F14}
/* Controls: one quiet glass bar that rises only when the pointer nears the bottom edge. */
#controls{position:fixed;left:50%;bottom:22px;transform:translate(-50%,10px);display:flex;align-items:center;gap:2px;height:50px;padding:3px 6px;background:rgba(10,18,13,.56);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border:1px solid rgba(255,255,255,.13);border-radius:2px;box-shadow:0 18px 44px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.07);color:#F7F6F1;font:12.5px/1 var(--sans);z-index:1000;opacity:0;pointer-events:none;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
body.nav-on #controls,body.overview #controls,#controls:focus-within{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#controls button,#controls a{display:grid;place-items:center;min-width:44px;height:42px;padding:0 10px;border:0;border-radius:2px;background:transparent;color:inherit;font:inherit;cursor:pointer;transition:background .2s}
#controls button:hover,#controls a:hover{background:rgba(255,255,255,.1)}
#controls svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#counter{min-width:66px;text-align:center;color:rgba(247,246,241,.7);font-variant-numeric:tabular-nums;letter-spacing:.03em}
.control-divider{width:1px;height:18px;background:rgba(255,255,255,.18);margin:0 6px}
body.idle:not(.nav-on):not(.overview){cursor:none}
#overview-panel{position:fixed;inset:0;background:rgba(7,16,10,.95);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:900;overflow:auto;padding:56px 56px 130px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:30px 22px;align-content:start}
#overview-panel[hidden]{display:none}
.thumb{border:0;padding:0;text-align:left;background:transparent;cursor:pointer;color:rgba(247,246,241,.6);font:13px/1.35 var(--sans)}
.thumb img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#0F2A1C;border-radius:2px;box-shadow:0 0 0 1px rgba(247,246,241,.08);transition:box-shadow .2s}
.thumb:hover img,.thumb:focus-visible img{box-shadow:0 0 0 2px #A8DDB5}
.thumb:hover{color:#F7F6F1}
.thumb span{display:block;padding:10px 0 0}
/* Guided steps (slide 17): hover a step, the rest step back and its place on the product lights up. */
.slide [data-step]{transition:opacity .35s ease}
.slide[data-on] [data-step]{opacity:.22}
.slide[data-on="1"] [data-step="1"],.slide[data-on="2"] [data-step="2"],.slide[data-on="3"] [data-step="3"],.slide[data-on="4"] [data-step="4"],.slide[data-on="5"] [data-step="5"]{opacity:1}
.slide [data-ring]{opacity:0;transition:opacity .35s ease}
.slide[data-on="1"] [data-ring="1"],.slide[data-on="2"] [data-ring="2"],.slide[data-on="3"] [data-ring="3"],.slide[data-on="4"] [data-ring="4"],.slide[data-on="5"] [data-ring="5"]{opacity:1}
/* Dock (slides 6, 15, 17): the kit's measured macOS Dock (icon pitch 1.29, running dot, label tooltip), live.
   Hover magnifies the icon and eases its neighbours, like macOS; the company app rests lifted with its label. */
.dock{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;align-items:flex-end;--dot:rgba(0,0,0,.55);--sep:rgba(0,0,0,.18)}
.dock-dark{--dot:rgba(255,255,255,.8);--sep:rgba(255,255,255,.22)}
.dock-row{position:relative;isolation:isolate;display:flex;align-items:flex-end;gap:var(--g)}
/* The kit's Dock bar in its light appearance (kit-villa-dock.html, as rounds 1 and 2 showed it): icon 64, bar 96 tall, padding 16 / 17 bottom, radius 22, scaled with the icon. */
.dock-bar .dock-row{padding:0 calc(var(--s)*.25) calc(var(--s)*.266)}
.dock-bar .dock-row::before{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:calc(var(--s)*1.5);border-radius:calc(var(--s)*.344);background:rgba(232,232,236,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.dock-item{position:relative;flex:none;width:calc(var(--s)*var(--m,1));height:calc(var(--s)*var(--m,1));transition:width .22s cubic-bezier(.2,.8,.2,1),height .22s cubic-bezier(.2,.8,.2,1)}
.dock-item img{display:block;width:100%;height:100%;-webkit-user-drag:none;user-select:none}
.dock-item.on::before{content:"";position:absolute;left:50%;bottom:calc(var(--s)*-.19);width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:var(--dot)}
.dock-sep{flex:none;width:1px;height:calc(var(--s)*.7);margin-bottom:calc(var(--s)*.15);background:var(--sep)}
.dock-label{position:absolute;left:-200px;right:-200px;width:max-content;margin:0 auto;bottom:calc(100% + 10px);transform:translateY(4px);padding:4px 9px;border-radius:7px;font:500 13px/16px SwitzerMedium,var(--sans);white-space:nowrap;background:rgba(232,232,236,.92);color:rgba(0,0,0,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 1px 3px rgba(0,0,0,.18);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.dock-label::after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-top-color:rgba(232,232,236,.92);border-bottom:0}
.lift{--m:1.45}
.lift .dock-label{opacity:1;transform:none}
.dock:hover .lift{--m:1}
.dock:hover .lift .dock-label{opacity:0}
.dock-item:hover+.dock-item,.dock-item:hover+.dock-sep+.dock-item,.dock-item:has(+.dock-item:hover),.dock-item:has(+.dock-sep+.dock-item:hover){--m:1.25}
.dock-item:hover+.dock-item+.dock-item,.dock-item:has(+.dock-item+.dock-item:hover){--m:1.08}
.dock .dock-item:hover{--m:1.55}
.dock .dock-item:hover .dock-label{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.dock-item,.dock-label{transition:none}}
.slide [data-step].txt{cursor:default}
body.capture #controls,body.capture #overview-panel{display:none}
body.capture #stage{left:0;top:0;transform:none}
body.print{overflow:visible;background:var(--paper)}
body.print #controls,body.print #overview-panel{display:none}
body.print #stage{position:static;transform:none;width:1920px;height:auto}
body.print .slide{display:block;position:relative;break-after:page;page-break-after:always}
body.print .slide:last-child{break-after:auto;page-break-after:auto}
@page{size:1920px 1080px;margin:0}
@media print{html,body{margin:0;background:#F7F6F1;overflow:visible;-webkit-print-color-adjust:exact;print-color-adjust:exact}
#controls,#overview-panel{display:none!important}
#stage{position:static;transform:none;width:1920px;height:auto}
.slide{position:relative;display:block;break-after:page}
.slide:last-child{break-after:auto}
}
@media(max-width:740px){#overview-panel{padding:16px 16px 96px;grid-template-columns:1fr}}

/* Phone and tablet reader (round 4): every page stacked down the screen at the full width, like a landscape PDF
   on a phone. The page is laid out at 1920 and scaled; its layout box is pulled in by a negative margin and the stage
   clips the width, so the document scrolls only down and the browser's own pinch zoom and double tap stay free. */
html.scroll,html.scroll body{height:auto;overflow:visible;background:#D5D8D0;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.scroll #stage{position:relative;left:0;top:0;transform:none;width:100%;height:auto;overflow:hidden;overflow:clip;padding:env(safe-area-inset-top) 0 calc(84px + env(safe-area-inset-bottom))}
body.scroll .slide{display:block;position:relative;transform:scale(var(--scale));transform-origin:0 0;margin-bottom:calc(1080px * (var(--scale) - 1) + 5px);content-visibility:auto;contain-intrinsic-size:1920px 1080px}
body.scroll #controls{opacity:1;pointer-events:auto;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 24px);height:48px;padding:2px 4px;gap:0;background:rgba(10,31,20,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(247,246,241,.12);border-radius:2px;color:#F7F6F1;box-shadow:0 12px 32px rgba(0,0,0,.35);transition:opacity .3s}
body.scroll #controls button,body.scroll #controls a{border:0;min-width:44px;min-height:44px;padding:0 10px;color:inherit}
body.scroll #controls button:hover,body.scroll #controls a:hover{background:rgba(247,246,241,.08)}
body.scroll #controls button:focus-visible,body.scroll #controls a:focus-visible{outline-color:#A8DDB5}
body.scroll #fullscreen,body.scroll #overview,body.scroll .control-divider{display:none}
body.scroll .control-divider{background:rgba(247,246,241,.2)}
body.scroll #counter{color:rgba(247,246,241,.8)}
body.scroll.zoomed #controls,body.scroll.moving #controls,body.scroll.calm #controls{opacity:0;pointer-events:none}
@media(orientation:landscape) and (max-height:500px){body.scroll #controls{left:auto;right:max(10px,env(safe-area-inset-right));transform:none;bottom:max(8px,env(safe-area-inset-bottom));height:46px}}
body.scroll #overview-panel{inset:0;padding:calc(max(18px,env(safe-area-inset-top)) + 16px) 12px 96px;background:#07100A;-webkit-backdrop-filter:none;backdrop-filter:none;grid-template-columns:1fr 1fr;gap:16px 10px;align-content:start}
body.scroll .thumb{color:rgba(247,246,241,.74);font:12px/1.35 var(--sans)}
body.scroll .thumb img{border:0;border-radius:2px;background:#0F2A1C}
body.scroll .thumb span{padding:8px 0 0}
@media(orientation:landscape) and (max-height:500px){body.scroll #overview-panel{grid-template-columns:repeat(3,1fr)}}
@media(prefers-reduced-motion:reduce){body.scroll #controls{transition:none}}