@font-face{font-family:Space Mono;src:url(fonts/SpaceMono-Regular.ttf) format('truetype');font-display:swap}
@font-face{font-family:Monoton;src:url(fonts/Monoton-Regular.ttf) format('truetype');font-display:swap}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f7f8f3;color:#20251e;font-family:Arial,Helvetica,sans-serif;font-size:16px}
button,input,textarea{font:inherit}
button,a,input,textarea{ -webkit-tap-highlight-color:transparent}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #648716;outline-offset:4px}
button:disabled{cursor:wait;opacity:.55}
.masthead{max-width:1440px;margin:auto;padding:26px 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:0px solid #d9ded2}
.brand{font-size:29px;letter-spacing:-1.8px;font-weight:900;display:inline-flex;align-items:center}
.brand span{font-weight:400}
.section-label,.preview-toolbar,.preview-caption{font-family:Monoton,monospace;font-size:12px}
.dot{display:inline-block;width:7px;height:7px;border-radius:100%;background:#80a22a;margin-right:6px}
main{max-width:1344px;margin:auto;padding:0 32px}
.intro{display:flex;justify-content:space-between;align-items:center;padding:53px 0 39px}
h1{font-size:clamp(46px,5.5vw,77px);line-height:1.1;letter-spacing:-4px;margin:13px 0 16px;font-weight:800}
p{line-height:1.6}
.workspace{display:grid;grid-template-columns: minmax(330px, .85fr) minmax(400px,1.15fr);border:1px solid #d4dacb;border-radius:0px;overflow:hidden;background:#fff;box-shadow: -10px -10px #eaede6;}
.controls{padding:30px 32px}
.control-section+.control-section{border-top:1px solid #e5e8df;padding-top:25px;margin-top:25px}
.section-label{display:flex;justify-content:space-between;gap:12px;margin-bottom:18px;letter-spacing:.5px}
.section-label>span+span{color:#858d7d;letter-spacing:0}
.theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
fieldset{border:0;padding:0;margin:0;min-width:0}
.theme-option{cursor:pointer;position:relative}
.theme-option input,.size-options input{position:absolute;opacity:0;width:1px;height:1px}
.swatch{display:block;height:67px;border-radius:5px;overflow:hidden;position:relative;border:1px solid #0000000d;transition:transform .2s}
 .swatch i{display:block;position:absolute;width:60%;height:70%;left:20%;top:15%;border-radius:0}

.plain{background:#f0ede5}
.plain i{background:linear-gradient(90deg,#a4ac95 0 23%,transparent 23% 32%,#171916 32% 55%,transparent 55% 64%,#c7c3b9 64%);transform:skewY(-8deg)}

.cyber{background:#0b1321}
.cyber i{background:repeating-linear-gradient(0deg,transparent 0 10px,#baff44 10px 12px,transparent 12px 20px);transform:skewY(-22deg);border-right:2px solid #baff44}

.rave{background:repeating-conic-gradient(#8154ff 0% 25%,#3111ba 0% 50%) 50% / 20px 20px}
.rave i{background:#d7ff3f;clip-path:polygon(38% 0,90% 0,55% 42%,88% 42%,12% 100%,35% 55%,5% 55%)}

.light{background:#ecf1fb}
.light i{background:linear-gradient(140deg,#91a8ff 48%,#c6d3f3 49%);transform:skewX(-18deg)}

.dark{background:#111313}
.dark i{background:repeating-linear-gradient(65deg,transparent 0 12px,#7d897d 12px 14px,transparent 14px 22px)}

.solar{background:#ff693b}
.solar i{width:100%;left:0;background:repeating-linear-gradient(65deg,#fff0a1 0 15px,#d63c24 15px 30px)}

.brutal{background:#f4f22e}
.brutal i{background:#fb6040;box-shadow:7px 7px 0 #111;width:55%;height:45%;top:22%}

.grid{background:repeating-linear-gradient(90deg,transparent 0 14px,#a0bea6 14px 15px),repeating-linear-gradient(0deg,#e4ede5 0 14px,#a0bea6 14px 15px)}
.grid i{width:25px;height:25px;background:#427258;box-shadow:30px 16px 0 #427258;top:8px}

.confetti{background:#fff0c9}
.confetti i{background:repeating-conic-gradient(#ea5870 0 25%,transparent 0 50%,#648bc6 0 75%,transparent 0) 0 / 20px 20px;transform:rotate(-12deg)}

.waves{background:#103a59}
.waves i{width:110%;left:-5%;background:repeating-linear-gradient(12deg,#64d3d6 0 5px,transparent 5px 12px);transform:skewY(-18deg)}

.arcade{background:#14142d}
.arcade i{width:12px;height:12px;left:30%;top:12px;background:#f27cba;box-shadow:12px 0 #f27cba,36px 0 #f27cba,48px 0 #f27cba,0 12px #f27cba,12px 12px #f27cba,24px 12px #f27cba,36px 12px #f27cba,48px 12px #f27cba,12px 24px #f27cba,36px 24px #f27cba}

.prism{background:#eee9fa}
.prism i{background:conic-gradient(from 30deg,#8570d4 0 120deg,#c5a5e4 120deg 240deg,#ad97d4 240deg);clip-path:polygon(50% 0,100% 100%,0 100%)}

.theme-name{display:flex;justify-content:space-between;font-size:14px;margin-top:7px;color:#69735e}
.theme-name b{visibility:hidden;color:#425c14}
.theme-option:has(input:checked) .swatch{outline:2px solid #4d642b;outline-offset:3px}
.theme-option:has(input:checked) .theme-name{color:#1e2717;font-weight:700}
.theme-option:has(input:checked) b{visibility:visible}
.theme-option:has(input:focus-visible) .swatch,.size-options label:has(input:focus-visible){outline:3px solid #648716;outline-offset:3px}
label{display:block;font-size:14px;color:#454e3d}
label>span:not(.swatch):not(.theme-name){color:#8b9384;font-size:12px;margin-left:5px}
input:not([type=radio]):not([type=hidden]),textarea{display:block;width:100%;padding:11px 12px;margin-top:8px;border:1px solid #d8dece;border-radius:5px;background:#fcfdf9;color:#273020;font-size:15px;line-height:1.5;transition:border-color .15s}
textarea{resize:vertical;min-height:66px}
input:hover,textarea:hover{border-color:#a5b494}
.control-section>label,.field-pair{margin-bottom:16px}
.control-section>label:last-child{margin-bottom:0}
.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.size-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.size-options label{position:relative;cursor:pointer;border:1px solid #d8dece;border-radius:5px;padding:12px 4px;text-align:center}
.size-options label>span{margin:0;color:#273020;font-size:14px}
.size-options strong{font-weight:500;display:block}
.size-options small{display:block;margin-top:6px;font-family:Space Mono,monospace;color:#78826c;font-size:11px}
.size-options label:has(input:checked){border-color:#627849;background:#f1f7e5;box-shadow:inset 0 0 0 1px #627849}
.preview-panel{background:#edf0e7;border-left:1px solid #d4dacb;padding:23px 35px 25px;display:flex;align-items:stretch;flex-direction:column}
.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:23px}
.preview-toolbar>span{font-size:11px;letter-spacing:1px}
.preview-toolbar button{background:#f9fbf4;border:1px solid #cfd7c5;border-radius:5px;padding:9px 12px;color:#3d4c30;font-family:Arial,sans-serif;font-size:14px}
.preview-toolbar button:hover{background:#d8fc60}
.preview-toolbar button>span{margin-left:6px}
.artboard{aspect-ratio:3/4;width:100%;max-width:488px;align-self:center;background:#dce1d2;box-shadow:0 12px 28px #34411f20;position:relative;display:grid;place-items:center;overflow:hidden}
.artboard img{display:block;width:100%;height:100%;object-fit:contain}
.artboard img[hidden]{display:none}
#preview-placeholder{text-align:center;padding:24px;color:#435632}
.artboard[aria-busy=true]::after{content:'';position:absolute;bottom:0;left:0;height:3px;width:100%;background:#d8fc60;animation:pulse 1s infinite}
.preview-caption{display:flex;justify-content:space-between;color:#7c8772;font-size:10px;letter-spacing:.4px;margin:18px 0 26px;gap:10px}
.download-row{display:flex;gap:10px}
.download{display:flex;align-items:center;justify-content:space-between;background:#d8fc60;border:1px solid #b6d846;padding:17px 20px;border-radius:5px;font-weight:700;flex:1;color:#27331a}
.download:hover{background:#c9f145}
.download>span{font-size:22px;line-height:1}
.save{border:1px solid #b5c0a5;background:transparent;border-radius:5px;padding:0 15px;font-size:14px}
.status{margin:11px 0 0;min-height:23px;font-size:13px;color:#566a41}
.status.error{color:#a72e25}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.notice{padding:18px;background:#fff1d8;color:#754d10}
#saved-link{padding:15px 0}
#saved-link small{font-size:12px;line-height:1.6;color:#6d7663}
#saved-url{font-size:13px}
@keyframes pulse{50%{opacity:.3}
}
@media(min-width:1200px){.workspace{grid-template-columns:470px 1fr}
.preview-panel{padding-left:62px;padding-right:62px}
}
@media(max-width:850px){.masthead{padding:22px 24px}
main{padding:0 20px}
.workspace{grid-template-columns:1fr 1fr}
.controls{padding:24px 20px}
.preview-panel{padding:22px 20px}
.preview-toolbar{flex-wrap:wrap}
.field-pair{grid-template-columns:1fr}
.size-options small{font-size:9px}
.preview-caption{font-size:9px}
}
@media(max-width:650px){.intro{padding:34px 0 29px}
h1{letter-spacing:-2.5px}
.workspace{grid-template-columns:1fr}
.preview-panel{border-left:0;border-top:1px solid #d4dacb;padding:22px}
.controls{padding:24px}
.field-pair{grid-template-columns:1fr 1fr}
.swatch{height:60px}
.preview-toolbar{flex-wrap:nowrap}
.preview-caption{font-size:10px}
.size-options small{font-size:11px}
.brand{font-size:26px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}


.intro{padding:30px 0 26px}
.intro h1{font-size:32px;letter-spacing:-1px;margin:0}
.masthead{padding-top:22px;padding-bottom:22px}
.workspace{margin-bottom:40px}
.preview-panel{position:relative}
.preview-toolbar{margin-top:0}
.theme-grid{row-gap:15px}
.download{justify-content:center}
.theme-option .swatch{height:55px}
@media(min-width:651px){.preview-panel .artboard{max-width:488px}
.preview-panel{justify-content:flex-start}
}


/* Additional themes; retain the supplied page styling. */
.chrome{background:#171e2b}.chrome i{background:repeating-linear-gradient(90deg,#566780 0,#edf6ff 10px,#566780 17px,#171e2b 22px);transform:skewX(18deg)}
.acid{background:#dafb39}.acid i{background:repeating-radial-gradient(ellipse at 10% 50%,#8c21de 0 7px,#81b92d 8px 15px,#dafb39 16px 23px);transform:skewY(12deg)}
.vapor{background:linear-gradient(#f495d7,#57d3dc)}.vapor i{background:repeating-linear-gradient(90deg,#fff2ff 0 10px,transparent 10px 30px);border-bottom:4px solid #36215f}
.y2k{background:#cceafa}.y2k i{background:#637cdb;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.glitch{background:#101621}.glitch i{background:repeating-linear-gradient(0deg,#fd5882 0 4px,transparent 4px 10px,#45d9e8 10px 14px,transparent 14px 23px);transform:skewX(-25deg)}
.noise{background:#e6dfd4}.noise i{width:100%;left:0;background:repeating-conic-gradient(#685a4b 0 25%,transparent 0 50%) 0 / 3px 5px;clip-path:polygon(0 20%,100% 0,100% 75%,0 100%)}
.static{background:#10141a}.static i{width:100%;left:0;background:repeating-conic-gradient(#d9e2e7 0 25%,#52616c 0 50%,#10141a 0 75%,#d9e2e7 0) 0 / 7px 3px}
.crt{background:repeating-linear-gradient(#102826 0 3px,#294f42 3px 4px)}.crt i{border-top:3px solid #66d496;transform:skewY(-20deg);box-shadow:0 -3px 5px #66d49666;top:50%}
.terminal{background:#0e1912}.terminal i{background:repeating-linear-gradient(0deg,#67ba7c 0 2px,transparent 2px 9px);width:50%;height:40%;left:12%;top:25%;border-left:5px solid #d4f8d8}
.matrix{background:#07190e}.matrix i{width:100%;left:0;background:repeating-linear-gradient(90deg,transparent 0 12px,#58d87b 12px 15px),repeating-linear-gradient(0deg,#246c3e 0 2px,transparent 2px 8px);mask-image:linear-gradient(90deg,black,transparent,black,transparent,black)}
.neon{background:#1c102c}.neon i{border:2px solid #fff2fd;box-shadow:0 0 5px 2px #fa6bc9,inset 0 0 5px 2px #854fe8;transform:skewX(-12deg)}
.laser{background:#111329}.laser i{width:100%;left:0;background:repeating-conic-gradient(from 45deg at 0 50%,transparent 0 12deg,#8ea3ff 12deg 13deg,transparent 13deg 25deg,#ea53cb 25deg 26deg)}
.hologram{background:#e3f4f5}.hologram i{background:repeating-linear-gradient(125deg,#72c4d1 0 10px,#d4a2e1 20px,#e3f4f5 30px);transform:skewX(-10deg);border:1px solid #fff}
.plasma{background:#23113e}.plasma i{width:100%;height:100%;top:0;left:0;background:radial-gradient(ellipse at 20% 20%,#ef65bb,transparent 60%),radial-gradient(ellipse at 80% 80%,#7460e2,transparent 70%)}
.pixel{background:#e9efdf}.pixel i{background:#6a9d60;clip-path:polygon(0 70%,20% 70%,20% 35%,40% 35%,40% 0,60% 0,60% 35%,80% 35%,80% 70%,100% 70%,100% 100%,0 100%)}
.vector{background:#f0efdf}.vector i{border:2px solid #6ca37a;transform:skewY(-15deg);box-shadow:4px 4px 0 #c4d0ae}
.wireframe{background:#122239}.wireframe i{background:repeating-linear-gradient(90deg,transparent 0 13px,#79c9ef 13px 14px),repeating-linear-gradient(0deg,transparent 0 9px,#355e86 9px 10px);transform:skewY(-12deg)}
.blueprint{background:repeating-linear-gradient(90deg,transparent 0 12px,#3866a0 12px 13px),repeating-linear-gradient(0deg,#153d7c 0 12px,#3866a0 12px 13px)}.blueprint i{border:1px solid #f0f8ff;width:42%;height:60%;left:29%}
.circuit{background:#12302b}.circuit i{border:2px solid #90cc7a;background:#356356;width:30%;left:35%;box-shadow:8px 0 0 -5px #e6fff0,-8px 0 0 -5px #e6fff0}
.digital{background:#111e38}.digital i{background:repeating-conic-gradient(#6bbcec 0 25%,transparent 0 50%,#3d5b96 0 75%,transparent 0) 0 / 22px 14px}
/* Keep event fields reachable as the catalog grows. */
.theme-grid{max-height:430px;overflow-y:auto;overscroll-behavior:contain;padding:5px 8px 7px 5px;scrollbar-width:thin;scrollbar-color:#b4c19f transparent}