:root{--bg:#1e1f22;--panel:#2b2d31;--fg:#e6e6e6;--accent:#ed107b}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--fg);font-family:system-ui,sans-serif}#app{height:100vh;flex-direction:column;height:100dvh;display:flex}#toolbar{padding:8px 12px;padding-top:max(8px, env(safe-area-inset-top));padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right));background:var(--panel);flex-direction:column;align-items:stretch;gap:6px;display:flex}.tb-row{flex-wrap:wrap;align-items:center;gap:6px;min-height:34px;display:flex}.tb-group{flex-wrap:nowrap;flex:none;align-items:center;gap:4px;display:flex}.tb-spacer{flex:auto}#toolbar button{min-width:34px;height:34px;color:var(--fg);cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;font-size:16px;display:inline-flex}#toolbar button:hover{background:#3a3d42}#toolbar button[hidden]{display:none}#toolbar button.active{background:var(--accent)}#toolbar button svg{display:block}#toolbar button svg[hidden]{display:none}#toolbar button:disabled{opacity:.4;cursor:default}#toolbar button:disabled:hover{background:0 0}.sep{background:#45484e;width:1px;height:22px;margin:0 4px}#toolbar #palette{background:var(--bg);border-radius:999px;flex:none;align-items:center;gap:4px;padding:3px;display:flex;box-shadow:inset 0 0 0 1px #4a4d54}.swatch{cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;padding:0;display:inline-flex;box-shadow:inset 0 0 0 1.5px #80838a}.swatch:hover{box-shadow:inset 0 0 0 1.5px #b9bcc2}.swatch.active,.swatch.active:hover{box-shadow:inset 0 0 0 2px #fff}.swatch-check{fill:none;stroke:currentColor;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}#palette .swatch-check{display:none}#palette .swatch.active .swatch-check{display:block}#toolbar .swatch{border-radius:50%;width:28px;min-width:0;height:28px}#toolbar .swatch-check{width:14px;height:14px}#sizes{background:var(--bg);border-radius:10px;flex:none;gap:2px;padding:3px;display:flex}#toolbar #sizes button{min-width:28px;height:28px;color:var(--fg);cursor:pointer;background:0 0;border:none;border-radius:8px;font-size:13px;font-weight:600}#toolbar #sizes button:hover{background:#3a3d42}#toolbar #sizes button.active,#toolbar #sizes button.active:hover{background:var(--accent);color:#fff}#update-notice{padding:8px 12px;padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right));background:color-mix(in srgb, var(--accent) 12%, var(--panel));border-bottom:1px solid color-mix(in srgb, var(--accent) 28%, var(--panel));flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:12px;display:flex}#update-notice[hidden]{display:none}#update-notice #update-notice-message{min-width:0;color:var(--fg);flex:0 auto;font-size:13px}#update-notice button{height:34px;color:var(--fg);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:none;padding:0 12px;font-size:13px;font-weight:600}#update-notice button:hover{background:#3a3d42}#update-notice #update-notice-download{background:var(--accent);color:#fff}#update-notice #update-notice-download:hover{background:var(--accent);opacity:.9}#update-notice #update-notice-dismiss{width:34px;color:var(--fg);margin-left:-8px;padding:0;font-size:15px}#update-notice #update-notice-dismiss:hover{background:color-mix(in srgb, var(--fg) 18%, transparent)}body.web-shell #toolbar{padding-left:max(10px, env(safe-area-inset-left));padding-right:max(10px, env(safe-area-inset-right))}body.web-shell #toolbar button{min-width:44px;height:44px}body.web-shell .tb-row{min-height:44px}body.web-shell .tb-row-main{justify-content:space-between}body.web-shell .tb-group-tools{grid-template-columns:repeat(8,minmax(0,1fr));gap:2px;width:100%;margin-inline:auto;display:grid}body.web-shell #toolbar .tb-group-tools>button{width:100%;min-width:0}body.web-shell #toolbar #color-chip-btn{background:var(--bg);border:1px solid #45484e;border-radius:8px;gap:4px;width:auto;min-width:44px;padding:0 4px}@media (max-height:500px) and (min-width:560px){body.web-shell #toolbar{flex-flow:wrap;align-items:center}body.web-shell .tb-row{flex:0 auto}body.web-shell .tb-group-tools{width:auto;display:flex}body.web-shell #toolbar .tb-group-tools>button{width:auto;min-width:44px}}#badge-bar{padding:10px 12px;padding-bottom:max(10px, env(safe-area-inset-bottom));padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right));background:var(--panel);border-top:1px solid #45484e;flex-direction:column;gap:8px;display:flex}#badge-bar[hidden],body.badge-bar-open #share-bar{display:none}#badge-bar-header{justify-content:flex-end;display:flex}#badge-bar-close{width:44px;height:44px;color:var(--fg);cursor:pointer;background:0 0;border:none;border-radius:8px;font-size:18px}#badge-bar-close:hover{background:#3a3d42}#badge-digits{grid-template-columns:repeat(5,minmax(44px,1fr));gap:6px;width:100%;max-width:420px;margin:0 auto;display:grid}#badge-digits button,#badge-num-chip{min-height:44px;color:var(--fg);cursor:pointer;background:0 0;border:1px solid #45484e;border-radius:8px;font-size:15px;font-weight:700}#badge-digits button:hover,#badge-num-chip:hover{background:#3a3d42}#badge-digits button.active,#badge-num-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}#badge-num-row{grid-template-columns:repeat(5,minmax(44px,1fr));gap:6px;width:100%;max-width:420px;margin:0 auto;display:grid}#badge-num-input{background:var(--bg);min-width:0;min-height:44px;color:var(--fg);border:1px solid #45484e;border-radius:6px;grid-column:1/5;padding:0 10px;font-size:16px}#badge-num-chip{grid-column:5}#badge-num-chip:disabled{opacity:.4;cursor:default}#badge-num-chip:disabled:hover{background:0 0}#badge-num-chip[data-len="3"]{font-size:12px}#badge-num-chip[data-len="4"]{font-size:10px}#stage{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;flex:1;place-items:center;display:grid;position:relative;overflow:auto}#canvas{touch-action:none;-webkit-touch-callout:none;box-shadow:0 4px 24px #00000080}body.web-shell #stage{padding:16px 16px 24px}#stage.empty #canvas{display:none}#stage.empty{touch-action:pan-y;align-content:safe center}#stage:not(.empty){min-height:0;overflow:clip}#welcome{text-align:center;color:#9aa0a6}.welcome-mark{place-items:center;margin:0 auto 16px;display:grid}.welcome-mark>*{grid-area:1/1}.welcome-name{letter-spacing:.14em;text-transform:uppercase;color:#c9cdd2;margin:0 0 18px;font-size:15px;font-weight:600}.welcome-hint{margin:0;font-size:14px;line-height:2.1}#welcome-paste{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;margin:16px auto 0;padding:10px 22px;font-size:14px;font-weight:600;display:block}#welcome-paste:hover{opacity:.9}#welcome-pick{color:var(--fg);cursor:pointer;background:0 0;border:1px solid #45484e;border-radius:8px;margin:10px auto 0;padding:10px 22px;font-size:14px;font-weight:600;display:block}#welcome-pick:hover{background:#3a3d42}#welcome-paste[hidden],#welcome-pick[hidden]{display:none}@keyframes paste-attention{0%,to{box-shadow:0 0 #ed107b8c}50%{box-shadow:0 0 0 10px #ed107b00}}#welcome-paste.attention{animation:1.2s ease-in-out 3 paste-attention}#paste-status{z-index:4;background:var(--panel);max-width:calc(100% - 32px);color:var(--fg);text-align:center;border:1px solid #45484e;border-radius:999px;margin:0;padding:8px 16px;font-size:12px;line-height:1.4;position:absolute;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #00000059}.welcome-privacy{color:#7d828a;margin:18px 0 2px;font-size:12px}.welcome-version{color:#5c6066;margin:0;font-size:11px}#welcome-install{color:#7d828a;max-width:30em;margin:14px auto 4px;font-size:12px;line-height:1.7}#welcome-install strong{color:#c9cdd2;font-weight:600}@media (max-height:500px){#welcome-install{display:none}body.web-shell .welcome-name{margin-bottom:8px}body.web-shell .welcome-hint{line-height:1.4}}@media (max-height:500px),(max-width:360px){body.web-shell .welcome-mark{display:none}}body.web-shell.badge-bar-open #stage.empty .welcome-mark{display:none}.welcome-hint strong{color:#c9cdd2}#stage:not(.empty) #welcome{display:none}.crop-controls{padding:8px 12px;padding-bottom:max(8px, env(safe-area-inset-bottom));padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right));background:var(--panel);border-top:1px solid #45484e;align-items:center;gap:6px;display:flex}body.crop-bar-open #share-bar,body.crop-bar-open #badge-bar,body.badge-bar-open .crop-controls{display:none}.crop-controls button{background:var(--panel);width:44px;height:44px;color:var(--fg);cursor:pointer;border:1px solid #45484e;border-radius:6px;justify-content:center;align-items:center;font-size:14px;display:inline-flex}.crop-controls button:hover{background:#3a3d42}.crop-bounds{flex:none;display:flex}.crop-bounds button:first-child{border-radius:6px 0 0 6px}.crop-bounds button:last-child{border-left:none;border-radius:0 6px 6px 0}.crop-bounds button[aria-pressed=true],.crop-bounds button[aria-pressed=true]:hover{background:var(--accent);border-color:var(--accent);color:#fff}.crop-controls svg{display:block}.crop-controls .crop-apply,.crop-controls .crop-cancel{flex:1 1 0;width:auto;min-width:44px}.crop-controls .crop-apply{color:#4caf50}.crop-controls .crop-cancel{color:var(--fg)}.selection-delete{z-index:6;background:var(--panel);color:#ff7b72;cursor:pointer;border:1px solid #45484e;border-radius:6px;justify-content:center;align-items:center;min-width:30px;height:30px;display:flex;position:absolute}.selection-delete:hover{background:#3a3d42}.text-editor{white-space:pre;text-shadow:0 0 3px #ffffffe6,0 0 3px #ffffffe6;-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;background:0 0;border:0;outline:none;min-width:1em;margin:0;padding:0;line-height:1.2;position:absolute}kbd{background:var(--panel);border:1px solid #45484e;border-bottom-width:2px;border-radius:5px;padding:2px 7px;font-family:inherit}#share-bar{--share-bar-pb:max(8px, env(safe-area-inset-bottom));padding:8px 12px;padding-bottom:var(--share-bar-pb);padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right));background:var(--panel);grid-template-columns:1fr auto 1fr;align-items:center;display:grid}#drag-tab{margin-bottom:calc(-1 * var(--share-bar-pb));background:var(--accent);cursor:grab;-webkit-user-select:none;user-select:none;border-radius:8px 8px 0 0;flex-direction:column;grid-column:2;align-self:stretch;align-items:center;gap:2px;padding:3px 16px 8px;font-weight:600;line-height:1;display:flex;box-shadow:inset 0 1px #ffffff24}#drag-tab[hidden]{display:none}#drag-tab .drag-handle{background:radial-gradient(circle at 1.5px 1.5px,#fff 1.3px,#0000 1.6px) 0 0/6px 4.5px;width:21px;height:8px}#drag-tab:active{cursor:grabbing}#share-actions{grid-column:3;justify-self:end;gap:8px;display:flex}#drag-tab[hidden]~#share-actions{grid-column:1;justify-self:start}#copy,#save{color:var(--fg);cursor:pointer;background:0 0;border:1px solid #45484e;border-radius:6px;padding:6px 14px}#copy:hover,#save:hover{background:#3a3d42}#copy svg,#save svg{display:block}.modal-overlay{z-index:10;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-overlay[hidden]{display:none}.modal{background:var(--panel);max-width:420px;color:var(--fg);border-radius:10px;padding:20px 24px;box-shadow:0 8px 32px #00000080}.modal h2{margin:0 0 10px;font-size:16px}.modal p{margin:0 0 16px;font-size:14px;line-height:1.5}.modal-actions{justify-content:flex-end;gap:8px;display:flex}.modal-actions button{color:var(--fg);cursor:pointer;background:0 0;border:1px solid #45484e;border-radius:6px;padding:6px 14px}.modal-actions button:hover{background:#3a3d42}#permission-open-settings{background:var(--accent);border-color:var(--accent)}#color-chip{vertical-align:middle;background:var(--accent);border:1px solid #80838a;border-radius:50%;width:18px;height:18px;display:inline-block}#size-chip{color:var(--fg);font-size:13px;font-weight:700;line-height:1}#color-sheet{z-index:8;background:#00000073;align-items:flex-end;display:flex;position:fixed;inset:0}#color-sheet[hidden]{display:none}.sheet-panel{background:var(--panel);width:100%;padding:12px 16px;padding-bottom:max(16px, env(safe-area-inset-bottom));border-radius:16px 16px 0 0;animation:.18s ease-out sheet-up}.sheet-grip{background:#45484e;border-radius:2px;width:36px;height:4px;margin:0 auto 12px;display:block}#color-sheet #palette{background:var(--bg);border-radius:16px;grid-template-columns:repeat(4,1fr);place-items:center;gap:10px;padding:8px;display:grid;box-shadow:inset 0 0 0 1px #4a4d54}#color-sheet .swatch{width:44px;height:44px}#color-sheet .swatch-check{width:20px;height:20px}#color-sheet #sizes{width:100%;margin-top:14px}#color-sheet #sizes button{min-width:44px;height:44px;color:var(--fg);cursor:pointer;background:0 0;border:none;border-radius:8px;flex:1 1 0;font-size:15px;font-weight:600}#color-sheet #sizes button:hover{background:#3a3d42}#color-sheet #sizes button.active,#color-sheet #sizes button.active:hover{background:var(--accent);color:#fff}@keyframes sheet-up{0%{transform:translateY(100%)}to{transform:none}}@media (prefers-reduced-motion:reduce){.sheet-panel{animation:none}}