/* Circles 2027 case study: layered sections (inc/case-study-c27-layers.php, js/case-study-c27-layers.js).
   --s is how far the stack has pulled apart (0 to 1), --q is progress through the pinned section. */
.c27x .xl{--s:0;--q:0;--ar:1.6;position:relative;margin-top:clamp(100px,10vw,160px)}
.c27x .xl-pin{position:relative}
.c27x .xl-sticky{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,4vw,88px);align-items:center;padding:clamp(56px,6vw,96px) 0}
.c27x .xl h2{font:600 clamp(36px,3.8vw,64px)/1.02 Gilroy,sans-serif;letter-spacing:-.02em;margin:14px 0 0}
.c27x .xl .lead{font-size:17px;line-height:1.6;margin:18px 0 0;max-width:440px;opacity:.75}

/* Steps: the active one opens and its layer lifts. */
.c27x .xl-steps{list-style:none;margin:34px 0 0;padding:0;counter-reset:none}
.c27x .xl-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);padding:14px 0;border-top:1px solid currentColor;border-color:rgba(127,127,127,.25);opacity:.42;transition:opacity .35s}
.c27x .xl-steps li .mono{padding-top:4px}
.c27x .xl-steps li b{display:block;font:600 18px/1.3 Gilroy,sans-serif}
.c27x .xl-steps li p{margin:0;font-size:15px;line-height:1.55;opacity:.8;display:grid;grid-template-rows:0fr;max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.2,.7,.2,1),margin .45s}
.c27x .xl-steps li.on{opacity:1}
.c27x .xl-steps li.on p{max-height:90px;margin-top:6px}
.c27x .xl-steps li.on .mono{color:var(--red)}
.c27x .xl-bar{height:2px;margin-top:22px;background:rgba(127,127,127,.22);border-radius:2px;overflow:hidden}
.c27x .xl-bar i{display:block;height:100%;width:calc(var(--q) * 100%);background:var(--red)}
.c27x .xl-chip{display:inline-flex;gap:10px;align-items:center;margin-top:24px;padding:12px 20px;border-radius:999px;background:var(--stage);color:#fff;font:600 15px/1 Gilroy,sans-serif;text-decoration:none;transition:transform .25s}
.c27x .xl-chip:hover{transform:translateY(-2px)}
.c27x .xl-chip span{color:#FF8A73}

/* Stage: every layer sits at its x/y, then moves by dx/dy (in stage widths), z (depth) and a turn. */
.c27x .xl-stage{container-type:inline-size;perspective:2400px}
.c27x .xl-set{position:relative;aspect-ratio:var(--ar);width:min(100%,calc((100vh - 200px) * var(--ar)));margin:0 auto;transform-style:preserve-3d}
.c27x .xl-l{--lift:0;position:absolute;left:var(--x);top:var(--y);width:var(--w);
	transform:translate3d(calc(var(--dx) * var(--s) * 1cqw),calc(var(--dy) * var(--s) * 1cqw),calc((var(--z) * var(--s) + var(--lift)) * 1px)) rotate(calc((var(--r0) + (var(--r1) - var(--r0)) * var(--s)) * 1deg)) scale(calc(1 + var(--lift) / 600));
	transition:opacity .4s,filter .4s,box-shadow .4s}
.c27x .xl-l.hot{--lift:36;z-index:5}
.c27x .xl.stepping .xl-l:not(.hot){opacity:.5}
.c27x .xl-l img{display:block;width:100%;height:100%;object-fit:cover}
.c27x .xl-l .tag{position:absolute;left:12px;top:12px;padding:5px 9px;border-radius:6px;background:var(--stage);color:#fff;font-size:10px;letter-spacing:.14em;opacity:calc(var(--s) * 1.4 - .2)}

/* 1. Type: an exploded view. The layers sit on top of each other as the poster, then tilt up and part. */
.c27x .xl-paper{width:var(--box);margin-inline:calc(50% - var(--box) / 2);background:var(--paper);color:var(--stage);border-radius:clamp(20px,2vw,32px);padding-inline:clamp(24px,5vw,96px)}
.c27x .xl-iso{--ar:1.5}
.c27x .xl-iso .xl-set{transform:rotateX(calc(var(--s) * 54deg)) rotateZ(calc(var(--s) * -34deg)) scale(calc(1 - var(--s) * .16));width:min(100%,calc((100vh - 220px) * var(--ar)))}
.c27x .xl-iso .xl-l{height:100%;border-radius:18px}
.c27x .xl-iso .xl-l.hot{--lift:60}
.c27x .xl-iso .base{background:var(--stage);box-shadow:0 30px 60px rgba(11,11,13,calc(var(--s) * .35))}
.c27x .xl-iso .glass{background:rgba(255,255,255,calc(var(--s) * .5));border:1px solid rgba(209,58,30,calc(var(--s) * .55));box-shadow:0 20px 40px rgba(11,11,13,calc(var(--s) * .12))}
.c27x .xl .lk{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqw}
.c27x .xl .lk b{font:700 13.5cqw/.9 C27,Gilroy,sans-serif;color:#fff}
.c27x .xl .lk i{font:200 9cqw/.9 C27,Gilroy,sans-serif;font-style:normal;color:#FF6A4D}
.c27x .xl .kern{position:absolute;left:8%;right:8%;top:16%;display:flex;align-items:center;justify-content:center;gap:0}
.c27x .xl .kern span{font:700 12cqw/1 C27,sans-serif;color:transparent;-webkit-text-stroke:1.5px #D13A1E}
.c27x .xl .kern em{width:2.6cqw;height:10cqw;margin:0 .6cqw;background:repeating-linear-gradient(90deg,rgba(209,58,30,.55) 0 1px,transparent 1px 6px);border-inline:1px solid #D13A1E}
.c27x .xl .wt{position:absolute;right:7%;bottom:9%;display:flex;align-items:baseline;gap:2cqw}
.c27x .xl .wt b,.c27x .xl .wt i{font:700 9cqw/1 C27,sans-serif;color:transparent;-webkit-text-stroke:1.5px #D13A1E;font-style:normal}
.c27x .xl .wt i{font-weight:200}
.c27x .xl .wt .mono{font-size:10px;color:#D13A1E}
.c27x .xl .sws{position:absolute;left:7%;bottom:10%;display:flex;gap:1.4cqw}
.c27x .xl .sws i{width:6cqw;height:6cqw;border-radius:50%;background:var(--c);border:1px solid rgba(209,58,30,.6)}

/* 2. AI: a deck that deals itself out in order. */
.c27x .xl-white{max-width:1440px;margin-left:auto;margin-right:auto}
.c27x .xl-fan{--ar:2}
.c27x .xl-fan .card{aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 18px 44px rgba(11,11,13,.18)}
.c27x .xl-fan .brief{background:var(--paper);padding:1.6cqw;font-size:clamp(11px,1.15cqw,15px);line-height:1.45;color:var(--stage)}
.c27x .xl-fan .brief .mono{display:block;font-size:10px;color:var(--red);margin-bottom:1cqw}
.c27x .xl-fan .brief p{margin:0 0 .8cqw;font-family:"Geist Mono",monospace}
.c27x .xl-fan .brief .no{color:var(--red)}
.c27x .xl-fan .cut img{filter:grayscale(1) contrast(.9);opacity:.6}
.c27x .xl-fan .cut:after{content:"";position:absolute;left:-10%;right:-10%;top:50%;height:2px;background:var(--red);transform:rotate(-24deg);opacity:var(--s)}
.c27x .xl-fan .kept{outline:3px solid var(--red);outline-offset:-3px}
.c27x .xl-fan .kept .tag,.c27x .xl-fan .graded .tag{background:var(--red)}

/* 3. Social: a phone with its posts and alerts flying out around it, on the red. */
.c27x .xl-red{margin-inline:calc(50% - 50vw);padding-inline:var(--gut);background:var(--red);color:#fff}
.c27x .xl-red .xl-steps li{border-color:rgba(255,255,255,.3)}
.c27x .xl-red .xl-steps li.on .mono{color:#fff}
.c27x .xl-red .xl-bar{background:rgba(255,255,255,.25)}
.c27x .xl-red .xl-bar i{background:#fff}
.c27x .xl-red .eyebrow{color:#FFD9D1}
.c27x .xl-orbit{--ar:1.45}
.c27x .xl-orbit .phone{aspect-ratio:9/19;border-radius:3.2cqw;border:.7cqw solid var(--stage);overflow:hidden;background:var(--stage);box-shadow:0 30px 70px rgba(0,0,0,.35);z-index:3}
.c27x .xl-orbit .phone.sm{z-index:2}
.c27x .xl-orbit .post{aspect-ratio:4/5;border-radius:12px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.3);z-index:1}
.c27x .xl-orbit .toast{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:#fff;color:var(--stage);box-shadow:0 18px 40px rgba(0,0,0,.25);z-index:4;opacity:calc(var(--s) * 1.6 - .5);font-size:clamp(12px,1.1cqw,15px)}
.c27x .xl-orbit .toast i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(209,58,30,.18)}
.c27x .xl-orbit .toast b{font-weight:600;flex:1}
.c27x .xl-orbit .toast .mono{font-size:10px;opacity:.55}
.c27x .xl-orbit .toast.dark{background:var(--stage);color:#fff;gap:10px}
.c27x .xl-orbit .toast.dark .n{flex:none;font:700 clamp(20px,2.4cqw,34px)/1 C27,sans-serif;color:#FF6A4D}

/* Wide screens pin each section while its stack pulls apart (set by the script). */
@media (min-width:1100px){
	.c27x .xl.pinned .xl-pin{height:300vh}
	.c27x .xl.pinned .xl-sticky{position:sticky;top:0;min-height:100vh;padding-top:110px;padding-bottom:40px}
}
@media (max-width:1099px){
	.c27x .xl-sticky{grid-template-columns:1fr}
	.c27x .xl-steps li{opacity:1}
	.c27x .xl-steps li p{max-height:90px;margin-top:6px}
	.c27x .xl-set{width:100%}
	.c27x .xl-fan{--ar:1.5}
	.c27x .xl-orbit .toast{padding:8px 10px;gap:8px}
}
@media (max-width:640px){
	.c27x .xl-orbit .toast .mono{display:none}
	.c27x .xl-orbit .toast{font-size:10px;border-radius:10px}
	.c27x .xl .xl-l .tag{font-size:8px;left:6px;top:6px;padding:3px 6px}
}
@media (prefers-reduced-motion:reduce){
	.c27x .xl{--s:1}
	.c27x .xl-l,.c27x .xl-steps li,.c27x .xl-steps li p,.c27x .xl-chip{transition:none}
}
.c27x .xl-steps li{cursor:pointer}

/* Case file header (owner, 2026-11-12): paper band, the title, lead + facts table, a full-bleed figure strip,
   then a dark contents band that jumps to each section. */
.c27x .cf-head,.c27x .cf-fig,.c27x .cf-toc{margin-inline:calc(50% - 50vw)}
.c27x .cf-in{max-width:1440px;margin:0 auto;padding-inline:var(--gut)}
.c27x .cf-head{background:#F0EFEC;color:var(--stage);padding:clamp(28px,3vw,44px) 0 clamp(36px,4vw,56px)}
.c27x .cf-top{display:flex;justify-content:space-between;gap:20px;padding-bottom:16px;border-bottom:1.5px solid var(--stage);font-size:11px;color:#55555C}
.c27x .cf-top .r{color:var(--red)}
.c27x .cf-head h1{font:800 clamp(52px,9.4vw,170px)/.9 Gilroy,sans-serif;letter-spacing:-.045em;color:var(--stage)!important;margin:clamp(24px,2.6vw,40px) 0 0;max-width:12ch}
.c27x .cf-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,120px);align-items:start;margin-top:clamp(28px,3.4vw,52px)}
.c27x .cf-lead{font:500 clamp(18px,1.5vw,24px)/1.45 Gilroy,sans-serif;margin:clamp(12px,1.6vw,26px) 0 0;max-width:620px}
.c27x .cf-facts{margin:0;border-top:1px solid var(--stage)}
.c27x .cf-facts>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--stage);align-items:baseline}
.c27x .cf-facts dt{font-size:10px;color:#6B6B73}
.c27x .cf-facts dd{margin:0;font:600 15px/1.35 Gilroy,sans-serif}
.c27x .cf-facts a{color:var(--red);text-decoration:none}
.c27x .cf-facts a:hover{text-decoration:underline}

.c27x .cf-fig{position:relative;background:var(--stage);overflow:hidden}
.c27x .cf-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.c27x .cf-track::-webkit-scrollbar{display:none}
.c27x .cf-track figure{flex:0 0 100%;scroll-snap-align:start;height:min(70vh,760px);min-height:320px}
.c27x .cf-track img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0}
.c27x .cf-tag{position:absolute;left:0;top:0;z-index:2;background:var(--red);color:#fff;font-size:11px;padding:12px 18px 12px var(--gut)}
.c27x .cf-tag b{font-weight:600}
.c27x .cf-arw{position:absolute;top:50%;z-index:2;width:56px;height:56px;margin-top:-28px;border:0;border-radius:50%;background:rgba(11,11,13,.55);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);transition:background .2s,transform .2s}
.c27x .cf-arw:hover{background:var(--red);transform:scale(1.06)}
.c27x .cf-arw svg{width:22px;height:22px}
.c27x .cf-arw.cf-prev{left:clamp(12px,2vw,32px)}.c27x .cf-arw.cf-next{right:clamp(12px,2vw,32px)}

.c27x .cf-toc{background:#121214;color:#fff;padding:clamp(32px,3.4vw,52px) 0 clamp(36px,4vw,60px)}
.c27x .cf-toc .mono{font-size:10px;color:#FF6A4D}
.c27x .cf-toc ol{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px clamp(16px,2vw,32px)}
.c27x .cf-toc a{display:flex;align-items:center;gap:16px;color:#fff;text-decoration:none;font:600 16px/1.2 Gilroy,sans-serif}
.c27x .cf-toc .n{font:200 clamp(26px,2.2vw,34px)/1 C27,sans-serif;color:#FF6A4D;transition:transform .25s}
.c27x .cf-toc a:hover .n{transform:translateX(4px)}
.c27x .cf-toc a:hover{color:#FFB4A5}
.c27x .cf-head+*{margin-top:0}
@media (max-width:1000px){.c27x .cf-grid{grid-template-columns:1fr} .c27x .cf-toc ol{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.c27x .cf-toc ol{grid-template-columns:repeat(2,minmax(0,1fr))} .c27x .cf-arw{width:44px;height:44px;margin-top:-22px} .c27x .cf-top{flex-direction:column;gap:6px}}

/* Fix: the deck images fill their cards edge to edge. */
.c27x .xl-fan .card img,.c27x .xl-orbit .xl-l img{position:absolute;inset:0;width:100%;height:100%;max-width:none;border-radius:0;object-fit:cover}
.c27x .xl-orbit .phone,.c27x .xl-orbit .post,.c27x .xl-fan .card{position:absolute}
.c27x .cf-arw{padding:0;margin:-28px 0 0;bottom:auto}
.c27x .xl-red h2{color:#fff!important}
.c27x .xl-red.stepping .xl-l:not(.hot){opacity:.82}

/* ---- Favorite parts (owner, 2026-11-12) ---- */
.c27x .fv-in{max-width:1440px;margin:0 auto;padding:0 clamp(20px,4vw,64px)}
.c27x .fv-rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.c27x .fv-rv.in{opacity:1;transform:none}
.c27x .fv-fl{transform:translate3d(0,calc(var(--fq,0)*1px),0);will-change:transform}

/* Eight pieces */
.c27x .fv-made{background:#000;color:#fff;padding:clamp(80px,9vw,140px) 0}
.c27x .fv-made .eyebrow{color:var(--red)}
.c27x .fv-made h2{font:800 clamp(40px,5.4vw,84px)/1 Gilroy,sans-serif;letter-spacing:-.035em;margin:14px 0 clamp(48px,6vw,90px);color:#fff}
.c27x .fv-made ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(36px,4vw,64px) clamp(16px,2vw,28px)}
.c27x .fv-made li{border-top:1px solid #2a2a2e;padding-top:14px}
.c27x .fv-made li>.mono{color:#77777f;font-size:11px}
.c27x .fv-made .n{display:flex;align-items:flex-start;gap:14px;margin:18px 0 18px}
.c27x .fv-made .n b{font:200 clamp(64px,7.4vw,118px)/.9 C27,Gilroy,sans-serif;color:#fff}
.c27x .fv-made .n b.r{color:var(--red)}
.c27x .fv-made .n small{color:#77777f;font-size:10px;padding-top:.8em}
.c27x .fv-made p{margin:0;font:600 15px/1.4 Gilroy,sans-serif;color:#fff}

/* Dark type band: big headline and the full alphabet */
.c27x .x-type h2.fv-h{font:700 clamp(48px,7vw,116px)/.9 C27,Gilroy,sans-serif;letter-spacing:0;color:#fff;text-transform:uppercase}
.c27x .x-type h2.fv-h span{display:block;font-weight:200;color:var(--red)}
.c27x .fv-abc{margin:clamp(56px,7vw,110px) 0 0}
.c27x .fv-abc .b{font:700 clamp(40px,8.6vw,152px)/.98 C27,Gilroy,sans-serif;color:#fff;white-space:nowrap}
.c27x .fv-abc .t{font:200 clamp(56px,13.4vw,236px)/1 C27,Gilroy,sans-serif;color:var(--red);margin-top:clamp(40px,5vw,80px);white-space:nowrap}
.c27x .fv-abc p.mono{color:#8a8a92;font-size:11px;margin:22px 0 0}

/* Weight table */
.c27x .fv-spec{background:var(--paper,#EDEBE6);padding:clamp(72px,8vw,120px) 0}
.c27x .fv-spec .fv-in{display:grid;grid-template-columns:minmax(220px,1fr) 2.4fr;gap:clamp(32px,5vw,90px);border-top:1.5px solid #111;padding-top:28px}
.c27x .fv-spec .num{color:var(--red);font-size:11px}
.c27x .fv-spec h2{font:800 clamp(30px,3vw,44px)/1.05 Gilroy,sans-serif;letter-spacing:-.03em;margin:14px 0 14px;color:#111}
.c27x .fv-spec .l p{color:#6b6b73;font-size:15px;line-height:1.55;margin:0;max-width:30ch}
.c27x .fv-spec .ab{font:700 clamp(30px,4.6vw,78px)/1.02 C27,Gilroy,sans-serif;color:#0B0B0D;white-space:nowrap}
.c27x .fv-spec .nu{font:200 clamp(44px,7vw,120px)/1 C27,Gilroy,sans-serif;color:#0B0B0D;margin:clamp(28px,3vw,48px) 0 clamp(36px,4vw,60px);white-space:nowrap}
.c27x .fv-spec table{width:100%;border-collapse:collapse;font:500 15px/1.4 Gilroy,sans-serif;color:#111}
.c27x .fv-spec th{text-align:left;color:#6b6b73;font-size:11px;padding:0 0 12px;border-bottom:1px solid #111}
.c27x .fv-spec td{padding:15px 0;border-bottom:1px solid #d6d4cf;width:33%}
.c27x .fv-spec tr.no td{color:var(--red)}

/* The look */
.c27x .fv-look{display:grid;grid-template-columns:1fr 1fr;min-height:min(86vh,760px);max-width:var(--box);margin:clamp(16px,2vw,28px) auto;border-radius:24px;overflow:hidden;background:#0B0B0D}
.c27x .fv-look .txt{padding:clamp(40px,6vw,96px);display:flex;flex-direction:column;justify-content:space-between;color:#fff}
.c27x .fv-look .eyebrow{color:var(--red)}
.c27x .fv-look h2{font:700 clamp(48px,6.4vw,108px)/.92 C27,Gilroy,sans-serif;text-transform:uppercase;color:#fff;margin:22px 0 0}
.c27x .fv-look h2 span{display:block;font-weight:200;color:#EDEBE6}
.c27x .fv-look p{color:#b4b4bb;max-width:36ch;font-size:16px;line-height:1.55;margin:40px 0 0}
.c27x .fv-look .fv-sw{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.c27x .fv-look .fv-sw>div{background:var(--c);display:flex;align-items:flex-end;padding:22px;transition:flex .6s}
.c27x .fv-look .fv-sw .mono{font-size:11px;color:#fff;letter-spacing:.12em}
.c27x .fv-look .fv-sw .lt .mono{color:#111}

/* The result */
.c27x .fv-result{display:grid;grid-template-columns:1fr 1fr;max-width:var(--box);margin:clamp(16px,2vw,28px) auto;background:#fff;border-radius:24px;overflow:visible;min-height:820px}
.c27x .fv-result .txt{position:relative;padding:clamp(48px,6vw,100px) clamp(32px,5vw,90px)}
.c27x .fv-result h2{font:800 clamp(40px,4.6vw,72px)/1 Gilroy,sans-serif;letter-spacing:-.035em;color:#111;margin:16px 0 22px;max-width:11ch}
.c27x .fv-result .txt>p{color:#6b6b73;font-size:16px;line-height:1.55;max-width:42ch;margin:0}
.c27x .fv-result .ph{position:relative;border-radius:0 24px 24px 0}
.c27x .fv-result .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0 24px 24px 0}
.c27x .fv-result .toast{position:absolute;left:clamp(32px,5vw,90px);bottom:110px;width:min(380px,80%);background:#0B0B0D;color:#fff;border-radius:16px;padding:20px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);z-index:3}
.c27x .fv-result .th{display:flex;align-items:center;gap:10px;font-size:12px;color:#ccc}
.c27x .fv-result .th i{width:24px;height:24px;border-radius:6px;background:var(--red);color:#fff;font:700 11px/24px C27,sans-serif;text-align:center;font-style:normal}
.c27x .fv-result .th em{margin-left:auto;font-style:normal;color:#77777f}
.c27x .fv-result .toast>b{display:block;font:700 19px/1.25 Gilroy,sans-serif;margin:14px 0 4px}
.c27x .fv-result .toast>p{font-size:12px;color:#9a9aa2;margin:0}
.c27x .fv-result .tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.c27x .fv-result .tags span{font-size:11px;background:#1e1e22;border-radius:6px;padding:5px 9px;color:#ddd}
.c27x .fv-result .st{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.c27x .fv-result .st div{background:#1e1e22;border-radius:8px;padding:10px 12px}
.c27x .fv-result .st small{display:block;font:600 9px/1 "Geist Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#77777f;margin-bottom:6px}
.c27x .fv-result .st b{font:700 16px/1 Gilroy,sans-serif}
.c27x .fv-result .pick{position:absolute;left:-90px;bottom:70px;width:300px;background:#F0EFEC;color:#111;border-radius:16px;padding:22px;box-shadow:0 30px 60px -20px rgba(0,0,0,.4);z-index:3}
.c27x .fv-result .pick .k{color:var(--red);font-size:10px}
.c27x .fv-result .pick h3{font:800 24px/1.05 Gilroy,sans-serif;letter-spacing:-.02em;margin:10px 0 6px}
.c27x .fv-result .pick>p{font-size:12px;color:#6b6b73;margin:0 0 14px;line-height:1.4}
.c27x .fv-result .opt{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:10px;padding:10px 12px;margin-bottom:6px;font-size:13px}
.c27x .fv-result .opt span{font-size:11px;color:#6b6b73}
.c27x .fv-result .opt.on{background:#0B0B0D;color:#fff}
.c27x .fv-result .opt.on span{color:#aaa}
.c27x .fv-result .days{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}
.c27x .fv-result .days span{background:#fff;border-radius:8px;text-align:center;font-size:10px;color:#6b6b73;padding:6px 0}
.c27x .fv-result .days b{display:block;font:200 22px/1.1 C27,sans-serif;color:#111}
.c27x .fv-result .days .on{background:var(--red);color:#fff}
.c27x .fv-result .days .on b{color:#fff}
.c27x .fv-result .btn{background:var(--red);color:#fff;text-align:center;font:700 12px/1 Gilroy,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:14px;border-radius:8px}
.c27x .fv-result .pick small{display:block;text-align:center;font-size:11px;color:#6b6b73;margin-top:8px}

/* Imagery mosaic */
.c27x .fv-mosaic{max-width:var(--box);margin:clamp(16px,2vw,28px) auto;background:#000;border-radius:24px;overflow:hidden}
.c27x .fv-mosaic .hd{display:grid;grid-template-columns:1.6fr 1fr;gap:40px;align-items:end;padding:clamp(56px,6vw,96px) clamp(28px,5vw,90px) clamp(40px,4vw,64px)}
.c27x .fv-mosaic .eyebrow{color:var(--red)}
.c27x .fv-mosaic h2{font:800 clamp(38px,4.4vw,70px)/1 Gilroy,sans-serif;letter-spacing:-.035em;color:#fff;margin:14px 0 0;max-width:14ch}
.c27x .fv-mosaic .hd p{color:#9a9aa2;font-size:15px;line-height:1.55;margin:0;max-width:36ch}
.c27x .fv-mosaic .g{display:grid;gap:6px;margin-top:6px;position:relative}
.c27x .fv-mosaic .g3{grid-template-columns:1fr 1fr 1fr;height:clamp(320px,38vw,640px);margin-top:0}
.c27x .fv-mosaic .g2{grid-template-columns:1fr 1.5fr;height:clamp(300px,34vw,580px)}
.c27x .fv-mosaic .g4{grid-template-columns:repeat(4,1fr);height:clamp(200px,20vw,340px)}
.c27x .fv-mosaic figure{margin:0;overflow:hidden;position:relative}
.c27x .fv-mosaic figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.c27x .fv-mosaic figure:hover img{transform:scale(1.04)}
.c27x .fv-mosaic .brief{position:absolute;right:clamp(16px,6%,110px);top:-40px;width:min(380px,30%);min-height:300px;background:#F0EFEC;color:#111;border-radius:6px;padding:22px;display:flex;flex-direction:column;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);z-index:2}
.c27x .fv-mosaic .bh{display:flex;gap:28px;color:var(--red);font-size:10px}
.c27x .fv-mosaic .brief p{font:500 14px/1.55 "Geist Mono",monospace;margin:18px 0 0}
.c27x .fv-mosaic .brief .ft{margin-top:auto;padding-top:30px;color:#8a8a92;font-size:9px}

@media (max-width:1000px){
	.c27x .fv-made ol{grid-template-columns:repeat(2,1fr)}
	.c27x .fv-spec .fv-in,.c27x .fv-look,.c27x .fv-result,.c27x .fv-mosaic .hd{grid-template-columns:1fr}
	.c27x .fv-look .fv-sw{min-height:420px}
	.c27x .fv-result{min-height:0}
	.c27x .fv-result .txt{padding-bottom:40px}
	.c27x .fv-result .toast{position:relative;left:auto;bottom:auto;margin-top:32px;width:100%;max-width:380px}
	.c27x .fv-result .ph{min-height:560px;border-radius:0 0 24px 24px}
	.c27x .fv-result .ph img{border-radius:0 0 24px 24px}
	.c27x .fv-result .pick{left:16px;bottom:16px;width:min(300px,calc(100% - 32px))}
	.c27x .fv-mosaic .g3{grid-template-columns:1fr 1fr;height:auto}
	.c27x .fv-mosaic .g3 figure{aspect-ratio:3/4}
	.c27x .fv-mosaic .brief{position:relative;right:auto;top:auto;width:auto;grid-column:1/-1;margin:16px;min-height:0;order:-1}
	.c27x .fv-mosaic .g2{height:clamp(240px,60vw,420px)}
	.c27x .fv-mosaic .g4{grid-template-columns:1fr 1fr;height:auto}
	.c27x .fv-mosaic .g4 figure{aspect-ratio:1}
	.c27x .fv-abc .b,.c27x .fv-spec .ab{white-space:normal;word-break:break-all}
	.c27x .fv-abc .t,.c27x .fv-spec .nu{white-space:normal;word-break:break-all}
	.c27x .fv-spec .ab br,.c27x .fv-abc .b br{display:none}
}
@media (max-width:560px){ .c27x .fv-made ol{grid-template-columns:1fr 1fr;gap:32px 14px} .c27x .fv-mosaic .g2{grid-template-columns:1fr;height:auto} .c27x .fv-mosaic .g2 figure{aspect-ratio:4/3} }
@media (prefers-reduced-motion:reduce){ .c27x .fv-rv{opacity:1;transform:none;transition:none} .c27x .fv-fl{transform:none} }
.c27x .fv-made h2,.c27x .fv-mosaic h2,.c27x .fv-look h2,.c27x .x-type h2.fv-h{color:#fff!important}
.c27x .x-type h2.fv-h{font:700 clamp(48px,6.4vw,108px)/.9 C27,Gilroy,sans-serif!important;letter-spacing:0!important}
.c27x .x-type h2.fv-h span{color:var(--red)!important;font-weight:200}
.c27x .fv-look h2 span{color:#EDEBE6!important}
.c27x .fv-abc .b{font-size:clamp(34px,6.5vw,124px)}
.c27x .fv-abc .t{font-size:clamp(48px,9.6vw,184px)}
.c27x .fv-spec .ab{font-size:clamp(26px,3.5vw,62px)}
.c27x .fv-spec .nu{font-size:clamp(36px,5.2vw,92px)}
.c27x .fv-abc,.c27x .fv-spec .r{overflow:hidden}
.c27x .fv-look .fv-sw>div{border-radius:0;margin:0;height:auto}
@media (max-width:1000px){ .c27x .fv-mosaic .g3 figure:nth-of-type(3){grid-column:1/-1;aspect-ratio:16/10} }

/* Deck (owner, 2026-11-13): one framed component on stage at a time, a quiet stack edge behind. */
.c27x .xl-deck .xl-stage{perspective:none}
.c27x .xl-deck .dk-set{position:relative;aspect-ratio:5/4;width:min(100%,calc((100vh - 200px)*1.25));margin:0 auto 26px}
.c27x .xl-deck .dk-set::before,.c27x .xl-deck .dk-set::after{content:"";position:absolute;inset:0;border-radius:22px;background:#E3E1DC;transform:translateY(12px) scale(.955);z-index:0}
.c27x .xl-deck .dk-set::after{background:#D6D3CD;transform:translateY(23px) scale(.91);z-index:-1}
.c27x .dk-f{position:absolute;inset:0;margin:0;border-radius:22px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;padding:22px 26px 26px;z-index:1;opacity:0;transform:translateY(36px) scale(.97);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.c27x .dk-f[data-i="0"]{opacity:1;transform:none}
.c27x .xl-deck.stepping .dk-f[data-i="0"]:not(.hot){opacity:0}
.c27x .dk-f.hot{opacity:1;transform:none;z-index:2}
.c27x .dk-f.past{opacity:0;transform:translateY(-24px) scale(.985)}
.c27x .dk-f .dk-cap{position:static;display:flex;justify-content:space-between;gap:16px;background:none;backdrop-filter:none;padding:0;border-radius:0;color:inherit;font:500 11px/1 "Geist Mono","Space Mono",monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.c27x .dk-in{display:grid;place-items:center;min-height:0}
.c27x .bg-paper{background:#EDEBE6;color:#0B0B0D}
.c27x .bg-ink{background:#0B0B0D;color:#fff}
.c27x .bg-red{background:var(--red);color:#fff}
.c27x .bg-sand{background:#E9E2D3 url(../../../uploads/2026/11/onelife-texture.webp) center/cover;color:#1F1B16}
.c27x .bg-night{background:#1F1B16;color:#F0EDE4}
.c27x .bg-gold{background:#A5803C;color:#fff}

/* Components */
.c27x .cp{width:min(66%,460px);background:#fff;color:#111114;border-radius:16px;padding:22px;box-shadow:0 30px 60px -28px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.06);display:grid;gap:14px;font-size:14px;line-height:1.45;text-align:left}
.c27x .cp .mono{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.c27x .cp .mut{color:#8A8A92}
.c27x .cp-h{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid #ECECEF}
.c27x .cp-btn{background:var(--red);color:#fff;text-align:center;padding:12px 16px;border-radius:999px;font-weight:600;font-size:14px}
.c27x .cp-ghost{border:1px solid #DADADF;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:600}
.c27x .cp-ghost.on{background:#111114;border-color:#111114;color:#fff}
.c27x .cp-row{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#6B6B73;font-size:13px}
.c27x .cp .t{font-size:22px;line-height:1.15;font-weight:700;letter-spacing:-.01em}
.c27x .cp dl{margin:0;display:grid;gap:10px}
.c27x .cp dl div{display:grid;grid-template-columns:84px 1fr;gap:10px}
.c27x .cp dt{color:#8A8A92;font-size:12px}
.c27x .cp dd{margin:0;font-weight:600}
.c27x .cp .nv{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.c27x .cp .nv i,.c27x .cp .tg i{font-style:normal;font-size:12px;padding:4px 10px;border-radius:999px;background:#F2F2F4}
.c27x .cp .nv i{text-decoration:line-through;color:#8A8A92}
.c27x .cp .tg{display:flex;flex-wrap:wrap;gap:6px}
.c27x .cp .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.c27x .cp .th{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:3/4;background:#ddd}
.c27x .cp .th img,.c27x .cp .ph img{width:100%;height:100%;object-fit:cover;display:block}
.c27x .cp .th span{position:absolute;left:6px;right:6px;bottom:6px;background:rgba(255,255,255,.92);border-radius:6px;padding:4px 6px;font-size:9px}
.c27x .cp .th.x img{filter:grayscale(1) brightness(.6)}
.c27x .cp .th.x span{color:#8A8A92}
.c27x .cp .th.ok{box-shadow:0 0 0 2px var(--red)}
.c27x .cp .th.ok span{background:var(--red);color:#fff}
.c27x .cp-gen{width:min(76%,560px)}
.c27x .cp .ph{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:4/3}
.c27x .cp .chip{position:absolute;top:10px;left:10px;background:var(--red);color:#fff;padding:5px 10px;border-radius:999px}
.c27x .cp .mt,.c27x .cp .st{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.c27x .cp .st{grid-template-columns:repeat(3,1fr)}
.c27x .cp .mt small,.c27x .cp .st small{display:block;color:#8A8A92;font-size:9.5px}
.c27x .cp .mt b,.c27x .cp .st b{font-size:20px;letter-spacing:-.01em}
.c27x .cp .sl{display:grid;gap:9px}
.c27x .cp .sl div{display:grid;grid-template-columns:72px 1fr 36px;align-items:center;gap:10px;font-size:12px}
.c27x .cp .sl i{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--red) var(--v),#ECECEF var(--v))}
.c27x .cp .sl b{text-align:right}
.c27x .cp ol,.c27x .cp ul{list-style:none;margin:0;padding:0;display:grid}
.c27x .cp ol li,.c27x .cp ul li{display:grid;grid-template-columns:30px 1fr;column-gap:8px;padding:10px 8px;border-radius:10px}
.c27x .cp ul li{grid-template-columns:1fr}
.c27x .cp ol li span{grid-row:span 2;color:#8A8A92;font-size:12px;padding-top:2px}
.c27x .cp li em,.c27x .cp .dr em{font-style:normal;color:#8A8A92;font-size:12.5px}
.c27x .cp li.on{background:#F5F2EA}
.c27x .cp li.on span{color:var(--red)}
.c27x .cp .dr{display:flex;align-items:center;gap:12px}
.c27x .cp .dr div{display:grid}
.c27x .cp .av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.c27x .cp .days,.c27x .cp .times{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.c27x .cp .times{grid-template-columns:repeat(3,1fr)}
.c27x .cp .days span,.c27x .cp .times span{border:1px solid #ECECEF;border-radius:10px;padding:7px 4px;text-align:center;font-size:11px;color:#6B6B73}
.c27x .cp .days b{display:block;font-size:16px;color:#111114}
.c27x .cp .days span.on,.c27x .cp .times span.on{background:#111114;border-color:#111114;color:#fff}
.c27x .cp .days span.on b{color:#fff}
.c27x .cp .job{border:1px solid #ECECEF;border-radius:12px;padding:14px;display:grid;gap:8px;justify-items:start}
.c27x .cp .job .mono{color:var(--red)}
.c27x .cp .job b{font-size:16px}
.c27x .cp .ld{display:flex;align-items:center;gap:10px;background:#F5F2EA;border-radius:10px;padding:10px 12px;font-size:13px}
.c27x .cp .ld i{width:8px;height:8px;border-radius:50%;background:#2E9E5B;flex:none}
.c27x .cp .ld span{flex:1}
.c27x .cp .fld{border:1px solid #DADADF;border-radius:10px;padding:11px 14px;color:#8A8A92}
.c27x .cp p{margin:0;color:#6B6B73!important;font-size:14px!important;line-height:1.5!important}
.c27x .cp small{color:#8A8A92;text-align:center}

@media (max-width:1099px){
	.c27x .xl-deck .xl-steps,.c27x .xl-deck .xl-bar{display:none}
	.c27x .xl-deck .dk-set{aspect-ratio:auto;width:100%;display:grid;gap:16px;margin:0}
	.c27x .xl-deck .dk-set::before,.c27x .xl-deck .dk-set::after{display:none}
	.c27x .dk-f,.c27x .dk-f.past,.c27x .xl-deck.stepping .dk-f[data-i="0"]:not(.hot){position:relative;opacity:1;transform:none;aspect-ratio:5/4;min-height:420px}
	.c27x .cp,.c27x .cp-gen{width:min(100%,440px)}
}
@media (max-width:560px){
	.c27x .dk-f,.c27x .dk-f.past{aspect-ratio:auto;padding:18px 14px 22px;gap:16px}
	.c27x .cp{padding:18px}
}
@media (prefers-reduced-motion:reduce){ .c27x .dk-f{transition:none} }

/* Every band is a rounded card, the ones that used to run edge to edge too (owner, 2026-11-13). */
.c27x .cf-head,.c27x .cf-fig,.c27x .cf-toc,.c27x .xl-red,.c27x .x-dark,.c27x .x-stack,.c27x .x-stories{margin-inline:0;border-radius:32px}
.c27x .cf-fig,.c27x .cf-toc{margin-top:clamp(10px,1.2vw,16px)}
.c27x .fv-made,.c27x .fv-spec{border-radius:32px;overflow:hidden}
@media (max-width:640px){
	.c27x .cf-head,.c27x .cf-fig,.c27x .cf-toc,.c27x .xl-red,.c27x .x-dark,.c27x .x-stack,.c27x .x-stories,.c27x .fv-made,.c27x .fv-spec{border-radius:24px}
}
/* Mosaic tiles are their own rounded cards, and keep their corners while the photo zooms on hover. */
.c27x .fv-mosaic{padding-bottom:10px}
.c27x .fv-mosaic .g{gap:10px;margin-top:10px;padding-inline:10px}
.c27x .fv-mosaic .g3{margin-top:0}
.c27x .fv-mosaic .g>*{border-radius:16px;overflow:hidden;clip-path:inset(0 round 16px)}
.c27x .x-day figure{clip-path:inset(0 round 22px)}
/* The type specimen sizes to its own width, so the alphabet and numerals never run past the band. */
.c27x .fv-abc{container-type:inline-size}
.c27x .fv-abc .b{font-size:min(152px,7.9cqw)}
.c27x .fv-abc .t{font-size:min(236px,11cqw)}
/* Social stories show whole inside the phones (9:16 art in a taller phone): no cropped sides. */
.c27x .xl-orbit .phone img{object-fit:contain;background:var(--stage)}
/* Contents band as an editorial index (owner, 2026-11-13): label left, chapters in two columns of hairline rows,
   thin numeral, the title on one line, an arrow that slides in on hover. Page colors come from each page's CSS. */
.c27x .cf-toc{padding:clamp(40px,4.4vw,72px) 0 clamp(44px,4.8vw,80px)}
.c27x .cf-toc .cf-in{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px clamp(32px,4vw,80px);align-items:start;max-width:none;padding-inline:clamp(24px,4.6vw,80px)}
.c27x .cf-toc .cf-in>.mono{font-size:11px;letter-spacing:.14em;padding-top:22px}
.c27x .cf-toc ol{display:block;columns:2;column-gap:clamp(32px,4vw,72px);margin:0}
.c27x .cf-toc li{break-inside:avoid}
.c27x .cf-toc a{display:grid;grid-template-columns:clamp(52px,4.6vw,72px) minmax(0,1fr) 22px;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:clamp(17px,1.35vw,21px);transition:color .25s}
.c27x .cf-toc a::after{content:"\2192";justify-self:end;font:400 18px/1 Gilroy,sans-serif;opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .25s}
.c27x .cf-toc a:hover::after{opacity:1;transform:none}
.c27x .cf-toc a:hover .n{transform:none}
.c27x .cf-toc .n{font-size:clamp(26px,2.2vw,34px)}
@media (max-width:1000px){.c27x .cf-toc .cf-in{grid-template-columns:1fr} .c27x .cf-toc .cf-in>.mono{padding-top:0}}
@media (max-width:640px){.c27x .cf-toc ol{columns:1} .c27x .cf-toc a{padding:15px 0} .c27x .cf-toc a::after{opacity:.5;transform:none}}
.c27x .fv-mosaic .g>*{background-color:rgba(255,255,255,.06)}
.c27x .fv-abc .b{font-size:min(152px,6.6cqw)}
/* Pinned sections already clear the header inside (110px), so the outer gap is just the band gap; no double spacing (owner, 2026-11-13). */
.c27x .xl{margin-top:clamp(16px,2vw,28px)}

/* Dark bands centered at the panel width (owner, 2026-11-13). */
.c27x .x-dark,.c27x .x-stack,.c27x .x-stories{width:auto;max-width:var(--box);margin-left:auto;margin-right:auto}
/* Panels next to each other always keep a gap, even on the same color. */
.c27x .fv-spec{max-width:var(--box);margin:clamp(16px,2vw,28px) auto 0}

/* Pinned panels: the color sits on the pinned card, not the whole scroll track, so no empty paper above and below. */
.c27x .xl-paper,.c27x .xl-red{background:none!important;padding-inline:0;border-radius:0;width:var(--box);max-width:var(--box);margin-left:auto;margin-right:auto}
.c27x .xl-paper .xl-sticky{background:var(--paper);color:var(--stage)}
.c27x .xl-red .xl-sticky{background:var(--red);color:#fff}
.c27x .xl-paper .xl-sticky,.c27x .xl-red .xl-sticky{border-radius:32px;padding:clamp(40px,4vw,72px) clamp(24px,5vw,96px)}
@media (min-width:1100px){
	.c27x .xl-paper.pinned .xl-sticky,.c27x .xl-red.pinned .xl-sticky{top:116px;min-height:calc(100vh - 132px);padding-top:clamp(28px,3vw,48px);padding-bottom:clamp(28px,3vw,48px)}
	.c27x .xl-paper .xl-set,.c27x .xl-red .xl-set{width:min(100%,calc((100vh - 300px) * var(--ar)))}
}
@media (max-width:640px){.c27x .xl-paper .xl-sticky,.c27x .xl-red .xl-sticky{border-radius:24px}}

/* The type stack: each layer holds one real piece of the logo, in place. Together they are the logo. */
.c27x .xl .lk.only-b i,.c27x .xl .lk.only-i b{visibility:hidden}
.c27x .xl-iso .kn .lk b{color:transparent;-webkit-text-stroke:1.5px #D13A1E;opacity:calc(var(--s) * 1.4 - .1);background:repeating-linear-gradient(90deg,rgba(209,58,30,.35) 0 1px,transparent 1px 1.94cqw);-webkit-background-clip:border-box;padding:0 .4cqw}
.c27x .xl-iso .yr .lk i{color:#FF6A4D}
.c27x .xl-iso .glass{background:rgba(255,255,255,calc(var(--s) * .32))}
.c27x .xl-iso .sws{left:auto;right:6%;top:8%;bottom:auto;opacity:calc(var(--s) * 1.4 - .2)}
.c27x .xl-iso .note{position:absolute;right:14px;bottom:12px;font-size:10px;letter-spacing:.1em;color:#D13A1E;opacity:calc(var(--s) * 1.4 - .2)}
.c27x .xl-iso .base .note{color:#fff}
.c27x .xl-iso .xl-l .tag{font-size:11px;padding:6px 10px}
.c27x .xl-iso.stepping .xl-l:not(.hot){opacity:.28}
.c27x .xl-iso .xl-set{transform:rotateX(calc(var(--s) * 54deg)) rotateZ(calc(var(--s) * -34deg)) scale(calc(1 - var(--s) * .26)) translateY(calc(var(--s) * 8%))}
/* Concepts fill the content width as a grid, no scroll strip (owner, 2026-11-13). */
.c27x .x-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);overflow:visible;margin:40px 0 0;padding:0}
.c27x .x-strip figure{flex:none;margin:0;border-radius:16px}
.c27x .x-strip img{width:100%;display:block}
@media (max-width:760px){.c27x .x-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.c27x .xl-paper,.c27x .xl-red{width:auto}
@media (min-width:1100px){
	.c27x .xl-paper.pinned .xl-sticky,.c27x .xl-red.pinned .xl-sticky{top:152px;min-height:calc(100vh - 168px)}
	.c27x .xl-paper .xl-set,.c27x .xl-red .xl-set{width:min(100%,calc((100vh - 340px) * var(--ar)))}
}
.c27x .xl-paper .xl-sticky,.c27x .xl-red .xl-sticky{overflow:hidden}
.c27x .xl-iso .xl-set{transform:translateY(calc(var(--s) * 16%)) rotateX(calc(var(--s) * 54deg)) rotateZ(calc(var(--s) * -34deg)) scale(calc(1 - var(--s) * .32))}
/* Type tester: a blinking cursor while the demo types (owner, 2026-11-13). */
.c27x .x-tester{position:relative}
.c27x .x-caret{position:absolute;width:3px;border-radius:2px;background:var(--red,#D13A1E);pointer-events:none;animation:xCaret 1s steps(1) infinite}
.c27x .x-caret.off{display:none}
@keyframes xCaret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.c27x .x-caret{animation:none}}