.topbar{height:48px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid #eaeaea}.logo{font-weight:600}.save{margin-left:auto;font-size:13px;color:#666}.column{display:flex;flex-direction:column;padding:16px}.column:first-child{border-right:1px solid #eee}.column-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}.column-title{font-weight:600}.btn{font-size:12px;padding:6px 10px;border-radius:8px;border:1px solid #ddd;background:#fafafa;cursor:pointer}.btn:hover{background:#f0f0f0}.btn-danger{background:#fff}.filename{margin-left:auto;font-size:12px;color:#777}.title-input{margin-left:auto;width:260px;border:1px solid #eee;border-radius:8px;padding:6px 10px;font-size:13px}.editor{flex:1;width:100%;border:1px solid #eee;border-radius:14px;padding:14px;resize:none;font-size:16px;line-height:1.15;font-family:Helvetica,Arial,sans-serif;outline:none}.viewer{flex:1;border:1px solid #eee;border-radius:14px;padding:14px;overflow:auto;white-space:pre-wrap;background:#fcfcfc}@media(max-width:900px){.main{grid-template-columns:1fr}.column:first-child{border-right:none;border-bottom:1px solid #eee}.title-input{width:100%}}.app{height:100vh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid #e7e7e7;background:#fff}.topbar-title{font-weight:600;font-size:15px}.main{flex:1;display:grid;grid-template-columns:1fr 1fr}.column{padding:16px;display:flex;flex-direction:column}.column-left{border-right:1px solid #eee}.editor-box{margin-top:12px;flex:1;border:1px solid #eee;border-radius:14px;padding:14px;overflow:auto;background:#fcfcfc}textarea{width:100%;height:100%;resize:none;border:none;outline:none;font-family:Helvetica,Arial,sans-serif;font-size:16px;line-height:1.15}@media(max-width:900px){.main{grid-template-columns:1fr}.column-left{border-right:none;border-bottom:1px solid #eee}}