:root{--bg: #1c1c1e;--bg2: #252528;--bg3: #2c2c30;--fg: #e8e8ed;--fg2: #8e8e93;--fg3: #636366;--border: #38383d;--border-light: #454549;--accent: #f5a623;--accent-muted: rgba(245, 166, 35, .12);--radius-sm: 5px;--radius-md: 8px;--radius-lg: 12px;--ease-emphasized: cubic-bezier(.22, 1, .36, 1);--tr-fast: .12s ease;--tr-normal: .2s ease;--font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Meiryo", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "SF Pro", "Helvetica Neue", system-ui, sans-serif;--font-mono: "SF Mono", "Cascadia Code", "JetBrains Mono", "Fira Code", "Menlo", monospace;--shadow-raised: -2px -2px 6px rgba(255,255,255,.06), 2px 2px 6px rgba(0,0,0,.35);--shadow-raised-hover: -3px -3px 8px rgba(255,255,255,.08), 3px 3px 8px rgba(0,0,0,.4);--shadow-pressed: inset -2px -2px 5px rgba(255,255,255,.03), inset 2px 2px 5px rgba(0,0,0,.3);--shadow-card: 0 2px 8px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.04);--shadow-elevated: 0 8px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05)}.light{--bg: #f5f5f0;--bg2: #ffffff;--bg3: #f0efe8;--fg: #1d1d1f;--fg2: #86868b;--fg3: #8e8e93;--border: #e0ddd6;--border-light: #e8e5de;--accent: #d87d1a;--accent-muted: rgba(216, 125, 26, .08);--shadow-raised: -2px -2px 6px rgba(255,255,255,.8), 2px 2px 6px rgba(0,0,0,.08);--shadow-raised-hover: -3px -3px 8px rgba(255,255,255,.9), 3px 3px 8px rgba(0,0,0,.1);--shadow-pressed: inset -2px -2px 4px rgba(255,255,255,.5), inset 2px 2px 4px rgba(0,0,0,.06);--shadow-card: 0 2px 8px rgba(0,0,0,.08), 0 0 0 1px rgba(255,255,255,.6);--shadow-elevated: 0 8px 24px rgba(0,0,0,.12), 0 0 0 1px rgba(255,255,255,.5)}*{box-sizing:border-box;margin:0}body{font-family:var(--font);background:var(--bg);color:var(--fg);height:100vh;display:flex;flex-direction:column;line-height:1.85;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}dialog::backdrop{background:#00000080;animation:fade-in .15s ease-out}.dialog-confirm{background:var(--bg2);color:var(--fg);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;max-width:400px;width:90vw;box-shadow:var(--shadow-elevated);animation:dialog-in .15s ease-out;margin:auto}.dialog-confirm.closing{animation:dialog-out .1s ease-in forwards}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes dialog-in{0%{opacity:0;transform:scale(.95) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes dialog-out{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(-8px)}}::selection{background:var(--accent-muted);color:var(--fg)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--fg3)}.toolbar{padding:10px 16px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:color-mix(in srgb,var(--bg2) 80%,transparent);display:flex;align-items:center;gap:6px;z-index:5;user-select:none;-webkit-user-select:none;box-shadow:0 1px 0 var(--border),var(--shadow-card);position:relative}.btn .icon{width:16px;height:16px}#newBtn .icon{width:20px;height:20px}.toolbar h1{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--fg);flex:1;margin-right:12px}.btn{display:inline-flex;align-items:center;gap:4px;background:var(--bg2);border:none;color:var(--fg);padding:5px 12px;border-radius:var(--radius-md);cursor:pointer;font-size:13px;font-family:var(--font);font-weight:500;transition:box-shadow var(--tr-fast),transform .2s var(--ease-emphasized),background var(--tr-fast);white-space:nowrap;box-shadow:var(--shadow-raised)}.btn:hover{box-shadow:var(--shadow-raised-hover);background:var(--bg2)}.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent),var(--shadow-raised)}.btn:active{transform:scale(.97);box-shadow:var(--shadow-pressed);background:var(--bg3)}.btn-sm{padding:4px 12px;font-size:12px}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:color-mix(in srgb,var(--accent) 85%,#000)}.btn:disabled{opacity:.4;cursor:default;box-shadow:var(--shadow-raised);transform:none}.btn:disabled:hover{box-shadow:var(--shadow-raised);background:var(--bg2)}.btn:disabled:active{transform:none;box-shadow:var(--shadow-raised);background:var(--bg2)}.theme-dropdown{position:relative;display:inline-flex}.theme-dropdown-trigger{display:inline-flex;align-items:center;gap:4px;background:var(--bg2);border:none;color:var(--fg2);padding:5px 8px;border-radius:var(--radius-md);cursor:pointer;font-size:12px;font-family:var(--font);font-weight:500;white-space:nowrap;outline:none;transition:box-shadow var(--tr-fast),color var(--tr-fast),background var(--tr-fast);box-shadow:var(--shadow-raised)}.theme-dropdown-trigger:hover{box-shadow:var(--shadow-raised-hover);color:var(--fg)}.theme-dropdown-trigger:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent),var(--shadow-raised)}.theme-dropdown-trigger .icon{width:14px;height:14px;transition:transform var(--tr-fast)}.theme-dropdown.open .theme-dropdown-trigger .icon{transform:rotate(180deg)}.theme-dropdown-label{flex:1;white-space:nowrap}.theme-dropdown-panel{display:none;position:absolute;top:100%;left:0;min-width:100%;width:max-content;max-width:220px;margin-top:4px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-elevated);z-index:20;overflow:hidden}.theme-dropdown.open .theme-dropdown-panel{display:block}.theme-dropdown-option{display:flex;align-items:center;gap:6px;width:100%;padding:7px 12px;background:transparent;border:none;color:var(--fg);font-size:12px;font-family:var(--font);cursor:pointer;text-align:left;transition:background var(--tr-fast)}.theme-dropdown-option:hover{background:var(--bg3)}.theme-dropdown-option.selected{color:var(--accent);font-weight:500}.theme-dropdown-option .icon{width:14px;height:14px;flex-shrink:0;visibility:hidden}.theme-dropdown-option.selected .icon{visibility:visible}#toggleEditor{margin-left:8px}.panes{display:flex;flex:1;min-height:0}.pane{flex:1;display:flex;flex-direction:column;min-width:0}.pane+.pane{border-left:1px solid var(--border)}.pane.collapsed{flex:0;overflow:hidden;min-width:0;border-left:none}.pane.collapsed+.pane{border-left:none}.pane-label{padding:8px 16px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--fg2);background:var(--bg2);position:relative;box-shadow:inset 0 -1px 0 var(--border),inset 0 1px #ffffff0a;z-index:1}textarea{flex:1;padding:16px 20px;font:14px/1.7 var(--font-mono);background:var(--bg3);color:var(--fg);border:none;outline:none;resize:none;tab-size:2;caret-color:var(--accent);transition:box-shadow var(--tr-normal);box-shadow:inset 0 1px 3px #00000040}textarea:focus{box-shadow:inset 0 1px 3px #00000040,0 0 0 1px var(--accent-muted)}textarea::placeholder{color:var(--fg3)}#preview{flex:1;padding:20px;overflow-y:auto}#tabBar{display:flex;align-items:center;gap:0;padding:2px 12px 0;background:var(--bg2);overflow-x:auto;min-height:34px;flex-shrink:0;user-select:none;box-shadow:inset 0 -1px 0 var(--border)}#tabBar::-webkit-scrollbar{height:0}.tab{display:flex;align-items:center;gap:6px;padding:6px 14px;font-size:12px;cursor:pointer;white-space:nowrap;color:var(--fg2);transition:box-shadow var(--tr-fast),color var(--tr-fast),background var(--tr-fast);flex-shrink:0;border-radius:var(--radius-md) var(--radius-md) 0 0;position:relative;margin:2px 0 0;box-shadow:inset -1px 0 0 var(--border),inset 1px 0 0 transparent}.tab:first-child{box-shadow:inset 1px 0 0 transparent}.tab:hover{color:var(--fg);background:var(--bg3);box-shadow:var(--shadow-pressed),inset -1px 0 0 var(--border)}.tab:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent) inset,inset -1px 0 0 var(--border);border-radius:3px}.tab.active{color:var(--fg);background:var(--bg);z-index:1;box-shadow:var(--shadow-raised),inset 0 1px 0 var(--accent);margin-top:0;padding-top:8px}.tab-name{pointer-events:none}.tab-close{display:inline-flex;align-items:center;color:var(--fg3);cursor:pointer;padding:2px;border-radius:3px;transition:background .15s,color .15s}.tab-close .icon{width:12px;height:12px}.tab-close:hover{color:var(--fg);background:var(--border)}.tab-new-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:4px;flex-shrink:0;background:var(--bg2);border:none;border-radius:var(--radius-md);color:var(--fg2);cursor:pointer;transition:box-shadow var(--tr-fast),color var(--tr-fast);box-shadow:var(--shadow-raised)}.tab-new-btn:hover{box-shadow:var(--shadow-raised-hover);color:var(--fg)}.tab-new-btn:active{box-shadow:var(--shadow-pressed)}.tab-new-btn .icon{width:14px;height:14px}#emptyScreen{display:none;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--fg2)}#emptyScreen.visible{display:flex}.mascot{width:100px;height:100px;margin-bottom:8px}.mascot-text{text-align:center;line-height:1.6;font-size:14px;color:var(--fg)}.mascot-sub{font-size:12px;color:var(--fg2)}#emptyScreen #newBtn{font-size:24px;padding:16px 32px;border-radius:var(--radius-lg);background:var(--accent-muted);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent);cursor:pointer;font-family:var(--font);transition:box-shadow var(--tr-fast),background var(--tr-normal),transform .2s var(--ease-emphasized),color var(--tr-normal);box-shadow:var(--shadow-raised)}#emptyScreen #newBtn:hover{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:var(--shadow-raised-hover)}#emptyScreen #newBtn:active{transform:scale(.97);box-shadow:var(--shadow-pressed)}.panes.hidden{display:none}#statusBar{padding:4px 16px;background:var(--bg2);font-size:11px;color:var(--fg2);font-family:var(--font-mono);flex-shrink:0;user-select:none;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:8px;box-shadow:0 -1px 0 var(--border),0 -2px 6px #00000026;position:relative;z-index:3}#statusPath{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;flex-shrink:0;max-width:40%}#statusPath:hover{text-decoration:underline}#statusMeta{flex:1;text-align:center;font-family:var(--font-mono)}#saveStatus{flex-shrink:0}#saveStatus.status-saved{color:var(--saved, #22c55e)}#saveStatus.status-unsaved{color:var(--unsaved, #eab308)}#saveStatus.status-saving{color:var(--fg2)}#saveStatus.status-error{color:var(--error, #ef4444)}.sep{width:1px;height:18px;background:var(--border);flex-shrink:0}#tocContent{padding:6px 0;overflow-y:auto;flex:1;font-size:13px;line-height:1.5;font-family:var(--font)}#tocContent a{display:flex;align-items:center;gap:8px;padding:5px 16px 5px 20px;text-decoration:none;color:var(--fg2);overflow:hidden;position:relative;transition:background var(--tr-fast),color var(--tr-fast)}#tocContent a:before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:transparent;border-radius:0 2px 2px 0;transition:background var(--tr-fast)}#tocContent a:hover{background:var(--bg3);color:var(--fg)}#tocContent a:hover:before{background:var(--border-light)}#tocContent a.active{background:var(--accent-muted);color:var(--accent);font-weight:500}#tocContent a.active:before{background:var(--accent);width:3px}#tocContent .d2{padding-left:32px;font-size:12.5px}#tocContent .d3{padding-left:48px;font-size:12px}#tocContent .d4,#tocContent .d5,#tocContent .d6{padding-left:64px;font-size:11.5px}#tocPane{transition:transform .3s var(--ease-emphasized),box-shadow var(--tr-normal);background:var(--bg2);z-index:2;position:relative}#tocPane:not(.collapsed){flex:0 0 220px;box-shadow:1px 0 0 var(--border),2px 0 8px #00000026}@media(max-width:750px){.toolbar{padding:6px 10px;gap:4px}.toolbar h1{font-size:13px;margin-right:8px}.btn{padding:4px 8px;font-size:15px;line-height:1}.btn-label{display:none}.theme-select{padding:3px 6px;font-size:11px}.sep{display:none}#toggleEditor{margin-left:4px}#tabBar{min-height:28px;padding:0 8px}.tab{padding:4px 8px;font-size:11px}#statusBar{padding:2px 10px;font-size:10px}.panes{position:relative}#tocPane{position:absolute;left:0;top:0;bottom:0;width:80%;overflow:hidden;z-index:10;flex:none;background:var(--bg);border-left:none;box-shadow:4px 0 24px #0006;transform:translate(-100%);transition:transform .3s var(--ease-emphasized)}#tocPane:not(.collapsed){transform:translate(0)}#tocPane:not(.collapsed)+.pane+.pane{border-left:none}#tocMask{position:absolute;right:0;top:0;bottom:0;width:100%;background:#00000059;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:9;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s ease}#tocMask.visible{opacity:1;pointer-events:auto}}