*{-webkit-tap-highlight-color:transparent}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0;height:100dvh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.full-screen{margin:0;height:100dvh;width:100vw;overflow:hidden;touch-action:none}.scroll-vertical{max-height:calc(100% - 3.5rem);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.scroll-vertical::-webkit-scrollbar{display:none}.vertical-container{display:flex;flex-direction:column;height:100%;width:100%}.flex-center{display:flex;justify-content:center;align-items:center}.flex-row{display:flex;gap:.5rem}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;justify-content:space-between;align-items:center}.fade-transition{transition:opacity .3s ease}.card{background:#ffffff20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:.75rem;margin:.5rem;box-shadow:0 .0625rem .1875rem #00000014}.primary-color{color:#fff}.bold{font-weight:600}.app-container{display:flex;flex-direction:column;height:100dvh;padding:1.2rem;max-width:75rem;margin:0;box-sizing:border-box}.app-title{font-size:2rem;margin-bottom:2vh;letter-spacing:-.03125rem;flex-shrink:0}@media(max-width:480px){.flex-row{gap:.375rem}}.infobox{text-align:center;margin:2rem;padding:2rem;background:#ffffff1a;border-radius:10px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}h1{font-size:3rem;margin:0}@media screen and not (min-width:80rem){h1{font-size:2rem;margin:0}}p{font-size:1.2rem;margin-top:1rem}.masked{-webkit-mask-image:linear-gradient(to right,transparent 0%,black 10%,black 90%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,black 10%,black 90%,transparent 100%)}.ruler{margin-top:0;background-image:url(/ruler.svg);background-repeat:repeat-x;background-size:auto 100%;background-position-x:center;height:25px;width:100vw}.modern-button{padding:.75rem 2rem;background:#ffffff1a;color:#fff;border:1.5px solid rgba(255,255,255,.8);border-radius:.7rem;font-size:1.1rem;font-weight:700;cursor:pointer;box-shadow:0 2px 8px #1e40af1a;transition:background .2s,color .2s,border .2s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.modern-button:active{background:#ffffff52;color:#e3e3e3;border-color:#fff}.modern-button-active{background:#ffffffa3;color:#3e3e3e;border-color:#fff}.modern-button:hover{background:#ffffff47;color:#fff;border-color:#fff}.modern-button:disabled,.modern-button[aria-disabled=true]{background:#c8c8c82e;color:#aaa;border-color:#ddd;cursor:not-allowed;opacity:.6;box-shadow:none;pointer-events:none}.finger-tracker-container svg polyline{filter:url(#glow);stroke-linecap:round;stroke-linejoin:round}.finger-tracker-container{position:relative;width:100vw;height:100vh;overflow:hidden}.finger-circle{width:50px;height:50px;background:transparent;border:2px solid #FFFFFF60;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);transition:background .2s;animation:finger-pulse 1s infinite cubic-bezier(.4,0,.2,1);position:absolute;z-index:1}.finger-circle:after{content:"";position:absolute;left:50%;top:50%;width:100%;height:100%;border-radius:50%;background:#ffffff40;transform:translate(-50%,-50%) scale(1);opacity:.7;pointer-events:none;z-index:0;animation:finger-ripple 1s infinite cubic-bezier(.4,0,.2,1)}@keyframes finger-ripple{0%{transform:translate(-50%,-50%) scale(1);opacity:.7}70%{transform:translate(-50%,-50%) scale(2.2);opacity:.1}to{transform:translate(-50%,-50%) scale(2.5);opacity:0}}@keyframes finger-pulse{0%{box-shadow:0 0 #ffffff4d;opacity:1;transform:translate(-50%,-50%) scale(1)}60%{box-shadow:0 0 16px 16px #ffffff1a;opacity:.7;transform:translate(-50%,-50%) scale(1.12)}to{box-shadow:0 0 #fff0;opacity:1;transform:translate(-50%,-50%) scale(1)}}.button{flex:1;min-width:0;container-type:inline-size;padding:.8vh .3rem;border:1.5px solid rgba(255,255,255,.8);border-radius:.7rem;background:#ffffff1a;color:#fff;font-size:.8rem;font-weight:700;font-family:inherit;cursor:pointer;transition:all .2s ease;gap:.5rem;box-shadow:0 2px 8px #1e40af1a;transition:background .2s,color .2s,border .2s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.button:hover{background:#ffffff47;color:#fff;border-color:#fff}.button:active{background:#ffffff52;color:#e3e3e3;border-color:#fff}.button{text-align:center}.button-icon{width:2ex;height:2ex;flex-shrink:0}.button-label{white-space:nowrap}@container (max-width: 4rem){.button-label{display:none}}@media(max-width:768px){.button{font-size:.8rem}.toast{font-size:.85rem;padding:1vh 1.25rem}}@media(max-width:480px){.button{font-size:.75rem}}.keycap{background:#404040;border:0px solid #303030;corner-shape:squircle;border-radius:90px;box-shadow:inset 0 0 15px #0000004d,0 0 10px #40404040;width:140px;height:150px;margin:0;padding:0;font-family:Segoe UI,Arial,sans-serif;cursor:pointer;transition:box-shadow .18s cubic-bezier(.4,1.6,.6,1)}.keycap:active{box-shadow:inset 0 0 100px #303030a0}.keycap-border{background:#303030;display:inline-block;position:relative;padding:4px 15px 16px;border:3px solid #303030;border-radius:30px;box-shadow:0 0 60px #00000080;transition:box-shadow .18s cubic-bezier(.4,1.6,.6,1);outline:none;-webkit-tap-highlight-color:transparent}.keycap-border:active{box-shadow:0 0 40px #000c}.keycap-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.error-message{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background:#dc32322e;color:#ff8080;border:1.5px solid rgba(255,100,100,.7);border-radius:.7rem;font-size:1.1rem;font-weight:700;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 2px 8px #b41e1e26;white-space:nowrap}.error-message-icon{display:inline-flex;align-items:center;justify-content:center;width:1.2em;height:1.2em;border-radius:50%;border:1.5px solid currentColor;font-size:.85em;flex-shrink:0}