/* ============================================================
   ACTOR — product screens (index.html)
   Sample products drawn in HTML, so they stay sharp and alive: a music
   app in the hero; a photos app, a mail app and the face-recognition
   door in 02.
   Each device is a size container: everything inside is measured in
   container units and keeps its proportions at any size. The only colour
   on the site is here, from --ui-accent. Sample data only.
   ============================================================ */
/* A device's width. Registered as a length so it is worked out once, on the
   device, and its screen, notch and corners inherit that pixel value. Left
   unregistered, a width in container units (cqw/cqh) is re-read inside the
   device, against the device itself, and the corners and notch shrink. */
@property --w{ syntax:"<length>"; inherits:true; initial-value:300px; }
.dev{ position:relative; flex:none; container-type:inline-size; }
.dev .ic{ width:1.25em; height:1.25em; flex:none; }

.ui{
  --u-bg:#F3F4F6; --u-card:#FFFFFF; --u-ink:#0E1116; --u-dim:#69707C; --u-line:rgba(14,17,22,.08);
  --u-acc:var(--ui-accent,#2F6BFF); --u-ok:#16A34A; --u-warn:#D97706;
  background:var(--u-bg); color:var(--u-ink);
  font-family:var(--font); font-weight:500; letter-spacing:-.01em; line-height:1.25;
  font-variation-settings:"ROND" 0;
}
.ui small{ font-size:.82em; color:var(--u-dim); font-weight:500; }
.ui b{ font-weight:600; }
.ui--dark, html[data-theme="dark"] .ui{
  --u-bg:#0D0F13; --u-card:#171A20; --u-ink:#EEF1F5; --u-dim:#8D95A3; --u-line:rgba(238,241,245,.08);
}

/* ---------------------------------------------------------- phone */
.dev-phone{ width:var(--w,300px); aspect-ratio:9/19.3; padding:calc(var(--w,300px) * .033);
  border-radius:calc(var(--w,300px) * .16); background:linear-gradient(145deg,#2A2D33,#0B0C0E 40%,#1B1D21);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.06), 0 40px 80px -30px rgba(8,10,16,.55), 0 18px 30px -18px rgba(8,10,16,.4); }
.dev-phone::before{ content:""; position:absolute; top:calc(var(--w,300px) * .065); left:50%; translate:-50% 0; z-index:2;
  width:30%; height:calc(var(--w,300px) * .085); border-radius:99px; background:#050506; }
.dev-phone__scr{ position:relative; height:100%; overflow:hidden;
  border-radius:calc(var(--w,300px) * .13); display:flex; flex-direction:column; gap:3.6cqw; padding:0 5.2cqw; font-size:4.3cqw; }
/* Shared pieces every sample app is built from. */
.ui-sb{ display:flex; justify-content:space-between; align-items:center; padding:5.6cqw 3cqw 1cqw; font-size:4cqw; }
.ui-sb__i{ display:flex; align-items:flex-end; gap:.8cqw; height:3cqw; }
.ui-sb__i i{ width:1cqw; background:currentColor; border-radius:1px; }
.ui-sb__i i:nth-child(1){ height:35%; } .ui-sb__i i:nth-child(2){ height:55%; } .ui-sb__i i:nth-child(3){ height:78%; } .ui-sb__i i:nth-child(4){ height:100%; }
.ui-title{ display:grid; gap:1cqw; margin-top:2cqw; }
.ui-title b{ font-size:8.4cqw; letter-spacing:-.035em; line-height:1.05; }
.ui-hi{ display:flex; align-items:center; justify-content:space-between; margin-top:2cqw; }
.ui-hi > div{ display:grid; gap:.6cqw; }
.ui-hi b{ font-size:8cqw; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.ui-av{ display:grid; place-items:center; flex:none; width:11cqw; height:11cqw; border-radius:50%; background:var(--u-card); box-shadow:inset 0 0 0 1px var(--u-line); font-weight:600; }
.ui-acts{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.6cqw; }
.ui-acts--4{ grid-template-columns:repeat(4,1fr); gap:2cqw; }
.ui-acts > span{ display:grid; justify-items:center; gap:1.6cqw; padding:3.4cqw 1cqw; border-radius:4.4cqw; background:var(--u-card); box-shadow:inset 0 0 0 1px var(--u-line); font-size:3.4cqw; font-weight:600; }
.ui-acts .ic{ width:6cqw; height:6cqw; color:var(--u-acc); }
.ui-list{ display:grid; gap:1.2cqw; }
.ui-list > small{ margin:1cqw 0 .6cqw; }
.ui-li{ display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; column-gap:3cqw; align-items:center; padding:2.4cqw 0; border-bottom:1px solid var(--u-line); font-size:3.8cqw; }
.ui-li__ic{ grid-row:1 / span 2; display:grid; place-items:center; width:10cqw; height:10cqw; border-radius:50%; background:var(--u-card); box-shadow:inset 0 0 0 1px var(--u-line); color:var(--u-dim); }
.ui-li__ic .ic{ width:5cqw; height:5cqw; }
.ui-li > span:not(.ui-li__ic){ grid-column:2; color:var(--u-dim); font-size:3.3cqw; }
.ui-li > em{ grid-column:3; grid-row:1 / span 2; font-style:normal; font-weight:600; font-size:3.7cqw; font-variant-numeric:tabular-nums; }
.ui-li > em.up{ color:var(--u-ok); }
.ui-tabs{ margin:auto -5.2cqw 0; display:flex; justify-content:space-around; padding:3.4cqw 4cqw 6cqw; background:var(--u-card); border-top:1px solid var(--u-line); }
.ui-tabs i{ display:grid; place-items:center; width:9cqw; height:9cqw; color:var(--u-dim); }
.ui-tabs i.on{ color:var(--u-acc); }
.ui-tabs .ic{ width:6cqw; height:6cqw; }
.ui-av, .ui-tabs, .ui-acts > span{ flex:none; }

/* Music: now playing, and what comes next. */
.app-music{ --u-acc:#E11D74; }
.ui-art{ position:relative; overflow:hidden; aspect-ratio:1; border-radius:6cqw; margin-top:2cqw; flex:none;
  background:linear-gradient(145deg,#1F1135,#E11D74 60%,#FDBA74); }
.ui-art i{ position:absolute; border-radius:50%; mix-blend-mode:screen; }
.ui-art i:nth-child(1){ width:70%; height:70%; left:-12%; top:40%; background:rgba(253,186,116,.55); }
.ui-art i:nth-child(2){ width:48%; height:48%; right:-8%; top:-8%; background:rgba(56,189,248,.5); }
.ui-art i:nth-child(3){ width:26%; height:26%; left:38%; top:24%; background:rgba(255,255,255,.35); }
.ui-track{ display:flex; align-items:center; justify-content:space-between; }
.ui-track > div{ display:grid; gap:.8cqw; }
.ui-track b{ font-size:5.6cqw; letter-spacing:-.02em; }
.ui-track > i{ color:var(--u-acc); } .ui-track .ic{ width:6cqw; height:6cqw; fill:currentColor; }
.ui-seek{ height:1.4cqw; border-radius:99px; background:var(--u-line); }
.ui-seek i{ display:block; width:36%; height:100%; border-radius:inherit; background:var(--u-ink); }
.ui-times{ display:flex; justify-content:space-between; margin-top:-2cqw; }
.ui-ctrl{ display:flex; justify-content:center; align-items:center; gap:9cqw; }
.ui-ctrl i{ display:grid; place-items:center; }
.ui-ctrl .ic{ width:7cqw; height:7cqw; fill:currentColor; }
.ui-ctrl__play{ width:16cqw; height:16cqw; border-radius:50%; background:var(--u-ink); color:var(--u-bg); }
.ui-ctrl__play .ic{ width:7cqw; height:7cqw; margin-left:1cqw; }
.app-music .ui-li__ic .ic{ fill:currentColor; }

/* Photos: the library, a memory, today's shots. */
.app-photos{ --u-acc:#EA580C; }
.ui-mem{ position:relative; flex:none; display:flex; align-items:flex-end; aspect-ratio:2/1; padding:4.4cqw; border-radius:6cqw; overflow:hidden; color:#fff;
  background:radial-gradient(30% 22% at 72% 30%, #FFE8B0, transparent 70%), linear-gradient(180deg, transparent 48%, rgba(10,20,30,.55)),
    linear-gradient(172deg, transparent 55%, #2F5D50 55.5%, #1E3F37), linear-gradient(180deg, #F7B267 0%, #F4845F 45%, #B5536B 70%); }
.ui-mem > div{ display:grid; gap:.8cqw; }
.ui-mem small{ color:rgba(255,255,255,.85); }
.ui-mem b{ font-size:5.6cqw; letter-spacing:-.025em; }
.ui-ph{ display:grid; gap:2cqw; min-height:0; overflow:hidden; }
.ui-ph__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1cqw; margin-inline:-2cqw; }
.ui-ph__grid i{ position:relative; aspect-ratio:1; border-radius:1.6cqw; }
.ui-ph__grid em{ position:absolute; right:1.4cqw; bottom:1.2cqw; font-style:normal; font-size:3cqw; font-weight:600; color:#fff; }
.ph1{ background:linear-gradient(180deg,#8EC5FC 60%,#2E6F9E 60%); }
.ph2{ background:radial-gradient(circle at 50% 42%,#FFE08A 16%,transparent 17%), linear-gradient(180deg,#FF9A76,#C0567C); }
.ph3{ background:linear-gradient(135deg,#D9CBB5,#9C8468); }
.ph4{ background:linear-gradient(160deg,transparent 58%,#3E6B48 58.5%), linear-gradient(180deg,#CFE9F5,#9DC8DB); }
.ph5{ background:linear-gradient(180deg,#2B2D42,#5B4B8A); }
.ph6{ background:radial-gradient(circle at 34% 60%,#F5F0E6 22%,transparent 23%), linear-gradient(135deg,#E8C39E,#B9855C); }
.ph7{ background:linear-gradient(200deg,#FAD0C4,#F1A7B5 50%,#9B6B9E); }
.ph8{ background:linear-gradient(180deg,#A8E063 0%,#56AB2F 100%); }
.ph9{ background:linear-gradient(180deg,#1C2541 55%,#F2C14E 55.5%,#E07A2F); outline:.8cqw solid var(--u-acc); outline-offset:-.8cqw; }

.ui-search{ display:flex; align-items:center; gap:2.4cqw; padding:3cqw 4cqw; border-radius:99px; background:var(--u-card); box-shadow:inset 0 0 0 1px var(--u-line); color:var(--u-dim); }
.ui-search .ic{ width:4.6cqw; height:4.6cqw; }
.ui-chips{ flex:none; display:flex; gap:2cqw; overflow:hidden; }
.ui-chips > span{ flex:none; padding:1.8cqw 3.4cqw; border-radius:99px; background:var(--u-card); box-shadow:inset 0 0 0 1px var(--u-line); font-size:3.5cqw; font-weight:600; }
.ui-chips > span.on{ background:var(--u-ink); color:var(--u-bg); box-shadow:none; }
/* ---------------------------------------------------------- face door */
.dev-scan{ width:var(--w,200px); aspect-ratio:10/17; padding:calc(var(--w,200px) * .07) calc(var(--w,200px) * .06) calc(var(--w,200px) * .12);
  border-radius:calc(var(--w,200px) * .11); background:linear-gradient(160deg,#2C2F35,#111215 45%,#1D1F23);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.09), 0 40px 70px -30px rgba(8,10,16,.55), 0 14px 26px -16px rgba(8,10,16,.4);
  display:flex; flex-direction:column; }
.dev-scan__cam{ display:flex; justify-content:center; gap:calc(var(--w,200px) * .05); margin-bottom:calc(var(--w,200px) * .05); }
.dev-scan__cam i{ width:calc(var(--w,200px) * .05); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 35%,#3A4250,#07080A 60%); box-shadow:0 0 0 1px rgba(255,255,255,.08); }
.dev-scan__cam i:last-child{ width:calc(var(--w,200px) * .03); align-self:center; background:#2A1010; }
.dev-scan__scr{ flex:1; display:flex; flex-direction:column; align-items:center; overflow:hidden;
  border-radius:calc(var(--w,200px) * .05); padding:5cqw 7cqw 8cqw; font-size:6cqw;
  background:radial-gradient(120% 70% at 50% 30%, #1C2230, #07090D 70%); color:#EEF1F5; }
.dev-scan__foot{ position:absolute; left:50%; bottom:calc(var(--w,200px) * .045); translate:-50% 0; width:22%; height:calc(var(--w,200px) * .018); border-radius:99px; background:rgba(255,255,255,.12); }
.ui-scan__top{ width:100%; display:flex; justify-content:space-between; font-size:5.4cqw; color:#8D95A3; }
.ui-scan__face{ position:relative; width:74cqw; margin:9cqw 0 7cqw; }
.ui-scan__face svg{ width:100%; overflow:visible; }
.ui-scan__track{ fill:rgba(255,255,255,.03); stroke:rgba(255,255,255,.12); stroke-width:1.5; }
.ui-scan__arc{ fill:none; stroke:var(--u-acc); stroke-width:3; stroke-linecap:round; stroke-dasharray:70 220; transform-origin:50% 50%;
  animation:scanSpin 1.4s linear infinite; }
.ui-scan__who{ fill:none; stroke:rgba(238,241,245,.55); stroke-width:2.2; stroke-linecap:round; }
@keyframes scanSpin{ to{ transform:rotate(360deg); } }
.ui-scan__msg{ display:grid; text-align:center; min-height:2.8em; }
.ui-scan__msg p{ grid-area:1/1; margin:0; transition:opacity .45s, transform .45s; }
.ui-scan__wait{ color:#AEB6C2; }
.ui-scan__ok{ display:grid; gap:1.5cqw; opacity:0; transform:translateY(4px); }
.ui-scan__ok b{ font-size:7.4cqw; letter-spacing:-.02em; }
.ui-scan__ok small{ color:#8FE0AE; font-size:5.4cqw; }
.ui-scan__ok small [data-clock]{ font-variant-numeric:tabular-nums; }
[data-scan].is-ok .ui-scan__wait{ opacity:0; }
[data-scan].is-ok .ui-scan__ok{ opacity:1; transform:none; }
[data-scan].is-ok .ui-scan__arc{ stroke:#22C55E; stroke-dasharray:300 0; animation:none; transition:stroke .3s; }
[data-scan].is-ok .ui-scan__who{ stroke:#8FE0AE; }

/* ---------------------------------------------------------- laptop */
.dev-laptop{ width:var(--w,760px); }
.dev-laptop__lid{ padding:calc(var(--w,760px) * .018); padding-bottom:calc(var(--w,760px) * .03); border-radius:calc(var(--w,760px) * .026) calc(var(--w,760px) * .026) 0 0;
  background:linear-gradient(180deg,#2A2D33,#121316); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.08); }
.dev-laptop__scr{ aspect-ratio:16/10; overflow:hidden; border-radius:calc(var(--w,760px) * .008);
  display:grid; grid-template-columns:19% 1fr; font-size:1.55cqw; }
.dev-laptop__base{ position:relative; height:calc(var(--w,760px) * .026); margin-inline:-6%;
  border-radius:0 0 calc(var(--w,760px) * .05) calc(var(--w,760px) * .05) / 0 0 calc(var(--w,760px) * .02) calc(var(--w,760px) * .02);
  background:linear-gradient(180deg,#D5D8DD,#A5A9B0 60%,#7E828A); box-shadow:0 40px 60px -30px rgba(8,10,16,.5); }
.dev-laptop__base i{ position:absolute; left:50%; top:0; translate:-50% 0; width:16%; height:45%; border-radius:0 0 99px 99px; background:rgba(0,0,0,.14); }
.ui-side{ display:flex; flex-direction:column; gap:3cqw; padding:2.4cqw 1.6cqw; background:var(--u-card); border-right:1px solid var(--u-line); }
.ui-logo{ font-size:1.25em; letter-spacing:-.03em; padding-left:.5cqw; }
.ui-side nav{ display:grid; gap:.4cqw; }
.ui-side nav > span{ display:flex; align-items:center; gap:.9cqw; padding:.9cqw 1cqw; border-radius:.9cqw; color:var(--u-dim); white-space:nowrap; font-size:.95em; }
.ui-side nav > span.on{ background:color-mix(in oklab, var(--u-acc) 11%, transparent); color:var(--u-acc); font-weight:600; }
.ui-side .ic{ width:1.2em; height:1.2em; }
.ui-btn{ display:inline-flex; align-items:center; gap:.7cqw; padding:1cqw 1.8cqw; border-radius:99px; background:var(--u-acc); color:#fff; font-weight:600; }

/* Mail: folders, the inbox, the open message. */
.app-mail{ --u-acc:#2F6BFF; }
.app-mail .ui-side > .ui-btn{ align-self:flex-start; }
.ui-side nav > span > em{ margin-left:auto; font-style:normal; font-size:.85em; font-variant-numeric:tabular-nums; }
.ui-inbox{ display:grid; grid-template-columns:42% 1fr; min-width:0; min-height:0; }
.ui-inbox__list{ display:flex; flex-direction:column; gap:.5cqw; padding:1.8cqw 1.2cqw; border-right:1px solid var(--u-line); min-width:0; overflow:hidden; }
.app-mail .ui-search{ gap:.8cqw; padding:1cqw 1.4cqw; margin-bottom:.8cqw; font-size:.92em; }
.app-mail .ui-search .ic{ width:1.1em; height:1.1em; }
.ui-msg{ display:grid; grid-template-columns:auto 1fr auto; column-gap:1cqw; row-gap:.3cqw; padding:1.2cqw 1.2cqw; border-radius:1.2cqw; min-width:0; }
.ui-msg.on{ background:color-mix(in oklab, var(--u-acc) 10%, transparent); }
.ui-msg > i, .ui-read__from > i{ grid-row:1 / span 3; display:grid; place-items:center; width:3.2cqw; height:3.2cqw; border-radius:50%; color:#fff; font-style:normal; font-size:.8em; font-weight:600; }
.ui-msg > b{ font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui-msg > small{ color:var(--u-dim); }
.ui-msg > strong, .ui-msg > span{ grid-column:2 / span 2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui-msg > strong{ font-weight:500; }
.ui-msg > span{ font-size:.88em; color:var(--u-dim); }
.ui-msg.new > b, .ui-msg.new > strong{ font-weight:600; }
.ui-msg.new > small{ color:var(--u-acc); font-weight:600; }
.ui-read{ display:flex; flex-direction:column; gap:1.5cqw; padding:2.4cqw 2.6cqw; min-width:0; background:var(--u-card); }
.ui-read__h{ font-size:1.55em; letter-spacing:-.03em; line-height:1.15; }
.ui-read__from{ display:grid; grid-template-columns:auto 1fr auto; column-gap:1cqw; align-items:center; }
.ui-read__from > i{ grid-row:auto; }
.ui-read__from > div{ display:grid; gap:.2cqw; }
.ui-read__body{ color:color-mix(in oklab, var(--u-ink) 82%, var(--u-bg)); line-height:1.45; }
.ui-read__body p{ margin:0 0 .9em; }
.ui-att{ align-self:flex-start; display:flex; align-items:center; gap:1cqw; padding:1cqw 1.6cqw 1cqw 1.2cqw; border-radius:1.1cqw; box-shadow:inset 0 0 0 1px var(--u-line); background:var(--u-bg); }
.ui-att > .ic{ color:var(--u-acc); }
.ui-att > div{ display:grid; gap:.2cqw; }
.ui-reply{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; padding:.9cqw .9cqw .9cqw 1.6cqw; border-radius:99px; box-shadow:inset 0 0 0 1px var(--u-line); color:var(--u-dim); }
.ui-reply > i{ display:grid; place-items:center; width:2.8cqw; height:2.8cqw; border-radius:50%; background:var(--u-acc); color:#fff; }
.ui-reply .ic{ width:1.1em; height:1.1em; }

@media (prefers-reduced-motion:reduce){
  .ui-scan__arc{ animation:none; }
}