.performance-comparison-intro{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-4) var(--space-5)}.performance-comparison-intro>p{flex:1 1 20rem;margin:0;color:var(--ink-soft);font-size:var(--type-ui);line-height:var(--leading-body)}.story-main .chapter-has-prototype{grid-template-columns:minmax(0,1fr)}.story-main .chapter-has-prototype>.chapter-copy{max-width:none}.chapter-has-prototype .chapter-body{max-width:var(--measure)}.story-main .chapter-has-comparison>.chapter-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--space-7);row-gap:var(--space-5)}.chapter-has-comparison .chapter-copy>:not(.insight-list){grid-column:1}.chapter-has-comparison .chapter-copy>.chapter-body{grid-column:2;grid-row:1 / span 2;align-self:start}.screen-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);align-items:start}.comparison-panel{min-width:0;border:0;border-radius:var(--radius-dialog);padding:var(--space-5);background:var(--panel-solid)}.comparison-label{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3) var(--space-5);padding-bottom:0;margin-bottom:var(--space-6);border:0}.comparison-label h3,.comparison-label h4{font:var(--weight-medium) var(--type-title)/var(--leading-title) var(--font-display);letter-spacing:var(--tracking-title);margin:0}.comparison-label>span{font:var(--weight-medium) var(--type-ui)/var(--leading-ui) var(--font-sans)}.comparison-panel .evidence{width:100%}.comparison-panel>.insight-list{margin-top:var(--space-6)}.comparison-panel .evidence-figure,.prototype-screen{display:grid;gap:var(--space-4);margin:0;width:100%;min-width:0}.comparison-panel .image-frame{width:100%}.comparison-panel .portrait-evidence .image-frame{max-width:24rem;justify-self:center}.comparison-panel .image-frame img,.prototype-screen img{display:block;width:100%;height:auto;object-fit:contain;filter:none;transform:none}.prototype-screen-image{width:100%}.comparison-panel .inspect-button{justify-self:start;min-height:var(--control-size);font:var(--weight-medium) var(--type-ui)/var(--leading-ui) var(--font-sans)}.comparison-panel figcaption{display:grid;gap:var(--space-2);font-size:var(--type-ui);line-height:var(--leading-ui)}.story-main .comparison-panel .provenance{font-size:var(--type-caption);line-height:1.55}.comparison-after{position:relative;isolation:isolate;color:var(--ink);padding:var(--space-6);border:0;border-radius:calc(var(--radius-dialog) + var(--space-2));background:var(--card-gradient);box-shadow:0 18px 48px -32px var(--card-edge);transform:perspective(1400px) translateY(var(--prototype-lift, 0px)) rotateX(calc(var(--tilt-x, 0deg) * .25)) rotateY(calc(var(--tilt-y, 0deg) * .25));transition:transform var(--duration-entrance) var(--ease),box-shadow var(--duration-entrance) var(--ease)}.comparison-after:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at var(--shine-x, 85%) var(--shine-y, 10%),var(--panel),transparent 65%);opacity:.35;transition:opacity var(--duration-entrance) var(--ease)}.comparison-after .comparison-label{padding-bottom:0;margin-bottom:var(--space-5);border:0}.comparison-after .comparison-label>span{color:var(--accent-strong);background:var(--chip);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-3);font-size:var(--type-caption)}.comparison-after :is(.provenance,.comparison-context){color:var(--ink-soft)}.comparison-after .prototype-screen{gap:var(--space-5)}.comparison-after .prototype-screen-image{overflow:hidden;border-radius:var(--radius-card);background:var(--prototype-canvas)}.comparison-after .btn{color:var(--on-accent);border:0;background:var(--accent);padding:var(--space-3) var(--space-5);gap:var(--space-4)}.comparison-after .btn:hover{background:var(--accent-strong)}.comparison-after .btn>span{display:inline-block;transition:transform var(--duration-ui) var(--ease)}.comparison-after .btn:focus-visible{outline:var(--focus-width) solid var(--accent-strong);outline-offset:var(--focus-offset)}.prototype-rationale{margin-top:var(--space-6);padding-top:0;border:0;font-size:var(--type-body);line-height:var(--leading-body)}.prototype-rationale>p{margin:0 0 var(--space-4)}.prototype-rationale ul{display:grid;gap:var(--space-3);padding-left:var(--space-5);color:var(--ink-soft);margin:0}.prototype-rationale li::marker{color:var(--accent)}.comparison-context{font-size:var(--type-ui);margin:0 0 var(--space-5)}.story-main .chapter-has-prototype:not(.chapter-has-comparison) .chapter-stage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;gap:var(--space-6)}.prototype-scenario .prototype-screen-image,#performance-mobile .prototype-screen-image{max-width:24rem;justify-self:center}@media(max-width:64rem){.screen-comparison,.story-main .chapter-has-comparison>.chapter-copy,.story-main .chapter-has-prototype:not(.chapter-has-comparison) .chapter-stage{grid-template-columns:minmax(0,1fr)}.chapter-has-comparison .chapter-copy>.chapter-body{grid-column:1;grid-row:auto}.comparison-panel{padding:var(--space-4)}.comparison-after{padding:var(--space-5)}}@media(hover:hover)and (pointer:fine){[data-editorial-motion=on] .comparison-after[data-prototype-motion=on]:hover{--prototype-lift: -4px;box-shadow:0 28px 56px -30px var(--card-edge)}[data-editorial-motion=on] .comparison-after[data-prototype-motion=on]:hover:before{opacity:.6}.comparison-after[data-prototype-motion=on] .btn:hover>span{transform:translate(2px,-2px)}}.comparison-after[data-prototype-motion=off],.comparison-after[data-prototype-motion=off]:before,.comparison-after[data-prototype-motion=off] .btn>span{transform:none;transition:none}@media(prefers-reduced-motion:reduce){.comparison-after,.comparison-after:before,.comparison-after .btn>span{transform:none!important;transition:none!important}}@media(forced-colors:active){.comparison-panel,.comparison-after .btn{background:Canvas;color:CanvasText;border:1px solid CanvasText;box-shadow:none}.comparison-after:before{display:none}.comparison-after .comparison-label>span{background:Canvas}.comparison-after :is(.provenance,.comparison-label>span,.comparison-context),.prototype-rationale ul{color:CanvasText}}@media print{.screen-comparison{grid-template-columns:1fr 1fr}.comparison-panel{break-inside:avoid}.comparison-panel .inspect-button{display:none}.comparison-after{background:none;box-shadow:none;transform:none}.comparison-after:before{display:none}}