:root{--pink:#ffd6e7;--hot:#ff3d8b;--ink:#222;--paper:#fff8fb;}
*{box-sizing:border-box}
body{margin:0;font-family:'IBM Plex Mono',monospace;color:var(--ink);
background:radial-gradient(circle at 10% 0%,#ffc2dc 0,transparent 40%),radial-gradient(circle at 100% 100%,#ffe6f0 0,transparent 50%),var(--paper);min-height:100vh}
.mono{font-family:'IBM Plex Mono',monospace;font-size:12px}
header{display:flex;gap:14px;align-items:center;padding:18px 24px;background:var(--pink);border-bottom:2px solid var(--ink)}
#swatch{width:40px;height:40px;border:2px solid var(--ink);border-radius:10px;image-rendering:pixelated}
h1{font-family:'Fraunces',serif;font-weight:900;margin:0;font-size:clamp(26px,5vw,44px);line-height:1}
h1 em{font-weight:200}
.sub{margin:4px 0 0;font-size:13px}
main{display:grid;grid-template-columns:1fr 320px;gap:24px;padding:24px;max-width:1200px;margin:auto}
@media(max-width:820px){main{grid-template-columns:1fr;padding:14px}}
.stage{animation:rise .6s both}
aside{animation:rise .6s .15s both;background:#fff;border:2px solid var(--ink);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:6px 6px 0 var(--hot);align-self:start}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
.frame{position:relative;aspect-ratio:1;border:2px solid var(--ink);border-radius:18px;overflow:hidden;
background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/20px 20px;box-shadow:6px 6px 0 var(--ink)}
.frame canvas{width:100%;height:100%;display:block;image-rendering:auto}
#loading{position:absolute;inset:0;display:grid;place-items:center;background:rgba(255,214,231,.7);font-weight:600;animation:pulse 1s infinite alternate}
@keyframes pulse{to{opacity:.5}}
.tabs{display:flex;gap:6px;align-items:center;margin-bottom:10px}
.tab{background:#fff}
.tab.on{background:var(--ink);color:#fff}
#timing{margin-left:auto}
button,select,input[type=number]{font:inherit;font-size:13px;border:2px solid var(--ink);border-radius:999px;padding:7px 14px;background:#fff;cursor:pointer}
button:hover{background:var(--pink)}
button:active{transform:translateY(1px)}
select,input[type=number]{width:100%;border-radius:10px}
.big{background:var(--hot);color:#fff;font-family:'Fraunces',serif;font-weight:900;font-size:22px;padding:12px}
.big:hover{background:#e62e78}
.ghost{background:transparent}
label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.row{display:flex;gap:6px}
.toggles{display:flex;flex-direction:column;gap:6px}
.tg{flex-direction:row;align-items:center;font-weight:400}
.tg input{accent-color:var(--hot);width:18px;height:18px}
.hint{font-weight:400;color:#777;font-size:12px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:#eee;border-radius:9px;border:1px solid var(--ink)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--hot);border:2px solid var(--ink);cursor:pointer}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--hot);border:2px solid var(--ink)}
.presets,.export{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.presets button{background:var(--pink)}
h3{font-family:'Fraunces',serif;font-weight:900;margin:0 0 8px}
#favs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;min-height:20px}
#favs img{width:100%;border:2px solid var(--ink);border-radius:8px;cursor:pointer;display:block}
#favs .x{font-size:11px;color:#777}
#toast{min-height:18px;margin-top:8px;color:var(--hot)}
footer{text-align:center;padding:24px;font-size:13px}
footer a{color:var(--hot);font-weight:600}