:root{--bg:#000;--fg:#fff;--vvh:100dvh;--vvtop:0px;--pad:16px;--font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Noto Color Emoji"}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--fg);font-family:var(--font);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0;position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}#stage{left:0;right:0;top:var(--vvtop);height:var(--vvh);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);touch-action:none;-webkit-user-select:none;user-select:none;flex-direction:column;display:flex;position:fixed}#area{min-height:0;padding:var(--pad);flex:1;justify-content:center;align-items:center;display:flex}#input,#display,#measure{font-family:var(--font);letter-spacing:-.01em;text-align:center;white-space:pre-wrap;font-weight:800;line-height:1.1}#input{resize:none;width:100%;color:var(--fg);caret-color:var(--fg);touch-action:manipulation;-webkit-user-select:text;user-select:text;background:0 0;border:0;outline:none;margin:0;padding:0;display:block;overflow:hidden}#input::placeholder{color:var(--fg);opacity:.35}#measure{visibility:hidden;overflow-wrap:normal;word-break:normal;position:fixed;top:0;left:-10000px}#display{padding:calc(env(safe-area-inset-top) + var(--pad)) calc(env(safe-area-inset-right) + var(--pad)) calc(env(safe-area-inset-bottom) + var(--pad)) calc(env(safe-area-inset-left) + var(--pad));color:var(--fg);pointer-events:none;justify-content:center;align-items:center;display:none;position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden}#display .static{overflow-wrap:normal;flex:none}#display .ticker{white-space:pre;will-change:transform;position:absolute;top:50%;left:0}#hint,#toast{text-align:center;opacity:.5;pointer-events:none;margin:0;font-size:15px;font-weight:600;position:absolute;left:0;right:0}#hint{font-size:22px;display:none;top:50%;transform:translateY(-50%)}#toast{bottom:calc(env(safe-area-inset-bottom) + 18px);border:1.5px solid color-mix(in srgb, var(--fg) 30%, transparent);background:var(--bg);opacity:0;border-radius:999px;width:-moz-fit-content;width:fit-content;max-width:calc(100% - 32px);margin:0 auto;padding:7px 14px;transition:opacity .3s}#toast.on{opacity:.9}#recent{scrollbar-width:none;touch-action:pan-x;gap:8px;padding:0 12px 10px;display:none;overflow-x:auto}#recent::-webkit-scrollbar{display:none}#palette{scrollbar-width:none;touch-action:pan-x;gap:10px;padding:0 12px 10px;display:none;overflow-x:auto}#palette::-webkit-scrollbar{display:none}#palette .pick{background:var(--pick-bg);width:48px;min-width:48px;height:48px;color:var(--pick-fg);border-radius:50%;padding:0;font-size:17px;font-weight:800}#palette .pick[aria-pressed=true]{border:3px solid var(--fg)}#bar{align-items:center;gap:6px;padding:8px 12px 10px;display:flex}button,.chip{border:1.5px solid color-mix(in srgb, var(--fg) 30%, transparent);min-width:40px;height:40px;color:var(--fg);font:600 15px/1 var(--font);cursor:pointer;touch-action:manipulation;background:0 0;border-radius:20px;flex:none;justify-content:center;align-items:center;padding:0 12px;display:inline-flex}.chip{text-overflow:ellipsis;white-space:nowrap;max-width:70vw;line-height:37px;display:block;overflow:hidden}.chip.muted{opacity:.55}button svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}button[aria-pressed=true]{background:color-mix(in srgb, var(--fg) 18%, transparent)}button.primary{background:var(--fg);color:var(--bg);border-color:var(--fg);margin-left:auto;padding:0 18px}#theme{-webkit-touch-callout:none;width:40px;padding:0}.swatch{background:var(--fg);width:20px;height:20px;box-shadow:0 0 0 3px var(--bg), 0 0 0 4.5px var(--fg);border-radius:50%}#zoom{display:none}#info{top:calc(env(safe-area-inset-top) + 10px);right:calc(env(safe-area-inset-right) + 10px);opacity:.7;width:36px;min-width:36px;height:36px;padding:0;font:700 18px/1 Georgia,Times New Roman,serif;position:absolute}body.show #info,body.has-text #info,.install{display:none}body.can-install #install-app{display:flex}body.can-install.idle:not(.has-text) #install-chip{display:inline-flex}#install-chip{top:calc(env(safe-area-inset-top) + 10px);right:calc(env(safe-area-inset-right) + 10px + 36px + 8px);white-space:nowrap;opacity:.7;gap:5px;height:36px;padding:0 13px 0 10px;font-size:15px;position:absolute}#install-chip svg{width:17px;height:17px}#about #install-app{width:100%;margin:0 0 10px}body.can-install #about .tip{display:none}@media (display-mode:standalone),(display-mode:fullscreen){#about .tip{display:none}}#about{border:1.5px solid color-mix(in srgb, var(--fg) 30%, transparent);background:var(--bg);width:min(420px,100vw - 32px);max-height:calc(100dvh - 32px);color:var(--fg);font:400 16px/1.45 var(--font);touch-action:pan-y;border-radius:20px;padding:24px 22px 18px;overflow:auto}#about::backdrop{background:#000c}#about h2{letter-spacing:-.01em;margin:0 0 4px;font-size:28px;font-weight:800}#about .lead{opacity:.75;margin:0 0 14px}#about ul{margin:0 0 14px;padding-left:1.1em}#about li{margin-bottom:6px}#about .keys{opacity:.8;flex-wrap:wrap;gap:6px 14px;margin:0 0 14px;font-size:14px;font-weight:600;display:flex}#about .keys .dot{border:2px solid var(--fg);vertical-align:-1px;border-radius:50%;width:11px;height:11px;display:inline-block}#about .keys span{align-items:center;gap:5px;display:inline-flex}#about .keys svg{fill:none;stroke:currentColor;stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round;width:14px;height:14px}#about .tip{opacity:.65;margin:0 0 18px;font-size:14px}#about .option{border:1.5px solid color-mix(in srgb, var(--fg) 30%, transparent);cursor:pointer;border-radius:14px;align-items:center;gap:14px;margin:0 0 16px;padding:12px 14px;display:flex}#about .option>span{flex-direction:column;flex:1;gap:2px;font-size:15px;display:flex}#about .option small{opacity:.7;font-size:13px}#about .option input{-webkit-appearance:none;appearance:none;border:1.5px solid color-mix(in srgb, var(--fg) 40%, transparent);cursor:pointer;background:0 0;border-radius:14px;flex:none;width:46px;height:28px;margin:0;transition:background .2s;position:relative}#about .option input:before{content:"";background:color-mix(in srgb, var(--fg) 60%, transparent);border-radius:50%;width:19px;height:19px;transition:transform .2s,background .2s;position:absolute;top:3px;left:3px}#about .option input:checked{background:var(--fg);border-color:var(--fg)}#about .option input:checked:before{background:var(--bg);transform:translate(18px)}#about .option input:focus-visible{outline:2px solid var(--fg);outline-offset:2px}#about form button{width:100%;margin:0}#about .credit{text-align:center;opacity:.6;margin:16px 0 0;font-size:13px}#about .credit span{color:#ff2bd6}#about a{color:inherit;font-weight:700}body.idle #hint{display:block}body.idle #input,body.show #input{opacity:0}body.idle #bar,body.idle #recent,body.idle #palette,body.show #bar,body.show #recent,body.show #palette{display:none}body.edit.palette-open #palette,body.show #display,body.edit.recent-open #recent{display:flex}body.zoomed #zoom{display:inline-flex}
