@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/claude/media/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/claude/media/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/claude/media/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/claude/media/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/claude/media/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/claude/media/anton-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The connect page (the site's home page, /connect and /claude). Top: his logo, a dotted line to each app, the headline, two buttons. Then one row per app, the quick way beside
   the manual way. Bottom: what you can make. Phone first (400): the rows collapse until tapped. Wider from 900. */
:root{--ink:#141416;--muted:#55555c;--rust:#BC5530;--hl:#FFD400;--line:#e4e2dc;
  --anton:'Anton',Impact,'Arial Narrow',sans-serif;--inter:Inter,system-ui,-apple-system,sans-serif;
  --shadow:0 2px 0 rgba(20,20,22,.06),0 12px 26px rgba(20,20,22,.13)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;color:var(--ink);font-family:var(--inter);font-weight:500;-webkit-font-smoothing:antialiased;background:#EFEBE2}
.ground{position:fixed;inset:0;z-index:-2;background:#EFEBE2 var(--img-page) center/cover no-repeat}
.side{position:fixed;top:0;bottom:0;width:13px;z-index:-1;background:var(--img-side) left top/100% 100% no-repeat;pointer-events:none}
.side--l{left:0}
.side--r{right:0;transform:scaleX(-1)}
a{color:inherit}
button{font:inherit;color:inherit}

.bar{display:flex;align-items:center;justify-content:space-between;padding:12px 22px 4px;max-width:1080px;margin:0 auto}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font:900 19px/1 var(--inter);letter-spacing:-.04em;color:#141416}
.brand img{display:block;width:30px;height:30px}
.brand b{color:var(--rust);font-weight:900}
.bar__in{font-weight:800;font-size:15px;text-decoration:none;padding:10px 17px;color:#141416;background:var(--img-card) center/100% 100% no-repeat;filter:drop-shadow(0 2px 3px rgba(60,45,25,.28))}
.hero{display:flex;flex-direction:column;align-items:center;padding:2px 16px 0;text-align:center}
.tree{position:relative;width:340px;max-width:100%;height:124px}
.tree svg{position:absolute;inset:0;width:100%;height:118px}
.tile{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(20,20,22,.06),0 6px 14px rgba(20,20,22,.16)}
.tile img{display:block;width:36px;height:36px}
.tree .tile{position:absolute}
.tile--vx{left:50%;top:0;margin-left:-40px;width:80px;height:80px;border-radius:20px}
.tile--vx img{width:58px;height:58px}
.tile--l{left:18px;bottom:0}
.tile--r{right:18px;bottom:0}
h1{max-width:900px;margin:8px 0 0;font:400 clamp(33px,5vw,56px)/1.06 var(--anton);text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.word{display:inline-flex;align-items:center;gap:.16em;white-space:nowrap;padding:.05em .2em .02em .1em;margin:.06em .02em;background:var(--hl);transform:rotate(-1.6deg);box-shadow:0 .05em 0 rgba(16,18,21,.9),0 .15em .28em rgba(0,0,0,.2)}
.word--chatgpt{transform:rotate(1.2deg)}
.word i{display:grid;place-items:center;width:.82em;height:.82em;margin-top:-.04em;border-radius:.16em;background:#fff;font-style:normal;box-shadow:0 .02em .05em rgba(0,0,0,.25)}
.word img{display:block;width:.64em;height:.64em}
.sub{margin:9px 0 0;font-size:17px;line-height:1.5;color:#141416cc;font-weight:600;text-wrap:balance}
.free{display:inline-block;padding:.08em .3em .02em;margin-left:.08em;background:var(--hl);color:var(--ink);font:400 1.3em/1 var(--anton);text-transform:uppercase;letter-spacing:.02em;transform:rotate(-3deg);box-shadow:0 .08em 0 rgba(16,18,21,.9),0 .16em .3em rgba(0,0,0,.2)}
.free--big{font:inherit;padding:.06em .2em .01em;transform:rotate(-2deg);box-shadow:0 .05em 0 rgba(16,18,21,.9),0 .14em .28em rgba(0,0,0,.2)}
.adds{display:grid;grid-template-columns:minmax(0,1fr);gap:11px;width:100%;max-width:640px;margin-top:17px}
.add{display:flex;flex-direction:column;align-items:center;gap:5px}
.big{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;min-height:64px;padding:11px 16px;background:#fff;color:var(--ink);text-decoration:none;border-radius:16px;cursor:pointer;
  border:2.5px solid var(--ink);border-bottom-width:6px;font:400 24px/1 var(--anton);text-transform:uppercase;letter-spacing:.025em;transition:transform .08s}
.big img{display:block;width:34px;height:34px;flex:none}
.big:active{transform:translateY(3px)}
@media (hover:hover){.big:hover,.back:hover{background:#FFF8D6}.see:hover{transform:rotate(0)}}
.big:focus-visible,.cp:focus-visible,.see:focus-visible,.back:focus-visible,summary:focus-visible{outline:3px solid var(--rust);outline-offset:3px}
.done{font-size:13px;font-weight:700;color:#2F7A4C}
.mail{margin-top:10px;text-align:left}
.mail[hidden],.mail form[hidden],.mail__say[hidden],.mail__ask[hidden],#heromail[hidden]{display:none}
.mail__ask{margin:0;font-size:13px;line-height:1.3;font-weight:600;color:var(--muted)}
.mail__open{padding:0;border:0;background:none;color:var(--rust);font:700 13px/1.3 var(--inter);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.mail form{display:flex;gap:6px;margin-top:7px;max-width:380px}
.mail input{flex:1;min-width:0;height:40px;padding:0 10px;border:1.5px solid var(--ink);border-radius:9px;background:#fff;font:600 16px var(--inter);color:var(--ink)}
.mail form button{flex:none;height:40px;padding:0 14px;border:0;border-radius:9px;background:var(--ink);color:#fff;font:700 14px var(--inter);cursor:pointer}
.mail__say{margin:6px 0 0;font-size:13px;line-height:1.3;font-weight:600;color:var(--muted)}
.mail__say.ok{margin-top:0;color:#1f6b3f;font-weight:700}
.mail--hero{margin-top:11px;text-align:center}
.mail--hero form{margin-inline:auto}
.see{display:inline-flex;align-items:center;gap:.4em;margin-top:15px;padding:.5em .85em .42em;background:var(--ink);color:#fff;text-decoration:none;font:400 20px/1 var(--anton);text-transform:uppercase;letter-spacing:.03em;transform:rotate(-1.5deg);box-shadow:0 .28em .55em rgba(0,0,0,.28);transition:transform .1s}
.see b{font-weight:400;color:var(--ink);background:var(--hl);padding:.08em .22em .02em;margin-left:-.08em}
.see svg{width:.85em;height:.85em;flex:none}
.see:active{transform:rotate(-1.5deg) translateY(2px)}

/* one row per app */
.app{max-width:1180px;margin:26px auto 0;padding:0 16px;scroll-margin-top:10px}
summary{display:flex;align-items:center;gap:11px;padding-top:16px;border-top:2.5px solid var(--ink);list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
.tile--claude,.tile--chatgpt{width:46px;height:46px;border-radius:12px;flex:none}
summary .tile img{width:32px;height:32px}
h2{margin:0;font:400 clamp(25px,3vw,33px)/1.05 var(--anton);text-transform:uppercase;letter-spacing:.015em}
.chev{margin-left:auto;width:12px;height:12px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg);transition:transform .15s;flex:none}
details[open] .chev{transform:rotate(-135deg)}
.ways{display:grid;grid-template-columns:minmax(0,1fr);gap:34px;margin-top:13px}
/* the thin line between the two ways, fading out at its ends: across on a phone, down on a wider screen */
.manual{position:relative;min-width:0}
.manual::before{content:"";position:absolute;left:0;right:0;top:-17px;height:1.5px;background:linear-gradient(to right,transparent,#14141666 18%,#14141666 82%,transparent);pointer-events:none}
h3{margin:0 0 8px;font:800 12px/1 var(--inter);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.quick{display:flex;flex-direction:column}
.q1{margin:10px 0 0;font-size:14.5px;line-height:1.38;font-weight:600}
.steps{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:11px;margin:0;padding:0}
.step{display:flex;flex-direction:column;background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.step video{display:block;width:100%;height:auto;aspect-ratio:8/5;background:#1A1A18}
.step__t{position:relative;flex:1;padding:9px 11px 12px 45px}
.n{position:absolute;left:10px;top:9px;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:var(--hl);font:400 16px/1 var(--anton);box-shadow:0 0 0 2px var(--ink)}
h4{margin:0;font:400 17px/1.15 var(--anton);text-transform:uppercase;letter-spacing:.015em}
.step p{margin:3px 0 0;font-size:13px;line-height:1.34;color:var(--muted)}
.addr{display:flex;align-items:center;gap:6px;margin:7px 0 0 -34px;padding:3px 3px 3px 9px;border-radius:9px;box-shadow:inset 0 0 0 1.5px var(--ink);background:#fff}
.addr code{flex:1;min-width:0;font:600 10.2px/1.25 ui-monospace,Menlo,monospace}
.cp{flex:none;border:0;border-radius:7px;background:var(--ink);color:#fff;font:700 12px/1 var(--inter);padding:8px 10px;cursor:pointer;white-space:nowrap}
.cp.ok{background:#2F7A4C}
.ask{display:flex;flex-direction:column;gap:6px;margin-top:12px;padding:10px 12px;border-radius:13px;background:#ffffffc9;box-shadow:inset 0 0 0 1.5px #14141626}
.ask>span:first-child{font-size:13.5px;font-weight:700;color:var(--muted)}
.ask__box{display:flex;align-items:center;gap:8px;flex:1;justify-content:space-between}
.ask q{font-size:15px;font-weight:800;line-height:1.2;quotes:none}
.ask__help{margin:7px 0 0 12px;font-size:13px;font-weight:600;color:var(--muted)}

.make{max-width:1100px;margin:34px auto 0;padding:18px 16px 34px;border-top:2.5px solid var(--ink);text-align:center;scroll-margin-top:10px}
.make h2{margin-bottom:13px}
.types{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:0;padding:0}
.type{display:flex;flex-direction:column;gap:7px}
.type video{display:block;width:100%;height:auto;aspect-ratio:4/5;border-radius:12px;background:#E9E5DA;box-shadow:0 0 0 1px rgba(20,20,22,.06),0 9px 18px rgba(20,20,22,.2)}
.type b{font:400 16px/1.1 var(--anton);text-transform:uppercase;letter-spacing:.015em}
.backs{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin-top:20px}
.back{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:8px 14px;border-radius:12px;background:#fff;text-decoration:none;font:400 18px/1 var(--anton);text-transform:uppercase;letter-spacing:.02em;box-shadow:inset 0 0 0 2px var(--ink)}
.back img{width:24px;height:24px;display:block}

@media (max-width:899px){.side{display:none}.app{max-width:440px;margin-top:12px}.app summary{padding:11px 0}.make{max-width:440px}.ways{margin-top:8px}.ask{margin-bottom:6px}}
@media (min-width:560px){.adds{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media (min-width:900px){
  .chev{display:none}summary{cursor:default}
  .ways{grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:48px}
  .manual::before{left:-24px;right:auto;top:0;bottom:0;width:1.5px;height:auto;background:linear-gradient(to bottom,transparent,#14141666 16%,#14141666 84%,transparent)}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .ask{flex-direction:row;align-items:center;gap:14px}
  .ask__box{flex:0 1 auto;gap:14px}
  .types{grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
  .backs{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:600px;margin-inline:auto}
}
@media (min-width:1400px){.app{max-width:1260px}.ways{grid-template-columns:minmax(0,300px) minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.big,.chev{transition:none}}
.pop{width:min(340px,calc(100vw - 32px));border:2.5px solid var(--ink);border-radius:18px;padding:22px 18px 18px;background:#fff;color:var(--ink);text-align:center;box-shadow:0 5px 0 var(--ink)}
.pop::backdrop{background:rgba(20,20,22,.55)}
.pop h2{margin:0 26px 8px;font:400 28px/1.05 var(--anton);text-transform:uppercase}
.pop p{margin:0;font-size:15px;line-height:1.35;color:var(--muted)}
.pop__x{position:absolute;top:8px;right:10px;width:32px;height:32px;border:0;background:none;font-size:24px;line-height:1;color:var(--ink);cursor:pointer}
.mail--pop{margin-top:14px;text-align:center}
.mail--pop .mail__open{width:100%;height:48px;border-radius:12px;background:var(--rust);color:#fff;font:700 16px var(--inter);text-decoration:none}
.mail--pop form{margin-inline:auto}
.mail--pop .mail__say{font-size:15px}
/* the hero's two-line button: desktop reads as one line, with the big logo */
.under{display:none}
.big__t{display:inline}
.big__n{display:inline}
.big__n img{display:none}
/* phones only */
@media (max-width:899px){
  .adds{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .adds .big{min-height:84px;padding:9px 6px;gap:0}
  .adds .big>img{display:none}
  .big__t{display:flex;flex-direction:column;align-items:center;gap:5px}
  .big__to{font-size:18px;letter-spacing:.03em}
  .big__n{display:inline-flex;align-items:center;gap:6px;font-size:25px;white-space:nowrap}
  .big__n img{display:block;width:22px;height:22px}
  .see{display:none}
  .bar{padding-right:8px}
  .tree{display:none}
  .hero h1{margin-top:12px}
  .sub{margin-top:0}
  .under{display:block;width:40px;height:40px;margin:24px auto 12px;padding:6px;border-radius:11px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2)}
  .under img{display:block;width:28px;height:28px}
  .quick>.mail{display:none}
  main{display:flex;flex-direction:column}
  main>*{width:100%;margin-left:auto;margin-right:auto}
  .hero{order:1}
  .make{order:2;margin-top:18px}
  .app{order:3}
}
:root{--img-page:url(/claude/media/page.webp?v=aaa360704d);--img-side:url(/claude/media/side.webp?v=be193fc1e4);--img-card:url(/claude/media/card.webp?v=eb6e8b0bc2)}
.vxs{--ground:#EEF0F1; --ink:#141416; --muted:#55555c; --accent:#D97757; --accent-ink:#fff; --hl:#FFD400;
  --btn:#BC5530; --btn-d:#7d3416; --btn-ink:#fff;
  --head:'Anton',Impact,'Arial Narrow',sans-serif; --body:Inter,system-ui,-apple-system,sans-serif;
  --head-case:uppercase; --head-weight:400; --head-track:.01em; --head-size:1;
  --card-slice:14%; --card-w:18px; --radius:16px;
  --shadow:0 2px 0 rgba(20,20,22,.06),0 14px 30px rgba(20,20,22,.16);}
.vxs .h{margin:0 auto;max-width:760px;text-align:center;font-family:var(--head);font-weight:var(--head-weight);text-transform:var(--head-case);
  letter-spacing:var(--head-track);line-height:1.04;font-size:calc(34px * var(--head-size));text-wrap:balance}
.vxs .h__lead{display:inline}
.vxs .h__hot{display:inline-block;position:relative;margin:.08em .04em 0;padding:.08em .22em .02em;background:var(--hl);color:var(--ink);
  transform:rotate(-2deg);box-shadow:0 .05em 0 rgba(16,18,21,.9),0 .16em .3em rgba(0,0,0,.2)}
.vxs .chip:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.vxs .h--hero{font-size:calc(36px * var(--head-size))}
.vxs .stage{position:relative;width:min(60vw,300px);margin:18px auto 0}
.vxs .vx-hero{position:relative;aspect-ratio:9/16;overflow:hidden;cursor:pointer;background:#ddd;-webkit-tap-highlight-color:transparent}
.vxs .vx-hero canvas,.vxs .vx-hero__first{position:absolute;inset:0;width:100%;height:100%;display:block}
.vxs .sound{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:6px;padding:7px 11px 7px 8px;border:0;border-radius:999px;
  background:rgba(20,20,22,.78);color:#fff;font:800 13px/1 Inter,system-ui,sans-serif;cursor:pointer;
  animation:nudge 2.4s ease-in-out 1.2s 3}
.vxs .sound .spk{width:18px;height:18px}
.vxs .sound .spk__on{display:none}
.vxs .is-sound .sound .spk__on{display:inline}
.vxs .is-sound .sound .spk__off{display:none}
.vxs .is-sound .sound{animation:none;background:rgba(20,20,22,.5)}
.vxs .pick{margin-top:16px}
.vxs .chips{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;max-width:520px;margin:12px auto 0}
.vxs .chip{display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px 2px 7px;border:0;cursor:pointer;min-width:0;
  background:rgba(255,255,255,.88);border-radius:14px;box-shadow:0 2px 0 rgba(20,20,22,.08),0 6px 14px rgba(20,20,22,.12);
  font:800 12px/1 var(--body);color:var(--ink);transition:transform .12s}
.vxs .chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.vxs .chip img{width:38px;height:38px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.25)}
.vxs .chip[aria-pressed="true"]{background:var(--btn);color:var(--btn-ink);transform:translateY(-2px) rotate(-1deg);
  box-shadow:0 4px 0 var(--btn-d),0 10px 18px rgba(20,20,22,.22)}
@media (min-width:900px){.vxs .h{font-size:calc(52px * var(--head-size))}.vxs .h--hero{font-size:calc(64px * var(--head-size))}.vxs .stage{width:340px}.vxs .chips{max-width:640px;gap:10px}.vxs .chip{font-size:14px;padding:10px 4px}.vxs .chip img{width:46px;height:46px}}
.vxs{--ground:#ECE8DF;--ink:#121214;--muted:#3b3b40;--accent:#D21F1B;--hl:#FCCE28;--btn:#FCCE28;--btn-d:#121214;
  --btn-ink:#121214;--radius:0;--head-track:.005em;--card-slice:9%}
.vxs.vxs .h__hot{background:transparent;padding:.1em .3em .04em;box-shadow:none;transform:rotate(-1.5deg);z-index:0}
.vxs.vxs .h__hot::before{content:"";position:absolute;inset:0 -.12em;z-index:-1;background:var(--img-strip) center/100% 100% no-repeat}
.vxs.vxs .chip{background:var(--img-card) center/100% 100% no-repeat;border-radius:0;box-shadow:none;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.18));font:400 13px/1 var(--head);text-transform:uppercase;letter-spacing:.01em}
.vxs.vxs .chip img{border-radius:50%;filter:grayscale(1) contrast(1.2);box-shadow:0 0 0 2px #121214}
.vxs.vxs .chip[aria-pressed="true"]{background-image:var(--img-strip);color:#121214;box-shadow:none;
  filter:drop-shadow(0 4px 0 #121214)}
.vxs .stage{width:min(80vw,350px)}
.vxs.vxs .vx-hero{background:transparent;border-radius:0;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 92%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 92%,transparent);
  mask-composite:intersect}
.vxs .sound{left:14%;bottom:11%}
.vxs .stage{width:min(94vw,460px)}
.vxs .adnote{max-width:420px;margin:6px auto 0;font-size:12.5px;line-height:1.35;color:var(--muted);text-align:center}
.vxs .pick{margin-top:14px;position:relative;z-index:2}
.vxs .chips{margin-top:0}
.vxs .stage{margin-top:-26px;z-index:1}
.vxs.vxs .vx-hero{-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 13%,#000 93%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 13%,#000 93%,transparent)}
.vxs .chip{transition:transform .22s cubic-bezier(.34,1.8,.5,1),filter .2s}
.vxs .chip[aria-pressed="true"]{transform:translateY(-4px) scale(1.16);z-index:1}
.vxs .chip[aria-pressed="true"] img{transform:scale(1.06)}
.vxs .stage{--pw:clamp(196px,min(62vw,calc((100svh - 262px) / 2.04)),292px);width:auto;margin:16px auto 0;display:flex;justify-content:center}
.vxs .iph{position:relative;width:var(--pw);padding:calc(var(--pw) * .033);border-radius:calc(var(--pw) * .165);background:#09090a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 0 0 1.5px #55555b,0 0 0 3px #2a2a2e,0 0 0 3.6px #6e6e74,
  0 26px 40px -14px rgba(0,0,0,.55),0 10px 24px rgba(0,0,0,.18)}
.vxs .iph__btn{position:absolute;width:3px;border-radius:2px;background:linear-gradient(90deg,#3c3c41,#77777d,#3c3c41)}
.vxs .iph__scr{position:relative;container-type:inline-size;aspect-ratio:9/17.6;border-radius:calc(var(--pw) * .135);overflow:hidden;background:#000}
.vxs .iph .vx-hero{position:absolute;inset:0 0 auto 0;width:100%;background:#111}
.vxs.vxs .iph .vx-hero{-webkit-mask-image:none;mask-image:none;border-radius:0;background:#111}
.vxs .iph .sound{left:0;right:0;bottom:auto;top:22cqw;width:max-content;margin:auto;gap:1.4cqw;padding:1.8cqw 3.2cqw 1.8cqw 2.4cqw;
  font:700 3.6cqw/1 -apple-system,'SF Pro Text',Inter,system-ui,sans-serif;background:rgba(0,0,0,.55);backdrop-filter:blur(4px)}
.vxs .iph .sound .spk{width:4.4cqw;height:4.4cqw}
.vxs .ig{position:absolute;inset:0;pointer-events:none;color:#fff;font:500 3.5cqw/1.25 -apple-system,'SF Pro Text',Inter,system-ui,sans-serif;
  letter-spacing:-.01em;text-shadow:0 .2cqw .8cqw rgba(0,0,0,.35)}
.vxs .ig::before,.vxs .ig::after{content:"";position:absolute;left:0;right:0}
.vxs .ig::before{top:0;height:30cqw;background:linear-gradient(rgba(0,0,0,.42),transparent)}
.vxs .ig::after{top:118cqw;height:60cqw;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.vxs .ig>*{position:absolute;z-index:1}
.vxs .ig svg{display:block;flex:none}
.vxs .ig__status{top:0;left:0;right:0;height:11.5cqw;display:flex;align-items:center;justify-content:space-between;padding:0 6.4cqw 0 9.5cqw;
  font-size:4cqw;font-weight:650;letter-spacing:0}
.vxs .ig__island{position:absolute;left:50%;top:2.8cqw;width:28cqw;height:8cqw;margin-left:-14cqw;border-radius:5cqw;background:#000}
.vxs .ig__sys{display:flex;align-items:center;gap:1.3cqw}
.vxs .ig__sys svg{height:3.2cqw;width:auto}
.vxs .ig__sys .ig__batt{height:3.4cqw}
.vxs .ig__top{top:13cqw;left:4.4cqw;right:4.2cqw;display:flex;align-items:center;gap:.4cqw;font-size:5.6cqw;font-weight:700;letter-spacing:-.02em}
.vxs .ig__top>svg{width:4.6cqw;height:4.6cqw;margin-top:.6cqw}
.vxs .ig__cam{margin-left:auto}
.vxs .ig__cam svg{width:6.6cqw;height:6.6cqw}
.vxs .ig__rail{right:2.2cqw;bottom:33cqw;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;align-items:center;gap:3.6cqw;
  font-size:2.9cqw;font-weight:600}
.vxs .ig__rail li{display:flex;flex-direction:column;align-items:center;gap:.8cqw}
.vxs .ig__rail svg{width:7.2cqw;height:7.2cqw;filter:drop-shadow(0 .2cqw .6cqw rgba(0,0,0,.35))}
.vxs .ig__aud img{width:7cqw;height:7cqw;border-radius:1.8cqw;box-shadow:0 0 0 .5cqw #fff}
.vxs .ig__meta{left:3.6cqw;right:3.6cqw;bottom:20.4cqw}
.vxs .ig__who{display:flex;align-items:center;gap:2.2cqw}
.vxs .ig__av{width:8.6cqw;height:8.6cqw;border-radius:50%;box-shadow:0 0 0 .45cqw #fff}
.vxs .ig__who p{margin:0;display:flex;align-items:center;gap:1cqw;font-size:3.5cqw}
.vxs .ig__who b{font-weight:700}
.vxs .ig__tick{width:3.7cqw;height:3.7cqw}
.vxs .ig__fol{margin-left:1.4cqw;padding:.7cqw 2.2cqw .8cqw;border:.35cqw solid rgba(255,255,255,.8);border-radius:2cqw;font-size:3cqw;font-weight:600}
.vxs .ig__who .ig__spon{margin-top:.4cqw;font-size:2.9cqw;opacity:.92}
.vxs .ig__cap{margin:2.2cqw 15cqw 0 0;font-size:3.3cqw;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vxs .ig__cap span{opacity:.75}
.vxs .ig__cta{margin-top:2.6cqw;display:flex;align-items:center;justify-content:space-between;padding:2.2cqw 3cqw;border-radius:2.2cqw;
  background:rgba(255,255,255,.2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:3.5cqw;font-weight:650;text-shadow:none}
.vxs .ig__go{width:4.2cqw;height:4.2cqw;transform:rotate(-90deg)}
.vxs .ig__nav{left:0;right:0;bottom:0;height:17.8cqw;background:#000;display:flex;justify-content:space-around;align-items:flex-start;padding:2.6cqw 2cqw 0}
.vxs .ig__nav svg{width:6.6cqw;height:6.6cqw;opacity:.92}
.vxs .ig__nav svg.is-on{opacity:1}
.vxs .ig__me{width:6.6cqw;height:6.6cqw;border-radius:50%;background:radial-gradient(circle at 50% 38%,#e9c3a2 0 28%,#7a5238 30% 100%);
  box-shadow:0 0 0 .45cqw #000,0 0 0 .8cqw #fff}
.vxs .ig__bar{left:50%;bottom:1.6cqw;width:34cqw;height:1.2cqw;margin-left:-17cqw;border-radius:1cqw;background:#fff}
.vxs .stage{position:relative}
.vxs .forc{position:absolute;left:calc(50% + var(--pw) / 2 + 8px);top:30%;width:min(118px,calc(50% - var(--pw) / 2 - 12px));margin:0;
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;font:800 11.5px/1.15 Inter,system-ui,sans-serif;letter-spacing:-.01em;
  color:#141416;text-align:left;pointer-events:none}
.vxs .forc img{width:28px;height:28px;border-radius:8px;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.vxs .forc span{background:#fff;padding:4px 7px 5px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.14);transform:rotate(-3deg)}
.vxs .forc__arr{width:36px;height:28px;margin:-2px 0 0 -10px;color:#141416}
.vxs .adnote{max-width:300px;margin:12px auto 0;font-size:10.5px;line-height:1.3;opacity:.85}
@media (min-width:900px){.vxs .forc{font-size:14px;width:150px;top:34%}.vxs .forc img{width:36px;height:36px}.vxs .forc__arr{width:48px;height:36px}}
.vxs{--img-page:url(/explainer/media/theme/vox/page.webp?v=92da2d34ad);--img-card:url(/explainer/media/theme/vox/card.webp?v=c233cb468c);--img-tall:url(/explainer/media/theme/vox/tall.webp?v=ea828c25c9);--img-strip:url(/explainer/media/theme/vox/strip.webp?v=be64204470);--img-disc:url(/explainer/media/theme/vox/disc.webp?v=53c6cc9701);--img-edge:url(/explainer/media/theme/vox/edge.webp?v=9c5714995c);--img-edge2:url(/explainer/media/theme/vox/edge2.webp?v=363bd62e33);--img-side:url(/explainer/media/theme/vox/side.webp?v=af436073f8);--img-backer:url(/explainer/media/theme/vox/backer.webp?v=7e55d0d5da);--img-band:url(/explainer/media/theme/vox/band.webp?v=6166fed506);--img-arrow:url(/explainer/media/theme/vox/arrow.webp?v=9ec2736601);--img-ring:url(/explainer/media/theme/vox/ring.webp?v=372c04f884);--img-sheet:url(/explainer/media/theme/vox/sheet.webp?v=478850e854);--img-tear:url(/explainer/media/theme/vox/tear.webp?v=d1a95bf657);--img-tear2:url(/explainer/media/theme/vox/tear2.webp?v=0caf4a0a40)}
/* The section around the explainer page's iPhone, and the very bottom of the page. The iPhone and the chips themselves come from explainer.css, through phone_css in build.py. */
.vxs{max-width:1080px;margin:44px auto 0;padding:34px 16px 0;border-top:2.5px solid var(--ink);--head:var(--anton);--head-case:uppercase;--head-weight:400;--head-track:.005em;--head-size:1;
  --body:var(--inter)}
.vxs .h--hero{color:var(--ink)}
.vxs .pick{margin-top:14px}
.vxs .chips{margin-top:10px}
.vxs .adnote{max-width:300px;margin:12px auto 0;font-size:10.5px;line-height:1.3;opacity:.85;text-align:center}
.nochat{max-width:560px;margin:46px auto 0;padding:0 16px 56px;text-align:center}
.nochat h2{margin:0 0 14px;font:400 30px/1.1 var(--anton);text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.big--site{max-width:420px;margin:0 auto;text-decoration:none}
@media (min-width:900px){.nochat h2{font-size:38px}}
/* a phone stacks the page by order (claude.css): these two stay last there too */
.vxs{order:4}
.nochat{order:5}