:root{--md-sys-color-primary: #4caf50;--md-sys-color-on-primary: #ffffff;--md-sys-color-primary-container: #e8f5e9;--md-sys-color-on-primary-container: #1b5e20;--md-sys-color-surface: #fdfdfd;--md-sys-color-surface-variant: #e1e2ec;--md-sys-color-outline: #74777f;--md-sys-color-background: #fdfdfd;--md-sys-color-on-surface: #1a1c1e;--md-ref-typeface-brand: "Roboto", sans-serif;--grid-line-color: #e0e0e0;--success-flash-shadow: rgba(76, 175, 80, .6)}.brand,.list-area,.modal,button,.icon-btn,.icon-btn-primary{-webkit-user-select:none;user-select:none}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--md-ref-typeface-brand);background-color:var(--md-sys-color-background);color:var(--md-sys-color-on-surface);display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}header{padding:8px 12px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;background-color:var(--md-sys-color-surface);box-shadow:0 1px 3px #0000001f;z-index:100;position:fixed;top:0;left:0;width:100%;height:auto}header>*{margin:4px}.brand{display:flex;align-items:center;font-weight:700;font-size:20px;color:var(--md-sys-color-primary);white-space:nowrap;order:1}header>div:last-child{order:2;margin-left:auto}.input-group{display:flex;align-items:center;flex:1 1 100%;max-width:100%;justify-content:center;order:3}.input-group>*+*{margin-left:8px}#gen-btn{display:none}.input-group.focused #gen-btn{display:flex;animation:fadeIn .2s}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@media(min-width:600px){header{flex-wrap:nowrap;height:64px;margin:0;width:100%;padding:8px 16px}header>*{margin:0}header>*+*{margin-left:16px}.brand{order:0}header>div:last-child{order:0;margin-left:0}.input-group{order:0;flex:1;width:auto;max-width:500px;margin-top:0}}.input-wrapper{position:relative;width:100%;max-width:400px}input[type=text]{width:100%;padding:8px 48px 8px 12px;font-size:16px;border:1px solid var(--md-sys-color-outline);border-radius:20px;outline:none;background-color:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);transition:border-color .2s,box-shadow .2s;height:40px;-webkit-appearance:none;appearance:none;box-shadow:none}input[type=text]:focus{border-color:var(--md-sys-color-primary);border-width:2px;padding:7px 47px 7px 11px}.icon-btn{background:transparent;border:none;cursor:pointer;padding:8px;border-radius:50%;color:var(--md-sys-color-on-surface);display:flex;align-items:center;justify-content:center;transition:background-color .2s;-webkit-tap-highlight-color:transparent}.icon-btn:hover{background-color:#0000000d}.icon-btn svg{width:24px;height:24px;stroke-width:2}.icon-btn-primary{background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border:none;cursor:pointer;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0003;transition:transform .1s,box-shadow .2s;flex-shrink:0;-webkit-tap-highlight-color:transparent}.icon-btn-primary:active{transform:scale(.95)}.clear-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--md-sys-color-outline);padding:4px;display:none}.clear-btn:hover{color:var(--md-sys-color-on-surface)}.list-area{position:fixed;bottom:0;left:0;width:100%;height:80px;background-color:var(--md-sys-color-surface);border-top:1px solid var(--md-sys-color-outline);overflow-x:auto;overflow-y:hidden;display:flex;flex-direction:row;align-items:center;padding:0 16px;box-shadow:0 -1px 3px #0000000d;z-index:90}.list-area>*+*{margin-left:12px}.char-item{width:56px;height:56px;flex-shrink:0;border-radius:12px;cursor:pointer;transition:all .2s;font-size:24px;display:flex;align-items:center;justify-content:center;color:var(--md-sys-color-on-surface);border:1px solid var(--md-sys-color-outline);background-color:var(--md-sys-color-surface);padding:0;-webkit-tap-highlight-color:transparent}.char-item:hover{background-color:var(--md-sys-color-surface-variant);transform:translateY(-2px);box-shadow:0 2px 4px #0000001a}.char-item.active{background-color:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);font-weight:700;border-color:var(--md-sys-color-primary)}.toast{position:absolute;top:80px;left:50%;transform:translate(-50%);background-color:#323232;color:#fff;padding:12px 24px;border-radius:24px;font-size:14px;opacity:.9;z-index:100;transition:opacity .3s}.toast.hidden{opacity:0;pointer-events:none}.hidden{display:none!important}.control-bar{display:flex;justify-content:center;padding:4px;width:100%}.control-group{display:flex;background-color:var(--md-sys-color-surface);padding:4px 12px;border-radius:32px;box-shadow:0 2px 6px #0000001a}.control-group>*+*{margin-left:8px}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background-color:var(--md-sys-color-surface);padding:24px;border-radius:16px;width:90%;max-width:400px;box-shadow:0 4px 12px #0003;display:flex;flex-direction:column;max-height:90vh}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-shrink:0}.modal-body{overflow-y:auto;flex:1;min-height:0;padding-right:4px}.modal-header h2{font-size:20px;margin:0}.setting-item{margin-bottom:16px;display:flex;flex-direction:column}.setting-item>*+*{margin-top:8px}.setting-item label{font-size:14px;color:var(--md-sys-color-on-surface);opacity:.8}.setting-item input[type=color]{width:100%;height:40px;border:none;cursor:pointer;background:none;-webkit-appearance:none;appearance:none;padding:0;border-radius:4px;overflow:hidden}.setting-item input[type=color]::-webkit-color-swatch-wrapper{padding:0}.setting-item input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}.setting-item input[type=color]::-moz-color-swatch{border:none;border-radius:4px}.setting-item select{width:100%;height:40px;padding:8px 32px 8px 12px;border-radius:4px;border:1px solid var(--md-sys-color-outline);background-color:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);font-size:16px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2374777f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 8px center;background-size:16px;cursor:pointer}.setting-item select:focus{border-color:var(--md-sys-color-primary);outline:none}.footer-credit{margin-top:24px;text-align:center;font-size:12px;color:var(--md-sys-color-outline);width:100%}.footer-credit a{color:var(--md-sys-color-primary);text-decoration:none}.footer-credit a:hover{text-decoration:underline}@keyframes flash{0%{box-shadow:0 0 0 0 var(--success-flash-shadow)}70%{box-shadow:0 0 0 10px #0000}to{box-shadow:0 0 #0000}}.success-flash{animation:flash .5s ease-out}.debug-info{position:absolute;top:0;right:0;background-color:#000000b3;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;font-family:monospace;z-index:20;pointer-events:none}.target-wrapper{position:relative;display:flex;justify-content:center}.debug-info.hidden{display:none}main{display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;overflow:hidden;position:relative;padding-top:110px;padding-bottom:80px;box-sizing:border-box}.display-area{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#fafafa;position:relative;overflow:hidden;padding:4px;width:100%;height:100%}.character-target{position:relative;background-position:center;background-repeat:no-repeat;border:2px solid var(--md-sys-color-primary);box-shadow:0 4px 6px #0000001a;flex-shrink:0;transition:box-shadow .3s,border-color .3s}.mode-section{display:flex;flex-direction:column;align-items:center;width:100%;flex:1;justify-content:center;min-width:0;min-height:0}.mode-section>*+*{margin-top:4px}.mode-section.horizontal-layout{flex-direction:row}.mode-section.horizontal-layout>*+*{margin-top:0;margin-left:8px}.mode-section.horizontal-layout .control-bar{width:auto;padding:0}.mode-section.horizontal-layout .control-group{flex-direction:column;padding:16px 8px;width:auto}.mode-section.horizontal-layout .control-group>*+*{margin-left:0;margin-top:8px}@media(min-width:600px){main{flex-direction:row;padding-top:64px;padding-bottom:0;padding-right:90px}.list-area{position:fixed;top:64px;right:0;bottom:0;left:auto!important;width:90px;height:auto;border-top:none;border-left:1px solid var(--md-sys-color-outline);box-shadow:-1px 0 3px #0000000d;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:flex-start;overflow-y:auto;overflow-x:hidden;padding:16px 0}.list-area>*+*{margin-left:0;margin-top:16px}.list-area>.char-item+.char-item{margin-top:16px}}.mode-switch-btn{background-color:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border:1px solid var(--md-sys-color-primary)}.mode-switch-btn:hover{background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}@media(min-width:800px),(min-height:900px){.mode-section{display:flex!important;justify-content:center;width:100%}.display-area{flex-direction:row;padding:4px;align-items:stretch;justify-content:space-evenly}.display-area>*+*{margin-top:0;margin-left:8px}.control-bar{margin-top:16px}.mode-switch-btn{display:none!important}}@media(min-height:900px)and (orientation:portrait){.display-area{flex-direction:column;padding:4px;align-items:stretch}.display-area>*+*{margin-left:0;margin-top:4px}.mode-section{flex:1;min-height:0}.mode-section>*+*{margin-top:4px}}body.zen-mode header{position:fixed;top:0;top:constant(safe-area-inset-top);top:env(safe-area-inset-top,0px);right:0;right:constant(safe-area-inset-right);right:env(safe-area-inset-right,0px);left:auto;width:auto;background:transparent;box-shadow:none;pointer-events:none;z-index:100;padding:0}body.zen-mode header .brand,body.zen-mode header .input-group,body.zen-mode header #settings-btn,body.zen-mode header #toast-msg{display:none!important}body.zen-mode #zen-mode-btn{pointer-events:auto;background-color:var(--md-sys-color-surface);box-shadow:0 2px 4px #0000001a;margin:8px}body.zen-mode .list-area{display:none!important}body.zen-mode main{height:100vh;height:100dvh;padding:0}body.zen-mode .display-area{padding:0;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom);overflow:hidden}