:root { color-scheme: dark; --bg:#101019; --surface:#1e1d2b; --line:#353346; --text:#f4f2fb; --muted:#aaa5bf; --accent:#b39bff; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; background:var(--bg); color:var(--text); font:16px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; overscroll-behavior:none; }
main { max-width:540px; margin:0 auto; padding:18px 18px calc(18px + env(safe-area-inset-bottom)); padding-top:calc(16px + max(env(safe-area-inset-top),var(--tg-content-safe-area-inset-top,0px))); }
header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
h1 { margin:2px 0 0; font-size:32px; font-weight:700; letter-spacing:-.8px; }
.eyebrow { margin:0; font-size:10px; font-weight:700; color:var(--muted); letter-spacing:1.7px; }
button { border:1px solid var(--line); color:var(--text); background:var(--surface); border-radius:13px; padding:14px 12px; font:600 15px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; cursor:pointer; min-height:48px; touch-action:manipulation; }
button:disabled { opacity:.4; cursor:default; }
button:focus-visible, textarea:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
button:active:not(:disabled) { filter:brightness(1.25); }
.quiet { padding:10px 14px; min-height:42px; background:transparent; }
.statusline { display:flex; align-items:center; gap:8px; min-height:38px; margin-top:10px; }
#dot { width:7px; height:7px; border-radius:100%; background:#817b90; flex:none; }
#dot.on { background:#9bdfbe; }
#status { font-size:13px; color:var(--muted); margin:0; }
.primary { background:var(--accent); color:#171024; border:none; width:100%; margin:6px 0 12px; }
.primary.active { background:#313749; color:#cae6dc; }
.primary.compact { margin:8px 0 0; }
.pad { position:relative; height:clamp(230px,39vh,350px); border:1px solid #645389; border-radius:20px; overflow:hidden; background:radial-gradient(ellipse at 50% 35%,#302343,#171520); touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.pad.disabled { border-color:var(--line); background:#171620; }
.padcenter { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; pointer-events:none; z-index:1; }
.cursor-mark { font-size:48px; font-weight:300; color:var(--accent); padding:0 0 4px; }
.padcenter strong { font-size:16px; font-weight:600; }
.padcenter span { font-size:12px; color:var(--muted); }
.gridlines { position:absolute; inset:0; opacity:.2; background-image:radial-gradient(#81729c 1px,transparent 1px); background-size:22px 22px; pointer-events:none; }
.clicks { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.wide { width:100%; margin-top:10px; }
.wide[aria-pressed=true] { background:#44315b; border-color:var(--accent); }
.sensitivity { display:flex; justify-content:space-between; margin-top:18px; font-size:12px; color:var(--muted); }
output { color:var(--accent); }
input[type=range] { width:100%; height:30px; accent-color:var(--accent); margin:4px 0; touch-action:pan-x; }
.help { margin:4px 0; line-height:1.5; text-align:center; color:var(--muted); font-size:12px; }
.keyboard-toggle { margin-top:14px; }
.keyboard-panel { margin-top:10px; border:1px solid var(--line); border-radius:16px; padding:12px; background:#171620; }
.keyboard-panel[hidden] { display:none; }
.text-form { margin:0; }
textarea { width:100%; resize:none; border:1px solid var(--line); border-radius:12px; background:#111019; color:var(--text); padding:12px; font:16px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.35; min-height:68px; }
textarea::placeholder { color:#777185; }
textarea:disabled { opacity:.45; }
.keys { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.keyboard-help { margin:10px 2px 0; font-size:11px; line-height:1.4; color:var(--muted); }
.notice { color:#ffccad; font-size:13px; line-height:1.45; margin:10px 0; min-height:0; }
.notice:empty { margin:0; }
.stop { width:100%; background:transparent; color:#f1b2b8; border-color:#60414c; margin-top:12px; }
.footer { margin:14px 0 0; font-size:11px; line-height:1.5; color:#787288; text-align:center; }
@media (max-height:720px) { main{padding-top:12px;} h1{font-size:27px;} .pad{height:205px;} button{min-height:44px; padding:12px;} .footer{margin-top:8px;} }