:root{font-family:"Meiryo","Yu Gothic",sans-serif;color:#21382e;background:#edf2ea;font-size:14px}*{box-sizing:border-box}body{margin:0;height:100dvh;display:flex;flex-direction:column}.toolbar{flex:none;padding:12px 20px;border-bottom:2px solid #91ad82;background:#fffdf8;box-shadow:0 3px 15px #20351c12;z-index:1}.title-row,.location-row,.action-row,.dictionary-row,.status-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.title-row{justify-content:space-between;margin-bottom:10px}.title-row strong{font-size:1.25rem}.title-row strong span{font-size:.85em}.title-row small{display:block;font-size:.75rem;color:#546a5b;margin-top:3px}label{font-size:.8rem;display:flex;gap:5px;align-items:center}.location-row{padding-bottom:10px}.url-label{flex:1;min-width:160px}.url-label input{width:100%;min-width:0}.action-row{padding-bottom:8px}.button-group{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.button-group>span{font-size:.85rem}button,input,select{font:inherit;min-height:38px;border:1px solid #a5b69e;border-radius:7px;background:white;color:#21382e;padding:7px 10px;max-width:100%}button{cursor:pointer;background:#eef4e5}button[aria-pressed="true"]{background:#315c3e;color:white;border-color:#315c3e}button:disabled{opacity:.5;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #bc6900;outline-offset:2px}.dictionary-row{font-size:.8rem;color:#52664e}.dictionary-row button{min-height:32px;font-size:.8rem;padding:4px 9px}.status-row{justify-content:space-between;align-items:flex-start}.status-row p{margin:6px 0 0;font-size:.8rem}#status{flex:1;min-width:140px}.reading-now{white-space:nowrap}#current-reading{font-size:1.1rem;font-weight:bold}.viewer{flex:1;min-height:0;display:flex}iframe{border:0;width:100%;height:100%;background:white}.settings{padding:12px 0;border-top:1px solid #d8e1d1;border-bottom:1px solid #d8e1d1;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:9px}.settings[hidden]{display:none}.settings p{flex-basis:100%;font-size:.75rem;margin:0;color:#52664e}.voice-label{max-width:100%}.voice-label select{min-width:0;max-width:280px}@media(max-width:680px){.toolbar{padding:10px 12px}.location-row{align-items:flex-end}.location-row>label:first-child{flex:1;min-width:0;flex-direction:column;align-items:stretch}.location-row>label:first-child select{width:100%}.url-label{flex-basis:100%;order:2}.location-row>button{order:1}.action-row{gap:8px}.button-group{gap:4px}.action-row button{font-size:.85rem;padding:6px 8px}.dictionary-row{gap:6px}.dictionary-row>span{display:none}.status-row{gap:4px}.title-row strong{font-size:1.05rem}}@media(max-width:370px){.toolbar{padding:8px}.title-row small{font-size:.67rem}.title-row>button{font-size:.78rem;padding:5px 7px}.button-group button{min-height:35px}.button-group>span{font-size:.78rem}.dictionary-row button{font-size:.72rem}.status-row p{font-size:.73rem}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.toolbar-controls { display:flex; gap:6px; flex-shrink:0; }
.reader-title { flex:1; min-width:0; }
.viewer[hidden], .start-page[hidden], .page-bar[hidden], .toolbar-controls button[hidden], #original-page[hidden] { display:none; }
body[data-mode="start"] { height:auto; min-height:100dvh; }
body[data-mode="start"] .status-row { display:none; }
body[data-mode="start"] .toolbar-controls { display:none; }
.start-page { flex:1; display:grid; place-items:center; padding:50px 24px 64px; background:radial-gradient(ellipse at 10% 15%,#dcebcf88,transparent 50%),#edf2ea; }
.start-card { width:100%; min-width:0; max-width:760px; padding:44px 48px; border:1px solid #cad8c1; border-radius:24px; background:#fffdf8; box-shadow:0 12px 40px #244b2810; }
.start-eyebrow { font-size:.9rem; color:#547048; letter-spacing:.07em; margin:0 0 18px; }
.start-card h1 { margin:0 0 22px; font-size:clamp(2rem,4vw,2.8rem); line-height:1.65; letter-spacing:.04em; }
.start-description { line-height:2.1; color:#4e6555; margin:0 0 28px; }
#start-form label { display:block; font-size:.95rem; font-weight:bold; margin-bottom:10px; }
.start-input-row { display:flex; gap:10px; }
#start-url { flex:1; min-width:0; min-height:54px; padding:12px 14px; }
#start-submit { background:#315c3e; color:white; border-color:#315c3e; min-height:54px; font-weight:bold; padding:12px 20px; white-space:nowrap; }
#start-hint { font-size:.8rem; color:#60725e; margin:8px 0; }
#start-status { min-height:1.7em; line-height:1.7; color:#5d4a2f; overflow-wrap:anywhere; }
.start-features { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 14px; }
.start-features span { background:#eaf1df; color:#3b5637; padding:6px 12px; border-radius:20px; font-size:.85rem; }
.start-note { color:#60705d; line-height:1.9; font-size:.82rem; }
.example-button { background:transparent; margin-top:10px; }
.page-bar { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 20px; background:#f5f8ef; border-bottom:1px solid #d0ddc6; font-size:.8rem; }
#page-address { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#original-page { flex:none; color:#315c3e; text-underline-offset:3px; }
@media(max-width:680px) { .start-page{padding:28px 14px}.start-card{padding:28px 20px;border-radius:18px}.start-input-row{flex-direction:column}.start-description br{display:none}.page-bar{padding:6px 12px;flex-wrap:wrap}#page-address{flex-basis:100%}.toolbar-controls{gap:4px} }
#reader-controls { max-height:60dvh; overflow:auto; }
#reader-controls[hidden] { display:none; }
.quick-actions { display:none; flex-wrap:wrap; gap:8px; padding:8px 0 2px; }
.quick-actions button { min-height:44px; }
#quick-selection { background:#315c3e; color:#fff; border-color:#315c3e; }
body[data-mode="start"] .quick-actions { display:none; }
.browser-voice-consent { flex-basis:100%; align-items:flex-start; line-height:1.8; }
.browser-voice-consent input { flex:none; min-height:24px; width:24px; }
@media(max-width:680px) {
  :root { font-size:16px; }
  button,input,select { min-height:44px; }
  .title-row { flex-wrap:wrap; }
  .reader-title { flex-basis:100%; }
  body[data-mode="reader"] .reader-title { display:none; }
  .toolbar-controls { width:100%; justify-content:space-between; }
  .quick-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .quick-actions button { padding:7px 4px; font-size:.85rem; line-height:1.5; }
  #reader-controls { max-height:45dvh; }
  .status-row p { font-size:.85rem; line-height:1.6; }
  .reading-now { display:none; }
  .toolbar.is-collapsed { padding:8px 12px; }
  .page-bar { font-size:.8rem; padding:6px 12px; }
  .start-page { padding:18px 10px; }
  .start-card { padding:22px 16px; }
  .start-card h1 { font-size:1.5rem; line-height:1.6; letter-spacing:0; margin-bottom:16px; }
  .start-description { line-height:1.85; margin-bottom:20px; }
}
.reading-help { font-size:.75rem; color:#52664e; line-height:1.8; margin:8px 0 0; }
#read-mode, #click-read-mode { min-width:0; }
.toolbar.is-collapsed .title-row { margin-bottom:0; }
.toolbar.is-collapsed .reader-title small { display:none; }
.toolbar.is-collapsed { padding-top:8px; padding-bottom:8px; }
@media(max-width:680px) {
  .title-row { flex-wrap:wrap; gap:8px; }
  .title-row .reader-title strong { font-size:.95rem; }
  .toolbar-controls button { min-height:40px; padding:6px 8px; font-size:.8rem; }
}