@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#070b14;--bg-raised:#0c1322;--raised:#0c1322;--surface:#101a2d;--card:#090f1c;--card-body:#090f1c;--border:#1a2840;--border-soft:#121d31;--text:#e8edf7;--muted:#7f8ba0}
.site-nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;padding:18px 40px;border-bottom:1px solid var(--border-soft,#121d31)}
.site-nav .logo{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none;font-family:var(--mono,'JetBrains Mono',monospace);font-weight:700;font-size:17px;letter-spacing:.02em}
.site-nav .logo img{width:45px;height:45px;display:block;object-fit:contain}
.thumb{overflow:hidden}
.thumb .room-image,.thumb>img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit}
.site-nav .nav-tabs{grid-column:2;display:flex;gap:4px;background:var(--bg-raised,#101728);border:1px solid var(--border-soft,#1a2337);border-radius:8px;padding:4px}
.site-nav .nav-tabs a{background:none;color:var(--muted,#8791a3);font-size:14px;font-weight:500;padding:8px 16px;border-radius:5px;text-decoration:none;white-space:nowrap}
.site-nav .nav-tabs a.active,.site-nav .nav-tabs a:hover{color:var(--text,#eef1f7);background:var(--surface,#131c31)}
.site-nav .nav-right{grid-column:3;justify-self:end;min-width:0;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px 14px}
.site-nav .nav-right>a{color:var(--muted,#8791a3);text-decoration:none;font-size:14px}.site-nav .nav-right>a:hover{color:var(--text,#eef1f7)}
.site-nav .btn-signup,.site-nav .btn-signout{color:#fff;border:0;padding:9px 16px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer}.site-nav .btn-signup{background:var(--accent,#8257e6)}.site-nav .btn-signout{background:var(--bg-raised,#101728);border:1px solid var(--border,#212c42);color:var(--muted,#8791a3)}.site-nav .btn-signout:hover{color:var(--text,#eef1f7);border-color:var(--accent,#8257e6)}
.site-nav .avatar-button{display:flex!important;align-items:center;gap:8px}.site-nav .avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--mono,monospace);color:var(--text,#eef1f7);border:1px solid var(--border,#212c42);background:var(--surface,#131c31)}
.site-nav .social-link{color:var(--muted,#8791a3);text-decoration:none;display:flex;position:relative}.site-nav .social-link:hover{color:var(--text,#eef1f7)}.site-nav .social-link::after{content:attr(title);position:absolute;top:27px;left:50%;transform:translateX(-50%);background:var(--surface,#131c31);border:1px solid var(--border,#212c42);color:var(--text,#eef1f7);font:12px var(--sans,sans-serif);padding:5px 8px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:10}.site-nav .social-link:hover::after{opacity:1}
.download-spinner{display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:btr-spin .7s linear infinite;margin-right:7px;vertical-align:-2px}@keyframes btr-spin{to{transform:rotate(360deg)}}
.site-header{height:78px;display:flex;align-items:center;gap:28px;width:min(1280px,calc(100% - 72px));margin:auto;position:relative;z-index:5}.site-header .brand{display:inline-flex;align-items:center;gap:11px;flex-shrink:0;color:#211b28;text-decoration:none;font:800 17px/1 'Manrope',Arial,sans-serif;letter-spacing:-.7px}.site-header .brand-mark{width:30px;height:30px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;transform:skewY(-12deg)}.site-header .brand-mark i{display:block;background:#401447}.site-header .brand-mark i:nth-child(2),.site-header .brand-mark i:nth-child(3){background:#a884b1}.site-header .nav-links{display:flex;align-items:center;justify-content:center;gap:clamp(14px,1.8vw,26px);margin-inline:auto}.site-header .nav-links a{font:600 12px/1 'Manrope',Arial,sans-serif;color:#403645;text-decoration:none;white-space:nowrap}.site-header .nav-links a.active,.site-header .nav-links a:hover{color:#54245b}.site-header .nav-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px 14px;min-width:0;flex-shrink:0}.site-header .social-links{display:flex;align-items:center;gap:12px}.site-header .icon-link{display:grid;place-items:center;width:22px;height:24px;color:#716875;text-decoration:none}.site-header .icon-link:hover{color:#54245b}.site-header .icon-link svg{width:19px;height:19px;fill:currentColor}.site-header .button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 17px;border:1px solid #4c3151;border-radius:9px;color:#2b0a30;background:transparent;text-decoration:none;font:700 12px 'Manrope',Arial,sans-serif}.site-header .login-link{color:#716875;text-decoration:none;font:600 12px 'Manrope',Arial,sans-serif;white-space:nowrap}.site-header .btn-signout{padding:8px 12px;border:1px solid #e6e0e7;border-radius:8px;color:#716875;background:#f8f5f8;font:600 12px 'Manrope',Arial,sans-serif;cursor:pointer}.site-header .avatar{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#401447;color:#fff;font:800 12px 'Manrope',Arial,sans-serif}.site-header .theme-toggle{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;padding:0;border:1px solid #d8d1da;border-radius:8px;color:#54245b;background:transparent;cursor:pointer}.site-header .theme-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.site-header .theme-icon-sun{display:none}.site-header .menu-toggle{display:none;background:none;border:0;color:#211b28;font-size:24px;cursor:pointer}
@media(max-width:1050px){.site-header{gap:16px;width:min(100% - 32px,1280px)}.site-header .nav-links{gap:12px}.site-header .nav-links a{font-size:10px}.site-header .nav-actions{gap:8px}}
@media(max-width:780px){.site-header{height:auto;min-height:70px;flex-wrap:wrap;padding:14px 0}.site-header .menu-toggle{display:block;order:2;margin-left:auto}.site-header .theme-toggle{order:3}.site-header .nav-links{display:none;position:absolute;top:65px;left:0;right:0;z-index:20;padding:18px;border:1px solid #e6e0e7;border-radius:12px;background:#fff;box-shadow:0 15px 40px rgba(35,5,40,.12)}.site-header .nav-links.open{display:grid;gap:0}.site-header .nav-links a{padding:13px 5px;border-bottom:1px solid #e6e0e7;font-size:13px}.site-header .nav-links a:last-child{border:0}.site-header .nav-actions{width:100%;justify-content:flex-end;order:4}.site-header .social-links{display:flex}}
@media(max-width:460px){.site-header .social-links{display:none}.site-header .nav-actions{gap:8px}.site-header .button{min-height:38px;padding:0 11px}}
/* Shared workspace presentation is appended here so the existing universally
   served header stylesheet also carries the workspace theme. */
/* Shared workspace presentation. The room workspace markup and scripts remain
   room-specific; this stylesheet only supplies the platform-wide appearance. */
body:has(.workspace) { background: #fff; color: #211b28; font-family: 'Manrope', Arial, sans-serif; }
body:has(.workspace) .site-header { width: 100%; padding-left: max(20px, calc((100% - 1280px) / 2)); padding-right: max(20px, calc((100% - 1280px) / 2)); border-bottom: 1px solid #e6e0e7; }
body:has(.workspace) .workspace { display: grid; grid-template-columns: 78px 270px minmax(0, 1fr) 320px; min-height: calc(100vh - 78px); height: auto; background: #fff; }
body:has(.workspace) .rail { padding: 24px 10px; border-right: 1px solid #e6e0e7; background: #fbf9fb; }
body:has(.workspace) .rail button { width: 58px; min-height: 58px; margin: 0 auto 8px; border: 0; border-radius: 9px; color: #8a7f8d; background: transparent; font: 600 10px/1.2 'Manrope', Arial, sans-serif; }
body:has(.workspace) .rail button:hover, body:has(.workspace) .rail button.active { color: #2b0a30; background: #f0e8f1; }
body:has(.workspace) .rail svg { width: 20px; height: 20px; }
body:has(.workspace) .rail { position: relative; overflow: visible; }
body:has(.workspace) .active-machines-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 58px; min-height: 58px; margin: 0 auto 8px; padding: 8px 3px; border: 0; border-radius: 9px; color: #8a7f8d; background: transparent; font: 600 10px/1.1 'Manrope', Arial, sans-serif; cursor: pointer; }
body:has(.workspace) .active-machines-toggle:hover, body:has(.workspace) .active-machines-toggle[aria-expanded="true"] { color: #2b0a30; background: #f0e8f1; }
body:has(.workspace) .active-machines-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
body:has(.workspace) .active-machines-panel { position: absolute; z-index: 30; top: 18px; left: calc(100% + 12px); width: 300px; padding: 16px; border: 1px solid #e6e0e7; border-radius: 10px; background: #fff; color: #211b28; box-shadow: 0 16px 36px rgba(35,5,40,.16); }
body:has(.workspace) .active-machines-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #eee9ef; }
body:has(.workspace) .active-machines-heading h2 { margin: 0; color: #211b28; font: 700 14px/1.3 'Manrope', Arial, sans-serif; }
body:has(.workspace) .active-machines-heading p { margin: 3px 0 0; color: #716875; font: 11px/1.3 'Manrope', Arial, sans-serif; }
body:has(.workspace) .active-machines-refresh { width: 28px; height: 28px; border: 1px solid #e6e0e7; border-radius: 6px; color: #54245b; background: #fbf9fb; font-size: 17px; line-height: 1; cursor: pointer; }
body:has(.workspace) .active-machines-list { display: grid; gap: 8px; padding-top: 12px; }
body:has(.workspace) .active-machine-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px; border: 1px solid #eee9ef; border-radius: 7px; background: #fbf9fb; }
body:has(.workspace) .active-machine-info { min-width: 0; display: grid; gap: 3px; }
body:has(.workspace) .active-machine-info strong { overflow: hidden; color: #211b28; font: 700 12px/1.3 'Manrope', Arial, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
body:has(.workspace) .active-machine-info span { color: #716875; font: 10px/1.3 'DM Mono', monospace; white-space: nowrap; }
body:has(.workspace) .active-machine-stop { flex: 0 0 auto; padding: 6px 9px; border: 1px solid #9b4654; border-radius: 6px; color: #9b4654; background: transparent; font: 700 10px 'Manrope', Arial, sans-serif; cursor: pointer; }
body:has(.workspace) .active-machine-stop:hover { color: #fff; background: #9b4654; }
body:has(.workspace) .active-machines-state { margin: 0; color: #716875; font: 12px/1.5 'Manrope', Arial, sans-serif; }
body:has(.workspace) .active-machines-state.error { color: #9b4654; }
body:has(.workspace) .side { padding: 34px 26px; border-right: 1px solid #e6e0e7; background: #fff; }
body:has(.workspace) .side h3 { margin: 0 0 18px; color: #211b28; font: 700 16px/1.3 'Manrope', Arial, sans-serif; }
body:has(.workspace) .side p, body:has(.workspace) .systems-note { color: #716875; font: 13px/1.65 'Manrope', Arial, sans-serif; }
body:has(.workspace) .side hr { border: 0; border-top: 1px solid #eee9ef; margin: 20px 0; }
body:has(.workspace) .chapter-link { padding: 9px 0; color: #716875; font: 500 13px/1.45 'Manrope', Arial, sans-serif; }
body:has(.workspace) .chapter-link:hover { color: #2b0a30; }
body:has(.workspace) .main { min-width: 0; max-width: none; padding: 38px clamp(24px, 4vw, 64px) 90px; background: #fff; }
body:has(.workspace) .bar { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 960px; margin: 0 auto 42px; padding: 12px; border: 1px solid #e6e0e7; border-radius: 10px; background: #fbf9fb; transform: none; }
body:has(.workspace) .bar .status { margin-right: auto; color: #716875; font: 600 12px 'DM Mono', monospace; }
body:has(.workspace) .bar .ip { color: #2b0a30; background: #f0e8f1; border: 1px solid #e6e0e7; border-radius: 7px; font: 12px 'DM Mono', monospace; }
body:has(.workspace) .bar .copyable-ip { min-width: 170px; padding: 11px 14px; font-size: 16px; font-weight: 700; cursor: copy; }
body:has(.workspace) .bar .copyable-ip::after { content: ' ⧉'; font-size: 13px; opacity: .65; }
body:has(.workspace) .bar .copyable-ip[data-copied] { color: #287557; border-color: #8ecab1; }
body:has(.workspace) .bar .copyable-ip[data-copied]::after { content: ' ⧉'; font-size: 13px; opacity: .65; }
body:has(.workspace) .bar .ip-copy-anchor { position: relative; display: inline-flex; flex: 0 0 auto; }
body:has(.workspace) .bar .ip-copy-feedback { position: absolute; z-index: 4; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; color: #287557; font: 600 11px 'Manrope',Arial,sans-serif; white-space: nowrap; padding: 3px 6px; border: 1px solid #8ecab1; border-radius: 4px; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.12); pointer-events: none; }
body:has(.workspace) .bar .ip-copy-feedback[hidden] { display: none; }
body:has(.workspace) .machine-countdown { flex: 0 0 auto; color: #716875; font: 600 12px 'DM Mono', monospace; white-space: nowrap; }
body:has(.workspace) .bar { position: sticky; top: 0; z-index: 8; box-shadow: 0 8px 20px rgba(43,10,48,.06); }
body:has(.workspace) .bar .btn, body:has(.workspace) .machine-disabled, body:has(.workspace) .systems-action { min-height: 42px; padding: 0 16px; border: 1px solid #2b0a30; border-radius: 8px; background: #2b0a30; color: #fff; font: 700 12px 'Manrope', Arial, sans-serif; }
body:has(.workspace) .bar #vpn { border-color: #d8cbd9; background: #fff; color: #2b0a30; }
body:has(.workspace) .bar .btn:hover, body:has(.workspace) .bar #vpn:hover { background: #2b0a30; border-color: #2b0a30; color: #fff; }
body:has(.workspace) .bar #vpn:hover { background: #fff; border-color: #2b0a30; color: #2b0a30; }
body:has(.workspace) .bar .btn.stop { background: #9b4654; border-color: #9b4654; }
body:has(.workspace) .bar .btn:disabled { opacity: .55; cursor: wait; }
body:has(.workspace) .content { width: min(960px, 100%); max-width: 960px; margin: 0 auto 38px; }
body:has(.workspace) .content h1, body:has(.workspace) .content h2, body:has(.workspace) .content h3, body:has(.workspace) .content h4, body:has(.workspace) .markdown-content h1, body:has(.workspace) .markdown-content h2, body:has(.workspace) .markdown-content h3, body:has(.workspace) .markdown-content h4 { color: #211b28; font-family: 'Manrope', Arial, sans-serif; }
body:has(.workspace) .content h1, body:has(.workspace) .markdown-content h1 { font-size: clamp(28px, 3vw, 42px); letter-spacing: -1.5px; }
body:has(.workspace) .content h2, body:has(.workspace) .markdown-content h2 { margin-top: 42px; font-size: 25px; letter-spacing: -.6px; }
body:has(.workspace) .content h3, body:has(.workspace) .markdown-content h3 { margin-top: 34px; font-size: 20px; letter-spacing: -.3px; }
body:has(.workspace) .content p, body:has(.workspace) .content li, body:has(.workspace) .markdown-content p, body:has(.workspace) .markdown-content li { color: #4d4350; font: 15px/1.8 'Manrope', Arial, sans-serif; }
body:has(.workspace) .markdown-content pre { padding: 18px; border: 1px solid #e6e0e7; border-radius: 9px; background: #f7f3f8; color: #302335; box-shadow: 0 12px 30px rgba(43,10,48,.05); }
body:has(.workspace) .markdown-content code { background: #f0e8f1; color: #54245b; }
body:has(.workspace) .resources { padding: 34px 24px; border-left: 1px solid #e6e0e7; background: #fbf9fb; }
body:has(.workspace) .resources h4 { margin: 0 0 14px; color: #8a788d; font: 700 10px 'DM Mono', monospace; letter-spacing: 1.4px; }
body:has(.workspace) .resource-link, body:has(.workspace) .resources a { display: block; margin: 10px 0; padding: 12px 13px; border: 1px solid #e6e0e7; border-radius: 8px; background: #fff; color: #2b0a30; font: 600 12px 'Manrope', Arial, sans-serif; text-decoration: none; }
body:has(.workspace) .resource-link:hover, body:has(.workspace) .resources a:hover { border-color: #2b0a30; }
body:has(.workspace) .questions, body:has(.workspace) .flags { border-top-color: #e6e0e7; }
body:has(.workspace) .flags h4 + .flag-form { margin-top: 10px; }
body:has(.workspace) .flags h4:nth-of-type(2) { margin-top: 28px; padding-top: 20px; border-top: 1px solid #e6e0e7; }
body:has(.workspace) .flags h4 { color: #8a788d; font: 700 10px 'DM Mono', monospace; letter-spacing: 1.4px; text-transform: uppercase; }
body:has(.workspace) .answer-row input, body:has(.workspace) .flag-form input { border: 1px solid #d8cbd9; border-radius: 7px; background: #fff; color: #211b28; }
body:has(.workspace) .answer-row button, body:has(.workspace) .flag-form button { border-radius: 7px; background: #2b0a30; color: #fff; font: 700 11px 'Manrope', Arial, sans-serif; }
body:has(.workspace) #message, body:has(.workspace) .message { color: #9b4654; }
body:has(.workspace) .room-nav { display: flex; justify-content: space-between; gap: 16px; width: min(960px, 100%); margin: 54px auto 0; padding-top: 24px; border-top: 1px solid #e6e0e7; }
body:has(.workspace) .room-nav:empty { display: none; }
body:has(.workspace) .room-nav a { color: #2b0a30; font: 700 12px 'Manrope', Arial, sans-serif; text-decoration: none; }
body:has(.workspace) .room-nav a:hover { text-decoration: underline; }
body:has(.workspace) .chapter-link.current { color: #2b0a30; background: #f0e8f1; border-radius: 7px; padding-left: 10px; font-weight: 700; }
html[data-theme="dark"] body:has(.workspace) { background: #140d17; color: #f4edf6; }
html[data-theme="dark"] body:has(.workspace) .workspace, html[data-theme="dark"] body:has(.workspace) .main { background: #140d17; }
html[data-theme="dark"] body:has(.workspace) .rail, html[data-theme="dark"] body:has(.workspace) .resources { background: #201525; border-color: #3a2d40; }
html[data-theme="dark"] body:has(.workspace) .side { background: #140d17; border-color: #3a2d40; }
html[data-theme="dark"] body:has(.workspace) .side h3, html[data-theme="dark"] body:has(.workspace) .content h1, html[data-theme="dark"] body:has(.workspace) .content h2, html[data-theme="dark"] body:has(.workspace) .content h3, html[data-theme="dark"] body:has(.workspace) .content h4, html[data-theme="dark"] body:has(.workspace) .markdown-content h1, html[data-theme="dark"] body:has(.workspace) .markdown-content h2, html[data-theme="dark"] body:has(.workspace) .markdown-content h3, html[data-theme="dark"] body:has(.workspace) .markdown-content h4 { color: #f4edf6; }
html[data-theme="dark"] body:has(.workspace) .side p, html[data-theme="dark"] body:has(.workspace) .systems-note { color: #b9aebe; }
html[data-theme="dark"] body:has(.workspace) .content p, html[data-theme="dark"] body:has(.workspace) .content li, html[data-theme="dark"] body:has(.workspace) .markdown-content p, html[data-theme="dark"] body:has(.workspace) .markdown-content li, html[data-theme="dark"] body:has(.workspace) .markdown-content blockquote, html[data-theme="dark"] body:has(.workspace) .markdown-content td, html[data-theme="dark"] body:has(.workspace) .markdown-content th { color: #fff; }
html[data-theme="dark"] body:has(.workspace) .bar { background: #201525; border-color: #3a2d40; }
html[data-theme="dark"] body:has(.workspace) .site-header { width: 100%; background: #140d17; border-bottom-color: #3a2d40; }
html[data-theme="dark"] body:has(.workspace) .bar .copyable-ip { color: #fff; background: #2a1b30; border-color: #704d76; }
html[data-theme="dark"] body:has(.workspace) .machine-countdown { color: #d8c9dc; }
html[data-theme="dark"] body:has(.workspace) .flags h4:nth-of-type(2), html[data-theme="dark"] body:has(.workspace) .room-nav { border-color: #3a2d40; }
html[data-theme="dark"] body:has(.workspace) .chapter-link.current { color: #fff; background: #2a1b30; }
html[data-theme="dark"] body:has(.workspace) .room-nav a { color: #f4edf6; }
html[data-theme="dark"] body:has(.workspace) .bar #vpn, html[data-theme="dark"] body:has(.workspace) .resource-link, html[data-theme="dark"] body:has(.workspace) .resources a { background: #fff; color: #211b28; border-color: #fff; }
html[data-theme="dark"] body:has(.workspace) .markdown-content pre { background: #201525; border-color: #3a2d40; color: #f4edf6; }
html[data-theme="dark"] body:has(.workspace) .markdown-content code { background: #2a1b30; color: #e0cde5; }
html[data-theme="dark"] body:has(.workspace) .answer-row input, html[data-theme="dark"] body:has(.workspace) .flag-form input { background: #201525; color: #f4edf6; border-color: #3a2d40; }
html[data-theme="dark"] body:has(.workspace) .site-header { background: #140d17; border-bottom-color: #3a2d40; }
html[data-theme="dark"] body:has(.workspace) .site-header .brand,
html[data-theme="dark"] body:has(.workspace) .site-header .nav-links a,
html[data-theme="dark"] body:has(.workspace) .site-header .login-link { color: #f4edf6; }
html[data-theme="dark"] body:has(.workspace) .site-header .nav-links a:hover { color: #c6a2d1; }
html[data-theme="dark"] body:has(.workspace) .site-header .icon-link { color: #d8c9dc; }
html[data-theme="dark"] body:has(.workspace) .site-header .icon-link:hover { color: #fff; }
html[data-theme="dark"] body:has(.workspace) .site-header .button { color: #fff; border-color: #c6a2d1; }
html[data-theme="dark"] body:has(.workspace) .site-header .btn-signout { color: #f4edf6; background: #201525; border-color: #3a2d40; }
html[data-theme="dark"] body:has(.workspace) .site-header .theme-toggle { color: #f4edf6; border-color: #3a2d40; }
html[data-theme="dark"] body:has(.workspace) .site-header .menu-toggle { color: #f4edf6; }
html[data-theme="dark"] body:has(.workspace) .site-header .nav-links { background: #201525; border-color: #3a2d40; }
html[data-theme="dark"] body:has(.workspace) .active-machines-toggle:hover, html[data-theme="dark"] body:has(.workspace) .active-machines-toggle[aria-expanded="true"] { color: #f4edf6; background: #2a1b30; }
html[data-theme="dark"] body:has(.workspace) .active-machines-panel { border-color: #3a2d40; background: #201525; color: #f4edf6; box-shadow: 0 16px 36px rgba(0,0,0,.42); }
html[data-theme="dark"] body:has(.workspace) .active-machines-heading { border-color: #3a2d40; }
html[data-theme="dark"] body:has(.workspace) .active-machines-heading h2, html[data-theme="dark"] body:has(.workspace) .active-machine-info strong { color: #f4edf6; }
html[data-theme="dark"] body:has(.workspace) .active-machines-heading p, html[data-theme="dark"] body:has(.workspace) .active-machine-info span, html[data-theme="dark"] body:has(.workspace) .active-machines-state { color: #b9aebe; }
html[data-theme="dark"] body:has(.workspace) .active-machines-refresh, html[data-theme="dark"] body:has(.workspace) .active-machine-row { border-color: #3a2d40; background: #2a1b30; color: #f4edf6; }
html[data-theme="dark"] body:has(.workspace) .active-machines-refresh { color: #e0cde5; }
html[data-theme="dark"] body:has(.workspace) .active-machine-stop { color: #f09aa5; border-color: #b76572; }
html[data-theme="dark"] body:has(.workspace) .active-machine-stop:hover { color: #201525; background: #f09aa5; }
@media(max-width:1100px){body:has(.workspace) .workspace{grid-template-columns:64px minmax(0,1fr)}body:has(.workspace) .side,body:has(.workspace) .resources{display:none}}
@media(max-width:520px){body:has(.workspace) .active-machines-panel { position: fixed; top: 82px; left: 12px; right: 12px; width: auto; max-width: none; }}
@media(max-width:900px){body:has(.workspace) .main{padding:24px 20px 70px}body:has(.workspace) .bar{flex-wrap:wrap}body:has(.workspace) .bar .status{width:100%}}

/* The room shell uses this same theme state as the public landing page. */
html[data-theme="dark"] body:has(main.lab-page),
html[data-theme="dark"] body:has(main.room-page) { background: #140d17; color: #f4edf6; }
html[data-theme="light"] body:has(main.lab-page),
html[data-theme="light"] body:has(main.room-page) { --bg:#fff !important; --raised:#f8f5f8 !important; --surface:#fff !important; --card:#fff !important; --border:#e6e0e7 !important; --text:#211b28 !important; --muted:#716875 !important; background:#fff !important; color:#211b28 !important; }
html[data-theme="dark"] body:has(main.lab-page),
html[data-theme="dark"] body:has(main.room-page) { --bg:#140d17 !important; --raised:#201525 !important; --surface:#201525 !important; --card:#140d17 !important; --border:#3a2d40 !important; --text:#f4edf6 !important; --muted:#b9aebe !important; background:#140d17 !important; color:#f4edf6 !important; }
html[data-theme="dark"] body:has(main.lab-page) .site-header,
html[data-theme="dark"] body:has(main.room-page) .site-header { background: #140d17; border-bottom-color: #3a2d40; }
html[data-theme="dark"] body:has(main.lab-page) .site-header .brand,
html[data-theme="dark"] body:has(main.room-page) .site-header .brand,
html[data-theme="dark"] body:has(main.lab-page) .site-header .nav-links a,
html[data-theme="dark"] body:has(main.room-page) .site-header .nav-links a { color: #f4edf6; }
html[data-theme="dark"] body:has(main.lab-page) .site-header .nav-links a:hover,
html[data-theme="dark"] body:has(main.room-page) .site-header .nav-links a:hover { color: #c6a2d1; }
html[data-theme="dark"] body:has(main.lab-page) .site-header .nav-actions,
html[data-theme="dark"] body:has(main.room-page) .site-header .nav-actions { color: #f4edf6; }
html[data-theme="dark"] body:has(main.lab-page) .site-header .icon-link,
html[data-theme="dark"] body:has(main.room-page) .site-header .icon-link,
html[data-theme="dark"] body:has(main.lab-page) .site-header .login-link,
html[data-theme="dark"] body:has(main.room-page) .site-header .login-link { color: #b9aebe; }
html[data-theme="dark"] body:has(main.lab-page) .site-header .button,
html[data-theme="dark"] body:has(main.room-page) .site-header .button { color: #f4edf6; border-color: #704d76; }
html[data-theme="dark"] body:has(main.lab-page) .site-header .btn-signout,
html[data-theme="dark"] body:has(main.room-page) .site-header .btn-signout { color: #b9aebe; background: #201525; border-color: #3a2d40; }
html[data-theme="dark"] body:has(main.lab-page) .site-header .theme-toggle,
html[data-theme="dark"] body:has(main.room-page) .site-header .theme-toggle { color: #c6a2d1; border-color: #3a2d40; }
html[data-theme="dark"] body:has(main.lab-page) .site-header .menu-toggle,
html[data-theme="dark"] body:has(main.room-page) .site-header .menu-toggle { color: #f4edf6; }
html[data-theme="dark"] body:has(main.lab-page) .site-header .nav-links,
html[data-theme="dark"] body:has(main.room-page) .site-header .nav-links { background: #201525; border-color: #3a2d40; }

html[data-theme="dark"] main.lab-page,
html[data-theme="dark"] main.room-page { color: #f4edf6; }
html[data-theme="dark"] main.lab-page h1,
html[data-theme="dark"] main.room-page .room-info h1 { color: #f4edf6; }
html[data-theme="dark"] main.lab-page .difficulty,
html[data-theme="dark"] main.room-page .difficulty,
html[data-theme="dark"] main.lab-page .section p,
html[data-theme="dark"] main.room-page .room-section p { color: #b9aebe; }
html[data-theme="dark"] main.lab-page .section h4,
html[data-theme="dark"] main.room-page .room-section h4 { color: #c6a2d1; }
html[data-theme="dark"] main.lab-page .thumb,
html[data-theme="dark"] main.room-page .room-image { background: linear-gradient(135deg,#201525,#51285a); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
html[data-theme="dark"] main.lab-page .btn,
html[data-theme="dark"] main.room-page .btn,
html[data-theme="dark"] main.room-page .room-action { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }
html[data-theme="dark"] main.lab-page .btn:hover,
html[data-theme="dark"] main.room-page .btn:hover,
html[data-theme="dark"] main.room-page .room-action:hover { background: #a78bfa; border-color: #a78bfa; }
body:has(form#auth){display:block!important;min-height:100vh}body:has(form#auth) form#auth{margin:clamp(28px,5vh,56px) auto 72px!important}
@media(max-width:1100px){.site-nav{display:flex;flex-wrap:wrap;gap:14px;padding:16px 20px}.site-nav .nav-tabs{order:3;width:100%;justify-content:center;overflow:auto}.site-nav .nav-right{margin-left:auto}}
@media(max-width:650px){.site-nav .nav-tabs{justify-content:flex-start}.site-nav .nav-tabs a{padding:8px 10px}.site-nav .nav-right{gap:9px}.site-nav .social-link{display:none}.site-nav .btn-signup,.site-nav .btn-signout{padding:8px 10px}}

/* Shared Acre-inspired detail-page treatment. The existing room markup and
   enrollment script remain intact; these rules only change presentation. */
body:has(main.lab-page), body:has(main.room-page) { background: #fff; color: #211b28; }
body:has(main.lab-page), body:has(main.room-page) { visibility: visible; }
body:has(main.lab-page) .site-nav, body:has(main.room-page) .site-nav { background: #fff; border-bottom-color: #e6e0e7; }
body:has(main.lab-page) .site-nav .nav-tabs, body:has(main.room-page) .site-nav .nav-tabs { background: #f8f5f8; border-color: #e6e0e7; }
body:has(main.lab-page) .site-nav .nav-tabs a, body:has(main.room-page) .site-nav .nav-tabs a, body:has(main.lab-page) .site-nav .nav-right>a, body:has(main.room-page) .site-nav .nav-right>a { color: #716875; }
body:has(main.lab-page) .site-nav .nav-tabs a.active, body:has(main.lab-page) .site-nav .nav-tabs a:hover, body:has(main.room-page) .site-nav .nav-tabs a.active, body:has(main.room-page) .site-nav .nav-tabs a:hover { color: #211b28; background: #fff; }
body:has(main.lab-page) .site-nav .logo, body:has(main.room-page) .site-nav .logo { color: #211b28; }
main.lab-page, main.room-page { max-width: 1380px; margin: 0 auto; padding: 72px 36px 112px; }
main.lab-page, main.room-page { display: grid; grid-template-columns: minmax(0, 440px) minmax(320px, 1fr); gap: 38px 48px; align-items: start; justify-content: center; }
main.lab-page > div:first-child, main.room-page > div:first-child { display: contents; }
main.lab-page .thumb, main.room-page .room-image { grid-column: 1; grid-row: 1; width: 100%; height: auto; aspect-ratio: 1 / 1; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
main.lab-page .thumb img, main.room-page .room-image img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; background: transparent; }
main.lab-page .section, main.room-page .room-section { grid-column: 1 / -1; margin-top: 0; max-width: none; }
main.lab-page .section h4, main.room-page .room-section h4 { color: #8a788d; font: 10px 'DM Mono',monospace; letter-spacing: 1.4px; text-transform: uppercase; margin: 0 0 12px; }
main.lab-page .section p, main.room-page .room-section p { color: #716875; font: 14px/1.85 'Manrope',Arial,sans-serif; margin: 0 0 10px; }
main.lab-page .room-author-link, main.room-page .room-author-link { color: inherit; text-decoration: none; }
main.lab-page .room-author-link:hover, main.room-page .room-author-link:hover { color: #54245b; text-decoration: underline; text-underline-offset: 3px; }
main.lab-page > div:last-child, main.room-page .room-info { grid-column: 2; grid-row: 1; padding-top: 22px; }
main.lab-page > div:last-child, main.room-page .room-info { text-align: left; }
main.lab-page h1, main.room-page .room-info h1 { color: #211b28; font: 500 clamp(36px,4vw,58px)/1.08 'Manrope',Arial,sans-serif; letter-spacing: -2px; margin: 0 0 18px; }
main.lab-page .difficulty, main.room-page .difficulty { color: #716875; font: 11px 'DM Mono',monospace; letter-spacing: 1px; text-transform: uppercase; margin: 0 0 30px; }
main.lab-page .btn, main.room-page .btn, main.room-page .room-action { background: #2b0a30; color: #fff; border: 1px solid #2b0a30; border-radius: 8px; padding: 14px 22px; font: 700 12px 'Manrope',Arial,sans-serif; cursor: pointer; }
main.lab-page .btn:hover, main.room-page .btn:hover, main.room-page .room-action:hover { background: #54245b; }
main.lab-page #message, main.room-page #message { color: #9b4654; font: 13px/1.6 'Manrope',Arial,sans-serif; }
main.lab-page ~ * { --room-paper: #fff; }
main.lab-page, main.room-page { color: #211b28; }
@media(max-width:900px){main.lab-page, main.room-page { grid-template-columns: 1fr; padding: 44px 20px 80px; gap: 32px; } main.lab-page .thumb, main.room-page .room-image { grid-column: 1; grid-row: 1; width: 100%; height: auto; aspect-ratio: 1 / 1; } main.lab-page > div:last-child, main.room-page .room-info { grid-column: 1; grid-row: 2; padding-top: 0; } main.lab-page .section, main.room-page .room-section { grid-column: 1; }}

main.lab-page .room-art-frame, main.room-page .room-art-frame { position: relative; overflow: hidden; border: 1px solid #e6e0e7; }
main.lab-page .thumb.room-art-frame, main.room-page .room-image.room-art-frame { width: min(100%, 440px); max-width: 440px; justify-self: start; background: transparent !important; border: 0 !important; box-shadow: none !important; }
main.lab-page .thumb.room-art-frame, main.room-page .room-image.room-art-frame { transform: translateY(-12px); }
main.lab-page .thumb.room-art-frame::after, main.room-page .room-image.room-art-frame::after { display: none; }
main.lab-page .thumb.room-art-frame img, main.room-page .room-image.room-art-frame img { object-fit: contain !important; background: transparent !important; }
@media(max-width:900px){main.lab-page .thumb.room-art-frame, main.room-page .room-image.room-art-frame { width: 100%; max-width: none; justify-self: stretch; }}
@media(max-width:900px){main.lab-page .thumb.room-art-frame, main.room-page .room-image.room-art-frame { transform: none; }}
main.lab-page .room-art-frame::after, main.room-page .room-art-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(32,6,34,.12), transparent 32%, transparent 68%, rgba(32,6,34,.3)); }
.room-frame-label, .room-frame-footer { position: absolute; z-index: 2; left: 18px; color: #fff; font: 10px 'DM Mono',monospace; letter-spacing: 1.1px; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.room-frame-label { top: 16px; }.room-frame-footer { bottom: 16px; }
main.lab-page .section h2, main.room-page .room-section h2 { color: #211b28; font: 700 22px/1.25 'Manrope',Arial,sans-serif; letter-spacing: -.4px; text-transform: none; margin: 0 0 12px; }
main.lab-page .room-kicker, main.room-page .room-kicker { color: #8a788d; font: 10px 'DM Mono',monospace; letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 15px; }
main.lab-page .difficulty, main.room-page .difficulty { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; text-transform: none; }
main.lab-page .difficulty-separator, main.room-page .difficulty-separator { color: currentColor; opacity: .55; }
main.lab-page .difficulty-word, main.room-page .difficulty-word { font-weight: 700; }.difficulty-word.easy { color: #438c7a; }.difficulty-word.medium { color: #9a6b39; }.difficulty-word.hard { color: #a34d61; }
main.lab-page .room-resume, main.room-page .room-resume { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: fit-content; min-width: 170px; margin-inline: 0; min-height: 52px; padding: 6px 7px 6px 22px; background: #2b0a30; color: #fff; border: 1px solid #2b0a30; border-radius: 9px; font: 700 12px 'Manrope',Arial,sans-serif; }
main.lab-page .room-resume .arrow-box, main.room-page .room-resume .arrow-box { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 7px; background: #2b0a30; color: #fff; font-size: 17px; }
main.lab-page .room-resume:hover, main.room-page .room-resume:hover { background: #2b0a30; color: #fff; border-color: #2b0a30; }
main.lab-page .room-objectives ul, main.room-page .room-objectives ul { margin: 0; padding-left: 20px; color: #716875; font: 14px/1.85 'Manrope',Arial,sans-serif; }
main.lab-page .room-objectives li, main.room-page .room-objectives li { padding-left: 5px; margin: 3px 0; }
html[data-theme="dark"] main.lab-page .section h2, html[data-theme="dark"] main.room-page .room-section h2 { color: #f4edf6; }

html[data-theme="light"] body:has(#auth) { --auth-page:#f8f5f8; --auth-card:#fff; --auth-ink:#211b28; --auth-muted:#716875; --auth-line:#e6e0e7; --auth-input:#fff; background:#f8f5f8; color:#211b28; }
html[data-theme="dark"] body:has(#auth) { --auth-page:#140d17; --auth-card:#201525; --auth-ink:#f4edf6; --auth-muted:#b9aebe; --auth-line:#3a2d40; --auth-input:#140d17; background:#140d17; color:#f4edf6; }
body:has(#auth) { display:block; min-height:100vh; color:var(--auth-ink,#211b28); background:var(--auth-page,#f8f5f8); font-family:'Manrope',Arial,sans-serif; }
body:has(#auth) .site-header { width:min(1280px,calc(100% - 72px)); padding:0; background:transparent; border-bottom:1px solid var(--auth-line,#e6e0e7); }
body:has(#auth) #auth { display:grid; gap:16px; width:min(440px,calc(100% - 36px)); margin:clamp(32px,7vh,72px) auto 72px; padding:34px; border:1px solid var(--auth-line,#e6e0e7); border-radius:10px; background:var(--auth-card,#fff); box-shadow:0 18px 48px rgba(32,6,34,.07); color:var(--auth-ink,#211b28); }
body:has(#auth) #auth h1 { margin:0 0 4px; color:var(--auth-ink,#211b28); font:700 29px/1.2 'Manrope',Arial,sans-serif; }
body:has(#auth) #auth .google { min-height:46px; margin:0; border-color:var(--auth-line,#e6e0e7); background:var(--auth-card,#fff); color:var(--auth-ink,#211b28); font:600 13px 'Manrope',Arial,sans-serif; }
body:has(#auth) #auth .google:hover { background:var(--auth-page,#f8f5f8); border-color:#cbbccc; text-decoration:none; }
body:has(#auth) #auth .divider { color:var(--auth-muted,#716875); font:600 10px 'DM Mono',monospace; text-transform:uppercase; }
body:has(#auth) #auth .divider::before, body:has(#auth) #auth .divider::after { background:var(--auth-line,#e6e0e7); }
body:has(#auth) #auth .field-label { display:block; color:var(--auth-ink,#211b28); font:600 12px 'Manrope',Arial,sans-serif; }
body:has(#auth) #auth input { width:100%; min-height:44px; margin-top:6px; padding:10px 12px; border:1px solid var(--auth-line,#e6e0e7); border-radius:7px; background:var(--auth-input,#fff); color:var(--auth-ink,#211b28); font:14px 'Manrope',Arial,sans-serif; }
body:has(#auth) #auth input::placeholder { color:#9b929e; }
body:has(#auth) #auth input:focus { outline:3px solid rgba(84,36,91,.14); border-color:#54245b; }
body:has(#auth) #auth input:-webkit-autofill, body:has(#auth) #auth input:-webkit-autofill:hover, body:has(#auth) #auth input:-webkit-autofill:focus { border-color:#8a6491; -webkit-text-fill-color:var(--auth-ink,#211b28); -webkit-box-shadow:0 0 0 1000px var(--auth-input,#fff) inset; box-shadow:0 0 0 1000px var(--auth-input,#fff) inset; }
body:has(#auth) #auth .password-wrap { margin-top:6px; }
body:has(#auth) #auth .password-wrap input { margin-top:0; padding-right:68px; }
body:has(#auth) #auth .toggle { top:5px; right:5px; min-height:34px; padding:6px 8px; border:0; background:transparent; color:#54245b; font:700 11px 'Manrope',Arial,sans-serif; }
html[data-theme="dark"] body:has(#auth) #auth .toggle { color:#d8b9df; }
body:has(#auth) #auth #submit-button { min-height:46px; margin:2px 0 0; padding:0 18px; border:1px solid #2b0a30; border-radius:7px; background:#2b0a30; color:#fff; font:700 13px 'Manrope',Arial,sans-serif; cursor:pointer; }
body:has(#auth) #auth #submit-button:hover { background:#54245b; border-color:#54245b; }
body:has(#auth) #auth #submit-button:disabled { opacity:.62; cursor:wait; }
body:has(#auth) #auth #message { min-height:0; margin:0; color:#9b4654; font:12px/1.5 'Manrope',Arial,sans-serif; }
body:has(#auth) #auth .hint, body:has(#auth) #auth .legal, body:has(#auth) #auth .switch { margin:0; color:var(--auth-muted,#716875); font:12px/1.6 'Manrope',Arial,sans-serif; }
body:has(#auth) #auth .hint { margin:3px 0 0; }
body:has(#auth) #auth .legal { text-align:center; }
body:has(#auth) #auth .switch { padding-top:14px; border-top:1px solid var(--auth-line,#e6e0e7); text-align:center; }
body:has(#auth) #auth a:not(.google) { color:#54245b; font-weight:700; text-decoration:none; }
body:has(#auth) #auth a:not(.google):hover { text-decoration:underline; }
html[data-theme="dark"] body:has(#auth) #auth .google { background:#201525; border-color:#3a2d40; color:#f4edf6; }
html[data-theme="dark"] body:has(#auth) #auth .google:hover { background:#2a1b30; border-color:#704d76; }
html[data-theme="dark"] body:has(#auth) #auth #submit-button { background:#fff; border-color:#fff; color:#211b28; }
html[data-theme="dark"] body:has(#auth) #auth #submit-button:hover { background:#e9e4eb; border-color:#e9e4eb; }
html[data-theme="dark"] body:has(#auth) #auth a:not(.google) { color:#d8b9df; }
html[data-theme="dark"] body:has(#auth) .site-header { background:#140d17; border-bottom-color:#3a2d40; }
html[data-theme="dark"] body:has(#auth) .site-header .brand,
html[data-theme="dark"] body:has(#auth) .site-header .nav-links a { color:#f4edf6; }
html[data-theme="dark"] body:has(#auth) .site-header .nav-links a:hover { color:#c6a2d1; }
html[data-theme="dark"] body:has(#auth) .site-header .icon-link,
html[data-theme="dark"] body:has(#auth) .site-header .login-link { color:#b9aebe; }
html[data-theme="dark"] body:has(#auth) .site-header .icon-link:hover,
html[data-theme="dark"] body:has(#auth) .site-header .login-link:hover { color:#fff; }
html[data-theme="dark"] body:has(#auth) .site-header .button { color:#f4edf6; border-color:#704d76; }
html[data-theme="dark"] body:has(#auth) .site-header .theme-toggle,
html[data-theme="dark"] body:has(#auth) .site-header .menu-toggle { color:#d8b9df; border-color:#3a2d40; }
html[data-theme="dark"] body:has(#auth) .site-header .menu-toggle { background:#201525; }
html[data-theme="dark"] body:has(#auth) .site-header .nav-links { background:#201525; border-color:#3a2d40; }
body:has(#auth) #auth button:not(#submit-button):not(.toggle) { min-height:42px; padding:0 14px; border:1px solid var(--auth-line,#e6e0e7)!important; border-radius:7px; background:var(--auth-page,#f8f5f8)!important; color:var(--auth-ink,#211b28)!important; font:600 12px 'Manrope',Arial,sans-serif; cursor:pointer; }
body:has(#auth) #auth button:not(#submit-button):not(.toggle):hover { border-color:#bda9c2!important; background:#f0e8f1!important; }
html[data-theme="dark"] body:has(#auth) #auth button:not(#submit-button):not(.toggle) { background:#2a1b30!important; color:#f4edf6!important; }
html[data-theme="dark"] body:has(#auth) #auth button:not(#submit-button):not(.toggle):hover { background:#38183d!important; border-color:#704d76!important; }
.site-header .social-link[aria-label="WhatsApp"] svg path,
.site-header .icon-link[aria-label="WhatsApp"] svg path { fill-rule:evenodd; }
@media(max-width:780px){body:has(#auth) .site-header{width:calc(100% - 32px)}body:has(#auth) #auth{margin-top:32px;padding:28px 24px}}
@media(max-width:420px){body:has(#auth) #auth{width:calc(100% - 24px);padding:24px 18px}body:has(#auth) #auth h1{font-size:26px}}

/* Shared dark-mode header defaults for every page, including modules/blogs. */
html[data-theme="dark"] .site-header { background:#140d17; border-bottom-color:#3a2d40; }
html[data-theme="dark"] .site-header .brand { color:#f4edf6; }
html[data-theme="dark"] .site-header .nav-links a { color:#f4edf6; }
html[data-theme="dark"] .site-header .nav-links a:hover,
html[data-theme="dark"] .site-header .nav-links a.active { color:#c6a2d1; }
html[data-theme="dark"] .site-header .icon-link,
html[data-theme="dark"] .site-header .login-link { color:#b9aebe; }
html[data-theme="dark"] .site-header .icon-link:hover,
html[data-theme="dark"] .site-header .login-link:hover { color:#fff; }
html[data-theme="dark"] .site-header .button,
html[data-theme="dark"] .site-header .button-outline { color:#fff; border-color:#704d76; }
html[data-theme="dark"] .site-header .btn-signout { color:#f4edf6; background:#201525; border-color:#3a2d40; }
html[data-theme="dark"] .site-header .theme-toggle,
html[data-theme="dark"] .site-header .menu-toggle { color:#f4edf6; border-color:#3a2d40; }
html[data-theme="dark"] .site-header .nav-links { background:#201525; border-color:#3a2d40; }
html[data-theme="dark"] main.lab-page .section p,
html[data-theme="dark"] main.room-page .room-section p,
html[data-theme="dark"] main.lab-page .room-objectives ul,
html[data-theme="dark"] main.room-page .room-objectives ul { color: #fff; }
html[data-theme="dark"] main.lab-page .room-resume, html[data-theme="dark"] main.room-page .room-resume { background: #fff; color: #211b28; border-color: #e6e0e7; }
html[data-theme="dark"] main.lab-page .room-resume .arrow-box, html[data-theme="dark"] main.room-page .room-resume .arrow-box { background: #211b28; color: #fff; }