:root{--canvas: #09090b;--surface: #131316;--surface-2: #1c1c21;--border: #27272a;--text: #fafafa;--text-muted: #a1a1aa;--text-dim: #52525b;--accent: #646cff;--accent-hover: #7c83ff;--radius: 12px;--radius-sm: 8px;--maxw: 1040px;--font: "Inter", system-ui, -apple-system, sans-serif;--mono: "JetBrains Mono", ui-monospace, monospace}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:56px}body{margin:0;min-height:100vh;background:var(--canvas);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.6;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}#app{width:100%}h1,h2,h3{margin:0;line-height:1.2}a{color:var(--text-muted);text-decoration:none;transition:color .15s}a:hover{color:var(--accent)}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}img{display:block;max-width:100%}input,select{font-family:inherit;font-size:13px;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px 10px}input[type=checkbox],input[type=range]{accent-color:var(--accent);cursor:pointer}::selection{background:#646cff40}.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,32px)}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;font-size:14px;font-weight:500;border-radius:var(--radius-sm);transition:all .15s}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border)}.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}:root{--live-photo-badge-bg: rgba(64, 64, 64, .5);--live-photo-badge-hover-bg: rgba(64, 64, 64, .7);--live-photo-text-color: #fff;--live-photo-badge-border: none;--live-photo-badge-shadow: none;--live-photo-border-radius: 12px;--live-photo-transition: .3s cubic-bezier(.4, 0, .2, 1);--live-photo-progress-height: 3px;--live-photo-progress-color: #fff;--live-photo-dropdown-bg: rgba(64, 64, 64, .25);--live-photo-dropdown-button-hover: rgba(64, 64, 64, .5)}[data-theme=dark]{--live-photo-badge-bg: rgba(64, 64, 64, .5);--live-photo-badge-hover-bg: rgba(64, 64, 64, .7);--live-photo-dropdown-bg: rgba(64, 64, 64, .25);--live-photo-dropdown-button-hover: rgba(64, 64, 64, .5)}[data-theme=light]{--live-photo-badge-bg: rgba(255, 255, 255, .7);--live-photo-badge-hover-bg: rgba(255, 255, 255, .85);--live-photo-text-color: #1a1a1a;--live-photo-badge-border: 1px solid rgba(0, 0, 0, .1);--live-photo-badge-shadow: 0 1px 3px rgba(0, 0, 0, .1);--live-photo-dropdown-bg: rgba(255, 255, 255, .75);--live-photo-dropdown-button-hover: rgba(0, 0, 0, .06)}.live-photo-container{position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none}.live-photo-image,.live-photo-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);backface-visibility:hidden;will-change:transform,opacity;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none;pointer-events:none}.live-photo-video{opacity:0;transform:scale(1.02)}.live-photo-image{-webkit-touch-callout:none;opacity:1;transform:scale(1)}.live-photo-badge{display:flex;justify-content:center;align-items:center;position:absolute;left:12px;top:16px;z-index:10;background:var(--live-photo-badge-bg);border:var(--live-photo-badge-border);box-shadow:var(--live-photo-badge-shadow);border-radius:var(--live-photo-border-radius);color:var(--live-photo-text-color);cursor:pointer;height:24px;padding:0 8px;box-sizing:border-box;transition:all var(--live-photo-transition);outline:none;backdrop-filter:saturate(150%) blur(8px);-webkit-backdrop-filter:saturate(150%) blur(8px)}.live-photo-badge:hover{background:var(--live-photo-badge-hover-bg)}.live-photo-badge:focus-visible{outline:1.5px solid rgba(255,255,255,.5);outline-offset:2px}.live-photo-badge .live-text{font-size:12px;font-weight:500;margin-right:1px;margin-left:4px}.live-photo-badge .chevron{align-items:center;display:flex;height:100%;justify-content:center;opacity:0;transition:all .15s;width:8px}.live-photo-badge:hover .chevron{opacity:1;width:24px}.live-photo-badge:hover:after{content:"";position:absolute;left:0;top:24px;bottom:0;right:auto;height:40px;width:200%;background-color:transparent;z-index:10}.dropdown-menu{position:absolute;top:50px;left:12px;z-index:15;padding:4px;color:var(--live-photo-text-color);background:var(--live-photo-dropdown-bg);border-radius:var(--live-photo-border-radius);backdrop-filter:saturate(150%) blur(10px);-webkit-backdrop-filter:saturate(150%) blur(10px);cursor:pointer;display:none;min-width:140px;box-shadow:0 4px 16px #0003}.dropdown-menu.show{display:flex;flex-direction:column;gap:2px}.dropdown-menu button{display:flex;align-items:center;gap:8px;width:100%;color:var(--live-photo-text-color);border:none;border-radius:8px;padding:8px 10px;font-size:13px;line-height:1;text-align:left;white-space:nowrap;cursor:pointer;transition:background var(--live-photo-transition);background:none}.dropdown-menu button:hover{background:var(--live-photo-dropdown-button-hover)}.dropdown-menu button:focus-visible{outline:1.5px solid rgba(255,255,255,.5);outline-offset:-1px}.dropdown-menu button:focus:not(:focus-visible){outline:none}.dropdown-menu button .menu-item-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;opacity:.9}.dropdown-menu button .menu-item-icon svg{display:block;width:16px;height:16px}.dropdown-menu button .menu-item-text{flex:1}.live-photo-container.playing .live-photo-video{opacity:1;transform:scale(1.05)}.live-photo-container.playing .live-photo-image{opacity:0;transform:scale(.98)}.live-photo-badge svg{vertical-align:middle}.live-photo-badge svg circle{vector-effect:non-scaling-stroke}.live-photo-progress{position:absolute;bottom:0;left:0;width:0%;height:var(--live-photo-progress-height);background:var(--live-photo-progress-color);transition:width .2s,opacity .4s;opacity:0}@media(prefers-color-scheme:dark){[data-theme=auto]{--live-photo-badge-bg: rgba(64, 64, 64, .5);--live-photo-badge-hover-bg: rgba(64, 64, 64, .7);--live-photo-dropdown-bg: rgba(64, 64, 64, .25);--live-photo-dropdown-button-hover: rgba(64, 64, 64, .5)}}@media(prefers-color-scheme:light){[data-theme=auto]{--live-photo-badge-bg: rgba(255, 255, 255, .55);--live-photo-badge-hover-bg: rgba(255, 255, 255, .75);--live-photo-text-color: #1a1a1a;--live-photo-badge-border: 1px solid rgba(0, 0, 0, .08);--live-photo-badge-shadow: 0 1px 3px rgba(0, 0, 0, .08);--live-photo-dropdown-bg: rgba(255, 255, 255, .6);--live-photo-dropdown-button-hover: rgba(0, 0, 0, .05)}}.live-photo-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:5;background:transparent;pointer-events:auto;touch-action:pan-y pan-x}.cb[data-v-95638086]{background:var(--surface-2);border-radius:var(--radius-sm);overflow:hidden}.cb-bar[data-v-95638086]{display:flex;align-items:center;justify-content:space-between;padding:6px 14px;border-bottom:1px solid var(--border)}.cb-lang[data-v-95638086]{font-family:var(--mono);font-size:11px;color:var(--text-dim)}.cb-copy[data-v-95638086]{font-size:12px;color:var(--text-dim);padding:2px 8px;border:1px solid var(--border);border-radius:6px;transition:all .15s}.cb-copy[data-v-95638086]:hover{color:var(--accent);border-color:var(--accent)}.cb-copy.ok[data-v-95638086]{color:#4ade80;border-color:#4ade80}pre[data-v-95638086]{margin:0;padding:14px 16px;overflow-x:auto}code[data-v-95638086]{font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--text)}.sec[data-v-1837c168]{padding:80px 0}.sec-title[data-v-1837c168]{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:28px}.grid[data-v-1837c168]{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}.demo-card[data-v-1837c168]{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px}.demo-box[data-v-1837c168]{width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:8px}.side[data-v-1837c168]{display:flex;flex-direction:column;gap:16px;min-width:0}.ctrl-card[data-v-1837c168]{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.ctrl-row[data-v-1837c168]{display:flex;align-items:center;justify-content:space-between;gap:12px;height:40px;padding:0 16px;font-family:var(--mono);font-size:13px;color:var(--text-muted);border-bottom:1px solid var(--border)}.ctrl-row[data-v-1837c168]:last-child{border-bottom:none}.ctrl-val[data-v-1837c168]{display:inline-flex;align-items:center;gap:8px;color:var(--accent)}.ctrl-val input[type=range][data-v-1837c168]{width:80px}.ctrl-row input[type=text][data-v-1837c168]{width:120px}.log-card[data-v-1837c168]{margin-top:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.log-toggle[data-v-1837c168]{width:100%;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:14px;font-weight:500;color:var(--text-muted)}.arrow[data-v-1837c168]{transition:transform .2s}.arrow.open[data-v-1837c168]{transform:rotate(180deg)}.log-body[data-v-1837c168]{max-height:200px;overflow-y:auto;border-top:1px solid var(--border);font-family:var(--mono);font-size:12px}.log-empty[data-v-1837c168]{padding:20px;text-align:center;color:var(--text-dim)}.log-row[data-v-1837c168]{display:grid;grid-template-columns:60px 100px 1fr;gap:8px;padding:6px 16px;border-bottom:1px solid var(--border)}.log-row[data-v-1837c168]:last-child{border-bottom:none}.lt[data-v-1837c168]{color:var(--text-dim)}.ln[data-v-1837c168]{color:var(--accent)}.li[data-v-1837c168]{color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.sec[data-v-1837c168]{padding:56px 0}.grid[data-v-1837c168]{grid-template-columns:1fr}.demo-box[data-v-1837c168]{max-width:320px;margin:0 auto}.log-row[data-v-1837c168]{grid-template-columns:1fr;gap:2px}}.sec[data-v-e672b69e]{padding:80px 0}.sec-title[data-v-e672b69e]{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:28px}.block[data-v-e672b69e]{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}.block+.block[data-v-e672b69e]{margin-top:20px}.block-title[data-v-e672b69e]{font-size:15px;font-weight:500;margin-bottom:16px;color:var(--text-muted)}.demos[data-v-e672b69e]{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}.demo-cell[data-v-e672b69e]{display:flex;flex-direction:column;gap:6px}.lbl[data-v-e672b69e]{font-family:var(--mono);font-size:12px;color:var(--text-dim)}.sq[data-v-e672b69e]{width:160px;height:160px;overflow:hidden;border-radius:8px;border:1px solid var(--border)}.store-btns[data-v-e672b69e]{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}@media(max-width:768px){.sec[data-v-e672b69e]{padding:56px 0}.sq[data-v-e672b69e]{width:140px;height:140px}}.sec[data-v-526d205d]{padding:80px 0}.sec-title[data-v-526d205d]{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:28px}.card[data-v-526d205d]{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}.pick[data-v-526d205d]{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.hint[data-v-526d205d]{font-size:13px;color:var(--text-dim)}.err[data-v-526d205d]{margin:8px 0 0;font-size:13px;color:#f87171}.result[data-v-526d205d]{margin-top:16px}.preview[data-v-526d205d]{width:100%;max-width:300px;aspect-ratio:4/5;overflow:hidden;border-radius:8px;border:1px solid var(--border)}.dl-row[data-v-526d205d]{display:flex;gap:8px;margin-top:12px}@media(max-width:768px){.sec[data-v-526d205d]{padding:56px 0}}.nav[data-v-47fe0c4b]{position:sticky;top:0;z-index:50;height:48px;background:var(--canvas);border-bottom:1px solid var(--border)}.nav-inner[data-v-47fe0c4b]{height:100%;display:flex;align-items:center;justify-content:space-between}.brand[data-v-47fe0c4b]{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--text)}.brand[data-v-47fe0c4b]:hover{color:var(--text)}.brand-logo[data-v-47fe0c4b]{width:20px;height:20px}.nav-links[data-v-47fe0c4b]{display:flex;gap:clamp(14px,3vw,24px);font-size:14px}.opening[data-v-47fe0c4b]{width:100%;max-width:var(--maxw);margin:0 auto;padding:32px clamp(16px,4vw,32px) 0}.opening-frame[data-v-47fe0c4b]{width:100%;aspect-ratio:16 / 10;overflow:hidden;border-radius:var(--radius);border:1px solid var(--border)}.ft[data-v-47fe0c4b]{border-top:1px solid var(--border);margin-top:80px}.ft-inner[data-v-47fe0c4b]{display:flex;align-items:center;justify-content:space-between;padding:24px clamp(16px,4vw,32px);font-size:13px;color:var(--text-dim)}@media(max-width:640px){.nav-links a[data-v-47fe0c4b]:not(:last-child){display:none}.opening-frame[data-v-47fe0c4b]{aspect-ratio:4 / 5}}