:root{font-family:Arial,Helvetica,sans-serif;color:#111;background:#fff;font-synthesis:none;--ink: #111;--line: #c9c9c9;--soft: #f5f5f3;--blue: #111;--yellow: #111;--green: #111}*{box-sizing:border-box}html,body{min-width:320px;min-height:100%;margin:0;background:#fff}button,textarea{font:inherit}button{border:0}button,a{-webkit-tap-highlight-color:transparent}.app-shell{min-height:100vh;padding-bottom:48px}.topbar{display:flex;align-items:center;justify-content:space-between;width:min(900px,calc(100% - 40px));height:62px;margin:0 auto;border-bottom:2px solid var(--ink)}.brand{display:block;width:34px;height:34px}.brand img{width:100%;height:100%;object-fit:contain}.session-time{display:flex;align-items:center;gap:9px;font-size:22px}.session-progress{display:block;width:58px;height:8px;background:#dedede;border:1px solid var(--ink)}.session-progress:after{content:"";display:block;width:var(--remaining, 100%);height:100%;background:var(--ink)}.hero{display:grid;grid-template-columns:minmax(0,1fr) 246px;align-items:center;gap:72px;width:min(900px,calc(100% - 40px));min-height:350px;margin:0 auto;padding:44px 0}.hero-copy{display:grid;justify-items:start;gap:28px}.device-flow,.action-flow{display:flex;align-items:center}.device-flow{gap:22px}.device-picture{display:grid;place-items:center;width:116px;height:116px;background:var(--soft);border:2px solid var(--ink);border-radius:50%}.device-picture:nth-child(1){transform:rotate(-1.5deg)}.device-picture:nth-child(3){transform:rotate(1.5deg)}.flow-mark{font-size:46px;font-weight:400;font-family:Comic Sans MS,cursive;transform:rotate(-2deg)}.action-flow{gap:14px}.connection-status{display:inline-flex;align-items:center;gap:12px;min-height:30px;font-size:22px}.connection-status.is-connected{color:var(--ink)}.status-dot{width:10px;height:10px;border:2px solid currentColor;border-radius:50%;background:currentColor}.is-waiting .status-dot{background:transparent;animation:pulse 1.5s infinite}.qr-card{position:relative;padding:16px 16px 48px;background:#fff;border:2px solid var(--ink)}.qr-card:before,.qr-card:after{content:"";position:absolute;width:14px;height:14px;border-color:var(--ink)}.qr-card:before{left:-7px;top:-7px;border-left:2px solid;border-top:2px solid}.qr-card:after{right:-7px;bottom:-7px;border-right:2px solid;border-bottom:2px solid}.qr-frame{display:grid;place-items:center;width:210px;height:210px;margin:0 auto;background:#fff}.qr-frame canvas{display:block;width:198px!important;height:198px!important}.text-button{position:absolute;right:12px;bottom:8px;display:grid;place-items:center;width:34px;height:34px;padding:0;background:#fff;border:2px solid var(--ink);border-radius:48% 52% 46% 54%;cursor:pointer;transform:rotate(2deg)}.transfer-panel{width:min(900px,calc(100% - 40px));margin:0 auto;padding-top:30px;border-top:2px solid var(--ink)}.composer{position:relative}.visual-label{display:flex;align-items:center;gap:10px;margin-bottom:10px}.composer textarea{display:block;width:100%;min-height:145px;resize:vertical;padding:18px 70px 18px 18px;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:0;outline:0;line-height:1.6}.composer textarea:focus{box-shadow:5px 5px #d7d7d7}.composer-footer{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:12px}.character-progress{width:44px;height:5px;background:#ddd}.character-progress:after{content:"";display:block;width:var(--fill, 0%);height:100%;background:var(--ink)}.send-button{display:grid;place-items:center;width:58px;height:48px;color:#fff;background:var(--ink);border:2px solid var(--ink);cursor:pointer;transform:rotate(-1deg)}.send-button:hover:not(:disabled){background:#333}.send-button:disabled{opacity:.25;cursor:default}.history-section{margin-top:38px;padding-top:22px;border-top:1px dashed #999}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-size:24px}.section-heading>span{font-size:13px}.message-list{display:grid;gap:9px}.empty-history{display:grid;place-items:center;min-height:100px;border:1px dashed #aaa}.empty-icon{display:grid;place-items:center}.message-card{position:relative;padding:14px 66px 14px 14px;background:#fff;border:1px solid var(--ink)}.message-card.is-received{border-left:5px double var(--ink)}.message-card.is-mine{border-left:5px solid var(--ink)}.message-meta{display:flex;gap:10px;margin-bottom:6px;color:#777;font-size:11px}.message-body{display:block;margin:0;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.55}a.message-body{color:var(--ink);text-decoration:underline;text-underline-offset:3px}.copy-button{position:absolute;top:50%;right:12px;transform:translateY(-50%) rotate(1deg);display:grid;place-items:center;width:38px;height:38px;padding:0;background:#fff;border:1px solid var(--ink);cursor:pointer}.toast{position:fixed;z-index:10;left:50%;bottom:24px;transform:translate(-50%,14px);display:grid;place-items:center;min-width:46px;min-height:46px;color:#fff;background:var(--ink);border:2px solid var(--ink);opacity:0;pointer-events:none;transition:.18s;font-size:24px}.toast.is-visible{opacity:1;transform:translate(-50%)}.toast.is-error{color:var(--ink);background:#fff}.state-page{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:26px;padding:30px;background:#fff}.state-icon{width:82px;height:82px;object-fit:contain}.state-symbol{display:grid;place-items:center}.restart-button{display:grid;place-items:center;width:58px;height:58px;padding:0;color:#fff;background:var(--ink);border:2px solid var(--ink);text-decoration:none;font-size:32px;cursor:pointer;transform:rotate(-2deg)}.loading-dots{font-size:22px;letter-spacing:8px;animation:blink 1.2s infinite}.sketch-icon{position:relative;display:inline-block;width:42px;height:42px;color:var(--ink);flex:0 0 auto}.sketch-icon i,.sketch-icon b{position:absolute;display:block;box-sizing:border-box}.sketch-phone{width:27px;height:40px;border:3px solid currentColor;border-radius:7px 5px 8px 6px;transform:rotate(-2deg)}.sketch-phone i{top:3px;left:8px;width:7px;border-top:2px solid currentColor;transform:rotate(3deg)}.sketch-phone b{left:9px;bottom:3px;width:5px;height:5px;border:1.5px solid currentColor;border-radius:50%}.sketch-laptop{width:46px;height:38px}.sketch-laptop i{top:3px;left:5px;width:36px;height:27px;border:3px solid currentColor;border-radius:3px 5px 2px 4px;transform:rotate(1deg)}.sketch-laptop b{left:0;bottom:3px;width:46px;height:7px;border:3px solid currentColor;border-top-width:2px;border-radius:2px 2px 7px 6px;transform:skew(-8deg) rotate(-1deg)}.sketch-camera{width:43px;height:31px;margin-top:6px;border:3px solid currentColor;border-radius:4px 7px 5px 3px;transform:rotate(-1deg)}.sketch-camera:before{content:"";position:absolute;left:5px;top:-8px;width:12px;height:7px;border:3px solid currentColor;border-bottom:0;border-radius:3px 3px 0 0}.sketch-camera i{left:13px;top:5px;width:14px;height:14px;border:3px solid currentColor;border-radius:48% 52% 46% 54%}.sketch-camera b{right:4px;top:4px;width:4px;height:4px;background:currentColor;border-radius:50%}.sketch-clipboard{width:32px;height:39px;border:3px solid currentColor;border-radius:4px 3px 6px 4px;transform:rotate(1.5deg)}.sketch-clipboard:before{content:"";position:absolute;left:7px;top:-6px;width:13px;height:8px;background:#fff;border:2px solid currentColor;border-radius:5px 5px 2px 2px}.sketch-clipboard i{left:6px;top:12px;width:15px;border-top:2px solid currentColor;box-shadow:1px 7px 0 currentColor,-1px 14px 0 currentColor;transform:rotate(-1deg)}.sketch-arrow{width:45px;height:24px}.sketch-arrow i{left:2px;top:11px;width:37px;border-top:3px solid currentColor;transform:rotate(-2deg)}.sketch-arrow b{right:2px;top:5px;width:14px;height:14px;border-top:3px solid currentColor;border-right:3px solid currentColor;transform:rotate(45deg)}.sketch-down{width:24px;height:34px;transform:rotate(90deg) scale(.75)}.sketch-down i{left:1px;top:16px;width:22px;border-top:3px solid currentColor}.sketch-down b{right:0;top:11px;width:11px;height:11px;border-top:3px solid currentColor;border-right:3px solid currentColor;transform:rotate(45deg)}.sketch-qr{width:38px;height:38px;border:3px solid currentColor;transform:rotate(1deg)}.sketch-qr:before{content:"";position:absolute;left:4px;top:4px;width:8px;height:8px;border:2px solid currentColor;box-shadow:17px 0 0 -2px #fff,17px 0 0 0 currentColor,0 17px 0 -2px #fff,0 17px 0 0 currentColor}.sketch-qr:after{content:"";position:absolute;right:5px;bottom:5px;width:5px;height:5px;background:currentColor;box-shadow:-7px 0 0 currentColor,0 -7px 0 currentColor}.sketch-link{width:42px;height:34px}.sketch-link i,.sketch-link b{width:23px;height:13px;border:3px solid currentColor;border-radius:50%;transform:rotate(-38deg)}.sketch-link i{left:1px;top:14px}.sketch-link b{right:1px;top:6px}.sketch-send{width:42px;height:34px}.sketch-send:before{content:"";position:absolute;left:3px;top:5px;width:31px;height:23px;border:3px solid currentColor;clip-path:polygon(0 0,100% 50%,0 100%,26% 51%);transform:rotate(-5deg)}.sketch-send i{left:11px;top:16px;width:22px;border-top:2px solid currentColor;transform:rotate(-5deg)}.send-glyph{position:relative;width:30px;height:22px}.send-glyph:before{content:"";position:absolute;left:1px;top:10px;width:25px;border-top:3px solid #fff;transform:rotate(-3deg)}.send-glyph:after{content:"";position:absolute;right:1px;top:4px;width:13px;height:13px;border-top:3px solid #fff;border-right:3px solid #fff;transform:rotate(45deg)}.send-button.is-loading .send-glyph:before{width:5px;height:5px;left:4px;top:8px;border:0;border-radius:50%;background:#fff;box-shadow:9px 0 #fff,18px 0 #fff}.send-button.is-loading .send-glyph:after{display:none}.sketch-tray{width:45px;height:34px;border:3px solid currentColor;border-top:0;border-radius:2px 3px 7px 5px;transform:rotate(-1deg)}.sketch-tray:before{content:"";position:absolute;left:0;top:4px;width:17px;height:12px;border-top:3px solid currentColor;border-right:3px solid currentColor;transform:skewY(24deg)}.sketch-tray:after{content:"";position:absolute;right:0;top:4px;width:17px;height:12px;border-top:3px solid currentColor;border-left:3px solid currentColor;transform:skewY(-24deg)}.sketch-hourglass{width:42px;height:52px;border-top:4px solid currentColor;border-bottom:4px solid currentColor;transform:rotate(1deg)}.sketch-hourglass:before,.sketch-hourglass:after{content:"";position:absolute;left:9px;width:27px;border-top:3px solid currentColor;transform-origin:left center}.sketch-hourglass:before{top:4px;transform:rotate(58deg)}.sketch-hourglass:after{bottom:4px;transform:rotate(-58deg)}.sketch-lock{width:40px;height:48px}.sketch-lock:before{content:"";position:absolute;left:10px;top:1px;width:20px;height:25px;border:4px solid currentColor;border-bottom:0;border-radius:12px 10px 0 0;transform:rotate(-2deg)}.sketch-lock i{left:4px;bottom:0;width:34px;height:28px;border:3px solid currentColor;border-radius:3px 5px 4px 3px}.sketch-lock b{left:19px;bottom:9px;height:9px;border-left:3px solid currentColor}.sketch-warning{width:52px;height:48px}.sketch-warning:before{content:"";position:absolute;inset:0;background:currentColor;clip-path:polygon(50% 0,100% 94%,0 100%)}.sketch-warning:after{content:"";position:absolute;inset:5px 6px 7px;background:#fff;clip-path:polygon(50% 0,100% 94%,0 100%)}.sketch-warning i{z-index:1;left:25px;top:17px;height:14px;border-left:3px solid currentColor}.sketch-warning b{z-index:1;left:24px;bottom:8px;width:5px;height:5px;background:currentColor;border-radius:50%}.mini-device-flow{display:inline-flex;align-items:center;gap:5px}.mini-device-flow .sketch-icon{transform:scale(.45);transform-origin:center;margin:-10px}.mini-device-flow>i{color:var(--ink);font: 16px/1 Comic Sans MS,cursive}.action-flow .sketch-icon{transform:scale(.72);transform-origin:center}.visual-label .sketch-clipboard{transform:scale(.65) rotate(1.5deg);transform-origin:left center;margin-right:-8px}.text-button .sketch-icon,.copy-button .sketch-icon{transform:scale(.55);transform-origin:center}.state-symbol .sketch-icon{transform:scale(1.6);transform-origin:center;margin:22px}@keyframes pulse{50%{opacity:.25}}@keyframes blink{50%{opacity:.2}}@media(max-width:700px){.topbar,.hero,.transfer-panel{width:min(100% - 28px,520px)}.hero{grid-template-columns:1fr;gap:32px;min-height:0;padding:34px 0}.hero-copy{justify-items:center}.device-picture{width:94px;height:94px;font-size:48px}.flow-mark{font-size:36px}.qr-card{width:246px;margin:0 auto}.hero-mobile{padding-bottom:24px}.transfer-panel{padding-top:24px}}@media(max-width:400px){.device-flow{gap:14px}.device-picture{width:82px;height:82px;font-size:42px}.flow-mark{font-size:30px}.composer textarea{min-height:170px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}