.ydl-cvb{--bg:#071118;--panel:#0b1821;--panel2:#0e1e28;--line:#173746;--line2:#215062;--text:#e9f7fd;--muted:#8fa9b5;--cyan:#28c8e8;--cyan2:#7ee8fb;--green:#64dfa1;background:linear-gradient(180deg,rgba(10,28,37,.98),rgba(6,16,22,.98));border:1px solid var(--line);border-radius:16px;padding:20px;color:var(--text);box-shadow:0 16px 40px rgba(0,0,0,.16)}
.ydl-cvb *{box-sizing:border-box}.ydl-cvb button,.ydl-cvb input,.ydl-cvb select{font:inherit}.ydl-cvb__hero{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:18px;margin-bottom:14px}.ydl-cvb__hero>div:first-child,.ydl-cvb__local{border:1px solid var(--line);border-radius:12px;background:rgba(10,25,34,.75);padding:20px}.ydl-cvb__eyebrow,.ydl-cvb__panel-head span,.ydl-cvb__local span,.ydl-cvb__footer-note>span,.ydl-cvb__presetbar>span{font:700 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:var(--cyan)}.ydl-cvb__hero h2{margin:8px 0;font-size:clamp(22px,3vw,34px);line-height:1.15;color:#fff}.ydl-cvb__hero p{margin:0;color:#a9bdc7;line-height:1.8}.ydl-cvb__local{display:flex;flex-direction:column;justify-content:center}.ydl-cvb__local strong{font-size:19px;color:var(--green);margin:6px 0}.ydl-cvb__local small{color:var(--muted)}
.ydl-cvb__presetbar{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;background:#07141b;padding:11px 12px;margin-bottom:14px}.ydl-cvb__preset-buttons{display:flex;gap:7px;flex-wrap:wrap}.ydl-cvb__chip,.ydl-cvb__ghost,.ydl-cvb__primary{border-radius:8px;cursor:pointer;transition:.16s ease}.ydl-cvb__chip{border:1px solid #1b4050;background:#0a1c25;color:#9db6c0;padding:7px 10px;font:700 10px ui-monospace,monospace;letter-spacing:.05em}.ydl-cvb__chip:hover,.ydl-cvb__chip.is-active{border-color:var(--cyan);color:#eafaff;background:#0b2a35}.ydl-cvb__ghost{border:1px solid #214859;background:#0a1b23;color:#bfd2da;padding:8px 11px;font-size:12px}.ydl-cvb__ghost:hover{border-color:var(--cyan);color:#fff}.ydl-cvb__primary{border:1px solid #3bd7f1;background:#16b4d1;color:#041116;padding:10px 14px;font-weight:800}.ydl-cvb__primary:hover{filter:brightness(1.08);transform:translateY(-1px)}.ydl-cvb__primary--small{padding:8px 11px;font-size:12px}
.ydl-cvb__layout{display:grid;grid-template-columns:minmax(320px,.82fr) minmax(0,1.18fr);gap:14px;align-items:start}.ydl-cvb__right{display:grid;gap:14px}.ydl-cvb__panel{border:1px solid var(--line);border-radius:12px;background:rgba(9,22,30,.82);padding:16px}.ydl-cvb__panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}.ydl-cvb__panel-head h3{margin:4px 0 0;color:#fff;font-size:18px}.ydl-cvb__live{border:1px solid #265b47;border-radius:999px;padding:5px 8px;color:var(--green)!important;background:#0a211a}
.ydl-cvb__group{border:1px solid #153542;border-radius:10px;background:#07141b;margin-top:9px;overflow:hidden}.ydl-cvb__group summary{cursor:pointer;padding:11px 12px;color:#cfe8f2;font:800 11px ui-monospace,monospace;letter-spacing:.08em;list-style:none}.ydl-cvb__group summary::-webkit-details-marker{display:none}.ydl-cvb__group summary:after{content:'+';float:right;color:var(--cyan)}.ydl-cvb__group[open] summary:after{content:'−'}.ydl-cvb__fields{display:grid;gap:11px;padding:0 12px 13px}.ydl-cvb__field>span,.ydl-cvb__mini-range>span{display:flex;justify-content:space-between;gap:10px;align-items:center;color:#d8eaf1;font-size:12px;margin-bottom:5px}.ydl-cvb__field output,.ydl-cvb__mini-range output{color:var(--cyan2);font:700 10px ui-monospace,monospace}.ydl-cvb input[type=range]{width:100%;accent-color:var(--cyan)}.ydl-cvb__color-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.ydl-cvb__color-grid>label,.ydl-cvb__select{display:flex;justify-content:space-between;gap:10px;align-items:center;color:#a9bdc7;font-size:12px;border:1px solid #153542;border-radius:8px;background:#081820;padding:8px 9px}.ydl-cvb input[type=color]{width:38px;height:28px;padding:1px;border:1px solid #265063;border-radius:6px;background:#061118}.ydl-cvb__select select{min-width:120px;background:#061118;color:#dff5fc;border:1px solid #235063;border-radius:6px;padding:6px 8px}.ydl-cvb [hidden]{display:none!important}
.ydl-cvb__stage{min-height:360px;display:grid;place-items:center;overflow:hidden;border:1px dashed #1c4351;border-radius:11px;background:radial-gradient(circle at 50% 25%,rgba(40,200,232,.08),transparent 45%),#061118;padding:52px 32px}.ydl-cvb__preview{width:min(100%,470px);min-height:210px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;transform-origin:center;transition:border-radius .12s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease,color .12s ease,padding .12s ease,opacity .12s ease}.ydl-cvb__preview span{font:800 10px ui-monospace,monospace;letter-spacing:.12em;opacity:.72}.ydl-cvb__preview strong{font-size:clamp(24px,5vw,40px);line-height:1.1;margin:8px 0}.ydl-cvb__preview small{max-width:340px;line-height:1.7;opacity:.78}.ydl-cvb__preview:focus{outline:2px solid var(--cyan);outline-offset:5px}
.ydl-cvb__code-panel{min-width:0}.ydl-cvb__panel-head--code{align-items:center}.ydl-cvb__code{margin:0;max-height:310px;overflow:auto;border:1px solid #153542;border-radius:9px;background:#061118;padding:14px;color:#bfe9f5;font:12px/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word}.ydl-cvb__status{margin:9px 0 0;color:#829ca7;font-size:12px}.ydl-cvb__status.is-error{color:#f1b0b5}.ydl-cvb__footer-note{display:grid;grid-template-columns:80px 1fr;gap:10px;align-items:start;margin-top:14px;border:1px solid var(--line);background:#07141b;border-radius:10px;padding:12px}.ydl-cvb__footer-note p{margin:0;color:#809aa6;font-size:12px;line-height:1.7}
@media(max-width:960px){.ydl-cvb__layout{grid-template-columns:1fr}.ydl-cvb__controls{order:2}.ydl-cvb__right{order:1}.ydl-cvb__stage{min-height:330px}}
@media(max-width:720px){.ydl-cvb__hero{grid-template-columns:1fr}.ydl-cvb__local{min-height:105px}.ydl-cvb__presetbar{grid-template-columns:1fr}.ydl-cvb__preset-buttons{width:100%}.ydl-cvb__preset-buttons .ydl-cvb__chip{flex:1 1 120px}.ydl-cvb__presetbar>.ydl-cvb__ghost{width:100%}}
@media(max-width:560px){.ydl-cvb{padding:12px;border-radius:12px}.ydl-cvb__hero>div:first-child,.ydl-cvb__local,.ydl-cvb__panel{padding:13px}.ydl-cvb__color-grid{grid-template-columns:1fr}.ydl-cvb__stage{min-height:290px;padding:38px 18px}.ydl-cvb__panel-head--code{align-items:flex-start;flex-direction:column}.ydl-cvb__panel-head--code .ydl-cvb__primary{width:100%}.ydl-cvb__footer-note{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.ydl-cvb__preview,.ydl-cvb__chip,.ydl-cvb__ghost,.ydl-cvb__primary{transition:none}}