@font-face{font-family:"Hitori Latin";src:url("fonts/SourceSans3VF-Upright.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:block;ascent-override:90%;descent-override:10%;line-gap-override:0%}

:root{font-family:Arial,"Yu Gothic",sans-serif;color:#333;background:#eee;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,select:focus-visible{outline:2px solid #555;outline-offset:4px}[hidden]{display:none!important}.page{position:relative;min-height:calc(100svh - 70px);padding:70px 24px 50px;text-align:center}.shot .page{min-height:100svh}.heading{position:relative;max-width:420px;margin:auto}.identity{width:46px;height:46px;flex:0 0 46px;border:3px solid #333;display:flex;align-items:center;justify-content:center;font:350 44px/1 "Hitori Latin",sans-serif;background:#fafafa;position:relative;z-index:1}.tab-marker{position:absolute;left:0;top:2px;width:34px;height:34px;flex-basis:34px;border:1px solid #888;background:transparent;font:350 24px/1 "Hitori Latin",sans-serif}.tab-marker .glyph{transform:translateY(-1px)}.glyph{transform:translateY(-2.5px)}h1{font-size:30px;line-height:1.3;font-weight:400;margin:0}.instruction{font-size:17px;line-height:1.8;margin:28px 0 0}.station{margin:158px auto 0;width:280px}.message{width:162px;height:46px;margin:auto;display:flex;align-items:stretch}.letters{height:46px;flex:1;min-width:0;margin-left:-3px;border:3px solid #333;background:#fafafa;display:flex;align-items:center;justify-content:flex-start;padding-left:7px;font:350 44px/1 "Hitori Latin",sans-serif}.source{display:flex;gap:0;align-items:center;transform:translateY(-2.5px)}.source span{flex:0 0 auto}.controls{display:flex;justify-content:center;gap:14px;margin-top:38px}.action{height:48px;width:117px;border:1px solid #777;border-radius:3px;background:#fafafa;font-size:16px}.action:not(:disabled):hover{background:#e3e3e3}.action.ready{background:#333;color:#fff;border-color:#333}.action.ready:hover{background:#555}.action:disabled{color:#aaa;border-color:#ccc;background:#eee;cursor:default}.feedback{font-size:13px;line-height:1.6;height:24px;margin:18px -20px 0;color:#666}@media(max-width:500px){.page{padding-top:52px}.heading{max-width:320px}h1{font-size:27px}.station{margin-top:96px}}@media(max-height:650px){.page{padding-top:36px}.station{margin-top:66px}}

body, body * { user-select:none; -webkit-user-select:none; }

/* The receive frame, rather than the entire control group, sits at mid-screen. */
.page,.shot .page{min-height:max(540px,100svh)}
.station{position:absolute;top:max(247px,calc(50svh - 23px));left:50%;transform:translateX(-50%);width:min(420px,calc(100% - 48px));margin:0}
.message{width:max-content;min-width:162px;max-width:none;transform-origin:top center}
.letters{flex:0 0 auto;min-width:119px;padding-right:7px;white-space:nowrap}
.identity{flex-shrink:0}
.feedback{height:auto;min-height:24px;margin:18px 0 0}
#clear-dialog{padding:40px 24px 28px;width:400px;max-width:calc(100% - 40px);border:1px solid #bbb;background:#fafafa;color:#333;text-align:center;max-height:calc(100svh - 40px);overflow:auto}
#clear-dialog::backdrop{background:#0006}
#clear-dialog h2{font:400 24px/1.5 Arial,"Yu Gothic",sans-serif;margin:0 0 25px}
.result{margin:0 auto 28px}
.result .glyph,.result .source{color:#23756b}
.result .identity{border-right-color:#23756b}
#share{display:block;width:180px;margin:0 auto 22px}
.back{background:transparent;border:0;border-bottom:1px solid #999;padding:8px 10px;font-size:15px}
.close{position:absolute;right:8px;top:6px;border:0;background:none;font-size:24px;width:36px;height:36px}
.links{display:flex;justify-content:center;gap:18px;font-size:12px;margin-top:32px}
.links a{color:#666;text-underline-offset:3px}

h1,.instruction,.feedback,#clear-title,.back,.action{white-space:pre-line}

.restart{display:block;margin:26px auto 0;padding:8px 10px;min-height:44px;border:0;border-bottom:1px solid #aaa;background:transparent;color:#666;font:14px/1.5 Arial,"Yu Gothic",sans-serif}.restart:hover:not(:disabled){color:#333;border-color:#555}.restart:disabled{opacity:.5;cursor:default}

.pc-recommendation{display:none;margin:28px 0 0;color:#777;font-size:12px;line-height:1.6}
@media (max-width:600px) and (pointer:coarse){.pc-recommendation{display:block}}