:root{color-scheme:light dark;--bg: #fafafa;--bg-elev: #ffffff;--bg-code: #f4f4f5;--fg: #1f2024;--fg-muted: #5a5a66;--border: #e3e3e8;--accent: #b8336a;--accent-bg: rgba(184, 51, 106, .08);--accent-selection: rgba(184, 51, 106, .22);--warn: #c97817;--warn-bg: rgba(201, 120, 23, .1);--error: #b03030;--success: #1f7d4a;--token-ruby: var(--accent);--token-ruby-reading: #5677ad;--token-bouten: #b56a1a;--token-bouten-bg: rgba(201, 120, 23, .06);--token-gaiji: #8a4faf;--token-gaiji-bg: rgba(138, 79, 175, .1);--token-gaiji-border: rgba(138, 79, 175, .55);--token-section: var(--fg-muted);--token-heading: var(--accent)}:root[data-theme=dark]{--bg: #16161b;--bg-elev: #1f1f25;--bg-code: #262630;--fg: #ececf1;--fg-muted: #a8a8b3;--border: #3a3a46;--accent: #ff8fb1;--accent-bg: rgba(255, 143, 177, .16);--accent-selection: rgba(255, 143, 177, .28);--warn: #f0b46a;--warn-bg: rgba(240, 180, 106, .14);--error: #ff9090;--success: #88dcaa;--token-ruby: var(--accent);--token-ruby-reading: #8aa9d9;--token-bouten: #f0b46a;--token-bouten-bg: rgba(240, 180, 106, .1);--token-gaiji: #c8a8ff;--token-gaiji-bg: rgba(200, 168, 255, .18);--token-gaiji-border: rgba(200, 168, 255, .55)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{font-family:Hiragino Sans,Yu Gothic,Noto Sans JP,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--fg);font-size:14px;line-height:1.5}.app{display:grid;grid-template-rows:auto auto 1fr auto;min-height:100vh}.app-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;background:var(--bg-elev);border-bottom:1px solid var(--border);gap:1rem;flex-wrap:wrap}.brand h1{margin:0;font-size:1.1rem;font-weight:600}.tagline{margin:.15rem 0 0;font-size:.8rem;color:var(--fg-muted)}.tagline a{color:var(--accent);text-decoration:none}.tagline a:hover{text-decoration:underline}.header-controls{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.sample-loader{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem}.sample-loader select{padding:.3rem .5rem;background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:4px;font:inherit}.share-btn,.guide-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .75rem;background:var(--accent);color:#fff;border:none;border-radius:4px;font:inherit;font-size:.85rem;cursor:pointer;min-height:36px}.guide-btn{background:transparent;color:var(--fg);border:1px solid var(--border)}.guide-btn:hover{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}.btn-icon{font-size:1em;line-height:1}.layout-mode-group{display:inline-flex;border:1px solid var(--border);border-radius:4px;overflow:hidden}.layout-btn{background:transparent;border:none;padding:.35rem .55rem;color:var(--fg-muted);font:inherit;font-size:.95rem;cursor:pointer;min-height:36px;min-width:36px}.layout-btn+.layout-btn{border-left:1px solid var(--border)}.layout-btn:hover{background:var(--accent-bg);color:var(--accent)}.layout-btn.active{background:var(--accent);color:#fff}.share-btn:hover:not(:disabled){filter:brightness(1.05)}.share-btn:disabled{background:var(--border);color:var(--fg-muted);cursor:not-allowed}.status-banner,.error-banner{padding:.5rem 1.25rem;font-size:.85rem;border-bottom:1px solid var(--border)}.status-banner{background:var(--accent-bg);color:var(--fg-muted)}.error-banner{background:#b030301a;color:var(--error)}.error-banner-critical{padding:.75rem 1.25rem;display:flex;flex-direction:column;gap:.25rem}.error-banner-title{font-weight:600}.error-banner-detail{font-family:Menlo,Consolas,monospace;font-size:.85rem;color:var(--fg)}.error-banner-detail code{background:var(--bg-code);padding:.1rem .4rem;border-radius:3px}.error-banner-hint{color:var(--fg);font-size:.85rem}.error-banner-action{background:var(--accent);color:#fff;border:none;border-radius:4px;padding:.3rem .7rem;font:inherit;font-size:.85rem;cursor:pointer;margin-inline-start:.5rem}.error-banner-action:hover{filter:brightness(1.05)}.app-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;background:var(--border);min-height:0}.app-main.mode-editor{grid-template-columns:1fr}.app-main.mode-editor>.preview-pane-wrapper{display:none}.app-main.mode-preview{grid-template-columns:1fr}.app-main.mode-preview>.editor-pane{display:none}@media (max-width: 760px){.app-main.mode-split{grid-template-columns:1fr;grid-template-rows:minmax(220px,1fr) minmax(220px,1fr)}}.pane{background:var(--bg-elev);display:flex;flex-direction:column;min-height:0;min-width:0}.pane-title,.pane-title-row{padding:.5rem 1rem;font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-muted);border-bottom:1px solid var(--border)}.pane-title-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.editor{flex:1 1 auto;min-height:0;min-width:0;overflow:hidden;background:var(--bg-elev)}.editor .cm-editor{height:100%}.editor-disabled-placeholder{padding:2rem 1.5rem;color:var(--fg-muted);text-align:center;font-size:.9rem;line-height:1.7;border:1px dashed var(--border);border-radius:6px;margin:1rem;background:var(--bg)}.preview-pane-wrapper{overflow:hidden}.perf-badge-root{position:relative;display:inline-block}.perf-badge{display:inline-flex;align-items:center;gap:.3rem;font-family:Menlo,Consolas,monospace;font-size:.8rem;color:var(--fg);background:var(--accent-bg);border:1px solid var(--border);padding:.18rem .55rem;border-radius:999px;text-transform:none;letter-spacing:0;font-weight:500;cursor:pointer}.perf-badge:hover{border-color:var(--accent);color:var(--accent)}.perf-badge-chevron{font-size:.7em;opacity:.7}.perf-popover{position:absolute;top:calc(100% + 6px);right:0;z-index:50;min-width:320px;background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 20px #0000002e;padding:.5rem 0;font-family:var(--font-sans, inherit)}.perf-popover-header{display:flex;justify-content:space-between;align-items:baseline;padding:.25rem .85rem .4rem;font-size:.8rem;font-weight:600;color:var(--fg);letter-spacing:0;text-transform:none}.perf-popover-sub{font-size:.7rem;color:var(--fg-muted);font-weight:400}.perf-table{width:100%;border-collapse:collapse;font-size:.8rem}.perf-table th,.perf-table td{padding:.3rem .85rem;text-align:left;border-top:1px solid var(--border)}.perf-table th{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted);background:var(--bg);font-weight:600}.perf-table td code{font-family:Menlo,Consolas,monospace;font-size:.78rem;background:var(--bg-code);padding:.05rem .35rem;border-radius:3px}.perf-num{font-family:Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;text-align:right!important;color:var(--fg)}.perf-total td{font-weight:600;background:var(--accent-bg);border-top:1px solid var(--border)}.perf-popover-footer{padding:.5rem .85rem .15rem;border-top:1px solid var(--border);margin-top:.15rem}@media (max-width: 760px){.perf-popover{right:auto;left:0;min-width:280px;max-width:calc(100vw - 24px)}}.tabs{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}.tab-bar{display:flex;border-bottom:1px solid var(--border);background:var(--bg);overflow-x:auto;scrollbar-width:thin}.tab{flex:0 0 auto;padding:.55rem .95rem;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--fg-muted);font:inherit;font-size:.85rem;cursor:pointer;white-space:nowrap}.tab:hover{color:var(--fg)}.tab.active{color:var(--accent);border-bottom-color:var(--accent)}.tab-panel{flex:1 1 auto;min-height:0;overflow:auto;background:var(--bg-elev)}.code-view{margin:0;padding:1rem;background:var(--bg-code);color:var(--fg);font-family:Menlo,Consolas,monospace;font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word;min-height:100%}.diag-table{width:100%;border-collapse:collapse;font-size:.85rem}.diag-table th,.diag-table td{text-align:left;padding:.4rem 1rem;border-bottom:1px solid var(--border);vertical-align:top}.diag-table th{background:var(--bg);font-weight:600;color:var(--fg-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}.diag-table code{font-size:.8rem;background:var(--bg-code);padding:.05rem .3rem;border-radius:3px}.diag-empty{padding:1.25rem;color:var(--fg-muted);font-size:.85rem}.outline-list{list-style:none;padding:.5rem 0;margin:0}.outline-item{padding:0}.outline-link{display:block;width:100%;text-align:left;background:none;border:none;padding:.4rem 1rem;cursor:pointer;color:var(--fg);font:inherit;font-size:.9rem}.outline-link:hover{background:var(--accent-bg);color:var(--accent)}.outline-l1 .outline-link{font-weight:600}.outline-l2 .outline-link{padding-inline-start:1.75rem;font-weight:500}.outline-l3 .outline-link{padding-inline-start:2.5rem;font-size:.85rem;color:var(--fg-muted)}.outline-l3 .outline-link:hover{color:var(--accent)}.outline-empty{padding:1.25rem;color:var(--fg-muted);font-size:.85rem;line-height:1.6}.settings-panel-root{position:relative;display:inline-block}.settings-trigger{background:transparent;border:1px solid var(--border);border-radius:4px;color:var(--fg);padding:.3rem .55rem;font:inherit;font-size:.95rem;cursor:pointer}.settings-trigger:hover{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}.settings-popover{position:absolute;top:calc(100% + 4px);right:0;z-index:100;background:var(--bg-elev);border:1px solid var(--border);border-radius:6px;box-shadow:0 6px 16px #00000024;padding:.5rem;min-width:240px;display:flex;flex-direction:column;gap:.35rem}.settings-row{display:flex;align-items:flex-start;gap:.5rem;padding:.45rem .55rem;border-radius:4px;cursor:pointer;font-size:.85rem;color:var(--fg)}.settings-row:hover{background:var(--accent-bg)}.settings-row input[type=checkbox]{margin-top:.2rem}.settings-label{display:flex;flex-direction:column;gap:.15rem}.settings-sub{color:var(--fg-muted);font-size:.75rem;line-height:1.45}.settings-divider{height:1px;background:var(--border);margin:.25rem .4rem}.settings-action{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;width:100%;text-align:left;background:transparent;border:none;border-radius:4px;padding:.45rem .55rem;font:inherit;font-size:.85rem;color:var(--fg);cursor:pointer}.settings-action:hover{background:var(--accent-bg);color:var(--accent)}.settings-row-radio{flex-direction:column;align-items:stretch;gap:.4rem}.settings-radio-group{display:inline-flex;border:1px solid var(--border);border-radius:4px;overflow:hidden;margin-top:.15rem}.settings-radio{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.3rem;padding:.35rem .6rem;cursor:pointer;font-size:.82rem;color:var(--fg-muted);background:var(--bg)}.settings-radio+.settings-radio{border-left:1px solid var(--border)}.settings-radio input[type=radio]{margin:0}.settings-radio:has(input:checked){background:var(--accent);color:#fff}.settings-radio:has(input:checked) input{accent-color:white}.notation-guide-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:200;display:flex;align-items:center;justify-content:center;padding:2rem}.notation-guide-modal{background:var(--bg-elev);color:var(--fg);border-radius:8px;max-width:880px;width:100%;max-height:100%;display:flex;flex-direction:column;box-shadow:0 10px 40px #00000040;overflow:hidden}.notation-guide-header{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.25rem;border-bottom:1px solid var(--border);background:var(--bg)}.notation-guide-header h2{margin:0;font-size:1rem;font-weight:600}.notation-guide-close{background:transparent;border:none;font-size:1.5rem;color:var(--fg-muted);cursor:pointer;line-height:1;padding:0 .3rem}.notation-guide-close:hover{color:var(--accent)}.notation-guide-content{display:flex;flex:1 1 auto;min-height:0;overflow:hidden}.notation-guide-toc{flex:0 0 220px;border-right:1px solid var(--border);background:var(--bg);overflow-y:auto;padding:.5rem 0;font-size:.85rem}.notation-guide-toc ul{list-style:none;padding:0;margin:0}.toc-link{display:block;width:100%;text-align:left;background:none;border:none;padding:.4rem 1rem .4rem 1.25rem;font:inherit;font-size:.85rem;color:var(--fg);cursor:pointer;line-height:1.4}.toc-link:hover{background:var(--accent-bg);color:var(--accent)}.toc-link.active{background:var(--accent);color:#fff}.toc-l3 .toc-link{padding-left:2rem;font-size:.8rem;color:var(--fg-muted)}.toc-l3 .toc-link:hover{color:var(--accent)}.toc-l3 .toc-link.active{color:#fff}.notation-guide-body{flex:1 1 auto;padding:1.25rem 1.5rem 2rem;overflow:auto;line-height:1.7;font-size:.95rem}.notation-guide-body h1,.notation-guide-body h2,.notation-guide-body h3{margin-top:1.5em;margin-bottom:.4em;color:var(--accent)}.notation-guide-body h1{font-size:1.45rem;border-bottom:1px solid var(--border);padding-bottom:.3em}.notation-guide-body h2{font-size:1.2rem}.notation-guide-body h3{font-size:1rem}.notation-guide-body p{margin:.75em 0}.notation-guide-body ul,.notation-guide-body ol{padding-inline-start:1.5em}.notation-guide-body code{background:var(--bg-code);padding:.1em .3em;border-radius:3px;font-size:.92em;font-family:Menlo,Consolas,monospace}.notation-guide-body pre{background:var(--bg-code);padding:.85rem 1rem;border-radius:4px;overflow-x:auto;font-size:.88em;margin:.85em 0}.notation-guide-body pre code{background:transparent;padding:0}.notation-guide-body table{border-collapse:collapse;margin:1em 0;font-size:.9em}.notation-guide-body th,.notation-guide-body td{border:1px solid var(--border);padding:.35em .7em;text-align:left}.notation-guide-body th{background:var(--bg);font-weight:600}.notation-guide-body hr{border:none;border-top:1px solid var(--border);margin:1.5em 0}.notation-guide-body a{color:var(--accent)}.toast{position:fixed;bottom:1.25rem;right:1.25rem;background:var(--fg);color:var(--bg);padding:.55rem .95rem;border-radius:6px;font-size:.85rem;box-shadow:0 4px 12px #0000002e;z-index:10;animation:toast-in .16s ease-out}@keyframes toast-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.app-footer{padding:.5rem 1.25rem;font-size:.8rem;color:var(--fg-muted);background:var(--bg-elev);border-top:1px solid var(--border);text-align:center}.app-footer a{color:var(--fg-muted);text-decoration:none}.app-footer a:hover{color:var(--accent);text-decoration:underline}@media (max-width: 760px){.app-header{padding:.55rem .75rem;gap:.5rem}.brand h1{font-size:.95rem}.tagline{display:none}.header-controls{gap:.4rem;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:.15rem}.header-controls::-webkit-scrollbar{display:none}.guide-btn .btn-text,.share-btn .btn-text{display:none}.guide-btn,.share-btn{min-width:40px;justify-content:center;padding:.35rem .6rem}.sample-loader .sample-label{display:none}.sample-loader select{min-height:36px;font-size:.85rem;max-width:140px}.editor-pane,.preview-pane-wrapper{min-height:0}.tab{min-height:44px;padding:.7rem .9rem}.tab-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.tab-bar::-webkit-scrollbar{display:none}.pane-title,.pane-title-row{padding:.4rem .75rem;font-size:.7rem}.perf-badge{font-size:.7rem;padding:.1rem .4rem}.toast{bottom:.75rem;right:.75rem;left:.75rem;text-align:center}.settings-popover{right:-4px;min-width:220px;max-width:calc(100vw - 24px)}.notation-guide-backdrop{padding:0}.notation-guide-modal{border-radius:0;max-height:100dvh;height:100dvh}.notation-guide-header{padding:.7rem 1rem}.notation-guide-header h2{font-size:.95rem}.notation-guide-body{padding:1rem;font-size:.9rem}.notation-guide-content{flex-direction:column}.notation-guide-toc{flex:0 0 auto;border-right:none;border-bottom:1px solid var(--border);max-height:32vh;overflow-y:auto}.notation-guide-body pre{font-size:.82em}.outline-link{padding:.7rem 1rem;font-size:.95rem;min-height:44px}.app-footer{padding:.5rem .75rem;font-size:.7rem}}@supports (-webkit-touch-callout: none){body{-webkit-text-size-adjust:100%}}.html-preview-shell{display:flex;flex-direction:column;height:100%;min-height:0}.html-preview-toolbar{display:flex;justify-content:flex-end;padding:.4rem .75rem;border-bottom:1px solid var(--border);background:var(--bg)}.writing-mode-btn{background:transparent;border:1px solid var(--border);border-radius:4px;color:var(--fg);padding:.25rem .6rem;font:inherit;font-size:.8rem;cursor:pointer}.writing-mode-btn:hover{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}.writing-mode-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.html-preview{padding:1.25rem 1.5rem;font-size:16px;line-height:1.9;overflow-wrap:anywhere;flex:1 1 auto;overflow:auto}.html-preview.is-vertical{writing-mode:vertical-rl;-webkit-writing-mode:vertical-rl;text-orientation:mixed;overflow-x:auto;overflow-y:hidden;overflow-wrap:break-word;max-height:100%;font-family:Hiragino Mincho ProN,Yu Mincho,YuMincho,"Noto Serif JP","Source Han Serif JP",BIZ UDPMincho,serif;line-height:2}.html-preview.is-vertical .aozora-page-break,.html-preview.is-vertical .aozora-section-break{border-top:none;border-right:2px dashed var(--fg-muted);margin:0 1.5em}.aozora-doc{font-family:Hiragino Mincho ProN,Yu Mincho,"Noto Serif JP","Source Han Serif JP",serif;color:var(--fg)}.aozora-doc :is(p,div){margin:0 0 .75rem}.aozora-doc ruby{ruby-position:over}.aozora-doc rt{font-size:.5em;color:var(--fg-muted);font-family:inherit}.aozora-doc rp{display:none}.aozora-double-ruby{color:var(--accent);background:var(--accent-bg);padding:0 .1em;border-radius:.15em}.aozora-bouten{font-style:normal;-webkit-text-emphasis-style:filled sesame;text-emphasis-style:filled sesame;-webkit-text-emphasis-position:over right;text-emphasis-position:over right}.aozora-bouten-goma{-webkit-text-emphasis-style:filled sesame;text-emphasis-style:filled sesame}.aozora-bouten-white-sesame{-webkit-text-emphasis-style:open sesame;text-emphasis-style:open sesame}.aozora-bouten-circle{-webkit-text-emphasis-style:filled circle;text-emphasis-style:filled circle}.aozora-bouten-white-circle{-webkit-text-emphasis-style:open circle;text-emphasis-style:open circle}.aozora-bouten-double-circle{-webkit-text-emphasis-style:filled double-circle;text-emphasis-style:filled double-circle}.aozora-bouten-janome{-webkit-text-emphasis-style:open double-circle;text-emphasis-style:open double-circle}.aozora-bouten-cross{-webkit-text-emphasis-style:"×";text-emphasis-style:"×"}.aozora-bouten-white-triangle{-webkit-text-emphasis-style:open triangle;text-emphasis-style:open triangle}.aozora-bouten-wavy-line{text-decoration:underline wavy;text-decoration-color:var(--accent);-webkit-text-emphasis-style:none;text-emphasis-style:none}.aozora-bouten-under-line{text-decoration:underline;-webkit-text-emphasis-style:none;text-emphasis-style:none}.aozora-bouten-double-under-line{text-decoration:underline double;-webkit-text-emphasis-style:none;text-emphasis-style:none}.aozora-bouten-left{-webkit-text-emphasis-position:under left;text-emphasis-position:under left}.aozora-bouten-right{-webkit-text-emphasis-position:over right;text-emphasis-position:over right}.aozora-gaiji{background:var(--token-gaiji-bg);color:var(--token-gaiji);padding:0 .15em;border-radius:.18em;border-bottom:1px dotted var(--token-gaiji-border)}.aozora-container,.aozora-container-indent{display:block}.aozora-container-indent-1{padding-inline-start:1em}.aozora-container-indent-2{padding-inline-start:2em}.aozora-container-indent-3{padding-inline-start:3em}.aozora-container-indent-4{padding-inline-start:4em}.aozora-container-indent-5{padding-inline-start:5em}.aozora-container-indent-6{padding-inline-start:6em}.aozora-container-indent-7{padding-inline-start:7em}.aozora-container-indent-8{padding-inline-start:8em}.aozora-container-indent-9{padding-inline-start:9em}.aozora-container-indent-10{padding-inline-start:10em}.aozora-indent{display:inline-block}.aozora-indent-1{width:1em}.aozora-indent-2{width:2em}.aozora-indent-3{width:3em}.aozora-indent-4{width:4em}.aozora-indent-5{width:5em}.aozora-indent-6{width:6em}.aozora-indent-7{width:7em}.aozora-indent-8{width:8em}.aozora-indent-9{width:9em}.aozora-indent-10{width:10em}.aozora-container-align-end{text-align:end}.aozora-align-end{display:inline-block;min-width:.5em}.aozora-container-keigakomi{border:1px solid var(--fg-muted);padding:.5em .75em;margin:.5em 0}.aozora-warichu,.aozora-container-warichu{font-size:.8em;color:var(--fg-muted)}.aozora-warichu:before{content:"（"}.aozora-warichu:after{content:"）"}.aozora-kaeriten{font-size:.7em;vertical-align:super;color:var(--accent)}.aozora-tcy{display:inline-block}.aozora-page-break{display:block;border-top:2px dashed var(--fg-muted);margin:1.5em 0;padding-top:.4em;font-size:.7em;color:var(--fg-muted);text-align:center}.aozora-page-break:before{content:"— 改ページ —"}.aozora-section-break{display:block;border-top:1px dashed var(--border);margin:1em 0;padding-top:.3em;font-size:.7em;color:var(--fg-muted);text-align:center;opacity:.85}.aozora-section-break-choho:before{content:"— 改丁 —"}.aozora-section-break-dan:before{content:"— 改段 —"}.aozora-section-break-spread:before{content:"— 改見開き —"}.aozora-annotation[hidden]{display:none}