/* Browser-only preset explorer for the product site. */
html{min-width:0}
body.web-demo{min-width:0}
body.web-demo .workspace{width:min(100%,1220px);align-self:center;padding:16px}
body.web-demo .content-column{position:relative}
body.web-demo .web-demo-note{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-height:38px;padding:8px 13px;border:1px solid #ffffffd9;border-radius:13px;background:linear-gradient(125deg,#ffffffdb,#e4f3ffca);color:#173567;font-size:12px;line-height:1.3}
body.web-demo .web-demo-note strong{white-space:nowrap;color:#1258e6}
body.web-demo #account-license,body.web-demo .apply-row,body.web-demo #status,body.web-demo #context,body.web-demo #glass-card-actions,body.web-demo #code-inspector,body.web-demo .bake-options,body.web-demo .actions,body.web-demo #library,body.web-demo #alive-popover footer{display:none!important}
body.web-demo .toolbar,body.web-demo[data-category="Easing"] .toolbar{display:flex!important;min-height:34px;justify-content:flex-end}
body.web-demo .fps-popover{width:min(350px,calc(100vw - 32px));box-sizing:border-box}
body.web-demo .fps-demo-intro{margin:0 0 12px;color:#42638f;font-size:11px;line-height:1.4}
body.web-demo .fps-demo-canvas{display:block;width:100%;height:auto;border:1px solid #fff;border-radius:12px}
body.web-demo .reverb-shade{width:min(350px,calc(100vw - 32px))}
body.web-demo .reverb-demo-dialog{box-sizing:border-box;overflow:auto;border:1px solid #fff;background:#edf7ff;color:#173567}
body.web-demo .reverb-demo-dialog header{display:flex;align-items:center;justify-content:space-between;gap:8px}
body.web-demo .reverb-demo-dialog h2{margin:0;font-size:16px}
body.web-demo .reverb-demo-dialog header button{width:28px;height:28px;border-radius:9px}
body.web-demo .reverb-demo-dialog p{color:#42638f;font-size:11px;line-height:1.4}
body.web-demo .reverb-demo-dialog label{display:grid;gap:5px;color:#173567;font-size:11px}
body.web-demo .reverb-demo-dialog label span{display:flex;align-items:center;gap:8px}
body.web-demo .reverb-demo-dialog input[type=range]{flex:1;min-width:0;accent-color:#146be4}
body.web-demo .reverb-demo-dialog select{height:32px;padding:4px 8px;border:1px solid #b7d5f5;border-radius:8px;background:#fff;color:#173567}
body.web-demo .reverb-demo-dialog canvas{display:block;width:100%;height:auto;margin:12px 0;border:1px solid #fff;border-radius:12px}
body.web-demo .reverb-demo-dialog output[data-status]{display:block;min-height:30px;color:#42638f;font-size:11px;line-height:1.35}
body.web-demo .reverb-demo-dialog footer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px}
body.web-demo .reverb-demo-dialog footer button{box-sizing:border-box;width:100%;min-width:0;height:48px;min-height:48px;padding:0 8px;border-radius:9px;font-size:11px}
body.web-demo #alive-popover{position:fixed;left:50%;top:50%;right:auto;transform:translate(-50%,-50%);width:min(380px,calc(100vw - 24px));max-height:calc(100vh - 22px);z-index:1001}
body.web-demo .alive-demo-canvas{display:block;width:100%;height:auto;touch-action:none;border:1px solid #fff;border-radius:13px;cursor:grab}
body.web-demo .alive-demo-canvas:active{cursor:grabbing}
body.web-demo .alive-demo-hint{margin:8px 0;color:#42638f;font-size:11px;line-height:1.35}
body.web-demo #alive-popover [data-alive-status]{display:none}
body.web-demo article{padding-bottom:12px}
body.web-demo .preview-card{position:relative;top:auto;z-index:auto;width:min(100%,520px);box-sizing:border-box;margin-inline:auto}
body.web-demo .preview canvas{height:auto;aspect-ratio:600/320}
@media(max-width:680px){body.web-demo .workspace{padding:7px}body.web-demo .web-demo-note{font-size:10px;padding:6px 9px}body.web-demo .web-demo-note strong{white-space:normal}}

/* Portaled dialogs are centered against the viewport, outside the dock. */
body.web-demo .kh-modal-shade{padding:12px;box-sizing:border-box}
body.web-demo .kh-modal-shade>#alive-popover,body.web-demo .kh-modal-shade>.fps-popover,body.web-demo .kh-modal-shade>.path-demo-dialog{position:relative;inset:auto;transform:none;margin:0;width:min(400px,100%);max-width:100%;max-height:100%;overflow:auto;box-sizing:border-box}
body.web-demo .kh-modal-shade header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
body.web-demo .kh-modal-shade header button{flex:0 0 32px;width:32px;height:32px;border-radius:9px}
body.web-demo .alive-demo-choices{display:flex;gap:8px;margin:8px 0}
body.web-demo .alive-demo-choices select{min-width:0;width:50%;height:32px;border-radius:8px;padding:4px;background:#f1f7ff;color:#173567;border:1px solid #aac4e5}
body.web-demo .path-demo-dialog{padding:18px;border-radius:20px;background:#edf7ff;color:#173567;border:1px solid #b6c9e8;box-shadow:0 18px 50px #0005}
body.web-demo .path-demo-dialog p{font-size:12px;line-height:1.4}
body.web-demo .path-demo-dialog canvas{display:block;width:100%;height:auto;touch-action:none;border-radius:12px}
body.web-demo .path-demo-dialog footer{margin-top:10px}
@media(max-width:680px){body.web-demo .reverb-shade{position:fixed;left:50%;right:auto;top:50%;transform:translate(-50%,-50%);width:min(350px,calc(100vw - 24px));max-height:calc(100dvh - 24px);z-index:1002}body.web-demo .reverb-shade>section{max-height:calc(100dvh - 24px);overflow:auto}}

body.web-demo .kh-modal-shade>.reverb-shade{position:relative;inset:auto;transform:none;margin:0;width:min(400px,100%);max-width:100%;max-height:100%;overflow:auto;padding:0;background:none}

/* Separate preview and controls: no cropped sticky canvas or hidden animation. */
body.web-demo article{display:flex;flex-direction:column;min-height:0;overflow:hidden!important;padding:12px!important;gap:10px}
body.web-demo .web-preview-stage{flex:0 0 auto;min-height:0;max-height:60%;overflow:hidden}
body.web-demo .web-preview-stage .title{margin:0 0 8px!important}
body.web-demo .web-preview-stage #description{margin:0 0 6px}
body.web-demo .web-preview-stage .preview-card{padding:6px!important;margin:0 auto!important;width:min(100%,520px)}
body.web-demo .web-preview-stage .preview{padding:0!important}
body.web-demo .web-preview-stage canvas{display:block;max-height:min(28vh,240px);width:100%;object-fit:contain}
body.web-demo .workspace-scroll{flex:1 1 0;min-height:100px;overflow:auto!important;padding:0 4px 18px!important}
body.web-demo .workspace-scroll .parameters-card{margin:0!important}
body.web-demo[data-category="Easing"] .web-preview-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;align-items:center}
body.web-demo[data-category="Easing"] .web-preview-stage .title{grid-column:1/-1}
body.web-demo .web-preview-stage .curve-card{margin:0!important;padding:8px!important}
body.web-demo .web-preview-stage #curve{height:min(25vh,200px)!important;width:100%}
body.web-demo .web-preview-stage .easing-tools{margin:0!important;padding:0!important}
body.web-demo .web-preview-stage .mini-preview{padding:8px!important}
body.web-demo .web-preview-stage .ease-transfer{display:none!important}
body.web-demo #tabs,body.web-demo #presets{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12px,#000 calc(100% - 12px),transparent)!important;mask-image:linear-gradient(to bottom,transparent,#000 12px,#000 calc(100% - 12px),transparent)!important;scroll-padding-block:16px;padding-block:16px!important}
body.web-demo .nav-bar,body.web-demo .content-column,body.web-demo article,body.web-demo .preset-panel,body.web-demo .parameters-card,body.web-demo .preview-card{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
@media(max-width:680px){body.web-demo article{padding:8px!important}body.web-demo .web-preview-stage canvas{max-height:175px}body.web-demo .web-preview-stage #curve{height:115px!important}body.web-demo .web-preview-stage .title h1{font-size:16px}}
/* Curve first, moving sample underneath, at every viewport width. */
body.web-demo[data-category="Easing"] .web-preview-stage{display:flex;flex-direction:column;align-items:stretch;gap:8px}
body.web-demo[data-category="Easing"] .web-preview-stage .curve-card{width:100%;box-sizing:border-box}
body.web-demo[data-category="Easing"] .web-preview-stage #curve{height:min(19vh,170px)!important}
body.web-demo[data-category="Easing"] .web-preview-stage .mini-preview{padding:6px 10px!important}
body.web-demo[data-category="Easing"] #easing-motion{height:54px!important;min-height:54px!important}
@media(max-width:680px){body.web-demo[data-category="Easing"] .web-preview-stage #curve{height:115px!important}}

/* The embedded web panel must fit phones after the site's outer gutters. */
@media(max-width:299px){body.web-demo>*:not(.license-shade){visibility:visible}html body.web-demo::after{display:none!important;content:none!important}body.web-demo .workspace{padding:4px}body.web-demo article{padding:6px!important}body.web-demo .web-demo-note{display:none}body.web-demo .toolbar{gap:4px}body.web-demo .toolbar button{padding-inline:7px!important}body.web-demo .title h1{font-size:15px}}
/* Preserve the graph's original proportions instead of filling a wide row. */
body.web-demo[data-category="Easing"] .web-preview-stage{max-height:none}
body.web-demo[data-category="Easing"] .web-preview-stage .curve-card{width:min(100%,320px);align-self:center}
body.web-demo[data-category="Easing"] .web-preview-stage #curve{height:auto!important;aspect-ratio:5/3;width:100%;display:block}
/* A tiled stage stays spacious while the actual graph keeps its aspect ratio. */
body.web-demo[data-category="Easing"] .web-preview-stage .curve-card{width:100%;background:linear-gradient(90deg,rgba(80,137,205,.10) 1px,transparent 1px),linear-gradient(rgba(80,137,205,.10) 1px,transparent 1px),linear-gradient(135deg,#d4eaff,#edf8ff);background-size:26px 26px,26px 26px,100% 100%;background-position:center}
body.web-demo[data-category="Easing"] .web-preview-stage #curve{width:min(100%,300px)!important;margin-inline:auto!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important}
body.web-demo[data-category="Easing"] #curve .chart-grid line{display:none}
html.dark-mode body.web-demo[data-category="Easing"] .web-preview-stage .curve-card{background:linear-gradient(90deg,#ffffff0b 1px,transparent 1px),linear-gradient(#ffffff0b 1px,transparent 1px),#20242a;background-size:26px 26px,26px 26px,100% 100%;background-position:center}
body.web-demo[data-category="Easing"] .web-preview-stage .curve-card{border:1px solid rgba(255,255,255,.9);border-radius:18px;overflow:hidden}
html.dark-mode body.web-demo[data-category="Easing"] .web-preview-stage .curve-card{border-color:#ffffff24}

/* Keep the viewport and its canvas congruent. Capping only canvas height makes
   object-fit:contain create an invisible inner frame that clips moving cards. */
body.web-demo .web-preview-stage{max-height:none}
body.web-demo .web-preview-stage .preview-card{width:min(100%,520px,calc(min(28vh,240px)*1.875 + 14px))}
body.web-demo .web-preview-stage .preview canvas{width:100%;height:auto;max-height:none;aspect-ratio:600/320;object-fit:fill}
body.web-demo[data-category="Backgrounds"] .web-preview-stage .preview-card{width:min(100%,520px,calc(min(28vh,240px)*1.777777778 + 14px))}
body.web-demo[data-category="Backgrounds"] .web-preview-stage .preview canvas{aspect-ratio:16/9}
@media(max-width:680px){body.web-demo .web-preview-stage .preview-card{width:min(100%,calc(175px*1.875 + 14px))}body.web-demo[data-category="Backgrounds"] .web-preview-stage .preview-card{width:min(100%,calc(175px*1.777777778 + 14px))}}

body.web-demo .alive-demo-canvas{border:0;box-shadow:none}
html.dark-mode body.web-demo .alive-demo-hint{color:#b9c8df}

/* A neutral lit surface keeps dark cast shadows readable in either UI theme. */
html body.web-demo[data-preset="styles.shadow"] .preview-card>.preview{
 background-color:#c7d3e1!important;
 background-image:linear-gradient(90deg,rgba(38,60,87,.045) 1px,transparent 1px),linear-gradient(rgba(38,60,87,.045) 1px,transparent 1px)!important;
 background-size:26px 26px!important;
}
html.dark-mode body.web-demo[data-preset="styles.shadow"] .preview-card>.preview{
 background-color:#c7d3e1!important;
 background-image:linear-gradient(90deg,rgba(38,60,87,.045) 1px,transparent 1px),linear-gradient(rgba(38,60,87,.045) 1px,transparent 1px)!important;
}