:root{--toast:#efeadb;--white:#fffdf5;--yolk:#ffc800;--yolk-light:#ffe36b;--bacon:#e0675e;--ink:#2a0f08;--muted:#7a6a5f;--ok:#3fae7a;--warn:#f2a33a;--bad:#e0475e;--line:3px solid var(--ink);--shadow:5px 5px 0 var(--ink);--radius:16px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--ink);background:var(--toast);font-family:Mitr,system-ui,sans-serif}*{box-sizing:border-box}body{background:var(--toast) radial-gradient(#ffc8002e 18%, transparent 20%) 0 0 / 22px 22px;min-height:100vh;margin:0}button,input,select{font:inherit;color:inherit}h1,h2{margin:0;font-family:Fredoka,Mitr,sans-serif}.app{flex-direction:column;gap:16px;min-height:100vh;padding:16px clamp(16px,3vw,32px) 12px;display:flex;overflow-x:clip}.top{align-items:center;gap:14px;display:flex}.home{min-width:0;color:inherit;border-radius:16px;align-items:center;gap:14px;text-decoration:none;display:flex}.top .logo{flex:none;width:84px;height:84px;overflow:visible}.top .title{min-width:0}.logo-bacon,.logo-egg,.logo-pow{transform-box:fill-box}.logo-bacon{transform-origin:85% 90%}.logo-egg{transform-origin:50% 100%}.logo-pow{transform-origin:50%;opacity:0}.logo-eyes-squint{opacity:0}.home:hover .logo-bacon,.home:focus-visible .logo-bacon{animation:.75s cubic-bezier(.3,0,.2,1) bacon-bonk}.home:hover .logo-egg,.home:focus-visible .logo-egg{animation:.75s ease-out egg-squash}.home:hover .logo-pow,.home:focus-visible .logo-pow{animation:.75s ease-out pow}.home:hover .logo-eyes-open,.home:focus-visible .logo-eyes-open{animation:.75s step-end forwards eyes-out}.home:hover .logo-eyes-squint,.home:focus-visible .logo-eyes-squint{animation:.75s step-end forwards eyes-in}@keyframes bacon-bonk{0%{transform:none}30%{transform:rotate(55deg)translate(6px,-10px)}44%{transform:rotate(-42deg)translate(-6px,6px)}58%{transform:rotate(-34deg)translate(-4px,3px)}to{transform:none}}@keyframes egg-squash{0%,42%{transform:none}50%{transform:scale(1.12,.8)}64%{transform:scale(.97,1.04)}78%,to{transform:none}}@keyframes pow{0%,44%{opacity:0;transform:scale(.3)rotate(0)}54%{opacity:1;transform:scale(1.2)rotate(20deg)}80%{opacity:1;transform:scale(1)rotate(40deg)translate(-4px,-4px)}to{opacity:0;transform:scale(.8)rotate(60deg)translate(-8px,-8px)}}@keyframes eyes-out{0%{opacity:1}46%,to{opacity:0}}@keyframes eyes-in{0%{opacity:0}46%,to{opacity:1}}@media (prefers-reduced-motion:reduce){.home:hover .logo-bacon,.home:hover .logo-egg,.home:hover .logo-pow{animation:none}.home:hover .logo-eyes-open,.home:hover .logo-eyes-squint{animation-duration:10ms}}.top-actions{--control-h:46px;flex-wrap:wrap;align-items:center;gap:10px;margin-left:auto;display:flex}.top-actions .btn{height:var(--control-h)}.lang-btn{width:var(--control-h);height:var(--control-h);border:var(--line);background:var(--white);box-shadow:3px 3px 0 var(--ink);letter-spacing:.5px;cursor:pointer;border-radius:50%;flex:none;place-items:center;padding:0;font:700 15px Fredoka,Mitr,sans-serif;transition:transform 80ms,box-shadow 80ms;display:grid}.lang-btn:hover{box-shadow:4px 4px 0 var(--ink);background:var(--yolk-light);transform:translate(-1px,-1px)}.lang-btn:active{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}.top h1{color:var(--yolk);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink);font-size:clamp(32px,5vw,52px);line-height:1}.top p{margin:6px 0 0;font-size:15px}.btn{border:var(--line);background:var(--white);box-shadow:3px 3px 0 var(--ink);cursor:pointer;white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:8px 18px;font-weight:500;transition:transform 80ms,box-shadow 80ms;display:inline-flex}.btn:hover{box-shadow:4px 4px 0 var(--ink);transform:translate(-1px,-1px)}.btn:active{box-shadow:1px 1px 0 var(--ink);transform:translate(2px,2px)}.btn.primary{background:var(--yolk)}.btn.ghost{box-shadow:none;background:0 0}.btn.small{padding:4px 12px;font-size:14px}:focus-visible{outline:2px solid var(--bacon);outline-offset:2px}.seg button:focus-visible,.tabs button:focus-visible,.chips button:focus-visible,.swatches button:focus-visible,.variant:focus-visible,.preset:focus-visible,.style-tile:focus-visible{outline-offset:-4px}select:focus-visible,input[type=text]:focus-visible{border-color:var(--bacon);outline:none}.seg{border:var(--line);border-radius:999px;display:flex;overflow:hidden}.seg button{cursor:pointer;background:0 0;border:0;flex:1;padding:6px 8px}.seg button.on{background:var(--yolk);font-weight:600}footer{color:var(--muted);flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 16px;font-size:13px;display:flex}footer a,.link-btn{color:inherit;font:inherit;text-underline-offset:3px;cursor:pointer;background:0 0;border:0;align-items:center;gap:4px;padding:0;text-decoration:underline;display:inline-flex}footer a:hover,.link-btn:hover{color:var(--ink)}dialog.about{border:var(--line);background:var(--white);width:min(480px,100vw - 32px);color:var(--ink);box-shadow:8px 8px 0 var(--ink);border-radius:20px;padding:24px;position:fixed}dialog.about::backdrop{background:#2a0f0873}.about-close{position:absolute;top:14px;right:14px}.about-head{align-items:center;gap:14px;display:flex}.about-head h2{font-size:24px}.about-head .brand{color:var(--bacon)}.about-head p{margin:2px 0 0}dialog.about h3{color:var(--bacon);margin:18px 0 8px;font-size:15px}.about-links{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.about-links a{border:2px solid var(--ink);color:var(--ink);border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:14px;text-decoration:none;display:inline-flex}.about-links a:hover{background:var(--yolk-light)}.about-icons{gap:10px;margin:0;padding:0;list-style:none;display:flex}.about-icons a{border:var(--line);background:var(--white);width:48px;height:48px;box-shadow:2px 2px 0 var(--ink);color:var(--ink);border-radius:50%;place-items:center;display:grid}.about-icons a:hover{background:var(--yolk)}.about-privacy{color:var(--muted);align-items:center;gap:6px;margin:18px 0 0;font-size:13px;display:flex}[data-tip]{position:relative}[data-tip]:after{content:attr(data-tip);content:attr(data-tip) / "";border:2px solid var(--ink);background:var(--ink);width:max-content;max-width:260px;color:var(--white);text-align:left;white-space:normal;pointer-events:none;z-index:30;border-radius:8px;padding:6px 10px;font:400 13px/1.35 Mitr,system-ui,sans-serif;display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px)}[data-tip]:hover:after,[data-tip]:focus-visible:after{display:block;transform:translate(-50%)}[data-tip]:has(:focus-visible):after{display:block;transform:translate(-50%)}.top-actions [data-tip]:after{inset:calc(100% + 8px) 0 auto auto;transform:translateY(-4px)}.top-actions [data-tip]:hover:after{transform:translate(0)}.top-actions [data-tip]:has(:focus-visible):after{transform:translate(0)}@media (hover:none){[data-tip]:after,[data-tip]:hover:after,[data-tip]:focus-visible:after{display:none!important}[data-tip]:has(:focus-visible):after{display:none!important}}.muted{color:var(--muted)}.small{font-size:13px}.spacer{flex:1}.icon-btn{border:var(--line);background:var(--white);width:42px;height:42px;box-shadow:2px 2px 0 var(--ink);cursor:pointer;border-radius:50%;flex:none;place-items:center;display:inline-grid}.icon-btn:disabled,.btn:disabled,.export-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.app{--panel-w:400px;grid-template-columns:minmax(0, 1fr) var(--panel-w);gap:0;min-height:100vh;padding:0;display:grid}.canvas{flex-direction:column;justify-content:center;align-items:center;gap:22px;min-height:100vh;padding:96px 24px 32px;display:flex;position:relative}.float-title{position:absolute;top:16px;left:20px}.float-title h1{color:var(--yolk);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--ink);font-size:34px;line-height:1}.float-title p{margin:4px 0 0;font-size:13px}.stage-wrap{width:min(100%,640px,100vh - 230px);min-width:260px}.dock{border:var(--line);background:var(--white);max-width:100%;box-shadow:var(--shadow);border-radius:999px;align-items:center;gap:8px;padding:8px;display:flex}.dock-group{display:contents}.dock-sep{background:#2a0f0833;width:2px;height:28px;margin:0 2px}.style-btn{min-width:0;max-width:220px}.style-btn span{text-overflow:ellipsis;overflow:hidden}.dock [data-tip]:after{top:calc(100% + 10px);bottom:auto}.side-panel{overscroll-behavior:contain;border:var(--line);background:var(--white);height:calc(100vh - 32px);box-shadow:var(--shadow);border-radius:22px;margin:16px 16px 16px 0;position:sticky;top:0;overflow-y:auto}.panel-top{z-index:5;background:var(--white);--control-h:42px;border-bottom:2px solid #2a0f081f;border-radius:19px 19px 0 0;align-items:center;gap:8px;padding:12px 14px;display:flex;position:sticky;top:0}.panel-top b{font:700 20px Fredoka,Mitr,sans-serif}.panel-top [data-tip]:after{inset:calc(100% + 8px) 0 auto auto;transform:none}.sec{border-bottom:2px solid #2a0f081f}.sec summary{cursor:pointer;align-items:center;gap:8px;padding:12px 16px;font-weight:600;list-style:none;display:flex}.sec summary::-webkit-details-marker{display:none}.sec summary:before{content:"";border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);width:8px;height:8px;transition:transform .15s;transform:rotate(-45deg)}.sec[open] summary:before{transform:rotate(45deg)}.sec summary .hint{margin-left:auto}.sec-body{padding:0 16px 16px}.side-panel footer{padding:14px}kbd{background:var(--white);color:var(--ink);white-space:nowrap;border:1.5px solid #2a0f0859;border-bottom-width:2.5px;border-radius:6px;padding:0 6px;font:500 11px/1.5 JetBrains Mono,monospace;display:inline-block}.part-rows{flex-direction:column;gap:6px;display:flex}.part{border:2px solid #0000;border-radius:14px}.part.open{border-color:var(--ink);background:var(--toast)}.part-row{align-items:center;gap:4px;padding:3px 4px;display:flex}.part-name{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:10px;flex:1;min-width:0;padding:6px 8px;font-weight:500}.part-name:hover{background:var(--yolk-light)}.part.open .part-name{font-weight:700}.part-count{text-align:center;min-width:64px;color:var(--muted);font:500 13px JetBrains Mono,monospace}.mini-btn{border:2px solid var(--ink);background:var(--white);cursor:pointer;border-radius:50%;flex:none;place-items:center;width:32px;height:32px;display:inline-grid}.mini-btn:hover{background:var(--yolk)}.part .variants{margin:4px 8px 10px}.stage{aspect-ratio:1;border:var(--line);width:100%;box-shadow:var(--shadow);background:repeating-conic-gradient(#e8e4da 0 25%, #fffdf5 0 50%) 0 0 / 28px 28px;position:relative;overflow:hidden;container-type:inline-size}.stage.shape-circle{border-radius:50%}.stage.shape-rounded{border-radius:18%}.stage.shape-square{border-radius:4px}.stage.loading{color:var(--muted);place-items:center;display:grid}.stage-avatar{position:absolute;inset:0}.stage-avatar svg{display:block}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{border:2px solid var(--ink);background:var(--white);cursor:pointer;border-radius:999px;padding:4px 12px;font-size:14px}.chip.on{background:var(--yolk);font-weight:600}.chip:hover{background:var(--yolk-light)}.variant-head{align-items:center;gap:10px;margin:14px 0 10px;display:flex}.variant-head .btn{margin-left:auto}.variants{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;max-height:300px;padding:4px;display:grid;overflow-y:auto}.variant{aspect-ratio:1;border:2px solid var(--ink);background:var(--toast);cursor:pointer;border-radius:16px;padding:0;overflow:hidden}.variant img{width:100%;height:100%;display:block}.variant:hover{background:var(--yolk-light)}.variant.on{background:var(--yolk-light);box-shadow:0 0 0 3px var(--bacon);border-width:3px}.variant.none{color:var(--muted);place-content:center;justify-items:center;gap:2px;font-size:13px;display:grid}.swatch-row{border:0;margin:0 0 16px;padding:0}.swatch-row legend{margin-bottom:6px;font-size:14px;font-weight:600}.swatch-row.hl legend:after{content:" ●";color:var(--bacon)}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatch{border:2px solid var(--ink);cursor:pointer;border-radius:50%;width:30px;height:30px;padding:0;position:relative}.swatch.on{box-shadow:inset 0 0 0 3px var(--white);border-width:3px}.swatch.clear{background:repeating-conic-gradient(#e8e4da 0 25%, #fffdf5 0 50%) 0 0 / 12px 12px;place-items:center;display:grid}.swatch.custom{background:conic-gradient(#e0675e,#ffc800,#7ee0b5,#6ec8ff,#ff8fb8,#e0675e);place-items:center;display:grid;overflow:hidden}.swatch.custom input{opacity:0;cursor:pointer;position:absolute;inset:0}.presets-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;display:grid}.preset{border:2px solid var(--ink);background:var(--white);cursor:pointer;border-radius:16px;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;font-size:14px;display:flex;position:relative}.preset:hover{background:var(--yolk-light)}.preset kbd{padding:0 4px;font-size:10px;position:absolute;top:4px;right:4px}.preset.on{background:var(--yolk);box-shadow:3px 3px 0 var(--ink);font-weight:600}.field{flex-direction:column;gap:6px;margin-bottom:14px;display:flex}.field input[type=text]{border:var(--line);background:var(--white);border-radius:12px;padding:10px 14px;font-size:18px}input[type=range]{accent-color:var(--bacon)}.meme-ideas{scroll-snap-type:x proximity;scrollbar-width:thin;gap:8px;margin-top:4px;padding:2px 2px 8px;display:flex;overflow-x:auto}.meme-ideas .chip{white-space:nowrap;scroll-snap-align:start;flex:none}.export-tab .seg{margin-bottom:12px}.export-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.export-title{align-items:center;gap:6px;width:100%;display:flex}.export-title kbd{margin-left:auto}.export-btn{border:var(--line);background:var(--white);box-shadow:3px 3px 0 var(--ink);text-align:left;cursor:pointer;border-radius:18px;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 12px;transition:transform 80ms,box-shadow 80ms;display:flex}.export-btn:hover:not(:disabled){box-shadow:4px 4px 0 var(--ink);transform:translate(-1px,-1px)}.export-btn.primary{background:var(--yolk)}.export-btn b{font:700 16px Fredoka,Mitr,sans-serif}.export-btn small{color:var(--muted);font-size:13px;line-height:1.35}.export-btn.primary small{color:var(--ink)}.progress{align-items:center;gap:12px;margin-top:14px;display:flex}.progress progress{accent-color:var(--bacon);flex:1}.alert{border:2px solid var(--bad);background:#ffe9ec;border-radius:12px;margin:14px 0 0;padding:10px 14px}.export-row{flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px;display:flex}.note{color:var(--ok);align-items:center;gap:4px;font-weight:600;display:inline-flex}.credit{border:2px dashed #2a0f0859;border-radius:14px;margin-top:18px;padding:12px 14px;font-size:14px}.credit.needs{border-color:var(--bacon);background:#fff3ef}.credit p{margin:4px 0 8px}.credit code{overflow-wrap:anywhere;margin-bottom:8px;font:500 12px/1.5 JetBrains Mono,monospace;display:block}dialog.shortcuts{width:min(560px,100vw - 32px);max-height:86vh}dialog.shortcuts h2{margin-bottom:12px}dialog.shortcuts table{border-collapse:collapse;width:100%;font-size:14px}dialog.shortcuts td{vertical-align:top;border-bottom:1px solid #2a0f081a;padding:6px 4px}dialog.shortcuts td:first-child{width:42%}dialog.gallery{border:var(--line);background:var(--white);width:min(1000px,100vw - 32px);max-height:88vh;color:var(--ink);box-shadow:8px 8px 0 var(--ink);border-radius:22px;padding:20px 24px 24px}dialog.gallery::backdrop{background:#2a0f0873}.gallery-head{justify-content:space-between;align-items:center;display:flex}dialog.gallery h3{color:var(--bacon);margin:18px 0 10px;font-size:16px}.style-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px;display:grid}.style-tile{border:2px solid var(--ink);background:var(--white);cursor:pointer;border-radius:18px;flex-direction:column;align-items:center;gap:6px;padding:8px 8px 10px;display:flex;position:relative}.style-tile img,.tile-loading{aspect-ratio:1;background:var(--toast);border-radius:12px;width:100%}.tile-loading{color:var(--muted);place-items:center;font-size:12px;display:grid}.style-tile:hover{background:var(--yolk-light)}.style-tile.on{background:var(--yolk);box-shadow:3px 3px 0 var(--ink)}.style-name{font:600 14px Fredoka,Mitr,sans-serif}.badge{border:2px solid var(--ink);background:var(--bacon);color:var(--white);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600;position:absolute;top:6px;left:6px}.color-dot{border:2px solid var(--ink);width:28px;height:28px;box-shadow:inset 0 0 0 2px var(--white);cursor:pointer;border-radius:50%;flex:none;margin-left:2px;padding:0}.color-dot.on{border-color:var(--bacon);border-width:3px}.color-dot.empty{box-shadow:none;cursor:default;border-style:dashed;border-color:#2a0f0833}.part-name.static{cursor:default;align-items:center;gap:6px;display:inline-flex}.part-name.static:hover{background:0 0}.colors-row{border:2px dashed #2a0f0833}.colors-row .part-row{flex-wrap:wrap}.palette-box{background:var(--white);border-radius:12px;margin:2px 6px 8px;padding:8px 10px 4px}.part:not(.open) .palette-box,.colors .palette-box{border:2px solid #2a0f081f}.colors .palette-box{margin:0 0 8px}.palette-label{color:var(--muted);margin-bottom:4px;font-size:13px;font-weight:600}.palette{scrollbar-width:thin;align-items:center;gap:8px;padding:2px 2px 8px;display:flex;overflow-x:auto}.palette .swatch{flex:none}.palette-icon{color:var(--muted);flex:none}.palette-sep{background:#2a0f0833;flex:none;width:2px;height:24px}.swatch.tiny{width:22px;height:22px}.caption{white-space:nowrap;paint-order:stroke fill;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;max-width:96%;padding:0 .1em;font-family:Mitr,sans-serif;font-weight:700;line-height:1.1;position:absolute;transform:translate(-50%,-50%)}.caption:active{cursor:grabbing}.caption.on{outline:2px dashed var(--bacon);outline-offset:4px;border-radius:6px}.text-add{align-items:center;gap:6px;margin-bottom:10px;display:flex}.text-item{border:2px solid #2a0f0826;border-radius:14px;flex-direction:column;gap:6px;margin-bottom:8px;padding:8px;display:flex}.text-item.on{border-color:var(--bacon)}.text-item input[type=text]{border:var(--line);background:var(--white);border-radius:10px;padding:8px 12px;font-size:16px}.text-controls{align-items:center;gap:6px;display:flex}.text-controls input[type=range]{flex:1;min-width:60px}.download-btn{background:var(--bacon);color:var(--white)}.license-chip{border:1.5px solid var(--ink);background:#fff3ef;border-radius:999px;padding:0 6px;font-size:11px;font-weight:600}dialog.export-dialog{width:min(620px,100vw - 32px);max-height:90vh}.dialog-title{align-items:center;gap:8px;margin-bottom:14px;display:flex}.export-head{align-items:flex-start;gap:16px;margin-bottom:14px;display:flex}.export-preview{border:var(--line);background:repeating-conic-gradient(#e8e4da 0 25%, #fffdf5 0 50%) 0 0 / 16px 16px;flex:none;width:132px;height:132px}.export-preview.shape-circle{border-radius:50%}.export-preview.shape-rounded{border-radius:18%}.export-size{flex-direction:column;gap:8px;min-width:0;display:flex}.export-size .export-row{margin-top:4px}@media (width<=520px){.export-grid{grid-template-columns:1fr}.export-head{flex-direction:column;align-items:center}}.color-chips{flex-wrap:wrap;gap:6px;padding:0 6px 8px;display:flex}.color-chip{border:2px solid var(--ink);background:var(--white);cursor:pointer;border-radius:999px;align-items:center;gap:6px;padding:3px 10px 3px 4px;font-size:13px;font-weight:500;display:inline-flex}.color-chip:hover{background:var(--yolk-light)}.color-chip.on{background:var(--yolk)}.chip-dot{border:2px solid var(--ink);border-radius:50%;width:20px;height:20px}.shape-icons{gap:8px;margin-bottom:8px;display:flex}.shape-btn{border:2px solid var(--ink);background:var(--white);cursor:pointer;border-radius:12px;place-items:center;width:42px;height:42px;display:grid}.shape-btn:hover{background:var(--yolk-light)}.shape-btn.on{background:var(--yolk);box-shadow:2px 2px 0 var(--ink)}@media (width<=960px){.app{grid-template-columns:minmax(0,1fr)}.canvas{gap:16px;min-width:0;min-height:auto;padding:88px 16px 16px}.stage-wrap{width:min(100%,520px);min-width:0}.side-panel{min-width:0;height:auto;margin:0 12px 24px;position:static;overflow:visible}}@media (width<=560px){.float-title{top:12px;left:14px}.float-title .logo{width:48px;height:48px}.float-title h1{font-size:26px}.float-title p{font-size:12px}.dock{border-radius:22px;flex-direction:column;align-items:stretch;width:100%}.dock-group{align-items:center;gap:8px;display:flex}.dock .style-btn{flex:1;justify-content:center;max-width:none}.dock-group .download-btn{flex:1;justify-content:center}.dock-sep{display:none}.part-row{gap:3px}.part-count{min-width:48px;font-size:12px}.mini-btn{width:30px;height:30px}.sec-body{padding:0 10px 14px}.export-grid{grid-template-columns:1fr}}