:root{color-scheme:light;font-family:Comic Sans MS,Comic Sans,Trebuchet MS,Arial,sans-serif;color:#111;background:#202020}*{box-sizing:border-box}body,html{min-height:100%;margin:0}body{min-height:100svh;background:#202020;overflow-x:hidden;letter-spacing:0}button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}img{max-width:100%}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.phone-canvas{position:relative;width:min(430px,100vw);min-height:100svh;margin:0 auto;background:#eeeeee;overflow:hidden;min-height:max(100svh,932px)}.phone-canvas:after,.phone-canvas:before{content:"";position:absolute;inset:0;pointer-events:none}.phone-canvas:before{z-index:0;opacity:.56;background-image:linear-gradient(rgba(120,150,170,.15) 1px,transparent 0),linear-gradient(90deg,rgba(120,150,170,.15) 1px,transparent 0);background-size:36px 36px;animation:notebook-slide 3.2s linear infinite}.phone-canvas:after{z-index:0;opacity:.18;background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.7) 50%,transparent);background-size:180px 100%;animation:paper-light 5.5s linear infinite}.doodle,.image-button{position:absolute;display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.arrow-img,.logo-img,.receive-button,.slogan-img{z-index:2}.logo-img{top:clamp(66px,8.6svh,82px);left:50%;width:min(318px,74vw);transform:translateX(-50%) rotate(1.2deg);animation:lazy-wobble 6s ease-in-out infinite}.slogan-img{top:clamp(188px,22svh,212px);left:50%;width:min(205px,48vw);transform:translateX(-31%) rotate(-1.8deg);animation:tiny-float 4.8s ease-in-out infinite}.image-button{padding:0;border:0;background:transparent;line-height:0;transition:transform .13s ease,filter .13s ease}.image-button img{display:block;width:100%;height:auto;pointer-events:none}.receive-button{top:clamp(290px,33.8svh,316px);left:50%;width:min(304px,72vw);transform:translateX(-50%) rotate(-1.6deg);animation:button-bounce 3.9s ease-in-out infinite}.receive-button:focus-visible,.receive-button:hover{transform:translateX(-50%) scale(1.04) rotate(-.8deg);filter:brightness(1.03)}.receive-button:active{transform:translateX(-50%) scale(.96) rotate(-2.4deg)}.arrow-img{top:clamp(386px,44.3svh,416px);left:calc(50% - min(95px, 22vw));width:min(128px,30vw);transform:rotate(-90deg);animation:arrow-poke 2.8s ease-in-out infinite}.photo-img{left:50%;bottom:clamp(54px,8svh,88px);width:min(820px,190vw);transform:translateX(-50%) rotate(.9deg);animation:lazy-wobble-photo 7s ease-in-out infinite}.modal-layer{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;padding:20px}.modal-layer.is-open{display:flex}.modal-backdrop{position:absolute;inset:0;background:rgba(17,17,17,.46)}.hand-modal{position:relative;z-index:1;width:min(350px,calc(100vw - 24px));padding:26px 18px 20px;border:2px solid #111;border-radius:18px;background:#f7f7f7;box-shadow:8px 8px 0 rgba(17,17,17,.22);transform:rotate(-1deg);animation:modal-pop .19s ease-out}.modal-copy{margin:0 34px 12px 4px;color:#111}.modal-copy h2{margin:0;font-size:25px;line-height:1;transform:rotate(-1deg)}.modal-copy p{margin:7px 0 0;font-size:14px;line-height:1.25;transform:rotate(.7deg)}.change-email-button,.hand-modal[data-step=code] .modal-copy-email,.modal-copy-code,.test-code{display:none}.hand-modal[data-step=code] .change-email-button,.hand-modal[data-step=code] .modal-copy-code,.hand-modal[data-step=code] .test-code{display:block}.code-field,.mail-field{position:relative;display:block;width:min(310px,82vw);margin:6px auto 14px;line-height:0;transform:rotate(1.8deg)}.code-field{transform:rotate(-1.5deg)}.code-field,.hand-modal[data-step=code] .mail-field{display:none}.hand-modal[data-step=code] .code-field{display:block}.code-img,.mail-img{display:block;width:100%}.close-button{position:absolute;top:10px;right:12px;width:34px;height:34px;border:2px solid #111;border-radius:50%;background:#eeeeee;color:#111;font-size:20px;line-height:1}label{display:block;margin-top:12px}label span{display:block;margin:0 0 5px 4px;font-size:16px}input{width:100%;min-height:46px;padding:0 12px;border:2px solid #111;border-radius:11px 15px 12px 14px;background:#ffffff;color:#111;outline:none}input:focus{background:#f1ffe3;box-shadow:3px 3px 0 #95f000}.mail-field .mail-input{left:30%;right:24%;top:59%;min-height:22px;font-size:clamp(10px,2.8vw,12px);text-align:left;transform:rotate(-1.3deg)}.code-field .code-input,.mail-field .mail-input{position:absolute;width:auto;padding:0 3px;border:0;border-bottom:1.5px solid #111;border-radius:0;background:transparent;color:#111;line-height:1}.code-field .code-input{left:31%;right:25%;top:58%;min-height:24px;font-size:15px;text-align:center;letter-spacing:1px;transform:rotate(1deg)}.code-field .code-input:focus,.mail-field .mail-input:focus{background:rgba(255,255,255,.14);box-shadow:none}.form-error{min-height:20px;margin:10px 3px 8px;color:#b00020;font-size:14px;text-align:center}.form-error.is-success{color:#168000}.text-button{min-height:44px;padding:6px 18px;border:2px solid #111;border-radius:16px 13px 18px 12px;background:#eeeeee;color:#111;font-size:18px;font-weight:700;transform:rotate(-1deg);transition:transform .13s ease,filter .13s ease}.text-button:focus-visible,.text-button:hover{transform:scale(1.03) rotate(.5deg);filter:brightness(1.03)}.text-button:active{transform:scale(.96) rotate(-2deg)}.submit-button{width:100%;background:#95f000}.text-link{display:block;width:-moz-fit-content;width:fit-content;margin:10px auto 0;padding:0;border:0;background:transparent;color:#111;font-size:15px;text-decoration:underline;transform:rotate(1deg)}.test-code{margin:-4px 0 8px;color:#666;font-size:12px;text-align:center}.dashboard-screen{min-height:max(100svh,932px)}.dashboard-panel{position:relative;z-index:1;display:flex;min-height:inherit;flex-direction:column;gap:17px;padding:62px 22px 34px}.dashboard-logo{width:min(285px,70vw);margin:0 auto 4px;transform:rotate(1.2deg)}.dashboard-panel h1{margin:0;font-size:31px;line-height:1;transform:rotate(-1deg)}.device-row,.devices-box,.profile-note{border:2px solid #111;background:#f7f7f7;box-shadow:5px 5px 0 rgba(17,17,17,.16)}.profile-note{padding:14px 16px;border-radius:18px 13px 19px 15px;transform:rotate(.8deg)}.profile-email{margin:0 0 6px;overflow-wrap:anywhere;font-size:18px;line-height:1.2}.profile-note strong{display:inline-block;padding:4px 9px;border:2px solid #111;border-radius:999px;background:#77dff0;font-size:14px;transform:rotate(-1.5deg)}.devices-box{padding:16px;border-radius:17px 20px 14px 18px;transform:rotate(-.7deg)}.devices-box h2{margin:0 0 12px;font-size:25px;line-height:1}.device-list{display:grid;grid-gap:9px;gap:9px}.device-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:14px 11px 15px 13px;box-shadow:3px 3px 0 rgba(17,17,17,.13);transform:rotate(.5deg)}.device-row strong{min-width:0;overflow-wrap:anywhere;font-size:17px}.device-row span{flex:0 0 auto;color:#168000;font-size:13px}.empty-devices{margin:8px 0 14px;font-size:17px}.empty-devices[hidden]{display:none}.add-device-trigger{width:100%;background:#95f000}.logout-button{width:135px;margin-top:auto;background:#77dff0}.sketch-label span{color:#111}.device-modal-card input{background:#fff}@media (min-width:431px){body{display:grid;place-items:start center}.phone-canvas{min-height:932px;margin-top:28px}}@media (max-width:380px){.phone-canvas{min-height:max(100svh,820px)}.logo-img{top:62px;width:282px}.slogan-img{top:178px;width:178px}.receive-button{top:268px;width:258px}.arrow-img{top:348px;left:70px;width:110px}.photo-img{width:710px;bottom:42px}}@keyframes lazy-wobble{0%,to{transform:translateX(-50%) rotate(1.2deg) translateY(0)}45%{transform:translateX(-50%) rotate(-1deg) translateY(4px)}}@keyframes tiny-float{0%,to{transform:translateX(-31%) rotate(-1.8deg) translateY(0)}50%{transform:translateX(-31%) rotate(1.2deg) translateY(-5px)}}@keyframes button-bounce{0%,to{translate:0 0}48%{translate:0 5px}62%{translate:0 -2px}}@keyframes arrow-poke{0%,to{transform:rotate(-90deg) translateX(0)}50%{transform:rotate(-90deg) translateX(12px)}}@keyframes lazy-wobble-photo{0%,to{transform:translateX(-50%) rotate(.9deg) translateY(0)}50%{transform:translateX(-50%) rotate(-1.2deg) translateY(6px)}}@keyframes modal-pop{0%{opacity:0;transform:rotate(-3deg) scale(.9)}to{opacity:1;transform:rotate(-1deg) scale(1)}}@keyframes notebook-slide{0%{background-position:0 0,0 0}to{background-position:-36px 0,-36px 0}}@keyframes paper-light{0%{background-position:180px 0}to{background-position:-180px 0}}