:root{color-scheme:dark;font-family:Helvetica,Arial,"Noto Sans JP",sans-serif;background:#111315;color:#eef0f2;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1040px;margin:auto;padding:36px 44px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:38px}.brand{font-size:24px;letter-spacing:.12em;color:inherit;text-decoration:none;font-weight:600}.brand span{display:block;font-size:12px;color:#9ca3a9;letter-spacing:.13em;margin-top:8px}.tag{font-size:12px;border:1px solid #41474d;padding:7px 10px;border-radius:5px;color:#b9c0c6}nav{display:flex;gap:6px;padding:5px;background:#202428;border-radius:9px;width:280px;margin-bottom:32px}button{font:inherit;color:inherit;border:1px solid #424a52;background:transparent;border-radius:7px;padding:12px 18px;cursor:pointer;min-height:44px;font-size:14px}button:hover{background:#2a3138}button:disabled{opacity:.4;cursor:default}nav button{width:50%;border:0}nav .selected{background:#e9edf0;color:#111315}.section-title{display:flex;justify-content:space-between;align-items:center;gap:15px}h1{font-size:28px;font-weight:500;letter-spacing:.02em;margin:0}.minor{font-size:12px;color:#9aa4ac;letter-spacing:.15em}.intro{font-size:16px;line-height:1.8;color:#aeb7bf;margin:14px 0 24px}.stage{position:relative;background:#06090c;aspect-ratio:1120/760;border:1px solid #4c5964;overflow:hidden}canvas{display:block;width:100%;height:100%}.corner{position:absolute;width:15px;height:15px;border-color:#ecf4ff;pointer-events:none}.tl{top:0;left:0;border-top:2px solid;border-left:2px solid}.tr{top:0;right:0;border-top:2px solid;border-right:2px solid}.br{bottom:0;right:0;border-bottom:2px solid;border-right:2px solid}.bl{bottom:0;left:0;border-bottom:2px solid;border-left:2px solid}.status-line{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#abb6be;font-size:14px;min-height:54px}.text-button{border:0;padding:8px;color:#b7cff0}.controls{border-top:1px solid #32393f;padding-top:24px;margin-top:4px}label{font-size:14px;display:block}label span{float:right;font-size:12px;color:#a3afb8}textarea{width:100%;resize:vertical;background:#1b2025;color:#f1f5f9;border:1px solid #46515b;border-radius:7px;font:inherit;font-size:16px;line-height:1.7;padding:14px;margin:10px 0 24px}.setting{display:flex;align-items:center;justify-content:space-between}.setting output,.range-labels{font-size:12px;color:#aeb9c2}input[type=range]{width:100%;accent-color:#b4d2ff;margin:20px 0 10px;cursor:pointer}.range-labels{display:flex;justify-content:space-between;margin-bottom:24px}.primary{background:#c1d8f8;color:#132237;border-color:#c1d8f8;font-weight:600}.primary:hover{background:#d7e6fb}.controls>.primary{width:100%}.error{color:#ffc3b7;line-height:1.7;font-size:14px;margin:10px 0}.error:empty{display:none}details{border-top:1px solid #32393f;margin-top:30px;padding:20px 0;color:#b5bec6;font-size:14px;line-height:1.85}summary{cursor:pointer;color:#dce3e9}details p{margin-bottom:0}footer{border-top:1px solid #32393f;margin-top:18px;padding-top:22px;display:flex;justify-content:space-between;gap:15px;color:#82909c;font-size:12px}.camera-stage{aspect-ratio:4/3}#cameraPlaceholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#c6cdd5;font-size:16px}#cameraPlaceholder span{font-size:12px;color:#97a2ad;text-align:center}progress{width:100%;height:5px;accent-color:#bdd6ff}.hint{font-size:14px;line-height:1.8;color:#b8c7d5}.button-row{display:flex;gap:10px}.button-row .primary{flex:1}.result{background:#1b2127;padding:22px;border-radius:8px;margin-top:26px}.result label{color:#a9b8c5}#receivedText{font-size:20px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}#exitFull{display:none;position:absolute;right:12px;top:12px;background:#111a;color:white;z-index:3}.stage.expanded{position:fixed;inset:0;width:100vw;height:100dvh;z-index:99;border:0;display:flex;align-items:center;justify-content:center;background:black}.stage.expanded canvas{width:min(100vw,147.37dvh);height:auto;max-height:100dvh;aspect-ratio:1120/760}.stage.expanded .corner{display:none}.stage.expanded #exitFull{display:block}button:focus-visible,summary:focus-visible,textarea:focus-visible{outline:2px solid #c2dfff;outline-offset:4px}[hidden]{display:none!important}@media(min-width:850px){.controls{max-width:640px;margin-left:auto;margin-right:auto}.stage{max-height:530px;width:100%}}@media(max-width:600px){main{padding:24px 20px}header{margin-bottom:28px}.brand{font-size:20px}nav{width:100%;margin-bottom:26px}h1{font-size:23px}.minor{display:none}.intro{font-size:14px}footer{flex-direction:column;gap:9px}.button-row button{padding:12px}.result{padding:18px}}

.stage.expanded{padding:60px 12px}.stage.expanded canvas{width:min(calc(100vw - 24px),calc((100dvh - 120px)*1.473684));height:auto;max-height:calc(100dvh - 120px)}

.speed-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 24px}select{font:inherit;font-size:14px;color:#eef0f2;background:#202428;border:1px solid #46515b;border-radius:7px;padding:12px;min-height:44px}

.button-row{flex-wrap:wrap}.button-row .primary{min-width:160px}

.stage.expanded{max-height:none}

.video-picker{border-top:1px solid #32393f;padding:18px 0 22px}.video-picker p{margin:10px 0 0}#videoName{font-size:14px;overflow-wrap:anywhere;color:#ced7df}.minor-note{font-size:12px;color:#99a6b1;line-height:1.8}