: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-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-2);padding:var(--space-2_5);background:var(--bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);font-family:var(--font-display);color:var(--text)}.big-sticker-info{display:flex;flex-direction:column;gap:var(--space-0_5);text-align:right}.big-sticker-category{font-family:var(--font);font-size:var(--text-2xs);font-weight:400;color:var(--text-muted);text-transform:uppercase;letter-spacing:.02em}.big-sticker-title{font-size:var(--text-base);font-weight:900;line-height:1.1}.big-sticker-count{font-family:var(--font);font-size:var(--text-xs);font-weight:400;opacity:.5}.big-sticker-img{width:var(--space-12);height:var(--space-12);border-radius:var(--radius-sm);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:calc(var(--space-12) + var(--space-2_5) * 2 + 2px);height:calc(var(--space-12) + var(--space-2_5) * 2 + 2px);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:calc(var(--space-12) + var(--space-2_5) * 2 + 2px);height:calc(var(--space-12) + var(--space-2_5) * 2 + 2px);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-y:auto;overflow-x:hidden;background:var(--sidebar-bg);border:1px solid var(--sidebar-border);border-radius:var(--radius-2xl);box-shadow:var(--sidebar-shadow);z-index:10;font-family:var(--font-display)}.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)}.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%}.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)}.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-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}.bento-example{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,1fr);gap:var(--space-3);height:100%;max-width:100%}.bento-container-ratios{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);flex-shrink:0}.bento-cr-btn{width:28px;height:28px;border-radius:var(--radius);border:1.5px solid var(--separator);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:1.5px;opacity:.5}.bento-cr-btn.active .bento-cr-shape{background:var(--system-blue);opacity:1}.bento-tile{border-radius:var(--radius-xl);padding:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;position:relative}.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-1_5)}.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{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;--grid-col-fill: rgba(0, 0, 0, .05);--grid-row-fill: rgba(255, 204, 0, .15);-webkit-user-select:none;user-select:none}:root.dark .grid-overlay{--grid-col-fill: rgba(255, 255, 255, .05);--grid-row-fill: rgba(255, 214, 0, .15)}.grid-overlay-row-bands{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);pointer-events:none}.grid-overlay-row-band{grid-column:1 / -1;background:var(--grid-row-fill);display:flex;align-items:center;justify-content:flex-end;padding-right:var(--space-1)}.grid-overlay-cols{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);pointer-events:none}.grid-overlay-col{grid-row:1 / -1;background:var(--grid-col-fill);display:flex;align-items:flex-end;justify-content:center;padding-bottom:var(--space-1)}.grid-overlay-zones{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);z-index:2}.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-overlay-zones{cursor:crosshair}.grid-toolbar{position:fixed;top:var(--space-5);right:var(--space-8);z-index:15;display:flex;gap:var(--space-2);padding:var(--space-3);background:var(--sidebar-bg);border:1px solid var(--sidebar-border);border-radius:var(--radius-2xl);box-shadow:var(--sidebar-shadow)}.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{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);cursor:crosshair;background-image:linear-gradient(var(--separator) 1px,transparent 1px),linear-gradient(90deg,var(--separator) 1px,transparent 1px);background-size:3.125% 3.125%}.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:var(--space-5);left:50%;transform:translate(-50%);z-index:15;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2);padding: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:80vw}@media(max-width:900px){.view-bento{width:90%;grid-template-columns:repeat(2,1fr)}.bento-tile-lg{grid-column:span 2}}