:root {
  color-scheme: light;
  --ink: #26352f;
  --muted: #6e7973;
  --green: #32584c;
  --deep-green: #203d34;
  --line: #e7e8e0;
  --paper: #f7f7f2;
  --radius: 18px;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; background: var(--paper); color: var(--ink); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, input:focus-visible, textarea:focus-visible, label.choose-image:focus-within { outline: 3px solid #9dc0a7; outline-offset: 3px; }
[hidden] { display: none !important; }
.app-shell { min-height: 100dvh; display: flex; flex-direction: column; }
.app-header { position: sticky; top: 0; z-index: 20; display:flex; align-items:center; justify-content:space-between; padding: 0 max(25px, calc((100vw - 1160px)/2)); min-height: 82px; background:#fff; border-bottom: 1px solid var(--line); gap:24px; }
.brand { display:flex; align-items:center; gap:11px; flex-shrink:0; }
.brand-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--deep-green); color:#fff; font-family:serif; font-size:23px; }
.brand-copy { display:flex; flex-direction:column; gap:2px; }
.brand-copy strong { font-size:21px; letter-spacing:.11em; line-height:1.1; }
.brand-copy small { font-size:9px; letter-spacing:.24em; color:#829087; }
.main-tabs { display:flex; gap:5px; align-self:stretch; align-items:center; }
.main-tab { border:0; background:transparent; color:#738078; font-size:14px; font-weight:700; height:44px; min-width:100px; border-radius:11px; transition:background .18s ease,color .18s ease; }
.main-tab:hover { background:#f0f2ec; }
.main-tab.is-active { background:#e7efe8; color:#234d3b; }
.library-view { width:100%; max-width:1160px; margin:0 auto; padding:42px 25px 35px; flex:1; }
.library-hero { min-height:286px; background:#e6ece3; border-radius:25px; position:relative; overflow:hidden; display:flex; align-items:center; padding:42px clamp(25px,5vw,67px); isolation:isolate; }
.hero-copy { z-index:2; max-width:540px; }
.eyebrow { margin:0 0 12px; letter-spacing:.2em; font-size:10px; font-weight:800; color:#71887b; }
.library-hero h1 { margin:0; font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP",serif; font-size:clamp(29px,4.3vw,47px); font-weight:700; line-height:1.5; letter-spacing:.04em; }
.library-hero h1 span { color:#507968; }
.hero-subtitle { font-size:14px; line-height:1.9; color:#68766e; margin:11px 0 22px; }
.primary-button, .secondary-button, .danger-button { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:43px; padding:10px 20px; border-radius:11px; font-size:13px; font-weight:800; text-align:center; border:1px solid transparent; text-decoration:none; }
.primary-button { background:var(--deep-green); color:#fff; }
.primary-button:hover { background:#345b4c; }
.secondary-button { background:#fff; color:var(--deep-green); border-color:#d5ddd6; }
.secondary-button:hover { background:#f0f5f0; }
.danger-button { background:#a5433f; color:white; }
.danger-button:hover { background:#8c302e; }
.mobile-break { display:none; }
.hero-art { position:absolute; z-index:1; overflow:hidden; pointer-events:none; top:0; right:0; bottom:0; width:45%; }
.art-orbit { position:absolute; border:1px solid #cddccf; border-radius:50%; width:360px; height:360px; right:5px; top:-50px; }
.orbit-two { width:290px; height:290px; right:40px; top:-15px; }
.art-sun { position:absolute; width:130px; height:130px; background:#f8e6b5; border-radius:50%; top:44px; right:136px; box-shadow:0 0 0 12px #f8e9c24d; }
.art-hill { position:absolute; width:470px; height:290px; border-radius:52% 48% 0 0; bottom:-188px; right:-100px; transform:rotate(-8deg); }
.hill-back { background:#b7d3bd; right:55px; bottom:-200px; }
.hill-front { background:#8bae99; }
.art-quote { position:absolute; right:70px; top:121px; font-family:"Yu Mincho",serif; font-size:14px; line-height:1.85; color:#507966; letter-spacing:.2em; }
.library-content { padding-top:43px; min-height:250px; }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:15px; margin-bottom:22px; }
.section-head-title { display:flex; align-items:center; gap:14px; }
.section-head h2 { margin:0; font-size:20px; letter-spacing:.03em; }
.item-count { font-size:11px; font-weight:700; padding:5px 10px; border-radius:99px; background:#e9eee8; color:#55705f; }
.section-head p { margin:0; font-size:12px; color:#89928b; }
.novel-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.novel-card { min-width:0; background:#fff; border:1px solid #e6e9e2; border-radius:18px; overflow:hidden; box-shadow:0 5px 18px #23392907; transition: transform .16s, box-shadow .16s; }
.novel-card:hover { transform:translateY(-2px); box-shadow:0 9px 24px #23392912; }
.novel-open { display:block; text-align:left; width:100%; background:transparent; padding:0; border:0; color:inherit; }
.novel-cover { height:145px; position:relative; overflow:hidden; background:linear-gradient(145deg,#ceddce,#e7e3cf); display:grid; place-items:center; }
.novel-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.no-cover-mark { font-family:serif; font-size:44px; color:#9ab5a1; opacity:.9; }
.novel-cover::after { content:""; position:absolute; inset:0; box-shadow:inset 0 -28px 30px #00000008; pointer-events:none; }
.novel-info { display:flex; flex-direction:column; gap:9px; padding:16px 17px 13px; }
.novel-name { font-size:16px; font-weight:800; line-height:1.5; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:24px; }
.novel-excerpt { color:#8e988f; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.novel-meta { color:#9aa49b; font-size:11px; }
.novel-actions { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #f0f2ed; padding:7px 10px 9px 17px; }
.read-hint { color:#4a725d; font-size:11px; font-weight:800; }
.card-action-buttons { display:flex; gap:4px; }
.card-action { border:0; background:transparent; border-radius:8px; padding:7px 9px; color:#75847a; font-size:12px; }
.card-action:hover { background:#edf2ea; color:#244c38; }
.card-action.delete:hover { background:#fff0ee; color:#a33c39; }
.empty-library { padding:46px 20px 52px; border:1px dashed #cfdace; border-radius:20px; text-align:center; background:#fbfcf9; }
.empty-illustration { width:65px; height:65px; margin:0 auto 15px; display:grid; place-items:center; border-radius:20px; background:#e5eee5; color:#5a8769; font-size:37px; font-weight:300; }
.empty-library h3 { font-size:17px; margin:0 0 8px; }
.empty-library p { font-size:13px; color:var(--muted); margin:0 0 18px; }
.data-section { margin-top:52px; border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between; align-items:center; gap:26px; }
.data-section h2 { font-size:14px; margin:0 0 8px; }
.data-section p { max-width:620px; font-size:12px; margin:0; line-height:1.85; color:#87938a; }
.data-buttons { display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.text-button { background:none; border:1px solid #d6e0d7; border-radius:10px; color:#315544; font-size:12px; padding:10px 13px; font-weight:700; white-space:nowrap; }
.text-button:hover { background:#e8f0e8; }
.site-footer { text-align:center; color:#a2aca4; font-size:10px; letter-spacing:.04em; margin-top:46px; }
/* The reader background is a separate stationary layer; only .reader-scroll can scroll. */
body.reading-mode { overflow:hidden; }
body.reading-mode .app-shell { height:100dvh; min-height:0; overflow:hidden; }
.reader-view { display:flex; flex:1; min-height:0; flex-direction:column; background:#fff; }
.reader-toolbar { flex-shrink:0; display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px max(25px,calc((100vw - 1160px)/2)); min-height:74px; background:#fff; border-bottom:1px solid #e9e9e3; }
.reading-title { display:flex; flex-direction:column; min-width:0; gap:4px; }
.reading-title small { color:#a1a79c; font-size:9px; font-weight:800; letter-spacing:.16em; }
.reading-title strong { font-size:15px; font-weight:800; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.font-tools { display:flex; flex-shrink:0; align-items:center; border:1px solid #e3e8df; border-radius:10px; overflow:hidden; }
.font-tools button { background:#fff; border:0; color:#385846; padding:8px 11px; font-size:14px; font-weight:700; }
.font-tools button:hover { background:#edf2ec; }
.font-tools button span { font-size:11px; }
.font-tools #font-indicator { color:#738076; min-width:40px; text-align:center; font-size:11px; }
.reader-stage { position:relative; flex:1; min-height:0; isolation:isolate; overflow:hidden; background:#e8e4da; }
.reader-background { position:absolute; inset:0; background-image:none; background-size:cover; background-position:center center; background-repeat:no-repeat; pointer-events:none; z-index:0; }
.reader-scroll { position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; z-index:1; outline-offset:-3px; }
.reader-article { font-size:var(--reader-font-size,20px); line-height:1.95; letter-spacing:.035em; white-space:pre-wrap; overflow-wrap:anywhere; word-break:normal; color:#171b18; -webkit-text-stroke: 3px #fff; paint-order:stroke fill; text-shadow: -1px -1px #fff,1px -1px #fff,-1px 1px #fff,1px 1px #fff; width:min(100%,830px); margin:0 auto; padding:43px 40px 75px; min-height:100%; }
.reader-empty { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:30px; background:#f5f7f1; }
.reader-empty-icon { background:#e7ede3; color:#79937e; width:62px; height:62px; border-radius:50%; display:grid; place-items:center; font-size:25px; margin-bottom:18px; }
.reader-empty h2 { font-size:17px; margin:0 0 10px; }
.reader-empty p { font-size:13px; color:#7c8b7d; line-height:1.75; margin:0 0 22px; }
.reader-status { flex-shrink:0; min-height:35px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:5px max(25px,calc((100vw - 1160px)/2)); background:#fff; color:#8b978c; font-size:10px; }
.reader-status span:last-child { font-variant-numeric:tabular-nums; color:#3b6451; font-size:12px; font-weight:800; }
/* Editor is separate from both application screens. */
dialog { border:0; padding:0; color:var(--ink); background:#fff; box-shadow:0 24px 100px #132a2066; }
dialog::backdrop { background:#0d211c8c; }
.editor-dialog { width:min(690px,calc(100% - 24px)); max-height:calc(100dvh - 36px); border-radius:20px; overflow:hidden; }
.editor-dialog form { display:flex; flex-direction:column; max-height:calc(100dvh - 36px); }
.dialog-header { padding:25px 29px 19px; display:flex; justify-content:space-between; align-items:start; flex-shrink:0; border-bottom:1px solid #e9eee7; }
.dialog-header h2 { font-size:21px; margin:0; }
.dialog-header .eyebrow { margin-bottom:7px; }
.icon-button { border:0; border-radius:50%; width:34px; height:34px; background:#f1f3ed; color:#5b685f; font-size:24px; line-height:1; }
.dialog-body { overflow:auto; padding:23px 29px 22px; min-height:0; }
.field-label { display:block; font-size:13px; font-weight:800; margin-bottom:10px; }
.required { color:#a05a4b; background:#fdf0ea; border-radius:4px; padding:2px 6px; font-size:10px; margin-left:5px; }
.optional { color:#87948a; font-size:11px; font-weight:500; margin-left:5px; }
.field-input,.field-textarea { width:100%; border:1px solid #dce4d9; border-radius:10px; background:#fcfdfb; color:var(--ink); outline:none; font-size:14px; }
.field-input { height:44px; padding:10px 12px; }
.field-textarea { resize:vertical; min-height:190px; height:29dvh; max-height:42dvh; padding:13px 14px; line-height:1.85; }
.field-input:focus,.field-textarea:focus { border-color:#69927e; background:#fff; }
.body-label { margin-top:20px; }
.image-label-row { margin-top:20px; }
.image-picker { display:flex; align-items:center; gap:17px; }
.image-preview { flex:0 0 140px; height:106px; background:linear-gradient(130deg,#edf3e9,#dce8e0); border:1px solid #e2e9df; border-radius:10px; display:grid; place-items:center; overflow:hidden; }
.image-preview img { width:100%; height:100%; object-fit:cover; }
.image-preview span { color:#9da89d; font-size:12px; }
.image-picker-actions { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.image-picker-actions .choose-image { cursor:pointer; font-size:12px; min-height:37px; padding:8px 12px; }
.subtle-button { background:none; color:#9a615b; border:0; text-decoration:underline; font-size:11px; padding:2px 0; }
.image-picker-actions p { color:#8b9a8e; font-size:10px; line-height:1.6; margin:0; }
.form-error { background:#fff0ef; border-radius:9px; padding:10px 12px; margin:15px 0 0; color:#aa3434; font-size:12px; }
.dialog-footer { flex-shrink:0; display:flex; justify-content:flex-end; gap:9px; padding:14px 29px 20px; border-top:1px solid #e9eee7; background:#fff; }
.confirm-dialog { width:min(420px,calc(100% - 30px)); border-radius:18px; padding:28px; }
.confirm-dialog h2 { font-size:18px; margin:0 0 12px; }
.confirm-dialog p { font-size:13px; line-height:1.7; color:#7b867c; margin:0 0 25px; overflow-wrap:anywhere; }
.confirm-actions { display:flex; justify-content:flex-end; gap:10px; }
.toast { position:fixed; z-index:100; left:50%; bottom:max(24px,env(safe-area-inset-bottom)); transform:translateX(-50%); background:#203f34; color:#fff; box-shadow:0 8px 34px #0004; font-size:13px; border-radius:12px; padding:12px 22px; max-width:calc(100vw - 26px); text-align:center; }
@media(max-width:800px) {
  .novel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-art { opacity:.62; right:-80px; }
  .library-hero { padding-right:35px; }
  .data-section { align-items:flex-start; flex-direction:column; }
  .data-buttons { justify-content:flex-start; }
}
@media(max-width:550px) {
  .app-header { min-height:67px; padding:0 15px; gap:8px; }
  .brand-icon { width:33px; height:33px; border-radius:9px; font-size:19px; }
  .brand { gap:8px; }
  .brand-copy strong { font-size:17px; }
  .brand-copy small { font-size:8px; }
  .main-tabs { gap:3px; }
  .main-tab { min-width:76px; font-size:12px; height:39px; }
  .library-view { padding:18px 15px 25px; }
  .library-hero { min-height:264px; padding:28px 22px; border-radius:18px; }
  .hero-copy { max-width:330px; }
  .library-hero h1 { font-size:31px; }
  .hero-subtitle { font-size:12px; }
  .mobile-break { display:block; }
  .hero-art { opacity:.28; width:92%; right:-50%; }
  .library-content { padding-top:29px; }
  .section-head { align-items:flex-start; flex-direction:column; gap:6px; margin-bottom:16px; }
  .section-head h2 { font-size:18px; }
  .section-head p { font-size:11px; }
  .novel-grid { gap:11px; }
  .novel-cover { height:120px; }
  .novel-info { padding:12px 11px 10px; gap:7px; }
  .novel-name { font-size:13px; }
  .novel-excerpt,.novel-meta { font-size:10px; }
  .novel-actions { padding:6px 5px 7px 9px; }
  .read-hint { font-size:10px; }
  .card-action { font-size:11px; padding:7px 6px; }
  .data-section { margin-top:35px; }
  .site-footer { margin-top:35px; }
  .reader-toolbar { min-height:65px; padding:10px 13px; }
  .reading-title strong { font-size:13px; }
  .font-tools button { padding:8px 7px; }
  .font-tools #font-indicator { min-width:34px; font-size:10px; }
  .reader-article { padding:31px 21px 65px; line-height:1.9; }
  .reader-status { min-height:32px; padding:5px 13px; font-size:9px; }
  .dialog-header { padding:17px 18px 14px; }
  .dialog-body { padding:18px; }
  .dialog-footer { padding:12px 18px 15px; }
  .image-picker { align-items:flex-start; gap:12px; }
  .image-preview { flex-basis:105px; height:95px; }
  .choose-image { font-size:11px !important; }
  .image-picker-actions p { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) { * { transition:none !important; scroll-behavior:auto !important; } }