:root{color-scheme:light;--ink:#251f21;--muted:#585254;--sand:#f4efec;--teal:#73a89a;--rule:#eae9ea;--error:#bc2633}*{box-sizing:border-box}body{margin:0;background:var(--sand);color:var(--ink);font:17px/1.55 Arial,sans-serif}main{max-width:1100px;margin:auto;padding:24px}header{padding:20px 0 24px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:700;color:var(--muted)}h1{font:44px/1.12 Georgia,serif;margin:8px 0 12px}h2{font:28px Georgia,serif;margin:0 0 18px}p{margin:8px 0 14px}.panel{background:white;padding:28px;margin:0 0 22px;border-radius:18px}label{display:block;font-weight:600;margin:12px 0 8px}.line{display:flex;gap:12px}input,textarea,select,button{font:inherit;border-radius:6px}input:not([type=range]),textarea,select{border:1px solid #8b8587;padding:14px;width:100%;background:white;color:var(--ink)}#code{text-transform:uppercase;letter-spacing:3px;font-size:24px;min-width:0}button{background:var(--ink);color:white;border:0;min-height:52px;padding:12px 22px;cursor:pointer;font-weight:600;flex-shrink:0}button:disabled{opacity:.5;cursor:wait}button:hover{background:#494044}:focus{outline:4px solid var(--teal);outline-offset:4px}.hint,footer,.notice{font-size:14px;color:var(--muted)}#connection{display:inline-block;font-size:14px;font-weight:600;padding:6px 12px;background:white;border-radius:20px}#message:not(:empty){padding:16px;margin:0 0 20px;background:white;border-left:5px solid var(--teal);overflow-wrap:anywhere}#message.error{border-color:var(--error);color:var(--error)}video{display:block;width:100%;max-height:65vh;background:#000;border-radius:8px}.controls{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.settings{display:flex;gap:24px;align-items:center}.settings>label{flex:1}input[type=range]{width:100%;min-height:44px;accent-color:#446e60}#time{font-weight:400;font-size:14px}summary{font-size:22px;cursor:pointer;min-height:44px;padding:4px 0}#generated{display:block;font-size:36px;font-weight:700;letter-spacing:4px;overflow-wrap:anywhere;margin:12px 0}.notice{border-top:1px solid var(--rule);padding-top:18px;margin-top:20px}a{color:#345c50}footer{padding:4px 8px 24px}#generate{margin-top:18px}#result{margin-top:22px;padding-top:12px;border-top:1px solid var(--rule)}[hidden]{display:none!important}@media(max-width:600px){main{padding:16px}.panel{padding:20px}.line,.settings{display:block}#open{width:100%;margin-top:12px}h1{font-size:36px}button{padding:12px 18px}.controls{gap:10px}.controls button{flex:1;font-size:15px}#generated{font-size:27px;letter-spacing:2px}}@media(min-width:1600px){body{font-size:22px}main{max-width:1440px;padding:50px}.panel{padding:36px}button{min-height:64px}.hint,footer,.notice{font-size:18px}}

video{aspect-ratio:16/9;object-fit:contain}#player-panel:fullscreen{background:#000;color:white;width:100vw;height:100vh;overflow:auto;border-radius:0}#player-panel:fullscreen video{height:calc(100vh - 260px);max-height:none}#player-panel:fullscreen .hint,#player-panel:fullscreen a{color:#ddd}