.sup-page{--sup-page:var(--clr-bg-page,oklch(97.4% .005 117.64));--sup-surface:var(--clr-bg-surface,oklch(94.7% .008 114.05));--sup-hover:var(--clr-bg-hover,oklch(85.2% .007 115.54));--sup-ink:var(--clr-text-default,oklch(22.5% .002 145.3));--sup-muted:var(--clr-text-muted,oklch(40.5% .003 106.39));--sup-line:var(--clr-border-default,oklch(85.2% .007 115.54));--sup-brand:var(--clr-brand,hsl(225 72% 46%));--sup-accent:var(--clr-link,hsl(225 72% 46%));--sup-card:color-mix(in oklab,var(--sup-surface) 45%,var(--sup-page));--sup-tint:color-mix(in oklab,var(--sup-accent) 14%,transparent);--sup-amber-bg:oklch(90% .09 88);--sup-amber-ink:oklch(35% .08 75);--sup-green-bg:oklch(90% .08 150);--sup-green-ink:oklch(36% .09 150);--sup-note-bg:var(--clr-bg-callout-note,oklch(97.7% .013 236.62));--sup-note-line:var(--clr-border-callout-note,oklch(74.6% .16 232.661));--sup-note-ink:var(--clr-text-callout-note,oklch(39.1% .09 240.876));--sup-sans:var(--font-inter,"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);--sup-mono:var(--font-code,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);--sup-shadow:0 1px 2px hsl(0 0% 0% / .05),0 10px 30px -14px hsl(0 0% 0% / .25);--sup-r:14px;color:var(--sup-ink);font-family:var(--sup-sans);font-size:16px;line-height:1.6;max-width:1120px;margin:0 auto;overflow-wrap:anywhere}
:root[data-theme="dark"] .sup-page{--sup-amber-bg:oklch(42% .08 88);--sup-amber-ink:oklch(93% .06 90);--sup-green-bg:oklch(36% .07 150);--sup-green-ink:oklch(90% .09 150);--sup-shadow:0 1px 2px hsl(0 0% 0% / .3),0 18px 40px -18px hsl(0 0% 0% / .7)}
.sup-page *{box-sizing:border-box}
.sup-page img{max-width:100%;height:auto;display:block}
.sup-page a{color:inherit;text-decoration:none}
.sup-page section{margin:0}
.sup-page ul,.sup-page ol{list-style:none;margin:0;padding:0}
.sup-page li{margin:0}
.sup-page p{margin:0}
.sup-ic{width:20px;height:20px;flex:none}
.sup-ic.sm{width:15px;height:15px}
.sup-ic.xs{width:14px;height:14px}

/* Hero */
.sup-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding:22px 18px 30px;margin:0 0 24px;background:var(--sup-surface);border:1px solid var(--sup-line);border-radius:18px 18px clamp(56px,9vw,112px) 18px}
.sup-hero:before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(color-mix(in oklab,var(--sup-ink) 16%,transparent) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 80% 45%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 70% 80% at 80% 45%,#000 15%,transparent 72%)}
.sup-hero:after{content:"";position:absolute;z-index:-1;width:560px;height:560px;right:-160px;top:-120px;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--sup-brand) 42%,transparent),transparent 64%)}
.sup-hero-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.sup-crumbs{font-family:var(--sup-mono);font-size:12px;color:var(--sup-muted);margin:0 0 22px;display:flex;flex-wrap:wrap;gap:6px}
.sup-crumbs a:hover{color:var(--sup-ink)}
.sup-crumbs b{font-weight:400;opacity:.5}
.sup-crumbs span{color:var(--sup-ink)}
.sup-eyebrow{display:block;font-family:var(--sup-mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sup-accent);margin:0 0 14px}
.sup-page .sup-h1{font-size:clamp(2.1rem,1.1rem + 3.8vw,4.1rem);font-weight:800;line-height:1.02;letter-spacing:-.045em;margin:0 0 16px;color:var(--sup-ink)}
.sup-h1 span{display:block;color:var(--sup-muted)}
.sup-lede{font-size:17px;max-width:46ch;color:var(--sup-ink);margin:0 0 18px}
.sup-page .sup-lede{margin:0 0 18px}
.sup-chips{display:flex;flex-wrap:wrap;gap:6px 20px;margin:0 0 24px}
.sup-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--sup-mono);font-size:12.5px;color:var(--sup-muted)}
.sup-chip .sup-ic{color:var(--sup-accent)}
.sup-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:320px;color:var(--sup-accent)}
.sup-orbit{position:absolute;width:min(112%,470px);height:auto;left:50%;top:50%;transform:translate(-50%,-50%);animation:sup-spin 80s linear infinite}
@keyframes sup-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.sup-stage img{position:relative;max-height:450px;width:auto;filter:drop-shadow(0 30px 40px hsl(0 0% 0% / .35))}

/* Tiles */
.sup-tiles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;width:100%}
.sup-tile{position:relative;background:var(--sup-card);border:1px solid var(--sup-line);border-radius:var(--sup-r);padding:14px 14px 13px;box-shadow:var(--sup-shadow);transition:border-color .2s,transform .2s}
.sup-tile:hover{border-color:color-mix(in oklab,var(--sup-accent) 60%,var(--sup-line));transform:translateY(-2px)}
.sup-ic.tile{width:36px;height:36px;padding:8px;border-radius:10px;background:var(--sup-tint);color:var(--sup-accent);margin:0 0 10px}
.sup-tile-label{font-family:var(--sup-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--sup-muted)}
.sup-tile-value{font-size:clamp(22px,1rem + 1.2vw,28px);font-weight:800;letter-spacing:-.035em;line-height:1.15;margin:3px 0 2px}
.sup-tile-sub{font-size:13px;color:var(--sup-muted);line-height:1.4}
.sup-tba{font-size:14px;font-weight:500;font-style:italic;letter-spacing:0;color:var(--sup-muted)}
.sup-tile-value .sup-tba{font-size:15px}

/* Note and quick facts */
.sup-split{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start;margin:0 0 8px}
.sup-note{display:flex;gap:14px;align-items:flex-start;background:var(--sup-note-bg);border:1px solid var(--sup-note-line);color:var(--sup-note-ink);border-radius:var(--sup-r);padding:18px 20px;margin:0 0 8px}
.sup-split .sup-note{margin:0}
.sup-ic.note{width:38px;height:38px;padding:8px;border-radius:50%;background:color-mix(in oklab,var(--sup-note-line) 22%,transparent)}
.sup-note strong{display:block;font-size:16px;margin:0 0 3px}
.sup-note p{font-size:15px;line-height:1.55}
.sup-facts{background:var(--sup-card);border:1px solid var(--sup-line);border-radius:var(--sup-r);padding:16px 20px 8px;box-shadow:var(--sup-shadow)}
.sup-facts dl{margin:8px 0 0}
.sup-facts div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px dashed var(--sup-line);font-size:14.5px}
.sup-facts div:first-child{border-top:0}
.sup-facts dt{color:var(--sup-muted)}
.sup-facts dd{margin:0;font-weight:600;text-align:right}

/* Section headings */
.sup-head{margin:46px 0 16px}
.sup-kicker{display:block;font-family:var(--sup-mono);font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--sup-muted)}
.sup-page .sup-h2{font-size:clamp(1.5rem,1.1rem + 1.3vw,2.1rem);font-weight:800;letter-spacing:-.035em;line-height:1.15;margin:4px 0 0;color:var(--sup-ink)}
.sup-intro{max-width:72ch}
.sup-intro p,.sup-close p{margin:0 0 12px;font-size:16.5px}
.sup-intro a,.sup-close a{color:var(--sup-accent);text-decoration:underline}

/* Spec sheet */
.sup-sheet{border:1px solid var(--sup-line);border-radius:16px;overflow:hidden;background:var(--sup-card);box-shadow:var(--sup-shadow)}
.sup-cat{display:grid;grid-template-columns:200px minmax(0,1fr);border-top:1px solid var(--sup-line)}
.sup-cat:first-child{border-top:0}
.sup-cat-name{display:flex;align-items:center;gap:11px;align-self:stretch;padding:14px 16px;background:color-mix(in oklab,var(--sup-surface) 70%,transparent);font-weight:700;font-size:15px;letter-spacing:-.01em}
.sup-ic.cat{width:32px;height:32px;padding:7px;border-radius:9px;background:var(--sup-tint);color:var(--sup-accent)}
.sup-page .sup-cat table{width:100%;border-collapse:collapse;margin:0;border:0;background:none}
.sup-page .sup-cat th,.sup-page .sup-cat td{text-align:left;vertical-align:top;padding:12px 18px;border:0;border-top:1px solid var(--sup-line);font-size:15px;background:none;line-height:1.5}
.sup-page .sup-cat tr:first-child th,.sup-page .sup-cat tr:first-child td{border-top:0}
.sup-page .sup-cat th{width:34%;font-weight:500;color:var(--sup-muted)}
.sup-page .sup-cat td{font-weight:500}
.sup-cat tr{transition:background .15s}
.sup-cat tr:hover{background:color-mix(in oklab,var(--sup-hover) 35%,transparent)}
.sup-updated{display:flex;align-items:center;gap:7px;font-family:var(--sup-mono);font-size:12px;color:var(--sup-muted);margin:14px 0 0}
.sup-page .sup-updated{margin:14px 0 0}

/* Other phones */
.sup-mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
.sup-mini-card{display:flex;flex-direction:column;gap:2px;background:var(--sup-card);border:1px solid var(--sup-line);border-radius:var(--sup-r);padding:10px 10px 12px;transition:border-color .2s,transform .2s}
.sup-mini-card:hover{border-color:var(--sup-accent);transform:translateY(-3px)}
.sup-mini-img{display:flex;justify-content:center;border-radius:10px;padding:6px;margin:0 0 6px;background:radial-gradient(circle at 50% 55%,var(--sup-tint),transparent 70%),var(--sup-surface)}
.sup-mini-img img{height:118px;width:auto}
.sup-mini-card strong{font-size:15px;letter-spacing:-.01em}
.sup-mini-card small{font-family:var(--sup-mono);font-size:11.5px;color:var(--sup-muted)}
.sup-close{margin:40px 0 0;padding:20px 22px 10px;border:1px solid var(--sup-line);border-radius:var(--sup-r);background:linear-gradient(135deg,var(--sup-tint),transparent 60%),var(--sup-card)}

/* Hub */
.sup-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:520px;border:1px solid var(--sup-line);border-radius:var(--sup-r);background:color-mix(in oklab,var(--sup-page) 55%,transparent)}
.sup-stats div{padding:14px 16px;border-left:1px solid var(--sup-line)}
.sup-stats div:first-child{border-left:0}
.sup-stats strong{display:block;font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1.1}
.sup-stats span{font-family:var(--sup-mono);font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--sup-muted)}
.sup-float{position:absolute;z-index:2;display:flex;flex-direction:column;gap:1px;padding:9px 13px;border-radius:12px;border:1px solid var(--sup-line);background:color-mix(in oklab,var(--sup-card) 82%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--sup-shadow);color:var(--sup-ink)}
.sup-float strong{font-size:13.5px;letter-spacing:-.01em}
.sup-float span{font-family:var(--sup-mono);font-size:11px;color:var(--sup-muted)}
.sup-float.p0{top:36%;left:0}.sup-float.p1{top:44%;right:0}.sup-float.p2{bottom:12%;left:4%}
.sup-timeline{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:4px 0 0 22px}
.sup-timeline:before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:2px;background:linear-gradient(var(--sup-accent),color-mix(in oklab,var(--sup-accent) 10%,transparent))}
.sup-timeline li{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 0 18px}
.sup-node{position:absolute;left:-22px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--sup-page);border:3px solid var(--sup-accent);box-shadow:0 0 0 4px var(--sup-tint)}
.sup-when{flex-basis:100%;font-family:var(--sup-mono);font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--sup-muted)}
.sup-timeline a{font-size:15px;font-weight:600;color:var(--sup-ink);text-decoration:none;border-bottom:1px solid var(--sup-line);transition:border-color .2s,color .2s}
.sup-timeline a:hover{border-color:var(--sup-accent);color:var(--sup-accent)}
.sup-series{display:flex;align-items:center;gap:12px;margin:48px 0 16px}
.sup-series .sup-h2{margin:0}
.sup-count{margin-left:auto;font-family:var(--sup-mono);font-size:12px;color:var(--sup-muted);white-space:nowrap}
.sup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.sup-card{display:flex;flex-direction:column;overflow:hidden;background:var(--sup-card);border:1px solid var(--sup-line);border-radius:16px;box-shadow:var(--sup-shadow);transition:border-color .2s,transform .25s}
.sup-card:hover{border-color:var(--sup-accent);transform:translateY(-4px)}
.sup-card-img{position:relative;display:flex;justify-content:center;padding:18px 12px 10px;border-bottom:1px solid var(--sup-line);background:radial-gradient(circle at 50% 60%,color-mix(in oklab,var(--sup-brand) 26%,transparent),transparent 62%),radial-gradient(color-mix(in oklab,var(--sup-ink) 12%,transparent) 1px,transparent 1.3px) 0 0/18px 18px,var(--sup-surface)}
.sup-card-img img{height:200px;width:auto;transition:transform .35s}
.sup-card:hover .sup-card-img img{transform:scale(1.04) translateY(-3px)}
.sup-pill{position:absolute;top:12px;left:14px;font-family:var(--sup-mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sup-accent)}
.sup-pill.is-muted{position:static;color:var(--sup-muted)}
.sup-card-body{display:flex;flex-direction:column;flex:1;padding:14px 16px 14px}
.sup-card-name{font-size:20px;font-weight:800;letter-spacing:-.03em;line-height:1.2}
.sup-card-when{display:flex;align-items:center;gap:6px;font-family:var(--sup-mono);font-size:12px;color:var(--sup-muted);margin:4px 0 12px}
.sup-card ul{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.sup-card li{display:flex;gap:8px;font-size:14px;line-height:1.45}
.sup-card li .sup-ic{margin-top:3px;color:oklch(66% .15 150)}
.sup-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1px dashed var(--sup-line);font-size:14px;font-weight:700}
.sup-go{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--sup-brand);color:#fff;transition:transform .2s}
.sup-card:hover .sup-go{transform:translateX(3px)}
.sup-works{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:0 0 18px}
.sup-work{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px dashed var(--sup-line);border-radius:var(--sup-r);background:var(--sup-card)}
.sup-work .sup-ic{margin:0 0 4px}
.sup-work strong{font-size:17px;letter-spacing:-.02em}
.sup-work p{font-size:14.5px;color:var(--sup-muted);margin:0 0 6px}
.sup-page .sup-work p{margin:0 0 6px}

@media (min-width:640px){.sup-hero{padding:28px 30px 36px}.sup-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}.sup-timeline{grid-template-columns:repeat(5,minmax(0,1fr));padding:4px 0 0}.sup-timeline:before{left:7px;right:7px;top:10px;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,var(--sup-accent),color-mix(in oklab,var(--sup-accent) 15%,transparent))}.sup-timeline li{flex-direction:column;align-items:flex-start;padding:30px 12px 0 0}.sup-node{left:0;top:4px}.sup-when{flex-basis:auto}}
@media (min-width:900px){.sup-hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;padding:36px 44px 44px}.sup-hero.is-hub{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}.sup-tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.sup-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:640px){.sup-cat{grid-template-columns:minmax(0,1fr)}.sup-cat-name{padding:11px 14px}.sup-page .sup-cat th,.sup-page .sup-cat td{padding:10px 14px}.sup-page .sup-cat th{width:42%}.sup-stage{min-height:280px}.sup-stage img{max-height:330px}.sup-stats strong{font-size:24px}.sup-stats div{padding:12px}}
@media (prefers-reduced-motion:reduce){.sup-orbit{animation:none}}
.sup-page .sup-hero{margin:0 0 24px}
.sup-page .sup-timeline{padding:4px 0 0 22px}
@media (min-width:640px){.sup-page .sup-timeline{padding:4px 0 0}}

/* WordPress page shell, placeholders and the extra sections */
.sup-shell{padding:16px 16px 40px}
@media (min-width:900px){.sup-shell{padding:28px 24px 48px}}
.sup-noimg{display:flex;align-items:center;justify-content:center;width:120px;aspect-ratio:4/5;border-radius:18px;border:1px dashed var(--sup-line);color:var(--sup-muted)}
.sup-noimg .sup-ic{width:40px;height:40px}
.sup-mini-img .sup-noimg{width:auto;height:118px}
.sup-page .sup-card-name{margin:0;font-size:20px;font-weight:800;letter-spacing:-.03em;line-height:1.2;color:var(--sup-ink)}
.sup-all{margin:16px 0 0}
.sup-page .sup-all{margin:16px 0 0}
.sup-all a{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--sup-accent)}
.sup-all a:hover .sup-ic{transform:translateX(3px)}
.sup-all .sup-ic{transition:transform .2s}
.sup-faq{display:grid;gap:10px;max-width:820px}
.sup-qa{border:1px solid var(--sup-line);border-radius:var(--sup-r);background:var(--sup-card);transition:border-color .2s}
.sup-qa[open]{border-color:color-mix(in oklab,var(--sup-accent) 50%,var(--sup-line))}
.sup-qa summary{display:flex;align-items:center;gap:10px;padding:14px 18px;font-weight:700;font-size:16px;cursor:pointer;list-style:none}
.sup-qa summary::-webkit-details-marker{display:none}
.sup-qa summary .sup-ic{color:var(--sup-accent)}
.sup-qa summary:after{content:"+";margin-left:auto;font-family:var(--sup-mono);font-size:18px;color:var(--sup-muted)}
.sup-qa[open] summary:after{content:"-"}
.sup-page .sup-qa p{margin:0;padding:0 18px 16px 43px;font-size:15.5px;color:var(--sup-ink)}
.sup-news{display:grid;gap:8px;max-width:820px}
.sup-news a{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border:1px solid var(--sup-line);border-radius:var(--sup-r);background:var(--sup-card);transition:border-color .2s,transform .2s}
.sup-news a:hover{border-color:var(--sup-accent);transform:translateX(3px)}
.sup-news .sup-ic{margin-top:4px;color:var(--sup-accent)}
.sup-news strong{display:block;font-size:15.5px;line-height:1.4;letter-spacing:-.01em}
.sup-news small{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:3px;font-family:var(--sup-mono);font-size:11.5px;color:var(--sup-muted)}
.sup-news-tag{color:var(--sup-accent)}
.sup-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.sup-tool{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--sup-line);border-radius:var(--sup-r);background:linear-gradient(135deg,var(--sup-tint),transparent 65%),var(--sup-card);box-shadow:var(--sup-shadow);transition:border-color .2s,transform .2s}
.sup-tool:hover{border-color:var(--sup-accent);transform:translateY(-2px)}
.sup-tool .sup-ic.tile{margin:0}
.sup-tool strong{display:block;font-size:16px;letter-spacing:-.01em}
.sup-tool small{display:block;font-size:13.5px;line-height:1.45;color:var(--sup-muted)}
.sup-tool-go{margin-left:auto;color:var(--sup-accent);transition:transform .2s}
.sup-tool:hover .sup-tool-go{transform:translateX(3px)}
.sup-page .sup-intro ul{list-style:disc;padding-left:1.3em;margin:0 0 12px}
.sup-page .sup-intro ol{list-style:decimal;padding-left:1.3em;margin:0 0 12px}
.sup-page .sup-intro li{margin:0 0 4px}
.sup-page .sup-intro h3{font-size:1.2rem;margin:20px 0 8px}
.sup-page .sup-intro img{border-radius:12px;margin:12px 0}
.sup-main .comments{margin-top:8px}
/* Leaked renders: wide photos with front and back, shown whole instead of as cut-out devices. */
.sup-stage.has-photo{flex-wrap:wrap;align-content:center;gap:10px}
.sup-stage img.sup-photo{width:100%;height:auto;max-height:none;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1px solid var(--sup-line);box-shadow:var(--sup-shadow);filter:none}
.sup-stage.has-photo .sup-float{position:static}
.sup-card-img:has(.sup-photo){align-items:center;min-height:229px}
.sup-card-img img.sup-photo{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:10px}
.sup-mini-img:has(.sup-photo){align-items:center;min-height:130px}
.sup-mini-img img.sup-photo{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px}