/* erenyamic.com — Eren OS. Hand-written CSS. The content (.docs) reads as a plain page by default; html.os-on turns
   it into an operating system: .os-desk (menu bar, desktop, dock, windows) or .os-phone (home screen, apps).
   The content components size themselves to their container (a window, a phone, the page), not to the screen. */
:root{
  --bg:#06070a; --bg-2:#0c0e14; --text:#eef0f6; --text-2:#b6bac7; --muted:#858b9c;
  --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.16); --surface:rgba(255,255,255,.04); --surface-2:rgba(255,255,255,.075);
  --brand-a:#6d86ff; --brand-b:#2fd3c0; --warm:#ff7a45;
  --glass:rgba(24,26,34,.5); --glass-2:rgba(30,32,41,.74); --glass-line:rgba(255,255,255,.13); --glass-hi:rgba(255,255,255,.2);
  --win:rgba(17,19,25,.84); --win-line:rgba(255,255,255,.12); --menu:rgba(22,24,31,.55); --menu-solid:rgba(34,36,45,.86);
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --fell:"IM Fell English",Georgia,serif; --fell-sc:"IM Fell English SC","IM Fell English",Georgia,serif;
  --gutter:clamp(16px,5vw,48px); --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.56,.64,1);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#ece9e1; --bg-2:#e2ded3; --text:#101218; --text-2:#3b404c; --muted:#6c717d;
  --line:rgba(16,18,24,.1); --line-2:rgba(16,18,24,.18); --surface:rgba(255,255,255,.5); --surface-2:rgba(255,255,255,.75);
  --glass:rgba(255,255,255,.42); --glass-2:rgba(250,250,248,.78); --glass-line:rgba(255,255,255,.6); --glass-hi:rgba(255,255,255,.85);
  --win:rgba(250,249,246,.9); --win-line:rgba(16,18,24,.14); --menu:rgba(246,245,241,.55); --menu-solid:rgba(250,249,246,.9);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;overflow-x:clip}
img,video,svg,canvas{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
em{font-style:normal}
::selection{background:color-mix(in oklab,var(--brand-a) 45%,transparent);color:#fff}
:focus-visible{outline:2px solid var(--brand-b);outline-offset:2px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:4000;background:var(--text);color:var(--bg);padding:10px 16px;border-radius:12px;font-weight:600;transition:top .2s}
.skip:focus{top:12px}
.fell{font-family:var(--fell);font-weight:400;letter-spacing:0}
html:not(.os-on) .os-only{display:none!important}

/* ---------- bits ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:15px;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;transition:transform .35s var(--ease-out),background .2s,border-color .2s,box-shadow .3s}
.btn:active{transform:scale(.97)}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn small{font-weight:500;opacity:.6;font-size:12.5px}
.btn--primary{background:var(--text);color:var(--bg);box-shadow:0 14px 34px -16px color-mix(in oklab,var(--brand-a) 85%,transparent)}
.btn--primary svg{fill:currentColor;stroke:none}
.btn--glass{background:var(--glass);border-color:var(--glass-line);color:var(--text);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6)}
.btn--ghost{background:var(--surface);border-color:var(--line-2);color:var(--text)}
.btn--ghost:hover,.btn--glass:hover{background:var(--surface-2)}
.btn--warm{background:linear-gradient(180deg,#ffb25b,#ff7a1f);color:#1a0b04;box-shadow:0 14px 38px -16px rgba(255,122,31,.7)}
.btn--xl{height:60px;padding:0 30px;font-size:clamp(16px,2vw,20px)}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:600;border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:border-color .2s}
.link-arrow::after{content:"↗";font-weight:500;transition:transform .2s var(--ease)}
.link-arrow:hover{border-color:currentColor}
.link-arrow:hover::after{transform:translate(2px,-2px)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(53,208,127,.55)}70%,100%{box-shadow:0 0 0 8px rgba(53,208,127,0)}}
@keyframes ping-warm{0%{box-shadow:0 0 0 0 rgba(255,138,42,.55)}70%,100%{box-shadow:0 0 0 8px rgba(255,138,42,0)}}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-b)}
.eyebrow--warm{color:#ffb25b}
:root[data-theme="light"] .eyebrow:not(.eyebrow--warm){color:#0b8577}
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brand-b);vertical-align:1px;margin-right:6px;animation:ping-teal 2.4s ease-out infinite}
@keyframes ping-teal{0%{box-shadow:0 0 0 0 rgba(47,211,192,.6)}70%,100%{box-shadow:0 0 0 9px rgba(47,211,192,0)}}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{font-family:var(--mono);font-size:11.5px;padding:4px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.1);color:#c9cdd8;background:rgba(255,255,255,.03)}
.status{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);color:#e8eaf0}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:#35d07f;box-shadow:0 0 12px #35d07f}
.status--soon::before{background:#ff8a2a;box-shadow:0 0 12px #ff8a2a}
.status--build::before{background:#6d86ff;box-shadow:0 0 12px #6d86ff}
.status--own::before{background:#e8b46c;box-shadow:0 0 12px #e8b46c}
.asbadge img{height:42px;width:auto}
.ico{display:block;flex:none;width:100%;aspect-ratio:1;border-radius:22.5%;overflow:hidden;box-shadow:0 0 0 .5px rgba(255,255,255,.12) inset}
.ico svg,.ico img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.ico--sm{width:18px;border-radius:5px}

/* ---------- the plain page (no JavaScript, ?page, or before the OS starts) ---------- */
.docs{display:grid;gap:clamp(20px,3vw,32px);width:min(1120px,100% - 2*var(--gutter));margin:0 auto;padding:clamp(20px,4vw,48px) 0 80px}
.doc{container-type:inline-size;position:relative;padding:clamp(22px,4vw,48px);border-radius:28px;border:1px solid var(--line);background:var(--surface)}
.doc > h2,.doc .pile__head h2{font-size:clamp(34px,7cqw,64px);font-weight:700;letter-spacing:-.05em;line-height:1;margin:10px 0 22px}
.doc--welcome{position:relative;display:grid;gap:clamp(16px,2.6vw,24px);align-content:end;min-height:min(92vh,860px);padding:clamp(28px,6vw,72px);overflow:hidden;isolation:isolate}
/* the desk's own colour: under the canvas while it starts, and instead of it without WebGL */
:root{--desk:#16181d;--etch:#6c7180}
:root[data-room="walnut"]{--desk:#2b180e;--etch:#8d6c54}
:root[data-room="paper"]{--desk:#e8e4da}
html:not(.os-on) .doc--welcome,.os-on .doc--welcome::before{background:radial-gradient(90% 75% at 34% 20%,color-mix(in oklab,var(--desk) 86%,#fff),var(--desk) 62%,color-mix(in oklab,var(--desk) 78%,#000))}
.welcome__gl{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:0;transition:opacity 1.2s var(--ease-out)}
.gl-on .welcome__gl,.gl-on.doc--welcome .welcome__gl{opacity:1}
.welcome__name{font-size:clamp(70px,15cqw,240px);font-weight:800;letter-spacing:-.058em;line-height:.8;margin:.04em 0 .04em -.045em;padding-bottom:.04em;color:var(--etch);text-shadow:0 -1px 0 rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.09)}
/* (that is the name pressed into the desk without WebGL, its walls catching the light so it can be read; on paper,
   inked) */
:root[data-room="paper"] .welcome__name{color:#222328;text-shadow:0 1px 0 rgba(255,255,255,.8)}
.welcome__name span{display:inline-block}
.gl-wait .welcome__name{opacity:0}
.gl-on .welcome__name{color:transparent;text-shadow:none;opacity:1}
.welcome__lede{max-width:36ch;font-size:clamp(18px,2.1vw,24px);line-height:1.38;letter-spacing:-.02em;color:var(--text-2);text-wrap:balance}
.welcome__lede em{color:var(--text);font-weight:500}
.welcome__cta{display:flex;flex-wrap:wrap;gap:10px}
/* the welcome sits on the desk: light words on stone and wood, ink on paper */
.doc--welcome{--text:#f1f2f6;--text-2:rgba(241,242,246,.72);--muted:rgba(241,242,246,.5);--line-2:rgba(255,255,255,.22);--surface:rgba(255,255,255,.06);--surface-2:rgba(255,255,255,.12);--glass:rgba(255,255,255,.08);--glass-line:rgba(255,255,255,.16);--glass-hi:rgba(255,255,255,.22);--on-text:#0b0d12;color:var(--text);color-scheme:dark}
:root[data-room="paper"] .doc--welcome{--text:#17181c;--text-2:rgba(23,24,28,.7);--muted:rgba(23,24,28,.5);--line-2:rgba(23,24,28,.2);--surface:rgba(255,255,255,.45);--surface-2:rgba(255,255,255,.7);--glass:rgba(255,255,255,.5);--glass-line:rgba(23,24,28,.12);--glass-hi:rgba(255,255,255,.9);--on-text:#fff;color-scheme:light}
.doc--welcome .eyebrow,:root[data-theme] .doc--welcome .eyebrow{color:var(--text-2)}
:root[data-room="paper"] .doc--welcome .eyebrow,:root[data-room="paper"] .doc--welcome .welcome__lede{text-shadow:0 1px 0 rgba(255,255,255,.7)}
.doc--welcome .btn--primary{color:var(--on-text);box-shadow:0 14px 34px -16px rgba(0,0,0,.6)}
/* the apps to get, as cards: the art, and the badges that download them; the rest of a card opens the app */
.welcome__get{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:14px;width:100%;max-width:900px}
.get{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:12px;min-height:208px;padding:16px 18px 18px;border-radius:26px;overflow:hidden;background:#0b0806;color:#fff;text-align:left;text-shadow:none;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 1px 0 rgba(255,255,255,.18) inset,0 30px 60px -30px rgba(0,0,0,.75);transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.get:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(255,255,255,.22),0 1px 0 rgba(255,255,255,.24) inset,0 40px 70px -30px rgba(0,0,0,.8)}
.get__art{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.get:hover .get__art{transform:scale(1.035)}
.get__open{position:absolute;inset:0;z-index:0;border-radius:inherit}
.get__tag,.get__copy,.get__badges{position:relative;z-index:1}
.get__tag,.get__copy{pointer-events:none}
.get__tag{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border-radius:999px;background:rgba(0,0,0,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.get__dot{width:7px;height:7px;border-radius:50%;background:#ff8a2a;animation:ping-warm 2.4s ease-out infinite}
.get__badges{display:flex;flex-wrap:wrap;gap:8px}
.get__badges a{display:block;border-radius:8px;transition:transform .3s var(--ease-out)}
.get__badges a:hover{transform:translateY(-2px)}
.get__badges img{height:40px;width:auto}
.get--peekadoor .get__art{object-position:0 50%}
.get--peekadoor .get__tag{color:#ffd29a}
.get--lumendesk{background:radial-gradient(75% 120% at 80% 50%,#3d1d0f 0%,#160b06 52%,#090605 100%)}
.get--lumendesk .get__art{inset:50% auto auto 46%;width:62%;height:auto;translate:0 -50%;object-fit:contain;-webkit-mask:radial-gradient(closest-side,#000 64%,transparent);mask:radial-gradient(closest-side,#000 64%,transparent)}
.get--lumendesk .get__tag{color:#ffb37a}
.get__copy{display:grid;gap:6px;max-width:56%}
.get--lumendesk .get__copy{max-width:46%}   /* (the glasses' picture starts at 46%: the words wrap before it) */
.get__name{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.get__name img{width:30px;height:30px;border-radius:8px}
.get__sub{font-size:14px;line-height:1.35;color:rgba(255,255,255,.72)}

/* ---------- the content: projects ---------- */
.doc--proj{color:#eef0f6;border-color:rgba(255,255,255,.08);background:radial-gradient(90% 80% at 100% 0%,color-mix(in oklab,var(--accent) 24%,transparent),transparent 62%),radial-gradient(70% 70% at 0% 100%,color-mix(in oklab,var(--accent-2) 12%,transparent),transparent 60%),linear-gradient(180deg,#111319,#0a0b10)}
.proj{display:grid;gap:clamp(24px,5cqw,52px);align-items:center}
@container (min-width:760px){.proj{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.proj__body{display:grid;gap:14px;align-content:center;min-width:0}
.proj__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.proj__icon{width:54px;height:54px;border-radius:13px;box-shadow:0 10px 30px -10px color-mix(in oklab,var(--accent) 70%,transparent)}
.proj__glyph{width:54px;height:54px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#1c1f27,#0d0f14);border:1px solid rgba(255,255,255,.1)}
.proj__glyph i{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 20px var(--accent)}
.doc--proj h2{font-size:clamp(36px,6.4cqw,62px);font-weight:700;letter-spacing:-.05em;line-height:.95;margin:0}
.doc--proj h2.fell{font-weight:400;letter-spacing:.02em;font-family:var(--fell-sc)}
.proj__one{font-size:clamp(18px,2.6cqw,23px);letter-spacing:-.02em;line-height:1.28;color:#fff;font-weight:500;text-wrap:balance}
.proj__txt{color:#b9bdc9;font-size:15.5px;max-width:62ch;text-wrap:pretty}
.proj__list{display:grid;gap:8px;font-size:14.5px;color:#c3c7d2}
.proj__list li{position:relative;padding-left:20px}
.proj__list li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,var(--accent),var(--accent-2));transform:rotate(45deg)}
.proj__list b{color:#fff;font-weight:600}
.proj__links{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:4px}
.proj__links .link-arrow{color:#fff;border-color:rgba(255,255,255,.2)}
.proj__links .btn--ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);color:#fff}
.proj__media{position:relative;display:grid;place-items:center;min-width:0}
.proj__media img,.proj__media video{border-radius:20px}

/* LumenDesk: live lenses on the glasses render. Same image as lumendesk.dev's hero, so its traced lens outlines
   (percent of the 1536x1024 render) fit exactly; cqw = 1% of the image width. The group blends "lighten" into the card
   so the render's black backdrop disappears (the blend sits on the group: the container query makes it a stacking
   context, which would isolate a blend set on the image alone). */
.lensbox{position:relative;width:100%;container-type:inline-size;mix-blend-mode:lighten}
.lensbox>img{width:100%;border-radius:24px}
.lensmap{position:absolute;inset:0;pointer-events:none}
.lensclip{position:absolute;inset:0}
.lensclip--l{clip-path:polygon(13.39% 47.13%, 13.41% 43.79%, 13.65% 42.15%, 14.44% 39.99%, 15.78% 38.45%, 17.94% 37.27%, 20.55% 36.52%, 21.51% 36.3%, 26.3% 36.01%, 29.54% 35.89%, 33.07% 36.09%, 36.75% 36.67%, 39.5% 36.95%, 41.3% 37.7%, 42.2% 38.9%, 42.6% 40.6%, 42.75% 43.6%, 42.73% 47.51%, 42.72% 50.8%, 42.35% 53.2%, 41.18% 59.08%, 40.26% 62.54%, 39.12% 65.86%, 38.17% 67.61%, 36.54% 69.36%, 35.61% 69.95%, 33.68% 70.62%, 31.36% 71.04%, 29.61% 71.14%, 24.11% 70.94%, 20.94% 70.24%, 18.67% 68.99%, 17.89% 68.13%, 17.2% 67.12%, 16.06% 64.78%, 15.66% 63.46%, 14.9% 60.08%, 13.8% 53.2%)}
.lensclip--r{clip-path:polygon(57.16% 47.55%, 57.2% 43.6%, 57.35% 40.6%, 57.8% 38.9%, 58.7% 37.7%, 60.5% 36.95%, 62.94% 37.47%, 65.85% 36.21%, 69.53% 35.92%, 73.62% 36.02%, 78.86% 36.51%, 79.86% 36.7%, 83.12% 37.75%, 84.18% 38.44%, 85.45% 40.07%, 85.72% 40.78%, 86.48% 43.86%, 86.55% 45.54%, 86.09% 53.26%, 84.99% 60.12%, 84.4% 62.81%, 83.8% 64.78%, 83.04% 66.63%, 82.39% 67.7%, 81.2% 68.97%, 79.88% 69.85%, 78.96% 70.25%, 74.93% 71.02%, 69.88% 71.12%, 67.2% 70.83%, 65.29% 70.36%, 63.4% 69.38%, 62.94% 69.04%, 61.77% 67.63%, 61.1% 66.51%, 60.07% 63.95%, 59.42% 61.93%, 58.58% 58.43%, 57.28% 51.67%)}
.lenspanel{position:absolute;background:linear-gradient(158deg,rgba(20,17,14,.94),rgba(9,8,8,.97));overflow:hidden;box-shadow:inset 0 -3cqw 6cqw -3cqw rgba(255,110,40,.22)}
.lenspanel--l{left:13.1%;top:35.6%;width:30.1%;height:36%}
.lenspanel--r{left:56.8%;top:35.6%;width:30.1%;height:36%}
.vscreens{position:absolute;inset:10% 0 20%;display:flex;gap:.5cqw;padding:0 6%;align-items:center;animation:vslide 9s linear infinite;will-change:transform}
@keyframes vslide{from{transform:translateX(0)}to{transform:translateX(-50.5%)}}
.vscr{flex:0 0 44%;height:88%;border-radius:.6cqw;background:linear-gradient(160deg,#1a1712,#0d0b0a);border:1px solid rgba(255,255,255,.07);position:relative;overflow:hidden}
.vscr__bar{position:absolute;top:9%;left:9%;right:9%;height:.45cqw;border-radius:4px;background:rgba(255,255,255,.13)}
.vscr--vid{background:radial-gradient(120% 100% at 50% 42%,#2a1c12,#0c0a09)}
.vscr__play{position:absolute;top:36%;left:44%;width:0;height:0;border-left:.75cqw solid var(--accent);border-top:.5cqw solid transparent;border-bottom:.5cqw solid transparent}
.vscr__prog{position:absolute;bottom:14%;left:12%;right:12%;height:.28cqw;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.vscr__prog::after{content:"";position:absolute;inset:0;width:35%;background:var(--accent);border-radius:2px;animation:vprog 3.6s ease-in-out infinite}
@keyframes vprog{0%{width:10%}85%{width:94%}100%{width:10%}}
.vscr--doc::before{content:"";position:absolute;inset:16% 12%;background:repeating-linear-gradient(rgba(255,255,255,.11) 0 2px,transparent 2px 8px)}
.lensbar{position:absolute;top:7%;left:6%;display:flex;gap:.45cqw;z-index:2}
.lensbar i{width:.8cqw;height:.8cqw;border-radius:50%;display:block}
.lensbar i.r{background:#ff5f57}.lensbar i.y{background:#febc2e}.lensbar i.g{background:#28c840}
.lenscode{position:absolute;left:6%;right:5%;top:18%;bottom:5%;font-family:var(--mono);font-size:1.37cqw;line-height:1.55;color:#aeb6c6;white-space:pre-wrap;overflow:hidden}
.lenscode .k{color:#ff9b6b}.lenscode .s{color:#8fd39a}.lenscode .n{color:#7cc7ff}.lenscode .f{color:#d3a0ff}.lenscode .c{color:#5f6678}
.lenscur{display:inline-block;width:.5em;height:1.02em;background:var(--accent);transform:translateY(.12cqw);animation:lensblink 1.05s step-end infinite}
@keyframes lensblink{50%{opacity:0}}
.proj__phone{position:absolute;right:-1%;bottom:-6%;width:28%;border-radius:16px!important;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -20px rgba(0,0,0,.9);rotate:4deg}
.proj__media--phones{grid-template-columns:1fr 1fr;gap:16px;align-items:start;max-width:500px;justify-self:center;width:100%}
.proj__media--phones img{width:100%;aspect-ratio:736/1600;object-fit:cover;border-radius:28px;border:6px solid #1a120d;box-shadow:0 30px 70px -24px rgba(255,120,30,.35),0 20px 50px -20px rgba(0,0,0,.9)}
.proj__media--phones img:last-child{margin-top:18%}
.camstage{position:relative;width:100%}
.camstage video{width:100%;aspect-ratio:16/9;object-fit:cover;box-shadow:0 40px 80px -30px rgba(0,0,0,.85);border:1px solid rgba(255,255,255,.1)}
.gpanel{position:absolute;left:0;top:0;z-index:3;width:clamp(96px,22cqw,190px);padding:9px 11px 11px;border-radius:13px;background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.28);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 24px 50px -18px rgba(0,0,0,.7),0 0 60px -10px color-mix(in oklab,var(--glow,#5aa9ff) 60%,transparent);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);color:#fff;touch-action:none;user-select:none;cursor:grab;will-change:transform}
.gpanel:active{cursor:grabbing}
.gpanel b{display:flex;align-items:center;gap:6px;font:600 11.5px var(--sans)}
.gpanel b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--glow,#5aa9ff);box-shadow:0 0 8px var(--glow,#5aa9ff)}
.gpanel span{display:block;height:5px;margin-top:7px;border-radius:3px;background:rgba(255,255,255,.28)}
.gpanel span:nth-of-type(2){width:72%}.gpanel span:nth-of-type(3){width:48%}
.gpanel__hint{position:absolute;left:12px;bottom:12px;z-index:4;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.5);color:rgba(255,255,255,.8);pointer-events:none;transition:opacity .5s}
.browser{width:100%;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#f7f5f0;box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.browser__bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;background:#e9e6de;color:#4a4d57;font:500 12px var(--mono)}
.browser__bar i{width:11px;height:11px;border-radius:50%;background:#d7d3c9}
.browser__bar i:nth-child(1){background:#ff5f57}.browser__bar i:nth-child(2){background:#febc2e}.browser__bar i:nth-child(3){background:#28c840}
.browser__bar b{margin:0 auto;font-weight:500;padding-right:40px}
.browser img{border-radius:0!important}
.redact{position:relative;display:grid;grid-template-columns:1fr;background:#f7f5f0;color:#16181f}
@container (min-width:620px){.redact{grid-template-columns:1fr 1fr;min-height:300px}}
.redact__col{display:grid;grid-template-rows:auto 1fr;min-width:0}
.redact__col+.redact__col{border-top:1px solid #e3dfd5;background:#efece4}
@container (min-width:620px){.redact__col+.redact__col{border-top:0;border-left:1px solid #e3dfd5}}
.redact__lbl{display:flex;justify-content:space-between;gap:8px;padding:11px 14px 0;font:500 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#7a7d86}
.redact__lbl b{color:#e0452f;font-weight:600}
.redact__in,.redact__out{margin:0;padding:10px 14px 14px;font:400 12.5px/1.65 var(--mono);color:#20232b;white-space:pre-wrap;word-break:break-word}
.redact__in{width:100%;min-height:10.5em;height:100%;border:0;resize:none;background:transparent;outline:none}
.redact__in:focus-visible{box-shadow:inset 0 0 0 2px #ff5470}
.redact__out mark{background:none;color:#e0452f;font-weight:600;border-radius:4px;padding:0 2px;box-shadow:inset 0 0 0 1px rgba(224,69,47,.25);animation:mark .6s var(--ease-out)}
@keyframes mark{from{background:rgba(224,69,47,.25)}}
.redact__scan{position:absolute;left:0;right:0;top:36px;height:2px;background:linear-gradient(90deg,transparent,#ff5470,transparent);box-shadow:0 0 18px #ff5470;opacity:0;pointer-events:none}
.redact__scan.go{animation:scan 1.2s var(--ease) forwards}
@keyframes scan{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(calc(var(--h,300px) - 40px))}}
.halo{position:relative;width:min(280px,70%);aspect-ratio:1}
.halo::before{content:"";position:absolute;inset:-30%;border-radius:50%;background:conic-gradient(from var(--spin,0deg),var(--accent),var(--accent-2),var(--accent));filter:blur(60px);opacity:.45;animation:spin 14s linear infinite}
.halo img{position:relative;width:100%;border-radius:22%;box-shadow:0 40px 80px -24px rgba(0,0,0,.9)}
@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--spin:360deg}}
.proj__media--icon{gap:20px;align-content:center}
.guard{position:relative;z-index:2;width:min(380px,100%);display:grid;gap:10px}
.guard__line{display:flex;align-items:center;gap:10px;padding:9px 9px 9px 13px;border-radius:13px;background:rgba(5,6,10,.7);border:1px solid rgba(255,255,255,.1);font:400 12.5px var(--mono);color:#aeb6c6}
.guard__line code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all}
.guard__line code b{color:#ffb4a8;font-weight:400}
.guard__line button{flex:none;height:30px;padding:0 12px;border-radius:9px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font:600 12px var(--sans);cursor:pointer}
.guard__note{font:400 12px var(--mono);color:rgba(255,255,255,.45);text-align:center}
.banner{position:absolute;right:3%;top:3%;z-index:4;display:grid;grid-template-columns:auto 1fr;gap:3px 12px;align-items:center;width:min(320px,94%);padding:12px 14px;border-radius:18px;background:rgba(36,38,46,.88);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 60px -20px rgba(0,0,0,.8);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);color:#f2f3f7;opacity:0;transform:translateY(-12px) scale(.96);transition:opacity .35s,transform .5s var(--spring);pointer-events:none}
.banner.show{opacity:1;transform:none}
.banner img{grid-row:span 2;width:34px;height:34px;border-radius:9px}
.banner b{font:600 13px/1.2 var(--sans)}
.banner b small{font-weight:400;color:rgba(242,243,247,.5);margin-left:6px}
.banner p{font:400 12.5px/1.35 var(--sans);color:rgba(242,243,247,.78)}
.fri{position:relative;width:min(520px,100%);aspect-ratio:1/1.04}
.proj__media--friday img{border-radius:0}
.fri__mac{position:absolute;left:0;top:8%;width:37%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.7))}
.fri__phone{position:absolute;left:31%;top:0;width:41%;aspect-ratio:660/1434;border-radius:13%/6%;border:6px solid #16171b;background:#000;overflow:hidden;z-index:2;box-shadow:0 0 0 1px rgba(255,255,255,.09),0 40px 80px -24px rgba(0,0,0,.9)}
.fri__phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fri__phone img+img{opacity:0;animation:fri-cycle 12s linear infinite}
.fri__phone img:nth-child(2){animation-delay:3s}.fri__phone img:nth-child(3){animation-delay:6s}.fri__phone img:nth-child(4){animation-delay:9s}
@keyframes fri-cycle{0%{opacity:0}4%{opacity:1}25%{opacity:1}29%{opacity:0}100%{opacity:0}}
.fri__watch{position:absolute;right:1%;bottom:11%;width:23%;z-index:3}
.fri__watch img{display:block;width:100%;aspect-ratio:422/514;border-radius:26%/22%;border:7px solid #1b1c21;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 60px -20px rgba(0,0,0,.9)}
.fri__watch::after{content:"";position:absolute;right:-5px;top:24%;width:6px;height:16%;border-radius:0 4px 4px 0;background:linear-gradient(#3b3c43,#23242a)}
.fri__hud{position:absolute;left:-3%;bottom:1%;width:64%;height:auto;z-index:4;filter:drop-shadow(0 20px 30px rgba(0,0,0,.75))}
/* Friday's run: a simulated job, from the request to the pull request, with the approval in the middle */
.agent{margin-top:clamp(24px,4cqw,40px);border-radius:18px;background:rgba(5,6,9,.72);border:1px solid rgba(255,255,255,.1);font:400 13.5px/1.6 var(--mono);color:#cdd2dc;overflow:hidden}
.agent__bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.08);font:500 12px var(--mono);letter-spacing:.06em;color:#9aa1b0}
.agent__bar b{color:#e8b46c;font-weight:600;letter-spacing:.1em}
.agent__bar em{margin-left:auto;padding:2px 8px;border-radius:999px;background:rgba(232,180,108,.14);color:#e8b46c;font-size:11px}
.agent__log{display:grid;align-content:start;gap:4px;padding:14px 16px;min-height:220px;max-height:340px;overflow:auto}
.agent__log p{opacity:0;transform:translateY(4px);animation:agent-in .35s var(--ease-out) forwards}
@keyframes agent-in{to{opacity:1;transform:none}}
.agent__log .me{color:#fff}
.agent__log .me::before{content:"you  ";color:#8f97a7}
.agent__log .fr{color:#f5d9a6}
.agent__log .fr::before{content:"friday  ";color:#e8b46c}
.agent__log .step{color:#8f97a7}
.agent__log .step::before{content:"  ▸ "}
.agent__log .ok{color:#7fd8a0}
.agent__log .no{color:#ff8a80}
.agent__ask{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:6px 0 2px;padding:10px 12px;border-radius:12px;background:rgba(232,180,108,.1);border:1px solid rgba(232,180,108,.35);color:#f5d9a6}
.agent__ask span{flex:1;min-width:180px}
.agent__ask button{height:32px;padding:0 14px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font:600 12.5px var(--sans);cursor:pointer}
.agent__ask button.yes{background:#e8b46c;color:#1b1206;border-color:transparent}
.agent__ask button:disabled{cursor:default}
.agent__ask button:disabled:not(.picked){opacity:.35}
.agent__go{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 16px 14px}
.agent__go span{font:500 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#8f97a7;margin-right:4px}
.agent__go button{height:32px;padding:0 13px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#e8eaf0;font:500 12.5px var(--sans);cursor:pointer}
.agent__go button:hover{background:rgba(255,255,255,.1)}
.agent__go button:disabled{opacity:.45;cursor:default}

/* ---------- Peekadoor ---------- */
.doc--peek{background:radial-gradient(70% 30% at 50% 0%,rgba(255,110,30,.16),transparent 70%),linear-gradient(180deg,#0d0806,#080504 30%,#070404);color:#efe5d3}
.proj--peek{padding-bottom:clamp(28px,5cqw,56px)}
.peek{display:grid;gap:clamp(48px,9cqw,96px);padding-top:clamp(28px,5cqw,56px);border-top:1px solid rgba(255,200,150,.1)}
.peek__intro{display:grid;justify-items:center;text-align:center;gap:16px}
.peek__logo{width:min(560px,92%);filter:drop-shadow(0 20px 60px rgba(255,110,30,.25))}
.peek__tag{font-family:var(--fell);font-style:italic;font-size:clamp(26px,5cqw,44px);color:#ffcf94;line-height:1.1}
.peek__story{max-width:62ch;font-size:clamp(16px,2cqw,18px);color:#cdbfa7;text-wrap:pretty}
.peek__story b{color:#ffe1b8;font-weight:600}
.peek__story--small{font-size:15px;color:#a8937a}
.peek__android{justify-self:center;width:min(640px,100%);padding:clamp(20px,3cqw,28px);border-radius:20px;border:1px solid rgba(255,200,150,.16);background:linear-gradient(180deg,rgba(255,138,42,.09),rgba(255,138,42,.02));display:grid;gap:12px;justify-items:center;text-align:center}
.peek__android p{max-width:56ch;color:#cdbfa7;text-wrap:pretty}
.peek__android .peek__android-title{font-size:clamp(23px,3cqw,29px);color:#ffe1b8}
.peek__android .peek__android-note{font-size:14px;color:#a8937a}
/* where to open the links: Instagram's and WhatsApp's own browsers don't keep the Google sign-in the beta needs */
.peek__android .peek__android-tip{display:flex;gap:10px;align-items:flex-start;max-width:52ch;padding:11px 14px;border-radius:14px;background:rgba(255,178,91,.1);border:1px solid rgba(255,178,91,.38);color:#ffe1b8;font-size:14.5px;line-height:1.45;text-align:left}
.peek__android-tip::before{content:"i";flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border-radius:50%;background:#ffb25b;color:#1a0b04;font:700 12px/1 var(--sans)}
.peek__steps{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.peek__steps .btn--ghost{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);color:#fff}
.peek__banner{border-radius:20px;overflow:hidden;border:1px solid rgba(255,200,150,.12);box-shadow:0 40px 90px -40px rgba(255,110,30,.45),0 30px 70px -30px rgba(0,0,0,.9)}
.peek__banner img{width:100%}
.hinge{display:grid;gap:clamp(24px,4cqw,40px)}
.hinge__copy{display:grid;gap:10px;max-width:640px}
.hinge__copy h3,.mind__head h3{font-size:clamp(28px,5cqw,50px);line-height:1.02;color:#f5ead6}
.hinge__copy p:not(.eyebrow),.mind__head p:not(.eyebrow){color:#bba98e}
.hinge__stage{display:grid;gap:clamp(18px,3cqw,40px);align-items:center}
@container (min-width:640px){.hinge__stage{grid-template-columns:1fr 1fr}.hinge__side{grid-column:1/-1;max-width:520px}}
@container (min-width:860px){.hinge__stage{grid-template-columns:1.05fr .8fr 1fr}.hinge__side{grid-column:auto}}
.hinge__side{display:grid;gap:18px}
.hinge__svg{width:100%;overflow:visible;touch-action:none;cursor:grab}
.hinge__svg .zone{fill:none;stroke-width:26;opacity:.22;transition:opacity .3s}
.hinge__svg .zone.is-on{opacity:.95}
.zone--closed{stroke:#e8dcc4}.zone--peek{stroke:#ffb347}.zone--wide{stroke:#ff7a2a}.zone--flung{stroke:#e0323a}
.hinge__base,.hinge__lid line{stroke-width:16;stroke-linecap:round}
.hinge__base{stroke:#3a281c}
.hinge__lid line{stroke:#5a3c26}
.hinge__lid{transform-origin:150px 280px;transform-box:view-box}
.hinge__handle{fill:#ffb25b;stroke:#1a0d06;stroke-width:4;filter:drop-shadow(0 0 14px rgba(255,150,60,.8))}
.hinge__pin{fill:#e8dcc4}
.hinge__range input{width:100%;accent-color:#ff8a2a;height:28px;cursor:pointer}
.hinge__phone{justify-self:center;width:min(250px,70%)}
.screen{position:relative;aspect-ratio:736/1600;border-radius:36px;overflow:hidden;border:9px solid #1b120d;background:#050303;box-shadow:0 50px 100px -30px rgba(0,0,0,.95),0 0 80px -20px rgba(255,120,40,calc(.15 + var(--danger,0)*.5));perspective:900px}
.screen__door{position:absolute;inset:0;transform-origin:0 50%;transform:rotateY(calc(var(--open,0) * -1deg));background:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,transparent 2px 22px),linear-gradient(90deg,#20140e,#3a2518 70%,#4a2f1e);box-shadow:inset 0 0 0 10px #1a100b,inset 0 0 60px rgba(0,0,0,.6),12px 0 30px rgba(0,0,0,.7);transition:transform .08s linear}
.screen__door::before,.screen__door::after{content:"";position:absolute;left:14%;right:14%;border:5px solid #140c08;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,200,150,.08)}
.screen__door::before{top:8%;height:36%;border-radius:120px 120px 6px 6px}
.screen__door::after{top:50%;height:40%}
.knob{position:absolute;right:9%;top:52%;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe2a3,#c8913f 55%,#5b3a14);box-shadow:0 0 10px rgba(255,170,80,.5)}
.screen__film{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);aspect-ratio:9/16;filter:brightness(calc(.55 + var(--open,0)/260));-webkit-mask-image:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent)}
.screen__film video{width:100%;height:100%;object-fit:cover;background:#050303}
.screen--film .screen__say{top:2.6%;font-size:18px}
.screen__say{position:absolute;left:0;right:0;top:9%;text-align:center;font-family:var(--fell);font-size:20px;color:#ffcf94;text-shadow:0 2px 12px #000;z-index:2}
.screen[data-zone="3"] .screen__say{color:#ff4a4a;font-family:var(--fell-sc);letter-spacing:.08em}
.screen__meter{position:absolute;left:14%;right:14%;bottom:7%;height:5px;border-radius:5px;background:rgba(255,255,255,.12);z-index:2;overflow:hidden}
.screen__meter span{display:block;height:100%;width:calc(var(--aware,0)*100%);background:linear-gradient(90deg,#ffb347,#e0323a);transition:width .15s}
.film__ctl{display:flex;justify-content:center;gap:10px;margin-top:14px}
.film__sound,.film__toggle{height:40px;border-radius:999px;border:1px solid rgba(255,190,130,.28);background:rgba(28,16,10,.78);color:#ffcf94;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.film__sound{padding:0 17px 0 13px;font:400 18px/1 var(--fell)}
.film__toggle{width:40px;padding:0}
.film__sound:hover,.film__toggle:hover{background:rgba(64,34,18,.92);border-color:rgba(255,190,130,.55)}
.film__sound svg{width:18px;height:18px;flex:none}
.film__toggle svg{width:15px;height:15px}
.film__sound .i-on,.film__sound[aria-pressed="true"] .i-off,.film__sound[aria-pressed="true"] span{display:none}
.film__sound[aria-pressed="true"] .i-on{display:block}
.film__sound[aria-pressed="true"]{width:40px;padding:0}
.film__toggle .i-play,.film__toggle[data-state="paused"] .i-pause{display:none}
.film__toggle[data-state="paused"] .i-play{display:block}
.hinge__deg{font-weight:200;font-size:clamp(84px,12cqw,140px);line-height:.8;color:#fff3dc;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.hinge__deg sup{font-size:.42em;vertical-align:top;color:#ffb25b;font-weight:300}
.hinge__zones{display:grid;gap:8px;margin-top:20px}
.hinge__zones li{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:11px 15px;border-radius:14px;border:1px solid rgba(255,220,180,.08);background:rgba(255,200,150,.02);transition:background .3s,border-color .3s,transform .4s var(--ease)}
.hinge__zones b{font-family:var(--fell-sc);font-weight:400;font-size:19px;color:#f5ead6}
.hinge__zones em{font-family:var(--mono);font-size:12px;color:#a8937a;align-self:center}
.hinge__zones span{grid-column:1/-1;font-size:14px;color:#a8937a;line-height:1.45}
.hinge__zones li.is-on{background:rgba(255,160,70,.1);border-color:rgba(255,160,70,.45);transform:translateX(5px)}
.hinge__zones li.is-on span{color:#f0dcc0}
.hinge__zones li:last-child.is-on{background:rgba(224,50,58,.14);border-color:rgba(224,50,58,.6)}
.devices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@container (min-width:900px){.devices{grid-template-columns:repeat(4,1fr)}}
.devices li{display:grid;gap:3px;padding:15px 17px;border-radius:16px;border:1px solid rgba(255,220,180,.1);background:linear-gradient(180deg,rgba(255,180,110,.05),rgba(255,180,110,.01))}
.devices b{font-weight:600;color:#f5ead6}
.devices span{font-family:var(--mono);font-size:11.5px;color:#a8937a}
.mind{display:grid;gap:clamp(22px,4cqw,36px)}
.mind__head{display:grid;gap:10px;max-width:700px}
.mind__stage{display:grid;gap:14px}
@container (min-width:820px){.mind__stage{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}}
.plan,.talk{border-radius:22px;border:1px solid rgba(255,220,180,.1);background:linear-gradient(180deg,rgba(255,170,90,.05),rgba(0,0,0,.25));padding:clamp(14px,2.4cqw,24px)}
.plan__svg{width:100%;height:auto;overflow:visible}
.plan__hall{fill:#1b120d;stroke:rgba(255,220,180,.16)}
.plan__room{fill:#120b08;stroke:rgba(255,220,180,.14)}
.plan__heat{opacity:.05;transition:opacity 1.2s ease}
.plan__num{font:600 13px var(--sans);fill:#cbb694}
.plan__door{fill:#5a3c26;transform-box:fill-box;transform-origin:center}
.plan__door.pull{fill:#e0323a;animation:pull .12s steps(2) infinite}
@keyframes pull{50%{transform:translateY(1.5px)}}
.plan__stairs path{stroke:#6b5140;stroke-width:1.4}
.plan__exit{fill:#ffb25b}
.plan__lbl{font:500 8.5px var(--mono);fill:#8d7a62;letter-spacing:.06em;text-transform:uppercase}
.plan__host{transform:translate(30px,107px);transition:transform 1s cubic-bezier(.45,0,.55,1)}
.plan__host circle{fill:#ff8a2a;filter:drop-shadow(0 0 6px rgba(255,138,42,.9))}
.plan__host path{fill:#2a1206}
.plan__cap{margin-top:12px;font-family:var(--fell);font-style:italic;font-size:clamp(16px,2cqw,19px);color:#ffcf94;min-height:1.5em;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.plan__cap.in{opacity:1;transform:none}
.talk{display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:260px}
.talk__log{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;flex:1;overflow:hidden;min-height:190px}
.talk__log p{max-width:88%;padding:8px 12px;border-radius:14px;font-size:14.5px;line-height:1.35;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.talk__log p.in{opacity:1;transform:none}
.talk__me{align-self:flex-end;background:rgba(255,255,255,.06);color:#d9ccb6;font-style:italic}
.talk__me.loud{background:rgba(224,50,58,.18);color:#ffb1a8;font-style:normal;font-weight:700}
.talk__kid{align-self:flex-start;background:rgba(255,160,70,.12);color:#f5ead6}
.talk__kid b{color:#ffb25b;font-weight:600}
.talk__bar{display:flex;align-items:center;gap:10px}
.talk__btn{flex:none;font:600 12px var(--mono);letter-spacing:.12em;padding:7px 11px;border-radius:999px;background:rgba(255,178,91,.14);color:#ffcf94;border:1px solid rgba(255,178,91,.35)}
.talk__meter{flex:none;width:60px;height:6px;border-radius:6px;background:rgba(255,255,255,.1);overflow:hidden}
.talk__meter i{display:block;height:100%;width:0;background:#4ec77e;transition:width .25s,background .25s}
.talk__meter i.loud{background:#e0323a}
.talk__hint{font-size:13px;color:#a8937a;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.talk__hint .warn{color:#ff5a4f;font-weight:700;letter-spacing:.04em}
.mind__notes,.peek__grid{display:grid;gap:12px}
@container (min-width:620px){.mind__notes,.peek__grid{grid-template-columns:1fr 1fr}}
@container (min-width:960px){.mind__notes,.peek__grid{grid-template-columns:repeat(3,1fr)}}
.note,.feat{padding:20px 20px 22px;border-radius:18px;border:1px solid rgba(255,220,180,.09);background:linear-gradient(180deg,rgba(255,170,90,.05),transparent)}
.note h4,.feat h4{font-family:var(--fell);font-weight:400;font-size:23px;color:#f7ead3;margin-bottom:6px;line-height:1.1}
.note p,.feat p{color:#b6a386;font-size:14.5px}
.shots{display:grid;gap:clamp(14px,2cqw,22px)}
.shots__row{display:grid;gap:clamp(12px,2cqw,20px)}
.shots__row--tall{grid-template-columns:1fr 1fr}
@container (min-width:760px){.shots__row--tall{grid-template-columns:repeat(4,1fr)}.shots__row--wide{grid-template-columns:1fr 1fr}}
.shots img{border-radius:22px;border:5px solid #1b120d;box-shadow:0 30px 60px -24px rgba(0,0,0,.95),0 0 40px -20px rgba(255,120,40,.35)}
.shots__row--wide img{border-radius:16px;border-width:4px}
.peek__foot{text-align:center;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8d7a62}
.peek__legal{margin-top:calc(-1 * clamp(36px,7cqw,80px))}
.peek__legal a,.peek__credit{color:#cbb694}
.peek__legal a{text-decoration:underline;text-decoration-color:rgba(203,182,148,.35);text-underline-offset:3px}
.peek__credit{margin-top:calc(-1 * clamp(36px,7cqw,80px));text-align:center;font-size:11.5px;opacity:.6}

/* ---------- the other apps ---------- */
.statement{max-width:22ch;margin:0 0 clamp(28px,5cqw,48px);font-size:clamp(28px,5.6cqw,52px);font-weight:600;letter-spacing:-.045em;line-height:1.05;text-wrap:balance}
.principles{display:grid;gap:12px;margin-bottom:clamp(28px,5cqw,44px)}
@container (min-width:720px){.principles{grid-template-columns:repeat(3,1fr)}}
.principle{position:relative;padding:22px 22px 24px;border-radius:20px;border:1px solid var(--line);background:var(--surface)}
.principle__n{display:block;font-family:var(--mono);font-size:12.5px;color:var(--brand-b);margin-bottom:22px}
.principle h3{font-size:clamp(20px,2.8cqw,25px);letter-spacing:-.035em;margin-bottom:8px}
.principle p{color:var(--text-2);font-size:15px}
.caps{display:grid;gap:20px 32px;padding-top:28px;border-top:1px solid var(--line)}
@container (min-width:640px){.caps{grid-template-columns:repeat(2,1fr)}}
@container (min-width:900px){.caps{grid-template-columns:repeat(3,1fr)}}
.caps h4{font-size:14.5px;font-weight:600;margin-bottom:5px}
.caps p{color:var(--muted);font-size:14.5px}
.roles{position:relative;display:grid;gap:14px;margin-left:8px;padding-left:28px}
.roles::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(var(--brand-a),var(--brand-b) 60%,transparent)}
.role{position:relative;padding:22px clamp(18px,3cqw,28px);border-radius:20px;border:1px solid var(--line);background:var(--surface)}
.role::before{content:"";position:absolute;left:-34px;top:30px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:3px solid var(--brand-b);box-shadow:0 0 0 5px var(--bg)}
.role__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 18px;margin-bottom:12px}
.role h3{font-size:clamp(21px,3cqw,28px);letter-spacing:-.035em;font-weight:700}
.role__head p{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.role ul{display:grid;gap:8px;color:var(--text-2);font-size:15px}
.role li{position:relative;padding-left:16px}
.role li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--brand-b)}
.edu{margin-top:clamp(26px,5cqw,40px);display:grid;gap:14px}
.edu ul{display:grid;gap:10px}
@container (min-width:720px){.edu ul{grid-template-columns:repeat(3,1fr)}}
.edu li{display:grid;gap:3px;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:var(--surface)}
.edu b{font-weight:600;letter-spacing:-.01em}
.edu span{color:var(--muted);font-size:14px}
.pile__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;margin-bottom:14px}
.pile__head h2{margin:0!important}
.pile__hint{font:500 12.5px var(--mono);letter-spacing:.06em;color:var(--muted);transition:opacity .5s}
.pile__box{position:relative;display:flex;flex-wrap:wrap;gap:8px;padding:20px;border-radius:24px;border:1px solid var(--line);background:radial-gradient(70% 80% at 50% 110%,color-mix(in oklab,var(--brand-a) 12%,transparent),transparent 70%),var(--surface);overflow:hidden}
.pile__box li{padding:9px 16px;border-radius:999px;font-weight:600;font-size:15px;letter-spacing:-.01em;white-space:nowrap;border:1px solid var(--line-2);background:var(--bg-2);color:var(--text);user-select:none}
.pile__box li:nth-child(3n+1){background:linear-gradient(135deg,color-mix(in oklab,var(--brand-a) 85%,#fff),var(--brand-a));color:#fff;border-color:transparent}
.pile__box li:nth-child(5n+2){background:linear-gradient(135deg,var(--brand-b),color-mix(in oklab,var(--brand-b) 70%,#0a3d38));color:#03221f;border-color:transparent}
.pile__box li:nth-child(7n+4){background:var(--text);color:var(--bg);border-color:transparent}
.pile--live .pile__box{display:block;height:min(420px,60vh);padding:0;touch-action:pan-y}
.pile--live .pile__box li{position:absolute;left:0;top:0;cursor:grab;touch-action:none;will-change:transform;transform:translate3d(-999px,-999px,0)}
.pile--live .pile__box li.is-grab{cursor:grabbing;box-shadow:0 20px 40px -14px rgba(0,0,0,.5)}
.doc--term{padding:0;min-height:300px;background:#0b0c10;color:#d6dae3;border-color:rgba(255,255,255,.1)}
.term{display:flex;flex-direction:column;min-height:inherit;padding:14px 16px;font:400 13.5px/1.55 var(--mono);cursor:text}
.term__out{white-space:pre-wrap;word-break:break-word}
.term__out .c{color:#2fd3c0}.term__out .w{color:#ffb25b}.term__out .e{color:#ff8a80}.term__out .d{color:#8a90a0}.term__out a{color:#9db1ff;text-decoration:underline}
.term__line{display:flex;gap:8px}
.term__ps{color:#2fd3c0;flex:none}
.term__in{flex:1;min-width:0;border:0;outline:none;background:none;color:#fff;font:inherit;caret-color:#2fd3c0;padding:0}
.doc .mail__title{font-size:clamp(48px,11cqw,110px);font-weight:800;letter-spacing:-.065em;line-height:.9;margin:8px 0 18px;padding-bottom:.06em;background:linear-gradient(100deg,var(--text) 20%,var(--brand-a) 60%,var(--brand-b) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.mail__lede{max-width:50ch;font-size:clamp(16px,2.2cqw,19px);color:var(--text-2);margin-bottom:22px;text-wrap:pretty}
.compose{display:grid;margin-bottom:22px;border-radius:16px;border:1px solid var(--line);background:var(--surface);overflow:hidden}
.compose__row{display:flex;align-items:center;gap:10px;padding:0 14px;height:44px;border-bottom:1px solid var(--line);font-size:14.5px}
.compose__row span{width:58px;color:var(--muted)}
.compose__row input{flex:1;min-width:0;height:100%;border:0;outline:none;background:none}
.compose__copy{height:28px;padding:0 10px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface-2);font:600 12px var(--sans);cursor:pointer}
.compose textarea{width:100%;min-height:130px;padding:14px;border:0;outline:none;resize:vertical;background:none;font-size:15px;line-height:1.55}
.compose__send{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:10px 12px;border-top:1px solid var(--line)}
.compose__note{flex:1;min-width:0;font-size:13.5px;line-height:1.4;color:var(--muted)}
.compose__note[data-kind="ok"]{color:#3fb37f}
.compose__note[data-kind="err"]{color:#e5675f}
.compose__note a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.compose__trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.compose button[type="submit"]:disabled{opacity:.6;cursor:progress}
.mail__actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.os-on .mail__actions{display:none}
.mail__social{display:flex;flex-wrap:wrap;gap:20px}
.doc--site{display:grid;gap:12px;color:var(--muted);font-size:14.5px}
.doc--site b{color:var(--text)}
.site__meta,.site__keys{font-family:var(--mono);font-size:12px;letter-spacing:.03em}
.site__copy{padding-top:14px;border-top:1px solid var(--line);font-size:13px}
.site__credit{display:block;margin-top:6px;font-size:11.5px;opacity:.8}

/* ================================== the OS ================================== */
.boot{display:none}
.os-on .boot{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;align-content:center;gap:48px;background:#000;opacity:0;visibility:hidden;transition:opacity .7s,visibility 0s .7s;pointer-events:none}
.os-boot .boot{opacity:1;visibility:visible;transition:none}
.boot svg{width:74px;height:74px}
.boot__bar{display:block;width:170px;height:5px;border-radius:5px;background:rgba(255,255,255,.18);overflow:hidden}
.boot__bar b{display:block;height:100%;width:0;border-radius:5px;background:#fff;animation:bootbar 1.05s cubic-bezier(.45,0,.25,1) forwards}
@keyframes bootbar{60%{width:72%}to{width:100%}}
.os-on,.os-on body{height:100%;overflow:hidden;overscroll-behavior:none}
.os-on .docs{display:none}
.os{position:fixed;inset:0;z-index:1;font-size:14px;color:var(--text)}

/* ---------- the desktop ---------- */
.os-desk .os{-webkit-user-select:none;user-select:none}
.os-desk .win__body,.os-desk .doc--welcome p{-webkit-user-select:text;user-select:text}
.desk{position:absolute;inset:0}
/* (centred by its margins: a transform here would make it the box the fixed wallpaper sits in) */
.os-desk .doc--welcome{position:absolute;left:0;right:0;margin:0 auto;top:calc(30px + clamp(16px,6.5vh,92px));width:min(1000px,calc(100vw - 64px));min-height:0;padding:0;border:0;border-radius:0;background:none;overflow:visible;gap:clamp(12px,2.1vh,22px);justify-items:center;align-content:start;text-align:center;container-type:normal;isolation:auto}
.os-desk .welcome__gl,.os-phone .welcome__gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1}
.os-desk .welcome__name{font-size:min(10.4vw,18.5vh,208px);margin:0 0 .02em;letter-spacing:-.055em}
.os-desk .welcome__lede{max-width:52ch;font-size:clamp(16px,1.3vw,19.5px);line-height:1.45}
.os-desk .welcome__get{margin-top:clamp(2px,1vh,10px);max-width:min(900px,calc(100vw - 500px))}
/* (the cards leave room at the sides for the files on the right and the links under the widget) */
@media (min-width:1360px){.os-desk .welcome__get{max-width:min(900px,calc(100vw - 680px))}}
@media (max-width:1199px){.os-desk .welcome__get{max-width:900px}}
.os-desk .welcome__cta{justify-content:center}
.os-on .doc--welcome::before{content:"";position:fixed;inset:0;z-index:-2}
.widgets{position:absolute;left:16px;top:44px;display:grid;gap:14px;width:296px}
.desk__copy{position:absolute;right:16px;bottom:12px;margin:0;font:500 11.5px/1 var(--sans);letter-spacing:.01em;color:var(--muted);pointer-events:none}
@media (max-width:1230px){.desk__copy{bottom:100px}}   /* the dock reaches the corner: sit above it */
@media (max-width:1360px){.widgets{display:none}}
.wg{display:block;width:100%;padding:16px;border-radius:24px;border:1px solid var(--glass-line);background:var(--glass);backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);box-shadow:0 1px 0 var(--glass-hi) inset,0 20px 50px -26px rgba(0,0,0,.5);color:var(--text);text-align:left}
.wg h3{font:600 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* Vancouver: the hour, the sun's day as a curve over the horizon line, and the sun on it; drag the sun to change the hour */
.wg--sky{display:grid;padding:14px 16px 10px}
.wg--sky header{display:flex;align-items:center;justify-content:space-between;min-height:22px}
.wg__time{font-size:30px;font-weight:600;letter-spacing:-.035em;line-height:1.1;font-variant-numeric:tabular-nums}
.wg__note{font-size:13px;color:var(--muted)}
.wg__reset{height:22px;padding:0 10px;border:0;border-radius:999px;background:color-mix(in oklab,var(--text) 14%,transparent);color:var(--text);font:600 11.5px var(--sans);cursor:pointer}
.wg__reset[hidden]{display:none}
.sun{position:relative;height:74px;margin:8px 0 2px}
.sun svg{width:100%;height:100%;overflow:visible}
.sun__hz{stroke:color-mix(in oklab,var(--text) 26%,transparent);stroke-width:1}
.sun__night{fill:none;stroke:color-mix(in oklab,var(--text) 30%,transparent);stroke-width:1.6;stroke-dasharray:1.5 4;stroke-linecap:round}
.sun__day{fill:none;stroke:#ffb547;stroke-width:2.4;stroke-linecap:round}
.sun__dot{fill:#ffd66e;stroke:#fff;stroke-width:1.5;filter:drop-shadow(0 0 7px rgba(255,186,70,.95));transition:fill .4s}
.sun__dot.is-down{fill:#a9b8ff;filter:drop-shadow(0 0 6px rgba(150,170,255,.8))}
.sun input{position:absolute;inset:-8px -6px;width:calc(100% + 12px);height:calc(100% + 16px);margin:0;opacity:0;cursor:grab}
.sun input:active{cursor:grabbing}
.sun:has(input:focus-visible){outline:2px solid var(--brand-b);outline-offset:4px;border-radius:8px}
.wg__hint{font-size:11.5px;color:var(--muted);opacity:0;transition:opacity .3s}
.wg--sky:hover .wg__hint{opacity:1}

/* menu bar */
/* the menu bar has no bar: its words float on the wallpaper (which is never pale at the top), a shade behind them */
.mb{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;align-items:center;gap:2px;height:30px;padding:0 8px;font:500 13.5px/1 var(--sans);color:#f1f2f6;text-shadow:0 1px 3px rgba(0,0,0,.35)}
:root[data-room="paper"] .mb{color:#17181c;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.mb::before{content:"";position:absolute;inset:0 0 -18px;z-index:-1;background:linear-gradient(rgba(0,0,0,.24),transparent);pointer-events:none}
:root[data-room="paper"] .mb::before{background:linear-gradient(rgba(255,255,255,.4),transparent)}
.mb svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
:root[data-room="paper"] .mb svg{filter:none}
.mb button{display:grid;place-items:center;height:24px;padding:0 9px;border:0;border-radius:6px;background:none;cursor:default;white-space:nowrap}
.mb button:hover,.mb button.is-open{background:rgba(255,255,255,.2)}
:root[data-room="paper"] .mb button:hover,:root[data-room="paper"] .mb button.is-open{background:rgba(0,0,0,.08)}
.mb__logo{padding:0 10px!important}
.mb__logo svg{width:17px;height:17px}
.mb__app{padding:0 9px 0 4px;font-weight:700}
.mb__gap{flex:1}
.mb__st svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mb__theme .i-moon{display:none}
:root[data-theme="light"] .mb__theme .i-sun{display:none}
:root[data-theme="light"] .mb__theme .i-moon{display:block}
.mb__clock{position:relative;padding:0 8px 0 6px!important;color:inherit;font:inherit;font-variant-numeric:tabular-nums}
.mb__clock.has-new::after{content:"";position:absolute;right:0;top:3px;width:6px;height:6px;border-radius:50%;background:#ff453a}
.mb__share{padding:3px 9px;border-radius:6px;background:#e0323a;color:#fff;font-size:12px;font-weight:600}
.mb__share[hidden]{display:none}
.menu{position:fixed;z-index:950;min-width:230px;padding:5px;border-radius:11px;background:var(--menu-solid);backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);border:1px solid var(--win-line);box-shadow:0 18px 50px -12px rgba(0,0,0,.5);font-size:13.5px}
.menu[hidden]{display:none}
.menu hr{height:1px;margin:5px 8px;border:0;background:var(--line-2)}
.menu__it{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:5px 10px 5px 22px;border:0;border-radius:6px;background:none;text-align:left;cursor:default;position:relative}
.menu__it:not(:disabled):hover,.menu__it:not(:disabled):focus-visible{background:var(--brand-a);color:#fff;outline:none}
.menu__it:disabled{color:var(--muted)}
.menu__it.is-check::before{content:"✓";position:absolute;left:7px;font-size:12px}
.menu__it kbd{font:inherit;color:var(--muted)}
.menu__it:hover kbd{color:inherit}

/* dock */
.dock{position:fixed;left:50%;bottom:8px;z-index:850;translate:-50% 0}
.dock__shelf{display:flex;align-items:flex-end;gap:8px;padding:7px 9px;border-radius:24px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(28px) saturate(1.7);-webkit-backdrop-filter:blur(28px) saturate(1.7);box-shadow:0 1px 0 var(--glass-hi) inset,0 24px 60px -24px rgba(0,0,0,.6)}
.dk{--s:1;position:relative;display:block;width:calc(var(--dk,54px) * var(--s));height:calc(var(--dk,54px) * var(--s));padding:0;border:0;background:none;cursor:default}
.dk .ico{width:100%;box-shadow:0 8px 18px -8px rgba(0,0,0,.6)}
.dk__dot{position:absolute;left:50%;bottom:-5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--text);opacity:0;transition:opacity .3s}
.dk.is-run .dk__dot{opacity:.85}
.dk__tip{position:absolute;left:50%;bottom:calc(100% + 12px);translate:-50% 4px;padding:4px 10px;border-radius:7px;background:var(--menu-solid);border:1px solid var(--win-line);font:500 13px var(--sans);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,translate .2s}
.dk:hover .dk__tip,.dk:focus-visible .dk__tip{opacity:1;translate:-50% 0}
.dock__sep{align-self:stretch;width:1px;margin:6px 6px;background:var(--line-2)}

/* windows */
.wins{position:absolute;inset:0;pointer-events:none}
.win{position:absolute;left:0;top:0;pointer-events:auto;display:flex;flex-direction:column;border-radius:13px;background:var(--win);backdrop-filter:blur(40px) saturate(1.6);-webkit-backdrop-filter:blur(40px) saturate(1.6);box-shadow:0 0 0 1px var(--win-line),0 1px 0 var(--glass-hi) inset,0 22px 70px -24px rgba(0,0,0,.6),0 8px 24px -10px rgba(0,0,0,.4);transform-origin:0 0;overflow:hidden;outline:none;color:var(--text)}
.win.is-focused{box-shadow:0 0 0 1px var(--win-line),0 1px 0 var(--glass-hi) inset,0 40px 110px -24px rgba(0,0,0,.7),0 14px 34px -12px rgba(0,0,0,.5)}
.win[hidden]{display:none}
.win__bar{position:relative;flex:none;display:flex;align-items:center;height:38px;padding:0 13px;border-bottom:1px solid var(--line);cursor:default;touch-action:none}
.win__lights{position:relative;z-index:1;display:flex;gap:8px}
.wl{width:12px;height:12px;padding:0;border:0;border-radius:50%;background:#ff5f57;box-shadow:0 0 0 .5px rgba(0,0,0,.25) inset;position:relative;cursor:default}
.wl--min{background:#febc2e}.wl--zoom{background:#28c840}
.win:not(.is-focused) .wl{background:color-mix(in oklab,var(--text) 22%,transparent)}
.win__lights:hover .wl::after{position:absolute;inset:0;display:grid;place-items:center;font:700 9px/1 var(--sans);color:rgba(0,0,0,.6)}
.win__lights:hover .wl--close::after{content:"×";font-size:11px}.win__lights:hover .wl--min::after{content:"–"}.win__lights:hover .wl--zoom::after{content:"+"}
.win__title{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:7px;font:600 13px var(--sans);color:var(--text);pointer-events:none}
.win:not(.is-focused) .win__title{color:var(--muted)}
.win__main{position:relative;flex:1;min-height:0;display:flex}
.win__side{flex:none;width:176px;padding:10px 8px;display:grid;align-content:start;gap:2px;border-right:1px solid var(--line);background:color-mix(in oklab,var(--text) 3%,transparent);overflow:auto}
.win__nav{padding:6px 10px;border-radius:7px;font-size:13.5px;color:var(--text-2)}
.win__nav:hover{background:color-mix(in oklab,var(--text) 7%,transparent)}
.win__nav.is-on{background:color-mix(in oklab,var(--accent) 26%,transparent);color:var(--text)}
.win__body{flex:1;min-width:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.win .doc{border:0;border-radius:0;min-height:100%;padding:clamp(22px,3.4vw,40px)}
.win:not(.win--proj):not(.win--dark) .doc{background:none}
.win--proj,.win--dark{--win:rgba(12,13,18,.92);--text:#eef0f6;--text-2:#b6bac7;--muted:#858b9c;--line:rgba(255,255,255,.085);--line-2:rgba(255,255,255,.16);--surface:rgba(255,255,255,.04);--surface-2:rgba(255,255,255,.075);--glass-hi:rgba(255,255,255,.12);color-scheme:dark}
.win--peekadoor .win__side{background:rgba(255,160,70,.04);border-color:rgba(255,200,150,.1)}
.win--terminal .doc{padding:0;background:#0b0c10}
.win--toybox .doc{display:flex;flex-direction:column}
.win--toybox .pile{display:flex;flex-direction:column;flex:1}
.win--toybox .pile--live .pile__box{flex:1;height:auto;min-height:240px}
.rz{position:absolute;z-index:3}
.rz--l,.rz--r{top:14px;bottom:14px;width:8px;cursor:ew-resize}.rz--l{left:-3px}.rz--r{right:-3px}
.rz--b{left:14px;right:14px;bottom:-3px;height:8px;cursor:ns-resize}
.rz--bl,.rz--br{bottom:-3px;width:16px;height:16px}.rz--bl{left:-3px;cursor:nesw-resize}.rz--br{right:-3px;cursor:nwse-resize}
.is-max .rz{display:none}
.os.is-dragging .win__body,.os.is-resizing .win__body{pointer-events:none}
.snap{position:fixed;z-index:15;border-radius:14px;background:color-mix(in oklab,var(--brand-a) 16%,transparent);border:1px solid color-mix(in oklab,var(--brand-a) 50%,transparent);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;scale:.97;pointer-events:none;transition:opacity .2s,scale .3s var(--ease-out),left .2s,top .2s,width .2s,height .2s}
.snap.on{opacity:1;scale:1}
.sharing .win--lumenchat .win__body,.sharing .win--mail .win__body,.sharing .win--terminal .win__body{filter:blur(18px) saturate(.6)}
.sharing .win--lumenchat .win__main::after,.sharing .win--mail .win__main::after,.sharing .win--terminal .win__main::after{content:"Hidden while you share — LumenHush";position:absolute;inset:0;display:grid;place-items:center;font:600 15px var(--sans);color:#fff;text-shadow:0 2px 12px #000;background:rgba(0,0,0,.2)}

/* notifications, Launchpad, Mission Control, shut down */
.notes{position:fixed;top:40px;right:14px;z-index:920;display:grid;gap:10px;width:min(360px,calc(100vw - 28px))}
.ntf{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:12px 12px 12px 14px;border-radius:18px;background:var(--glass-2);border:1px solid var(--glass-line);backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);box-shadow:0 1px 0 var(--glass-hi) inset,0 20px 50px -20px rgba(0,0,0,.6);cursor:default;animation:note-in .6s var(--spring)}
.ntf .ico{width:36px;border-radius:9px}
.ntf b{font-size:14px}
.ntf p{font-size:13.5px;line-height:1.35;color:var(--text-2)}
.ntf__x{width:22px;height:22px;border:0;border-radius:50%;background:color-mix(in oklab,var(--text) 10%,transparent);color:var(--text-2);cursor:pointer;opacity:0;transition:opacity .2s}
.ntf:hover .ntf__x{opacity:1}
.ntf__acts{display:flex;gap:6px;margin-top:8px}
.ntf__acts button{height:28px;padding:0 11px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface-2);font:600 12.5px var(--sans);cursor:pointer}
.ntf.out{animation:note-out .32s var(--ease) forwards}
@keyframes note-in{from{opacity:0;transform:translateX(40px) scale(.96)}}
@keyframes note-out{to{opacity:0;transform:translateX(30px)}}
.lp{position:fixed;inset:0;z-index:940;display:grid;place-items:center;background:rgba(8,10,16,.4);backdrop-filter:blur(36px) saturate(1.4);-webkit-backdrop-filter:blur(36px) saturate(1.4);opacity:0;transition:opacity .3s}
.lp[hidden]{display:none}
:root[data-theme="light"] .lp{background:rgba(236,233,225,.45)}
.lp.on{opacity:1}
.lp__inner{display:grid;justify-items:center;gap:14px;padding:30px;text-align:center}
.lp__eyebrow{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brand-b)}
.lp__title{font-size:clamp(40px,6vw,80px);font-weight:700;letter-spacing:-.055em;line-height:1}
.lp__grid{display:grid;grid-template-columns:repeat(3,minmax(0,170px));gap:26px 30px;margin:26px 0 10px}
.lp__app{display:grid;justify-items:center;gap:9px;padding:12px;border:0;border-radius:24px;background:none;cursor:pointer;transform:scale(.9);opacity:0;transition:transform .5s var(--spring),opacity .4s,background .2s}
.lp.on .lp__app{transform:none;opacity:1}
.lp.on .lp__app:nth-child(2){transition-delay:.03s}.lp.on .lp__app:nth-child(3){transition-delay:.06s}.lp.on .lp__app:nth-child(4){transition-delay:.09s}.lp.on .lp__app:nth-child(5){transition-delay:.12s}.lp.on .lp__app:nth-child(6){transition-delay:.15s}
.lp__app:hover{background:color-mix(in oklab,var(--text) 7%,transparent)}
.lp__app .ico--lg{width:96px;box-shadow:0 20px 40px -16px color-mix(in oklab,var(--accent) 70%,transparent)}
.lp__app b{font-size:16px}
.lp__app small{font-size:12.5px;color:var(--muted)}
.lp__hint{color:var(--muted)}
.mc{position:fixed;inset:0;z-index:1;background:rgba(0,0,0,.35);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:opacity .35s}
.is-mc .mc{opacity:1;pointer-events:auto}
.is-mc .wins{z-index:2}
.is-mc .win{cursor:pointer}
.is-mc .win:hover{box-shadow:0 0 0 4px var(--brand-a),0 30px 80px -20px rgba(0,0,0,.7)}
.is-mc .win *{pointer-events:none}
.shutdown{position:fixed;inset:0;z-index:2500;display:grid;place-content:center;justify-items:center;gap:22px;background:#000;color:#a3a7b3;font:500 18px var(--sans);opacity:0;transition:opacity 1.2s}
.shutdown.on{opacity:1}
.os-desk .os:not(.is-ready) .mb{transform:translateY(-100%)}
.os-desk .os:not(.is-ready) .dock{transform:translateY(140%)}
.os-desk .os:not(.is-ready) .widgets{opacity:0;transform:translateX(30px)}
.os-desk .mb,.os-desk .dock{transition:transform .8s var(--ease-out)}
.os-desk .widgets{transition:opacity .9s .2s,transform 1s .2s var(--ease-out)}

/* ---------- the phone ---------- */
/* the phone's own type (San Francisco on an iPhone) for everything that is the phone rather than the work on it */
.os--phone{--sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,sans-serif;-webkit-user-select:none;user-select:none}
/* the wallpaper is the desk; on the lock screen the name is pressed into it, and it goes up with the lock screen */
.os-phone .doc--welcome{position:fixed;inset:0;z-index:0;display:block;min-height:0;padding:0;border:0;border-radius:0;background:none;overflow:visible;container-type:normal;isolation:auto;pointer-events:none}
.os-phone .doc--welcome>:not(.welcome__gl):not(.welcome__name){display:none}
.os-phone .welcome__gl{height:100lvh}
.os-phone .welcome__name{position:absolute;left:0;right:0;top:var(--name-top,44%);margin:0;text-align:center;font-size:min(25vw,118px);line-height:.8;transition:transform .46s cubic-bezier(.22,.8,.24,1)}
.os-phone .welcome__name span{display:block}
.os--phone.is-open .welcome__name{transform:translateY(calc(var(--lock-h,100lvh) * -1))}
.home__blur{position:fixed;inset:0;z-index:1;background:rgba(8,9,12,.24);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);opacity:0;transition:opacity .46s;pointer-events:none}
.is-open .home__blur{opacity:1}

/* the lock screen */
.lock{position:fixed;inset:0;z-index:15;display:flex;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 10px);color:#fff;font-family:var(--sys);text-align:center;background:linear-gradient(rgba(0,0,0,.22),transparent 32%,transparent 60%,rgba(0,0,0,.32));transition:transform .46s cubic-bezier(.22,.8,.24,1);touch-action:none;cursor:grab}
.is-open .lock{transform:translateY(-100%);pointer-events:none}
.lock.is-nudge{animation:nudge .75s var(--ease-out)}
@keyframes nudge{28%{transform:translateY(-44px)}58%{transform:none}76%{transform:translateY(-12px)}to{transform:none}}
.lock__pad{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.lock__shackle{transform-origin:16px 11px;transition:transform .4s var(--spring)}
.is-face .lock__shackle{transform:translateY(-2px) rotate(32deg)}
.lock__date{margin-top:8px;font-size:18px;font-weight:600;letter-spacing:-.01em;opacity:.92}
.lock__time{margin-top:-4px;font-size:min(25vw,112px);font-weight:700;letter-spacing:-.025em;line-height:1.02;font-variant-numeric:tabular-nums}
.lock__widgets{display:flex;gap:8px;margin-top:8px}
.lw{position:relative;display:grid;align-content:center;justify-items:start;gap:1px;height:54px;padding:0 13px;border-radius:16px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);font-size:12px;line-height:1.2;text-align:left}
.lw b{font-size:13.5px;font-weight:600}
.lw small{opacity:.75}
.lw--ring{width:54px;padding:0;justify-items:center;border-radius:50%;text-align:center}
.lw--ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:conic-gradient(currentColor calc(var(--p) * 1turn),rgba(255,255,255,.25) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px))}
.lw--ring b{font-size:16px;line-height:1}
.lw--ring small{font-size:8.5px;letter-spacing:.04em;text-transform:uppercase}
.lock__note{display:flex;align-items:center;gap:11px;width:100%;max-width:420px;margin-top:auto;padding:12px 14px;border:0;border-radius:22px;background:rgba(28,28,32,.45);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);color:#fff;font:inherit;text-align:left;cursor:pointer}
.lock__note .ico{flex:none;width:38px;border-radius:9px}
.lock__note>span{flex:1;display:grid;grid-template-columns:1fr auto;gap:0 8px;font-size:14.5px;line-height:1.32}
.lock__note b{font-weight:600}
.lock__note small{font-size:13px;opacity:.6}
.lock__note em{grid-column:1/-1;font-style:normal;opacity:.92}
.lock__foot{display:flex;justify-content:space-between;width:100%;max-width:420px;padding:18px 30px 4px}
.lock__btn{display:grid;place-items:center;width:50px;height:50px;border:0;border-radius:50%;background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;cursor:pointer;transition:transform .2s,background .2s,color .2s}
.lock__btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lock__btn:active{transform:scale(1.12)}
.lock__btn.is-on{background:#fff;color:#111}
.lock__copy{align-self:center;font-size:11px;font-weight:500;letter-spacing:.01em;opacity:.6}
.lock__hint{font-size:13px;font-weight:500;opacity:.75}
.lock::after{content:"";width:134px;height:5px;margin-top:8px;border-radius:3px;background:currentColor;opacity:.85;animation:lift 2.6s ease-in-out infinite}
@keyframes lift{50%{transform:translateY(-5px)}}
:root[data-room="paper"] .lock{color:#1b1c20;background:none}
:root[data-room="paper"] .lw,:root[data-room="paper"] .lock__btn{background:rgba(255,255,255,.4)}

/* the home screen: pages side by side, as many rows as fit, widgets on the same grid as the icons */
.home{position:absolute;inset:0;z-index:2;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none;color:#fff;font-family:var(--sys)}
.home::-webkit-scrollbar{display:none}
.page{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:var(--row,88px);grid-auto-flow:row dense;column-gap:10px;align-content:start;padding:calc(env(safe-area-inset-top) + 26px) max(22px,(100% - 430px) / 2 + 22px) 0}
.hi{display:grid;justify-items:center;align-content:start;gap:5px;min-width:0;padding:0;border:0;background:none;color:inherit;font:400 12px/1.2 var(--sys);text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hi .ico,.hi .fi{width:min(60px,15.4vw);box-shadow:0 8px 18px -10px rgba(0,0,0,.6);transition:transform .25s var(--ease-out)}
.hi:active .ico,.hi:active .fi{transform:scale(.88)}
.hi__label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.wd{grid-column:span 2;grid-row:span 2;margin-bottom:10px;border-radius:22px;overflow:hidden;color:#fff;box-shadow:0 14px 30px -16px rgba(0,0,0,.7);-webkit-tap-highlight-color:transparent}
.wd--m{grid-column:span 4}
.wd--me{display:flex;flex-direction:column;align-items:flex-start;padding:14px;background:linear-gradient(155deg,rgba(80,92,150,.62),rgba(24,26,38,.66));-webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);text-decoration:none}
.wd--me .ico{width:42px;border-radius:10px}
.wd--me b{margin-top:auto;font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.wd--me span{font-size:13px;opacity:.85}
.wd--me small{display:flex;align-items:center;margin-top:3px;font-size:12px;opacity:.75}
.page .wg--sky{--text:#fff;--muted:rgba(255,255,255,.72);display:flex;flex-direction:column;width:auto;padding:13px 14px 6px;border:0;background:linear-gradient(180deg,rgba(46,84,150,.62),rgba(18,28,50,.66))}
.page .wg--sky header{min-height:0}
.page .wg--sky h3{font:600 13px var(--sys);letter-spacing:0;text-transform:none;color:#fff}
.page .wg__time{margin-top:2px;font-size:26px}
.page .wg__note{font-size:12px}
.page .sun{flex:1;height:auto;min-height:36px;margin:4px 0 0}
.page .wg__hint{display:none}
.wd--stack{position:relative;background:#0b0b0e}
.st__track{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
.st__track::-webkit-scrollbar{display:none}
.st__card{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;height:100%;padding:12px 14px;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}
.st__card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.5),transparent 70%);pointer-events:none}
.st__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st__card--desk .st__art{object-position:70% 50%}
.st__open{position:absolute;inset:0;z-index:2}
.st__tag,.st__name,.st__sub,.st__badges{position:relative;z-index:3}
.st__tag{display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;background:rgba(0,0,0,.55);font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;pointer-events:none}
.st__tag i{width:6px;height:6px;border-radius:50%;background:#ff7a2f;box-shadow:0 0 8px #ff7a2f}
.st__name{display:flex;align-items:center;gap:7px;font-size:17px;font-weight:700;pointer-events:none}
.st__name img{border-radius:6px}
.st__sub{max-width:21ch;margin-top:-18px;font-size:12.5px;line-height:1.3;opacity:.88;pointer-events:none}
.st__badges{display:flex;gap:6px}
.st__badges img{display:block;width:auto;height:30px}
.st__dots{position:absolute;right:7px;top:50%;z-index:4;display:grid;gap:4px;translate:0 -50%;pointer-events:none}
.st__dots i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4)}
.st__dots i.is-on{background:#fff}
/* Search above the dock; the page dots take its place while the pages move */
.home__pill{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 112px);z-index:5;display:flex;align-items:center;gap:5px;height:30px;padding:0 13px;border:0;border-radius:999px;background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);color:#fff;font:600 13px var(--sys);translate:-50% 0;cursor:pointer;transition:opacity .5s,transform .6s var(--ease-out)}
.home__pill svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.home__dots{display:none;gap:8px}
.home__dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45)}
.home__dots i.is-on{background:#fff}
.home__pill.is-paging svg,.home__pill.is-paging>span:not(.home__dots){display:none}
.home__pill.is-paging .home__dots{display:flex}
.home__dock{position:fixed;left:50%;bottom:calc(8px + env(safe-area-inset-bottom));z-index:5;display:grid;grid-template-columns:repeat(4,1fr);width:min(calc(100% - 16px),414px);padding:14px 12px;border-radius:34px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);translate:-50% 0;transition:opacity .6s,transform .7s var(--ease-out)}
.home__dock .hi__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.has-app .home,.has-app .home__dock,.has-app .home__pill{pointer-events:none}
/* the top edge: a handle to pull the lock screen back down, and the first time, a word on it */
.home__pull{position:fixed;left:0;right:0;top:0;z-index:6;display:flex;justify-content:center;height:calc(env(safe-area-inset-top) + 26px);padding-top:calc(env(safe-area-inset-top) + 8px);touch-action:none;cursor:grab}
.home__pull i{width:40px;height:5px;border-radius:3px;background:rgba(255,255,255,.6);box-shadow:0 1px 5px rgba(0,0,0,.35)}
.home__pull span{position:absolute;top:calc(env(safe-area-inset-top) + 20px);padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;font:500 12.5px var(--sys);white-space:nowrap;opacity:0;translate:0 -6px;transition:opacity .4s,translate .5s var(--ease-out);pointer-events:none}
.home__pull.is-tip span{opacity:1;translate:none}
.home__pull.is-tip i{animation:tug 1.2s ease-in-out 3}
@keyframes tug{50%{transform:translateY(6px)}}
.os--phone:not(.is-open) .home__pull,.has-app .home__pull{display:none}
/* unlocked: the home screen comes in from just in front of the glass, the way a phone's does */
.os--phone .page>*{transition:opacity .45s calc(var(--i,0) * 16ms),transform .7s calc(var(--i,0) * 16ms) var(--ease-out)}
.os--phone:not(.is-open) .page>*{opacity:0;transform:scale(1.14)}
.os--phone:not(.is-open) .home__dock,.os--phone:not(.is-open) .home__pill{opacity:0;transform:scale(1.08)}
/* while the lock screen is under a finger, everything else follows it (u: 0 locked … 1 open) */
.os--phone.is-dragging .lock,.os--phone.is-dragging .welcome__name,.os--phone.is-dragging .home__blur{transition:none}
.os--phone.is-dragging .page>*{opacity:var(--u);transform:scale(calc(1.14 - .14 * var(--u)));transition:none}
.os--phone.is-dragging .home__dock,.os--phone.is-dragging .home__pill{opacity:var(--u);transform:scale(calc(1.08 - .08 * var(--u)));transition:none}
.os--phone.is-settling .page>*{transition-delay:0s}   /* let go of a swipe: every icon goes on from where it is at once */
.papps{position:fixed;inset:0;z-index:20;pointer-events:none}
.papp{position:absolute;inset:0;display:flex;flex-direction:column;pointer-events:auto;background:var(--bg);color:var(--text);transform-origin:0 0;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.papp[hidden]{display:none}
.papp--proj,.papp--dark{--bg:#0c0d12;--text:#eef0f6;--text-2:#b6bac7;--muted:#858b9c;--line:rgba(255,255,255,.085);--line-2:rgba(255,255,255,.16);--surface:rgba(255,255,255,.04);--surface-2:rgba(255,255,255,.075);color-scheme:dark}
.papp--peekadoor{--bg:#0a0605}
.papp.is-pulling{border-radius:40px}
.papp__bar{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;height:calc(48px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 10px 0;border-bottom:1px solid var(--line);background:color-mix(in oklab,var(--bg) 82%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-size:16px}
.papp__back{justify-self:start;display:flex;align-items:center;gap:2px;height:36px;padding:0 10px 0 4px;border:0;border-radius:10px;background:none;color:var(--accent);font:500 16px var(--sans);cursor:pointer}
.papp__back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.papp__ic{justify-self:end;padding-right:6px}
.papp__ic .ico{width:26px;border-radius:7px}
.papp__nav{flex:none;display:flex;gap:6px;overflow-x:auto;padding:8px 12px;border-bottom:1px solid var(--line);scrollbar-width:none}
.papp__nav::-webkit-scrollbar{display:none}
.papp__nav a{flex:none;height:30px;display:grid;place-items:center;padding:0 12px;border-radius:999px;background:var(--surface-2);font-size:13px;font-weight:500}
.papp__nav a.is-on{background:color-mix(in oklab,var(--accent) 30%,transparent);color:var(--text)}
.papp__body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(30px + env(safe-area-inset-bottom))}
.papp .doc{border:0;border-radius:0;min-height:100%;padding:22px 18px 36px}
.papp:not(.papp--proj):not(.papp--dark) .doc{background:none}
.papp--terminal .doc{padding:0}
.papp__home{position:absolute;left:0;right:0;bottom:0;z-index:5;height:calc(28px + env(safe-area-inset-bottom));display:grid;justify-items:center;padding-top:13px;touch-action:none;cursor:grab}
.papp__home i{width:134px;height:5px;border-radius:3px;background:var(--text);opacity:.6}
/* notifications drop in from the top as a banner (a phone has its own island; a second one would look wrong) */
.pbanner{position:fixed;top:calc(env(safe-area-inset-top) + 8px);left:10px;right:10px;z-index:40;border-radius:24px;background:var(--glass-2);border:1px solid var(--glass-line);backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);box-shadow:0 1px 0 var(--glass-hi) inset,0 20px 50px -18px rgba(0,0,0,.55);font-family:var(--sys);transform:translateY(calc(-100% - 20px - env(safe-area-inset-top)));transition:transform .55s var(--spring);cursor:pointer}
.pbanner.on{transform:none}
.pbanner__in{display:flex;align-items:center;gap:12px;padding:12px 14px;color:var(--text)}
.pbanner .ico{width:40px;border-radius:10px}
.pbanner b{font-size:14.5px}
.pbanner p{font-size:13px;line-height:1.3;color:var(--text-2)}

/* ---------- Spotlight (⌘K) ---------- */
.spot{width:min(640px,calc(100vw - 24px));max-height:min(540px,74svh);margin:calc(env(safe-area-inset-top) + 13vh) auto auto;padding:0;border:0;border-radius:22px;background:transparent;color:var(--text);overflow:visible}
.spot::backdrop{background:rgba(3,4,8,.3)}
.spot[open]{animation:spot-in .32s var(--ease-out)}
@keyframes spot-in{from{opacity:0;transform:scale(.97) translateY(-8px)}}
.spot__box{display:grid;grid-template-rows:auto 1fr;max-height:inherit;border-radius:22px;background:var(--menu-solid);border:1px solid var(--win-line);backdrop-filter:blur(40px) saturate(1.8);-webkit-backdrop-filter:blur(40px) saturate(1.8);box-shadow:0 40px 100px -30px rgba(0,0,0,.7);overflow:hidden}
.spot__in{display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid var(--line)}
.spot__in svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.spot__in input{flex:1;height:58px;border:0;outline:none;background:none;font:400 21px var(--sans);letter-spacing:-.01em}
.spot__in input::placeholder{color:var(--muted)}
.spot__list{overflow:auto;padding:6px;overscroll-behavior:contain}
.spot__list li{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;cursor:default;font-size:14.5px}
.spot__list li[aria-selected="true"]{background:var(--brand-a);color:#fff}
.spot__list li[aria-selected="true"] small{color:rgba(255,255,255,.75)}
.spot__list .ico,.spot__list .sp-ic{width:28px;border-radius:7px;flex:none}
.spot__list .sp-ic{display:grid;place-items:center;aspect-ratio:1;background:var(--surface-2);font:600 13px var(--mono);color:var(--text-2)}
.spot__list li span{flex:1;min-width:0}
.spot__list li small{color:var(--muted);font-size:12.5px}
.spot__list .sp-sec{padding:10px 10px 4px;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- Friday's tour: a second pointer, and what it says ---------- */
.ghost{position:fixed;left:0;top:0;z-index:3100;pointer-events:none;will-change:transform}
.ghost svg{width:26px;height:26px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}
.ghost__tag{position:absolute;left:22px;top:22px;padding:3px 8px;border-radius:999px;background:#e8b46c;color:#1b1206;font:700 11px var(--sans);white-space:nowrap}
.ghost.click::after{content:"";position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:2px solid #e8b46c;animation:gclick .5s ease-out forwards}
@keyframes gclick{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}
.say{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));z-index:3090;translate:-50% 0;display:flex;align-items:center;gap:12px;width:max-content;max-width:min(560px,calc(100vw - 24px));padding:12px 14px 12px 12px;border-radius:20px;background:rgba(14,12,9,.92);border:1px solid rgba(232,180,108,.35);color:#f5ead6;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 20px 60px -20px rgba(0,0,0,.7);font-size:15px;line-height:1.4;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .45s var(--ease-out)}
.say.on{opacity:1;transform:none}
.say img{width:34px;height:34px;border-radius:9px;flex:none}
.say button{flex:none;margin-left:6px;height:28px;padding:0 10px;border-radius:8px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;font:600 12px var(--sans);cursor:pointer}

/* ---------- files: their icons, the desktop's, Finder, Quick Look ---------- */
.fi{position:relative;display:block;width:64px;aspect-ratio:1;flex:none}
.fi svg{display:block;width:100%;height:100%}
.fi--dir svg{filter:drop-shadow(0 5px 8px rgba(0,0,0,.3))}
.fi--img,.fi--vid,.fi--doc{display:grid;place-items:center}
.fi--img img{width:84%;aspect-ratio:4/3;object-fit:cover;border:2.5px solid #fff;border-radius:3px;box-shadow:0 6px 14px -6px rgba(0,0,0,.55)}
.fi--vid img{width:88%;aspect-ratio:16/10;object-fit:cover;border-radius:4px;box-shadow:0 0 0 3px #101114,0 6px 14px -6px rgba(0,0,0,.6)}
.fi--vid i{position:absolute;left:50%;bottom:18%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.fi--vid i::after{content:"";position:absolute;left:8px;top:6px;border:5px solid transparent;border-left:8px solid #fff;border-right:0}
.fi__page{position:relative;display:grid;align-content:start;gap:4px;width:70%;height:88%;padding:26% 13% 0;border-radius:4px;background:#fdfdfb;box-shadow:0 6px 14px -6px rgba(0,0,0,.5),0 0 0 .5px rgba(0,0,0,.18);clip-path:polygon(0 0,72% 0,100% 20%,100% 100%,0 100%)}
.fi__page::before{content:"";position:absolute;right:0;top:0;width:28%;height:20%;background:linear-gradient(225deg,transparent 50%,#dcdee5 50%)}
.fi__page i{display:block;height:2.5px;border-radius:2px;background:#cbced8}
.fi__page i:nth-child(2){width:80%}.fi__page i:nth-child(4){width:58%}
.fi__page b{position:absolute;left:0;right:0;bottom:11%;text-align:center;font:800 9px/1 var(--sans);letter-spacing:.06em;color:#6b7180}
.fi--link .fi__page{place-items:center;align-content:center;padding:0;color:#2f7cf6}
.fi--link .fi__page svg{width:46%;height:auto;margin-top:-14%}
.fi--link .fi__page b{color:#2f7cf6}
.ico.fi{border-radius:22.5%}
.fi--brand svg{filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.fi--site{display:grid;place-items:center}
.fi--site .ico{width:84%;box-shadow:0 6px 12px -6px rgba(0,0,0,.6)}
.fi__web{position:absolute;right:2%;bottom:2%;display:grid;place-items:center;width:40%;aspect-ratio:1;border-radius:50%;background:#fff;color:#2f7cf6;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.fi__web svg{width:74%;height:74%}
.dk .fi{width:100%}
.dk--trash .fi{transition:transform .25s var(--spring)}
.dk--trash.is-over .fi{transform:scale(1.18) rotate(-6deg)}
.spot .fi{width:28px}

.icons{position:absolute;inset:0;pointer-events:none;outline:none}
.icons[hidden]{display:none}
.icon{position:absolute;left:0;top:0;display:grid;justify-items:center;gap:5px;width:92px;padding:6px 4px;border-radius:10px;pointer-events:auto;cursor:default;touch-action:none}
.icon .fi,.icon .ico{width:58px;pointer-events:none}
.icon__name{max-width:100%;padding:1px 4px;border-radius:5px;font:500 11.5px/1.25 var(--sans);text-align:center;color:#f1f2f6;text-shadow:0 1px 3px rgba(0,0,0,.65);overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
:root[data-room="paper"] .icon__name{color:#17181c;text-shadow:none}
.icon.is-sel{background:color-mix(in oklab,#fff 13%,transparent)}
.icon.is-sel .icon__name{background:#2f6fed;color:#fff;text-shadow:none}
.icons.is-dragging .icon.is-sel{opacity:.82}
/* the hot file (the new trailer), on the desktop and the phone's home screen: a ring of candlelight turning round its
   picture, "New" until it has been watched, and on the desktop a tag pointing at it that plays it in one click */
@property --ring{syntax:"<angle>";inherits:false;initial-value:0deg}
.fi__ring,.fi__new{display:none}
:is(.icon,.hi) .fi__ring{display:block;position:absolute;left:50%;top:50%;width:calc(88% + 8px);height:calc(55% + 8px);translate:-50% -50%;border-radius:7px;background:conic-gradient(from var(--ring),#ff8a2a,#ffe2b0 12%,#7a2808 30%,#ff8a2a 50%,#ffd28a 62%,#7a2808 80%,#ff8a2a);box-shadow:0 0 16px 1px rgba(255,138,42,.55),0 0 36px 6px rgba(255,110,30,.22);animation:fi-ring 3.6s linear infinite}
:is(.icon,.hi) .fi--hot img{position:relative;box-shadow:0 0 0 1.5px #140904,0 6px 14px -6px rgba(0,0,0,.6)}
.hi--hot .fi{box-shadow:none}
.hi--hot .hi__label{color:#ffd9a6}
:is(.icon--new,.hi--new) .fi__new{display:block;position:absolute;right:-7px;top:5px;padding:3px 6px 2px;border-radius:999px;background:linear-gradient(180deg,#ffbe6a,#ff7a1a);color:#2b1205;font:800 8.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;box-shadow:0 2px 6px rgba(0,0,0,.45),0 0 12px rgba(255,140,50,.75);animation:fi-new 2.4s ease-in-out infinite}
.icon__tag{position:absolute;right:calc(100% - 4px);top:20px;display:flex;align-items:center;gap:7px;height:30px;padding:0 14px 0 11px;border:1px solid rgba(255,170,90,.6);border-radius:999px;background:#1f1008;color:#ffdcae;font:400 15.5px/1 var(--fell);white-space:nowrap;cursor:pointer;box-shadow:0 10px 26px -10px rgba(0,0,0,.75),0 0 24px -6px rgba(255,130,40,.7);animation:tag-in .8s var(--ease-out) 1.2s both,tag-nudge 3.2s ease-in-out 2s infinite}
.icon__tag::after{content:"";position:absolute;right:-6px;top:50%;width:10px;height:10px;margin-top:-6px;background:inherit;border:inherit;border-left:0;border-bottom:0;border-radius:0 2px 0 0;rotate:45deg}
.icon__tag svg{width:12px;height:12px;flex:none;fill:#ffb25b;filter:drop-shadow(0 0 5px rgba(255,150,60,.95))}
.icon__tag:hover{background:#3a1c0c;border-color:rgba(255,190,120,.9);color:#fff1dc}
.icon.on-left .icon__tag{right:auto;left:calc(100% - 4px);animation-name:tag-in-l,tag-nudge-l}
.icon.on-left .icon__tag::after{right:auto;left:-6px;rotate:-135deg}
@keyframes fi-ring{to{--ring:360deg}}
@keyframes fi-new{50%{box-shadow:0 2px 6px rgba(0,0,0,.45),0 0 20px 3px rgba(255,140,50,.95)}}
@keyframes tag-in{from{opacity:0;translate:14px 0;scale:.9}}
@keyframes tag-nudge{50%{translate:-5px 0}}
@keyframes tag-in-l{from{opacity:0;translate:-14px 0;scale:.9}}
@keyframes tag-nudge-l{50%{translate:5px 0}}
.band{position:fixed;z-index:3;border:1px solid rgba(130,165,255,.85);border-radius:3px;background:rgba(90,130,255,.18);pointer-events:none}
.band[hidden]{display:none}
@media (max-width:1199px){.icons{display:none}}

.win .doc--finder,.win .doc--settings{height:100%;padding:0}
.papp .doc--finder,.papp .doc--settings{padding:0}
.finder{display:grid;grid-template-columns:180px 1fr;height:100%;min-height:420px;font-size:13px}
.fd__side{display:grid;align-content:start;gap:1px;padding:12px 8px;border-right:1px solid var(--line);background:color-mix(in oklab,var(--text) 3%,transparent);overflow:auto}
.fd__side p{margin:12px 8px 4px;font:600 11px var(--sans);color:var(--muted)}
.fd__side p:first-child{margin-top:2px}
.fd__side button{display:flex;align-items:center;gap:8px;padding:5px 8px;border:0;border-radius:7px;background:none;color:var(--text);text-align:left;white-space:nowrap;cursor:default}
.fd__side svg{width:16px;height:16px;flex:none;fill:none;stroke:#3d8fe6;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.fd__side button.is-on{background:color-mix(in oklab,var(--text) 10%,transparent)}
.fd__main{display:grid;grid-template-rows:auto 1fr auto;min-width:0;min-height:0}
.fd__bar{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line)}
.fd__nav{width:28px;height:26px;border:0;border-radius:6px;background:none;color:var(--text);font-size:20px;line-height:1;cursor:default}
.fd__nav:disabled{opacity:.3}
.fd__nav:not(:disabled):hover,.fd__views button:hover{background:var(--surface-2)}
.fd__title{flex:1;min-width:0;margin-left:4px;font-size:14px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd__views{display:flex;padding:2px;border-radius:8px;background:var(--surface)}
.fd__views button{width:30px;height:24px;border:0;border-radius:6px;background:none;color:var(--text-2);cursor:default}
.fd__views button.is-on{background:var(--surface-2);color:var(--text)}
.fd__find{width:150px;height:28px;padding:0 10px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);font-size:13px}
.fd__items{min-height:0;overflow:auto;padding:14px;outline:none;align-content:start}
.fd__items--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px 6px}
.fd__it{display:grid;justify-items:center;align-content:start;gap:6px;padding:8px 4px;border-radius:10px;cursor:default}
.fd__it .fi,.fd__it .ico{width:56px}
.fd__name{max-width:100%;padding:1px 6px;border-radius:5px;font-size:12px;line-height:1.3;text-align:center;overflow-wrap:break-word}
.fd__it.is-sel{background:color-mix(in oklab,var(--text) 8%,transparent)}
.fd__it.is-sel .fd__name{background:#2f6fed;color:#fff}
.fd__items--list{display:grid;gap:1px;padding:8px}
.fd__items--list .fd__it{grid-template-columns:22px 1fr 150px;justify-items:start;align-items:center;gap:10px;padding:4px 10px;border-radius:6px}
.fd__items--list .fd__it .fi,.fd__items--list .fd__it .ico{width:22px}
.fd__items--list .fd__name{padding:0;text-align:left}
.fd__items--list .fd__it.is-sel{background:#2f6fed;color:#fff}
.fd__items--list .fd__it.is-sel .fd__name{background:none}
.fd__kind{font-size:12px;color:var(--muted)}
.fd__items--list .is-sel .fd__kind{color:rgba(255,255,255,.8)}
.fd__empty{grid-column:1/-1;padding:48px 20px;text-align:center;color:var(--muted)}
.fd__status{display:flex;justify-content:space-between;gap:12px;padding:6px 12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}
@container (max-width:600px){
  .finder{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .fd__side{display:flex;gap:8px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px 10px;scrollbar-width:none}
  .fd__side::-webkit-scrollbar{display:none}
  .fd__side p{display:none}
  .fd__side button{flex:none;padding:7px 13px 7px 11px;border-radius:999px;background:color-mix(in oklab,var(--text) 5%,transparent)}
  .fd__side button.is-on{background:color-mix(in oklab,var(--text) 15%,transparent)}
  .fd__find{width:110px}
}

.ql{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;background:transparent;transition:background .25s}
.ql.on{background:rgba(0,0,0,.3)}
.ql[hidden]{display:none}
.ql__panel{position:relative;display:grid;grid-template-rows:auto 1fr;max-width:min(1100px,90vw);max-height:86vh;border-radius:16px;overflow:hidden;background:var(--menu-solid);backdrop-filter:blur(40px) saturate(1.6);-webkit-backdrop-filter:blur(40px) saturate(1.6);box-shadow:0 0 0 1px var(--win-line),0 40px 120px -20px rgba(0,0,0,.75);color:var(--text);outline:none}
.ql__bar{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px}
.ql__x{flex:none;width:22px;height:22px;border:0;border-radius:50%;background:color-mix(in oklab,var(--text) 12%,transparent);color:var(--text);font-size:15px;line-height:1;cursor:pointer}
.ql__name{flex:1;min-width:0;text-align:center;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ql__acts{display:flex;justify-content:flex-end;min-width:22px}
.ql__act{padding:4px 10px;border-radius:7px;background:var(--surface-2);font-size:12.5px;font-weight:600}
.ql__body{display:grid;place-items:center;min-height:0;background:#000}
.ql__body img,.ql__body video{display:block;width:auto;height:auto;max-width:min(1100px,90vw);max-height:calc(86vh - 38px)}
.ql:is([data-kind=app],[data-kind=doc],[data-kind=dir],[data-kind=link]) .ql__body{background:none}
.ql__card{display:grid;justify-items:center;gap:10px;min-width:min(360px,80vw);padding:30px 44px 36px;text-align:center}
.ql__card .ico,.ql__card .fi{width:96px}
.ql__card b{font-size:18px}
.ql__card p{max-width:40ch;font-size:14px;color:var(--text-2)}
.ql__card .btn{height:38px;margin-top:8px}
.ql__nav{position:absolute;top:50%;width:38px;height:38px;margin-top:-19px;border:0;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;font-size:26px;line-height:1;cursor:pointer;opacity:0;transition:opacity .2s}
.ql__nav--prev{left:10px}.ql__nav--next{right:10px}
.ql__panel:hover .ql__nav,.ql__nav:focus-visible{opacity:1}
.ql__nav[hidden]{display:none}

/* ---------- ⌥Tab ---------- */
.switcher{position:fixed;inset:0;z-index:1500;display:grid;place-items:center;pointer-events:none}
.switcher[hidden]{display:none}
.switcher__row{display:flex;gap:6px;padding:14px;border-radius:26px;background:var(--menu-solid);backdrop-filter:blur(40px) saturate(1.6);-webkit-backdrop-filter:blur(40px) saturate(1.6);box-shadow:0 0 0 1px var(--win-line),0 30px 80px -20px rgba(0,0,0,.6);pointer-events:auto;opacity:0;transform:scale(.96);transition:opacity .15s,transform .2s var(--ease-out)}
.switcher.on .switcher__row{opacity:1;transform:none}
.switcher__it{display:grid;justify-items:center;gap:8px;width:108px;padding:12px 8px 10px;border:0;border-radius:18px;background:none;color:var(--text);font-size:12px;cursor:default}
.switcher__it .ico{width:72px}
.switcher__it span{opacity:0}
.switcher__it.is-on{background:color-mix(in oklab,var(--text) 14%,transparent)}
.switcher__it.is-on span{opacity:1}

/* ---------- Control Center, Notification Center, the live pill ---------- */
.mb .live{position:absolute;left:50%;top:3px;translate:-50% 0;display:flex;align-items:center;gap:7px;height:24px;padding:0 11px 0 4px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:600 12px var(--sans);text-shadow:none;cursor:pointer;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.mb .live:hover{background:rgba(0,0,0,.75)}
.live .ico{width:18px;border-radius:5px}
.live__dot{display:block;width:8px;height:8px;margin:0 5px;border-radius:50%;background:#ff453a;box-shadow:0 0 8px #ff453a}
.live__eq{display:none;align-items:flex-end;gap:2px;height:11px}
.live.is-playing .live__eq{display:flex}
.live__eq i{width:2.5px;height:4px;border-radius:2px;background:#ffb547;animation:eq .9s ease-in-out infinite}
.live__eq i:nth-child(2){animation-delay:-.3s}.live__eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq{0%,100%{height:3px}50%{height:11px}}
.live__card{position:fixed;top:34px;left:50%;z-index:960;width:min(360px,calc(100vw - 24px));padding:12px;border-radius:26px;background:rgba(12,12,15,.94);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 30px 80px -20px rgba(0,0,0,.75);opacity:0;translate:-50% -10px;scale:.92;transform-origin:50% 0;transition:opacity .2s,scale .35s var(--spring),translate .35s var(--ease-out)}
.live__card.on{opacity:1;translate:-50% 0;scale:1}
.live__card[hidden]{display:none}
.live__art{width:100%;aspect-ratio:2.05;object-fit:cover;border-radius:16px}
.live__tag{margin:10px 4px 8px;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#ffd29a}
.live__badges,.nc__badges{display:flex;flex-wrap:wrap;gap:8px}
.live__badges{padding:0 4px}
.live__badges img,.nc__badges img{width:auto;height:38px}
.live__open{width:100%;height:36px;margin-top:10px;border:0;border-radius:14px;background:rgba(255,255,255,.1);color:#fff;font:600 13px var(--sans);cursor:pointer}
.live__row{display:flex;align-items:center;gap:12px;padding:4px}
.live__row .ico{width:52px}
.live__row div{flex:1;display:grid}
.live__row small{font-size:12px;color:rgba(255,255,255,.6)}
.live__pp{width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}

.cc{position:fixed;top:36px;right:10px;z-index:960;display:grid;grid-template-columns:1fr 1fr;gap:10px;width:330px;padding:12px;border-radius:24px;background:var(--glass-2);backdrop-filter:blur(40px) saturate(1.8);-webkit-backdrop-filter:blur(40px) saturate(1.8);box-shadow:0 0 0 1px var(--glass-line),0 30px 80px -20px rgba(0,0,0,.6);color:var(--text);opacity:0;translate:0 -6px;transition:opacity .2s,translate .3s var(--ease-out)}
.cc.on{opacity:1;translate:0 0}
.cc[hidden]{display:none}
.cc__tile{display:grid;gap:8px;padding:10px 12px;border-radius:16px;background:color-mix(in oklab,var(--text) 7%,transparent)}
.cc__tile b{font-size:12px;font-weight:600}
.cc__wide{grid-column:1/-1}
.cc__seg,.cc__desks{display:flex;gap:4px}
.cc__seg button{flex:1;height:26px;border:0;border-radius:8px;background:color-mix(in oklab,var(--text) 8%,transparent);color:var(--text);font:600 11px var(--sans);cursor:pointer}
.cc__seg button.is-on{background:var(--brand-a);color:#fff}
.cc__desks button{flex:1;padding:0;border:0;border-radius:8px;background:none;cursor:pointer}
.cc__desks .st__desk{height:26px;border-radius:7px}
.cc__desks button.is-on .st__desk{box-shadow:0 0 0 2px var(--brand-a)}
.cc__lamp{grid-template-columns:auto 1fr;align-items:center}
.cc__lamp input{width:100%;accent-color:var(--brand-a)}
.cc__tog{display:flex;align-items:center;gap:10px;padding:8px 10px;border:0;border-radius:16px;background:color-mix(in oklab,var(--text) 7%,transparent);color:var(--text);font:600 12px var(--sans);text-align:left;cursor:pointer}
.cc__tog i{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:color-mix(in oklab,var(--text) 14%,transparent);transition:background .2s}
.cc__tog svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cc__tog[aria-pressed=true] i{background:var(--brand-a);color:#fff}
.cc__play{grid-template-columns:1fr auto;align-items:center}
.cc__play[hidden]{display:none}
.cc__play b{grid-column:1/-1}
.cc__pp{width:30px;height:30px;border:0;border-radius:50%;background:color-mix(in oklab,var(--text) 14%,transparent);color:var(--text);cursor:pointer}
.cc__more{height:34px;border:0;border-radius:14px;background:color-mix(in oklab,var(--text) 7%,transparent);color:var(--text);font:600 12.5px var(--sans);cursor:pointer}

.nc{position:fixed;top:36px;right:10px;bottom:96px;z-index:960;display:flex;flex-direction:column;gap:10px;width:360px;overflow:auto;scrollbar-width:none;opacity:0;translate:24px 0;transition:opacity .2s,translate .35s var(--ease-out)}
.nc.on{opacity:1;translate:0 0}
.nc[hidden]{display:none}
.nc__head,.nc__ntf,.nc__none,.nc__wg{border-radius:18px;background:var(--glass-2);backdrop-filter:blur(30px) saturate(1.8);-webkit-backdrop-filter:blur(30px) saturate(1.8);box-shadow:0 0 0 1px var(--glass-line);color:var(--text)}
.nc__head{display:flex;align-items:center;justify-content:space-between;padding:9px 14px}
.nc__head b{font-size:14px}
.nc__clear{border:0;background:none;color:var(--text-2);font:600 12px var(--sans);cursor:pointer}
.nc__list{display:grid;gap:8px}
.nc__ntf{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:10px;padding:10px 12px;border:0;text-align:left;cursor:pointer}
.nc__ntf .ico{width:30px}
.nc__ntf span{display:grid;gap:2px}
.nc__ntf b{font-size:13px}
.nc__ntf small{font-size:12.5px;line-height:1.35;color:var(--text-2)}
.nc__ntf time{font-size:11px;color:var(--muted)}
.nc__none{padding:12px;text-align:center;font-size:13px;color:var(--muted)}
.nc__widgets{display:grid;gap:10px}
.nc__wg{display:grid;gap:8px;padding:12px}
.nc__art{width:100%;aspect-ratio:2.05;object-fit:cover;border-radius:12px}
.nc__tag{font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#ff9a4a}
.nc__app{display:flex;align-items:center;gap:8px}
.nc__app .ico{width:24px}
.nc__wg p{font-size:13px;color:var(--text-2)}
.nc__cam{cursor:pointer}

/* ---------- System Settings ---------- */
.settings{display:grid;grid-template-columns:190px 1fr;height:100%;min-height:440px}
.st__side{display:grid;align-content:start;gap:2px;padding:14px 10px;border-right:1px solid var(--line);background:color-mix(in oklab,var(--text) 3%,transparent)}
.st__side button{padding:7px 10px;border:0;border-radius:8px;background:none;color:var(--text);text-align:left;font-size:13.5px;white-space:nowrap;cursor:default}
.st__side button.is-on{background:var(--brand-a);color:#fff}
.st__main{min-height:0;overflow:auto;padding:22px 26px}
.st__main h3{margin-bottom:16px;font-size:20px;letter-spacing:-.02em}
.st__main h4{margin:24px 0 10px;font-size:13px;font-weight:600;color:var(--muted)}
.st__row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:8px;padding:12px 14px;border-radius:12px;background:var(--surface)}
.st__row b{display:block;font-size:14px;font-weight:600}
.st__row small{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:var(--muted)}
.st__row input[type=range]{width:180px;accent-color:var(--brand-a)}
.st__row .btn{height:34px;padding:0 14px;font-size:13px}
input[role=switch]{position:relative;flex:none;width:40px;height:24px;margin:0;border-radius:12px;background:color-mix(in oklab,var(--text) 22%,transparent);appearance:none;-webkit-appearance:none;cursor:pointer;transition:background .2s}
input[role=switch]::after{content:"";position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .25s var(--spring)}
input[role=switch]:checked{background:#34c759}
input[role=switch]:checked::after{transform:translateX(16px)}
.st__seg{display:flex;flex-wrap:wrap;gap:12px}
.st__seg button,.st__desks button{display:grid;gap:6px;padding:8px;border:0;border-radius:12px;background:none;color:var(--text);cursor:pointer}
.st__seg button{justify-items:center;font-size:12.5px}
.st__thumb{display:block;width:96px;height:62px;border-radius:9px;box-shadow:0 0 0 1px var(--line-2)}
.st__thumb--dark{background:linear-gradient(135deg,#1c1f27,#0b0c10)}
.st__thumb--light{background:linear-gradient(135deg,#f6f4ef,#dcd8ce)}
.st__thumb--auto{background:linear-gradient(135deg,#f6f4ef 50%,#14161c 50%)}
.st__seg button[aria-checked=true] .st__thumb,.st__desks button[aria-checked=true] .st__desk{box-shadow:0 0 0 3px var(--brand-a)}
.st__desks{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.st__desks button{text-align:left;font-size:13px}
.st__desks small{font-size:11.5px;color:var(--muted)}
.st__desk{display:grid;place-items:center;height:72px;border-radius:10px;box-shadow:0 0 0 1px var(--line-2);overflow:hidden}
.st__desk b{font:800 26px var(--sans);letter-spacing:-.04em}
.st__desk--slate{background:radial-gradient(80% 90% at 30% 25%,#3a3f4a,#1a1c22 70%)}
.st__desk--slate b{color:#15171c;text-shadow:0 1px 0 rgba(255,255,255,.14),0 -1px 0 rgba(0,0,0,.6)}
.st__desk--walnut{background:repeating-linear-gradient(176deg,#4a2a16 0 5px,#5a3420 5px 9px,#43260f 9px 14px)}
.st__desk--walnut b{color:#26140a;text-shadow:0 1px 0 rgba(255,220,180,.16),0 -1px 0 rgba(0,0,0,.6)}
.st__desk--paper{background:radial-gradient(80% 90% at 30% 25%,#fbf9f4,#e3dfd4)}
.st__desk--paper b{color:#222;text-shadow:0 1px 0 #fff}
.st__desk--auto{background:linear-gradient(135deg,#ece8de 50%,#1c1f26 50%)}
.st__desk--auto b{color:#7a7f8c}
.st__keys{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px 18px}
.st__keys kbd{display:inline-block;padding:3px 8px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line-2);font:500 12px var(--mono);white-space:pre}
.st__keys dd{margin:0;font-size:13.5px;color:var(--text-2)}
.st__about{display:grid;justify-items:start;gap:4px;margin-bottom:12px;padding:18px;border-radius:14px;background:var(--surface)}
.st__about b{font-size:22px;letter-spacing:-.02em}
.st__about span{font-size:13px;color:var(--muted)}
.st__about p{margin-top:6px;font-size:13.5px;color:var(--text-2)}
.st__facts{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin-top:12px;font-size:12.5px}
.st__facts dt{color:var(--muted)}.st__facts dd{margin:0}
@container (max-width:600px){
  .settings{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .st__side{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px}
  .st__main{padding:16px}
}

/* Show Desktop: the windows step aside */
.os-desk .win{transition:translate .55s var(--ease-out)}

/* theme switch: View Transitions (the new theme is revealed as a circle from the button pressed) */
.theming::view-transition-old(root),.theming::view-transition-new(root){animation:none;mix-blend-mode:normal}
@view-transition{navigation:auto}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .vscreens,.vscr__prog::after,.lenscur{animation:none!important}
}

/* ---------- Halloween, Peekadoor's (index.html's [data-season]; season.js puts the desk away, haunt.js lays the game's
   hall where it was). It switches itself off on 1 Nov; to retire it for good, delete this block and the two scripts */
.haunt{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;overflow:hidden;background:#050302}
.os-phone .haunt{height:100lvh}
.os-phone .doc--welcome>.haunt:not(.welcome__name){display:block}
.haunt>*{position:absolute}
.hd-hall{inset:0;width:100%;height:100%;object-fit:cover}
.hd-shade{inset:0;background:radial-gradient(64% 46% at 50% 24%,rgba(6,3,2,.66),transparent 72%),radial-gradient(130% 95% at 50% 46%,transparent 38%,rgba(6,3,2,.82) 100%),linear-gradient(rgba(14,7,3,.34),rgba(14,7,3,.34))}
.haunt.is-night .hd-shade{background:radial-gradient(64% 46% at 50% 24%,rgba(6,3,2,.66),transparent 72%),radial-gradient(130% 95% at 50% 46%,transparent 38%,rgba(20,2,2,.84) 100%),linear-gradient(rgba(60,6,6,.34),rgba(60,6,6,.34))}
.hd-candle{left:0;top:0;width:680px;height:680px;margin:-340px 0 0 -340px;border-radius:50%;background:radial-gradient(circle,rgba(255,172,96,.44),rgba(255,120,40,.16) 36%,transparent 68%);mix-blend-mode:screen;will-change:transform}
.os-phone .hd-candle{display:none}
.hd-motes{inset:0}
.hd-motes i{position:absolute;left:var(--x);bottom:-12px;width:var(--s);height:var(--s);border-radius:50%;background:#ffbe6a;box-shadow:0 0 6px 2px rgba(255,140,40,.7);opacity:0;animation:hd-mote var(--d) linear var(--dl) infinite}
.os-phone .hd-motes i:nth-child(n+8){display:none}
/* the name in the game's own letters, lit like its wordmark; the game's card burns */
:root[data-season="halloween"] .welcome__name{font-family:var(--fell-sc);font-weight:400;letter-spacing:0;color:#f4e5c8;text-shadow:0 0 22px rgba(255,150,60,.5),0 0 64px rgba(255,100,30,.32),0 2px 3px rgba(0,0,0,.65)}
[data-season="halloween"] .get--peekadoor{animation:hd-burn 3.4s ease-in-out infinite}
[data-season="halloween"] .mb .live{box-shadow:0 0 0 1px rgba(255,150,60,.32),0 0 18px -4px rgba(255,115,25,.7)}
/* the door a visit comes in by (index.html: .door-in once a session, .door-go once its pictures are in): the game's own
   hall door, Door3D's four panels, brass knob and number in its Wood051, rendered from the game's measurements with the
   lantern beside it and candlelight in its cracks (projects/peekadoor/door: hall = the wall and casing, the doorway left
   transparent; leaf; crack and spill = what the room's light adds to the hall with the door ajar and wide open). It is
   tried, opens a crack first, of course, then wide, and you go through it into the house. A phone sees the same hall,
   cut to its height. (No backface-visibility: with it Chrome culls the leaf outright) */
.hdoor{--hd-t:3.8s;display:none}
html.door-in .hdoor{display:block;position:fixed;inset:0;z-index:9998;overflow:hidden;pointer-events:none;container-type:size;background:#050302;opacity:0}
html.door-go .hdoor{animation:hd-door var(--hd-t) linear forwards}
.hdoor>*,.hdoor__set>*{position:absolute}
.hdoor__set{width:max(100vw,177.78vh);height:max(100vh,56.25vw);left:calc(50vw - max(50vw,88.89vh));top:calc(50vh - max(50vh,28.125vw));perspective:calc(max(100vh,56.25vw)*1.0345);width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);left:calc(50cqw - max(50cqw,88.89cqh));top:calc(50cqh - max(50cqh,28.125cqw));perspective:calc(max(100cqh,56.25cqw)*1.0345);transform-origin:50% 52.5%}
.hdoor__in{left:39%;top:14%;width:22%;height:77%;background:radial-gradient(42% 30% at 50% 66%,rgba(255,238,200,.9),transparent 70%),radial-gradient(75% 55% at 50% 58%,#ffc782,#f08a3a 45%,#a2421a 78%,#4a1806)}
.hdoor__leaf{left:40.803%;top:18.17%;width:18.376%;height:68.854%;background:#24160d url(/projects/peekadoor/door/leaf.webp) 50%/100% 100% no-repeat;transform-origin:0 50%}
.hdoor__leaf::after{content:"";position:absolute;inset:0;background:#000;opacity:0}
.hdoor__hall,.hdoor__crack,.hdoor__spill{inset:0;background:url(/projects/peekadoor/door/hall.webp) 50%/100% 100% no-repeat}
.hdoor__crack,.hdoor__spill{background-image:url(/projects/peekadoor/door/crack.webp);mix-blend-mode:screen;mix-blend-mode:plus-lighter;opacity:0}
.hdoor__spill{background-image:url(/projects/peekadoor/door/spill.webp)}
.hdoor__flame{left:31.9%;top:33.9%;width:26%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,168,88,.3),rgba(255,120,40,.1) 50%,transparent);mix-blend-mode:screen;mix-blend-mode:plus-lighter}
.hdoor__say{left:0;right:0;bottom:8vh;bottom:8cqh;margin:0;text-align:center;font:italic 400 clamp(22px,3vw,40px)/1 var(--fell);color:#f4e5c8;text-shadow:0 0 18px rgba(255,140,50,.8),0 2px 4px #000;opacity:0}
html.door-go .hdoor__set{animation:hd-push var(--hd-t) forwards}
html.door-go .hdoor__leaf{animation:hd-leaf var(--hd-t) forwards}
html.door-go .hdoor__leaf::after{animation:hd-turn var(--hd-t) forwards}
html.door-go .hdoor__crack{animation:hd-crack var(--hd-t) forwards}
html.door-go .hdoor__spill{animation:hd-spill var(--hd-t) forwards}
html.door-go .hdoor__flame{animation:hd-flame 1.9s linear infinite}
html.door-go .hdoor__say{animation:hd-say var(--hd-t) ease forwards}
@keyframes hd-door{0%{opacity:0}8%,87%{opacity:1}100%{opacity:0}}
@keyframes hd-leaf{0%,17%{transform:rotateY(0)}19%{transform:rotateY(.7deg)}21%{transform:rotateY(0)}23%{transform:rotateY(.5deg)}25%{transform:rotateY(0);animation-timing-function:cubic-bezier(.2,.7,.3,1)}36%{transform:rotateY(17deg);animation-timing-function:ease-in-out}42%{transform:rotateY(13deg);animation-timing-function:ease-in-out}48%,56%{transform:rotateY(16deg);animation-timing-function:cubic-bezier(.55,0,.35,1)}84%,100%{transform:rotateY(100deg)}}
@keyframes hd-turn{0%,56%{opacity:0}84%,100%{opacity:.55}}
@keyframes hd-crack{0%,25%{opacity:0}36%{opacity:1}42%{opacity:.8}48%,58%{opacity:.95}72%,100%{opacity:0}}
@keyframes hd-spill{0%,56%{opacity:0;animation-timing-function:ease-in}80%,100%{opacity:1}}
@keyframes hd-push{0%,58%{transform:scale(1);animation-timing-function:cubic-bezier(.45,0,.75,.45)}100%{transform:scale(7)}}
@keyframes hd-flame{0%,100%{opacity:.85}9%{opacity:.6}17%{opacity:1}26%{opacity:.75}38%{opacity:.95}47%{opacity:.7}58%{opacity:1}69%{opacity:.8}81%{opacity:.92}90%{opacity:.68}}
@keyframes hd-say{0%,9%{opacity:0;transform:translateY(8px)}20%,46%{opacity:1;transform:none}56%,100%{opacity:0}}
@keyframes hd-mote{0%{opacity:0;transform:translate(0,0)}12%{opacity:.9}80%{opacity:.6}100%{opacity:0;transform:translate(var(--dx),-75vh)}}
@keyframes hd-burn{0%,100%{box-shadow:0 0 0 1px rgba(255,170,90,.5),0 0 44px -10px rgba(255,120,30,.7),0 34px 70px -34px rgba(0,0,0,.85)}50%{box-shadow:0 0 0 1px rgba(255,195,125,.85),0 0 70px -6px rgba(255,130,40,.95),0 34px 70px -34px rgba(0,0,0,.85)}}