*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--pattern-background);background-repeat:repeat;justify-content:center;align-items:center;min-height:100dvh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;transition:background-image .5s;display:flex}.controls{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-sizing:border-box;background:#0009;border:1px solid #fff3;border-radius:16px;flex-direction:column;align-items:center;gap:16px;width:240px;padding:20px;display:flex}.color-control{align-items:center;gap:12px;display:flex}.color-control label{color:#fffc;font-size:14px;font-weight:500}.color-control input[type=color]{cursor:pointer;background:0 0;border:none;border-radius:8px;width:40px;height:32px;padding:0}.presets-section{flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}.presets-label{color:#fffc;font-size:14px;font-weight:500}.presets-grid{grid-template-columns:repeat(3,1fr);justify-items:center;gap:8px;width:100%;display:grid}.controls-section{border-top:1px solid #ffffff1a;flex-direction:column;align-items:center;gap:12px;width:100%;padding-top:8px;display:flex}.controls-grid{grid-template-columns:repeat(3,1fr);justify-items:center;gap:8px;width:100%;display:grid}.preset-btn{cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffff1a;border:1px solid #fff3;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;padding:8px;font-size:20px;transition:all .2s;display:flex}.preset-btn:hover{background:#fff3;border-color:#fff6;transform:scale(1.05)}.emoji-grid{grid-template-columns:repeat(2,1fr);place-items:center;gap:15px;width:160px;height:160px;display:grid}.emoji-btn{cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:70px;height:70px;padding:12px;font-size:50px;transition:all .2s;display:flex}.emoji-btn:hover{background:#fff3;transform:scale(1.05)}.emoji-picker{z-index:1000;background:#0009;justify-content:center;align-items:center;transition:all .3s;display:flex;position:fixed;inset:0}.emoji-picker.hidden{opacity:0;visibility:hidden}.emoji-options{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);max-width:min(480px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px));max-height:min(400px, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px));background:#fffffff2;border-radius:20px;grid-template-columns:repeat(8,1fr);gap:8px;padding:24px;display:grid;overflow-y:auto;box-shadow:0 8px 32px #0003}.emoji-option{text-align:center;cursor:pointer;background:#ffffff80;border-radius:8px;justify-content:center;align-items:center;min-height:40px;padding:8px;font-size:1.5rem;transition:all .2s;display:flex}.emoji-option:hover{background:#ffffffe6;transform:scale(1.1)}.emoji-category-header{color:#000000b3;text-align:left;background:#0000000d;border-radius:6px;grid-column:1/-1;margin:8px 0 4px;padding:12px 8px 4px;font-size:.9rem;font-weight:600}.footer{bottom:calc(16px + env(safe-area-inset-bottom));color:#ffffffe6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-sizing:border-box;z-index:100;background:#0009;border:1px solid #fff3;border-radius:12px;justify-content:center;align-items:center;gap:12px;width:240px;padding:8px 16px;font-size:11px;display:flex;position:fixed;left:50%;transform:translate(-50%)}.ui-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;transition:color .2s;display:flex}.ui-toggle:hover{color:#fff}.ui-toggle input[type=checkbox]{accent-color:#ffffffb3;width:12px;height:12px}.credit a{color:#fffc;text-decoration:none;transition:color .2s}.credit a:hover{color:#fff}@media (width<=768px){.controls{gap:16px;padding:16px}.color-control{gap:8px}.emoji-grid{gap:12px;width:140px;height:140px}.emoji-btn{width:60px;height:60px;font-size:2rem}.footer{bottom:calc(12px + env(safe-area-inset-bottom));gap:16px;padding:6px 12px;font-size:11px}.emoji-options{max-width:min(360px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px));max-height:min(300px, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px));grid-template-columns:repeat(6,1fr)}.emoji-option{min-height:32px;padding:6px;font-size:1.2rem}}@media (width<=480px){.controls{gap:12px;padding:12px}.emoji-grid{gap:8px;width:120px;height:120px}.emoji-btn{width:50px;height:50px;font-size:1.8rem}.footer{bottom:calc(8px + env(safe-area-inset-bottom));flex-direction:column;align-items:center;gap:12px;padding:6px 10px;font-size:10px}.emoji-options{max-width:min(300px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px));max-height:min(250px, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px));grid-template-columns:repeat(5,1fr)}}:root{--pattern-background:#1a1a2e;background-color:var(--pattern-background)}@media screen{body{padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(64px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left))}.emoji-picker{padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left))}}@media screen and (height<=640px){body{padding-bottom:max(16px, env(safe-area-inset-bottom));flex-direction:column;gap:24px}.controls{flex-shrink:0;margin-top:auto}.footer{flex-shrink:0;margin-top:auto;position:static;transform:none}}