@font-face{font-family:Inter;src:url(/fonts/Inter-Variable.woff2)format("woff2");font-weight:100 900;font-style:normal;font-display:swap}:root{--color-bg:#fcfcfc;--color-surface:#fff;--color-surface-muted:#f7f7f7;--color-surface-tint:#f0f0f2;--color-border:#f0f0f0;--color-border-strong:#e6e7e9;--color-divider:#0000000d;--color-text:#1b1b1b;--color-text-strong:#111;--color-muted:#6b6b6b;--color-muted-2:#6b7078;--color-faint:#b5b5b5;--color-error:#d1453b;--color-link:#007fff;--content-width:608px;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;line-height:1.5}button,input,select,textarea{font:inherit}a{color:inherit}.feed{max-width:var(--content-width);flex-direction:column;gap:24px;margin:0 auto;padding:48px 20px 80px;display:flex}.gallery-header{justify-content:space-between;align-items:center;gap:16px;display:flex}.site-title{letter-spacing:-.02em;color:var(--color-text-strong);margin:0;font-size:23px;font-weight:500;line-height:1.3}.search-bar{box-sizing:border-box;border:1px solid var(--color-border-strong);background:var(--color-surface);border-radius:8px;flex-shrink:0;align-items:center;gap:6px;width:240px;height:32px;padding:0 6px 0 8px;display:flex}.search-bar-icon{opacity:.7;color:var(--color-muted-2);flex-shrink:0}.search-bar-input{min-width:0;color:var(--color-text);background:0 0;border:0;outline:none;flex:1;font-size:16px}.search-bar-input::placeholder{color:#6b707899}@media (width>=640px){.search-bar-input{font-size:12px}}.tag-filter{border-bottom:1px solid var(--color-border-strong);flex-wrap:wrap;align-items:center;gap:4px;display:flex}.tag-filter-trailing{align-items:center;margin-left:auto;padding:6px 0 6px 4px;display:flex}.tag-tab{color:var(--color-muted-2);font-family:var(--font-sans);cursor:pointer;background:0 0;border:0;border-bottom:1px solid #0000;align-items:center;gap:4px;margin-bottom:-1px;padding:10px 12px;font-size:12px;display:flex}.tag-tab-count{color:#6b707899;font-size:10px}.tag-tab[data-active=true]{border-bottom-color:var(--color-text-strong);color:var(--color-text-strong)}.tag-tab[data-active=true] .tag-tab-count{color:var(--color-muted-2)}.origin-filter{background:#f0f0f2b3;border-radius:8px;padding:2px;display:flex}.origin-filter-item{font-family:var(--font-sans);color:var(--color-muted-2);cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:5px;padding:4px 8px;font-size:12px;line-height:18px}.origin-filter-item[data-active=true]{background:var(--color-surface);color:var(--color-text-strong);font-weight:500;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}.feed-empty{color:var(--color-muted);text-align:center;padding:60px 0}.feed-list{flex-direction:column;gap:16px;display:flex}.experiment-card{border:1px solid var(--color-border);background:var(--color-surface);cursor:pointer;border-radius:20px;padding:8px}.experiment-card-preview{aspect-ratio:1344/620;border:1px solid var(--color-border);background:linear-gradient(#f9f9f9 0%,#f0f0f0 100%);border-radius:12px;overflow:hidden}.experiment-card-preview iframe{pointer-events:none;border:0;width:100%;height:100%}.experiment-card-caption{justify-content:space-between;align-items:baseline;gap:12px;padding:10px 4px 4px;display:flex}.experiment-card-title{color:var(--color-text-strong);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.experiment-card-meta{color:#6b707899;flex-shrink:0;align-items:baseline;gap:4px;font-size:11px;display:flex}.detail{max-width:var(--content-width);flex-direction:column;gap:32px;margin:0 auto;padding:48px 20px 80px;display:flex}.detail-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.detail-heading{flex-direction:column;gap:4px;display:flex}.detail-title{letter-spacing:-.006em;color:var(--color-text-strong);margin:0;font-size:14px;font-weight:500;line-height:20px}.detail-date{letter-spacing:-.006em;color:#0006;font-size:14px;font-weight:500;line-height:20px}.detail-close{width:24px;height:24px;color:var(--color-muted);cursor:pointer;background:0 0;border:0;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;padding:4px;text-decoration:none;display:flex}.detail-close:hover{background:var(--color-surface-muted)}.detail-intro{flex-direction:column;gap:16px;display:flex}.experiment-description{color:var(--color-text);letter-spacing:-.005em;flex-direction:column;gap:12px;font-size:14px;line-height:1.5;display:flex}.experiment-description p{margin:0}.experiment-description a{color:var(--color-link);text-decoration:none}.experiment-description a:hover{text-decoration:underline}.install-row{background:var(--color-surface-muted);border-radius:12px;justify-content:space-between;align-items:center;gap:12px;padding:12px 12px 12px 16px;display:flex}.install-command{white-space:nowrap;min-width:0;font-family:var(--font-mono);color:var(--color-text-strong);align-items:center;gap:10px;font-size:14px;display:flex;overflow-x:auto}.install-prompt{color:var(--color-faint);user-select:none}.install-row .install-copy{flex-shrink:0;position:static}.install-row .install-copy:hover{background:var(--color-surface-tint)}.section{flex-direction:column;gap:16px;display:flex}.section-header{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;gap:12px;padding-bottom:8px;display:flex}.section-title{letter-spacing:-.01em;color:var(--color-text-strong);font-size:14px;font-weight:600}.playground-body{flex-direction:column;display:flex}.slider-root{flex:1;height:100%;display:flex}.playground-frame{aspect-ratio:16/9;background:var(--color-surface-muted);border:1px solid var(--color-border);border-radius:12px 12px 0 0;overflow:hidden}.playground-frame[data-preview-theme=dark]{background:#17181a}.live-preview-frame{border:0;width:100%;height:100%}.article-nav{top:48px;left:calc(50% + var(--content-width) / 2 + 44px);width:155px;padding-bottom:40px;font-size:12px;line-height:16px;position:fixed}@media (width<=1100px){.article-nav{display:none}}.article-nav-header{color:var(--color-muted);align-items:center;gap:8px;margin-bottom:8px;display:flex}.article-nav-header svg{flex-shrink:0}.article-nav-group-title{color:var(--color-muted);font-variation-settings:"wght" 450;padding:4px 0}.article-nav-group-title[data-active=true]{color:var(--color-text-strong);font-variation-settings:"wght" 550}.article-nav-list{border-left:1px dashed #7373734d;margin:0 0 0 8px;padding:0;list-style:none}.article-nav-item{width:100%;font:inherit;font-variation-settings:"wght" 450;text-align:left;color:var(--color-muted);cursor:pointer;background:0 0;border:0;padding:4px 0 4px 10px;font-size:12px;line-height:16px;transition:color .15s;display:block}.article-nav-item:hover{color:var(--color-text-strong)}.article-nav-item[data-active=true]{color:var(--color-text-strong);font-variation-settings:"wght" 550;position:relative}.article-nav-item[data-active=true]:before{content:"";border-left:1px solid var(--color-text-strong);position:absolute;top:0;bottom:0;left:-1px}.article-frame{border:0;width:100%;height:640px;display:block;overflow:hidden}.controls-panel{background:var(--color-surface);border:1px solid var(--color-border);border-top:0;border-radius:0 0 12px 12px;flex-direction:column;gap:4px;padding:12px;display:flex}.export-code-button{border:1px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-text-strong);font-family:var(--font-sans);cursor:pointer;text-align:center;border-radius:8px;margin-top:8px;padding:8px 12px;font-size:12px;font-weight:600}.export-code-button:hover{background:var(--color-surface-muted)}.control-row{background:var(--color-bg);border:1px solid var(--color-border);border-radius:8px;align-items:center;display:flex;overflow:hidden}.control-row-slider{height:32px}.control-row-static{justify-content:space-between;padding:4px 4px 4px 12px}.control-label{color:var(--color-muted);font-size:12px}.control-value{color:var(--color-text);font-size:12px}.slider-control{flex:1;height:100%}.slider-track{align-items:center;height:100%;display:flex;position:relative}.slider-indicator{background:var(--color-surface-muted);top:0;bottom:0;position:absolute!important}.slider-thumb{background:var(--color-text);opacity:.4;border-radius:999px;width:3px;height:16px}.slider-label{color:var(--color-muted);padding-left:12px;font-size:12px;position:relative}.slider-value{color:var(--color-muted);cursor:text;border-radius:4px;margin:0 12px 0 auto;padding:1px 4px;font-size:12px;position:relative}.slider-value:hover{background:var(--color-surface-muted);color:var(--color-text)}.slider-value-input{z-index:1;border:1px solid var(--color-border);background:var(--color-bg);width:48px;color:var(--color-text);text-align:right;border-radius:4px;margin:0 12px 0 auto;padding:1px 4px;font-size:12px;position:relative}.slider-value-input:focus{border-color:var(--color-faint);outline:none}.hex-input{border:1px solid var(--color-border);background:var(--color-bg);width:76px;color:var(--color-text);font-size:11px;font-family:var(--font-mono,ui-monospace, monospace);text-align:center;border-radius:6px;margin-left:auto;padding:4px 8px}.hex-input::placeholder{color:var(--color-muted)}.hex-input:focus{border-color:var(--color-faint);outline:none}.tabs-list{gap:4px;margin-left:8px;display:flex}.tabs-tab{color:var(--color-muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:500}.tabs-tab[data-active]{background:var(--color-surface);border-color:var(--color-border);color:var(--color-text-strong)}.code-panel{border:1px solid var(--color-border);border-radius:12px;overflow:hidden}.code-tabs{border-bottom:1px solid var(--color-border);gap:2px;padding:4px 36px 4px 4px;display:flex;position:relative}.code-tab{color:var(--color-faint);font-family:var(--font-sans);cursor:pointer;background:0 0;border:0;border-radius:6px;padding:3px 8px;font-size:12px;font-weight:500}.code-tab[data-active=true]{color:var(--color-text-strong);background:#00000012}.code-copy-button{width:28px;height:28px;color:var(--color-muted);cursor:pointer;background:0 0;border:0;border-radius:6px;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;top:2px;right:4px}.code-copy-button:hover{background:var(--color-surface-muted)}.code-block-source{max-height:800px;font-size:13px;line-height:1.5;overflow:auto}.code-block-prompt{color:#0a3069;white-space:pre-wrap;max-height:800px;margin:0;padding:16px;font-size:13px;line-height:1.5;overflow:auto}.code-block-source,.code-block-source pre,.code-block-source code,.code-block-prompt,.experiment-error pre{font-family:var(--font-mono)}.code-block-source pre{margin:0;padding:16px;background-color:#f8f8f8!important}.credits-list,.version-history{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.credits-row,.version-history-entry{border-bottom:1px solid var(--color-divider);justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;display:flex}.credits-row:last-child,.version-history-entry:last-child{border-bottom:0}.version-history-entry{font-size:15px}.credits-row{font-family:var(--font-mono);font-size:13px;line-height:1.55}.credits-label{color:var(--color-muted);flex-shrink:0}.credits-value{color:var(--color-muted);text-align:right;flex-wrap:wrap;justify-content:flex-end;gap:0 4px;display:flex}.credits-value a{text-decoration:none}.credits-value a:hover{text-decoration:underline}.version-history-version{color:var(--color-muted);font-variant-numeric:tabular-nums;flex-shrink:0}.version-history-summary{color:var(--color-text-strong);flex:1}.version-history-date{color:var(--color-muted);flex-shrink:0;font-size:13px}.version-history-empty{color:var(--color-muted);font-size:14px}.experiment-error{max-width:var(--content-width);color:var(--color-muted);margin:80px auto;padding:0 20px}.experiment-error pre{white-space:pre-wrap;color:var(--color-error);font-size:13px}.login-form{flex-direction:column;gap:12px;max-width:320px;margin:120px auto;padding:0 20px;display:flex}.login-form input{border:1px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-text);border-radius:8px;padding:10px 14px}.login-form button{background:var(--color-text-strong);color:#fff;cursor:pointer;border:0;border-radius:8px;padding:10px 14px}.login-error{color:var(--color-error);font-size:13px}@media (width<=480px){.gallery-header{flex-direction:column;align-items:stretch}.search-bar{width:auto}.control-row-static,.control-row{height:auto;min-height:32px}}