@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap";:root{color:#27231f;font-synthesis:none;text-rendering:optimizelegibility;background:#f4f1e9;font-family:Manrope,sans-serif}*{box-sizing:border-box}html,body{background:#f4f1e9;min-width:320px;min-height:100%;overflow-x:hidden}body{min-height:100svh;margin:0}button,input,select{font:inherit}button,select,a{-webkit-tap-highlight-color:transparent}button:focus-visible,select:focus-visible,a:focus-visible{outline-offset:3px;outline:3px solid #7137df}.site-shell{width:min(1480px,100%);min-height:100svh;margin:0 auto;padding:0 clamp(18px,4vw,68px)}main{grid-template-columns:minmax(310px,360px) minmax(360px,560px);justify-content:center;align-items:center;gap:clamp(26px,4vw,64px);min-height:100svh;padding:clamp(28px,5vh,48px) 0;display:grid}.tools-column{flex-direction:column;grid-area:1/1;align-self:center;gap:22px;display:flex}.intro{justify-content:center;align-items:center;gap:18px;width:100%;display:flex}.circle-action{aspect-ratio:1;cursor:pointer;touch-action:manipulation;border-radius:50%;justify-self:center;place-items:center;width:100%;max-width:102px;padding:0;transition:transform .15s,box-shadow .15s,background .15s;display:grid}.circle-action span{font-family:DM Mono,monospace;font-size:clamp(34px,3vw,44px);line-height:1;display:block;transform:translateY(-1px)}.randomize-action img{filter:brightness(0)invert();width:clamp(38px,3.4vw,50px);height:auto;display:block}.reset-action span{transform:translateY(-1px)rotate(-45deg)}.export-action span{position:relative;transform:translateY(-5px)}.export-action span:after{content:"";background:currentColor;border-radius:999px;width:.58em;height:3px;position:absolute;bottom:-5px;left:50%;transform:translate(-50%)}.circle-action:hover{transform:translateY(-3px)}.circle-action:active{transform:translateY(3px)}.circle-action:disabled{opacity:.65;cursor:wait}.circle-action:disabled:hover,.circle-action:disabled:active{transform:none}.randomize-action{color:#fff;background:#27231f;border:2px solid #27231f;box-shadow:0 7px #c8c2b7}.randomize-action:hover{box-shadow:0 10px #c8c2b7}.randomize-action:active{box-shadow:0 3px #c8c2b7}.reset-action,.export-action{color:#27231f;background:#fffcf5;border:2px solid #cbc4b8;box-shadow:0 7px #d9d4c8}.reset-action:hover,.export-action:hover{background:#fff;box-shadow:0 10px #d9d4c8}.reset-action:active,.export-action:active{box-shadow:0 3px #d9d4c8}.preview-card{background:#fffcf5;border:1px solid #ded8cc;border-radius:28px;grid-area:1/2;justify-self:center;width:100%;max-width:min(620px,100svh - 64px);padding:12px;position:relative;transform:rotate(-.5deg);box-shadow:0 22px 60px #4f45361f}.face-frame{aspect-ratio:1;border-radius:18px;width:100%;overflow:hidden}.controls{--control-height:42px;--control-gap:12px;--label-width:72px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffcf5b8;border:1px solid #ded8cc;border-radius:24px;padding:12px 20px;box-shadow:0 16px 50px #4f453612}.control-row{grid-template-columns:var(--label-width) minmax(0, 1fr) var(--control-height);gap:var(--control-gap);border-bottom:1px solid #ded8cc;align-items:center;padding:8px 0;display:grid}.control-row:last-child{border-bottom:0}.control-row>label,.control-label{color:#6f685f;white-space:nowrap;font-size:13px;font-weight:700;line-height:18px}.select-wrap{min-width:0;position:relative}.select-wrap:after{content:"";pointer-events:none;border-bottom:2px solid #27231f;border-right:2px solid #27231f;width:8px;height:8px;position:absolute;top:50%;right:16px;transform:translateY(-70%)rotate(45deg)}.control-row select{width:100%;min-width:0;height:var(--control-height);color:#27231f;appearance:none;cursor:pointer;background:#fffdf8;border:1px solid #cfc8bb;border-radius:9px;padding:0 42px 0 12px;font-size:14px;box-shadow:0 2px 6px #483f320f}.lock-toggle{width:var(--control-height);height:var(--control-height);color:#817970;cursor:pointer;touch-action:manipulation;background:0 0;border:1px solid #d5cec2;border-radius:9px;padding:0;transition:all .14s;position:relative}.lock-toggle:before{content:"";border:2px solid;border-bottom:0;border-radius:7px 7px 0 0;width:9px;height:8px;position:absolute;top:11px;left:50%;transform:translate(-50%)}.lock-toggle:after{content:"";background:currentColor;border-radius:3px;width:14px;height:11px;position:absolute;top:17px;left:50%;transform:translate(-50%)}.lock-toggle:hover{color:#27231f;background:#f0ece3}.lock-toggle.active{color:#fffdf8;background:#27231f;border-color:#27231f}.palette-control{align-items:start}.palette-control>.control-label{margin-top:8px}.export-format-control .select-wrap{grid-column:2/4}.palette-options{grid-template-columns:repeat(4, var(--control-height));justify-content:space-between;place-items:center;gap:8px 4px;display:grid}.palette-options button{width:var(--control-height);height:var(--control-height);background:var(--swatch-bg);cursor:pointer;touch-action:manipulation;border:0;border-radius:50%;padding:0}.palette-options button.active{box-shadow:inset 0 0 0 3px var(--swatch-ink)}.palette-options button:focus-visible{outline-color:var(--swatch-ink)}@media (width<=760px){.site-shell{padding:0 clamp(14px,4vw,18px)}main{flex-direction:column;gap:24px;padding:26px 0 32px;display:flex}.tools-column{display:contents}.intro,.preview-card,.controls{width:100%}.intro{order:1;max-width:560px}.circle-action{max-width:96px}.preview-card{order:2;max-width:560px}.controls{order:3;max-width:560px;padding:12px clamp(16px,5vw,20px)}}@media (width<=440px){main{gap:19px;padding:18px 0 26px}.circle-action{max-width:84px}.circle-action span{font-size:32px}.randomize-action img{width:36px}.preview-card{border-radius:22px;max-width:390px;padding:8px}.face-frame{border-radius:15px}.controls{--control-gap:8px;--label-width:64px;border-radius:20px;max-width:390px;padding:12px}.control-row select{padding:0 40px 0 9px;font-size:13px}.palette-options{grid-template-columns:repeat(3, var(--control-height));gap:6px 8px}}@media (width>=761px) and (height<=700px){main{padding:20px 0}.circle-action{width:82px}.controls{--control-height:40px;padding:10px 18px}.control-row{padding:7px 0}.lock-toggle:before{top:10px}.lock-toggle:after{top:16px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}