/* Compact — one stylesheet for every page.
   /*.css is served immutable for a year: bump the ?v= on every reference when this file changes.

   The page is a dark room and the app's light is the only colour in it. --light is whichever of the three
   presets the hero's Colour control has checked, and everything tinted takes it from there. The three values
   are the app's own: CompactKit's ColorTemperature.rgb(kelvin:) at 6500, 4000 and 2700 K.

   Colour and on/off need no script: the controls are real inputs, read here with :has(). Only the two
   sliders go through light.js. Registering --light and --lit is what lets them fade. */

@font-face{
    font-family:'Inter';
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url('/assets/fonts/inter-variable-latin.woff2') format('woff2');
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{background:#05060b;color-scheme:dark}
:root{
    --bg:#05060b;
    --ink:#f6f6f8;
    --ink-display:#f2ede3;
    --ink-2:rgba(246,246,248,.66);
    --ink-3:rgba(246,246,248,.58);
    --ink-4:rgba(246,246,248,.16);
    --sans:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
    --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
    --ease:cubic-bezier(.16,1,.3,1);
}
body{
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
    background:var(--bg);
    color:var(--ink);
    min-height:100svh;
    overflow-x:hidden;
    position:relative;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.role{
    font-family:var(--mono);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
    color:var(--ink-2);
}

@property --light{syntax:'<color>';inherits:true;initial-value:#fffefa}
@property --lit{syntax:'<number>';inherits:true;initial-value:1}

:root{
    --daylight:#fffefa;
    --office:#ffcea6;
    --evening:#ffa757;
    --light:var(--daylight);
    --lit:1;
    --intensity:1;
    --ring:28px;
    /* How strongly the light spills: nothing when it is off, a third at the bottom of Intensity. */
    --glow:calc(var(--lit)*(.35 + .65*var(--intensity)));
    --unlit:#12131a;
    --panel:rgba(255,255,255,.045);
    --line:rgba(255,255,255,.1);
    transition:--light .45s var(--ease),--lit .6s ease-out;
    /* The app fades its light up over 0.6 s each time iPhone Duo opens. The page opens the same way.
       `backwards` only: a filled-forwards end state would hold the light on over the switch. */
    animation:lightUp .6s ease-out .25s backwards;
}
@keyframes lightUp{from{--lit:0}}

html:has(#k-office:checked){--light:var(--office)}
html:has(#k-evening:checked){--light:var(--evening)}
html:has(#light-on:not(:checked)){--lit:0}

:where(.compact) a{color:inherit}
.compact :focus-visible{outline:2px solid var(--ink-display);outline-offset:3px;border-radius:6px}

.afterglow{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(90vmax 60vmax at 50% -18%,color-mix(in srgb,var(--light) calc(9%*var(--glow)),transparent),transparent 62%);
}
.wrap{
    position:relative;z-index:1;
    width:min(1080px,100%);margin-inline:auto;
    padding-inline:max(1.5rem,env(safe-area-inset-left)) max(1.5rem,env(safe-area-inset-right));
}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{
    left:1rem;top:1rem;z-index:200;
    padding:.6rem 1rem;border-radius:10px;background:var(--ink);color:#05060b;text-decoration:none;
}

/* ---------- Nav ---------- */
/* The one element with backdrop-filter. The app sites learned that stacking more breaks iOS compositing. */
.nav-wrap{
    position:fixed;top:calc(env(safe-area-inset-top) + 16px);left:0;width:100%;z-index:100;
    display:flex;justify-content:center;
    padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right));
    pointer-events:none;
}
.nav-bar{
    pointer-events:auto;
    display:flex;align-items:center;justify-content:space-between;gap:.75rem;
    width:min(720px,100%);height:52px;padding:0 8px 0 18px;
    border-radius:100px;
    background:rgba(12,13,20,.66);
    border:1px solid var(--line);
    backdrop-filter:blur(22px) saturate(1.6);
    -webkit-backdrop-filter:blur(22px) saturate(1.6);
}
.nav-brand{
    display:inline-flex;align-items:center;gap:.6rem;
    font-weight:600;font-size:1.02rem;letter-spacing:-.015em;
    color:var(--ink);text-decoration:none;
}
/* The app icon, rounded as iOS rounds it. */
.mark{display:block;width:26px;height:26px;flex-shrink:0;border-radius:23%}
.nav-links{display:flex;align-items:center;gap:.1rem}
.nav-links a{
    display:inline-flex;align-items:center;height:36px;padding:0 .8rem;border-radius:100px;
    font-size:.9rem;font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap;
    transition:color .2s;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links .nav-cta{
    margin-inline-start:.3rem;padding:0 1rem;
    color:var(--light);
    background:color-mix(in srgb,var(--light) 13%,transparent);
    border:1px solid color-mix(in srgb,var(--light) 32%,transparent);
}

/* ---------- Hero ---------- */
/* The first screen is the product: a mirror ringed by light, as the app rings the display. The face in it is
   the Mona Lisa, cropped as the app frames her on the closed display. */
.hero{
    position:relative;z-index:1;
    display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;
    gap:clamp(1.75rem,3.5vw,2.75rem) clamp(2rem,6vw,5.5rem);
    width:min(1160px,100%);margin-inline:auto;
    padding:calc(env(safe-area-inset-top) + 7rem) max(1.5rem,env(safe-area-inset-right)) clamp(2.5rem,6vw,4.5rem) max(1.5rem,env(safe-area-inset-left));
}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem}
.hero-tools{grid-column:1/-1;display:flex;flex-direction:column;align-items:center}

/* The mirror. Its outer box holds still and the ring grows inward, as it does on the display. The ring is
   drawn at half its width in points, so the slider keeps its whole range at this size. */
.glass{
    --glass-r:clamp(30px,4.4vw,52px);
    --ring-eff:calc(var(--ring)*.5);
    position:relative;justify-self:center;
    /* Short windows get a smaller mirror, so the controls under it stay on the first screen. */
    width:min(100%,390px,max(250px,calc((100svh - 330px)*.687)));
    aspect-ratio:1398/2034;
    border-radius:var(--glass-r);
    background:color-mix(in srgb,var(--light) calc(100%*var(--lit)),var(--unlit));
    box-shadow:0 0 calc(24px + 120px*var(--glow)) calc(-8px + 16px*var(--glow)) color-mix(in srgb,var(--light) calc(40%*var(--glow)),transparent);
}
.glass-view{
    position:absolute;inset:var(--ring-eff);
    container-type:inline-size;overflow:hidden;
    border-radius:calc(var(--glass-r) - var(--ring-eff)*.75);
    background:#0b0c12;
}
.glass-face{
    display:block;width:100%;height:100%;object-fit:cover;
    filter:brightness(calc(.68 + .32*var(--lit)));
}
/* ::before is the light spilling in from the ring, ::after its colour on her face: warm light looks warm in
   the mirror, which is what Lock Camera Colour is for. */
.glass-view::before,.glass-view::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;border-radius:inherit}
.glass-view::before{box-shadow:inset 0 0 calc(2cqw + 15cqw*var(--glow)) calc(1.2cqw*var(--glow)) color-mix(in srgb,var(--light) calc(46%*var(--glow)),transparent)}
.glass-view::after{background:var(--light);mix-blend-mode:soft-light;opacity:calc(.42*var(--glow))}
/* The loupe: her smile at twice the mirror's scale, the app's default magnification. The picture is the
   mirror's own, sized and placed in the mirror's units. */
.glass-loupe{
    position:absolute;z-index:2;top:3.4cqw;right:3.4cqw;
    width:29cqw;aspect-ratio:1;border-radius:50%;
    background:#0b0c12 url('/assets/mona-lisa.webp?v=1') no-repeat -80.4cqw -141.1cqw/205cqw auto;
    box-shadow:
      0 0 0 max(2px,.75cqw) color-mix(in srgb,var(--light) calc(100%*var(--lit)),#8a8b93),
      0 1cqw 5cqw rgba(0,0,0,.5);
}

/* The wordmark is lit by the ring: it takes the light's colour and goes grey when the light is off. */
.brand{
    font-weight:600;font-size:clamp(3.6rem,9.5vw,7.4rem);
    font-variation-settings:"opsz" 32;
    letter-spacing:-.05em;line-height:.92;
    color:color-mix(in srgb,var(--light) calc(100%*var(--lit)),#6f7078);
    text-shadow:0 0 calc(70px*var(--glow)) color-mix(in srgb,var(--light) calc(38%*var(--glow)),transparent);
}
.hero h1{
    font-weight:500;font-size:clamp(1.25rem,2.7vw,1.9rem);
    letter-spacing:-.022em;line-height:1.2;
    color:var(--ink);text-wrap:balance;
}
.lede{
    font-size:clamp(1rem,1.45vw,1.12rem);line-height:1.6;
    color:var(--ink-2);max-width:42ch;text-wrap:pretty;
}
.soon{
    display:inline-flex;align-items:center;gap:.65rem;
    min-height:48px;padding:0 1.2rem;margin-top:.6rem;
    border-radius:12px;background:var(--panel);border:1px solid var(--line);
    font-size:.95rem;font-weight:500;color:var(--ink);white-space:nowrap;
}
.soon::before{
    content:"";width:8px;height:8px;border-radius:50%;
    background:color-mix(in srgb,var(--light) calc(100%*var(--lit)),#6f7078);
    box-shadow:0 0 calc(12px*var(--glow)) var(--light);
}
.platforms{font-size:.8rem;letter-spacing:.02em;color:var(--ink-3)}

/* The app's light controls, under the mirror. */
.tools{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.7rem 1.4rem;
    padding:.7rem 1.1rem;
    border-radius:26px;background:rgba(9,10,16,.78);border:1px solid var(--line);
    font-size:.85rem;color:var(--ink-2);
}
.tools-note{margin-top:.7rem;font-size:.78rem;color:var(--ink-3)}
.switch input,.seg input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.switch{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;color:var(--ink);font-weight:500}
.switch-track{
    position:relative;width:42px;height:26px;flex-shrink:0;border-radius:100px;
    background:rgba(255,255,255,.16);transition:background .25s;
}
.switch-track::after{
    content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
    background:#fff;transition:transform .25s var(--ease),background .25s;
}
.switch input:checked + .switch-track{background:var(--light)}
.switch input:checked + .switch-track::after{transform:translateX(16px);background:#0b0c12}
.seg{display:inline-flex;min-width:0;padding:3px;border:0;border-radius:100px;background:rgba(255,255,255,.08)}
.seg label{
    display:inline-flex;align-items:center;height:32px;padding:0 .9rem;border-radius:100px;
    font-weight:500;color:var(--ink-2);cursor:pointer;
    transition:background .25s,color .25s;
}
.seg input:checked + label{background:var(--light);color:#0b0c12}
.switch input:focus-visible + .switch-track,.seg input:focus-visible + label{outline:2px solid var(--ink-display);outline-offset:3px}
/* The sliders write custom properties, which takes script. Without it they stay out of the way. */
.slide{display:none;align-items:center;gap:.6rem;white-space:nowrap}
.js .slide{display:inline-flex}
.slide input{width:clamp(88px,12vw,132px);accent-color:var(--light)}

/* ---------- Chapters ---------- */
.chapter{padding-block:clamp(3.5rem,8vw,6.25rem)}
.chapter-grid{
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:clamp(2.5rem,7vw,6rem);align-items:center;
}
.chapter-flip .chapter-fig{order:-1}
.chapter-top{align-items:start}
.compact h2{
    font-weight:600;font-size:clamp(1.9rem,4.4vw,3.1rem);
    font-variation-settings:"opsz" 32;
    letter-spacing:-.035em;line-height:1.05;
    color:var(--ink-display);text-wrap:balance;
}
.lead{
    margin-top:1rem;max-width:34rem;
    font-size:1.15rem;line-height:1.55;color:var(--ink-2);text-wrap:pretty;
}
.points{margin-top:2rem;max-width:34rem}
.chapter-top .points{margin-top:0}
.points > div{padding-block:1.15rem;border-top:1px solid var(--line)}
.points dt{font-weight:600;color:var(--ink)}
.points dd{margin-top:.3rem;line-height:1.55;color:var(--ink-2)}

/* Three whites, side by side. Each tile is a label for its preset in the hero, so picking one relights the page. */
.lamps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,1.6vw,1rem)}
.lamp{
    --c:var(--daylight);
    display:flex;flex-direction:column;justify-content:flex-end;gap:.2rem;
    aspect-ratio:3/5;padding:clamp(.8rem,1.6vw,1.1rem);
    border-radius:20px;background:#07080d;cursor:pointer;
    box-shadow:inset 0 0 0 7px color-mix(in srgb,var(--c) 34%,var(--unlit)),inset 0 0 0 0 transparent;
    transition:box-shadow .45s var(--ease);
}
.lamp-office{--c:var(--office)}
.lamp-evening{--c:var(--evening)}
html:has(#k-daylight:checked) .lamp-daylight,
html:has(#k-office:checked) .lamp-office,
html:has(#k-evening:checked) .lamp-evening{
    box-shadow:inset 0 0 0 7px var(--c),inset 0 0 46px 6px color-mix(in srgb,var(--c) 42%,transparent);
}
.lamp-name{font-weight:600;font-size:.95rem;color:var(--ink)}
.lamp-k{font-family:var(--mono);font-size:.76rem;color:var(--ink-2)}

/* The loupe at its default, and the range it covers: a tick for each 0.1 the slider steps, lit at 2. */
.lens-fig{display:flex;flex-direction:column;align-items:center;gap:1.75rem}
.lens{
    display:grid;place-items:center;
    width:min(300px,72%);aspect-ratio:1;border-radius:50%;
    background:radial-gradient(circle at 50% 42%,#13141c,#07080d 70%);
    box-shadow:0 0 0 2px color-mix(in srgb,var(--light) 80%,transparent),0 0 60px -8px color-mix(in srgb,var(--light) 30%,transparent);
}
.lens-x{
    font-weight:600;font-size:clamp(3.2rem,9vw,5.2rem);
    font-variation-settings:"opsz" 32;letter-spacing:-.05em;
    color:var(--ink-display);
}
.scale{
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.8rem;
    width:min(340px,86%);
    font-family:var(--mono);font-size:.76rem;color:var(--ink-2);
}
.scale-bar{
    position:relative;height:10px;
    background:repeating-linear-gradient(90deg,var(--ink-4) 0 1px,transparent 1px calc(100%/25));
    border-right:1px solid var(--ink-4);
}
.scale-bar::after{
    content:"";position:absolute;left:20%;top:-4px;bottom:-4px;width:2px;margin-left:-.5px;
    background:var(--light);
}

/* ---------- At a glance ---------- */
.sheet{
    display:grid;grid-template-columns:minmax(7rem,13rem) minmax(0,1fr);
    margin-top:2.25rem;
}
.sheet dt,.sheet dd{padding-block:1rem;border-top:1px solid var(--line);line-height:1.5}
.sheet dt{font-family:var(--mono);font-size:.8rem;color:var(--ink-3);padding-top:1.1rem}
.sheet dd{color:var(--ink)}

/* ---------- Privacy band and the closing panel ---------- */
.band{text-align:center}
.band .lead{margin-inline:auto}
.text-link{
    display:inline-block;margin-top:1.5rem;
    font-weight:500;color:var(--ink);
    text-decoration:underline;text-decoration-color:var(--light);text-decoration-thickness:1.5px;text-underline-offset:.3em;
}
.get{padding-block:0 clamp(4.5rem,10vw,7rem)}
.get-panel{
    display:flex;flex-direction:column;align-items:center;gap:1rem;
    padding:clamp(2.5rem,7vw,4.5rem) 1.5rem;
    border-radius:clamp(22px,3.4vw,40px);background:#07080d;text-align:center;
    box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--light) calc(70%*var(--lit)),var(--unlit)),inset 0 0 calc(90px*var(--glow)) color-mix(in srgb,var(--light) calc(16%*var(--glow)),transparent);
}
.get-panel p{color:var(--ink-2);line-height:1.55}
.get-panel .soon{margin-top:.4rem}

/* ---------- Footer ---------- */
.foot{
    position:relative;z-index:1;
    padding:4rem 0 calc(4rem + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
    text-align:center;font-size:.9rem;color:var(--ink-3);
}
.foot-inner{display:flex;flex-direction:column;align-items:center;gap:1rem}
.foot-brand{
    display:inline-flex;align-items:center;gap:.6rem;
    font-weight:600;font-size:1.05rem;color:var(--ink);text-decoration:none;
}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.5rem}
.foot-links a,.family-row a,.foot-copy a{color:var(--ink-2);text-decoration:none;transition:color .2s}
.foot-links a:hover,.family-row a:hover,.foot-copy a:hover{color:var(--ink)}
.family-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem .6rem}

/* ---------- Support and privacy ---------- */
.doc{
    position:relative;z-index:1;
    width:min(46rem,100%);margin-inline:auto;
    padding:calc(env(safe-area-inset-top) + 9rem) max(1.5rem,env(safe-area-inset-right)) 6rem max(1.5rem,env(safe-area-inset-left));
}
.doc h1{
    font-weight:600;font-size:clamp(2.4rem,7vw,4rem);
    font-variation-settings:"opsz" 32;
    letter-spacing:-.04em;line-height:1;
    color:var(--ink-display);
}
.doc-date{margin-top:1rem;font-family:var(--mono);font-size:.8rem;color:var(--ink-3)}
.doc section{margin-top:3.25rem}
.compact .doc h2{font-size:1.5rem;letter-spacing:-.025em;line-height:1.2}
.doc h3{margin-top:2rem;font-weight:600;font-size:1.05rem;line-height:1.4;color:var(--ink)}
.doc p{margin-top:.75rem;line-height:1.65;color:var(--ink-2);text-wrap:pretty}
.doc p a{
    color:var(--ink);
    text-decoration:underline;text-decoration-color:var(--light);text-decoration-thickness:1.5px;text-underline-offset:.25em;
}
.doc-contact{font-size:1.15rem}

/* ---------- 404 ---------- */
.lost{
    position:relative;z-index:1;
    min-height:100svh;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;
    padding:calc(env(safe-area-inset-top) + 7rem) max(1.5rem,env(safe-area-inset-right)) 5rem max(1.5rem,env(safe-area-inset-left));
    text-align:center;
}
.lost-code{
    font-weight:600;font-size:clamp(5rem,16vw,8rem);
    font-variation-settings:"opsz" 32;
    letter-spacing:-.05em;line-height:.9;
    color:color-mix(in srgb,var(--light) calc(100%*var(--lit)),#6f7078);
    text-shadow:0 0 calc(70px*var(--glow)) color-mix(in srgb,var(--light) calc(38%*var(--glow)),transparent);
}
.lost p{max-width:30rem;line-height:1.6;color:var(--ink-2)}
.lost .text-link{margin-top:.5rem}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference){
    html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}

/* ---------- Narrow ---------- */
@media (max-width:860px){
    .hero{grid-template-columns:1fr;text-align:center}
    .hero-copy{align-items:center}
    .glass{width:min(100%,340px)}
    .chapter-grid{grid-template-columns:1fr;gap:2.75rem}
    .chapter-flip .chapter-fig{order:0}
    .chapter-top .points{margin-top:-.75rem}
}
@media (max-width:560px){
    .hero{padding-top:calc(env(safe-area-inset-top) + 6.25rem)}
    .hero-copy{gap:.85rem}
    .soon{min-height:44px;padding:0 .9rem;font-size:.88rem}
    .nav-bar{padding-left:14px}
    .nav-links a{padding:0 .6rem;font-size:.86rem}
    .nav-links .nav-cta{padding:0 .8rem}
    .nav-links .nav-extra{display:none}
    .tools{border-radius:22px;gap:.7rem 1rem}
    .seg label{padding:0 .7rem}
    .slide input{width:92px}
    .sheet{grid-template-columns:1fr}
    .sheet dt{padding-bottom:0}
    .sheet dd{padding-top:.3rem;border-top:0}
}