.app-screens{margin:64px var(--page-gutter) 0;gap:var(--space-24);flex-direction:column;display:flex}.app-screens-intro h2{margin:0 0 var(--space-12);font-size:var(--type-title2-size);font-weight:var(--type-title2-weight)}.app-screens-intro p{font-size:var(--type-button-size);color:var(--text-secondary);text-wrap:pretty;margin:0;line-height:1.7}.app-screens-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:clamp(24px,4vw,56px);display:grid}.app-screens-stage{box-sizing:border-box;border-radius:var(--radius-card);background:var(--surface-accent);min-width:0;padding:clamp(20px,3vw,32px)}.app-screen-figure{align-items:center;gap:var(--space-16);flex-direction:column;margin:0;display:flex}.app-screen-phone{border:6px solid var(--text-primary);background:var(--bg-app);cursor:zoom-in;touch-action:pan-y pinch-zoom;border-radius:28px;width:min(100%,340px);padding:0;display:block;overflow:hidden}.app-screen-phone img{aspect-ratio:1170/2445;object-fit:contain;width:100%;height:auto;display:block}.app-screen-hint,.app-screen-example{color:var(--text-secondary);font-size:var(--type-caption-size);margin:0;line-height:1.6}.app-screen-mobile-copy{display:none}.app-screen-controls{justify-content:center;align-items:center;gap:var(--space-24);margin-top:var(--space-16);color:var(--text-secondary);font-size:var(--type-body-size);font-variant-numeric:tabular-nums;display:flex}.app-screen-controls strong{color:var(--text-primary)}.app-screen-controls button{border-radius:var(--radius-round);background:var(--surface-card);width:44px;height:44px;color:var(--text-primary);box-shadow:var(--shadow-raised);cursor:pointer;border:0;justify-content:center;align-items:center;padding:0;display:flex}.app-screen-controls button:hover{box-shadow:var(--shadow-raised-hover)}.app-screen-options ol{gap:var(--space-8);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.app-screen-options button{align-items:flex-start;gap:var(--space-16);width:100%;padding:var(--space-16);box-sizing:border-box;border-radius:var(--radius-card);background:var(--surface-card);color:var(--text-primary);font:inherit;text-align:left;cursor:pointer;border:1px solid #0000;display:flex}.app-screen-options button[aria-pressed=true]{border-color:var(--text-accent);background:var(--surface-accent)}.app-screen-number{border-radius:var(--radius-round);background:var(--bg-app);height:36px;color:var(--text-secondary);font-size:var(--type-body-size);font-variant-numeric:tabular-nums;flex:0 0 36px;justify-content:center;align-items:center;font-weight:700;display:flex}[aria-pressed=true]>.app-screen-number{background:var(--accent-strong);color:var(--text-on-accent)}.app-screen-option-copy{gap:var(--space-4);color:var(--text-secondary);font-size:var(--type-body-size);text-wrap:pretty;flex-direction:column;line-height:1.6;display:flex}.app-screen-option-title{color:var(--text-primary);font-size:var(--type-button-size);font-weight:700}.app-screens button:focus-visible{outline:3px solid var(--text-accent);outline-offset:4px}.app-screen-controls button:hover,.app-screen-options button:hover{background:var(--surface-accent)}.app-screen-sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.app-screen-dialog{box-sizing:border-box;border-radius:var(--radius-card);background:var(--bg-app);width:min(760px,100vw - 32px);max-width:none;max-height:calc(100dvh - 32px);color:var(--text-primary);border:0;padding:0}.app-screen-dialog::backdrop{background:#000000a6}.app-screen-dialog-bar{align-items:center;gap:var(--space-8);padding:var(--space-12);background:var(--surface-card);display:flex}.app-screen-dialog-bar h3{font-size:var(--type-body-size);flex:1;margin:0}.app-screen-dialog-bar button{min-height:44px;padding:0 var(--space-12);border-radius:var(--radius-sm);background:var(--surface-card);color:var(--text-primary);box-shadow:var(--shadow-raised);font:inherit;font-size:var(--type-body-size);cursor:pointer;border:0;flex-shrink:0}.app-screen-dialog-bar button:hover{box-shadow:var(--shadow-raised-hover)}.app-screen-dialog-scroll{overscroll-behavior:contain;max-height:calc(100dvh - 120px);overflow:auto}.app-screen-dialog-scroll img{width:min(100%,600px);height:auto;margin:0 auto;display:block}.app-screen-dialog-scroll.zoomed img{width:1170px;max-width:none;margin:0}@media (width<=899px){.app-screens-layout{grid-template-columns:minmax(0,1fr)}.app-screen-options{display:none}.app-screen-mobile-copy{min-height:84px;margin-top:var(--space-16);text-align:center;display:block}.app-screen-mobile-copy h3{margin:0 0 var(--space-8);font-size:var(--type-button-size)}.app-screen-mobile-copy p{max-width:380px;font-size:var(--type-body-size);color:var(--text-secondary);text-wrap:pretty;margin:0 auto;line-height:1.7}.app-screen-figure figcaption{text-align:center;width:100%}}@media (width<=359px){.app-screen-dialog-bar{flex-wrap:wrap}.app-screen-dialog-bar h3{flex-basis:100%}.app-screen-dialog-scroll{max-height:calc(100dvh - 150px)}}