@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:372px minmax(360px,620px);place-content:center;align-items:stretch;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>svg{width:clamp(36px,3.2vw,44px);height:auto}.reset-action>svg{transform:rotate(-45deg)}.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-column{grid-area:1/2;place-items:center;min-width:0;display:grid;container-type:size}.preview-card{aspect-ratio:1;background:#fffcf5;border:1px solid #ded8cc;border-radius:28px;width:min(100%,100cqh,100svh - 64px);padding:12px;position:relative;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);align-items:center;padding:8px 0;display:grid}.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-icon{pointer-events:none;width:18px;height:18px;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.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;place-items:center;padding:0;transition:all .14s;display:grid}.lock-toggle>svg{width:21px;height:21px}.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(auto-fill, var(--control-height));justify-content:start;align-items:center;gap:8px;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<=840px){.site-shell{padding:0 clamp(14px,4vw,18px)}main{flex-direction:column;align-items:center;gap:24px;padding:26px 0 32px;display:flex}.tools-column{display:contents}.preview-column{display:contents;container-type:normal}.intro,.preview-card,.controls{width:100%}.intro{order:2;max-width:560px}.circle-action{max-width:96px}.preview-card{order:1;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>svg{width:34px}.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}}@media (width>=841px) and (height<=700px){main{padding:20px 0}.circle-action{width:82px}.controls{--control-height:40px;padding:10px 18px}.control-row{padding:7px 0}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}