.ydl-clab{--bg:#071118;--panel:#0b1821;--panel2:#0e1e28;--line:#173746;--line2:#215062;--text:#e9f7fd;--muted:#8fa9b5;--cyan:#28c8e8;--cyan2:#7ee8fb;--green:#64dfa1;--amber:#f0c968;--red:#f08b94;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-clab *{box-sizing:border-box}.ydl-clab button,.ydl-clab textarea,.ydl-clab select{font:inherit}.ydl-clab button{cursor:pointer}.ydl-clab [hidden]{display:none!important}.ydl-clab__hero{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:16px;margin-bottom:14px}.ydl-clab__hero-copy,.ydl-clab__local,.ydl-clab__progress-card,.ydl-clab__sidebar,.ydl-clab__brief,.ydl-clab__editor-panel,.ydl-clab__preview-panel,.ydl-clab__actionbar,.ydl-clab__feedback,.ydl-clab__solution,.ydl-clab__footer-note{border:1px solid var(--line);border-radius:12px;background:rgba(9,22,30,.84)}
.ydl-clab__hero-copy,.ydl-clab__local{padding:20px}.ydl-clab__eyebrow,.ydl-clab__local span,.ydl-clab__progress-card span,.ydl-clab__sidebar-head span,.ydl-clab__activity-kicker,.ydl-clab__editor-panel header span,.ydl-clab__preview-panel header span,.ydl-clab__feedback>span,.ydl-clab__solution-head span,.ydl-clab__solution-grid>div>span,.ydl-clab__footer-note>span{font:700 10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:var(--cyan)}
.ydl-clab__hero h2{margin:8px 0;font-size:clamp(24px,3vw,36px);line-height:1.15;color:#fff}.ydl-clab__hero p{margin:0;color:#a9bdc7;line-height:1.8}.ydl-clab__local{display:flex;flex-direction:column;justify-content:center}.ydl-clab__local strong{font-size:20px;color:var(--green);margin:7px 0}.ydl-clab__local small{color:var(--muted);line-height:1.6}
.ydl-clab__progress-card{display:grid;grid-template-columns:auto minmax(180px,1fr) auto;gap:14px;align-items:center;padding:12px 14px;margin-bottom:14px}.ydl-clab__progress-card strong{display:block;color:#fff;font:800 13px ui-monospace,monospace;margin-top:3px}.ydl-clab__progress{height:8px;border-radius:99px;background:#061118;border:1px solid #163341;overflow:hidden}.ydl-clab__progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--green));transition:width .2s ease}.ydl-clab__ghost,.ydl-clab__primary{border-radius:8px;font-weight:800;transition:.16s ease}.ydl-clab__ghost{border:1px solid #285061;background:#0a1a23;color:#a9c6d2;padding:8px 10px;font-size:12px}.ydl-clab__ghost:hover{border-color:var(--cyan);color:#fff}.ydl-clab__primary{border:1px solid #42d8f2;background:#21bdd8;color:#041318;padding:12px 18px}.ydl-clab__primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.ydl-clab__mode-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}.ydl-clab__mode-nav button{border:1px solid var(--line);border-radius:10px;background:#08161e;color:#9fb4bd;text-align:left;padding:10px 12px;display:grid;grid-template-columns:26px 1fr;gap:2px 5px;align-items:center}.ydl-clab__mode-nav button>span{grid-row:1/3;color:#527787;font:800 11px ui-monospace,monospace}.ydl-clab__mode-nav button>small{font-size:10px;color:#718d98}.ydl-clab__mode-nav button.is-active{border-color:var(--cyan);background:#0b2631;color:#f0fbff;box-shadow:inset 0 0 0 1px rgba(40,200,232,.1)}.ydl-clab__mode-nav button.is-active>span{color:var(--cyan)}
.ydl-clab__course{display:grid;grid-template-columns:250px minmax(0,1fr);gap:14px;align-items:start}.ydl-clab__sidebar{padding:13px;position:sticky;top:24px}.ydl-clab__sidebar-head{display:grid;gap:9px;border-bottom:1px solid #143440;padding:3px 2px 12px;margin-bottom:10px}.ydl-clab__sidebar-head h3{margin:3px 0 0;color:#fff;font-size:18px}.ydl-clab__sidebar select{width:100%;background:#061118;color:#dff4fb;border:1px solid #234a5b;border-radius:7px;padding:7px 8px;font-size:11px}.ydl-clab__activity-list{display:grid;gap:6px;max-height:690px;overflow:auto;padding-right:2px}.ydl-clab__activity{border:1px solid #153542;background:#07141b;border-radius:9px;padding:9px 10px;text-align:left;color:#9fb5be;display:grid;grid-template-columns:26px 1fr auto;gap:7px;align-items:start}.ydl-clab__activity:hover{border-color:#276076}.ydl-clab__activity.is-active{border-color:var(--cyan);background:#0a2631;color:#eefbff}.ydl-clab__activity.is-complete{box-shadow:inset 3px 0 0 var(--green)}.ydl-clab__activity b{font:800 10px ui-monospace,monospace;color:#567b8b}.ydl-clab__activity strong{font-size:12px;line-height:1.45}.ydl-clab__activity small{grid-column:2/4;color:#6f8e9a;font-size:10px}.ydl-clab__activity em{font-style:normal;color:var(--green);font-size:11px}
.ydl-clab__main{min-width:0;display:grid;gap:14px}.ydl-clab__brief{padding:16px}.ydl-clab__brief-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.ydl-clab__brief h3{margin:5px 0 7px;color:#fff;font-size:22px}.ydl-clab__brief p{margin:0;color:#9eb5bf;line-height:1.75}.ydl-clab__state{border:1px solid #28566a;border-radius:999px;background:#07161d;color:var(--cyan);padding:5px 8px;font:800 10px ui-monospace,monospace;white-space:nowrap}.ydl-clab__state.is-complete{border-color:#2c684b;color:var(--green);background:#0a2118}.ydl-clab__objective{border-left:3px solid var(--cyan);background:#071820;border-radius:7px;padding:10px 12px;margin-top:12px}.ydl-clab__objective strong{font-size:11px;color:#e9f8fd}.ydl-clab__objective p{font-size:12px;margin-top:4px}.ydl-clab__brief ol{margin:11px 0 0;padding-left:22px;color:#9db3bd;font-size:12px;line-height:1.7}.ydl-clab__brief-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.ydl-clab__hint{margin-top:10px;border:1px solid #655523;background:#251f08;color:#e8d071;border-radius:8px;padding:10px 12px;font-size:12px;line-height:1.7}
.ydl-clab__mobile-tabs{display:none;grid-template-columns:repeat(3,1fr);gap:6px}.ydl-clab__mobile-tabs button{border:1px solid #1b4252;background:#08171f;color:#87a3ae;border-radius:8px;padding:9px 7px;font:800 10px ui-monospace,monospace}.ydl-clab__mobile-tabs button.is-active{border-color:var(--cyan);color:#eafaff;background:#0b2631}
.ydl-clab__workbench{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(280px,1.15fr);gap:10px;min-width:0}.ydl-clab__editor-panel,.ydl-clab__preview-panel{min-width:0;overflow:hidden}.ydl-clab__editor-panel header,.ydl-clab__preview-panel header{height:44px;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid #153643;background:#07151d}.ydl-clab__editor-panel header div,.ydl-clab__preview-panel header div{display:flex;align-items:center;gap:8px}.ydl-clab__editor-panel header strong,.ydl-clab__preview-panel header strong{font-size:11px;color:#a9bdc6}.ydl-clab__editor-panel header button,.ydl-clab__preview-panel header button{border:1px solid #214757;background:#0a1b23;color:#86a6b2;border-radius:6px;padding:5px 7px;font:800 9px ui-monospace,monospace}.ydl-clab__editor-panel textarea{display:block;width:100%;height:360px;resize:vertical;border:0!important;border-radius:0!important;outline:none!important;box-shadow:none!important;background:#061118!important;color:#d9f4fd!important;padding:13px!important;font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;tab-size:2}.ydl-clab__editor-panel textarea:focus{box-shadow:inset 0 0 0 2px rgba(40,200,232,.18)!important}.ydl-clab__preview-panel iframe{display:block;width:100%;height:360px;border:0;background:#fff}
.ydl-clab__actionbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px}.ydl-clab__actionbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ydl-clab__actionbar small{color:#758f9a;font-size:10px}.ydl-clab__feedback{display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:start;padding:12px;border-left:3px solid var(--cyan)}.ydl-clab__feedback p{margin:0;color:#9db3bc;font-size:12px;line-height:1.7}.ydl-clab__feedback.is-success{border-left-color:var(--green);background:#081b16}.ydl-clab__feedback.is-success>span{color:var(--green)}.ydl-clab__feedback.is-warn{border-left-color:var(--amber);background:#211c08}.ydl-clab__feedback.is-warn>span{color:var(--amber)}
.ydl-clab__solution{padding:14px}.ydl-clab__solution-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}.ydl-clab__solution-head h3{margin:3px 0 0;color:#fff;font-size:18px}.ydl-clab__solution-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.ydl-clab__solution-grid>div{min-width:0}.ydl-clab__solution-grid pre{margin:5px 0 0;max-height:230px;overflow:auto;white-space:pre-wrap;word-break:break-word;border:1px solid #163744;border-radius:8px;background:#061118;color:#bfe8f4;padding:11px;font:11px/1.6 ui-monospace,monospace}.ydl-clab__solution-preview{grid-column:1/-1}.ydl-clab__solution-preview iframe{display:block;width:100%;height:260px;border:1px solid #163744;border-radius:8px;background:#fff;margin-top:5px}.ydl-clab__footer-note{display:grid;grid-template-columns:80px 1fr;gap:10px;align-items:start;margin-top:14px;padding:12px}.ydl-clab__footer-note p{margin:0;color:#809aa6;font-size:12px;line-height:1.7}
@media(max-width:1120px){.ydl-clab__course{grid-template-columns:220px minmax(0,1fr)}.ydl-clab__workbench{grid-template-columns:1fr 1fr}.ydl-clab__preview-panel{grid-column:1/-1}.ydl-clab__preview-panel iframe{height:330px}}
@media(max-width:860px){.ydl-clab__hero{grid-template-columns:1fr}.ydl-clab__local{min-height:105px}.ydl-clab__progress-card{grid-template-columns:1fr auto}.ydl-clab__progress{grid-column:1/-1;grid-row:2}.ydl-clab__mode-nav{grid-template-columns:1fr 1fr}.ydl-clab__course{grid-template-columns:1fr}.ydl-clab__sidebar{position:static}.ydl-clab__activity-list{grid-template-columns:1fr 1fr;max-height:none}}
@media(max-width:680px){.ydl-clab{padding:12px;border-radius:12px}.ydl-clab__hero-copy,.ydl-clab__local,.ydl-clab__brief,.ydl-clab__sidebar{padding:13px}.ydl-clab__mode-nav{grid-template-columns:1fr 1fr}.ydl-clab__activity-list{grid-template-columns:1fr}.ydl-clab__mobile-tabs{display:grid}.ydl-clab__workbench{display:block}.ydl-clab__workbench>[data-clab-panel]{display:none}.ydl-clab__workbench>[data-clab-panel].is-active{display:block}.ydl-clab__editor-panel textarea,.ydl-clab__preview-panel iframe{height:360px}.ydl-clab__actionbar{align-items:stretch;flex-direction:column}.ydl-clab__actionbar-left{justify-content:space-between}.ydl-clab__primary{width:100%}.ydl-clab__solution-grid{grid-template-columns:1fr}.ydl-clab__solution-preview{grid-column:auto}.ydl-clab__brief-top{flex-direction:column}.ydl-clab__footer-note{grid-template-columns:1fr}}
@media(max-width:460px){.ydl-clab__mode-nav{grid-template-columns:1fr}.ydl-clab__progress-card{grid-template-columns:1fr}.ydl-clab__progress-card>.ydl-clab__ghost{width:100%}.ydl-clab__progress{grid-row:auto}.ydl-clab__editor-panel textarea,.ydl-clab__preview-panel iframe{height:330px}}
@media(prefers-reduced-motion:reduce){.ydl-clab__progress i,.ydl-clab__ghost,.ydl-clab__primary{transition:none}}