:root{--bg-primary: #ffffff;--bg-secondary: #f6f8fa;--bg-tertiary: #ffffff;--text-primary: #24292f;--text-secondary: #57606a;--text-tertiary: #6e7781;--border-color: #d0d7de;--border-hover: #8250df;--button-bg: #238636;--button-hover: #2ea043;--shadow: rgba(0, 0, 0, .1)}[data-theme=dark]{--bg-primary: #0d1117;--bg-secondary: #161b22;--bg-tertiary: #0d1117;--text-primary: #e6edf3;--text-secondary: #8b949e;--text-tertiary: #6e7681;--border-color: #30363d;--border-hover: #58a6ff;--button-bg: #238636;--button-hover: #2ea043;--shadow: rgba(0, 0, 0, .5)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:var(--bg-primary);min-height:100vh;padding:20px;transition:background .3s ease}.container{max-width:100%;margin:0 auto;background:var(--bg-secondary);border-radius:12px;box-shadow:0 20px 60px var(--shadow);padding:30px}h1{color:var(--text-primary);margin-bottom:10px;font-size:2rem}.subtitle{color:var(--text-secondary);margin-bottom:30px;font-size:.95rem}.controls{display:flex;gap:15px;margin-bottom:20px;flex-wrap:wrap;align-items:center}label{font-weight:600;color:var(--text-primary)}select,button{padding:10px 15px;border:2px solid var(--border-color);border-radius:6px;font-size:14px;cursor:pointer;transition:all .3s ease}select{background:var(--bg-tertiary);color:var(--text-primary)}select:hover{border-color:var(--border-hover)}button{background:var(--button-bg);color:#fff;font-weight:600;border:none}button:hover{background:var(--button-hover);transform:translateY(-2px);box-shadow:0 4px 12px #23863666}#layoutToggle,#themeToggle{background:transparent;border:2px solid var(--border-color);padding:8px 12px;font-size:18px;color:var(--text-primary)}#layoutToggle:hover,#themeToggle:hover{border-color:var(--border-hover);background:transparent;transform:none;box-shadow:none}button:active{transform:translateY(0)}.content-wrapper{display:flex;flex-direction:column;gap:0}.content-wrapper[data-layout=horizontal]{flex-direction:row;gap:30px}.content-wrapper[data-layout=horizontal] textarea{width:50%;min-height:600px}.content-wrapper[data-layout=horizontal] .render-section{width:50%;margin-top:0;padding-top:0;border-top:none}.content-wrapper[data-layout=horizontal] .url-display{width:100%;margin-top:30px}.container{position:relative;padding-bottom:0}textarea{width:100%;min-height:400px;padding:15px;border:2px solid var(--border-color);border-radius:8px;font-family:JetBrains Mono,monospace;font-size:14px;line-height:1.6;resize:vertical;transition:border-color .3s ease;background:var(--bg-tertiary);color:var(--text-primary)}textarea:focus{outline:none;border-color:var(--border-hover)}.render-section{margin-top:30px;padding-top:30px;border-top:2px solid var(--border-color)}.render-section h2{color:var(--text-primary);margin-bottom:20px;font-size:1.5rem}.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.preview-header h2{margin:0}.preview-actions{display:flex;gap:10px}.preview-actions button{padding:8px 12px;font-size:13px}.image-container{background:var(--bg-tertiary);border:2px solid var(--border-color);border-radius:8px;padding:20px;min-height:400px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:auto;position:relative}.zoom-controls{position:absolute;top:15px;right:15px;display:flex;gap:8px;align-items:center;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:8px;padding:8px 12px;box-shadow:0 2px 8px var(--shadow)}.zoom-controls button{padding:6px 10px;font-size:16px;font-weight:700;min-width:35px;background:var(--bg-tertiary);color:var(--text-primary);border:2px solid var(--border-color)}.zoom-value{color:var(--text-primary);font-size:13px;font-weight:600;min-width:50px;text-align:center}.image-content{display:flex;align-items:center;justify-content:center;flex:1;width:100%}.placeholder{color:var(--text-tertiary);font-style:italic}.error{color:#f85149;padding:15px;background:#f851491a;border-radius:6px;margin-top:15px;border:1px solid #f85149}.theme-selector{display:flex;gap:10px;align-items:center}.url-display{margin-top:15px}.url-display label{display:block;margin-bottom:8px;font-size:14px}.url-input{width:100%;padding:10px;border:2px solid var(--border-color);border-radius:6px;font-family:JetBrains Mono,monospace;font-size:12px;background:var(--bg-tertiary);color:var(--text-primary);transition:border-color .3s ease}.url-input:focus{outline:none;border-color:var(--border-hover)}.url-input:read-only{cursor:pointer}footer{text-align:center;padding:30px 20px;color:var(--text-tertiary);font-size:.9rem;margin-top:40px}