.echo-ticket{container-type:inline-size;display:grid;gap:var(--echo-space-6);justify-items:start;inline-size:min(100%,520px);min-inline-size:0}.echo-ticket__paper{--tk-notch:var(--echo-space-6,12px);--tk-stub:34%;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 0 var(--tk-stub);inline-size:100%;color:var(--echo-paper-ink,var(--echo-surface));background:var(--echo-paper-stock,var(--echo-text));border-radius:var(--echo-radius-lg);-webkit-mask:radial-gradient(circle var(--tk-notch) at calc(100% - var(--tk-stub)) 0,transparent 98%,var(--echo-seam)) top /100% 51% no-repeat,radial-gradient(circle var(--tk-notch) at calc(100% - var(--tk-stub)) 100%,transparent 98%,var(--echo-seam)) bottom /100% 51% no-repeat;mask:radial-gradient(circle var(--tk-notch) at calc(100% - var(--tk-stub)) 0,transparent 98%,var(--echo-seam)) top /100% 51% no-repeat,radial-gradient(circle var(--tk-notch) at calc(100% - var(--tk-stub)) 100%,transparent 98%,var(--echo-seam)) bottom /100% 51% no-repeat;filter:drop-shadow(0 8px 14px color-mix(in oklab,var(--echo-cast-ink,black) calc(.45 * var(--echo-shade, 1) * 100%),transparent))}.echo-ticket__main{display:grid;gap:var(--echo-space-3);align-content:start;padding-block:var(--echo-space-9);padding-inline:var(--echo-space-9) var(--echo-space-8);min-inline-size:0}.echo-ticket__title{margin:0;font-family:var(--echo-font-machine,ui-sans-serif,system-ui,sans-serif);font-size:var(--echo-text-lg);font-weight:var(--echo-weight-heavy,800);letter-spacing:var(--echo-tracking-tight,-.01em);line-height:var(--echo-leading-tight,1.25);overflow-wrap:anywhere}.echo-ticket__subtitle{margin:0;font-family:var(--echo-font-sans,ui-sans-serif,system-ui,sans-serif);font-size:var(--echo-text-sm)}.echo-ticket__details{display:flex;flex-wrap:wrap;gap:var(--echo-space-4) var(--echo-space-9);margin:var(--echo-space-4) 0 0}.echo-ticket__detail{display:grid;gap:var(--echo-space-1)}.echo-ticket__detail dt{font-family:var(--echo-font-machine,ui-sans-serif,system-ui,sans-serif);font-size:var(--echo-text-3xs);font-weight:var(--echo-weight-bold,700);letter-spacing:var(--echo-tracking-wider,.12em);text-transform:uppercase}.echo-ticket__detail dd{margin:0;font-family:var(--echo-font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:var(--echo-text-sm);font-weight:var(--echo-weight-bold,700)}.echo-ticket__perforation{position:relative;margin-block:var(--tk-notch);border-inline-start:var(--echo-border-thick,2px) dashed color-mix(in oklab,var(--echo-surface) 35%,transparent)}.echo-ticket__stub{display:grid;align-content:center;justify-items:center;gap:var(--echo-space-2);padding:var(--echo-space-8) var(--echo-space-6);min-inline-size:0;transition:translate var(--echo-duration-flood) var(--echo-ease-glide),rotate var(--echo-duration-flood) var(--echo-ease-glide),opacity var(--echo-duration-pop) ease}.echo-ticket__code,.echo-ticket__stub-label,.echo-ticket__used{margin:0;font-family:var(--echo-font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:var(--echo-text-2xs);letter-spacing:var(--echo-tracking-wider,.12em);text-transform:uppercase;text-align:center}.echo-ticket__barcode{display:block;inline-size:100%;block-size:40px;fill:var(--echo-surface)}.echo-ticket__used{font-family:var(--echo-font-machine,ui-sans-serif,system-ui,sans-serif);font-size:var(--echo-text-md);font-weight:var(--echo-weight-heavy,800);letter-spacing:var(--echo-tracking-widest,.25em);opacity:.55}.echo-ticket[data-tearing] .echo-ticket__stub{translate:24px 56px;rotate:8deg;opacity:0}.echo-ticket[data-used] .echo-ticket__perforation{border-inline-start-style:solid;border-inline-start-color:color-mix(in oklab,var(--echo-paper-ink,var(--echo-surface)) 20%,transparent)}@container (max-width: 360px){.echo-ticket__paper{--tk-stub:0;grid-template-columns:minmax(0,1fr);-webkit-mask:none;mask:none}.echo-ticket__perforation{margin-block:0;margin-inline:var(--echo-space-6);border-inline-start:0;border-block-start:var(--echo-border-thick,2px) dashed color-mix(in oklab,var(--echo-surface) 35%,transparent)}}@media (prefers-reduced-motion:reduce){.echo-ticket__stub{transition:opacity var(--echo-duration-swap) linear}.echo-ticket[data-tearing] .echo-ticket__stub{translate:none;rotate:none}}@media (forced-colors:active){.echo-ticket__paper{border:var(--echo-border-hairline,1px) solid CanvasText;-webkit-mask:none;mask:none;filter:none}.echo-ticket__barcode{fill:CanvasText}}