:root{color-scheme:light;--forest:#18372e;--muted:#42594f;--line:#cbd5cd;--paper:#f3f5f0}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:#1b2b22;font:16px/1.5 system-ui,sans-serif}
[hidden]{display:none!important}
header{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px clamp(16px,4vw,42px);background:var(--forest);color:white}
header a{color:white;font:bold 24px Georgia,serif;text-decoration:none}
header span{margin-right:auto}
main{max-width:1450px;margin:auto;padding:18px clamp(12px,3vw,38px) 48px}
#message{min-height:1.5em;margin:0 0 12px}
#message.error{color:#a01825}
.panel{max-width:490px;margin:32px auto;padding:26px;background:white;border:1px solid var(--line);border-radius:12px}
form label{display:block;margin:12px 0}
label{font-weight:650}
button,input,textarea{font:inherit}
button,.toolbar a{padding:7px 12px;border:1px solid var(--line);border-radius:7px;background:white;color:var(--forest);cursor:pointer}
button:disabled{opacity:.55;cursor:default}
.primary{background:var(--forest);color:white}
input,textarea{width:100%;padding:8px;margin-top:4px;border:1px solid #9fb0a5;border-radius:7px;background:white;color:#1b2b22}
textarea{min-height:58px;resize:vertical}
#editor{display:grid;grid-template-columns:minmax(210px,270px) minmax(0,1fr);gap:24px}
aside,.workspace{min-width:0}
#pages{display:grid;gap:5px;max-height:68vh;overflow:auto;margin-top:12px}
#pages button{text-align:left}
#pages button[aria-current=true]{background:var(--forest);color:white}
#pages small,.entry small{display:block;overflow-wrap:anywhere;opacity:.8}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
h1{font:36px/1.1 Georgia,serif;margin:0 0 14px}
details,.entry,#album:not(:empty){border:1px solid var(--line);background:white;border-radius:9px}
details{margin:10px 0;padding:10px}
summary{cursor:pointer;font-weight:750;padding:5px}
.entry{margin:8px 0;padding:12px}
.entry p{margin:0 0 7px}
.entry .english{display:block;margin-top:8px}
.entry img,#album img{width:118px;height:78px;object-fit:cover;border-radius:6px;background:#1e332a}
#album:not(:empty){padding:12px;margin:12px 0}
#album ol{list-style:none;margin:0;padding:0}
#album li{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
#album li span{flex:1;min-width:120px}
#translation-info{color:var(--muted)}
@media(max-width:760px){#editor{grid-template-columns:1fr}#pages{max-height:27vh}h1{font-size:29px}}

#visual{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,270px);gap:12px;align-items:start;margin:14px 0}
#canvas{display:block;width:100%;height:clamp(470px,72vh,920px);border:1px solid var(--line);border-radius:8px;background:#171d19}
#selection{min-width:0;padding:12px;border:1px solid var(--line);border-radius:8px;background:white}
#selection p:first-child{margin-top:0}
#selection .entry{border:0;margin:0;padding:0}
#selection textarea{min-height:105px}
#visual button{margin-top:7px}
@media(max-width:1150px){#visual{grid-template-columns:minmax(0,1fr)}}

#visual { grid-template-columns: minmax(0,1fr); }
#canvas.is-mobile { max-width: 420px; margin-inline: auto; }
#selection { max-width: none; }
#selection .entry textarea { width: 100%; }
#advanced > label { display: grid; gap: .3rem; margin-block: .7rem; }
#canvas-width[aria-pressed="true"] { border-color: #9b7848; }
@media(min-width:1350px) {
  #visual { grid-template-columns: minmax(0,1fr) minmax(235px,285px); }
  #selection { position: sticky; top: 12px; }
}