:root{font-family:"Yu Gothic UI","Meiryo",sans-serif;color:#303b35;background:#f6f7f3;font-synthesis:none;--green:#3e6953;--muted:#8a928a;--line:#e5e9e1;--serif:"Yu Mincho","Hiragino Mincho ProN",serif}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,select{cursor:pointer}button{transition:background .15s,transform .15s}button:hover{filter:brightness(.97)}button:active{transform:translateY(1px)}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #60957b;outline-offset:3px}button{color:inherit}button:disabled{opacity:.45;cursor:default}input,textarea{color:#303b35}textarea{resize:none}input::placeholder,textarea::placeholder{color:#a2aaa1}.app-shell{display:flex;min-height:100vh}.rail{width:76px;flex-shrink:0;border-right:1px solid var(--line);display:flex;align-items:center;flex-direction:column;background:#eff2eb;position:fixed;inset:0 auto 0 0;z-index:2}.brand{text-decoration:none;font:bold 40px Georgia,serif;letter-spacing:-5px;color:#385c49;margin-top:24px;line-height:1}.brand span{font-size:22px;letter-spacing:0}.rail-label{writing-mode:vertical-rl;font-size:9px;letter-spacing:3px;color:#9aa596;margin-top:87px}.help-button{margin-top:auto;margin-bottom:25px;border:1px solid #cdd6c9!important;border-radius:50%!important;width:27px!important;height:27px!important;font-family:Georgia,serif}.main-shell{margin-left:76px;width:calc(100% - 76px)}.topbar{height:85px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 42px;gap:16px}.identity,.topbar-actions{display:flex;align-items:center;gap:24px}.brand-name{font:30px Georgia,serif;letter-spacing:-1px}.brand-caption{font-size:11px;color:#8e988d;letter-spacing:2px;border-left:1px solid #d8dfd3;padding-left:23px}.topbar-actions{gap:15px}.save-status{font-size:11px;color:#859181;display:flex;align-items:center;gap:7px}.save-status i{width:6px;height:6px;background:#80a084;border-radius:50%}.save-status.error{color:#aa5749}.save-status.error i{background:#aa5749}.button{border:1px solid var(--line);border-radius:7px;background:white;padding:9px 14px;font-size:12px;white-space:nowrap}.button.quiet{background:transparent}.button.primary{background:var(--green);color:white;border-color:var(--green)}.icon-button{border:0;background:transparent;border-radius:6px;width:32px;height:32px;font-size:20px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon-button:hover{background:#eaf0e6}main{max-width:1600px;margin:auto;padding:40px 42px 0}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:33px}.eyebrow{font-size:9px;font-weight:600;letter-spacing:2.6px;color:#8b9a84;margin:0 0 11px}h1{font-family:var(--serif);font-size:28px;font-weight:500;letter-spacing:2px;margin:0 0 11px}.intro{font-size:12px;color:#8b9488;letter-spacing:.5px;margin:0}.workspace-control{width:294px;flex-shrink:0}.workspace-control>label{font-size:9px;letter-spacing:1.8px;color:#899580;display:flex;justify-content:space-between;margin-bottom:9px}.workspace-row{display:flex;gap:8px;align-items:center}.workspace-row select{border:1px solid #dce3d5;border-radius:7px;background:#fff;padding:12px 30px 12px 13px;width:100%;min-width:0;font-size:12px;color:#435443;text-overflow:ellipsis}.new-workspace{font-size:21px;width:40px;height:40px;padding:0;background:#eaf0e5;border-color:#dce5d4;flex-shrink:0}.writing-grid{display:grid;grid-template-columns:minmax(280px, .8fr) minmax(400px,1.6fr);gap:24px;align-items:stretch}.panel{border:1px solid #e0e6db;border-radius:12px;background:#fff;min-width:0;box-shadow:0 4px 12px #354c3803;overflow:hidden}.ideas-panel{padding:23px 22px 0;display:flex;flex-direction:column;background:#fcfdf9}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-title{display:flex;align-items:center;gap:9px}.panel-title h2{font-size:14px;font-weight:600;letter-spacing:.7px;margin:0}.section-icon{color:#6e8460;font-size:23px}.count-badge{font-size:10px;border:1px solid #e2e7dc;background:#f0f3eb;color:#8a9980;padding:2px 6px;border-radius:5px}.small-label{font-size:8px;letter-spacing:1.7px;color:#a4ad9e;white-space:nowrap}.panel-description{font-size:11px;color:#99a18f;margin:13px 0 21px}#word-form{border:1px solid #dee6d5;background:#fff;border-radius:8px;padding:12px}#word-input{border:0;width:100%;min-height:66px;font-size:12px;line-height:1.9;background:transparent;outline-offset:1px}.word-input-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px}.word-input-footer>span{font-size:9px;color:#a4aa9f}.word-input-footer .button{font-size:11px;padding:7px 11px}.word-tools{display:flex;gap:10px;margin:21px 0 16px}.search-field{display:flex;gap:8px;align-items:center;border-bottom:1px solid #e3e8dc;flex:1;min-width:0;color:#97a08f}.search-field>span{font-size:23px}.search-field input{width:100%;border:0;font-size:11px;background:transparent;padding:8px 0;min-width:0}.word-tools>.icon-button{color:#9ba592}.word-list{display:flex;align-content:flex-start;align-items:flex-start;flex-wrap:wrap;gap:10px;min-height:200px;max-height:390px;overflow-y:auto;padding:3px 2px 18px;flex:1}.word-chip{display:inline-flex;align-items:center;border:1px solid #e2e6d8;background:#f0f2e7;border-radius:6px;max-width:100%;transition:transform .15s}.word-chip:nth-child(4n+2){background:#eaf1ed;border-color:#dce7e0}.word-chip:nth-child(4n+3){background:#f8f0e7;border-color:#ede3d6}.word-chip:nth-child(4n+4){background:#eeedf4;border-color:#e3e1ec}.word-chip:hover{transform:translateY(-2px)}.word-insert{border:0;background:transparent;padding:9px 3px 9px 12px;font-size:12px;overflow-wrap:anywhere;text-align:left;line-height:1.6;min-width:0}.word-remove{border:0;background:transparent;padding:8px;color:#a5ac9c;font-size:13px;align-self:flex-start}.word-remove:hover{color:#ad5544}.empty-words{width:100%;text-align:center;color:#98a28e;padding:37px 5px 24px}.empty-words .empty-symbol{display:block;font-size:32px;color:#b6c3a9;margin-bottom:14px}.empty-words p{font-size:12px;line-height:2;margin:0}.empty-words small{font-size:10px;color:#a7afa0}.idea-bottom{border-top:1px solid var(--line);padding:17px 0;display:flex;gap:8px;color:#a0aa96;font-size:9px;line-height:1.8}.hint-icon{font-size:14px}.editor-panel{display:flex;flex-direction:column;min-height:570px}.editor-panel>.panel-header{padding:20px 25px}.paper-icon{font-size:21px}.editor-actions{display:flex;align-items:center;gap:10px}.editor-actions select{border:1px solid #e2e7df;border-radius:5px;font-size:10px;padding:6px 10px;background:#f8faf6;color:#7f8f77}.editor-actions>.icon-button{font-size:23px;color:#8a9681}.editor-toolbar{background:#fbfcf8;border-top:1px solid #edf0e8;border-bottom:1px solid #edf0e8;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}.toolbar-left,.section-buttons{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.toolbar-left{gap:12px}.section-buttons button{font-size:10px;border:1px solid #e4e9df;background:white;color:#8c9881;border-radius:4px;padding:4px 9px}.text-button{border:0;background:transparent;font-size:10px;color:#8c9881;white-space:nowrap;padding:4px 0}.document-area{padding:30px 36px 0;flex:1;display:flex;flex-direction:column}#document-title{font-family:var(--serif);font-size:25px;letter-spacing:1.5px;border:0;width:100%;background:transparent;padding:0 0 16px;line-height:1.6}#document-title::placeholder{color:#b3baad}.document-rule{height:1px;background:#edf0e8;margin-bottom:18px}#document-body{width:100%;flex:1;min-height:330px;border:0;outline-offset:4px;font-family:var(--serif);font-size:14px;line-height:2.35;letter-spacing:.7px;padding:0 0 20px;background:transparent;tab-size:4}#document-body::placeholder{color:#bcc3b7}.editor-footer{padding:14px 24px;border-top:1px solid #edf0e8;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#a1ac97;font-size:10px}.editor-footer>div{display:flex;gap:13px}.footer-divider{color:#d1d9ca}.page-footer{display:flex;justify-content:space-between;gap:20px;color:#a1ac97;font-size:9px;letter-spacing:.5px;padding:21px 0}.tiny-spark{font-size:14px;padding-right:6px}.footer-dot{padding:0 9px;color:#b9c2b1}.toast{position:fixed;bottom:27px;left:50%;transform:translateX(-50%);padding:13px 23px;border-radius:8px;background:#334e3e;color:white;box-shadow:0 5px 20px #0002;font-size:12px;max-width:90%;z-index:10}dialog{border:1px solid #dfe6d8;border-radius:13px;padding:27px;width:440px;max-width:calc(100% - 32px);color:#394537;box-shadow:0 24px 90px #243d3026}dialog::backdrop{background:#25382d55;backdrop-filter:blur(3px)}.dialog-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:25px}.dialog-heading h2{font-size:19px;margin:0;font-weight:500}dialog label{font-size:12px;display:block;margin-bottom:10px}#workspace-name{padding:12px;width:100%;border:1px solid #dce5d5;border-radius:6px;background:#fbfcf9}.dialog-note{font-size:12px;line-height:1.9;color:#86907e}.dialog-actions{display:flex;justify-content:space-between;margin-top:25px;gap:10px}.dialog-actions>div{display:flex;gap:8px}.danger{color:#ad6657;border-color:#ecdcd5}.confirm-actions{justify-content:flex-end}.help-list{padding-left:20px;font-size:12px;line-height:1.9}.help-list li{padding-left:5px;margin-bottom:17px}.help-list p{color:#89927f;margin:4px 0}.storage-note{background:#f1f4ec;padding:13px;font-size:11px;line-height:1.9;color:#7c8a73;border-radius:7px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.focus-mode .ideas-panel{display:none}.focus-mode .writing-grid{grid-template-columns:minmax(0,850px);justify-content:center}.focus-mode #document-body{min-height:55vh}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:#d9e1d2;border-radius:6px}@media(min-width:1500px){main{padding-top:50px}.editor-panel{min-height:calc(100vh - 310px)}.word-list{max-height:calc(100vh - 550px)}}@media(max-width:1100px){main{padding:30px 24px 0}.topbar{padding:0 24px}.writing-grid{gap:17px;grid-template-columns:minmax(260px,.8fr) minmax(330px,1.3fr)}.ideas-panel{padding:20px 16px 0}.document-area{padding:25px 24px 0}.small-label{display:none}.brand-caption{display:none}.workspace-control{width:260px}.editor-toolbar{padding:10px 17px}}@media(max-width:800px){.rail{width:54px}.brand{font-size:33px}.main-shell{margin-left:54px;width:calc(100% - 54px)}.topbar{height:70px;padding:0 18px}.topbar-actions{gap:7px}.topbar .button{padding:7px;font-size:10px}.save-status{font-size:9px}.page-heading{align-items:flex-start;flex-direction:column;gap:24px}.workspace-control{width:100%}.writing-grid{grid-template-columns:1fr}.word-list{min-height:100px;max-height:250px}.editor-panel{min-height:550px}.page-footer{flex-direction:column;gap:8px}h1{font-size:24px}main{padding:27px 18px 0}.rail-label{font-size:8px}.brand-name{font-size:25px}}@media(max-width:420px){.save-status{display:none}.editor-toolbar{align-items:flex-start}.toolbar-left{gap:5px}.section-buttons{gap:4px}.section-buttons button{padding:4px 6px}.document-area{padding:22px 18px 0}.editor-panel>.panel-header{padding:18px}.editor-footer{padding:14px}.panel-title h2{font-size:13px}}

/* Branding, theme controls and editable insert presets. */
.identity{gap:4px;align-items:flex-start;flex-direction:column;flex-shrink:0}
.brand-caption{display:block;border:0;padding:0;font-size:10px;letter-spacing:2px}
#insert-dialog{width:620px;max-height:85vh;overflow-y:auto}
#insert-rows{display:flex;flex-direction:column;gap:14px;margin-bottom:15px}
.insert-row{padding:15px;border:1px solid var(--line);border-radius:8px;background:#f8faf6}
.insert-row label{margin-bottom:12px}
.insert-row input,.insert-row textarea{display:block;width:100%;margin-top:7px;padding:10px;border:1px solid #dce5d5;border-radius:5px;background:#fff;font-size:12px;line-height:1.7}
.insert-row textarea{resize:vertical;min-height:80px}
.insert-row-actions{display:flex;justify-content:flex-end;gap:7px}
#insert-error{font-size:12px;color:#b34f43}
body[data-theme="dark"]{color-scheme:dark;background:#181e1b;color:#e0e8df;--green:#4f8065;--line:#39463c;--muted:#a5b4a5}
body[data-theme="dark"] .rail{background:#1d2620}
body[data-theme="dark"] .brand{color:#b1d5b7}
body[data-theme="dark"] .panel,body[data-theme="dark"] dialog{background:#202923;border-color:#39463c;color:#e0e8df}
body[data-theme="dark"] .ideas-panel{background:#232d25}
body[data-theme="dark"] .button,body[data-theme="dark"] select,body[data-theme="dark"] #word-form,body[data-theme="dark"] #workspace-name,body[data-theme="dark"] .insert-row input,body[data-theme="dark"] .insert-row textarea{background:#29362d;color:#e0e8df;border-color:#465749}
body[data-theme="dark"] .button.quiet{background:transparent}
body[data-theme="dark"] .button.primary{background:#4f8065;border-color:#649a77;color:#fff}
body[data-theme="dark"] input,body[data-theme="dark"] textarea{color:#e0e8df}
body[data-theme="dark"] input::placeholder,body[data-theme="dark"] textarea::placeholder{color:#93a18f}
body[data-theme="dark"] .editor-toolbar,body[data-theme="dark"] .insert-row{background:#242f27;border-color:#39463c}
body[data-theme="dark"] .section-buttons button,body[data-theme="dark"] .count-badge{background:#2d3c30;border-color:#465849;color:#c0d3b8}
body[data-theme="dark"] .editor-footer,body[data-theme="dark"] .search-field{border-color:#39463c}
body[data-theme="dark"] .document-rule{background:#39463c}
body[data-theme="dark"] .word-chip{background:#37412c;border-color:#4c593c}
body[data-theme="dark"] .word-chip:nth-child(4n+2){background:#2d4235;border-color:#3d5a48}
body[data-theme="dark"] .word-chip:nth-child(4n+3){background:#463a2b;border-color:#60513d}
body[data-theme="dark"] .word-chip:nth-child(4n+4){background:#383447;border-color:#514a63}
body[data-theme="dark"] .word-remove{color:#b1bba9}
body[data-theme="dark"] .icon-button:hover{background:#344838}
body[data-theme="dark"] :is(.intro,.panel-description,.small-label,.eyebrow,.brand-caption,.rail-label,.save-status,.word-input-footer>span,.idea-bottom,.editor-footer,.page-footer,.dialog-note,.help-list p,.text-button,.workspace-control>label,.empty-words,.empty-words small){color:#adbaa6}
body[data-theme="dark"] :is(.section-icon,.editor-actions>.icon-button,.word-tools>.icon-button,.empty-symbol){color:#a4c293}
body[data-theme="dark"] .storage-note{background:#2d3b2f;color:#bfceb6}
body[data-theme="dark"] :is(.danger,.save-status.error,#insert-error){color:#f0aa99}
body[data-theme="dark"] .toast{background:#c3dfc8;color:#203727}
body[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#4b614f}
@media(max-width:600px){.topbar{height:auto;min-height:80px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}.topbar-actions{flex-wrap:wrap}.topbar .save-status{display:none}.editor-toolbar{flex-wrap:wrap}.brand-caption{font-size:9px}#insert-dialog .dialog-actions{flex-wrap:wrap}}

/* Compact workspace and word reference panel. */
main{padding-top:24px;padding-bottom:24px}
.page-heading{justify-content:flex-end;margin-bottom:20px}
.ideas-panel>.panel-header{margin-bottom:20px}
.writing-grid.has-detail{grid-template-columns:minmax(220px,.75fr) minmax(320px,1.4fr) minmax(270px,.85fr);gap:16px}
.detail-panel{padding:20px;align-self:start;max-height:calc(100vh - 200px);overflow-y:auto}
.detail-panel[hidden]{display:none}
.detail-panel .panel-header{align-items:flex-start;margin-bottom:16px}
.detail-panel h2{font-size:17px;line-height:1.7;margin:0;overflow-wrap:anywhere}
.detail-panel label{display:block;font-size:12px;margin:18px 0 8px}
.detail-panel textarea{width:100%;padding:10px;font-size:12px;line-height:1.8;border:1px solid #dce5d5;border-radius:6px;resize:vertical;min-height:75px;background:#fbfcf9}
.dictionary-links{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.dictionary-links a{color:#426d53;font-size:11px;text-decoration:none}
.dictionary-links a:hover{text-decoration:underline}
.detail-note{font-size:10px;line-height:1.8;color:#7c8778}
.related-word{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.related-word>span{font-size:12px;overflow-wrap:anywhere;min-width:0}
.related-word .button{font-size:10px;padding:6px;flex-shrink:0}
.word-chip.selected{outline:2px solid #689277;outline-offset:1px}
body[data-theme="dark"] .detail-panel textarea{background:#29362d;border-color:#465749}
body[data-theme="dark"] .dictionary-links a{color:#b0d8ba}
body[data-theme="dark"] .detail-note{color:#adbaa6}
.focus-mode .detail-panel{display:none}
.focus-mode .writing-grid.has-detail{grid-template-columns:minmax(0,850px)}
@media(max-width:1200px){.writing-grid.has-detail{grid-template-columns:minmax(230px,.8fr) minmax(330px,1.3fr)}.detail-panel{grid-column:1/-1;max-height:none}.detail-panel textarea{min-height:85px}}
@media(max-width:800px){.writing-grid.has-detail{grid-template-columns:minmax(0,1fr)}.detail-panel{grid-column:auto;max-height:none}.page-heading{align-items:stretch}}
.wiki-controls{margin-top:18px}
.wiki-source{display:flex;flex-wrap:wrap;gap:8px;font-size:10px;line-height:1.8;overflow-wrap:anywhere}
.wiki-source[hidden]{display:none}
.wiki-source a{color:#426d53}
body[data-theme="dark"] .wiki-source a{color:#b0d8ba}
#wiki-activity:empty{display:none}
.synonym-group{border-bottom:1px solid var(--line);padding:10px 0;font-size:12px;line-height:1.8}
.synonym-group summary{cursor:pointer;overflow-wrap:anywhere}
.synonym-options{display:flex;gap:6px;flex-wrap:wrap;padding-top:10px}
.synonym-options .button{font-size:11px;padding:5px 8px;white-space:normal}
.detail-note a{color:#426d53}
body[data-theme="dark"] .detail-note a{color:#b0d8ba}
#synonyms-fill{margin-top:8px}
/* Chips change only paint, never text metrics or spacing. */
#document-body{white-space:pre-wrap;overflow-wrap:anywhere;cursor:text;color:inherit}
#document-body:focus-visible{outline:2px solid #60957b}
#document-body[data-empty="true"]::before{content:attr(data-placeholder);color:#93a18f;pointer-events:none;position:absolute}
#document-body .body-chip{display:inline;font:inherit;line-height:inherit;letter-spacing:inherit;word-spacing:inherit;vertical-align:baseline;margin:0;padding:0;border:0;border-radius:3px;background:#deebdf;color:inherit;box-shadow:inset 0 -1px 0 #7fa58a;box-decoration-break:clone;-webkit-box-decoration-break:clone}
body[data-theme="dark"] #document-body .body-chip{background:#36523f;box-shadow:inset 0 -1px 0 #7da98a}
#document-body.drag-over{outline:2px dashed #79a58a;outline-offset:4px}
.word-insert[draggable="true"]{cursor:grab}
.word-insert[draggable="true"]:active{cursor:grabbing}
#document-body .body-chip{cursor:grab}
#document-body .body-chip:active{cursor:grabbing}