/* Clay grey, one pink for what you changed. Tahoma, the plainest screen sans. */
:root{--bg:#ecebe8;--ink:#1b1b1b;--pink:#ff1ccd;color:var(--ink);background:var(--bg);font:12px/1.3 Tahoma,Verdana,sans-serif;-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px}

#scene{position:fixed;inset:0;touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none}
#scene canvas{display:block;width:100%;height:100%}
#strings{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
#string{stroke:var(--ink);stroke-width:1}

.count{position:fixed;left:12px;top:calc(8px + env(safe-area-inset-top));margin:0;z-index:2;pointer-events:none;color:var(--pink);line-height:.85}
#pct{display:block;font:bold clamp(64px,22vw,150px)/.85 Tahoma,Verdana,sans-serif;letter-spacing:-.06em}
.count small{font-size:12px;text-transform:uppercase;color:var(--ink)}
#hint{position:fixed;left:12px;top:calc(env(safe-area-inset-top) + 42%);margin:0;z-index:2;pointer-events:none;text-transform:uppercase;font-size:11px}
#hint[hidden]{display:none}
#loading{position:fixed;inset:45% 0 auto;text-align:center;margin:0}

#tag{position:fixed;right:12px;top:calc(12px + env(safe-area-inset-top));z-index:3;background:#fff;border:1px solid var(--ink);width:176px}
#tag::before{content:"";position:absolute;left:50%;top:5px;width:7px;height:7px;margin-left:-4px;border-radius:50%;border:1px solid var(--ink);background:var(--bg)}
#tag-toggle{display:block;width:100%;text-align:left;padding:18px 10px 8px;min-height:44px}
#tag-toggle b{display:block;font-size:17px;letter-spacing:-.02em}
#tag-toggle span{font-size:11px}
#tag ul{list-style:none;margin:0;padding:0 10px 8px;display:none}
#tag.open ul{display:block}
#tag.open #tag-toggle span{visibility:hidden}
#tag li a{display:flex;align-items:center;min-height:32px;border-top:1px solid #0002;font-size:12px;text-decoration:none}
#tag li a:hover{color:var(--pink)}

.tools{position:fixed;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom));z-index:2;display:flex;flex-wrap:wrap;gap:6px;padding:0 12px}
.tools button{min-height:44px;padding:0 12px;background:#fff;border:1px solid var(--ink);font-size:12px}
.tools button[aria-pressed=true]{background:var(--ink);color:#fff}
#mode[aria-pressed=true]{background:var(--pink);border-color:var(--pink)}
.fine{position:fixed;left:12px;right:12px;bottom:calc(4px + env(safe-area-inset-bottom));margin:0;font-size:9px;z-index:2}