@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%}body{min-height:100vh;margin:0}button,input,select{font:inherit}button,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(22px,4vw,68px)}main{grid-template-columns:minmax(240px,.68fr) minmax(390px,1.1fr) minmax(310px,.82fr);align-items:center;gap:clamp(28px,4vw,64px);min-height:100svh;padding:42px 0;display:grid}.intro{flex-direction:column;justify-content:center;align-self:center;align-items:center;gap:22px;display:flex}.circle-action{aspect-ratio:1;cursor:pointer;border-radius:50%;place-items:center;width:clamp(92px,8vw,118px);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)}.circle-action:hover{transform:translateY(-3px)}.circle-action:active{transform:translateY(3px)}.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{color:#27231f;background:#fffcf5;border:2px solid #cbc4b8;box-shadow:0 7px #d9d4c8}.reset-action:hover{background:#fff;box-shadow:0 10px #d9d4c8}.reset-action:active{box-shadow:0 3px #d9d4c8}.preview-card{background:#fffcf5;border:1px solid #ded8cc;border-radius:28px;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{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffcf5b8;border:1px solid #ded8cc;border-radius:24px;padding:25px;box-shadow:0 16px 50px #4f453612}.control-row{border-bottom:1px solid #ded8cc;grid-template-columns:66px minmax(0,1fr) 28px;align-items:center;gap:10px;padding:13px 0;display:grid}.control-row:first-child{padding-top:0}.control-row>label,.control-label{color:#6f685f;font-size:13px;font-weight:700}.control-row select{color:#27231f;cursor:pointer;background:#fffdf8;border:1px solid #cfc8bb;border-radius:9px;width:100%;height:42px;padding:0 12px;font-size:14px;box-shadow:0 2px 6px #483f320f}.lock-toggle{color:#817970;cursor:pointer;background:0 0;border:1px solid #d5cec2;border-radius:8px;width:28px;height:28px;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:5px;left:50%;transform:translate(-50%)}.lock-toggle:after{content:"";background:currentColor;border-radius:3px;width:14px;height:11px;position:absolute;top:11px;left:50%;transform:translate(-50%)}.lock-toggle:hover{color:#27231f;background:#f0ece3}.lock-toggle.active{color:#fffdf8;background:#27231f;border-color:#27231f}.palette-control{border-bottom:0;align-items:start;padding-bottom:0}.palette-control>.control-label,.palette-control>.lock-toggle{margin-top:2px}.palette-options{grid-template-columns:repeat(4,1fr);place-items:center;gap:8px;display:grid}.palette-options button{cursor:pointer;background:0 0;border:1px solid #0000;border-radius:50%;place-items:center;width:31px;height:31px;padding:0;display:grid}.palette-options button span{background:var(--swatch-bg);border:4px solid var(--swatch-skin);border-radius:50%;width:21px;height:21px;display:block;box-shadow:0 0 0 1px #cbc4b8}.palette-options button.active{border-color:#27231f}@media (width<=1100px){main{grid-template-columns:minmax(230px,.72fr) minmax(360px,1fr)}.intro{grid-area:1/1}.preview-card{grid-area:1/2/span 2}.controls{grid-area:2/1}}@media (width<=760px){.site-shell{padding:0 18px}main{flex-direction:column;gap:30px;padding:38px 0;display:flex}.intro,.preview-card,.controls{width:100%}.intro{flex-direction:row}.preview-card{order:2;max-width:560px}.controls{order:3;max-width:560px}}@media (width<=420px){.intro{flex-direction:column}.controls{padding:20px 17px}.control-row{grid-template-columns:58px minmax(0,1fr) 28px;gap:8px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}