:root{font-family:Inter,Segoe UI,Arial,sans-serif;color:#eeeaf5;background:#111016;color-scheme:dark}*{box-sizing:border-box}body{margin:0}main{max-width:1300px;margin:auto;padding:42px 48px}header{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:28px}.eyebrow{font-size:10px;letter-spacing:2.3px;color:#a99bba;font-weight:700}h1{font-family:Georgia,serif;font-size:47px;font-weight:400;margin:12px 0}h1 span{color:#cdb08b}p{font-size:13px;line-height:1.7;color:#aaa2b6;margin:8px 0 18px}.connection{font-size:11px;max-width:330px;color:#c1b9cb;display:flex;gap:10px;align-items:center}i{width:7px;height:7px;flex-shrink:0;background:#c5a276;border-radius:50%}i.on{background:#69cdae;box-shadow:0 0 12px #69cdae55}.preview{border:1px solid #39303f;border-radius:12px;overflow:hidden;background:radial-gradient(ellipse at 84% 95%,#302336,transparent 45%),linear-gradient(135deg,#1e1c27,#16151e);position:relative}.preview-label,.preview-footer{padding:15px 20px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.4px;color:#a99fb5}.preview-label span{letter-spacing:.3px;color:#777080}.preview iframe{display:block;width:100%;aspect-ratio:16/9;border:0}.preview-footer{border-top:1px solid #ffffff08;letter-spacing:.2px}.panels{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px}.panel{border:1px solid #342d3e;border-radius:12px;padding:25px;background:#1a171f}h2{font-family:Georgia,serif;font-size:27px;font-weight:400;margin:12px 0 8px}button,input{font:inherit;border:1px solid #463c52;border-radius:6px;padding:11px 13px}button{background:#302838;color:#eee6f5;cursor:pointer;font-size:12px}button:hover{background:#46364f;border-color:#b8a1c8}input{background:#121016;color:#ede5f5;width:100%;min-width:0;outline:none;font-size:12px}input:focus{border-color:#b9a4cf}form{display:flex;gap:8px;margin:12px 0}form button{white-space:nowrap}.tests{display:flex;gap:8px;margin:19px 0 16px}.tests button{flex:1;font-size:17px;background:#251e2d}.tests small{display:block;margin-top:5px;color:#a699b6;letter-spacing:1px;font-size:8px}.accent{background:#d6c3a7;color:#251d22;border-color:#d6c3a7}.accent:hover{background:#e7d8c5}.quiet{background:transparent;color:#b7a9c6}label{font-size:11px;color:#c0b4cc;display:block;margin-top:20px}.actions{display:flex;gap:9px;margin:16px 0}.detail{font-size:11px;color:#908499;line-height:1.7}.totals{display:flex;gap:45px;margin:25px 0}.totals strong{font-size:25px;display:block;font-weight:400}.totals span{display:block;font-size:8px;letter-spacing:1.2px;color:#9b8baa;margin-top:7px}details{font-size:11px;color:#aa9bb8;padding:10px 0}summary{cursor:pointer}details p{font-size:11px}a{color:#d5bce8}code{font-size:11px;color:#d9c7ea;overflow-wrap:anywhere}.source{border-top:1px solid #39303f;margin-top:18px;padding-top:0}.source code{display:block;background:#100e14;border-radius:5px;padding:12px;margin-top:10px}footer{font-size:10px;color:#796e86;padding:22px 0;text-align:center}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:14px 24px;background:#e1d0ba;color:#211a23;border-radius:8px;transition:.2s;font-size:12px}#toast.visible{opacity:1;transform:translate(-50%,0)}@media(max-width:850px){main{padding:25px}.panels{grid-template-columns:1fr}header{align-items:flex-start;flex-direction:column}h1{font-size:38px}}
/* Cool gradient wallpaper for the admin page and its live preview. */
body{min-height:100vh;background:radial-gradient(ellipse at 8% 12%,#164b6570,transparent 55%),radial-gradient(ellipse at 94% 35%,#58338d70,transparent 60%),linear-gradient(145deg,#081725 0%,#17152e 48%,#251138 100%);background-attachment:fixed}
.preview{background:radial-gradient(ellipse at 87% 73%,#8552ae 0%,#553878 23%,transparent 58%),radial-gradient(ellipse at 8% 18%,#287c94 0%,transparent 58%),linear-gradient(135deg,#102c49 0%,#263e6b 42%,#49316d 75%,#29203f 100%);border-color:#b3b6f04a;box-shadow:0 18px 65px #00000035}
.preview-label,.preview-footer{color:#e0e4f4;background:#08132135}
.preview-label span{color:#bccce1}
.panel{background:#171724ed;border-color:#a2abd530;box-shadow:0 8px 30px #00000020}
/* Letterbox backdrop: stays behind the transparent overlay and falling icons. */
.preview-stage{position:relative;aspect-ratio:16/9;isolation:isolate}
.preview-stage::before,.preview-stage::after{content:"";position:absolute;left:0;right:0;height:12.8%;background:#050507;z-index:0;pointer-events:none}
.preview-stage::before{top:0}.preview-stage::after{bottom:0}
.preview-stage iframe{position:absolute;inset:0;width:100%;height:100%;z-index:1}
/* Match the embedded document's color scheme so Chromium preserves its transparent backdrop. */
.preview-stage iframe{color-scheme:normal;background:transparent}

.tests{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.tests button{min-width:0;font-size:16px}
.pinup-editor{grid-column:1/-1}.pinup-editor input[type=file]{width:100%;box-sizing:border-box}.pinup-toolbar{display:flex;align-items:center;gap:16px;margin:20px 0 10px}.pinup-toolbar label{margin:0}.pinup-toolbar select{padding:8px;background:#211b2c;color:#eee;border:1px solid #51435c;border-radius:6px}.pinup-arrows{display:grid;grid-template-columns:52px 140px 52px;gap:6px;align-items:center;justify-content:center;margin:12px 0}.pinup-arrows [data-move=up]{grid-column:2;justify-self:center;width:52px}.pinup-arrows [data-move=down]{grid-column:2;justify-self:center;width:52px}.pinup-arrows output{text-align:center;font-size:13px;font-variant-numeric:tabular-nums}.pinup-fields{display:grid;grid-template-columns:1fr 1fr;gap:24px}.pinup-fields input{width:100%;padding:0}.pinup-fields output{font-size:12px;color:#cdb8df}.pinup-editor .actions{flex-wrap:wrap}@media(max-width:600px){.pinup-fields{grid-template-columns:1fr;gap:8px}}

#pinup-closeup{display:block;width:100%;max-width:640px;height:auto;margin:18px auto 8px;border:1px solid #51435c;border-radius:12px;background:radial-gradient(ellipse at 70% 60%,#644382,transparent 70%),linear-gradient(135deg,#103342,#302244)}
.pinup-arrows [data-move=up]{grid-row:1;grid-column:2}.pinup-arrows [data-move=left]{grid-row:2;grid-column:1}.pinup-arrows output{grid-row:2;grid-column:2}.pinup-arrows [data-move=right]{grid-row:2;grid-column:3}.pinup-arrows [data-move=down]{grid-row:3;grid-column:2}
.pinup-layout{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}.pinup-controls{min-width:0}.pinup-layout #pinup-closeup{margin-top:0}@media(max-width:800px){.pinup-layout{grid-template-columns:1fr}}
.pinup-steps{display:flex;gap:6px}.pinup-steps button{padding:8px 14px;white-space:nowrap}.pinup-steps button[aria-pressed=true]{background:#e2d0ad;color:#241c31;border-color:#e2d0ad;box-shadow:0 0 0 2px #e2d0ad33}.pinup-toolbar>span{font-size:13px}