:root{--system-red: #FF383C;--system-orange: #FF8A22;--system-yellow: #FFCC00;--system-green: #28C750;--system-mint: #00C7B2;--system-teal: #00BED0;--system-cyan: #2BB8E6;--system-blue: #0080F0;--system-indigo: #5B6AEF;--system-purple: #CC28E2;--system-pink: #FF2D55;--system-gray: #8E8E93;--system-gray-2: #AEAEB2;--system-gray-3: #C7C7CC;--system-gray-4: #D1D1D6;--system-gray-5: #E5E5EA;--system-gray-6: #F2F2F7;--bg: #ffffff;--bg-elevated: #f5f5f5;--bg-tertiary: #ebebeb;--text: #000000;--text-dim: #6e6e73;--text-muted: #aeaeb2;--separator: rgba(0, 0, 0, .08);--glass-bg: rgba(120, 120, 128, .04);--glass-bg-hover: rgba(120, 120, 128, .08);--glass-border: rgba(0, 0, 0, .08);--glass-border-hover: rgba(0, 0, 0, .18);--fill-primary: rgba(120, 120, 128, .2);--fill-secondary: rgba(120, 120, 128, .16);--fill-tertiary: rgba(118, 118, 128, .12);--fill-quaternary: rgba(116, 116, 128, .08);--shadow-sm: 0 4px 12px rgba(0, 0, 0, .06);--shadow-md: 0 8px 24px rgba(0, 0, 0, .08);--shadow-lg: 0 12px 28px rgba(0, 0, 0, .1), 0 4px 10px rgba(0, 0, 0, .04);--grid-columns: 32;--grid-gutter: var(--space-4);--grid-margin: var(--space-8);--grid-col: calc((100vw - var(--grid-margin) * 2 - var(--grid-gutter) * 31) / 32);--grid-span-1: var(--grid-col);--grid-span-2: calc(var(--grid-col) * 2 + var(--grid-gutter) * 1);--grid-span-3: calc(var(--grid-col) * 3 + var(--grid-gutter) * 2);--grid-span-4: calc(var(--grid-col) * 4 + var(--grid-gutter) * 3);--grid-span-5: calc(var(--grid-col) * 5 + var(--grid-gutter) * 4);--grid-span-6: calc(var(--grid-col) * 6 + var(--grid-gutter) * 5);--grid-span-8: calc(var(--grid-col) * 8 + var(--grid-gutter) * 7);--grid-span-10: calc(var(--grid-col) * 10 + var(--grid-gutter) * 9);--grid-span-12: calc(var(--grid-col) * 12 + var(--grid-gutter) * 11);--grid-span-14: calc(var(--grid-col) * 14 + var(--grid-gutter) * 13);--grid-span-16: calc(var(--grid-col) * 16 + var(--grid-gutter) * 15);--grid-span-20: calc(var(--grid-col) * 20 + var(--grid-gutter) * 19);--grid-span-24: calc(var(--grid-col) * 24 + var(--grid-gutter) * 23);--grid-span-28: calc(var(--grid-col) * 28 + var(--grid-gutter) * 27);--grid-span-32: calc(var(--grid-col) * 32 + var(--grid-gutter) * 31);--radius-xs: 4px;--radius-sm: 6px;--radius: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 26px;--radius-full: 9999px;--space-0_5: 2px;--space-1: 4px;--space-1_5: 6px;--space-2: 8px;--space-2_5: 10px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--text-2xs: 10px;--text-xs: 11px;--text-caption: 12px;--text-sm: 13px;--text-base: 15px;--text-lg: 17px;--text-xl: 20px;--text-2xl: 22px;--text-3xl: 28px;--text-4xl: 34px;--text-5xl: 48px;--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-out-quart: cubic-bezier(.25, 1, .5, 1);--ease-in-out: cubic-bezier(.45, 0, .15, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--duration-fast: .15s;--duration-normal: .25s;--duration-slow: .4s;--transition: var(--duration-normal) var(--ease-out-quart);--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;--font-mono: "SF Mono", ui-monospace, "Fira Code", "JetBrains Mono", monospace;--font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;--badge-green-bg: rgba(40, 199, 80, .15);--badge-green-fg: var(--system-green);--badge-amber-bg: rgba(255, 138, 34, .15);--badge-amber-fg: var(--system-orange);--badge-red-bg: rgba(255, 56, 60, .15);--badge-red-fg: var(--system-red);--hover-overlay: rgba(120, 120, 128, .08);--fg-secondary: var(--system-gray);--sidebar-bg: rgba(255, 255, 255, .92);--sidebar-border: rgba(0, 0, 0, .06);--sidebar-shadow: 0 0 0 .5px rgba(0, 0, 0, .03), 0 8px 40px rgba(0, 0, 0, .08), 0 2px 12px rgba(0, 0, 0, .04)}:root.dark{--system-red: #FF4245;--system-orange: #FF9230;--system-yellow: #FFD600;--system-green: #30D158;--system-mint: #00DAC3;--system-teal: #00D2E0;--system-cyan: #3CD3FE;--system-blue: #0091FF;--system-indigo: #6D7CFF;--system-purple: #DB34F2;--system-pink: #FF375F;--system-gray: #8E8E93;--system-gray-2: #636366;--system-gray-3: #48484A;--system-gray-4: #3A3A3C;--system-gray-5: #2C2C2E;--system-gray-6: #1C1C1E;--bg: #000000;--bg-elevated: #1c1c1e;--bg-tertiary: #2c2c2e;--text: #f5f5f7;--text-dim: #8e8e93;--text-muted: #636366;--separator: rgba(255, 255, 255, .06);--glass-bg: rgba(255, 255, 255, .06);--glass-bg-hover: rgba(255, 255, 255, .12);--glass-border: rgba(255, 255, 255, .08);--glass-border-hover: rgba(255, 255, 255, .18);--fill-primary: rgba(120, 120, 128, .36);--fill-secondary: rgba(120, 120, 128, .32);--fill-tertiary: rgba(118, 118, 128, .24);--fill-quaternary: rgba(118, 118, 128, .18);--shadow-sm: 0 4px 12px rgba(0, 0, 0, .2);--shadow-md: 0 8px 24px rgba(0, 0, 0, .3);--shadow-lg: 0 12px 28px rgba(0, 0, 0, .5);--badge-green-bg: rgba(48, 209, 88, .2);--badge-green-fg: var(--system-green);--badge-amber-bg: rgba(255, 146, 48, .2);--badge-amber-fg: var(--system-orange);--badge-red-bg: rgba(255, 66, 69, .2);--badge-red-fg: var(--system-red);--hover-overlay: rgba(255, 255, 255, .08);--fg-secondary: var(--system-gray);--sidebar-bg: rgba(30, 30, 32, .88);--sidebar-border: rgba(255, 255, 255, .08);--sidebar-shadow: 0 0 0 .5px rgba(0, 0, 0, .2), 0 8px 40px rgba(0, 0, 0, .35), 0 2px 12px rgba(0, 0, 0, .2)}:root{--stk-red: #FF383C;--stk-orange: #FF8A22;--stk-yellow: #FFCC00;--stk-green: #28C750;--stk-mint: #00C7B2;--stk-teal: #00BED0;--stk-cyan: #2BB8E6;--stk-blue: #0080F0;--stk-indigo: #5B6AEF;--stk-purple: #CC28E2;--stk-pink: #FF2D55;--stk-height: var(--space-8);--stk-padding: 0 var(--space-3);--stk-gap: var(--space-2);--stk-radius: var(--radius-sm);--stk-font: var(--text-sm);--stk-weight: 600;--stk-icon: var(--space-4)}:root.dark{--stk-red: #FF4245;--stk-orange: #FF9230;--stk-yellow: #FFD600;--stk-green: #30D158;--stk-mint: #00DAC3;--stk-teal: #00D2E0;--stk-cyan: #3CD3FE;--stk-blue: #0091FF;--stk-indigo: #6D7CFF;--stk-purple: #DB34F2;--stk-pink: #FF375F}.sticker{display:inline-flex;height:var(--stk-height);padding:var(--stk-padding);align-items:center;gap:var(--stk-gap);border-radius:var(--stk-radius);font-size:var(--stk-font);font-weight:var(--stk-weight);font-family:var(--font-display);white-space:nowrap;line-height:1;box-sizing:border-box}.sticker-icon{width:var(--stk-icon);height:var(--stk-icon);flex-shrink:0;display:flex;align-items:center;justify-content:center}.sticker-icon svg{width:var(--stk-icon);height:var(--stk-icon);color:currentColor}.sticker-plain{color:#fff}.sticker-plain.sticker-red{background:var(--stk-red);border:1px solid var(--stk-red)}.sticker-plain.sticker-orange{background:var(--stk-orange);border:1px solid var(--stk-orange);color:#fff}.sticker-plain.sticker-yellow{background:var(--stk-yellow);border:1px solid var(--stk-yellow);color:#000}.sticker-plain.sticker-green{background:var(--stk-green);border:1px solid var(--stk-green)}.sticker-plain.sticker-mint{background:var(--stk-mint);border:1px solid var(--stk-mint);color:#fff}.sticker-plain.sticker-teal{background:var(--stk-teal);border:1px solid var(--stk-teal);color:#fff}.sticker-plain.sticker-cyan{background:var(--stk-cyan);border:1px solid var(--stk-cyan)}.sticker-plain.sticker-blue{background:var(--stk-blue);border:1px solid var(--stk-blue)}.sticker-plain.sticker-indigo{background:var(--stk-indigo);border:1px solid var(--stk-indigo)}.sticker-plain.sticker-purple{background:var(--stk-purple);border:1px solid var(--stk-purple)}.sticker-plain.sticker-pink{background:var(--stk-pink);border:1px solid var(--stk-pink)}.sticker-plain.sticker-black{background:#000;border:1px solid #000}:root.dark .sticker-plain.sticker-black{background:#fff;border-color:#fff;color:#000}.sticker-plain.sticker-white{background:#fff;border:1px solid #fff;color:#000}:root.dark .sticker-plain.sticker-white{background:#1c1c1e;border-color:#1c1c1e;color:#f5f5f7}.sticker-outline{background:transparent}.sticker-outline.sticker-red{border:1px solid var(--stk-red);color:var(--stk-red)}.sticker-outline.sticker-orange{border:1px solid var(--stk-orange);color:var(--stk-orange)}.sticker-outline.sticker-yellow{border:1px solid var(--stk-yellow);color:var(--stk-yellow)}.sticker-outline.sticker-green{border:1px solid var(--stk-green);color:var(--stk-green)}.sticker-outline.sticker-mint{border:1px solid var(--stk-mint);color:var(--stk-mint)}.sticker-outline.sticker-teal{border:1px solid var(--stk-teal);color:var(--stk-teal)}.sticker-outline.sticker-cyan{border:1px solid var(--stk-cyan);color:var(--stk-cyan)}.sticker-outline.sticker-blue{border:1px solid var(--stk-blue);color:var(--stk-blue)}.sticker-outline.sticker-indigo{border:1px solid var(--stk-indigo);color:var(--stk-indigo)}.sticker-outline.sticker-purple{border:1px solid var(--stk-purple);color:var(--stk-purple)}.sticker-outline.sticker-pink{border:1px solid var(--stk-pink);color:var(--stk-pink)}.sticker-outline.sticker-black{border:1px solid var(--text);color:var(--text)}.sticker-tint{background:transparent}.sticker-tint.sticker-red{background:#ff383c1f;color:var(--stk-red)}.sticker-tint.sticker-orange{background:#ff8a221f;color:var(--stk-orange)}.sticker-tint.sticker-yellow{background:#ffcc001f;color:var(--stk-yellow)}.sticker-tint.sticker-green{background:#28c7501f;color:var(--stk-green)}.sticker-tint.sticker-mint{background:#00c7b21f;color:var(--stk-mint)}.sticker-tint.sticker-teal{background:#00bed01f;color:var(--stk-teal)}.sticker-tint.sticker-cyan{background:#2bb8e61f;color:var(--stk-cyan)}.sticker-tint.sticker-blue{background:#0080f01f;color:var(--stk-blue)}.sticker-tint.sticker-indigo{background:#5b6aef1f;color:var(--stk-indigo)}.sticker-tint.sticker-purple{background:#cc28e21f;color:var(--stk-purple)}.sticker-tint.sticker-pink{background:#ff2d551f;color:var(--stk-pink)}.sticker-tint.sticker-black{background:#0000000f;color:var(--text-dim)}:root.dark .sticker-tint.sticker-black{background:#ffffff14;color:var(--text-dim)}.sticker:has(.sticker-sm){padding-right:calc((var(--stk-height) - var(--space-5)) / 2)}.sticker-mono{font-family:var(--font-mono)}.sticker-icon-only{--stk-padding: 0;width:var(--stk-height);justify-content:center}.sticker-badge{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--space-1_5);height:calc(var(--stk-height) - var(--space-2_5));border-radius:var(--radius-xs);font-size:var(--text-2xs);font-weight:700;font-family:var(--font-mono);letter-spacing:.01em;background:#00000040;color:#fff;white-space:nowrap;line-height:1}.sticker-black .sticker-badge{background:#fff3}:root.dark .sticker-plain.sticker-black .sticker-badge{background:#0003}.sticker-yellow .sticker-badge{background:#0000002e;color:#000000d9}.sticker-copyable{cursor:pointer;transition:opacity var(--duration-fast) var(--ease-out-quart)}.sticker-copied{opacity:.5}.sticker-sm{--stk-height: var(--space-5);--stk-padding: 0 var(--space-2);--stk-gap: var(--space-1);--stk-radius: var(--radius-xs);--stk-font: var(--text-xs);--stk-icon: var(--space-3)}.glass-tag{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-xl);font-size:var(--text-xs);color:var(--text-dim);cursor:pointer;transition:background var(--duration-fast) var(--ease-out-quart),border-color var(--duration-fast) var(--ease-out-quart);white-space:nowrap;-webkit-user-select:none;user-select:none;text-transform:capitalize}.glass-tag.active{background:var(--fill-secondary);border-color:var(--glass-border-hover);color:var(--text)}.glass-tag.tag-vibe,.glass-tag.tag-grading,.glass-tag.tag-time,.glass-tag.tag-setting,.glass-tag.tag-scene,.glass-tag.tag-emotion,.glass-tag.tag-camera,.glass-tag.tag-style{border-color:var(--glass-border);color:var(--text-dim)}.glass-tag .dot{width:var(--space-1_5);height:var(--space-1_5);border-radius:50%;flex-shrink:0}@media(hover:hover)and (pointer:fine){.glass-tag:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-hover)}}.badge{display:inline-block;padding:var(--space-0_5) var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:600;background:var(--hover-overlay);color:var(--fg-secondary)}.badge-green{background:var(--badge-green-bg);color:var(--badge-green-fg)}.badge-amber{background:var(--badge-amber-bg);color:var(--badge-amber-fg)}.badge-red{background:var(--badge-red-bg);color:var(--badge-red-fg)}.big-sticker.sticker-copyable{cursor:pointer;transition:opacity var(--duration-fast) var(--ease-out-quart)}.big-sticker.sticker-copied{opacity:.5}.big-sticker{display:inline-flex;align-items:center;gap:var(--space-1_5);height:56px;padding:var(--space-1_5) var(--space-2);background:var(--bg);border:2px solid var(--glass-border);border-radius:var(--radius-lg);font-family:var(--font-display);color:var(--text);box-sizing:border-box}.big-sticker-info{display:flex;flex-direction:column;flex:1;min-width:0;text-align:right}.big-sticker-category{font-family:var(--font);font-size:5px;font-weight:400;color:var(--text-muted);text-transform:uppercase;line-height:normal;font-feature-settings:"liga" off,"clig" off}.big-sticker-title{font-family:var(--font-display);font-size:12px;font-weight:900;line-height:normal;font-feature-settings:"liga" off,"clig" off}.big-sticker-count{font-family:var(--font);font-size:7px;font-weight:400;opacity:.5;line-height:normal;font-feature-settings:"liga" off,"clig" off}.big-sticker-img{width:44px;height:44px;border-radius:var(--radius);object-fit:cover;flex-shrink:0;background:var(--fill-tertiary)}.big-sticker-white{background:#fff;color:#000;border-color:#00000014}:root.dark .big-sticker-white{background:var(--bg-elevated);color:var(--text);border-color:var(--glass-border)}.big-sticker-black{background:#000;color:#fff;border-color:#000}:root.dark .big-sticker-black{background:#fff;color:#000;border-color:#fff}:root.dark .big-sticker-black .big-sticker-category{color:#00000073}.big-sticker-red{background:var(--stk-red);color:#fff;border-color:var(--stk-red)}.big-sticker-orange{background:var(--stk-orange);color:#fff;border-color:var(--stk-orange)}.big-sticker-yellow{background:var(--stk-yellow);color:#000;border-color:var(--stk-yellow)}.big-sticker-green{background:var(--stk-green);color:#fff;border-color:var(--stk-green)}.big-sticker-blue{background:var(--stk-blue);color:#fff;border-color:var(--stk-blue)}.big-sticker-purple{background:var(--stk-purple);color:#fff;border-color:var(--stk-purple)}.big-sticker-pink{background:var(--stk-pink);color:#fff;border-color:var(--stk-pink)}.big-sticker-black .big-sticker-category,.big-sticker-red .big-sticker-category,.big-sticker-orange .big-sticker-category,.big-sticker-green .big-sticker-category,.big-sticker-blue .big-sticker-category,.big-sticker-purple .big-sticker-category,.big-sticker-pink .big-sticker-category{color:#fff9}.big-sticker-yellow .big-sticker-category{color:#00000073}.big-sticker-outline{background:transparent}.big-sticker-outline.big-sticker-red{border-color:var(--stk-red);color:var(--stk-red)}.big-sticker-outline.big-sticker-orange{border-color:var(--stk-orange);color:var(--stk-orange)}.big-sticker-outline.big-sticker-yellow{border-color:var(--stk-yellow);color:var(--stk-yellow)}.big-sticker-outline.big-sticker-green{border-color:var(--stk-green);color:var(--stk-green)}.big-sticker-outline.big-sticker-blue{border-color:var(--stk-blue);color:var(--stk-blue)}.big-sticker-outline.big-sticker-purple{border-color:var(--stk-purple);color:var(--stk-purple)}.big-sticker-outline.big-sticker-pink{border-color:var(--stk-pink);color:var(--stk-pink)}.big-sticker-outline.big-sticker-black{border-color:var(--text);color:var(--text);background:transparent}.big-sticker-outline.big-sticker-white{border-color:var(--glass-border);color:var(--text-dim);background:transparent}.big-sticker-outline .big-sticker-category{color:currentColor;opacity:.5}.big-sticker-outline .big-sticker-count{color:currentColor}.big-sticker-tint{background:transparent}.big-sticker-tint.big-sticker-red{background:#ff383c1f;color:var(--stk-red);border-color:transparent}.big-sticker-tint.big-sticker-orange{background:#ff8a221f;color:var(--stk-orange);border-color:transparent}.big-sticker-tint.big-sticker-yellow{background:#ffcc001f;color:var(--stk-yellow);border-color:transparent}.big-sticker-tint.big-sticker-green{background:#28c7501f;color:var(--stk-green);border-color:transparent}.big-sticker-tint.big-sticker-blue{background:#0080f01f;color:var(--stk-blue);border-color:transparent}.big-sticker-tint.big-sticker-purple{background:#cc28e21f;color:var(--stk-purple);border-color:transparent}.big-sticker-tint.big-sticker-pink{background:#ff2d551f;color:var(--stk-pink);border-color:transparent}.big-sticker-tint.big-sticker-black{background:#0000000f;color:var(--text-dim);border-color:transparent}:root.dark .big-sticker-tint.big-sticker-black{background:#ffffff14}.big-sticker-tint.big-sticker-white{background:#7878800f;color:var(--text-dim);border-color:transparent}.big-sticker-tint .big-sticker-category{color:currentColor;opacity:.5}.big-sticker-tint .big-sticker-count{color:currentColor}.big-sticker-icon-only{width:56px;padding:0;justify-content:center}.big-sticker-icon{width:var(--space-6);height:var(--space-6);display:flex;align-items:center;justify-content:center;color:currentColor}.big-sticker-icon svg{width:var(--space-6);height:var(--space-6)}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--radius-lg);background:#000;color:#fff;border:1px solid transparent;cursor:pointer;flex-shrink:0;transition:background var(--duration-fast) var(--ease-out-quart),transform var(--duration-fast) var(--ease-out-quart)}.icon-btn:hover{transform:scale(1.04)}.icon-btn:active{transform:scale(.97)}.icon-btn svg{width:var(--space-6);height:var(--space-6)}.icon-btn-white{background:#fff;color:#000;border:1px solid rgba(0,0,0,.08)}:root.dark .icon-btn-white{background:var(--bg-elevated);color:var(--text);border-color:var(--glass-border)}.icon-btn-red{background:var(--system-red);color:#fff}.icon-btn-orange{background:var(--system-orange);color:#fff}.icon-btn-yellow{background:var(--system-yellow);color:#000}.icon-btn-green{background:var(--system-green);color:#fff}.icon-btn-blue{background:var(--system-blue);color:#fff}.icon-btn-purple{background:var(--system-purple);color:#fff}.icon-btn-pink{background:var(--system-pink);color:#fff}.icon-btn-cyan{background:var(--system-cyan);color:#fff}.icon-btn-indigo{background:var(--system-indigo);color:#fff}.icon-btn-glass{background:#ffffff1a;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);color:#fff}.icon-btn-glass:hover{background:#ffffff29}.icon-btn-glass-light{background:#0000000a;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(0,0,0,.06);color:#1d1d1f}.icon-btn-glass-light:hover{background:#00000014}.palette-dot{width:var(--space-4);height:var(--space-4);border-radius:50%;border:1px solid var(--glass-border)}.ds-layout{display:flex;min-height:100vh;background:var(--bg-tertiary)}.ds-sidebar{position:fixed;top:calc((100vh + var(--grid-gutter)) / 32);left:calc((100vw + var(--grid-gutter)) / 32);width:var(--grid-span-4);max-height:calc((15 * 100vh - var(--grid-gutter)) / 16);display:flex;flex-direction:column;padding:var(--space-3);overflow:hidden;background:var(--sidebar-bg);border:1px solid var(--sidebar-border);border-radius:var(--radius-lg);box-shadow:var(--sidebar-shadow);z-index:10;font-family:var(--font-display);transition:max-height var(--duration-normal) var(--ease-out-quart)}.ds-canvas{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(32,1fr);grid-template-rows:repeat(32,1fr);gap:var(--grid-gutter);background:var(--bg-tertiary);overflow:hidden}.ds-pane{grid-column:8 / 27;grid-row:2 / 32;position:relative;background:var(--sidebar-bg);border:1px solid var(--sidebar-border);border-radius:var(--radius-2xl);box-shadow:var(--sidebar-shadow);overflow:hidden;display:flex;flex-direction:column;padding:0 var(--space-8)}.ds-pane-scroll{overflow-y:auto;height:100%;padding:0 var(--space-4);scrollbar-width:none}.ds-pane-scroll::-webkit-scrollbar{display:none}.ds-pane-view{background:none;border:none;box-shadow:none}.ds-pane-view .ds-pane-scroll{padding:0}.ds-pane-view .view-section{height:100%}.ds-sidebar:not(:hover){max-height:56px}.sb-header{transition:padding var(--duration-normal) var(--ease-out-quart)}.ds-sidebar:not(:hover) .sb-header{padding:var(--space-1) var(--space-1)}.sb-nav,.sb-footer{opacity:1;transition:opacity var(--duration-fast) var(--ease-out-quart)}.ds-sidebar:not(:hover) .sb-nav,.ds-sidebar:not(:hover) .sb-footer{opacity:0;pointer-events:none}.sb-header{padding:var(--space-3) var(--space-3) var(--space-4)}.sb-logo{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.1}.sb-logo-mad{font-weight:900;letter-spacing:-.06em}.sb-logo-suffix{font-weight:400}.sb-nav{display:flex;flex-direction:column;gap:var(--space-0_5)}.sb-section{display:flex;flex-direction:column}.sb-section-row{display:flex;flex-direction:row;align-items:center}.sb-section-row .sb-row{flex:1;min-width:0}.sb-row{display:flex;flex-direction:row;align-items:center;gap:var(--space-2);height:var(--space-10);padding:0 var(--space-2_5);border-radius:var(--radius-lg);font-size:var(--text-base);letter-spacing:-.24px;color:var(--text);text-decoration:none;cursor:pointer;transition:background var(--duration-fast) var(--ease-out-quart)}.sb-row:hover{background:var(--hover-overlay)}.sb-row.active{background:var(--fill-tertiary)}.sb-row.active .sb-row-icon,.sb-row.active .sb-row-label{color:var(--system-blue);font-weight:600}.sb-row-icon{width:var(--space-6);height:var(--space-6);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-dim)}.sb-row-icon svg{width:var(--space-4);height:var(--space-4)}.sb-row-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sb-chevron{display:flex;align-items:center;justify-content:center;width:var(--space-6);height:var(--space-6);border:none;background:none;color:var(--text-muted);cursor:pointer;border-radius:var(--radius);flex-shrink:0;transition:transform var(--duration-fast) var(--ease-out-quart),background var(--duration-fast) var(--ease-out-quart)}.sb-chevron:hover{background:var(--hover-overlay);color:var(--text-dim)}.sb-chevron svg{width:var(--space-3);height:var(--space-3)}.sb-chevron.expanded{transform:rotate(180deg)}.sb-children{display:flex;flex-direction:column;padding:var(--space-0_5) 0 var(--space-1) 0}.sb-child-row{display:flex;flex-direction:row;align-items:center;height:var(--space-8);padding:0 var(--space-2_5) 0 calc(var(--space-2_5) + var(--space-6) + var(--space-2));border-radius:var(--radius-lg);font-size:var(--text-sm);color:var(--text-dim);cursor:pointer;white-space:nowrap;transition:background var(--duration-fast) var(--ease-out-quart)}.sb-child-row:hover{background:var(--hover-overlay);color:var(--text)}.sb-child-row.active{background:var(--fill-tertiary);color:var(--system-blue);font-weight:600}.sb-footer{padding-top:var(--space-3);border-top:1px solid var(--separator);flex-shrink:0}.ds-unsupported{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:var(--bg);color:var(--text);flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);font-family:var(--font-display);font-size:var(--text-lg);text-align:center;padding:var(--space-8)}.ds-unsupported p{color:var(--text-dim);font-size:var(--text-base)}@media(max-width:1024px),(orientation:portrait){.ds-unsupported{display:flex}.ds-layout{display:none}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--text-sm);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:var(--space-1_5)}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--fill-tertiary);border-radius:var(--radius-xs)}.bg-grid-overlay{--grid-col-fill: rgba(0, 0, 0, .05);--grid-row-fill: rgba(255, 204, 0, .15);position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;display:grid;grid-template-columns:repeat(32,1fr);grid-template-rows:repeat(32,1fr);gap:var(--grid-gutter)}:root.dark .bg-grid-overlay{--grid-col-fill: rgba(255, 255, 255, .05);--grid-row-fill: rgba(255, 214, 0, .15)}.bg-grid-col{grid-row:1 / -1;background:var(--grid-col-fill)}.bg-grid-row{grid-column:1 / -1;background:var(--grid-row-fill)}.ds-page{max-width:1080px;margin:0 auto;padding:var(--space-16) var(--space-8)}.ds-header{margin-bottom:var(--space-16)}.ds-title{font-family:var(--font-display);font-size:var(--text-5xl);font-weight:400;line-height:1.1;margin-bottom:var(--space-3)}.ds-title-mad{font-weight:900;letter-spacing:-.06em}.ds-subtitle{font-size:var(--text-lg);color:var(--text-dim);font-weight:400}.ds-section{margin-bottom:var(--space-8)}.ds-section-title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;letter-spacing:-.03em;margin-bottom:var(--space-2)}.ds-section-desc{font-size:var(--text-sm);color:var(--text-dim);margin-bottom:var(--space-4);max-width:600px;line-height:1.6}.ds-segmented{display:inline-flex;padding:2px;background:var(--fill-tertiary);border-radius:var(--radius);margin-bottom:var(--space-6)}.ds-segmented-btn{position:relative;padding:var(--space-1) var(--space-4);border:none;background:transparent;font-family:var(--font-display);font-size:var(--text-sm);font-weight:500;color:var(--text-dim);cursor:pointer;border-radius:calc(var(--radius) - 2px);transition:color var(--duration-fast) var(--ease-out-quart),background var(--duration-fast) var(--ease-out-quart),box-shadow var(--duration-fast) var(--ease-out-quart)}.ds-segmented-btn:hover{color:var(--text)}.ds-segmented-btn.active{background:var(--sidebar-bg);color:var(--text);font-weight:600;box-shadow:0 1px 3px #00000014,0 0 0 .5px #0000000a}:root.dark .ds-segmented-btn.active{box-shadow:0 1px 3px #0000004d,0 0 0 .5px #ffffff0f}.ds-sub{margin-bottom:var(--space-4)}.ds-sub-title{font-size:var(--text-caption);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-3)}.ds-row{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}.ds-row-lg{gap:var(--space-3)}.ds-swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-3)}.ds-swatch{display:flex;flex-direction:column;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--glass-border)}.ds-swatch-color{height:var(--space-12)}.ds-swatch-info{padding:var(--space-2) var(--space-3);background:var(--bg-elevated)}.ds-swatch-name{font-size:var(--text-xs);font-weight:600;color:var(--text);margin-bottom:var(--space-0_5)}.ds-swatch-value{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-muted)}.ds-spacing-grid{display:flex;flex-direction:column;gap:var(--space-2)}.ds-spacing-item{display:flex;align-items:center;gap:var(--space-4)}.ds-spacing-bar{height:var(--space-6);background:var(--system-blue);border-radius:var(--radius-xs);opacity:.6}.ds-spacing-label{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-dim);min-width:90px;flex-shrink:0}.ds-type-row{display:flex;align-items:baseline;gap:var(--space-6);padding:var(--space-2) 0;border-bottom:1px solid var(--separator)}.ds-type-sample{font-family:var(--font-display);font-weight:600;color:var(--text);flex:1}.ds-type-meta{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-muted);flex-shrink:0}.ds-radius-grid{display:flex;flex-wrap:wrap;gap:var(--space-4)}.ds-radius-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.ds-radius-box{width:var(--space-12);height:var(--space-12);background:var(--fill-tertiary);border:1px solid var(--glass-border)}.ds-radius-label{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-muted)}.ds-emoji-grid{display:flex;flex-wrap:wrap;gap:var(--space-3)}.ds-emoji-item{font-size:var(--space-8);line-height:1;cursor:default}.ds-code{font-family:var(--font-mono);font-size:var(--text-xs);background:var(--bg-elevated);border:1px solid var(--glass-border);border-radius:var(--radius);padding:var(--space-4);overflow-x:auto;line-height:1.7;color:var(--text-dim);white-space:pre;margin-top:var(--space-3)}.ds-figma-ref{display:inline-flex;align-items:center;gap:var(--space-1_5);font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-1)}.ds-figma-ref:before{content:"";width:var(--space-3);height:var(--space-3);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 57'%3E%3Cpath fill='%23f24e1e' d='M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z'/%3E%3Cpath fill='%23ff7262' d='M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z'/%3E%3Cpath fill='%23a259ff' d='M19 0v19h9.5a9.5 9.5 0 1 0 0-19H19z'/%3E%3Cpath fill='%230acf83' d='M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z'/%3E%3Cpath fill='%231abcfe' d='M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z'/%3E%3C/svg%3E") no-repeat center;background-size:contain;flex-shrink:0}.ds-pane-header{position:sticky;top:0;z-index:5;padding:var(--space-8) var(--space-8) var(--space-3);margin:0 calc(-1 * var(--space-8)) var(--space-4);background:var(--sidebar-bg);border-bottom:1px solid var(--separator)}.ds-pane-header-title{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:700;letter-spacing:-.03em}.ds-pane-header-desc{font-size:var(--text-sm);color:var(--text-dim);margin-top:var(--space-1)}.ds-divider{border:none;border-top:1px solid var(--separator);margin:var(--space-6) 0}.views-page{display:flex;flex-direction:column}.view-section{height:100%;display:flex;flex-direction:column;padding:var(--space-6);position:relative}.view-section-gradient{background:radial-gradient(ellipse at 20% 20%,rgba(91,106,239,.4) 0%,transparent 50%),radial-gradient(ellipse at 80% 30%,rgba(204,40,226,.35) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(0,128,240,.3) 0%,transparent 50%),radial-gradient(ellipse at 10% 70%,rgba(0,199,178,.25) 0%,transparent 40%),radial-gradient(ellipse at 90% 80%,rgba(255,56,60,.2) 0%,transparent 40%),linear-gradient(135deg,#0a0a1a,#0d1117,#0a0a1a);color:#f5f5f7}.view-section-light{background:#fff;color:#1d1d1f}.view-section-dark{background:#000;color:#f5f5f7}.view-topbar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border-radius:var(--radius-xl);flex-shrink:0}.view-topbar-glass{background:#ffffff0f;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.08)}.view-topbar-glass-light{background:#00000005;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(0,0,0,.05)}.view-topbar-glass-dark{background:#ffffff0a;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.06)}.view-topbar-logo{font-family:var(--font-display);font-size:var(--text-2xl);line-height:1.1}.view-topbar-mad{font-weight:900;letter-spacing:-.06em}.view-topbar-suffix{font-weight:400}.view-topbar-stickers{display:flex;gap:var(--space-2)}.view-bento-wrapper{flex:1;display:flex;align-items:center;justify-content:center;padding-top:var(--space-4)}.view-bento{width:60%;height:80%;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:var(--space-3)}.bento-pane{display:flex;flex-direction:column;height:100%}.bento-deconstruct-section{flex-shrink:0;padding:var(--space-4) 0}.bento-deconstruct{display:flex;align-items:center;gap:var(--space-6);padding:var(--space-4) var(--space-4);border:1px solid var(--separator);border-radius:var(--radius-xl);background:var(--bg-elevated)}.bento-ratio-row{flex:1;display:flex;align-items:center;gap:var(--space-3);min-width:0}.bento-ratio-square{width:32px;height:32px;border:2px solid var(--text);border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0}.bento-ratio-shape{background:var(--text);border-radius:2px;flex-shrink:0}.bento-ratio-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);transition:opacity var(--duration-fast) var(--ease-out-quart)}.bento-ratio-dim{opacity:.15}.bento-ratio-label{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-muted);font-weight:600;white-space:nowrap}.bento-controls{flex-shrink:0;display:flex;flex-direction:row;align-items:center;gap:var(--space-2)}.bento-btn{width:32px;height:32px;border-radius:var(--radius);border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--duration-fast) var(--ease-out-quart)}.bento-btn:hover{background:var(--glass-bg-hover)}.bento-btn svg{width:var(--space-4);height:var(--space-4)}.bento-grid-area{flex:1;min-height:0;display:flex;flex-direction:row;gap:var(--space-3);margin-bottom:var(--space-6)}.bento-example-wrap{flex:1;min-height:0;padding:var(--space-3);background:var(--fill-tertiary);border-radius:var(--radius-lg);overflow:hidden;display:flex;align-items:center;justify-content:center;container-type:size}.bento-example{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,1fr);gap:var(--space-3);width:min(100cqw,calc(100cqh * var(--bento-cw) / var(--bento-ch)));height:min(100cqh,calc(100cqw * var(--bento-ch) / var(--bento-cw)))}.bento-container-ratios{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);flex-shrink:0}.bento-cr-btn{width:32px;height:32px;border-radius:var(--radius-xs);border:2px solid var(--text);background:none;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--duration-fast) var(--ease-out-quart)}.bento-cr-btn:hover{border-color:var(--text-dim);background:var(--hover-overlay)}.bento-cr-btn.active{border-color:var(--system-blue);background:var(--fill-tertiary)}.bento-cr-shape{background:var(--text);border-radius:2px}.bento-cr-btn.active .bento-cr-shape{background:var(--system-blue)}.bento-tile{border-radius:var(--radius-xl);padding:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;position:relative;container-type:size}.bento-tile-black{background:#000;color:#fff}:root.dark .bento-tile-black{background:#fff;color:#000}.bento-tile-nested{background:transparent;padding:0}.bento-nested-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,1fr);gap:var(--space-3)}.bento-nested-grid .bento-tile{border-radius:var(--radius-lg)}.bento-tile-controls{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;gap:var(--space-1_5);background:#0000008c;border-radius:inherit;z-index:2;opacity:0;animation:bento-ctrl-in var(--duration-fast) var(--ease-out-quart) forwards}@keyframes bento-ctrl-in{0%{opacity:0}to{opacity:1}}.bento-tile-ctrl{width:28px;height:28px;border-radius:var(--radius);border:1px solid rgba(255,255,255,.3);background:#ffffff26;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--duration-fast) var(--ease-out-quart)}.bento-tile-ctrl:hover{background:#ffffff4d}.bento-tile-ctrl svg{width:14px;height:14px}:root.dark .bento-tile-controls{background:#ffffff8c}:root.dark .bento-tile-ctrl{border-color:#0000004d;background:#00000026;color:#000}:root.dark .bento-tile-ctrl:hover{background:#0000004d}.bento-tile-3-2{aspect-ratio:3 / 2}.bento-tile-2-3{aspect-ratio:2 / 3}.bento-tile-1-1{aspect-ratio:1 / 1}.bento-tile-4-3{aspect-ratio:4 / 3}.bento-tile-3-4{aspect-ratio:3 / 4}.bento-tile-2-1{aspect-ratio:2 / 1}.bento-tile-lg{grid-column:span 2}.bento-tile-glass{background:#ffffff14;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);color:#f5f5f7}.view-section-light .bento-tile-glass{background:#00000008;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(0,0,0,.06);color:#1d1d1f}.bento-tile-accent{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.bento-tile-mesh{background:radial-gradient(ellipse at 30% 20%,rgba(255,138,34,.6) 0%,transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(255,56,60,.5) 0%,transparent 60%),linear-gradient(135deg,#ff8a22,#ff383c);color:#fff}.bento-tile-eyebrow{font-size:var(--text-xs);font-weight:500;text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin-bottom:var(--space-1)}.bento-tile-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;letter-spacing:-.02em;line-height:1.2}.bento-tile-detail{font-size:var(--text-sm);opacity:.6;margin-top:var(--space-1)}.bento-tile-value{font-family:var(--font-display);font-size:var(--text-5xl);font-weight:800;letter-spacing:-.04em;line-height:1}.bento-tile-caption{font-size:var(--text-sm);font-weight:500;opacity:.7;margin-top:var(--space-1)}.grid-overlay,.layout-overlay{--grid-col-fill: rgba(0, 0, 0, .05);--grid-row-fill: rgba(255, 204, 0, .15)}:root.dark .grid-overlay,:root.dark .layout-overlay{--grid-col-fill: rgba(255, 255, 255, .05);--grid-row-fill: rgba(255, 214, 0, .15)}.grid-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;-webkit-user-select:none;user-select:none}.grid-overlay-grid{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(32,1fr);grid-template-rows:repeat(32,1fr);gap:var(--grid-gutter);cursor:crosshair}.grid-overlay-row-band{background:var(--grid-row-fill);display:flex;align-items:center;justify-content:flex-end;padding-right:var(--space-1);pointer-events:none}.grid-overlay-col{background:var(--grid-col-fill);display:flex;align-items:flex-end;justify-content:center;padding-bottom:var(--space-6);pointer-events:none}.grid-zone-cell{opacity:.35;pointer-events:none}.grid-zone-drawing{opacity:.2}.grid-zone-border{position:relative;border:none;border-radius:var(--radius-2xl);pointer-events:none;z-index:4}.grid-zone-border:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:inherit;opacity:.35}.grid-zone-preview{border-radius:var(--radius-2xl);opacity:.2;pointer-events:none}.grid-zone-handle{position:absolute;width:var(--space-5);height:var(--space-5);border-radius:var(--radius-full);pointer-events:auto;box-shadow:var(--shadow-md);border:2px solid rgba(255,255,255,.6)}.grid-zone-movable{pointer-events:auto;cursor:grab}.grid-zone-handle-resize{bottom:calc(-1 * var(--space-2_5));right:calc(-1 * var(--space-2_5));cursor:nwse-resize}.grid-hint{position:fixed;z-index:14;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-8) var(--space-10);background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);text-align:center;pointer-events:none;animation:grid-hint-in var(--duration-normal) var(--ease-out-quart) both;max-width:380px}.grid-hint-icon{width:40px;height:40px;color:var(--text-tertiary)}.grid-hint-icon svg{width:100%;height:100%}.grid-hint-title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;color:var(--text)}.grid-hint-body{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.6}.grid-hint-body strong{color:var(--text);font-weight:600;font-family:var(--font-mono);font-size:var(--text-xs)}.layout-hint{top:calc((100vh + var(--grid-gutter)) / 32);left:calc((100vw + var(--grid-gutter)) / 32 + var(--grid-span-4) + var(--grid-gutter));transform:none}@keyframes grid-hint-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.layout-hint{animation-name:layout-hint-in}@keyframes layout-hint-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.grid-toolbar{position:fixed;top:calc((100vh + var(--grid-gutter)) / 32);left:calc((100vw + var(--grid-gutter)) / 32 + var(--grid-span-4) + var(--grid-gutter));z-index:15;display:flex;align-items:center;gap:var(--space-2);height:64px;padding:0 var(--space-3);background:var(--sidebar-bg);border:1px solid var(--sidebar-border);border-radius:var(--radius-2xl);box-shadow:var(--sidebar-shadow);overflow:visible}[data-tip]{position:relative}[data-tip]:after{content:attr(data-tip);position:absolute;top:calc(100% + var(--space-2));left:50%;transform:translate(-50%);padding:var(--space-2) var(--space-3);background:var(--gray-900, #1a1a1a);color:var(--gray-100, #f0f0f0);font-size:var(--text-xs);font-weight:400;line-height:1.5;white-space:pre-line;border:1px solid var(--gray-700, #444);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:none;opacity:0;transition:opacity var(--duration-fast) var(--ease-out-quart);z-index:30;max-width:280px;text-align:left;width:max-content}[data-tip]:hover:after{opacity:1}.copy-toast{position:fixed;bottom:var(--space-8);left:50%;transform:translate(-50%);z-index:40;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2_5) var(--space-4);background:var(--system-green);color:#fff;font-size:var(--text-sm);font-weight:600;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);animation:toast-in .3s var(--ease-out-quart) both,toast-out .3s var(--ease-out-quart) 1.4s both}.copy-toast svg{width:16px;height:16px;flex-shrink:0}.copy-toast code{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;opacity:.9}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(8px) scale(.95)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}@keyframes toast-out{0%{opacity:1;transform:translate(-50%) translateY(0) scale(1)}to{opacity:0;transform:translate(-50%) translateY(-4px) scale(.97)}}.layout-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;display:grid;grid-template-columns:repeat(32,1fr);grid-template-rows:repeat(32,1fr);gap:var(--grid-gutter);-webkit-user-select:none;user-select:none;background:var(--bg-tertiary)}.layout-container-wrap{position:relative;z-index:3}.layout-container-wrap-desktop{grid-column:6 / 21;grid-row:8 / 24}.layout-container-wrap-mobile{grid-column:23 / 30;grid-row:5 / 27}.layout-container{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--sidebar-bg);border:1px solid var(--sidebar-border);border-radius:var(--radius-2xl);box-shadow:var(--sidebar-shadow);overflow:hidden}.layout-container-label{position:absolute;top:calc(-1 * var(--space-8));left:0;font-size:var(--text-xs);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;line-height:var(--space-8);z-index:5;pointer-events:none}.mini-grid-bg,.mini-grid{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(32,1fr);grid-template-rows:repeat(32,1fr);gap:var(--space-1)}.mini-grid-bg{z-index:0;pointer-events:none;background:var(--bg-tertiary)}.mini-grid{z-index:1;cursor:crosshair}.mg-row{background:var(--grid-row-fill)}.mg-col{background:var(--grid-col-fill)}.mini-grid .grid-zone-handle{width:var(--space-4);height:var(--space-4)}.mini-grid .grid-zone-handle-resize{bottom:calc(-1 * var(--space-2));right:calc(-1 * var(--space-2))}.layout-expand-btn{position:absolute;top:calc(-1 * var(--space-8));right:0;z-index:6;width:var(--space-8);height:var(--space-8);border-radius:var(--radius);border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--duration-fast) var(--ease-out-quart),color var(--duration-fast) var(--ease-out-quart)}.layout-expand-btn:hover{background:var(--glass-bg-hover);color:var(--text)}.layout-expand-btn svg{width:var(--space-4);height:var(--space-4)}.layout-expanded-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:#00000080;display:flex;align-items:center;justify-content:center}:root.dark .layout-expanded-backdrop{background:#000000b3}.layout-expanded-wrap{position:relative}.layout-expanded-close{position:absolute;top:calc(-1 * var(--space-8) - var(--space-2));right:0;z-index:6;width:var(--space-8);height:var(--space-8);border-radius:var(--radius);border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--duration-fast) var(--ease-out-quart),color var(--duration-fast) var(--ease-out-quart)}.layout-expanded-close:hover{background:var(--glass-bg-hover);color:var(--text)}.layout-expanded-close svg{width:var(--space-4);height:var(--space-4)}.layout-expanded-card{position:relative;background:var(--sidebar-bg);border:1px solid var(--sidebar-border);border-radius:var(--radius-2xl);box-shadow:var(--sidebar-shadow);overflow:hidden}.layout-expanded-desktop{width:80vw;max-height:80vh;aspect-ratio:16 / 10}.layout-expanded-mobile{height:80vh;max-width:45vw;aspect-ratio:9 / 19.5}.layout-toolbar{position:fixed;top:calc((100vh + var(--grid-gutter)) / 32);left:calc((100vw + var(--grid-gutter)) / 32 + var(--grid-span-4) + var(--grid-gutter));z-index:15;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);height:64px;padding:0 var(--space-3);background:var(--sidebar-bg);border:1px solid var(--sidebar-border);border-radius:var(--radius-2xl);box-shadow:var(--sidebar-shadow);max-width:calc(100vw - (100vw + var(--grid-gutter)) / 32 - var(--grid-span-4) - var(--grid-gutter) * 2)}.layout-copy-menu{position:absolute;top:calc(100% + var(--space-2));left:50%;transform:translate(-50%);display:flex;gap:var(--space-1);padding:var(--space-1_5);background:var(--sidebar-bg);border:1px solid var(--sidebar-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:20;white-space:nowrap}.layout-copy-opt{padding:var(--space-1) var(--space-2_5);border:none;border-radius:var(--radius);background:none;color:var(--text);font-size:var(--text-xs);font-weight:500;cursor:pointer;transition:background var(--duration-fast) var(--ease-out-quart)}.layout-copy-opt:hover{background:var(--fill-tertiary)}@media(max-width:900px){.view-bento{width:90%;grid-template-columns:repeat(2,1fr)}.bento-tile-lg{grid-column:span 2}}.view01-bento{container-type:size;display:flex;align-items:center;justify-content:center}.view01-controls-card{display:inline-flex;align-items:center;height:96px;gap:var(--space-1_5);background:var(--sidebar-bg);border:1px solid var(--sidebar-border);border-radius:var(--radius-lg);box-shadow:var(--sidebar-shadow);padding:0 20px;overflow-x:auto;scrollbar-width:none}.view01-controls-card::-webkit-scrollbar{display:none}.v02-scroll{overflow-y:auto;overflow-x:hidden;padding-top:80px;padding-bottom:var(--space-8);display:flex;flex-direction:column;gap:var(--space-14, 56px)}.v02-section{display:flex;flex-direction:column;gap:var(--space-6)}.v02-section-title{font-family:var(--font-display);font-size:var(--text-4xl);font-weight:900;letter-spacing:-.06em;color:var(--text);text-transform:capitalize;padding-left:calc((6 / 32) * 100% + var(--space-3))}.v02-strip{display:flex;gap:var(--space-3);overflow-x:auto;overflow-y:hidden;padding-bottom:var(--space-2);padding-left:18.75%;scrollbar-width:none}.v02-strip:after{content:"";flex-shrink:0;width:var(--space-6)}.v02-strip::-webkit-scrollbar{display:none}.v02-bento-block{flex-shrink:0;container-type:size;display:flex;align-items:center;justify-content:center}.vtalk-card-block{position:relative;border-radius:var(--radius-xl);overflow:hidden}.vtalk-card-block .bento-card-texts{gap:var(--space-3)}.vtalk-card-block .bento-card-category{font-size:var(--text-xs)}.vtalk-card-block .bento-card-title{font-size:var(--text-3xl)}.vtalk-card-block .bento-card-body{font-size:var(--text-lg)}.vtalk-landscape .bento-card-title,.vtalk-landscape .bento-card-hero-title{font-size:var(--text-5xl)}.vtalk-landscape .bento-card-body,.vtalk-landscape .bento-card-hero-subtitle{font-size:var(--text-2xl)}.vtalk-landscape .bento-card-category,.vtalk-landscape .bento-card-hero-category{font-size:var(--text-sm)}.v02-bento-block .bento-example{width:min(100cqw,calc(100cqh * var(--bento-cw) / var(--bento-ch)));height:min(100cqh,calc(100cqw * var(--bento-ch) / var(--bento-cw)))}.big-sticker-indigo{background:var(--stk-indigo);color:#fff;border-color:var(--stk-indigo)}.big-sticker-outline.big-sticker-indigo{border-color:var(--stk-indigo);color:var(--stk-indigo);background:transparent}.big-sticker-tint.big-sticker-indigo{background:#5b6aef1f;color:var(--stk-indigo);border-color:transparent}.big-sticker-indigo .big-sticker-category{color:#fff9}.big-sticker-outline.big-sticker-indigo .big-sticker-category,.big-sticker-tint.big-sticker-indigo .big-sticker-category{color:currentColor;opacity:.5}.big-sticker-emoji{font-size:36px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}.query-chip{display:inline-flex;align-items:center;height:56px;gap:6px;padding:0 10px 0 4px;background:#000;border:2px solid #000;border-radius:var(--radius-lg);flex-shrink:0;position:relative;cursor:default}:root.dark .query-chip{background:#fff;border-color:#fff}.query-chip-thumb.mosaic-thumb{width:46px;height:46px;border-radius:6px;flex-shrink:0}.query-chip-labels{display:flex;align-items:center;gap:4px}.query-chip-labels .sticker{cursor:pointer;transition:all var(--duration-fast) var(--ease-out-quart)}.query-chip-labels .sticker:active{transform:scale(.93)}.query-chip-labels .sticker-outline:hover{color:#fff}.query-chip-labels .sticker-outline.sticker-red:hover{background:var(--stk-red);border-color:var(--stk-red)}.query-chip-labels .sticker-outline.sticker-orange:hover{background:var(--stk-orange);border-color:var(--stk-orange)}.query-chip-labels .sticker-outline.sticker-yellow:hover{background:var(--stk-yellow);border-color:var(--stk-yellow);color:#000}.query-chip-labels .sticker-outline.sticker-green:hover{background:var(--stk-green);border-color:var(--stk-green)}.query-chip-labels .sticker-outline.sticker-blue:hover{background:var(--stk-blue);border-color:var(--stk-blue)}.query-chip-labels .sticker-outline.sticker-indigo:hover{background:var(--stk-indigo);border-color:var(--stk-indigo)}.query-chip-labels .sticker-outline.sticker-purple:hover{background:var(--stk-purple);border-color:var(--stk-purple)}.query-chip-labels .sticker-outline.sticker-pink:hover{background:var(--stk-pink);border-color:var(--stk-pink)}.query-chip-labels .sticker-outline.sticker-black:hover{background:#fff;border-color:#fff;color:#000}.query-chip-labels .sticker-plain:hover{opacity:.85}.query-chip-count{font-family:var(--font-mono);font-size:11px;font-weight:400;color:#ffffff4d;padding:0 2px;letter-spacing:-.02em}:root.dark .query-chip-count{color:#0000004d}.query-chip-remove{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:var(--radius-full);border:2px solid var(--sidebar-bg);background:#78788099;color:#fff;font-size:10px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--duration-fast) var(--ease-out-quart),background var(--duration-fast) var(--ease-out-quart);z-index:2}.query-chip:hover .query-chip-remove{opacity:1}.query-chip-remove:hover{background:var(--stk-red);border-color:var(--stk-red)}.query-chip-empty{background:transparent;border:2px dashed var(--glass-border);min-width:140px;justify-content:center}:root.dark .query-chip-empty{background:transparent;border-color:var(--glass-border)}.query-chip-placeholder{font-size:var(--text-xs);color:var(--text-muted);font-style:italic}.query-union-badge{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--radius-full);background:var(--fill-tertiary);color:var(--text-muted);font-size:10px;font-weight:700;font-family:var(--font-mono);flex-shrink:0}.query-chip-add-btn{cursor:pointer;border:1px solid rgba(255,255,255,.2)!important;color:#ffffff73!important;background:#ffffff0f!important;font-weight:700;font-size:var(--text-sm);transition:all var(--duration-fast) var(--ease-out-quart)}.query-chip-add-btn:hover{background:#ffffff24!important;color:#fff!important;border-color:#ffffff59!important}:root.dark .query-chip-add-btn{border-color:#00000026!important;color:#00000059!important;background:#0000000a!important}:root.dark .query-chip-add-btn:hover{background:#0000001a!important;color:#000!important;border-color:#00000040!important}.query-add-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:18}.query-add-popover{position:fixed;z-index:19;background:var(--sidebar-bg);border:1px solid var(--sidebar-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);max-height:420px;overflow-y:auto;min-width:260px;max-width:460px;animation:filter-card-in var(--duration-fast) var(--ease-out-quart);scrollbar-width:none}.query-add-popover::-webkit-scrollbar{display:none}.query-add-cat{display:flex;flex-direction:column;gap:var(--space-1_5)}.query-add-cat-label{font-size:var(--text-caption);font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}.query-add-options{display:flex;flex-wrap:wrap;gap:var(--space-1_5)}.query-add-option{cursor:pointer;transition:transform var(--duration-fast) var(--ease-out-quart)}.query-add-option:hover{transform:scale(1.04)}.query-add-option:active{transform:scale(.96)}.filter-modal-card{width:70vw;max-width:840px;max-height:85vh;display:flex;flex-direction:column}.filter-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--separator);flex-shrink:0}.filter-modal-title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:700;letter-spacing:-.03em}.filter-modal-clear{background:none;border:none;color:var(--system-blue);font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;cursor:pointer;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);transition:opacity var(--duration-fast) var(--ease-out-quart)}.filter-modal-clear:hover{opacity:.7}.filter-modal-body{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.filter-modal-scroll{flex:1;overflow-y:auto;padding:var(--space-3) var(--space-6) var(--space-4);display:flex;flex-direction:column;gap:var(--space-4);scrollbar-width:none}.filter-modal-scroll::-webkit-scrollbar{display:none}.filter-group-tabs{display:flex;align-items:center;gap:var(--space-1_5);flex-wrap:wrap}.filter-group-tabs-union{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:700;color:var(--text-muted);padding:0 2px}.filter-group-tab{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1_5) var(--space-3);border:1px solid var(--glass-border);border-radius:var(--radius);background:var(--glass-bg);color:var(--text-dim);font-family:var(--font-display);font-size:var(--text-xs);font-weight:500;cursor:pointer;transition:all var(--duration-fast) var(--ease-out-quart);white-space:nowrap;max-width:300px;overflow:hidden;text-overflow:ellipsis}.filter-group-tab:hover{background:var(--glass-bg-hover);color:var(--text)}.filter-group-tab.active{background:var(--text);color:var(--bg);border-color:var(--text);font-weight:600}.filter-group-tab-count{font-family:var(--font-mono);font-size:var(--text-2xs);opacity:.5;margin-left:var(--space-1)}.filter-group-tab-add{font-weight:700;font-family:var(--font-mono);color:var(--text-muted);border-style:dashed}.filter-group-tab-add:hover{color:var(--text);border-style:solid}.filter-category{display:flex;flex-direction:column;gap:var(--space-2)}.mosaic-thumb{display:grid;border-radius:6px;overflow:hidden;flex-shrink:0;background:var(--fill-tertiary)}.mosaic-thumb img{width:100%;height:100%;object-fit:cover;display:block}.filter-options-grid{display:flex;flex-wrap:wrap;gap:var(--space-1_5)}.filter-big-option{display:inline-flex;align-items:center;height:56px;gap:var(--space-2);padding:4px 10px 4px 4px;background:var(--bg);border:2px solid var(--glass-border);border-radius:var(--radius-lg);cursor:pointer;transition:transform var(--duration-fast) var(--ease-out-quart),border-color var(--duration-fast) var(--ease-out-quart),background var(--duration-fast) var(--ease-out-quart);-webkit-user-select:none;user-select:none}.filter-big-option:hover{transform:scale(1.03);border-color:var(--option-color)}.filter-big-option:active{transform:scale(.97)}.filter-big-option-active{background:var(--option-color);border-color:var(--option-color);color:#fff}.filter-big-option-active .filter-big-option-count{color:#fff9}.filter-big-option-active[style*=--stk-yellow]{color:#000}.filter-big-option-other{background:color-mix(in srgb,var(--option-color) 10%,transparent);border-color:color-mix(in srgb,var(--option-color) 25%,transparent);color:var(--option-color)}.filter-big-option-other .filter-big-option-count{opacity:.6}.filter-big-option-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--fill-tertiary);border-radius:6px;flex-shrink:0;color:var(--text-dim)}.filter-big-option-icon svg{width:20px;height:20px}.filter-big-option-info{display:flex;flex-direction:column;min-width:0}.filter-big-option-label{font-family:var(--font-display);font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap}.filter-big-option-count{font-family:var(--font-mono);font-size:10px;font-weight:400;color:var(--text-muted);line-height:1.2}.filter-query-section{flex-shrink:0;border-top:1px solid var(--separator);padding:var(--space-3) var(--space-6) var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);background:var(--bg-elevated)}.filter-query-row{display:flex;align-items:center;justify-content:space-between}.filter-query-total{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:700;color:var(--text)}.filter-query-chips{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}@keyframes filter-fade-in{0%{opacity:0}to{opacity:1}}@keyframes filter-card-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.layout-expanded-backdrop.filter-backdrop{animation:filter-fade-in var(--duration-normal) var(--ease-out-quart)}.filter-modal-card{animation:filter-card-in var(--duration-normal) var(--ease-out-quart)}@media(max-width:1024px),(orientation:portrait){body.pane-about .ds-unsupported{display:none}body.pane-about .ds-layout{display:flex}body.pane-about .ds-sidebar{display:none}body.pane-about .ds-canvas{position:fixed;top:0;right:0;bottom:0;left:0;display:block}}@media(max-width:768px){.view-about .v02-scroll{padding-top:var(--space-6)}.view-about .v02-section-title{padding-left:var(--space-4);font-size:var(--text-3xl)}.view-about .v02-strip{padding-left:var(--space-4);gap:var(--space-2)}.view-about .vtalk-card-block{height:50vh}}.bento-card{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;padding:7.5%;overflow:hidden;border-radius:inherit}.bento-card-image-full{padding:0;background:#000}.bento-card-image-full img{width:100%;height:100%;object-fit:cover}.bento-card-white{background:#fff;color:#1d1d1f;box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,.08)}.bento-card-black{background:#000;color:#f5f5f7}.bento-card-texts{display:flex;flex-direction:column;gap:clamp(var(--space-1),2.5cqi,var(--space-3))}.bento-card-category{font-family:var(--font);font-size:clamp(7px,3cqi,var(--text-caption));font-weight:600;text-transform:uppercase;letter-spacing:.06em;opacity:.45;line-height:1.3}.bento-card-title{font-family:var(--font-display);font-size:clamp(14px,8cqi,var(--text-3xl));font-weight:600;letter-spacing:-.025em;line-height:1.1}.bento-card-title-sm{font-size:clamp(var(--text-caption),7cqi,var(--text-3xl))}.bento-card-body{font-family:var(--font);font-size:clamp(var(--text-2xs),4.5cqi,var(--text-lg));font-weight:400;line-height:1.45;opacity:.65;white-space:pre-wrap}.bento-card-subtitle{font-family:var(--font);font-size:clamp(9px,4cqi,var(--text-base));font-weight:400;line-height:1.35;opacity:.75}.bento-card-image-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding-top:4%}.bento-card-image{width:85%;aspect-ratio:1;max-height:100%;border-radius:clamp(var(--radius-xs),1.5cqi,var(--radius-sm));object-fit:cover;box-shadow:var(--shadow-sm)}.bento-card-project .bento-card-title{font-size:clamp(var(--text-2xs),5.5cqi,var(--text-xl))}.bento-card-project .bento-card-body{font-size:clamp(8px,3.5cqi,var(--text-base));font-weight:300}.bento-card-thumbs-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding-top:4%}.bento-card-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(2px,1cqi,var(--space-1));width:90%}.bento-card-thumb{width:100%;aspect-ratio:1;border-radius:clamp(2px,1cqi,var(--radius-xs));object-fit:cover}.bento-card-hero{padding:0}.bento-card-hero-bg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.bento-card-hero-scrim{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,#000000bf,#00000059 40%,#0000000d)}.bento-card-hero-content{position:absolute;bottom:0;left:0;right:0;padding:7.5%;display:flex;flex-direction:column;gap:clamp(2px,1.5cqi,var(--space-1_5));color:#fff}.bento-card-hero-category{font-family:var(--font);font-size:clamp(7px,2.5cqi,var(--text-caption));font-weight:600;text-transform:uppercase;letter-spacing:.06em;opacity:.7;line-height:1.3}.bento-card-hero-title{font-family:var(--font-display);font-size:clamp(12px,6cqi,var(--text-3xl));font-weight:600;letter-spacing:-.02em;line-height:1.1}.bento-card-hero-subtitle{font-family:var(--font);font-size:clamp(8px,3cqi,var(--text-base));font-weight:400;line-height:1.35;opacity:.8}.bento-card-landscape{flex-direction:row;align-items:stretch;gap:5%}.bento-card-landscape .bento-card-texts{justify-content:center;min-width:0}.bento-card-landscape-thumbs-wrap{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:40%}.bento-card-landscape .bento-card-thumbs{grid-template-columns:repeat(3,1fr);width:100%}.bento-card-edit-pill{position:absolute;top:var(--space-2);right:var(--space-2);background:var(--system-blue);color:#fff;width:28px;height:28px;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:var(--radius-full);cursor:pointer;opacity:0;transition:opacity var(--duration-fast) var(--ease-out-quart);z-index:10}.bento-card-editable:hover .bento-card-edit-pill,.bento-card-edit-pill--done{opacity:1}.bento-card-editing [contenteditable]{outline:none;border-radius:var(--radius-xs);padding:var(--space-0_5);margin:calc(-1 * var(--space-0_5));background:#0080f00f;box-shadow:0 0 0 1px #0080f033;cursor:text}.card-type-switcher{position:absolute;top:var(--space-2);right:calc(var(--space-2) + 32px);z-index:20}.vtalk-card-block:has(.card-type-switcher-menu){overflow:visible}.card-type-switcher-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;padding:0;border:none;border-radius:var(--radius-full);background:var(--system-blue);color:#fff;cursor:pointer;opacity:0;transition:opacity var(--duration-fast) var(--ease-out-quart);z-index:10}.bento-card-editable:hover~.card-type-switcher .card-type-switcher-btn,.vtalk-card-block:hover .card-type-switcher-btn{opacity:1}.card-type-switcher-menu{position:absolute;top:36px;right:0;background:#1d1d1f;border-radius:var(--radius-lg);padding:var(--space-1);display:flex;flex-direction:column;gap:var(--space-0_5);box-shadow:0 8px 32px #0006;min-width:120px}.card-type-switcher-group{display:flex;flex-direction:column}.card-type-switcher-divider{height:1px;background:#ffffff1a;margin:var(--space-0_5) 0}.card-type-switcher-option{padding:var(--space-1) var(--space-2);border:none;background:none;color:#ffffffb3;font-family:var(--font);font-size:var(--text-xs);font-weight:500;text-align:left;cursor:pointer;border-radius:var(--radius-sm);white-space:nowrap}.card-type-switcher-option:hover{background:#ffffff1a;color:#fff}.card-type-switcher-option.active{background:var(--system-blue);color:#fff}.card-showcase-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-4)}.card-showcase-item{display:flex;flex-direction:column;gap:var(--space-2)}.card-showcase-frame{position:relative;container-type:size;border-radius:var(--radius-xl);overflow:hidden;background:var(--fill-tertiary)}.card-showcase-frame-3-4{aspect-ratio:3 / 4}.card-showcase-frame-2-3{aspect-ratio:2 / 3}.card-showcase-frame-2-1{aspect-ratio:2 / 1;grid-column:span 2}.card-showcase-label{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-muted);text-align:center}