.qd-coder{--radius:1.2rem;--split:54%;--shadow:0 16px 40px rgba(16,24,40,.12);--border:1px solid rgba(16,24,40,.10);--panelBg:rgba(11,18,32,.72);--panelStroke:rgba(255,255,255,.10);--codeText:rgba(231,238,255,.92);--muted:rgba(231,238,255,.62);--handle:rgba(255,255,255,.92);--handleText:rgba(0,0,0,.82);--handleShadow:0 10px 30px rgba(0,0,0,.28);--fadeBg:rgba(11,18,32,.92);width:min(760px,100%);-webkit-text-size-adjust:100%;text-size-adjust:100%}.qd-coder__frame{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:none;border:var(--border);background:#111827;aspect-ratio:16/9;user-select:none;-webkit-user-select:none}.qd-coder__layer{position:absolute;inset:0}.qd-coder__layer--image{background-size:cover;background-position:center;clip-path:inset(0 calc(100% - var(--split)) 0 0);border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius)}.qd-coder__layer--right{padding:clamp(10px,2.4vw,18px);clip-path:inset(0 0 0 var(--split));display:grid;align-items:stretch;min-height:0}.qd-coder__rightGrid{height:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:0}.qd-coder__win{height:100%;background:var(--panelBg)!important;border:1px solid var(--panelStroke);border-radius:14px;overflow:hidden;backdrop-filter:blur(8px);display:flex;flex-direction:column;min-width:0;min-height:0}.qd-coder__winTop{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);flex:0 0 auto}.qd-coder__dot{width:9px;height:9px;border-radius:999px;display:inline-block;opacity:.95}.qd-coder__dot--r{background:#ff5f57}.qd-coder__dot--y{background:#febc2e}.qd-coder__dot--g{background:#28c840}.qd-coder__title{margin-left:6px;font:600 12px/1.1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:.2px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qd-coder__mockBody{flex:1 1 auto;padding:14px;display:grid;gap:12px;align-content:start;min-height:0}.qd-coder__mockHeader{display:grid;gap:8px}.qd-coder__mockModules{display:grid;gap:10px;margin-top:2px}.qd-coder__mockLine{height:7px;border-radius:999px;background:rgba(255,255,255,.16);width:60%;transform-origin:left center}.qd-dim{opacity:.72}.qd-mw-85{width:85%}.qd-mw-80{width:80%}.qd-mw-72{width:72%}.qd-mw-70{width:70%}.qd-mw-65{width:65%}.qd-mw-60{width:60%}.qd-mw-55{width:55%}.qd-mw-45{width:45%}.qd-mw-35{width:35%}.qd-coder__module{border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);padding:10px;display:grid;gap:8px;min-height:46px;opacity:0;transform:translateY(8px) scale(.985);animation:qd-module-in 520ms cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}@keyframes qd-module-in{to{opacity:1;transform:translateY(0) scale(1)}}.qd-coder__win--code{position:relative;min-height:0}.qd-coder__win--code:after{content:"";position:absolute;left:0;right:0;top:44px;height:18px;background:linear-gradient(to bottom,var(--fadeBg),rgba(11,18,32,0));pointer-events:none;z-index:2}.qd-coder__pre{margin:0;padding:12px 14px 14px;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:clamp(9px,1vw,10.5px)!important;line-height:1.55!important;color:var(--codeText)!important;background:transparent!important;overflow:auto;flex:1 1 auto;min-height:0}.qd-coder__pre code{background:transparent!important;color:inherit!important;font-size:1em!important}.qd-coder__code{display:block;white-space:pre;tab-size:2}.qd-coder__caret{display:inline-block;width:8px;height:1.15em;border-radius:2px;background:rgba(231,238,255,.92);vertical-align:-.2em;margin-left:1px;animation:qd-caret-blink 1s steps(1,end) infinite}@keyframes qd-caret-blink{0%,49%{opacity:1}50%,100%{opacity:0}}.qd-coder__tok--kw{color:rgba(120,196,255,.95)}.qd-coder__tok--fn{color:rgba(160,255,201,.95)}.qd-coder__tok--str{color:rgba(255,208,128,.95)}.qd-coder__tok--num{color:rgba(191,171,255,.95)}.qd-coder__tok--key{color:rgba(255,160,230,.95)}.qd-coder__tok--dim{color:rgba(231,238,255,.65)}.qd-coder__handle{position:absolute;top:0;left:var(--split);transform:translateX(-50%);width:2px;height:100%;background:rgba(255,255,255,.30);pointer-events:none}.qd-coder__handle:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:999px;background:var(--handle);box-shadow:var(--handleShadow);opacity:.96;z-index:0}.qd-coder__handleIcon{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);color:var(--handleText);width:22px;height:22px;opacity:.95;z-index:1}.qd-coder__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}.qd-coder__pre::-webkit-scrollbar{width:10px;height:10px}.qd-coder__pre::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:999px;border:2px solid rgba(0,0,0,0);background-clip:padding-box}.qd-coder--light{--panelBg:#fff;--panelStroke:rgba(98,99,99,.12);--codeText:rgba(15,23,42,.92);--muted:rgba(15,23,42,.62);--handle:rgba(255,255,255,.96);--handleText:rgba(2,6,23,.80);--handleShadow:0 10px 30px rgba(2,6,23,.18);--fadeBg:rgba(255,255,255,.98)}.qd-coder--light .qd-coder__frame{background:#f5f6f6;border:1px solid rgba(98,99,99,.16)}.qd-coder--light .qd-coder__layer--right{background:#f5f6f6}.qd-coder--light .qd-coder__win{background:#fff!important}.qd-coder--light .qd-coder__winTop{border-bottom:1px solid rgba(15,23,42,.10);background:rgba(15,23,42,.03)}.qd-coder--light .qd-coder__mockLine{background:rgba(15,23,42,.12)}.qd-coder--light .qd-coder__module{border:1px solid rgba(15,23,42,.10);background:rgba(15,23,42,.03)}.qd-coder--light .qd-coder__pre{background:#fff!important}.qd-coder--light .qd-coder__tok--kw{color:rgba(37,99,235,.95)}.qd-coder--light .qd-coder__tok--fn{color:rgba(5,150,105,.95)}.qd-coder--light .qd-coder__tok--str{color:rgba(217,119,6,.95)}.qd-coder--light .qd-coder__tok--num{color:rgba(124,58,237,.95)}.qd-coder--light .qd-coder__tok--key{color:rgba(219,39,119,.95)}.qd-coder--light .qd-coder__tok--dim{color:rgba(15,23,42,.55)}.qd-coder--light .qd-coder__caret{background:rgba(15,23,42,.85)}.qd-coder--light .qd-coder__win--code:after{background:linear-gradient(to bottom,var(--fadeBg),rgba(255,255,255,0))}@media (prefers-reduced-motion:reduce){.qd-coder__caret{animation:none;opacity:1}}@media (max-width:820px){.qd-coder__pre{font-size:11px!important}}@media (max-width:520px){.qd-coder__pre{font-size:10px!important}}

.qd-coder__handle::after{
transition:transform .18s ease;
}

.qd-coder:hover .qd-coder__handle::after{
transform:translate(-50%,-50%) scale(1.06);
}