.dmot-player{--blue:#0f63b8;--blue2:#287bd8;--red:#e11925;--ink:#1f2937;--bg:#f4f8fc;--dmot-app-h:calc(100dvh - 10px);position:relative;width:100%;max-width:none;height:var(--dmot-app-h);margin:0;overflow:hidden;background:var(--bg);font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink)}
.dmot-player *{box-sizing:border-box}
.dmot-player button{font:inherit}
.dmot-frame{position:relative;width:100%;height:100%;display:grid;border-radius:16px;overflow:hidden;border:1px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,rgba(15,99,184,.64),rgba(15,99,184,.10) 42%,rgba(225,25,37,.10) 58%,rgba(225,25,37,.64)) border-box;box-shadow:0 7px 26px rgba(31,78,121,.07)}
.dmot-side{background:linear-gradient(180deg,#fbfdff,#f7faff);min-height:0}
.dmot-left{grid-column:1;grid-row:1;border-right:1px solid #dbe8f4;display:flex;flex-direction:column;overflow:visible}
.dmot-right{grid-column:3;grid-row:1;border-left:1px solid #f0dadd;display:flex;flex-direction:column;overflow:hidden}
.dmot-mark img{filter:drop-shadow(0 1px 3px rgba(0,0,0,.04));border:0!important;box-shadow:none!important}
.dmot-sep{height:1px;background:linear-gradient(90deg,var(--blue),var(--red));opacity:.55;margin:0 0 2px}
.dmot-tool{border:1px solid #d8e5f1;border-radius:9px;background:#fff;color:#35536d;display:flex;align-items:center;justify-content:center;gap:5px;font-weight:850;cursor:pointer;box-shadow:0 2px 7px rgba(31,78,121,.03);flex:0 0 auto}
.dmot-tool .ico{font-size:15px;line-height:1}
.dmot-tool.active{background:#eaf4ff;border-color:#8cb8e9;color:#0f5ca8;box-shadow:inset 3px 0 0 var(--blue)}
.dmot-colors{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:1px 0;flex:0 0 auto}
.dmot-color{width:23px;height:23px;border-radius:50%;border:2px solid #fff;outline:1px solid #c9d7e4;cursor:pointer;padding:0}
.dmot-color.active{outline:3px solid #a7c9ee}
.dmot-color[data-c="#176bb9"]{background:#176bb9}
.dmot-color[data-c="#df2e38"]{background:#df2e38}
.dmot-color[data-c="#111111"]{background:#111}
.dmot-color[data-c="#178a4b"]{background:#178a4b}
.dmot-widths{display:grid;grid-template-columns:1fr;gap:3px;flex:0 0 auto}
.dmot-width{height:25px;border:1px solid #d8e5f1;border-radius:7px;background:#fff;color:#526a80;font-weight:850;cursor:pointer}
.dmot-width.active{background:#eaf4ff;border-color:#8cb8e9;color:#0f5ca8}
.dmot-shape-wrap{position:relative;flex:0 0 auto}
.dmot-shape-menu{display:none;position:absolute;top:-48px;z-index:45;width:170px;padding:7px;background:#fff;border:1px solid #d5e3ef;border-radius:11px;box-shadow:0 10px 30px rgba(24,65,105,.16);grid-template-columns:repeat(2,1fr);gap:5px}
.dmot-shape-menu.open{display:grid}
.dmot-shape-opt{height:36px;border:1px solid #dbe6f0;border-radius:8px;background:#fbfdff;color:#36536d;font-size:9px;font-weight:850;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:4px}
.dmot-shape-opt:hover,.dmot-shape-opt.active{background:#eaf4ff;border-color:#91b9e4;color:#0f5ca8}
.dmot-center{grid-column:2;grid-row:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:#fff}
.dmot-topbar{height:44px;flex:0 0 44px;display:flex;align-items:center;gap:10px;padding:5px 10px;border-bottom:1px solid #e6edf5;background:#fcfdff}
.dmot-qbadge{width:31px;height:31px;border-radius:9px;background:var(--blue2);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:900;flex:0 0 auto}
.dmot-qtitle{font-weight:900;color:#2d5175;font-size:13px;white-space:nowrap}
.dmot-count{font-size:10px;color:#758598;font-weight:800;margin-left:3px;white-space:nowrap}
.dmot-progress{height:6px;flex:1;background:#e7eef6;border-radius:99px;overflow:hidden}
.dmot-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--blue2),#498fe0);border-radius:99px;transition:width .15s ease}
.dmot-zoom{display:flex;align-items:center;border:1px solid #d9e5f1;border-radius:9px;background:#fff;height:30px;overflow:hidden;flex:0 0 auto}
.dmot-zoom button{border:0;background:#f5f8fb;height:100%;font-weight:900;color:#4b6580;cursor:pointer}
.dmot-zoom .zminus,.dmot-zoom .zplus{width:28px;font-size:14px}
.dmot-zoom .dmot-zval{min-width:46px;font-size:10px;background:#fff}
.dmot-full{height:30px;border:1px solid #bdd8f3;background:#eff7ff;border-radius:9px;padding:0 10px;color:#215b96;font-size:10px;font-weight:900;cursor:pointer;white-space:nowrap}
.dmot-stage{position:relative;flex:1 1 auto;min-height:0;background:#fff;overflow:hidden;border:0;outline:0;box-shadow:none}
.dmot-imgshell{overscroll-behavior:contain;border:0!important;outline:0!important;border-radius:0!important;background:#fff;box-shadow:none!important;scrollbar-width:thin}
.dmot-layer{width:100%}
.dmot-img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;border:0!important;outline:0!important;box-shadow:none!important;border-radius:0!important}
.dmot-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;z-index:4}
.dmot-stage.pan-mode .dmot-imgshell{user-select:none;-webkit-user-select:none}
.dmot-stage.pan-mode .dmot-img{pointer-events:none}
.dmot-image-error{display:none;position:absolute;inset:0;z-index:7;place-items:center;padding:20px;text-align:center;color:#9b2f39;font-weight:800;background:#fff5f6}
.dmot-image-error.open{display:grid}
.dmot-right-title{font-weight:900;color:#8a4a50;text-align:center;letter-spacing:.2px;margin:2px 0 1px}
.dmot-choice{height:47px;border:1px solid #d8e2ed;border-radius:12px;background:#fff;color:#36536d;font-weight:950;cursor:pointer;transition:.15s}
.dmot-choice:hover{border-color:#9fc1e8;background:#f6faff}
.dmot-choice.selected{background:#eaf4ff;border-color:#7eafe5;color:#0f5ca8;box-shadow:inset 4px 0 0 var(--blue)}
.dmot-choice.correct{background:#eaf8ef;border-color:#86c89c;color:#1f7a43;box-shadow:inset 4px 0 0 #2b9a55}
.dmot-choice.wrong{background:#fff0f1;border-color:#e69aa2;color:#b42330;box-shadow:inset 4px 0 0 #d93b48}
.dmot-choice:disabled{cursor:default}
.dmot-action{min-height:42px;border-radius:10px;font-weight:900;cursor:pointer;padding:4px 5px}
.dmot-check{border:1px solid #9fc1e8;background:#edf6ff;color:#1b5f9d}
.dmot-reveal{border:1px solid #efb9bd;background:#fff2f3;color:#b01d29}
.dmot-action:disabled{opacity:.5;cursor:not-allowed}
.dmot-feedback{margin-top:0;padding:6px 5px;border:1px solid #e4ebf2;border-radius:9px;background:#fbfdff;text-align:center;color:#66788b;line-height:1.3;min-height:32px}
.dmot-feedback.ok{background:#eef9f2;border-color:#a6d7b5;color:#227044;font-weight:850}
.dmot-feedback.bad{background:#fff1f2;border-color:#edb7bd;color:#a92c39;font-weight:850}
.dmot-feedback.answer{background:#f3f8fe;border-color:#bfd8ef;color:#245b90;font-weight:850}
.dmot-footer{grid-column:1/4;grid-row:2;border-top:1px solid #e5edf5;display:grid;align-items:center;padding:3px 10px;background:linear-gradient(90deg,#f7fbff,#fff 48%,#fff 52%,#fff8f8)}
.dmot-nav{height:34px;border:1px solid #d5e2ee;border-radius:10px;background:#fff;font-size:11px;font-weight:900;cursor:pointer;color:#37536d}
.dmot-prev{justify-self:start;width:106px}
.dmot-next{justify-self:end;width:106px;background:#edf6ff;border-color:#a9c9eb;color:#0f5ca8}
.dmot-next.finish{background:#eaf8ef;border-color:#a9d8b8;color:#237546}
.dmot-nav:disabled{opacity:.42;cursor:not-allowed}
.dmot-qnav{justify-self:center;display:flex;gap:4px;align-items:center;max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding:1px}
.dmot-qnum{flex:0 0 25px;width:25px;height:25px;border:1px solid #d6e2ee;border-radius:8px;background:#fff;color:#64788d;font-size:9.5px;font-weight:900;display:grid;place-items:center;cursor:pointer;padding:0;transition:.12s}
.dmot-qnum:hover{background:#f2f7fd;border-color:#9fc1e8;color:#0f5ca8}
.dmot-qnum.answered{background:#edf5ff;border-color:#9fc2ec;color:#245f9f}
.dmot-qnum.checked{background:#eef8f1;border-color:#a8d6b7;color:#287044}
.dmot-qnum.current{background:var(--blue2)!important;color:#fff!important;border-color:var(--blue2)!important}
.dmot-result{display:none;position:absolute;z-index:60;inset:0;align-items:center;justify-content:center;padding:10px;background:rgba(241,246,251,.94);backdrop-filter:blur(2px)}
.dmot-result.open{display:flex}
.dmot-resultbox{width:min(620px,96%);max-height:96%;overflow:auto;padding:14px;border:1px solid #cfe2fb;border-radius:14px;background:#fff;box-shadow:0 18px 60px rgba(24,61,98,.18)}
.dmot-result h3{margin:0 0 9px;text-align:center;color:#245b9b;font-size:18px}
.dmot-resultgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dmot-stat{padding:8px 5px;border:1px solid #dce7f3;border-radius:10px;background:#fafdff;text-align:center}
.dmot-stat strong{display:block;font-size:18px;color:#244d7b}
.dmot-stat span{font-size:10.5px;color:#708093}
.dmot-result-actions{display:flex;justify-content:center;gap:7px;margin-top:10px}
.dmot-result-actions button{height:34px;border-radius:9px;padding:0 12px;font-size:11px;font-weight:900;cursor:pointer}
.dmot-review{border:0;background:var(--blue2);color:#fff}
.dmot-close-result{border:1px solid #cedcea;background:#f5f8fb;color:#465c70}
.dmot-save{margin-top:7px;text-align:center;font-size:10.5px;color:#708093}
.dmot-loading{padding:24px;text-align:center;color:#6b7787}
.dmot-player.dmot-fake-full,.dmot-player:fullscreen,.dmot-player:-webkit-full-screen{position:fixed!important;z-index:2147483000!important;inset:0!important;width:100%!important;max-width:none!important;height:100dvh!important;margin:0!important;background:var(--bg)!important}
.dmot-player.dmot-fake-full .dmot-frame,.dmot-player:fullscreen .dmot-frame,.dmot-player:-webkit-full-screen .dmot-frame{border-radius:0}
body.dmot-lock-scroll{overflow:hidden!important;touch-action:none}
@media(min-width:641px){
  .dmot-player{width:100%;max-width:none}

}
@media(max-width:1000px){
  .dmot-choice{height:43px}

}
@media(max-height:700px) and (min-width:641px){
  .dmot-topbar{height:39px;flex-basis:39px}
  .dmot-width{height:21px}
  .dmot-choice{height:38px}
  .dmot-action{min-height:35px}

}
@media(max-width:640px){
  .dmot-player{--dmot-app-h:100dvh}
  .dmot-frame{border-radius:10px}
  .dmot-center{grid-column:1;grid-row:1}
  .dmot-left{grid-column:1;grid-row:2;flex-direction:row;border-right:0;border-top:1px solid #dbe8f4}
  .dmot-right{grid-column:1;grid-row:3;flex-direction:row;align-items:center;border-left:0;border-top:1px solid #f0dadd}
  .dmot-footer{grid-column:1;grid-row:4;padding:3px 5px}
  .dmot-sep{height:29px;margin:0 2px}
  .dmot-tool{height:34px}
  .dmot-tool .label{display:none}
  .dmot-tool .ico{font-size:14px}
  .dmot-colors{display:flex;gap:4px;margin:0}
  .dmot-color{width:21px;height:21px}
  .dmot-widths{display:flex;gap:3px}
  .dmot-width{width:31px;height:29px}
  .dmot-width::after{font-size:10px}
  .dmot-width[data-size="3"]::after{content:"•"}
  .dmot-width[data-size="6"]::after{content:"●"}
  .dmot-width[data-size="10"]::after{content:"⬤"}
  .dmot-shape-menu{top:auto;bottom:40px;width:168px}
  .dmot-right-title{display:none}
  .dmot-choice{flex:0 0 43px;width:43px;height:43px}
  .dmot-action{flex:0 0 88px;min-height:42px;height:42px}
  .dmot-feedback{flex:0 0 115px;min-height:42px;height:42px;display:grid;place-items:center;padding:4px}
  .dmot-topbar{height:40px;flex-basis:40px;gap:6px;padding:4px 5px}
  .dmot-qbadge{width:27px;height:27px;font-size:11px}
  .dmot-qtitle{font-size:11px}
  .dmot-count{font-size:9px}
  .dmot-progress{height:5px}
  .dmot-full{width:30px;padding:0;font-size:0}
  .dmot-full::after{content:"⛶";font-size:14px}
  .dmot-zoom{height:28px}
  .dmot-zoom .zminus,.dmot-zoom .zplus{width:24px}
  .dmot-zoom .dmot-zval{min-width:38px;font-size:9px}
  .dmot-nav{height:33px;width:68px;font-size:9.5px}
  .dmot-prev,.dmot-next{width:68px}
  .dmot-qnum{flex-basis:23px;width:23px;height:23px;font-size:9px}
  .dmot-resultgrid{grid-template-columns:repeat(2,1fr)}

}
.dmot-frame{grid-template-columns:112px minmax(0,1fr) 146px;grid-template-rows:minmax(0,1fr) 50px}
.dmot-left{padding:8px 8px 7px;gap:6px;align-items:stretch;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:thin;overscroll-behavior:contain;min-width:0}
.dmot-right{padding:9px 9px 7px;gap:6px;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:thin;overscroll-behavior:contain;min-width:0}
.dmot-mark{width:100%;height:60px;margin:0;display:grid;place-items:center;flex:0 0 auto}
.dmot-mark img{width:68px;height:55px;max-width:100%;object-fit:contain}
.dmot-sep{width:72%;align-self:center;flex:0 0 auto}
.dmot-tool{width:100%;min-width:0;min-height:37px;padding:4px 7px;font-size:clamp(10px,.72vw,12px);line-height:1.05;white-space:nowrap;overflow:hidden}
.dmot-tool .label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmot-tool .ico{flex:0 0 auto}
.dmot-colors{align-self:center}
.dmot-widths{width:100%}
.dmot-width{font-size:clamp(9px,.66vw,11px)}
.dmot-shape-wrap{width:100%}
.dmot-shape-wrap>.dmot-tool{width:100%}
.dmot-shape-menu{left:calc(100% + 6px)}
.dmot-right-title{font-size:clamp(9px,.62vw,11px)}
.dmot-choice{font-size:clamp(14px,1vw,18px)}
.dmot-action{font-size:clamp(9px,.67vw,11px);line-height:1.08;overflow-wrap:anywhere}
.dmot-feedback{font-size:clamp(8.5px,.62vw,10.5px);overflow-wrap:anywhere}
.dmot-footer{grid-template-columns:126px minmax(0,1fr) 126px}
.dmot-imgshell{overflow:hidden!important;touch-action:auto;position:absolute;inset:0}
.dmot-layer{position:absolute!important;left:50%;top:50%;margin:0!important;transform:translate(-50%,-50%);transform-origin:center center!important;will-change:transform,width}
.dmot-stage.pan-mode,.dmot-stage.pan-mode .dmot-imgshell{cursor:grab}
.dmot-stage.pan-mode.dragging,.dmot-stage.pan-mode.dragging .dmot-imgshell{cursor:grabbing}
.dmot-stage.pan-mode .dmot-imgshell{touch-action:none!important;overscroll-behavior:none}
@media (min-width:721px) and (max-width:1100px){
  .dmot-frame{grid-template-columns:100px minmax(0,1fr) 132px;grid-template-rows:minmax(0,1fr) 48px}
  .dmot-left{padding:7px 7px 6px;gap:5px}
  .dmot-right{padding:8px 7px 6px}
  .dmot-mark{height:53px}
  .dmot-mark img{width:59px;height:48px}
  .dmot-tool{min-height:35px;font-size:clamp(9.5px,1vw,11px)}
  .dmot-width{height:24px}
  .dmot-footer{grid-template-columns:112px minmax(0,1fr) 112px}

}
@media (max-width:720px), (max-width:900px) and (max-height:520px){
  .dmot-player{--dmot-app-h:100dvh;width:100%;height:100dvh;overflow:hidden}
  .dmot-frame{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) 50px 56px 46px!important;border-radius:8px}
  .dmot-center{grid-column:1!important;grid-row:1!important;min-height:0}
  .dmot-left{grid-column:1!important;grid-row:2!important;flex-direction:row!important;align-items:center!important;border-right:0!important;border-top:1px solid #dbe8f4!important;padding:3px 5px!important;gap:4px!important;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;scrollbar-width:thin;touch-action:pan-x;min-width:0;white-space:nowrap}
  .dmot-right{grid-column:1!important;grid-row:3!important;flex-direction:row!important;align-items:center!important;border-left:0!important;border-top:1px solid #f0dadd!important;padding:4px 5px!important;gap:4px!important;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;scrollbar-width:thin;touch-action:pan-x;min-width:0;white-space:nowrap}
  .dmot-footer{grid-column:1!important;grid-row:4!important;grid-template-columns:74px minmax(0,1fr) 74px!important;padding:3px 5px!important;min-width:0}
  .dmot-qnav{overflow-x:auto!important;overflow-y:hidden!important;touch-action:pan-x;overscroll-behavior-x:contain}
  .dmot-mark{width:45px!important;height:38px!important;flex:0 0 45px!important;margin:0!important}
  .dmot-mark img{width:43px!important;height:36px!important}
  .dmot-sep{width:1px!important;height:29px!important;align-self:auto!important;margin:0 2px!important;flex:0 0 1px}
  .dmot-tool{width:auto!important;min-width:38px!important;max-width:none!important;height:34px!important;min-height:34px!important;padding:3px 7px!important;flex:0 0 auto!important;font-size:10px!important;overflow:visible}
  .dmot-tool .label{display:none!important}
  .dmot-tool .ico{font-size:15px!important}
  .dmot-colors{display:flex!important;gap:4px!important;margin:0!important;flex:0 0 auto}
  .dmot-color{width:22px!important;height:22px!important}
  .dmot-widths{display:flex!important;width:auto!important;gap:3px!important;flex:0 0 auto}
  .dmot-width{width:33px!important;height:29px!important;font-size:0!important;flex:0 0 33px}
  .dmot-width::after{font-size:10px}
  .dmot-width[data-size="3"]::after{content:"•"}
  .dmot-width[data-size="6"]::after{content:"●"}
  .dmot-width[data-size="10"]::after{content:"⬤"}
  .dmot-shape-wrap{width:auto!important;flex:0 0 auto}
  .dmot-shape-menu{left:0!important;top:auto!important;bottom:40px!important;width:170px!important}
  .dmot-right-title{display:none!important}
  .dmot-choice{flex:0 0 44px!important;width:44px!important;height:43px!important;font-size:14px!important}
  .dmot-action{flex:0 0 94px!important;width:94px!important;min-height:42px!important;height:42px!important;font-size:8.5px!important;white-space:normal!important}
  .dmot-feedback{flex:0 0 120px!important;width:120px!important;min-height:42px!important;height:42px!important;display:grid!important;place-items:center!important;padding:4px!important;font-size:8.5px!important;white-space:normal!important}
  .dmot-topbar{height:40px!important;flex-basis:40px!important;gap:5px!important;padding:4px 5px!important;min-width:0}
  .dmot-qbadge{width:27px!important;height:27px!important;font-size:11px!important}
  .dmot-qtitle{font-size:clamp(9px,2.8vw,11px)!important}
  .dmot-count{font-size:9px!important}
  .dmot-progress{height:5px!important;min-width:20px}
  .dmot-zoom{height:28px!important}
  .dmot-zoom .zminus,.dmot-zoom .zplus{width:24px!important}
  .dmot-zoom .dmot-zval{min-width:38px!important;font-size:9px!important}
  .dmot-full{width:31px!important;padding:0!important;font-size:0!important}
  .dmot-full::after{content:"⛶";font-size:14px}
  .dmot-nav,.dmot-prev,.dmot-next{height:33px!important;width:68px!important;font-size:9.5px!important}
  .dmot-qnum{flex-basis:23px!important;width:23px!important;height:23px!important;font-size:9px!important}

}
@media (max-width:900px) and (max-height:520px){
  .dmot-frame{grid-template-rows:minmax(0,1fr) 42px 48px 42px!important}
  .dmot-left{padding:2px 4px!important}
  .dmot-right{padding:2px 4px!important}
  .dmot-mark{width:38px!important;height:34px!important;flex-basis:38px!important}
  .dmot-mark img{width:36px!important;height:31px!important}
  .dmot-tool{height:30px!important;min-height:30px!important;min-width:34px!important;padding:2px 5px!important}
  .dmot-color{width:19px!important;height:19px!important}
  .dmot-width{height:25px!important;width:29px!important;flex-basis:29px!important}
  .dmot-choice{height:37px!important;width:40px!important;flex-basis:40px!important}
  .dmot-action{height:36px!important;min-height:36px!important;flex-basis:84px!important;width:84px!important}
  .dmot-feedback{height:36px!important;min-height:36px!important;flex-basis:110px!important;width:110px!important}
  .dmot-topbar{height:36px!important;flex-basis:36px!important}
  .dmot-qbadge{width:24px!important;height:24px!important}
  .dmot-full{height:27px!important}
  .dmot-zoom{height:26px!important}
  .dmot-nav,.dmot-prev,.dmot-next{height:29px!important}

}
.dmot-shape-menu.dmot-floating-shape-menu{position:fixed;z-index:2147483600;width:176px;max-width:calc(100vw - 16px);margin:0;transform:none}
.dmot-shape-menu.dmot-floating-shape-menu.open{display:grid}