:root{font:16px/1.5 system-ui,sans-serif;color:#183630;background:#f4f3ed;--green:#20594a;--line:#d7ded5}
*{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:#183630;color:white}
.brand{color:#fff;font-size:1.3rem;font-weight:800;text-decoration:none}
#heading{flex:1;font-weight:650}
main{padding:clamp(.75rem,2vw,2rem);max-width:1600px;margin:auto}
button,input,select,textarea{font:inherit}
button,.button{cursor:pointer;border:0;border-radius:.55rem;padding:.55rem .85rem;background:var(--green);color:white;text-decoration:none;display:inline-block}
button.quiet,.button.quiet{background:#e7eee8;color:#183630}
button.active{background:#ffd88d;color:#183630}
button:focus-visible,a:focus-visible{outline:3px solid #e7a536;outline-offset:3px}
input,select,textarea{display:block;width:100%;min-width:0;border:1px solid #bac9bf;border-radius:.4rem;background:white;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:#fff;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{display:grid;grid-template-columns:10rem minmax(0,1fr) 17rem;align-items:start;gap:.8rem;margin-top:.8rem}
.editor aside button{max-width:100%;overflow-wrap:anywhere;text-align:left}
.stage{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;background:#fff9ec;border:1px solid var(--line);border-radius:.45rem;container-type:inline-size}
.item{position:absolute;display:grid;place-items:center;padding:0;color:#183630;border:0;border-radius:0;background:transparent;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;text-align:center;font-size:clamp(11px,3cqw,48px)}
.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 #7e9789;outline-offset:-1px}
.editing .item.selected{outline:2px solid #00836e;outline-offset:-2px;z-index:1}
.editing .area{background:#f9c85b69}
.handle{position:absolute;right:0;bottom:0;width:18px;height:18px;background:#00836e;cursor:nwse-resize}
.reader{max-width:1100px;margin:auto}
.reader 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;color:inherit}
dialog::backdrop{background:#1239}
dialog img{width:100%}
#notice{position:fixed;bottom:1rem;right:1rem;background:#183630;color:white;padding:.7rem 1rem;border-radius:.5rem;max-width:min(90vw,34rem);z-index:3}
@media(max-width:980px){.editor{grid-template-columns:8rem minmax(0,1fr)}.inspector{grid-column:1/-1}}
@media(max-width:550px){.editor{grid-template-columns:minmax(0,1fr)}}