.glass-svg>canvas{pointer-events:none}.glass-css .glass-page{width:100%;height:100%}.glass-page{--gutter:32px;width:var(--page-width);height:var(--page-height);background:var(--paper);line-height:1.6;overflow:hidden}.glass-page p{color:var(--muted);font-size:14px}.glass-page .glass-list{height:100%;padding:32px var(--gutter);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-content:start;gap:32px;margin:0;list-style:none;display:grid}.glass-page .glass-list img{aspect-ratio:4/3;object-fit:cover;width:100%;display:block}.glass-page .glass-list h3{margin-block:16px 8px;font-size:24px;line-height:1.2}@media (width<=768px){.glass-page{--gutter:16px}}.glass-controls{--glass-height:96px;--glass-gutter:32px;--glass-selected:#5cb8ff;--selected-glass:1;z-index:2;isolation:isolate;anchor-scope:all;inset:48px calc(var(--scrollbar-size) + var(--glass-gutter)) auto var(--glass-gutter);max-width:768px;height:var(--glass-height);border-radius:calc(var(--glass-height) / 2);color:#000;-webkit-user-select:none;user-select:none;background:#fff8;grid-template-columns:repeat(3,1fr);gap:4px;margin-inline:auto;padding:2px;display:grid;position:absolute;overflow:clip;box-shadow:inset 0 2px #fff6,inset 0 -2px #fff4,0 4px 16px #0003}.glass-controls:after{content:"";z-index:-1;position-anchor:--glass-css;top:anchor(top);left:anchor(left);width:anchor-size(width);height:anchor-size(height);translate:calc(var(--selected-glass) * (100% + 4px));border-radius:calc(var(--glass-height) / 2 - 2px);pointer-events:none;transition:translate .6s var(--navigation-spring);background:#0006;position:absolute;box-shadow:inset 0 2px 4px #0002}.glass-controls:has(a:first-child.active){--selected-glass:0}.glass-controls:has(a:last-child.active){--selected-glass:2}.glass-controls.glass-controls-css{-webkit-backdrop-filter:blur(12px)saturate(1.4);backdrop-filter:blur(12px)saturate(1.4);background:#fff4}.glass-controls a{border-radius:calc(var(--glass-height) / 2 - 2px);min-width:0;color:inherit;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding-inline:8px;font-size:20px;font-weight:700;line-height:1;text-decoration:none;display:flex}.glass-controls a.active{color:var(--glass-selected)}.glass-controls svg{fill:currentColor;flex-shrink:0;width:48px;height:48px}.glass-controls a>span{white-space:nowrap;align-content:center;min-height:24px}@media (width<=768px){.glass-controls{--glass-height:88px;--glass-gutter:16px}.glass-controls .canvas-prefix{display:none}.glass-controls a{gap:0;padding-inline:4px;font-size:16px}}:root{--accent:#3223b3;--accent-soft:#e0ddfa;--paper:#fff;--ink:#1f2937;--muted:#687080;--rule:#d7d5e4;--background:#eff2f5;--canvas-background:#101114;color:var(--ink);background:var(--background);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--navigation-spring:linear(0, .08 4%, .28 8%, .52 12%, .76 16%, .94 20%, 1.04 24%, 1.08 32%, 1.04 44%, 1 56%, .98 68%, 1 88%, 1);font-family:sans-serif;font-size:16px}*{box-sizing:border-box}body{min-width:320px;margin:0}h1,h2,h3,p,figure{margin:0}h2{font-size:var(--heading-size,128px);line-height:var(--heading-height,1)}button,input,textarea{color:inherit;font-family:inherit;font-size:16px;font-weight:400;line-height:inherit}button{cursor:pointer}output{font-size:14px}button,.header a,.source-links a{-webkit-user-select:none;user-select:none}canvas{display:block}:where(.html-page){color:var(--ink);background:var(--paper);font-family:Arial,Helvetica,sans-serif;position:relative}:where(.html-page) nav{align-items:center;gap:24px;display:flex}:where(.html-page) a{color:inherit;text-decoration:none}#root{grid-template-rows:auto minmax(0,1fr);height:100dvh;display:grid}.header{z-index:2;background:var(--paper);gap:24px;min-width:0;min-height:64px;padding-inline:32px}.header h1{white-space:nowrap;font-size:16px}.header nav{gap:4px;min-width:0;padding-block:8px;display:flex;overflow-x:auto}.header a{color:var(--ink);white-space:nowrap;border-radius:24px;align-items:baseline;gap:8px;padding:12px 16px;font-weight:700;text-decoration:none;transition:color .2s;display:flex}.header a span{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.header a:hover{color:var(--accent)}.header a.active{color:var(--paper);background:var(--accent)}.header a.active span{color:inherit}@media (width<=1000px){.header{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px 24px 4px;display:grid}}.demo-viewport{min-width:0;min-height:0;position:relative}.demo-layer{z-index:0;display:grid;position:absolute;inset:0}.demo-loading{z-index:1;background:var(--background);-webkit-user-select:none;user-select:none;place-items:center;display:grid;position:absolute;inset:0}.demo-loading:after{content:"";aspect-ratio:1;border:4px solid var(--rule);border-top-color:var(--accent);border-radius:50%;width:48px;animation:.8s linear infinite loading-spin}@keyframes loading-spin{to{rotate:1turn}}.experiment{background:var(--canvas-background);min-width:0;min-height:0;position:relative;overflow:hidden}header,footer,.book-plate figcaption{justify-content:space-between;align-items:center;display:flex}.canvas-host,.book-host,.retro-host,.transition-host,.distortion-host,.transition-document,.glass-document,.glass-svg>canvas,.crt-screen>div,.crt-input,.book-host [drawable]{position:absolute;inset:0}.glass-document,.retro-document,.book-host [drawable]{transform-origin:0 0}.distortion-document{position:absolute;inset:50% auto auto 50%}.page-navigation{display:flex;position:absolute}.page-navigation button{width:var(--navigation-size,64px);height:var(--navigation-size,64px);color:var(--paper);background:#0008;border:0;border-radius:50%;place-items:center;padding:0;transition:background-color .2s;display:grid}.page-navigation button:disabled{cursor:default;opacity:.4}.page-navigation button:hover:not(:disabled){background:#000b}.page-navigation svg{width:24px;height:24px}:root{--scrollbar-size:20px;--scrollbar-track:#e0e0e0;--scrollbar-border:silver;--scrollbar-thumb:#909090;--scrollbar-thumb-hover:gray;--scrollbar-thumb-active:#606060}.scrollable{overscroll-behavior:contain;overflow-y:scroll}.scrollable::-webkit-scrollbar{width:var(--scrollbar-size)}.scrollable::-webkit-scrollbar-track{background:var(--scrollbar-track);box-shadow:inset 2px 0 var(--scrollbar-border)}.scrollable::-webkit-scrollbar-thumb{border:2px solid var(--scrollbar-track);background:var(--scrollbar-thumb)}.scrollable::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}.scrollable::-webkit-scrollbar-thumb:active{background:var(--scrollbar-thumb-active)}.scrollable::-webkit-scrollbar-button{height:var(--scrollbar-size);background:var(--scrollbar-track) no-repeat center / 12px 8px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M0 8 6 0 12 8' fill='%23505050'/%3E%3C/svg%3E");display:none}.scrollable::-webkit-scrollbar-button:hover{background-color:var(--scrollbar-border)}.scrollable::-webkit-scrollbar-button:active{background-color:var(--scrollbar-thumb)}.scrollable::-webkit-scrollbar-button:vertical:decrement:start{display:block}.scrollable::-webkit-scrollbar-button:vertical:increment:end{display:block}.scrollable::-webkit-scrollbar-button:vertical:increment:end{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M0 0 6 8 12 0' fill='%23505050'/%3E%3C/svg%3E")}