*{box-sizing:border-box;margin:0;padding:0}:root{--slide-aspect:834 / 1112;--slide-width:clamp(220px, 28vw, 420px);--slide-gap:clamp(16px, 3vw, 48px);--nav-gap:12px;--radius:8px}html,body{color:#fff;-webkit-text-size-adjust:100%;background:#0a0a12;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}main{justify-content:center;align-items:center;height:100%;display:flex}.carousel{flex-direction:column;justify-content:center;align-items:center;gap:32px;width:100vw;height:100vh;padding:24px 0;display:flex;position:relative}.carousel__viewport{width:100%;height:calc(var(--slide-width) / (834 / 1112));cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;max-height:70vh;position:relative;overflow:visible}.carousel__viewport.is-dragging{cursor:grabbing}.carousel__track{gap:var(--slide-gap);will-change:transform;display:flex;position:absolute;top:0;bottom:0;left:0}.slide{flex:0 0 var(--slide-width);border-radius:var(--radius);-webkit-tap-highlight-color:transparent;background:#14141c;height:100%;position:relative;overflow:hidden;box-shadow:0 12px 40px #0006}.slide canvas{pointer-events:none;width:100%;height:100%;display:block}.slide__status{letter-spacing:.04em;color:#ffffff73;pointer-events:none;place-items:center;font-size:13px;display:grid;position:absolute;inset:0}.carousel__nav{gap:var(--nav-gap);flex-shrink:0;display:flex}.carousel__arrow{border-radius:var(--radius);-webkit-backdrop-filter:blur(8px);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#0a0a128c;border:1px solid #ffffff40;place-items:center;width:48px;height:48px;padding:0;transition:background .12s,border-color .12s,transform 80ms;display:grid;position:relative}.carousel__arrow svg{width:20px;height:20px;display:block}.carousel__arrow.is-flashing,.carousel__arrow:active{background:#ffffff2e;border-color:#fff9}.carousel__arrow:active{transform:scale(.94)}@media (hover:hover){.carousel__arrow:hover{background:#ffffff2e;border-color:#fff9}}.gui{z-index:10;border-radius:var(--radius);-webkit-backdrop-filter:blur(12px);letter-spacing:.02em;background:#14141cd9;border:1px solid #ffffff1f;width:260px;max-width:calc(100vw - 32px);font-size:12px;position:fixed;top:16px;right:16px;overflow:hidden}.gui__head{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;padding:10px 12px;display:flex}.gui--collapsed .gui__head{border-bottom-color:#0000}.gui__title{text-transform:uppercase;letter-spacing:.12em;color:#ffffffa6;font-size:11px}.gui__toggle{color:#fff9;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;border-radius:4px;place-items:center;width:24px;height:24px;display:grid}.gui__toggle:active{color:#fff;background:#ffffff0f}@media (hover:hover){.gui__toggle:hover{color:#fff;background:#ffffff0f}}.gui__toggle-icon{border-bottom:1.5px solid;border-right:1.5px solid;width:10px;height:10px;transition:transform .16s;display:block;transform:rotate(-135deg)translate(-1px,-1px)}.gui--collapsed .gui__toggle-icon{transform:rotate(45deg)translate(-1px,-1px)}.gui__body{opacity:1;max-height:400px;padding:14px 16px 16px;transition:max-height .2s,opacity .16s,padding .2s}.gui--collapsed .gui__body{opacity:0;pointer-events:none;max-height:0;padding-top:0;padding-bottom:0}.gui__row{flex-direction:column;gap:6px;margin-bottom:12px;display:flex}.gui__row:last-child{margin-bottom:0}.gui__label{color:#ffffffbf;justify-content:space-between;display:flex}.gui__label .gui__value{color:#fff;font-variant-numeric:tabular-nums}.gui input[type=range]{accent-color:#fff;width:100%}.gui select{color:#fff;width:100%;font:inherit;cursor:pointer;background:#ffffff0f;border:1px solid #ffffff26;border-radius:6px;padding:6px 8px}.gui select:focus{outline:1px solid #fff6}.gui__check{cursor:pointer;color:#ffffffd9;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;display:flex}.gui__check input[type=checkbox]{accent-color:#fff;cursor:pointer;margin:0}.gui__hint{color:#ffffff73;margin-top:8px;font-size:11px;line-height:1.4}@media (max-width:600px){:root{--slide-width:clamp(180px, 70vw, 320px);--slide-gap:16px}.carousel{gap:24px;padding:16px 0}.carousel__viewport{max-height:60vh}}