@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#0d1421;--panel:#111c2d;--panel2:#142137;--panel3:#18283e;--line:#25364d;--line2:#31445e;--text:#eef4fc;--muted:#8b9bb1;--muted2:#62748d;--cyan:#58d5e8;--blue:#6ba9ff;--accent:#55cfe4;--danger:#ff7686;--editor:#0f1928;--shadow:0 18px 60px #03081266}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'DM Sans','Noto Sans JP',sans-serif;background:var(--bg);color:var(--text)}button,input,textarea{font:inherit}button{color:inherit;cursor:pointer}.app-shell{min-height:100vh;background:radial-gradient(ellipse at 75% -20%,#1b3854 0,transparent 43%),var(--bg)}.topbar{height:68px;padding:0 28px;display:flex;align-items:center;border-bottom:1px solid #26364a;background:#0e1725e8;backdrop-filter:blur(16px);position:sticky;top:0;z-index:5}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);min-width:245px}.brand-mark{height:34px;width:34px;border-radius:11px;background:linear-gradient(145deg,#5fe0ea,#3988d5);display:grid;place-items:center;box-shadow:0 5px 18px #3bb8d744}.brand-mark svg{width:23px;fill:none;stroke:#082033;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.brand-name{font-size:17px;font-weight:700;letter-spacing:-.55px}.brand-name span{color:#69d7e7}.topbar-center{margin:auto;display:flex;align-items:center;gap:8px;font-size:11px;color:#7f91a9}.save-dot{height:7px;width:7px;border-radius:50%;background:#4bd5a1;box-shadow:0 0 9px #4bd5a177}.save-dot.saving{background:#e8b65d}.top-actions{display:flex;align-items:center;gap:9px}.icon-btn{width:36px;height:36px;border:1px solid transparent;border-radius:10px;background:transparent;display:grid;place-items:center;color:#94a6bd;transition:.18s}.icon-btn:hover{background:#23354b;color:#eaf4ff;border-color:#344b66}.icon-btn svg,.btn svg,.search-box svg,.tool-btn svg,.footer-left svg,.document-head svg,.local-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.btn{height:36px;padding:0 13px;border-radius:9px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;border:1px solid var(--line2);background:#17263a;transition:.18s}.btn svg{width:15px;height:15px}.btn-quiet{color:#bfcbda}.btn-quiet:hover{background:#21334a}.btn-primary{background:linear-gradient(110deg,#4cbfd5,#428fce);border-color:#58c5dc;color:#071c2b;box-shadow:0 5px 16px #2ba9c533}.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px)}.mobile-menu{display:none}.workspace{display:flex;min-height:calc(100vh - 68px)}.sidebar{width:264px;flex:0 0 264px;background:#101a29;border-right:1px solid #24354a;padding:27px 17px 17px;display:flex;flex-direction:column;min-height:calc(100vh - 68px)}.sidebar-heading{display:flex;align-items:center;justify-content:space-between;padding:0 5px 19px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.7px;color:#6b829f}.sidebar-heading h1{font-size:16px;margin:5px 0 0;font-weight:600}.add-btn{border:1px solid #344a65;background:#1b2c42;color:#70d4e5;width:32px;height:32px}.search-box{height:37px;border:1px solid #293b52;background:#0d1725;border-radius:9px;display:flex;align-items:center;gap:8px;padding:0 10px;color:#7186a0}.search-box svg{width:15px;height:15px;flex:none}.search-box input{width:100%;background:transparent;border:0;outline:0;color:var(--text);font-size:11px}.search-box input::placeholder{color:#60738b}.doc-list-label{margin:25px 5px 10px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#8295ad;font-weight:600}.doc-list-label span{background:#20324a;color:#92a7c0;padding:2px 7px;border-radius:6px;font-size:9px}.doc-list{display:flex;flex-direction:column;gap:4px;overflow:auto;max-height:calc(100vh - 360px)}.doc-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:9px;text-align:left;border:1px solid transparent;background:transparent;color:#a8b7c9;min-width:0}.doc-item:hover{background:#18273b}.doc-item.active{background:linear-gradient(100deg,#1b344a,#1b2b40);border-color:#29465d;color:#e8f5fc}.doc-icon{width:29px;height:32px;flex:none;display:grid;place-items:center;border-radius:7px;background:#1d3046;color:#69cddd}.doc-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.doc-meta{min-width:0;display:flex;flex-direction:column;gap:4px}.doc-meta strong{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.doc-meta small{font-size:9px;color:#7588a1}.empty-list{font-size:11px;color:#7c8da3;padding:14px 8px;line-height:1.7}.sidebar-bottom{margin-top:auto}.local-card{padding:11px 9px;border:1px solid #283d53;background:linear-gradient(110deg,#14283a,#172438);border-radius:10px;display:flex;align-items:center;gap:9px}.local-icon{width:29px;height:29px;border-radius:8px;background:#1e4050;color:#6bd9d9;display:grid;place-items:center}.local-icon svg{width:17px}.local-card div{display:flex;flex-direction:column;gap:3px}.local-card strong{font-size:10px}.local-card small{font-size:9px;color:#8298ae}.local-check{margin-left:auto;color:#64d5b0;font-size:14px}.sidebar-foot{text-align:center;color:#536780;font-size:9px;margin:17px 0 0}.sidebar-foot span{padding:0 5px;color:#3f91a5}.main-area{width:min(100%,1120px);margin:0 auto;padding:27px 48px 35px;min-width:0}.document-head{height:30px;display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.breadcrumbs{display:flex;align-items:center;gap:9px;color:#70849e;font-size:10px}.breadcrumbs svg{width:12px;height:12px;fill:none;stroke:#566c87;stroke-width:1.7}.current-crumb{color:#c3d0df}.doc-controls{display:flex;align-items:center;gap:13px}.format-pill{font-size:8px;letter-spacing:1px;font-weight:700;color:#73ccdc;background:#193345;border:1px solid #285064;border-radius:5px;padding:5px 7px}.danger-hover:hover{color:var(--danger);background:#432632}.editor-card{border:1px solid #2a3d54;border-radius:13px;overflow:hidden;background:linear-gradient(145deg,#131f30,#101a29);box-shadow:var(--shadow)}.title-row{display:flex;align-items:center;gap:8px;padding:26px 34px 19px}.doc-title{width:100%;font-size:26px;font-weight:700;letter-spacing:-.9px;background:transparent;border:0;outline:0;color:#f0f6fc}.doc-title::placeholder{color:#50627b}.title-edit-icon{color:#637a94;display:flex}.title-edit-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.toolbar-row{display:flex;justify-content:space-between;align-items:center;padding:0 26px 11px 30px;border-bottom:1px solid #26384d}.format-tools{display:flex;align-items:center;gap:4px}.tool-btn{border:0;background:transparent;color:#a0b0c3;height:30px;min-width:30px;border-radius:6px;display:grid;place-items:center;font-size:13px}.tool-btn:hover{background:#233950;color:#75d7e6}.tool-btn svg{width:16px;height:16px}.italic-tool{font-family:Georgia,serif;font-style:italic}.tool-divider{width:1px;height:17px;background:#31445a;margin:0 7px}.view-switch{display:flex;align-items:center;padding:3px;border:1px solid #2c3e53;border-radius:8px;background:#0f1928;gap:2px}.view-tab{border:0;background:transparent;color:#8597ad;font-size:10px;border-radius:6px;padding:6px 11px}.view-tab.active{background:#29445b;color:#e5f9ff;box-shadow:0 1px 4px #0005}.editor-body{display:flex;min-height:510px}.write-pane,.preview-pane{width:100%;min-width:0}.write-pane{display:block}.write-pane textarea{display:block;resize:vertical;width:100%;min-height:510px;height:calc(100vh - 360px);max-height:1100px;padding:27px 36px 35px;border:0;outline:0;background:transparent;color:#d2deeb;font-family:'Noto Sans JP',sans-serif;font-size:14px;line-height:2.05;letter-spacing:.1px;tab-size:2}.write-pane textarea::placeholder{color:#596d85}.preview-pane{display:none;padding:28px 36px 35px;min-height:510px;background:#111c2b}.preview-content{max-width:780px;margin:auto;color:#d4e0ed;font-family:'Noto Sans JP',sans-serif;font-size:14px;line-height:2}.preview-content h1,.preview-content h2,.preview-content h3{color:#f2f7fc;line-height:1.5;margin:1.2em 0 .65em}.preview-content h1{font-size:27px}.preview-content h2{font-size:21px;border-bottom:1px solid #2a3d52;padding-bottom:8px}.preview-content h3{font-size:17px}.preview-content p{margin:.65em 0;white-space:pre-wrap;overflow-wrap:anywhere}.preview-content ul{padding-left:1.6em}.preview-content blockquote{border-left:3px solid #50bdd0;margin:1em 0;padding:4px 14px;color:#9fb2c8;background:#17283a}.preview-content code{background:#20344a;color:#8de0e8;padding:2px 5px;border-radius:4px;font-family:monospace}.preview-content hr{border:0;border-top:1px solid #30465c;margin:22px 0}.preview-empty{color:#687e97;font-size:12px}.split-mode .write-pane,.split-mode .preview-pane{display:block;width:50%}.split-mode .write-pane{border-right:1px solid #2a3c51}.split-mode .write-pane textarea{height:510px;padding:24px 23px;font-size:12px}.split-mode .preview-pane{padding:24px 23px}.split-mode .preview-content{font-size:12px}.preview-mode .write-pane{display:none}.preview-mode .preview-pane{display:block}.editor-footer{height:43px;border-top:1px solid #27394e;background:#111b2a;padding:0 27px;display:flex;align-items:center;justify-content:space-between;color:#72869f;font-size:9px}.footer-left,.footer-left>span,.footer-right{display:flex;align-items:center;gap:8px}.footer-left{gap:17px}.footer-left svg{width:13px;height:13px;color:#6f8aa5}.footer-right{gap:8px}.footer-separator{color:#3d5870}.bottom-tip{display:flex;align-items:center;gap:7px;margin:16px 2px 0;color:#70849c;font-size:10px}.bottom-tip strong{color:#a8bbce;font-weight:600}.tip-icon{color:#66d2e2;font-size:14px;margin-right:2px}.bottom-tip kbd{font-family:inherit;background:#1b2a3c;border:1px solid #31445b;border-radius:4px;padding:2px 5px;color:#a8bdd2;font-size:9px}.shortcut-label{margin-left:-5px}.toast-region{position:fixed;right:24px;bottom:24px;z-index:20;display:flex;flex-direction:column;gap:8px}.toast{background:#1c3044;border:1px solid #36536a;border-radius:9px;padding:11px 15px;color:#dcecf8;font-size:11px;box-shadow:0 10px 30px #0007;animation:toastin .2s ease}.toast.error{border-color:#754453;color:#ffd7df}@keyframes toastin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.modal-backdrop{position:fixed;inset:0;background:#050b13bb;backdrop-filter:blur(5px);display:grid;place-items:center;z-index:30;padding:20px}.modal-backdrop[hidden]{display:none}.modal{width:min(100%,420px);padding:23px;border:1px solid #3a5068;border-radius:15px;background:#142237;box-shadow:0 25px 80px #0009}.modal-top{display:flex;justify-content:space-between;align-items:flex-start}.modal h2{font-size:18px;margin:6px 0 0}.modal-desc{font-size:11px;color:#8da0b8;margin:13px 0 18px}.export-options{display:flex;flex-direction:column;gap:8px}.export-option{display:flex;align-items:center;gap:12px;text-align:left;padding:12px;border:1px solid #30465e;border-radius:10px;background:#192b41}.export-option:hover{background:#213b54;border-color:#4c92a8}.file-icon{height:37px;width:37px;display:grid;place-items:center;border-radius:8px;background:#1e4b60;color:#7be1eb;font-size:10px;font-weight:700}.file-icon.txt{background:#30415b;color:#b9c9e2}.export-option>span:nth-child(2){display:flex;flex-direction:column;gap:4px}.export-option strong{font-size:12px}.export-option small{font-size:10px;color:#879bb2}.export-option>svg{margin-left:auto;width:16px;fill:none;stroke:#8ca2b8;stroke-width:1.8}.mobile-scrim{display:none}
body.light{color-scheme:light;--bg:#eef3f8;--text:#1a2c40;--muted:#72849a;--line:#d7e0eb;--line2:#c9d6e4;--editor:#fff;background:#eef3f8}.light .app-shell{background:radial-gradient(ellipse at 75% -20%,#d5eff6 0,transparent 43%),#eef3f8}.light .topbar{background:#ffffffed;border-color:#d8e2ed}.light .sidebar{background:#f7f9fc;border-color:#dbe4ee}.light .editor-card{background:#fff;border-color:#d5e0eb}.light .search-box{background:#fff;border-color:#d6e1ed}.light .search-box input,.light .doc-title{color:#20344b}.light .doc-item{color:#667b92}.light .doc-item.active{background:#e4f3f7;border-color:#c0e4eb;color:#1e4355}.light .doc-icon{background:#e0f1f4}.light .local-card{background:#f0f7fa;border-color:#d3e5ed}.light .toolbar-row,.light .editor-footer{border-color:#dce5ee}.light .view-switch{background:#f1f5f9;border-color:#d9e3ed}.light .view-tab{color:#73859a}.light .view-tab.active{background:#dceef3;color:#204d5c}.light .write-pane textarea{color:#30445b}.light .preview-pane{background:#fbfcfe}.light .preview-content{color:#354a62}.light .preview-content h1,.light .preview-content h2,.light .preview-content h3{color:#1e344b}.light .preview-content h2{border-color:#dbe4ed}.light .preview-content blockquote{background:#eef6f8;color:#5c7087}.light .preview-content code{background:#e9f0f6;color:#176275}.light .editor-footer{background:#f7f9fc;color:#788ca2}.light .bottom-tip{color:#71869c}.light .bottom-tip strong{color:#40586f}.light .breadcrumbs{color:#8193a6}.light .current-crumb{color:#40566e}.light .format-pill{background:#e6f5f7;border-color:#c7e8ec;color:#24758a}.light .icon-btn{color:#687f98}.light .btn{background:#f1f5f9;color:#3f566e;border-color:#d4e0eb}.light .btn-primary{background:#4bbbd0;color:#072334;border-color:#4bbbd0}.light .modal{background:#fff;border-color:#d2dfeb}.light .modal-desc,.light .export-option small{color:#71869c}.light .export-option{background:#f5f8fb;border-color:#d8e3ed;color:#263b52}.light .export-option:hover{background:#e9f4f7;border-color:#b7dce5}.light .modal .icon-btn:hover{background:#eef3f8}.light .toast{background:#fff;border-color:#c8dbe5;color:#244257}
@media(max-width:900px){.main-area{padding:25px 25px 32px}.sidebar{width:235px;flex-basis:235px}.brand{min-width:210px}.split-mode .write-pane textarea{padding:20px 17px}.split-mode .preview-pane{padding:20px 17px}}
@media(max-width:680px){.topbar{height:60px;padding:0 13px;gap:7px}.mobile-menu{display:grid;width:32px}.brand{min-width:0;gap:7px}.brand-mark{width:30px;height:30px}.brand-name{font-size:15px}.topbar-center{display:none}.top-actions{margin-left:auto;gap:5px}.top-actions .btn{width:35px;padding:0;justify-content:center}.top-actions .btn span{display:none}.top-actions .icon-btn{width:32px}.workspace{min-height:calc(100vh - 60px)}.sidebar{position:fixed;z-index:12;left:0;top:60px;bottom:0;min-height:0;width:275px;transform:translateX(-102%);transition:transform .22s ease;box-shadow:15px 0 40px #0005}.sidebar.open{transform:translateX(0)}.mobile-scrim.show{display:block;position:fixed;z-index:11;inset:60px 0 0;background:#050a12a8}.main-area{padding:18px 12px 25px;width:100%}.document-head{margin:0 3px 12px}.breadcrumbs{font-size:9px;gap:5px}.format-pill{font-size:7px}.doc-controls{gap:5px}.title-row{padding:21px 19px 15px}.doc-title{font-size:22px}.toolbar-row{padding:0 12px 10px;gap:8px;flex-wrap:wrap}.format-tools{gap:1px}.tool-btn{min-width:27px;height:28px}.tool-divider{margin:0 3px}.view-switch{margin-left:auto}.view-tab{padding:6px 9px;font-size:9px}.editor-body{min-height:58vh}.write-pane textarea{min-height:58vh;height:58vh;padding:20px 19px;font-size:13px}.preview-pane{min-height:58vh;padding:20px 19px}.split-mode .write-pane,.split-mode .preview-pane{width:50%;min-height:58vh}.split-mode .write-pane textarea{height:58vh;min-height:58vh;padding:15px 10px;font-size:10px}.split-mode .preview-pane{padding:15px 10px}.split-mode .preview-content{font-size:10px}.editor-footer{padding:0 14px;font-size:8px}.footer-left{gap:9px}.footer-right{gap:4px}.bottom-tip{font-size:9px;flex-wrap:wrap;line-height:1.7}.shortcut-label{display:none}.toast-region{right:12px;bottom:12px;left:12px}.toast{text-align:center}.light .sidebar{background:#f7f9fc}}
@media(max-width:380px){.top-actions{gap:1px}.top-actions .btn{width:31px}.brand-name{font-size:14px}.tool-btn{min-width:25px}.view-tab{padding:6px 7px}.footer-right{font-size:7px}}
