:root {
  font: 16px/1.5 system-ui,sans-serif;
  --ink: #492c2f;
  --cream: #fff4e9;
  --paper: #fffaf4;
  --sheet: #fff9ef;
  --peach: #f8e0d5;
  --gold: #ffe09a;
  --terracotta: #984b43;
  --terracotta-dark: #783c32;
  --orange: #a64a24;
  --line: #e7c8b9;
  --field-line: #a87868;
  color: var(--ink);
  background: var(--cream);
}
*{box-sizing:border-box}
body{margin:0}
header{display:flex;align-items:center;gap:1.3rem;padding:.8rem clamp(1rem,3vw,3rem);min-height:3.7rem;background:var(--terracotta-dark);color:var(--paper)}
.brand{display:flex;align-items:center;gap:.55rem;color:#fff;font-size:1.3rem;font-weight:800;text-decoration:none}
.brand-icon{width:2.2rem;height:2.2rem;flex:none}
#heading{flex:1;font-weight:650}
main{padding:clamp(.75rem,1.4vw,1.75rem);margin:auto}
button,input,select,textarea{font:inherit}
button,.button{cursor:pointer;border:0;border-radius:.55rem;padding:.55rem .85rem;background:var(--terracotta);color:white;text-decoration:none;display:inline-block}
button.quiet,.button.quiet{background:var(--peach);color:var(--ink)}
button.active{background:var(--gold);color:var(--ink)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
header :focus-visible{outline-color:var(--gold)}
input,select,textarea{display:block;width:100%;min-width:0;border:1px solid var(--field-line);border-radius:.4rem;background:var(--paper);padding:.45rem .6rem;color:inherit}
label{display:grid;gap:.2rem;font-size:.9rem}
h1,h2,h3,p{margin:.25em 0 .65em}
.stack{display:grid;gap:.75rem;align-content:start}
.row{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}
.grow{flex:1;min-width:11rem}
.panel{padding:1rem;background:var(--paper);border:1px solid var(--line);border-radius:.8rem}
.login{max-width:25rem;margin:8vh auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.editor-toolbar,.canvas-toolbar{align-items:end}
.material-title{flex:1;min-width:12rem;max-width:32rem;margin-right:auto}
.page-title{width:min(100%,16rem);margin-left:auto}
.page-bar{display:flex;align-items:center;gap:.7rem;justify-content:space-between;padding:.5rem;min-width:0}
.page-tabs{display:flex;align-items:center;gap:.4rem;overflow:auto;padding:.25rem;min-width:0}
.page-tabs button,.page-add button{flex:none;white-space:nowrap}
.page-add{flex-shrink:0}
.editor{display:grid;grid-template-columns:minmax(0,1fr) clamp(16rem,20vw,22rem);align-items:start;gap:1rem}
.inspector,.canvas{min-width:0}
.editor aside button{max-width:100%;overflow-wrap:anywhere;text-align:left}
.media-section h2{font-size:1.05rem;margin:0}
.media-group summary{cursor:pointer;font-weight:700}
.media-group[open] summary{margin-bottom:.65rem}
.checkbox{display:flex;align-items:center;gap:.5rem}
.checkbox input{width:1rem;height:1rem;margin:0;accent-color:var(--terracotta)}
.action-settings{border:1px solid var(--line);border-radius:.55rem;padding:.65rem;margin:0;min-width:0}
.action-settings legend{font-weight:700}
.action-settings audio{width:100%}
.file-picker input{font-size:.8rem}
.stage{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;background:var(--sheet);border:1px solid var(--line);border-radius:.45rem;container-type:inline-size}
.item{position:absolute;display:grid;place-items:center;padding:0;color:var(--ink);border:0;border-radius:0;background:transparent;white-space:pre-wrap;overflow-wrap:anywhere;text-align:center;font-size:clamp(8px,var(--text-size,3cqw),120px)}
.item-text{max-width:100%;max-height:100%;overflow:hidden;pointer-events:none}
.item img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.item.action{cursor:pointer}
.editing .item{touch-action:none;cursor:move;outline:1px dashed var(--field-line);outline-offset:-1px}
.editing .item.action{outline-style:solid;outline-color:var(--terracotta)}
.editing .item.selected{outline:2px solid var(--orange);outline-offset:-2px;z-index:1}
.editing .area{background:#ffe09a80}
.handle{position:absolute;width:14px;height:14px;border:2px solid var(--paper);border-radius:3px;background:var(--orange);transform:translate(-50%,-50%)}
.handle-nw,.handle-w,.handle-sw{left:0}
.handle-n,.handle-s{left:50%}
.handle-ne,.handle-e,.handle-se{left:100%}
.handle-nw,.handle-n,.handle-ne{top:0}
.handle-w,.handle-e{top:50%;cursor:ew-resize}
.handle-sw,.handle-s,.handle-se{top:100%}
.handle-n,.handle-s{cursor:ns-resize}
.handle-nw,.handle-se{cursor:nwse-resize}
.handle-ne,.handle-sw{cursor:nesw-resize}
.reader{max-width:1100px;margin:auto}
.reader .row button{min-height:44px}
.library{max-height:48vh;overflow:auto;padding:.2rem}
.asset{display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto;align-items:center;gap:.35rem;font-size:.85rem}
.asset img{width:2.2rem;height:2.2rem;object-fit:contain}
.asset button{padding:.3rem .45rem}
dialog{width:min(90vw,390px);border:0;border-radius:1rem;padding:1.5rem;background:var(--paper);color:inherit}
dialog::backdrop{background:#492c2f99}
dialog img{width:100%}
#notice{position:fixed;bottom:1rem;right:1rem;background:var(--terracotta-dark);color:var(--paper);padding:.7rem 1rem;border-radius:.5rem;max-width:min(90vw,34rem);z-index:3}
@media(max-width:820px){.editor{grid-template-columns:minmax(0,1fr)}}
@media(max-width:550px){.page-bar{align-items:stretch;flex-direction:column}.page-title{margin-left:0}.material-title{max-width:none}}