/* BrounStack authenticated tutorial workspace */
:root{--tw-navy:#0b1f3a;--tw-blue:#0b7cff;--tw-cyan:#20bdf5;--tw-text:#10233f;--tw-muted:#6f8198;--tw-line:#dce8f4;--tw-bg:#f5f9ff;--tw-panel:#fff;--tw-shadow:0 18px 48px rgba(28,70,120,.10)}
*{box-sizing:border-box}html{background:var(--tw-bg);color-scheme:light}body.tutorial-workspace-page{margin:0;min-height:100vh;background:radial-gradient(circle at 7% 2%,rgba(11,124,255,.10),transparent 24%),radial-gradient(circle at 92% 0%,rgba(32,189,245,.11),transparent 22%),linear-gradient(180deg,#fff 0,var(--tw-bg) 54%,#f2f7fd 100%);color:var(--tw-text);font-family:Inter,Segoe UI,Arial,sans-serif}.tw-shell{width:min(1380px,calc(100% - 44px));margin:auto;padding:30px 0 54px}.tw-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr);gap:20px;align-items:stretch}.tw-hero-copy,.tw-summary,.tw-section,.tw-practice{border:1px solid var(--tw-line);border-radius:22px;background:rgba(255,255,255,.92);box-shadow:var(--tw-shadow)}.tw-hero-copy{padding:34px 36px;background:radial-gradient(circle at 92% 12%,rgba(11,124,255,.11),transparent 31%),linear-gradient(135deg,#fff,#f7fbff)}.tw-eyebrow{display:inline-flex;align-items:center;color:#0b6dcc;font-size:9px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.tw-hero h1{max-width:760px;margin:13px 0 13px;font-size:clamp(38px,5vw,62px);line-height:.98;letter-spacing:-2.3px}.tw-hero h1 span{background:linear-gradient(90deg,#0b7cff,#20bdf5);-webkit-background-clip:text;background-clip:text;color:transparent}.tw-hero p{max-width:760px;margin:0;color:#667b94;font-size:15px;line-height:1.75}.tw-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:23px}.tw-btn{min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 15px;border:1px solid #d4e2f0;border-radius:11px;background:#fff;color:#294764;text-decoration:none;font-size:11px;font-weight:850;transition:.18s ease}.tw-btn:hover{transform:translateY(-1px);border-color:#a9ccef;box-shadow:0 9px 22px rgba(33,88,147,.08)}.tw-btn.primary{border-color:transparent;background:linear-gradient(100deg,#0b7cff,#1ca9ed);color:#fff;box-shadow:0 11px 24px rgba(11,124,255,.20)}.tw-btn.subtle{background:#f7faff;color:#5f7893}.tw-summary{padding:25px 24px;background:linear-gradient(155deg,#0b1f3a,#0c3158);color:#fff}.tw-summary-label{display:block;color:#71dcff;font-size:8px;font-weight:900;letter-spacing:.16em}.tw-summary>strong{display:block;margin:8px 0 18px;font-size:22px;letter-spacing:-.5px}.tw-summary-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08);color:#bed2e7;font-size:11px}.tw-summary-row b{color:#fff}.tw-summary-total{display:flex;align-items:center;justify-content:space-between;margin-top:15px;padding:12px 13px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.05);color:#a9bfd8;font-size:10px}.tw-summary-total strong{color:#76dcff;font-size:12px}.tw-section{margin-top:18px;padding:26px}.tw-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:19px}.tw-section-head h2{margin:7px 0 5px;font-size:28px;letter-spacing:-.8px}.tw-section-head p{max-width:760px;margin:0;color:var(--tw-muted);font-size:12px;line-height:1.65}.tw-secure{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:#5f7894;font-size:9px;font-weight:800}.tw-secure i{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.10)}.tw-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.tw-card{--accent:#0b7cff;--accent-rgb:11,124,255;min-width:0;min-height:270px;display:flex;flex-direction:column;padding:18px;border:1px solid rgba(var(--accent-rgb),.15);border-radius:17px;background:radial-gradient(circle at 100% 0%,rgba(var(--accent-rgb),.10),transparent 28%),#fff;color:inherit;text-decoration:none;box-shadow:0 9px 24px rgba(31,73,125,.045);transition:.2s ease}.tw-card:hover{transform:translateY(-3px);border-color:rgba(var(--accent-rgb),.34);box-shadow:0 17px 36px rgba(31,73,125,.10)}.tw-card.html{--accent:#f26b43;--accent-rgb:242,107,67}.tw-card.css{--accent:#278eff;--accent-rgb:39,142,255}.tw-card.javascript{--accent:#c89405;--accent-rgb:200,148,5}.tw-card.python{--accent:#6757e8;--accent-rgb:103,87,232}.tw-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.tw-icon{width:43px;height:43px;display:grid;place-items:center;border:1px solid rgba(var(--accent-rgb),.18);border-radius:12px;background:rgba(var(--accent-rgb),.08);color:var(--accent);font-size:10px;font-weight:950}.tw-status{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:#edf8f2;color:#168257;font-size:8px;font-weight:900;text-transform:uppercase}.tw-status::before{content:'';width:5px;height:5px;border-radius:50%;background:#34c98c}.tw-card h3{margin:16px 0 7px;font-size:18px;letter-spacing:-.4px}.tw-card p{margin:0;color:#71839b;font-size:11px;line-height:1.65}.tw-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:18px;color:#8798aa;font-size:9px}.tw-card-meta strong{color:#3f5872}.tw-progress{height:5px;margin-top:9px;border-radius:999px;background:#edf2f7;overflow:hidden}.tw-progress span{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),rgba(var(--accent-rgb),.55))}.tw-open{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:11px;border-top:1px solid #edf2f7;color:#56718e;font-size:10px;font-weight:850}.tw-open b{color:var(--accent);font-size:14px}.tw-practice{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:18px;padding:26px 28px;background:linear-gradient(120deg,#fafdff,#edf6ff)}.tw-practice h2{margin:7px 0 5px;font-size:24px;letter-spacing:-.6px}.tw-practice p{max-width:820px;margin:0;color:#6d8198;font-size:12px;line-height:1.65}@media(max-width:1080px){.tw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tw-hero{grid-template-columns:1fr}.tw-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}.tw-summary-label,.tw-summary>strong,.tw-summary-total{grid-column:1/-1}}@media(max-width:700px){.tw-shell{width:min(100% - 22px,1380px);padding:16px 0 34px}.tw-hero-copy,.tw-summary,.tw-section,.tw-practice{border-radius:16px}.tw-hero-copy{padding:24px 20px}.tw-section{padding:19px}.tw-section-head,.tw-practice{align-items:flex-start;flex-direction:column}.tw-secure{white-space:normal}.tw-grid{grid-template-columns:1fr}.tw-card{min-height:235px}.tw-practice{padding:21px}.tw-summary{display:block}.tw-btn{width:100%}}