*{box-sizing:border-box}body{margin:0;background:#05070a;color:#e8f0ff;font:15px/1.4 -apple-system,system-ui,sans-serif;padding-bottom:env(safe-area-inset-bottom)}
header{display:flex;justify-content:space-between;align-items:center;padding:calc(10px + env(safe-area-inset-top)) 16px 10px}
h1{margin:0;font-size:20px;letter-spacing:3px}h1 span{color:#5cf;text-shadow:0 0 10px #5cf}
header button{background:none;border:0;color:#fff;font-size:22px}
main{max-width:720px;margin:auto;padding:0 12px}
.card{background:#0d1219;border:1px solid #1c2633;border-radius:14px;padding:14px;margin:12px 0}
.row{display:flex;justify-content:space-between;align-items:center;margin:8px 0}
.seg{display:flex;border:1px solid #2a3a4d;border-radius:10px;overflow:hidden}.seg button{background:none;color:#9ab;border:0;padding:8px 12px;font-size:14px}.seg .on{background:#5cf;color:#001}
.big{display:block;width:100%;text-align:center;background:linear-gradient(90deg,#28c,#5cf);color:#001;font-weight:700;border:0;border-radius:12px;padding:14px;margin:14px 0 6px;font-size:16px;cursor:pointer}
.small{display:block;text-align:center;color:#5cf;text-decoration:underline;cursor:pointer}.hint{color:#789;font-size:13px}
#wrap{position:relative;background:#000;border-radius:14px;overflow:hidden}video,canvas{width:100%;display:block}canvas{position:absolute;inset:0;height:100%}
#prog{position:absolute;inset:0;background:#000c;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}#prog #bar{height:6px;width:0;background:#5cf;box-shadow:0 0 12px #5cf;align-self:flex-start;transition:width .1s}
.ctrl{display:flex;gap:8px;align-items:center;margin:8px 0}.ctrl input[type=range]{flex:1}
.ctrl button,.ctrl select{background:#142030;color:#e8f0ff;border:1px solid #2a3a4d;border-radius:8px;padding:8px 10px;font-size:14px}.tog{font-size:13px;color:#9ab}
#phases{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ph{background:#0d1219;border:1px solid #1c2633;border-radius:12px;overflow:hidden;cursor:pointer}.ph img{width:100%;display:block}.ph b{display:block;padding:6px 8px 0;color:#5cf}.ph small{display:block;padding:0 8px 8px;color:#9ab;font-size:11px}
.fix{border-left:3px solid #5cf;padding:6px 10px;margin:10px 0}.fix.p1{border-color:#f65}.fix.p2{border-color:#fb4}.fix h4{margin:0 0 4px}.drill{color:#9cf;font-size:13px}
table{width:100%;border-collapse:collapse;font-size:13px}td{padding:4px;border-bottom:1px solid #1c2633}td:last-child{text-align:right;color:#5cf}
dialog{background:#0d1219;color:#e8f0ff;border:1px solid #2a3a4d;border-radius:14px;width:min(92vw,420px)}dialog input{width:100%;padding:10px;margin:6px 0 12px;background:#05070a;color:#fff;border:1px solid #2a3a4d;border-radius:8px}menu{display:flex;gap:8px;justify-content:flex-end;padding:0}menu button{padding:8px 14px;border-radius:8px;border:0}
#aiOut{white-space:pre-wrap;font-size:14px}
#prog[hidden]{display:none}

.ttl{margin:8px 0}#twrap{background:#000;border-radius:14px;overflow:hidden}#twrap video{max-height:55vh;object-fit:contain}
#tl{position:relative;height:44px;margin:16px 14px 6px;background:#142030;border-radius:8px;touch-action:none}
#tsel{position:absolute;top:0;bottom:0;background:rgba(90,200,255,.25);border-top:2px solid #5cf;border-bottom:2px solid #5cf}
#tpos{position:absolute;top:-4px;bottom:-4px;width:2px;background:#fff;pointer-events:none}
.hdl{position:absolute;top:-6px;bottom:-6px;width:22px;margin-left:-11px;background:#5cf;border-radius:6px;box-shadow:0 0 12px #5cf;touch-action:none}
.hdl::after{content:"";position:absolute;left:9px;top:30%;bottom:30%;width:4px;border-left:2px solid #013;border-right:2px solid #013}
.tinfo{display:flex;justify-content:space-between;font-size:13px;color:#bff;margin:0 4px}
.linkbtn{background:none;border:0;width:100%;font-size:15px;padding:8px}