.dmoe-player{--blue:#0f63b8;--blue2:#287bd8;--red:#e11925;--ink:#1f2937;--bg:#f4f8fc;--dmoe-app-h:calc(100dvh - 10px);position:relative;width:100%;max-width:none;height:var(--dmoe-app-h);margin:0;overflow:hidden;background:var(--bg);font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink)}
.dmoe-player *{box-sizing:border-box}
.dmoe-player button{font:inherit}
.dmoe-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)}
.dmoe-side{background:linear-gradient(180deg,#fbfdff,#f7faff);min-height:0}
.dmoe-left{grid-column:1;grid-row:1;border-right:1px solid #dbe8f4;display:flex;flex-direction:column;overflow:visible}
.dmoe-right{grid-column:3;grid-row:1;border-left:1px solid #f0dadd;display:flex;flex-direction:column;overflow:hidden}
.dmoe-mark img{filter:drop-shadow(0 1px 3px rgba(0,0,0,.04));border:0!important;box-shadow:none!important}
.dmoe-sep{height:1px;background:linear-gradient(90deg,var(--blue),var(--red));opacity:.55;margin:0 0 2px}
.dmoe-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}
.dmoe-tool .ico{font-size:15px;line-height:1}
.dmoe-tool.active{background:#eaf4ff;border-color:#8cb8e9;color:#0f5ca8;box-shadow:inset 3px 0 0 var(--blue)}
.dmoe-colors{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:1px 0;flex:0 0 auto}
.dmoe-color{width:23px;height:23px;border-radius:50%;border:2px solid #fff;outline:1px solid #c9d7e4;cursor:pointer;padding:0}
.dmoe-color.active{outline:3px solid #a7c9ee}
.dmoe-color[data-c="#176bb9"]{background:#176bb9}
.dmoe-color[data-c="#df2e38"]{background:#df2e38}
.dmoe-color[data-c="#111111"]{background:#111}
.dmoe-color[data-c="#178a4b"]{background:#178a4b}
.dmoe-widths{display:grid;grid-template-columns:1fr;gap:3px;flex:0 0 auto}
.dmoe-width{height:25px;border:1px solid #d8e5f1;border-radius:7px;background:#fff;color:#526a80;font-weight:850;cursor:pointer}
.dmoe-width.active{background:#eaf4ff;border-color:#8cb8e9;color:#0f5ca8}
.dmoe-shape-wrap{position:relative;flex:0 0 auto}
.dmoe-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}
.dmoe-shape-menu.open{display:grid}
.dmoe-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}
.dmoe-shape-opt:hover,.dmoe-shape-opt.active{background:#eaf4ff;border-color:#91b9e4;color:#0f5ca8}
.dmoe-center{grid-column:2;grid-row:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:#fff}
.dmoe-topbar{height:44px;flex:0 0 44px;display:flex;align-items:center;gap:10px;padding:5px 10px;border-bottom:1px solid #e6edf5;background:#fcfdff}
.dmoe-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}
.dmoe-qtitle{font-weight:900;color:#2d5175;font-size:13px;white-space:nowrap}
.dmoe-count{font-size:10px;color:#758598;font-weight:800;margin-left:3px;white-space:nowrap}
.dmoe-progress{height:6px;flex:1;background:#e7eef6;border-radius:99px;overflow:hidden}
.dmoe-progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--blue2),#498fe0);border-radius:99px;transition:width .15s ease}
.dmoe-zoom{display:flex;align-items:center;border:1px solid #d9e5f1;border-radius:9px;background:#fff;height:30px;overflow:hidden;flex:0 0 auto}
.dmoe-zoom button{border:0;background:#f5f8fb;height:100%;font-weight:900;color:#4b6580;cursor:pointer}
.dmoe-zoom .zminus,.dmoe-zoom .zplus{width:28px;font-size:14px}
.dmoe-zoom .dmoe-zval{min-width:46px;font-size:10px;background:#fff}
.dmoe-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}
.dmoe-stage{position:relative;flex:1 1 auto;min-height:0;background:#fff;overflow:hidden;border:0;outline:0;box-shadow:none}
.dmoe-imgshell{overscroll-behavior:contain;border:0!important;outline:0!important;border-radius:0!important;background:#fff;box-shadow:none!important;scrollbar-width:thin}
.dmoe-layer{width:100%}
.dmoe-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}
.dmoe-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;z-index:4}
.dmoe-stage.pan-mode .dmoe-imgshell{user-select:none;-webkit-user-select:none}
.dmoe-stage.pan-mode .dmoe-img{pointer-events:none}
.dmoe-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}
.dmoe-image-error.open{display:grid}
.dmoe-right-title{margin:2px 0 1px}
.dmoe-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)}
.dmoe-nav{height:34px;border:1px solid #d5e2ee;border-radius:10px;background:#fff;font-size:11px;font-weight:900;cursor:pointer;color:#37536d}
.dmoe-prev{justify-self:start;width:106px}
.dmoe-next{justify-self:end;width:106px;background:#edf6ff;border-color:#a9c9eb;color:#0f5ca8}
.dmoe-next.finish{background:#eaf8ef;border-color:#a9d8b8;color:#237546}
.dmoe-nav:disabled{opacity:.42;cursor:not-allowed}
.dmoe-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}
.dmoe-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}
.dmoe-qnum:hover{background:#f2f7fd;border-color:#9fc1e8;color:#0f5ca8}
.dmoe-qnum.answered{background:#edf5ff;border-color:#9fc2ec;color:#245f9f}
.dmoe-qnum.checked{background:#eef8f1;border-color:#a8d6b7;color:#287044}
.dmoe-qnum.current{background:var(--blue2)!important;color:#fff!important;border-color:var(--blue2)!important}
.dmoe-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)}
.dmoe-result.open{display:flex}
.dmoe-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)}
.dmoe-result h3{margin:0 0 9px;text-align:center;color:#245b9b;font-size:18px}
.dmoe-resultgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dmoe-stat{padding:8px 5px;border:1px solid #dce7f3;border-radius:10px;background:#fafdff;text-align:center}
.dmoe-stat strong{display:block;font-size:18px;color:#244d7b}
.dmoe-stat span{font-size:10.5px;color:#708093}
.dmoe-result-actions{display:flex;justify-content:center;gap:7px;margin-top:10px}
.dmoe-result-actions button{height:34px;border-radius:9px;padding:0 12px;font-size:11px;font-weight:900;cursor:pointer}
.dmoe-review{border:0;background:var(--blue2);color:#fff}
.dmoe-close-result{border:1px solid #cedcea;background:#f5f8fb;color:#465c70}
.dmoe-save{margin-top:7px;text-align:center;font-size:10.5px;color:#708093}
.dmoe-loading{padding:24px;text-align:center;color:#6b7787}
.dmoe-player.dmoe-fake-full,.dmoe-player:fullscreen,.dmoe-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}
.dmoe-player.dmoe-fake-full .dmoe-frame,.dmoe-player:fullscreen .dmoe-frame,.dmoe-player:-webkit-full-screen .dmoe-frame{border-radius:0}
body.dmoe-lock-scroll{overflow:hidden!important;touch-action:none}
@media(min-width:641px){
  .dmoe-player{width:100%;max-width:none}

}
@media(max-height:700px) and (min-width:641px){
  .dmoe-topbar{height:39px;flex-basis:39px}
  .dmoe-width{height:21px}

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

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

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

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

}
.dmoe-right-title{font-size:10px;font-weight:950;letter-spacing:.08em;color:#9a4b51;text-align:center;margin-bottom:2px}
.dmoe-answer-toggle{width:100%;min-height:52px;border:1px solid #efc3a4;border-radius:10px;background:#fff7ee;color:#a95614;font-size:11px;font-weight:900;line-height:1.15;padding:7px 5px;cursor:pointer}
.dmoe-answer-toggle:hover{background:#fff0de}
.dmoe-answer-toggle.showing{border-color:#a9caef;background:#edf6ff;color:#245b9b}
.dmoe-mode-badge{width:100%;min-height:32px;display:grid;place-items:center;border-radius:9px;background:#edf5ff;color:#245f9f;font-size:10px;font-weight:950;letter-spacing:.05em}
.dmoe-mode-badge.answer{background:#eef8f1;color:#287044;border:1px solid #b9dec5}
.dmoe-viewstate{width:100%;padding:7px 5px;border:1px solid #e2e9f1;border-radius:9px;background:#fbfdff;color:#65758a;font-size:9px;font-weight:800;line-height:1.25;text-align:center;overflow-wrap:anywhere}
.dmoe-canvas.answer-hidden{opacity:0;pointer-events:none!important}
.dmoe-player.answer-mode .dmoe-tool:not(.pan),.dmoe-player.answer-mode .dmoe-color,.dmoe-player.answer-mode .dmoe-width,.dmoe-player.answer-mode .dmoe-shape-wrap{opacity:.45;pointer-events:none}
.dmoe-qnum.seen{background:#edf5ff;border-color:#9fc2ec;color:#245f9f}
.dmoe-qnum.answer-seen{background:#eef8f1;border-color:#a8d6b7;color:#287044}
.dmoe-resultgrid.activity{grid-template-columns:repeat(3,1fr)}
.dmoe-resultbox .dmoe-summary{margin:0 0 10px;text-align:center;color:#5f7186;font-size:12px}
@media (max-width:720px), (max-width:900px) and (max-height:520px){
  .dmoe-right-title{display:none!important}
  .dmoe-answer-toggle{flex:0 0 104px!important;width:104px!important;height:42px!important;min-height:42px!important;padding:4px!important;font-size:9px!important;white-space:normal!important}
  .dmoe-mode-badge{flex:0 0 64px!important;width:64px!important;height:42px!important;min-height:42px!important;font-size:8.5px!important}
  .dmoe-viewstate{flex:0 0 148px!important;width:148px!important;height:42px!important;min-height:42px!important;display:grid!important;place-items:center!important;padding:4px!important;font-size:8px!important;line-height:1.12!important;white-space:normal!important}

}
@media (max-width:900px) and (max-height:520px){
  .dmoe-answer-toggle{height:36px!important;min-height:36px!important;flex-basis:92px!important;width:92px!important}
  .dmoe-mode-badge{height:36px!important;min-height:36px!important;flex-basis:58px!important;width:58px!important}
  .dmoe-viewstate{height:36px!important;min-height:36px!important;flex-basis:132px!important;width:132px!important}

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