*{box-sizing:border-box}body{font-family:Noto Sans SC,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f9fafb;color:#111827;overflow:hidden;user-select:none}.h-screen.flex{display:flex;flex-direction:row;height:100vh}#left-input-panel{transition:transform .3s ease}.flex-1.min-w-\[600px\]{flex:1;min-width:600px}#right-color-panel{transition:transform .3s ease}#canvas-view,#json-view{transition:opacity .3s ease}#canvas-view.hidden,#json-view.hidden{opacity:0;pointer-events:none}.view-tab-btn{color:#6b7280;font-weight:500}.view-tab-btn:hover{background-color:hsla(0,0%,100%,.7);color:#374151}.view-tab-btn.active{background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1);color:#1f2937}#markdown-editor{background-color:#fff!important;color:#333!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif!important;font-size:16px!important}#markdown-editor :not(.inline-hint){background-color:transparent!important;color:inherit!important;font-family:inherit!important;font-size:inherit!important}#canvas-container{background-color:transparent;overflow:hidden;position:relative}#grid-background{background-image:none;background-size:1.25rem 1.25rem;opacity:.6;pointer-events:none}#grid-background.visible{background-image:radial-gradient(#636363 1px,transparent 0)}#canvas{overflow:hidden;transform-origin:top left}#slide-wrapper{background:#fff;border-radius:8px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);display:inline-block;overflow:hidden;position:relative;transform-origin:center;transition:transform .2s ease-out}#slide-wrapper .slide-container{border-radius:0;box-shadow:none;margin:0;position:relative}.color-scheme-btn{transition:all .2s ease}.color-scheme-btn:hover{box-shadow:0 2px 4px rgba(0,0,0,.1);transform:translateY(-1px)}.color-scheme-btn.selected{background-color:#dbeafe;border-color:#3b82f6}input[type=color]{border:1px solid #d1d5db;border-radius:6px;cursor:pointer;transition:border-color .2s ease}input[type=color]:hover{border-color:#3b82f6}input[type=range]{background:#e5e7eb;border-radius:6px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;background:#3b82f6;border:2px solid #fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:pointer;height:20px;width:20px}input[type=range]::-moz-range-thumb{background:#3b82f6;border:2px solid #fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:pointer;height:20px;width:20px}#toggle-left-panel,#toggle-right-panel{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:all .2s ease}#toggle-left-panel:hover,#toggle-right-panel:hover{background-color:#f3f4f6;transform:scale(1.05)}#json-view ::-webkit-scrollbar,#left-input-panel ::-webkit-scrollbar,#right-color-panel ::-webkit-scrollbar{width:5px}#json-view ::-webkit-scrollbar-track,#left-input-panel ::-webkit-scrollbar-track,#right-color-panel ::-webkit-scrollbar-track{background:transparent}#json-view ::-webkit-scrollbar-thumb,#left-input-panel ::-webkit-scrollbar-thumb,#right-color-panel ::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:10px}#json-view ::-webkit-scrollbar-thumb:hover,#left-input-panel ::-webkit-scrollbar-thumb:hover,#right-color-panel ::-webkit-scrollbar-thumb:hover{background:#9ca3af}input[type=text],textarea{transition:all .2s ease-in-out}input[type=text]:focus,textarea:focus{background-color:#fff;border-color:#3b82f6;box-shadow:0 0 0 1px #3b82f6}button{transition:background-color .2s,color .2s,box-shadow .2s}button:disabled{cursor:not-allowed;opacity:.5}#loading-overlay{backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.slide-container [contenteditable=true]{outline:none;transition:all .2s ease}.slide-container [contenteditable=true]:hover{background:#e0e6ff;border-radius:4px;box-shadow:0 0 0 2px rgba(59,130,246,.2);color:#000}.slide-container [contenteditable=true]:focus{background:#b4c6ff;border-radius:4px;box-shadow:0 0 0 2px rgba(59,130,246,.2);color:#000;outline:none}@media (max-width:1200px){#left-input-panel,#right-color-panel{min-width:240px}}@media (max-width:1024px){#left-input-panel,#right-color-panel{background:#fff;bottom:0;box-shadow:0 0 20px rgba(0,0,0,.1);max-width:80vw;position:fixed;top:0;transform:translateX(-100%);width:320px;z-index:100}#right-color-panel{right:0;transform:translateX(100%)}#left-input-panel.show,#right-color-panel.show{transform:translateX(0)}#toggle-left-panel,#toggle-right-panel{display:block}.flex-1.min-w-\[600px\]{min-width:320px;width:100%}}@media (max-width:768px){#left-input-panel,#right-color-panel{max-width:100vw;width:100%}.flex.items-center.space-x-4>div{flex-wrap:wrap;gap:8px}.bg-white.border-b.border-gray-200.px-4.h-16{height:auto;min-height:64px;padding:8px 16px}.bg-white.border-b.border-gray-200.px-4.py-2{padding:8px 16px}h1{font-size:1.25rem}button{font-size:.875rem;padding:6px 12px}}@media (max-width:480px){.flex.items-center.space-x-4{align-items:flex-start;flex-direction:column;space-x:0;gap:8px}#slide-wrapper{min-width:280px;transform-origin:top left}}@media (min-width:1025px){#toggle-left-panel,#toggle-right-panel{display:none}}.panel-content{transition:opacity .2s ease-in-out,transform .2s ease-in-out}.panel-content.hidden{transform:translateY(5px)}.panel-content.hidden,.tooltip{opacity:0;pointer-events:none;position:absolute}.tooltip{background:rgba(0,0,0,.9);border-radius:6px;color:#fff;font-size:12px;padding:8px 12px;transition:opacity .2s;z-index:1000}.tooltip.visible{opacity:1}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{transform:translateX(-100%)}to{transform:translateX(0)}}.fade-in{animation:fadeIn .3s ease-out}.slide-in{animation:slideIn .3s ease-out}.success-message{background:#064e3b;border:1px solid #10b981;border-radius:8px;color:#6ee7b7}.error-message,.success-message{animation:fadeIn .3s ease-out;margin-bottom:16px;padding:12px}.error-message{background:#7f1d1d;border:1px solid #ef4444;border-radius:8px;color:#fca5a5}.keyboard-shortcut{background:rgba(0,0,0,.9);border-radius:8px;bottom:20px;color:#fff;font-family:monospace;font-size:12px;left:20px;opacity:0;padding:10px 14px;position:fixed;transition:opacity .2s;z-index:1000}.keyboard-shortcut.visible{opacity:1}.progress-bar{background:#374151;border-radius:2px;height:4px;margin-top:8px;overflow:hidden;width:100%}.progress-fill{background:linear-gradient(90deg,#3b82f6,#1d4ed8);border-radius:2px;height:100%;transition:width .3s ease;width:0}.slide-container .icon{transition:transform .2s ease}.slide-container .icon:hover{transform:scale(1.1)}#slide-wrapper .slide-container{transition:transform .2s ease}#slide-wrapper .slide-container:hover{transform:translateY(-2px)}.editing-mode .slide-container{border:2px solid #3b82f6}.editing-mode .slide-container:before{background:#3b82f6;border-radius:6px;color:#fff;content:"编辑模式";font-size:12px;left:0;padding:4px 8px;position:absolute;top:-30px;z-index:1000}.btn-primary{background:#3b82f6;border-radius:8px;font-weight:500;padding:8px 16px;transition:all .2s ease}.btn-primary:hover:not(:disabled){background:#2563eb;transform:translateY(-1px)}.btn-secondary{background:#374151;border-radius:8px;font-weight:500;padding:8px 16px;transition:all .2s ease}.btn-secondary:hover:not(:disabled){background:#4b5563;transform:translateY(-1px)}.input-field{background:#f9fafb;border:1px solid #d1d5db;border-radius:8px;color:#111827;padding:10px 12px;transition:all .2s ease}.input-field:focus{background:#fff;border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.1)}.input-field::placeholder{color:#6b7280}.status-success{background:#ecfdf5;border:1px solid #10b981;border-radius:8px;color:#047857;padding:12px}.status-error{background:#fef2f2;border:1px solid #ef4444;border-radius:8px;color:#dc2626;padding:12px}.status-warning{background:#fffbeb;border:1px solid #f59e0b;border-radius:8px;color:#d97706;padding:12px}.status-info{background:#eff6ff;border:1px solid #3b82f6;border-radius:8px;color:#1d4ed8;padding:12px}.canvas-overlay{background:rgba(0,0,0,.5);bottom:0;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;transition:opacity .3s ease;z-index:99}.canvas-overlay.show{opacity:1;pointer-events:all}