:root {
  --color-bg:#1c130c; --color-surface:#2a1d14; --color-raised:#38281b; --color-hover:#4a3626;
  --color-border:#7d6248; --color-text:#fdf3df; --color-muted:#d8c4a5; --color-accent:#ffb938;
  --color-on-accent:#2a1d14; --color-focus:#7fd4ff; --color-error:#ffb4a8;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;
  --radius:6px;--t-small:14px;--t-body:16px;--t-title:20px;--t-brand:24px;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--color-text);background:var(--color-bg);font-size:16px;line-height:1.5;
}
* {box-sizing:border-box;}
body {margin:0;-webkit-font-smoothing:antialiased;}
h1,h2,h3,p {margin:0;}h1 {font-size:var(--t-brand);line-height:1.2;font-weight:600;}h2 {font-size:var(--t-title);font-weight:600;}h3,summary {font-size:var(--t-body);font-weight:600;}
a {color:var(--color-text);text-underline-offset:3px;}
button,input,select,textarea {font:inherit;color:inherit;}
button,.btn {min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);text-decoration:none;cursor:pointer;line-height:1.35;font-weight:600;}
button.primary {background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent);}
button[aria-pressed="true"] {border-color:var(--color-accent);background:var(--color-hover);box-shadow:inset 0 -3px var(--color-accent);}
button:disabled,input:disabled {cursor:not-allowed;opacity:.6;}
@media (hover:hover) {button:hover:not(:disabled),.btn:hover {background:var(--color-hover);}button.primary:hover {background:#ffc75f;}}
:focus-visible {outline:3px solid var(--color-focus);outline-offset:3px;}
input:not([type=checkbox]):not([type=range]),select,textarea {width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg);}
textarea {resize:vertical;overflow-wrap:anywhere;}
input[type=checkbox] {width:20px;height:20px;accent-color:var(--color-accent);flex:none;}
input[type=range] {width:100%;accent-color:var(--color-accent);min-height:30px;}
[aria-invalid="true"] {outline:2px solid var(--color-error);}
.skip {position:absolute;top:-100px;left:16px;background:var(--color-bg);padding:12px;z-index:10;}.skip:focus {top:10px;}
.top {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;max-width:1440px;margin:auto;padding:24px 32px 18px;}
.brand {display:flex;align-items:center;gap:12px;}.brand img {width:40px;height:40px;image-rendering:pixelated;}
.utilities {display:flex;align-items:center;flex-wrap:wrap;gap:16px;}.utilities select {width:auto;}
.layout {display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,1fr);gap:32px;max-width:1440px;margin:auto;padding:0 32px 32px;}
.stagearea,.settings {min-width:0;}
.intro {margin-bottom:16px;color:var(--color-muted);}
.quick {display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;}.quick button {flex:1;font-size:14px;}
.preview-head {display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 8px;}
.preview-head span {font-size:14px;color:var(--color-muted);}
.preview {position:relative;min-height:230px;max-height:620px;aspect-ratio:16/9;background-color:#332c26;background-image:conic-gradient(#332c26 25%,#3d352e 0 50%,#332c26 0 75%,#3d352e 0);background-size:24px 24px;border:1px solid var(--color-border);overflow:auto;border-radius:var(--radius);}
.preview[data-bg="light"] {background:#ece9e3;}.preview[data-bg="dark"] {background:#111;}
.preview-inner {position:relative;transform-origin:top left;}
/* Higher specificity than overlay.css .sq-root{position:relative}: the mounted root must fill the format-sized box so fit() lays it out exactly like overlay.html/widget.html. */
.preview-inner > .preview-output {position:absolute;inset:0;width:100%;height:100%;}
.editor-layer {position:absolute;inset:0;pointer-events:none;}
.edit-handle {position:absolute;pointer-events:auto;min-height:28px;font-size:14px;padding:3px 8px;background:#1c130c;color:#fdf3df;border:2px solid #ffb938;border-radius:0;touch-action:none;cursor:move;white-space:nowrap;}
.preview.safe::after {content:"";position:absolute;inset:5%;border:1px dashed #fdf3df;pointer-events:none;}
.preview.grid {background-image:linear-gradient(#ffffff30 1px,transparent 1px),linear-gradient(90deg,#ffffff30 1px,transparent 1px);background-size:20px 20px;}
.preview-tools {display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px;}
.preview-tools button {font-size:14px;}
.output {margin-top:20px;}
.actions {display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.actions .primary {flex:1;}
.hint,.notice,.field-msg {font-size:14px;color:var(--color-muted);line-height:1.5;}
.notice {padding:8px 0;min-height:37px;overflow-wrap:anywhere;}.error {color:var(--color-error);}
.field {display:flex;flex-direction:column;gap:6px;min-width:0;}.field-label {font-size:14px;color:var(--color-muted);}
.check {display:flex;align-items:center;gap:10px;min-height:44px;font-size:16px;}
.settings > h2 {margin:0 0 12px;}
.settings details,.below details {border-top:1px solid var(--color-border);}
summary {min-height:56px;padding:16px 0;cursor:pointer;list-style-position:inside;}
.section-body {display:flex;flex-direction:column;gap:16px;padding:0 0 24px;}
.fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
fieldset {border:0;margin:0;padding:0;min-width:0;}legend {font-weight:600;margin:0 0 8px;}
.checks {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;}
.history {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.below {max-width:1376px;margin:0 auto;padding:0 32px 32px;}
.guide {display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.guide p,.guide li {max-width:70ch;}.guide h3 {margin-top:16px;}
.guide ol {padding-inline-start:24px;}.guide li {margin-bottom:8px;}
.diagnostics {font-size:14px;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;}.diagnostics dt {color:var(--color-muted);}.diagnostics dd {margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;}
.event-log {max-height:160px;overflow:auto;font-size:14px;}
.report {overflow-x:auto;}table {width:100%;border-collapse:collapse;font-size:14px;}th,td {padding:8px;text-align:start;border-bottom:1px solid var(--color-border);white-space:nowrap;}
footer {display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:24px 32px;border-top:1px solid var(--color-border);font-size:14px;color:var(--color-muted);}
.url-output {font-family:ui-monospace,monospace;font-size:14px;min-height:80px;}
.empty-state {position:absolute;inset:16px;display:grid;place-items:center;text-align:center;font-size:16px;color:#fff;background:#1c130ccc;padding:16px;pointer-events:none;}
.visually-hidden {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
@media(max-width:1000px) {.layout {grid-template-columns:minmax(0,1fr) minmax(300px,.85fr);gap:24px;padding-inline:24px;}.top{padding-inline:24px;}.brand h1 {font-size:20px;}}
@media(max-width:760px) {.layout {display:block;padding:0 16px 24px;}.top {padding:16px;align-items:flex-start;flex-wrap:nowrap;}.brand {gap:8px;}.brand img {width:28px;height:28px;}.brand h1 {font-size:20px;max-width:180px;}.utilities {gap:8px;flex-wrap:wrap;justify-content:flex-end;}.utilities a {font-size:14px;}.utilities select {min-height:36px;padding:4px;}.intro {font-size:14px;margin-bottom:12px;}.quick button {padding:8px 6px;}.preview {min-height:225px;max-height:450px;}.preview-head {margin-top:8px;}.preview-tools {gap:6px;}.preview-tools button {padding:8px 10px;}.output {margin-top:12px;}.settings {margin-top:24px;}.below {padding-inline:16px;}.guide {grid-template-columns:1fr;gap:8px;}footer {padding:20px 16px;}.preview-head h2 {font-size:16px;}.quick {margin-bottom:8px;}}
@media(max-width:360px) {.fields,.checks {grid-template-columns:1fr;}.quick button {font-size:14px;}.utilities {max-width:92px;}.top {gap:8px;}.actions .btn {padding:8px 10px;}}
@media(prefers-reduced-motion:no-preference) {button:active:not(:disabled) {transform:scale(.96);}}
@media(forced-colors:active) {:focus-visible {outline:3px solid Highlight;}button[aria-pressed="true"] {outline:2px solid Highlight;}}
[hidden] {display:none!important;}
.preview {width:100%;}