.dq{--dq-bg:#08090a;--dq-panel:#0f1114;--dq-panel2:#131619;--dq-line:#ffffff17;--dq-line2:#ffffff0d;--dq-fg:#edeef0;--dq-fg2:#edeef099;--dq-fg3:#edeef061;--dq-placeholder:#edeef047;--dq-accent:#4f8cff;--dq-accent-soft:#4f8cff1f;--dq-accent-line:#4f8cff59;--dq-rec:#ff6369;--dq-rec-line:#ff636980;--dq-rec-soft:#ff636926;--dq-btn-bg:#edeef0;--dq-btn-fg:#08090a;--dq-ease:cubic-bezier(.2, .7, .2, 1);background:var(--dq-bg);min-height:100vh;color:var(--dq-fg);font-family:var(--font-sans), "IBM Plex Sans", system-ui, sans-serif;-webkit-font-smoothing:antialiased}.dq[data-theme=light]{--dq-bg:#f6f6f4;--dq-panel:#fff;--dq-panel2:#fafaf8;--dq-line:#0c0e1021;--dq-line2:#0c0e1012;--dq-fg:#0b0d0f;--dq-fg2:#0b0d0f9e;--dq-fg3:#0b0d0f6b;--dq-placeholder:#0b0d0f57;--dq-accent:#2f6be0;--dq-accent-soft:#2f6be017;--dq-accent-line:#2f6be047;--dq-rec:#ce2c31;--dq-rec-line:#ce2c316b;--dq-rec-soft:#ce2c311a;--dq-btn-bg:#0b0d0f;--dq-btn-fg:#f6f6f4}.dq__grid{background-image:linear-gradient(var(--dq-line2) 1px, transparent 1px), linear-gradient(90deg, var(--dq-line2) 1px, transparent 1px);background-size:78px 78px}.dq__grid--masked{-webkit-mask-image:radial-gradient(110% 80% at 20% 10%,#000 10%,#0000 76%);mask-image:radial-gradient(110% 80% at 20% 10%,#000 10%,#0000 76%)}.dq .mono,.dq__mono{font-family:var(--font-mono), "IBM Plex Mono", monospace}.dq a{color:var(--dq-accent);text-decoration:none}:where(.dq) input,:where(.dq) textarea,:where(.dq) select,:where(.dq) button{color:inherit;font-family:inherit}.dq ::placeholder{color:var(--dq-placeholder)}.dq ::selection{background:var(--dq-accent-soft)}.dq :focus-visible{outline:2px solid var(--dq-accent);outline-offset:2px;border-radius:4px}.dq__short{border:0;border-bottom:1px solid var(--dq-line);letter-spacing:-.024em;background:0 0;width:100%;max-width:520px;height:58px;padding:0 2px;font-size:24px;transition:border-color .3s}.dq__short:focus{border-bottom-color:var(--dq-accent);outline:none}.dq__textarea{background:var(--dq-panel);border:1px solid var(--dq-line);resize:vertical;border-radius:8px;width:100%;max-width:660px;padding:16px 18px;font-size:16px;line-height:1.6;transition:border-color .3s}.dq__textarea:focus{border-color:var(--dq-accent-line);outline:none}.dq__choices{grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:9px;max-width:660px;display:grid}.dq__choice{color:var(--dq-fg);border:1px solid var(--dq-line);background:var(--dq-panel);text-align:left;cursor:pointer;border-radius:7px;align-items:center;gap:12px;padding:13px 15px;transition:border-color .3s;display:flex;position:relative}.dq__choice:hover{border-color:var(--dq-fg3)}.dq__choice[aria-pressed=true]{border-color:var(--dq-accent-line);background:var(--dq-accent-soft)}.dq__choice-key{border:1px solid var(--dq-line);width:22px;height:22px;font-family:var(--font-mono), "IBM Plex Mono", monospace;color:var(--dq-fg2);border-radius:4px;flex:none;place-items:center;font-size:10.5px;display:grid}.dq__scale{flex-wrap:wrap;gap:6px;max-width:660px;display:flex}.dq__scale button{color:var(--dq-fg);border:1px solid var(--dq-line);background:var(--dq-panel);min-width:44px;height:52px;font-family:var(--font-mono), "IBM Plex Mono", monospace;cursor:pointer;border-radius:6px;flex:44px;font-size:14px;transition:border-color .3s;position:relative}.dq__scale button:hover{border-color:var(--dq-fg3)}.dq__scale button[aria-pressed=true]{border-color:var(--dq-accent-line);background:var(--dq-accent-soft);color:var(--dq-accent)}.dq__card{border:1px solid var(--dq-line);background:var(--dq-panel);border-radius:8px;padding:15px 17px}.dq__cell{background:var(--dq-panel2);border:1px solid var(--dq-line);border-radius:6px;width:100%;height:38px;padding:0 11px;font-size:13.5px;transition:border-color .3s}.dq__cell:focus{border-color:var(--dq-accent-line);outline:none}.dq__add{border:1px dashed var(--dq-line);height:38px;color:var(--dq-fg2);cursor:pointer;background:0 0;border-radius:6px;align-self:flex-start;align-items:center;gap:9px;padding:0 15px;font-size:13px;transition:border-color .3s,color .3s;display:inline-flex}.dq__add:hover{border-color:var(--dq-accent-line);color:var(--dq-fg)}.dq__drop{border:1px dashed var(--dq-line);background:var(--dq-panel);cursor:pointer;border-radius:10px;width:100%;padding:32px 22px;transition:border-color .3s}.dq__drop:hover{border-color:var(--dq-accent-line)}.dq__pair{border:1px solid var(--dq-line);background:var(--dq-panel);border-radius:8px;flex-wrap:wrap;align-items:center;gap:12px;padding:13px 15px;display:flex}.dq__pair input{background:var(--dq-panel2);border:1px solid var(--dq-line);min-width:0;height:40px;font-family:var(--font-mono), "IBM Plex Mono", monospace;border-radius:6px;flex:190px;padding:0 12px;font-size:13px}.dq__pair input:focus{border-color:var(--dq-accent-line);outline:none}.dq__dash{background:repeating-linear-gradient(90deg, var(--dq-accent-line) 0 4px, transparent 4px 9px);width:26px;height:1px;animation:1.5s linear infinite dqDash}.dq__matrix{border:1px solid var(--dq-line);border-radius:8px;max-width:700px;overflow:hidden}.dq__matrix-row{border-bottom:1px solid var(--dq-line2);align-items:center;gap:12px;padding:12px 16px;display:flex}.dq__matrix-cell{border:1px solid var(--dq-line);background:var(--dq-panel);cursor:pointer;border-radius:6px;flex:0 0 84px;height:34px;transition:border-color .3s;position:relative}.dq__matrix-cell:hover{border-color:var(--dq-fg3)}.dq__matrix-cell span{background:var(--dq-placeholder);border-radius:50%;width:6px;height:6px;margin:0 auto;display:block}.dq__matrix-cell[aria-pressed=true]{border-color:var(--dq-accent-line);background:var(--dq-accent-soft)}.dq__matrix-cell[aria-pressed=true] span{background:var(--dq-accent)}.dq__primary{background:var(--dq-btn-bg);height:46px;color:var(--dq-btn-fg);cursor:pointer;transition:transform .35s var(--dq-ease), opacity .3s;border:0;border-radius:7px;align-items:center;gap:10px;padding:0 22px;font-size:14.5px;font-weight:500;display:inline-flex}.dq__primary--lg{height:50px;padding:0 24px;font-size:15px}.dq__primary:hover{opacity:.9;transform:translateY(-2px)}.dq__primary[disabled]{opacity:.5;pointer-events:none}.dq__ghost{border:1px solid var(--dq-line);height:40px;color:var(--dq-fg2);cursor:pointer;background:0 0;border-radius:6px;padding:0 14px;font-size:13px;transition:color .3s,border-color .3s}.dq__ghost:hover{color:var(--dq-fg);border-color:var(--dq-fg3)}.dq__quiet{height:40px;color:var(--dq-fg2);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;padding:0 13px;font-size:13.5px}.dq__quiet:hover{color:var(--dq-fg)}.dq__rec{border:1px solid var(--dq-line);background:var(--dq-panel2);height:40px;color:var(--dq-fg2);cursor:pointer;border-radius:6px;align-items:center;gap:10px;padding:0 15px;font-size:13.5px;transition:border-color .3s,color .3s;display:inline-flex}.dq__rec:hover{border-color:var(--dq-rec-line);color:var(--dq-fg)}.dq__rec-dot{background:var(--dq-rec);border-radius:50%;width:9px;height:9px}@keyframes dqIn{0%{opacity:0;filter:blur(2px);transform:translateY(14px)}to{opacity:1;filter:none;transform:none}}@keyframes dqSoftPulse{0%,to{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}@keyframes dqRecPulse{0%,to{box-shadow:0 0 0 0 var(--dq-rec-line)}50%{box-shadow:0 0 0 9px #0000}}@keyframes dqFlowDot{0%{opacity:0;top:-6%}12%{opacity:1}88%{opacity:1}to{opacity:0;top:104%}}@keyframes dqDash{to{background-position:-13px 0}}@keyframes dqSweep{0%{transform:translate(-100%)}to{transform:translate(100%)}}.dq__screen{animation:dqIn .5s var(--dq-ease)}.dq__pulse{animation:3.2s ease-in-out infinite dqSoftPulse}.dq__flowdot{animation:4.6s linear infinite dqFlowDot}@media (prefers-reduced-motion:reduce){.dq *,.dq :before,.dq :after{transition:none!important;animation:none!important}}@media (pointer:coarse){.dq__textarea,.dq__cell,.dq__pair input,.dq input,.dq textarea{font-size:16px}}@keyframes dqBar{0%,to{transform:scaleY(.55)}50%{transform:scaleY(1)}}.dq__bar{transform-origin:bottom;animation:1.1s ease-in-out infinite dqBar}
