:root{font:17px/1.5 system-ui,sans-serif;color:#f2f2f2;background:#101215;accent-color:#d8b95a}*{box-sizing:border-box}body{margin:0}header{background:#050607;border-bottom:3px solid #d8b95a;padding:1rem max(1rem,calc((100% - 1100px)/2));display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}header>a{font-weight:800;letter-spacing:.06em;color:#d8b95a;text-decoration:none}header span{display:block;color:white;font-weight:500;letter-spacing:0}nav{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}main{max-width:1100px;margin:auto;padding:1rem}a{color:#f5d880}section{background:#20252c;padding:1.2rem;border:1px solid #434a54;border-radius:10px;margin:1rem 0}h1{font-size:2rem}h2{font-size:1.25rem}label{display:block;margin:.7rem 0}input,select,textarea,button{font:inherit;border-radius:6px;padding:.65rem .8rem;min-height:48px}input,select,textarea{display:block;width:100%;max-width:100%;background:#fff;color:#151719;border:2px solid #929aa7}button{border:2px solid #d8b95a;background:#d8b95a;color:#111;cursor:pointer;font-weight:650}button:disabled{opacity:.45;cursor:not-allowed}.actions,.grid{display:flex;gap:.7rem;flex-wrap:wrap}.grid>label{flex:1 1 130px}.check{display:flex;align-items:center;gap:.7rem}.check input{width:24px;min-height:24px;flex-shrink:0}textarea{font:14px/1.5 ui-monospace,monospace}.notice,#message{padding:.8rem;background:#303138;border-left:4px solid #d8b95a}#message:empty{display:none}#message.error{border-color:#ff8585}img,canvas{max-width:100%;height:auto;border:1px solid #616875}figure{margin:1rem 0}figcaption{padding:.5rem}#preview-images{display:grid;gap:1rem}.narrow{max-width:550px;margin:2rem auto}nav form{margin:0}li{margin:.6rem 0}input:focus,select:focus,button:focus,textarea:focus{outline:3px solid #8dd4ff;outline-offset:2px}[hidden]{display:none!important}@media(max-width:600px){.actions button{width:100%}header{padding:1rem}section{padding:.8rem}h1{font-size:1.6rem}}
/* The artwork uses intrinsic 1920×1080 coordinates, independently of screen size. */
#layout-canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;outline:1px solid #616875;touch-action:none;user-select:none;background:#08090b}
#layout-canvas:focus-visible{outline:3px solid #8dd4ff;outline-offset:3px}
.editor-toolbar{display:flex;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}.editor-toolbar>label{flex:1 1 220px;margin:0}.editor-toolbar .actions{padding-bottom:2px}
button[aria-pressed=false]{background:#20252c;color:#f5d880}button[aria-pressed=true]{box-shadow:0 0 0 2px #fff}
details{border:1px solid #59616d;border-radius:6px;padding:.65rem .8rem;margin:1rem 0}summary{cursor:pointer;min-height:36px;font-weight:600;padding:.25rem 0}details[open]>summary{margin-bottom:.5rem}
[data-form-status]:empty{display:none}[data-form-status]{padding:.7rem;background:#121b21;border-left:4px solid #d8b95a;overflow-wrap:anywhere}[data-form-status].error{border-color:#ff8585;color:#ffd6d6}
form[aria-busy=true]{opacity:.8}#editor-status,#template-test-status,#layout-position{color:#e5d8b4}.preview-thumbnails{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:.8rem}.preview-thumbnails figure{min-width:0;overflow-wrap:anywhere}.preview-thumbnail{display:block;width:100%;padding:0;border:1px solid #616875;background:#101215;line-height:0}.preview-thumbnail img{display:block;width:100%;border:0}
#preview-dialog{width:min(1500px,calc(100vw - 2rem));max-width:none;max-height:calc(100dvh - 2rem);padding:0;border:1px solid #727b88;border-radius:12px;background:#14181d;color:#f2f2f2;overflow:auto}#preview-dialog::backdrop{background:#000c}.preview-dialog-shell{padding:0 1rem 1rem}.preview-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#14181d;position:sticky;top:0;padding:.7rem 0;z-index:1}.preview-dialog-heading h2{margin:0}.preview-dialog-heading button{flex-shrink:0}#preview-dialog-images{display:grid;gap:1rem}#preview-dialog-images figure{margin:0;min-width:0}#preview-dialog-images img{display:block;width:100%;height:auto}#preview-dialog-help{margin-top:0;color:#d2d7df}#preview-dialog-done{margin-top:1rem}#preview-dialog-close{min-width:100px}
@media(max-width:600px){.editor-toolbar .actions{width:100%}.editor-toolbar .actions button{flex:1}#preview-dialog{width:calc(100vw - 1rem);max-height:calc(100dvh - 1rem)}.preview-dialog-shell{padding:0 .65rem .65rem}.preview-dialog-heading{gap:.5rem}.preview-dialog-heading h2{font-size:1.1rem}#preview-dialog-close{min-width:85px}.preview-thumbnails{grid-template-columns:1fr}}
/* Reserve status space so live drag updates cannot shift the canvas on phones. */
#editor-status{min-height:3em}#layout-editor[inert]{opacity:.65}
#graphics-api code,#graphics-api-keys li{overflow-wrap:anywhere}#graphics-api-keys button{margin:.4rem 0}