@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--primary: #6366f1;--primary-dark: #4f46e5;--primary-light: #818cf8;--secondary: #f59e0b;--accent: #10b981;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--bg-primary: #0f0f23;--bg-secondary: #1a1a2e;--bg-tertiary: #16213e;--bg-card: rgba(255, 255, 255, .05);--bg-card-hover: rgba(255, 255, 255, .1);--text-primary: #ffffff;--text-secondary: #d1d5db;--text-muted: #9ca3af;--border: rgba(255, 255, 255, .1);--border-hover: rgba(255, 255, 255, .2);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1);--shadow-glow: 0 0 20px rgba(99, 102, 241, .3);--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--gradient-accent: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 80%,rgba(99,102,241,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(245,158,11,.1) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(16,185,129,.1) 0%,transparent 50%);z-index:-1;animation:backgroundShift 20s ease-in-out infinite}@keyframes backgroundShift{0%,to{opacity:1}50%{opacity:.8}}.app{max-width:1400px;margin:0 auto;padding:2rem;display:grid;grid-template-columns:400px 1fr;gap:2rem;min-height:100vh;align-items:start}.app-header{grid-column:1 / -1;text-align:center;margin-bottom:2rem;position:relative}.app-title{font-size:3rem;font-weight:700;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;letter-spacing:-.02em}.app-subtitle{font-size:1.2rem;color:var(--text-secondary);font-weight:400;margin-bottom:2rem}.controls{background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:20px;padding:1.5rem;box-shadow:var(--shadow-xl);transition:all .3s ease;max-height:calc(100vh - 4rem);overflow-y:auto}.controls:hover{background:var(--bg-card-hover);border-color:var(--border-hover);box-shadow:var(--shadow-xl),var(--shadow-glow)}.controls h2{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.controls h2:before{content:"⚙️";font-size:1.2rem}.control-group{margin-bottom:1rem}.control-group:last-child{margin-bottom:0}.control-label{display:block;font-size:.8rem;font-weight:500;color:var(--text-secondary);margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.05em}.control-inputs{display:flex;align-items:center;gap:.5rem}input[type=text],input[type=url]{flex:1;background:#ffffff0d;border:1px solid var(--border);border-radius:8px;padding:.6rem .8rem;color:var(--text-primary);font-size:.8rem;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}input[type=text]:focus,input[type=url]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6366f11a;background:#ffffff1a}input[type=text]::placeholder,input[type=url]::placeholder{color:var(--text-muted)}input[type=color]{width:32px;height:32px;border:none;border-radius:6px;cursor:pointer;background:none;padding:0}input[type=color]::-webkit-color-swatch-wrapper{padding:0;border-radius:6px;border:2px solid var(--border)}input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}input[type=range]{flex:1;height:6px;background:var(--gray-700);border-radius:3px;outline:none;-webkit-appearance:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:var(--gradient-primary);border-radius:50%;cursor:pointer;box-shadow:var(--shadow-md);transition:all .3s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:var(--shadow-lg),var(--shadow-glow)}input[type=range]::-moz-range-thumb{width:20px;height:20px;background:var(--gradient-primary);border-radius:50%;border:none;cursor:pointer;box-shadow:var(--shadow-md)}input[type=number]{width:60px;background:#ffffff0d;border:1px solid var(--border);border-radius:6px;padding:.4rem .3rem;color:var(--text-primary);text-align:center;font-size:.8rem;transition:all .3s ease}input[type=number]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #6366f11a}.unit{font-size:.7rem;color:var(--text-muted);font-weight:500;min-width:25px}.reset-btn{width:100%;background:var(--gradient-secondary);border:none;border-radius:10px;padding:.7rem 1rem;color:#fff;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:.8rem;text-transform:uppercase;letter-spacing:.05em}.reset-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),0 0 20px #f59e0b4d}.reset-btn:active{transform:translateY(0)}.book-preview{background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:24px;padding:2rem;box-shadow:var(--shadow-xl);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:600px;transition:all .3s ease}.book-preview:hover{background:var(--bg-card-hover);border-color:var(--border-hover);box-shadow:var(--shadow-xl),var(--shadow-glow)}.book-container{display:flex;align-items:center;justify-content:center;perspective:600px;margin-bottom:2rem}.outputs{background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:24px;padding:2rem;box-shadow:var(--shadow-xl);margin-top:2rem}.output{margin-bottom:2rem}.output:last-child{margin-bottom:0}.output h3{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.output h3:before{content:"📋";font-size:1rem}.output pre,.output code{background:var(--bg-secondary);border-radius:12px;padding:1rem;color:var(--text-secondary);font-family:JetBrains Mono,Fira Code,monospace;font-size:.8rem;line-height:1.5;overflow-x:auto;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;overflow-wrap:break-word;max-height:300px;overflow-y:auto}footer{grid-column:1 / -1;text-align:center;margin-top:3rem;padding:2rem;color:var(--text-muted);font-size:.875rem}footer a{color:var(--primary);text-decoration:none;transition:color .3s ease}footer a:hover{color:var(--primary-light)}@media (max-width: 1200px){.app{grid-template-columns:350px 1fr;gap:1.5rem}}@media (max-width: 1024px){.app{grid-template-columns:1fr;gap:1.5rem;padding:1rem}.controls{max-height:none}.app-title{font-size:2.5rem}}@media (max-width: 768px){.app{padding:1rem}.app-title{font-size:2rem}.controls,.book-preview,.outputs{padding:1.5rem}.control-inputs{flex-direction:column;align-items:stretch;gap:.5rem}input[type=range]{order:1}input[type=number]{order:2;width:100%}.unit{order:3;text-align:center}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.loading{animation:pulse 2s ease-in-out infinite}@keyframes success{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.success{animation:success .6s ease-in-out}.preview-header{text-align:center;margin-bottom:2rem}.preview-header h2{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}.preview-header p{color:var(--text-secondary);font-size:.875rem}.preview-info{display:flex;gap:1rem;margin-top:2rem;padding:1rem;background:#ffffff0d;border-radius:12px;border:1px solid var(--border)}.info-item{display:flex;flex-direction:column;align-items:center;gap:.25rem}.info-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.info-value{font-size:.875rem;color:var(--text-primary);font-weight:500}.code-container{position:relative}pre[class*=language-]{margin:0;padding:1rem;background:var(--bg-secondary)!important;border:1px solid var(--border);border-radius:12px;font-size:.8rem;line-height:1.5;overflow-x:auto;white-space:pre-wrap;word-wrap:break-word;word-break:break-all;overflow-wrap:break-word;max-height:300px;overflow-y:auto}code[class*=language-]{font-family:JetBrains Mono,Fira Code,Consolas,monospace;color:var(--text-secondary);white-space:pre-wrap!important;word-wrap:break-word!important;word-break:break-all!important;overflow-wrap:break-word!important}.language-markup .token.attr-value,.language-markup .token.string,.language-css .token.string,.language-css .token.url{white-space:pre-wrap!important;word-wrap:break-word!important;word-break:break-all!important;overflow-wrap:break-word!important}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#6a9955}.token.punctuation{color:#d4d4d4}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:#569cd6}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#ce9178}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#d4d4d4}.token.atrule,.token.attr-value,.token.keyword{color:#569cd6}.token.function,.token.class-name{color:#dcdcaa}.token.regex,.token.important,.token.variable{color:#d16969}.copy-btn{position:absolute;top:1rem;right:1rem;background:var(--primary);border:none;border-radius:8px;padding:.5rem 1rem;color:#fff;font-size:.75rem;font-weight:500;cursor:pointer;transition:all .3s ease;z-index:10}.copy-btn:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}.copy-btn.copied{background:var(--accent);animation:copySuccess .6s ease-in-out}@keyframes copySuccess{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--gray-600);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--gray-500)}.language-switcher{position:absolute;top:1rem;right:1rem}.language-select{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:.5rem .8rem;color:var(--text-primary);font-size:.875rem;cursor:pointer;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:120px}.language-select:hover{background:var(--bg-card-hover);border-color:var(--border-hover)}.language-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #6366f11a}.language-select option{background:var(--bg-secondary);color:var(--text-primary);padding:.5rem}@media (max-width: 768px){.language-switcher{position:static;margin-bottom:1rem;text-align:center}.language-select{min-width:100px;font-size:.8rem}}code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999}.token.punctuation{color:#ccc}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.number,.token.function{color:#f08d49}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699}.token.operator,.token.entity,.token.url{color:#67cdcc}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}