:root{--bg-page: #FAF8F5;--bg-surface: #FFFFFF;--bg-surface-elevated: #FFFFFF;--bg-surface-subtle: #F3EFEA;--bg-surface-dark: #121620;--text-primary: #181C26;--text-secondary: #4A5568;--text-muted: #718096;--text-light: #FAF8F5;--border-subtle: #E8E2D8;--border-medium: #D6CCC0;--border-strong: #A89B8C;--accent-gold: #B87A28;--accent-gold-light: #D9A04E;--accent-gold-bg: #FDF6EC;--accent-terracotta: #A44C34;--accent-indigo: #1E2D48;--accent-emerald: #1F4737;--font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-serif: "Playfair Display", Georgia, serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--shadow-sm: 0 1px 3px 0 rgba(24, 28, 38, .04);--shadow-md: 0 4px 14px -2px rgba(24, 28, 38, .07), 0 2px 6px -1px rgba(24, 28, 38, .04);--shadow-lg: 0 16px 36px -6px rgba(24, 28, 38, .09), 0 8px 16px -4px rgba(24, 28, 38, .04);--shadow-xl: 0 24px 52px -12px rgba(24, 28, 38, .13);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--transition-fast: .16s cubic-bezier(.16, 1, .3, 1);--transition-normal: .28s cubic-bezier(.16, 1, .3, 1);--transition-slow: .45s cubic-bezier(.16, 1, .3, 1)}[data-theme=dark]{--bg-page: #0C1017;--bg-surface: #141A24;--bg-surface-elevated: #1B2332;--bg-surface-subtle: #18202E;--bg-surface-dark: #07090D;--text-primary: #F7F5F0;--text-secondary: #9DA8BA;--text-muted: #6B778D;--text-light: #FFFFFF;--border-subtle: #242E40;--border-medium: #334057;--border-strong: #4B5D7D;--accent-gold: #D69738;--accent-gold-light: #E8B463;--accent-gold-bg: #261E10;--accent-terracotta: #C9674D;--accent-indigo: #2D4166;--accent-emerald: #2E634E;--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .4);--shadow-md: 0 4px 14px -2px rgba(0, 0, 0, .5);--shadow-lg: 0 16px 36px -6px rgba(0, 0, 0, .6);--shadow-xl: 0 24px 52px -12px rgba(0, 0, 0, .7)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{font-family:var(--font-body);background-color:var(--bg-page);color:var(--text-primary);line-height:1.6;min-height:100vh;transition:background-color var(--transition-normal),color var(--transition-normal);-webkit-font-smoothing:antialiased}img,video{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer;border:none;background:none}.container{width:100%;max-width:1280px;margin:0 auto;padding:0 24px}.serif-title{font-family:var(--font-serif);font-weight:600}.serif-italic{font-family:var(--font-serif);font-style:italic;font-weight:400}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;font-family:var(--font-sans);font-size:.875rem;font-weight:600;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.btn-sm{padding:6px 14px;font-size:.8125rem}.btn-lg{padding:14px 28px;font-size:1rem}.btn-primary{background-color:var(--text-primary);color:var(--bg-surface);border:1px solid transparent}.btn-primary:hover{opacity:.9;transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-secondary{background-color:var(--bg-surface-subtle);color:var(--text-primary);border:1px solid var(--border-subtle)}.btn-secondary:hover{background-color:var(--border-subtle);transform:translateY(-1px)}.btn-gold{background-color:var(--accent-gold);color:#fff}.btn-gold:hover{background-color:#9e641b;transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-outline-white{background-color:#ffffff1f;color:#fff;border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.btn-outline-white:hover{background-color:#ffffff38;transform:translateY(-1px)}.preview-control-bar{background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);position:sticky;top:0;z-index:100;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.brand-badge{display:flex;align-items:center;gap:10px;font-family:var(--font-sans);font-weight:800;font-size:1.1rem}.brand-badge .logo-symbol{color:var(--accent-gold);font-size:1.25rem}.category-tabs-row{display:flex;align-items:center;gap:6px;background:var(--bg-surface-subtle);padding:4px;border-radius:var(--radius-full);border:1px solid var(--border-subtle);overflow-x:auto}.cat-tab-btn{padding:6px 14px;font-family:var(--font-sans);font-size:.8125rem;font-weight:600;color:var(--text-secondary);border-radius:var(--radius-full);white-space:nowrap;transition:all var(--transition-fast)}.cat-tab-btn:hover{color:var(--text-primary)}.cat-tab-btn.active{background:var(--bg-surface);color:var(--text-primary);box-shadow:var(--shadow-sm)}.viewport-device-controls{display:flex;align-items:center;gap:8px;background:var(--bg-surface-subtle);padding:4px;border-radius:var(--radius-full);border:1px solid var(--border-subtle)}.viewport-btn{padding:6px 12px;font-size:.75rem;font-weight:600;color:var(--text-secondary);border-radius:var(--radius-full);display:flex;align-items:center;gap:6px;transition:all var(--transition-fast)}.viewport-btn.active{background:var(--bg-surface);color:var(--text-primary);box-shadow:var(--shadow-sm)}.preview-workspace{padding:32px 20px;display:flex;flex-direction:column;align-items:center;min-height:calc(100vh - 70px)}.device-frame-shell{background:var(--bg-surface);border:1px solid var(--border-medium);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-xl);transition:width .35s cubic-bezier(.16,1,.3,1),height .35s cubic-bezier(.16,1,.3,1);margin:0 auto}.device-frame-shell.desktop{width:100%;max-width:1280px;min-height:850px}.device-frame-shell.tablet{width:768px;max-width:95vw;min-height:800px}.device-frame-shell.mobile{width:390px;max-width:95vw;min-height:750px;border-radius:36px;border-width:8px;border-color:#1e293b}.device-top-chrome{background:var(--bg-surface-subtle);border-bottom:1px solid var(--border-subtle);padding:10px 16px;display:flex;align-items:center;justify-content:space-between}.chrome-dots{display:flex;gap:6px}.chrome-dots span{width:10px;height:10px;border-radius:50%;background:var(--border-strong)}.chrome-address-bar{font-family:monospace;font-size:.75rem;color:var(--text-secondary);background:var(--bg-surface);padding:4px 16px;border-radius:var(--radius-sm);border:1px solid var(--border-subtle);display:flex;align-items:center;gap:8px;flex-grow:1;max-width:480px;margin:0 16px}.chrome-badge{font-size:.75rem;font-weight:600;color:#10b981}.standalone-top-bar{background:var(--bg-surface-dark);color:#cbd5e1;padding:8px 24px;font-size:.8125rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.1)}.standalone-top-bar a{color:#fff;text-decoration:underline;font-weight:600}.form-control{padding:10px 14px;font-family:var(--font-body);font-size:.875rem;border:1px solid var(--border-medium);border-radius:var(--radius-sm);background-color:var(--bg-surface);color:var(--text-primary);outline:none;transition:border-color var(--transition-fast)}.form-control:focus{border-color:var(--text-primary)}