*{box-sizing:border-box}html{color:#fff;color-scheme:dark}body{margin:0;min-height:100vh;background:#0a0a0a;color:#fff;font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;display:flex;justify-content:center}#app{color:#fff;width:100%;max-width:640px;padding:8px}::selection{background:#333;color:#fff}.layout{display:grid;gap:8px;color:#fff}.title-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;color:#fff}.title{margin:0;font:inherit;font-weight:400;color:#fff}.credit{color:#fff;white-space:nowrap}.video-wrap{position:relative;border:1px solid #333;aspect-ratio:4 / 3;overflow:hidden}.video-mirror{position:absolute;top:0;right:0;bottom:0;left:0;transform:scaleX(-1)}.video-mirror #video,.video-mirror #overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}#overlay{pointer-events:none}#video{display:block}.ear-label{position:absolute;color:#fff;font:inherit;pointer-events:none;z-index:2;white-space:nowrap}.ear-hud-left{transform:translate(-100%,-50%)}.ear-hud-right{transform:translate(8px,-50%)}.video-controls{position:absolute;top:8px;left:8px;right:8px;z-index:3;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;gap:6px;pointer-events:auto}.timing-control{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:3px 6px;align-items:center;flex:1 1 0;min-width:0;padding:4px 6px;background:#0000008c;border:1px solid #444;font:inherit;font-size:10px;color:#fff}.timing-control input[type=range]{grid-column:1 / -1;grid-row:2;width:100%;margin:0;accent-color:#fff}.timing-control label{grid-column:1;grid-row:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:help}.timing-control .tip-icon{display:inline-flex;align-items:center;justify-content:center;width:11px;height:11px;margin-left:4px;border:1px solid #888;border-radius:50%;font-size:8px;line-height:1;color:#aaa;vertical-align:1px}.timing-control .timing-val{grid-column:2;grid-row:1;min-width:3ch;text-align:right;font-variant-numeric:tabular-nums}#output{width:100%;min-height:60px;margin:0;padding:8px;border:1px solid #333;background:#0a0a0a;color:#fff;-webkit-text-fill-color:#fff;caret-color:#fff;font:inherit;font-size:3em;line-height:1.3;resize:vertical}#output:focus{outline:1px solid #fff;outline-offset:0}#output::placeholder{color:#fff;opacity:.5}.site-footer{text-align:center;padding:8px 5px 4px;font-size:10px;color:#888}.site-footer a{color:#fff;font-weight:700;text-decoration:none}.morse-chart{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:4px;margin-top:8px;padding:8px;border:1px solid #333;font-size:11px;color:#888}.morse-chart .mc{display:flex;align-items:center;gap:5px;white-space:nowrap;font-variant-numeric:tabular-nums}.morse-chart .mc b{color:#fff;width:1ch;text-align:center}