body{margin:0;background:#000;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}body.is-player{overflow:hidden;background:#000}body:not(.is-player){overflow:auto;background:#0b0b0b;color:#ffffffeb}.pageHidden{opacity:0!important;visibility:hidden!important;pointer-events:none!important}#fadeOverlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;z-index:9999;pointer-events:none;opacity:0;transition:opacity .3s ease-in-out}#fadeOverlay.active{opacity:1;pointer-events:auto}#homeRoot{min-height:100vh;padding:22px 18px 40px;box-sizing:border-box;display:flex;flex-direction:column;transition:opacity .3s ease-in-out}#homeRoot.pageHidden{opacity:0}#homeHeader{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}#homeSortPanel{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}#homeSortLabel{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.72}#homeSortControls{display:inline-flex;align-items:center;gap:8px;padding:8px;border-radius:999px;background:#ffffff0b;border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px #0000003d}.sortButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.1);background:#ffffff09;color:#ffffffe0;border-radius:999px;padding:8px 12px;font:inherit;font-size:12px;line-height:1;white-space:nowrap;flex:0 0 auto;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}.sortButton:hover{border-color:#6fc7ff66;background:#6fc7ff1a}.sortButton:focus-visible{outline:2px solid #9ddcff;outline-offset:3px}.sortButton:active{transform:translateY(1px)}.sortButton.is-active{color:#eaf8ff;border-color:#6fc7ff7a;background:linear-gradient(180deg,#2aa9ff3d,#2aa9ff1f);box-shadow:0 0 0 1px #6fc7ff1f inset,0 0 18px #2aa9ff29}#homeTitle{margin:0;font-size:18px;font-weight:650;letter-spacing:.02em;text-shadow:0 0 2px rgba(42,169,255,.8),0 0 4px rgba(42,169,255,.6),0 0 8px rgba(42,169,255,.4),0 0 12px rgba(42,169,255,.3),0 0 16px rgba(42,169,255,.2)}#homeSub{margin:4px 0 0;font-size:12px;opacity:.75;text-shadow:0 0 2px rgba(42,169,255,.6),0 0 4px rgba(42,169,255,.5),0 0 6px rgba(42,169,255,.3),0 0 8px rgba(42,169,255,.2)}#demoGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}#demoGrid.is-sorting .demoCard{pointer-events:none}@media (max-width: 480px){#homeHeader{align-items:stretch;flex-direction:column}#homeSortPanel{margin-left:0;justify-content:flex-start}#homeSortControls{width:100%;justify-content:flex-start;flex-wrap:wrap;border-radius:16px}#demoGrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}}@media (max-width: 320px){#demoGrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}}@media (max-width: 360px){#demoGrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}}#homeIntro{margin-top:18px;padding:14px 14px 16px;border-radius:12px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);width:400px;float:left}#homeIntro h2{margin:0 0 10px;font-size:15px;font-weight:700;letter-spacing:.01em;line-height:1.25}#homeIntro p{margin:0;font-size:12.5px;line-height:1.5;opacity:.86}#homeIntro p+p{margin-top:10px}#homeFooter{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);text-align:center;font-size:12px;opacity:.85;clear:both}#homeFooter a{color:#6fc7ff;text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.18em}#homeFooter a:hover{color:#9ddcff}#homeFooter a:focus-visible,#backLink:focus-visible{outline:2px solid #9ddcff;outline-offset:3px;border-radius:4px}.demoCard{display:grid;grid-template-rows:auto auto;border-radius:10px;overflow:hidden;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);text-decoration:none;color:inherit;transform-origin:center center;will-change:transform}@keyframes demoCardBloom{0%{border-color:#ffffff8c;box-shadow:0 0 0 1px #ffffff29 inset,0 0 10px #ffffff2e,0 0 18px #ffffff1a}50%{border-color:#ffffffeb;box-shadow:0 0 0 1px #ffffff61 inset,0 0 16px #ffffff52,0 0 28px #ffffff2e}to{border-color:#ffffffb3;box-shadow:0 0 0 1px #ffffff3d inset,0 0 12px #ffffff3d,0 0 22px #ffffff24}}@media (hover: hover) and (pointer: fine){.demoCard:hover{animation:demoCardBloom 1s ease-in-out infinite}}.demoCard:focus-visible{outline:2px solid rgba(42,169,255,.95);outline-offset:2px}.demoThumb{width:100%;aspect-ratio:16 / 9;max-height:124px;background:#00000073;display:block;overflow:hidden}.demoThumb img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.02)}.demoThumb .thumbLoading{font-size:12px;opacity:.65}@media (max-width: 360px){.demoCard{grid-template-rows:auto auto}.demoThumb{aspect-ratio:16 / 9;max-height:100px}}.demoMeta{padding:10px 10px 12px;display:grid;gap:6px}.demoNameRow{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.demoName{font-size:13px;font-weight:650;line-height:1.2;min-width:0}.demoTypeBadge{flex:0 0 auto;font-size:13px;font-weight:650;line-height:1.2;text-transform:lowercase;letter-spacing:.04em}.demoDesc{font-size:12px;opacity:.78;line-height:1.3}.pillRow{display:flex;flex-wrap:wrap;gap:2px}.pill{font-size:11px;padding:2px 6px;border-radius:999px;background:#ffffff17;border:1px solid rgba(255,255,255,.12);opacity:.9}@media (max-width: 360px){.demoMeta{padding:8px;gap:4px}.demoName{font-size:12px;line-height:1.15}.demoTypeBadge{font-size:10px}.demoDesc{font-size:11px;line-height:1.25}.pill{font-size:10px;padding:2px 5px}}#playerRoot{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;transition:opacity .3s ease-in-out}#playerRoot.pageHidden{opacity:0}#demoTopbar{position:absolute;left:10px;top:10px;z-index:3;display:flex;gap:10px;align-items:center;padding:6px 8px;border-radius:10px;background:#00000073;border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .2s ease}#demoTopbar.hidden{opacity:0;pointer-events:none}#demoCompressionBadge{position:absolute;right:10px;top:10px;z-index:3;display:flex;gap:10px;align-items:center;padding:6px 8px;border-radius:10px;background:#00000073;border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .2s ease;color:#ffffffeb;font-size:12px;opacity:.9}#demoCompressionBadge.hidden{opacity:0;pointer-events:none}#backLink{color:#ffffffeb;text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.18em;font-size:12px}#demoTitle{color:#ffffffeb;font-size:12px;opacity:.9;max-width:min(70vw,680px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#app{width:100%;height:100%;display:block}#controls{position:absolute;left:0;right:0;bottom:0;padding:10px;display:grid;grid-template-columns:auto 1fr auto auto auto;grid-template-rows:auto auto;gap:8px;align-items:center;background:linear-gradient(to top,#000000bf,#0000);transition:opacity .2s ease}#controls.hidden{opacity:0;pointer-events:none}#playPause{grid-column:1;grid-row:2}#seek{grid-column:1 / -1;grid-row:1;width:100%}#seek{--buffer-gradient: linear-gradient(to right, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .16) 100%);background:transparent}#seek{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:16px}#seek::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--buffer-gradient);cursor:pointer}#seek::-moz-range-track{height:6px;border-radius:999px;background:var(--buffer-gradient);cursor:pointer}#seek::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#2aa9ff;cursor:pointer;margin-top:-4px;box-shadow:0 0 0 2px #0003}#seek::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:#2aa9ff;cursor:pointer;box-shadow:0 0 0 2px #0003}#seek:focus,#seek:focus-visible{outline:none;box-shadow:none}#seek::-moz-focus-outer{border:0}#time{grid-column:3;grid-row:2;color:#fff;font-size:12px;white-space:nowrap;opacity:.9}#volumeWrap{grid-column:4;grid-row:2;display:inline-flex;gap:6px;align-items:center;color:#fff;font-size:12px;white-space:nowrap}#volumeValue{display:inline-block;width:4ch;text-align:right;font-variant-numeric:tabular-nums;flex:0 0 4ch}#volume{width:110px}#volume:disabled{opacity:.45;cursor:not-allowed}#fullscreen{grid-column:5;grid-row:2}#displayModes{grid-column:2;grid-row:2;justify-self:center;align-self:center;display:inline-flex;align-items:center;gap:6px;padding:4px 6px;border-radius:10px;background:#00000040;border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#displayModes .modeBtn{display:inline-grid;place-items:center;width:28px;height:26px;padding:0;border-radius:8px;font-size:12px;line-height:1;font-weight:650;letter-spacing:.02em;background:#ffffff1f;border:1px solid rgba(255,255,255,.18);color:#ffffffeb}#displayModes .iconButton{width:32px;height:26px;border-radius:8px}#displayModes .modeBtn:hover{background:#ffffff2e}#displayModes .modeBtn[aria-pressed=true],#displayModes .iconButton[aria-pressed=true]{background:#2aa9ff4d;border-color:#2aa9ffa6}#displayModes .modeBtn:focus-visible,#displayModes .modeBtn:focus{outline:none;box-shadow:none}#displayModes .modeBtn::-moz-focus-inner{border:0}button{background:#ffffffe6;border:1px solid rgba(0,0,0,.3);border-radius:4px;padding:4px 8px;font-size:12px;cursor:pointer}#controls .iconButton{display:inline-grid;place-items:center;width:34px;height:30px;padding:0;background:#ffffff24;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#ffffffeb}#controls .iconButton:hover{background:#fff3}#controls .iconButton:active{transform:translateY(.5px)}#controls .iconButton:focus-visible{outline:2px solid rgba(42,169,255,.95);outline-offset:2px}#controls .btnIcon{width:18px;height:18px;display:block;fill:currentColor}@media (max-width: 720px){#controls{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto auto;align-items:center}#seek{grid-column:1 / -1;grid-row:1}#playPause{grid-column:1;grid-row:2}#displayModes{grid-column:2 / 4;grid-row:2;justify-self:stretch;overflow-x:auto;scrollbar-width:none}#displayModes::-webkit-scrollbar{display:none}#time{grid-column:1;grid-row:3}#volumeWrap{grid-column:2;grid-row:3;justify-self:stretch;min-width:0}#volume{width:100%;min-width:72px}#fullscreen{grid-column:3;grid-row:3;justify-self:end}#volumeValue{width:4ch;flex:0 0 4ch}}input[type=range]{accent-color:#2aa9ff}#loading{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#00000059;z-index:2;transition:opacity .18s ease;pointer-events:none}#loading>div{display:grid;place-items:center;text-align:center}#loading.hidden{opacity:0}#spinner{width:46px;height:46px;border-radius:50%;border:4px solid rgba(255,255,255,.25);border-top-color:#fffffff2;animation:spin .9s linear infinite}#loadingText{margin-top:10px;color:#ffffffe6;font-size:12px;letter-spacing:.03em}#pauseOverlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;z-index:2;pointer-events:none;opacity:0;transition:opacity .12s ease}#pauseOverlay.active{opacity:1}#pauseOverlay .pauseIcon{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:16px 18px;border-radius:14px;background:#00000040;border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#pauseOverlay .pauseBar{width:14px;height:64px;border-radius:8px;background:#ffffffe0;box-shadow:0 0 0 1px #00000040,0 0 18px #2aa9ff47}@keyframes spin{to{transform:rotate(360deg)}}