:root{--color-bg: #f9f9f9;--color-editor-bg: #e3f2fd;--color-editor-border: #c4c4c4;--color-editor-text: #1a202c;--color-editor-focus: #2196f3;--color-editor-focus-ring: rgba(33, 150, 243, .25);--color-editor-focus-bg: #e1f5fe;--color-preview-bg: #ffffff;--color-preview-border: #ddd;--color-sidebar-bg: #e3f2fd;--color-sidebar-border: #bbdefb;--color-sidebar-text: #0d47a1;--color-sidebar-hover-bg: #bbdefb;--color-sidebar-hover-shadow: rgba(0, 0, 0, .1)}html,body{height:100%;margin:0;padding:0;background-color:var(--color-bg);overflow:hidden}.head{font-size:1.5rem;color:var(--color-sidebar-text)}.container{display:flex;height:100dvh;overflow:hidden;padding:20px;box-sizing:border-box}.sidebar{width:20%;padding:1rem;overflow-y:auto}.sidebar div{background-color:var(--color-sidebar-bg);border:1px solid var(--color-sidebar-border);padding:10px 14px;margin-bottom:10px;border-radius:8px;font-weight:500;color:var(--color-sidebar-text);transition:all .2s ease-in-out;display:flex;justify-content:space-between;align-items:center;cursor:pointer}.sidebar div:hover{background-color:var(--color-sidebar-hover-bg);transform:translateY(-2px);box-shadow:0 2px 6px var(--color-sidebar-hover-shadow)}.editor{width:40%;padding:1rem;display:flex;flex-direction:column;height:100%;box-sizing:border-box}.editor p{color:var(--color-editor-text);font-size:1rem;margin:0}.preview{width:40%;padding:1rem;display:flex;flex-direction:column;height:100%;box-sizing:border-box}.preview-header{display:flex;align-items:center;justify-content:space-between}.preview-title{display:flex;align-items:center;justify-content:flex-start;gap:10px}.textarea{width:100%;flex:1;font-family:monospace;font-size:1rem;border:1px solid var(--color-editor-border);border-radius:4px;outline:none;resize:none;padding:12px;background-color:var(--color-editor-bg);color:var(--color-editor-text);transition:border-color .2s,box-shadow .2s;box-sizing:border-box;overflow-y:auto}.textarea:focus{background-color:var(--color-editor-focus-bg);border-color:var(--color-editor-focus);box-shadow:0 0 0 3px var(--color-editor-focus-ring)}.markdown{flex:1;width:100%;padding:1rem;background-color:var(--color-preview-bg);border:1px solid var(--color-preview-border);border-radius:4px;overflow-y:auto;box-sizing:border-box}.textarea::-webkit-scrollbar,.markdown::-webkit-scrollbar,.sidebar::-webkit-scrollbar{width:8px}.textarea::-webkit-scrollbar-track,.markdown::-webkit-scrollbar-track,.sidebar::-webkit-scrollbar-track{background:transparent}.textarea::-webkit-scrollbar-thumb,.markdown::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb{background-color:#2196f366;border-radius:4px;border:2px solid transparent;background-clip:padding-box}.textarea::-webkit-scrollbar-thumb:hover,.markdown::-webkit-scrollbar-thumb:hover,.sidebar::-webkit-scrollbar-thumb:hover{background-color:#2196f399}.active{background-color:var(--color-editor-focus-bg);border-color:var(--color-editor-focus);box-shadow:0 0 0 3px var(--color-editor-focus-ring)}@media screen and (max-width: 900px){.container{flex-direction:column;width:100%;padding:20px 0}.sidebar,.editor,.preview{width:100%;padding:1rem;box-sizing:border-box}.mobile-header{display:flex;justify-content:center;margin-bottom:16px;gap:8px}}