html,body{margin:0;height:100%;overflow:hidden;background:#ffe9f0;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif}
#cv{display:block;touch-action:none;cursor:pointer}
#toast{position:fixed;left:50%;top:16%;transform:translate(-50%,-10px) scale(.9);opacity:0;transition:.25s;pointer-events:none;
  background:#ff7aa2;color:#fff;font-weight:900;font-size:22px;padding:10px 22px;border-radius:999px;box-shadow:0 6px 20px rgba(255,120,160,.4)}
#toast.on{opacity:1;transform:translate(-50%,0) scale(1)}
#over{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,230,238,.72);backdrop-filter:blur(3px);overflow:auto;touch-action:pan-y}
#over[hidden]{display:none}
.panel{background:#fff;border-radius:26px;padding:20px 22px 18px;width:min(88vw,380px);text-align:center;box-shadow:0 12px 40px rgba(230,120,160,.3);margin:16px auto}
.title{font-size:28px;font-weight:900;color:#ff7aa2;margin:2px 0}
.score{font-size:56px;font-weight:900;color:#fff;-webkit-text-stroke:6px #ff8fb1;paint-order:stroke fill;line-height:1.1}
.best{color:#9a5a74;font-size:14px;margin:4px 0 10px}
.shareimg{width:100%;border-radius:16px;display:block;-webkit-touch-callout:default;user-select:auto;max-height:52vh;object-fit:contain}
.row{display:flex;gap:10px;justify-content:center;margin-top:12px}
.btn{flex:1;display:inline-block;border:0;border-radius:999px;padding:12px 0;font-size:17px;font-weight:800;background:#ff7aa2;color:#fff;text-decoration:none;cursor:pointer;font-family:inherit}
.btn.alt{background:#8fd3ff}
.btn.again{background:#6fcf8a;margin-top:12px;width:100%}
.tip{color:#9a5a74;font-size:12px;margin:8px 0 0}
#safe{position:fixed;top:0;left:0;width:0;height:env(safe-area-inset-top,0px);pointer-events:none}
#styles{position:fixed;display:flex;gap:0;background:#fff;border:2px solid #e6a0b8;border-radius:999px;padding:3px;z-index:5;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#styles button{display:flex;align-items:center;gap:5px;height:40px;min-width:76px;padding:0 12px 0 8px;border:0;border-radius:999px;background:transparent;color:#9a5a74;
  font:800 14px/1 inherit;font-family:inherit;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#styles button canvas{width:24px;height:24px;pointer-events:none}
#styles button[aria-pressed="true"]{background:#ff7aa2;color:#fff;box-shadow:inset 0 0 0 2px #e05a86}
#styles button:focus-visible{outline:2px solid #9a5a74;outline-offset:1px}
#styles.land{flex-direction:column;border-radius:20px}
#styles.land button{border-radius:16px}
#preview{position:fixed;width:220px;height:150px;box-sizing:border-box;padding:8px 10px;background:#fff;border:2px solid #e6a0b8;border-radius:18px;z-index:6;
  box-shadow:0 8px 24px rgba(230,120,160,.3);pointer-events:none;-webkit-user-select:none;user-select:none}
#preview[hidden]{display:none}
#preview canvas{display:block;width:200px;height:110px}
#preview .cap{font:800 12px/1 inherit;font-family:inherit;color:#9a5a74;margin-bottom:6px}
#preview::after{content:"";position:absolute;left:calc(var(--ax,110px) - 8px);bottom:-9px;border:8px solid transparent;border-bottom:0;border-top-color:#e6a0b8}
#preview.below::after{top:-9px;bottom:auto;border:8px solid transparent;border-top:0;border-bottom-color:#e6a0b8}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}