:root{--bg-color: #ffffff;--text-color: #000000;--toolbar-bg: #f3f3f3;--toolbar-border: #d1d1d1;--button-hover: #e6e6e6;--input-border: #cccccc;--input-focus: #007aff;--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-editor: "Menlo", "Monaco", "Courier New", monospace}body{margin:0;padding:0;height:100vh;display:flex;flex-direction:column;font-family:var(--font-ui);background-color:var(--bg-color);overflow:hidden}#toolbar{display:flex;align-items:center;padding:8px 12px;background-color:var(--toolbar-bg);border-bottom:1px solid var(--toolbar-border);gap:12px;-webkit-user-select:none;user-select:none}button{background:#fff;border:1px solid #c0c0c0;border-radius:4px;padding:5px 12px;font-size:13px;cursor:pointer;color:#333;box-shadow:0 1px 1px #0000000d;transition:all .1s;white-space:nowrap}button:hover{background-color:var(--button-hover);border-color:#b0b0b0}button:active{background-color:#ddd;box-shadow:inset 0 1px 2px #0000001a}.filename-container{flex:1;display:flex;justify-content:center;min-width:0}#filename-input{width:100%;max-width:100%;padding:5px 8px;font-size:13px;font-family:var(--font-ui);text-align:center;color:#333;background-color:#fff;border:1px solid var(--input-border);border-radius:4px;box-shadow:inset 0 1px 2px #00000008;transition:border-color .2s,box-shadow .2s}#filename-input:hover{border-color:#999;cursor:text}#filename-input:focus{outline:none;border-color:var(--input-focus);box-shadow:0 0 0 3px #007aff33;text-align:left}#editor-container{flex:1;position:relative;overflow:hidden}#editor{width:100%;height:100%;border:none;resize:none;outline:none;padding:20px 30px;box-sizing:border-box;font-family:var(--font-editor);font-size:14px;line-height:1.6;color:var(--text-color);white-space:pre;overflow-y:auto}#status-bar{padding:4px 12px;font-size:11px;color:#888;border-top:1px solid #eaeaea;display:flex;justify-content:space-between;background:#fafafa}#file-input{display:none}