.example-experience{background:var(--paper);flex-direction:column;min-height:100dvh;padding:0;display:flex}.example-header{flex-shrink:0}.example-header>span{color:var(--muted);margin-left:auto;font-size:13px}.example-main{width:min(900px,100% - 64px);margin:12px auto 0}.example-heading{width:min(100%,calc((100svh - 275px) * var(--example-ratio)));justify-content:space-between;align-items:baseline;gap:20px;margin:0 auto 16px;display:flex}.example-heading h1{letter-spacing:-.04em;font-size:28px}.example-heading>span{color:var(--muted);white-space:nowrap;font-size:13px}.example-artwork{width:min(100%,calc((100svh - 275px) * var(--example-ratio)));border:1px solid var(--line);background:#fff;border-radius:8px;margin:auto;padding:8px}.example-stage{aspect-ratio:var(--example-ratio);background:#101512;border-radius:3px;position:relative;overflow:hidden}.example-invitation{z-index:3;color:#f8faf5;text-align:center;background:radial-gradient(at 50% 45%,#385f482e,#0000 72%);flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:20px;display:flex;position:absolute;inset:0}.example-invitation>.ui-icon{color:#9ab6a7;width:28px;height:28px}.example-invitation p{font:italic 32px/1.3 var(--serif);margin:0}.example-invitation>span{color:#bdc7bf;font-size:12px}.example-invitation .button{color:#244c40;box-shadow:none;background:#edf2ec}.example-invitation .button:hover{background:#fff}.example-controls{width:min(100%,calc((100svh - 275px) * var(--example-ratio)));align-items:center;gap:14px;margin:12px auto 0;display:flex}.example-transport{border:1px solid var(--line);background:var(--surface-white);width:42px;height:42px;color:var(--accent);border-radius:50%;flex-shrink:0;place-items:center;display:grid}.example-controls>span{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px}.example-controls progress{appearance:none;background:var(--line);min-width:0;height:3px;color:var(--accent);border:0;border-radius:4px;flex:1;overflow:hidden}.example-controls progress::-webkit-progress-bar{background:var(--line)}.example-controls progress::-webkit-progress-value{background:var(--accent)}.example-controls progress::-moz-progress-bar{background:var(--accent)}.example-caption{text-align:center;min-height:42px;margin:18px auto 12px}.example-caption>p{color:var(--muted);margin:0;font-size:13px;line-height:1.6}.example-error{text-align:center;color:#a14435;font-size:14px;line-height:1.6}.example-footer{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:20px;margin-top:0;padding:20px 24px;font-size:11px;line-height:1.6;display:flex}.example-footer a{text-underline-offset:3px;align-items:center;gap:5px;text-decoration:underline;display:inline-flex}.example-footer .ui-icon{width:12px;height:12px}@media (max-width:760px){.example-experience{padding-bottom:env(safe-area-inset-bottom)}.example-header>span{display:none}.example-main{width:calc(100% - 24px);margin:12px auto 0}.example-heading{align-items:center;gap:8px;width:100%;margin-bottom:12px}.example-heading h1{font-size:23px}.example-heading>span{font-size:11px}.example-artwork{width:100%;padding:5px}.example-stage{min-height:0}.example-invitation{gap:13px;padding:16px}.example-invitation p{font-size:25px}.example-invitation>.ui-icon{width:23px;height:23px}.example-invitation .button{min-height:46px;padding:12px 18px;font-size:13px}.example-invitation>span{font-size:11px}.example-controls{gap:12px;width:100%}.example-caption{min-height:42px;margin:16px 12px}.example-caption>p{font-size:13px}.example-footer{text-align:center;flex-direction:column;align-items:center;gap:5px;margin-top:0;padding:16px 20px}}@media (max-height:550px) and (min-width:761px){.example-heading,.example-artwork,.example-controls{width:min(100%,480px)}}.example-controls.is-idle{visibility:hidden;pointer-events:none}.example-create{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:28px;margin:8px auto 0;padding:20px 0;display:flex}.example-create h2{letter-spacing:-.04em;font-size:28px;line-height:1.2}.example-create p{color:var(--muted);margin:12px 0 0;font-size:14px;line-height:1.65}.example-create .button{flex-shrink:0}@media (max-width:760px){.example-create{flex-direction:column;align-items:stretch;gap:16px;padding:20px 8px}.example-create h2{font-size:26px}.example-create p{font-size:14px}.example-create p br{display:none}.example-create .button{width:100%}}