:root { --wine:#681c32; --wine2:#8f1d3f; --ink:#251b1e; --cream:#fbf7f3; --line:#e4d8d3; --muted:#706268; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.app-body { display:block; margin:0; min-height:100vh; color:var(--ink); background:var(--cream) !important; font:16px/1.45 Inter, ui-sans-serif, system-ui, sans-serif; }
button,input,select,textarea { font:inherit; }
button,a.button-link { min-height:44px; border:0; border-radius:6px; padding:.72rem 1rem; color:white; background:var(--wine); font-weight:700; cursor:pointer; text-decoration:none; text-align:center; }
button:hover,a.button-link:hover { background:#501326; } button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline:3px solid #d08aa0; outline-offset:2px; }
.site-header { padding:24px clamp(20px,5vw,72px); color:white; background:var(--wine); display:flex; justify-content:space-between; gap:20px; align-items:center; }
.site-header p { margin:0; opacity:.84; }.brand { color:white; font-weight:800; letter-spacing:.16em; text-decoration:none; }.brand span { display:block; font:italic 500 1.05rem Georgia,serif; letter-spacing:0; }
.app-shell { width:min(1280px,100%); margin:auto; padding:clamp(20px,4vw,52px); display:grid; grid-template-columns:minmax(0,620px) minmax(360px,1fr); gap:clamp(28px,5vw,70px); align-items:start; }
.editor { display:grid; gap:18px; }.editor section { padding:clamp(20px,3vw,32px); border:1px solid var(--line); border-radius:12px; background:white; box-shadow:0 8px 28px #4c18220a; }
h1,h2 { margin:.12em 0 .8em; font-family:Georgia,serif; line-height:1.1; }h1{font-size:clamp(1.8rem,4vw,2.6rem)}h2{font-size:1.5rem}.eyebrow { margin:0; color:var(--wine2); font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
label,fieldset { display:grid; gap:7px; margin:15px 0; font-weight:650; }fieldset { border:0;padding:0}legend{padding:0;margin-bottom:8px;font-weight:650}.grid { display:grid; gap:14px }.grid.two{grid-template-columns:1fr 1fr}input,select,textarea { width:100%; min-height:44px; border:1px solid #cbbdbf; border-radius:5px; padding:9px 11px; color:var(--ink); background:white; }input[type=range]{padding:0;border:0;accent-color:var(--wine2)}input[type=checkbox],input[type=radio]{width:20px;min-height:20px;accent-color:var(--wine2)}small{display:block;color:var(--muted);font-weight:400}.inline{display:flex;align-items:center;gap:8px;margin:7px 0}.checks{display:flex;flex-wrap:wrap;gap:8px 24px}.summary{min-height:24px;color:var(--wine);font-family:Georgia,serif;font-style:italic}.preset-card{display:flex;align-items:center;gap:13px;padding:14px;border:1px solid var(--line);border-radius:8px}.preset-card>div{flex:1}.swatch{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--wine2) 50%,white 50%);border:1px solid var(--line)}button.secondary{color:var(--wine);background:white;border:1px solid #c8aab3}.compact{min-height:36px;padding:.35rem .7rem}.color-control{display:flex;gap:8px}.color-control input{width:52px;padding:3px}.color-control output{display:grid;place-items:center;font-family:monospace}.editor>button{font-size:1.05rem}.error,.warning{padding:12px;border-radius:6px;color:#76182e;background:#fae6eb}.edit-banner{padding:13px;border-left:4px solid var(--wine2);background:#f4e9ed}
.preview-panel{position:sticky;top:24px}.preview-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.backdrops{display:flex;gap:7px}.backdrops button{width:28px;min-height:28px;padding:0;border-radius:50%;border:2px solid white;box-shadow:0 0 0 1px #aaa}.backdrops button.active{box-shadow:0 0 0 3px var(--wine2)}[data-backdrop=checker]{background:repeating-conic-gradient(#ddd 0 25%,#fff 0 50%) 50%/10px 10px}[data-backdrop=light]{background:white}[data-backdrop=dark]{background:#242124}[data-backdrop=burgundy]{background:var(--wine)}.preview-frame{min-height:280px;padding:48px 16px;display:grid;place-items:center;border-radius:12px;overflow:hidden;box-shadow:0 20px 50px #3d172020}.preview-frame.checker{background:repeating-conic-gradient(#e5e0df 0 25%,#fff 0 50%) 50%/20px 20px}.preview-frame.light{background:#fff}.preview-frame.dark{background:#242124}.preview-frame.burgundy{background:var(--wine)}.transparent-note{color:var(--muted);font-size:.85rem}
dialog{width:min(680px,calc(100% - 30px));border:0;border-radius:12px;padding:clamp(24px,4vw,42px);box-shadow:0 30px 100px #250b1370;color:var(--ink)}dialog::backdrop{background:#2b0c1688}.dialog-close{position:absolute;right:12px;top:10px;color:var(--ink);background:transparent;font-size:1.7rem}.copy-row{display:flex;gap:8px}.copy-row input,.copy-row textarea{flex:1}.copy-row button{white-space:nowrap}.private-box{margin:22px 0;padding:16px;background:#f7eef1;border-left:4px solid var(--wine2)}.private-box p{margin:.35rem 0 .8rem}.copy-status{min-height:24px;color:#28643a;font-weight:700}.button-link{display:inline-block}
@media(max-width:850px){.site-header{align-items:flex-start;flex-direction:column}.app-shell{grid-template-columns:1fr}.preview-panel{position:static;grid-row:1}.preview-frame{min-height:220px}.grid.two{grid-template-columns:1fr}}
@media(max-width:520px){.app-shell{padding:14px}.copy-row{display:grid}.preview-heading{align-items:flex-start;flex-direction:column}.editor section{padding:18px}.timer-label{font-size:.58rem}}