*, *::before, *::after { box-sizing: border-box; }
html { font-size:18px; }
:root { --red:#CE0E2D; --gold:#FFAF26; --cyan:#26C5F3; --green:#7BD88F; --bg:#07080b; --panel:#101217; --text:#f0f0f0; --muted:rgba(255,255,255,.52); }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 18% 0%, rgba(206,14,45,.18), transparent 34%), radial-gradient(circle at 84% 12%, rgba(38,197,243,.14), transparent 34%), var(--bg); font-family:'Barlow Condensed', sans-serif; }
button, input, textarea, select { font:inherit; }
.shell { min-height:100vh; display:grid; grid-template-rows:auto auto 1fr; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 24px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.22); }
.brand-kicker, .kicker, label { font-family:'IBM Plex Mono', monospace; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--red); }
.brand-title, h1, h2 { margin:0; font-family:'Bebas Neue', sans-serif; letter-spacing:.08em; line-height:1; color:#fff; }
.brand-title { font-size:2.4rem; }
.top-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.btn { border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05); color:#fff; cursor:pointer; padding:12px 16px; font-family:'IBM Plex Mono', monospace; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; display:inline-block; }
.btn.primary { border-color:var(--red); color:var(--red); }
.btn.cyan { border-color:var(--cyan); color:var(--cyan); }
.btn.gold { border-color:var(--gold); color:var(--gold); }
.btn.big { padding:18px 24px; font-size:.86rem; letter-spacing:.22em; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.phase-timeline { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; padding:12px 24px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.18); }
.phase { position:relative; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.035); color:rgba(255,255,255,.6); padding:14px 12px; font-family:'IBM Plex Mono', monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; text-align:left; cursor:pointer; }
.phase span { display:block; color:rgba(255,255,255,.28); margin-bottom:5px; font-size:.62rem; }
.phase.active { border-color:var(--cyan); color:#fff; box-shadow:0 0 28px rgba(38,197,243,.14); }
.phase-gear { position:absolute; top:7px; right:8px; width:22px; height:22px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.24); color:rgba(255,255,255,.72); font-size:.72rem; line-height:1; border-radius:50%; cursor:pointer; }
.phase-gear:hover { border-color:var(--gold); color:var(--gold); }
.page { display:none; padding:24px; }
.page.active { display:grid; gap:18px; }
.grid { display:grid; grid-template-columns:minmax(320px, .85fr) minmax(0, 1.15fr); gap:18px; align-items:start; }
.panel { border:1px solid rgba(255,255,255,.08); background:rgba(16,18,23,.86); padding:18px; box-shadow:0 16px 54px rgba(0,0,0,.28); }
.panel h1 { font-size:4rem; }
.panel h2 { font-size:2.65rem; margin-bottom:10px; }
.panel p { color:var(--muted); font-size:1.25rem; line-height:1.5; margin:10px 0 16px; }
.form { display:grid; gap:14px; }
.field { display:grid; gap:6px; }
input, textarea, select { width:100%; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.28); color:#fff; padding:12px; font-family:'IBM Plex Mono', monospace; font-size:1rem; }
select option { color:#111; }
.team-builder { display:grid; gap:8px; }
.team-row { display:grid; grid-template-columns:1fr 56px 36px; gap:8px; align-items:center; }
.team-row input[type="color"] { height:42px; padding:3px; cursor:pointer; }
.remove { height:36px; border:1px solid rgba(255,255,255,.14); background:transparent; color:rgba(255,255,255,.65); cursor:pointer; }
.qr { width:330px; max-width:100%; background:#fff; padding:12px; }
.qr img { display:block; width:100%; aspect-ratio:1; }
.code { font-family:'Bebas Neue', sans-serif; font-size:clamp(3rem, 8vw, 5.4rem); letter-spacing:.16em; }
.url, .status { color:rgba(255,255,255,.46); font-family:'IBM Plex Mono', monospace; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; word-break:break-all; }
.participant-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:10px; }
.participant { display:grid; grid-template-columns:52px 1fr; gap:12px; align-items:center; padding:12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); border-left:3px solid var(--team-color, var(--cyan)); }
.participant img { width:52px; height:52px; border-radius:50%; object-fit:cover; background:rgba(255,255,255,.08); }
.participant strong { display:block; color:#fff; font-size:1.15rem; }
.participant span { color:var(--muted); font-size:1rem; }
.subtimeline, .target-list { display:flex; flex-wrap:wrap; gap:8px; }
.step, .target { border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:rgba(255,255,255,.68); cursor:pointer; padding:11px 14px; font-family:'IBM Plex Mono', monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.step.active, .target.active { border-color:var(--target-color, var(--cyan)); color:#fff; box-shadow:0 0 24px color-mix(in srgb, var(--target-color, var(--cyan)) 24%, transparent); }
.workspace { display:grid; grid-template-columns:minmax(280px, .8fr) minmax(0, 1.2fr); gap:18px; }
.active-title { font-family:'Bebas Neue', sans-serif; font-size:3rem; letter-spacing:.08em; line-height:1; margin:8px 0; }
.feed { display:grid; gap:8px; max-height:430px; overflow:auto; }
.entry { border-left:3px solid var(--entry-color, var(--cyan)); background:rgba(255,255,255,.035); padding:10px 12px; }
.entry-meta { color:rgba(255,255,255,.45); font-family:'IBM Plex Mono', monospace; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:5px; }
.entry-text { color:rgba(255,255,255,.8); font-size:1.2rem; line-height:1.45; }
.summary { margin-top:12px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); padding:14px; color:var(--muted); font-size:1.15rem; line-height:1.5; }
.summary strong { color:#fff; }
.rapid-builder { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.rapid-panel { display:grid; gap:8px; align-content:start; }
.rapid-panel textarea { min-height:72px; resize:vertical; }
.rapid-panel-actions { display:flex; gap:8px; align-items:center; }
.rapid-slider { -webkit-appearance:none; appearance:none; width:90px; height:3px; background:rgba(255,255,255,.15); outline:none; cursor:pointer; flex-shrink:0; }
.rapid-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:13px; height:13px; border-radius:50%; background:var(--cyan); cursor:pointer; }
.rapid-slider::-moz-range-thumb { width:13px; height:13px; border-radius:50%; background:var(--cyan); cursor:pointer; border:0; }
.rapid-slider-label { font-family:'IBM Plex Mono',monospace; font-size:.62rem; letter-spacing:.1em; color:rgba(255,255,255,.5); min-width:14px; text-align:center; flex-shrink:0; }
.rapid-list { display:grid; gap:3px; max-height:58vh; overflow:auto; padding-right:2px; }
.rapid-card { display:flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); padding:5px 8px; }
.rapid-card--stacked { align-items:flex-start; padding:6px 8px; }
.rapid-card:hover { background:rgba(255,255,255,.055); }
.rapid-card.dragging { opacity:.4; border-color:var(--cyan); }
.rapid-drag { color:rgba(255,255,255,.3); font-family:'IBM Plex Mono', monospace; font-size:.82rem; letter-spacing:-.1em; cursor:grab; flex-shrink:0; }
.rapid-question { color:rgba(255,255,255,.9); font-size:.88rem; line-height:1.3; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rapid-card--stacked .rapid-question { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.85rem; }
.rapid-chips { display:flex; gap:4px; flex-shrink:0; flex-wrap:nowrap; }
.rapid-chips--small .rapid-chip { font-size:.48rem; padding:1px 5px; opacity:.7; }
.rapid-chip { padding:2px 6px; font-family:'IBM Plex Mono', monospace; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; border-radius:2px; white-space:nowrap; color:#000; font-weight:600; opacity:.88; }
.rapid-seq-label { font-family:'IBM Plex Mono', monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); padding:5px 0 2px; opacity:.8; }
.rapid-empty { color:var(--muted); padding:12px; border:1px dashed rgba(255,255,255,.1); font-size:.92rem; line-height:1.4; }
.rapid-icon-btn { width:32px; height:32px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:rgba(255,255,255,.7); cursor:pointer; display:grid; place-items:center; font-size:1rem; flex-shrink:0; }
.rapid-icon-btn:hover { border-color:var(--cyan); color:var(--cyan); }
.rapid-icon-btn.launch { border-color:var(--red); color:var(--red); }
.rapid-icon-btn.launch:hover { background:rgba(206,14,45,.12); }
.result-list { display:grid; gap:10px; }
.team-summary { display:grid; gap:10px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.08); }
.team-summary-row { display:grid; grid-template-columns:130px 1fr 52px; gap:10px; align-items:center; }
.team-summary-name { font-size:.92rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.team-summary-val { font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.08em; text-align:right; }
.team-summary-bar { height:14px; position:relative; background:linear-gradient(90deg, rgba(206,14,45,.18), rgba(255,255,255,.06) 50%, rgba(38,197,243,.2)); border:1px solid rgba(255,255,255,.06); }
.team-summary-bar::after { content:''; position:absolute; top:0; bottom:0; width:1px; left:50%; background:rgba(255,255,255,.2); }
.team-summary-fill { position:absolute; top:0; bottom:0; left:50%; width:0; transition:width .6s ease; }
.team-summary-fill.neg { left:auto; right:50%; }
.result-row { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); padding:12px; }
.result-title { color:#fff; font-weight:600; font-size:1.25rem; line-height:1.35; margin-bottom:8px; }
.result-bars { display:grid; gap:6px; }
.result-bar { display:grid; grid-template-columns:140px 1fr 54px; gap:8px; align-items:center; color:var(--muted); font-size:1.05rem; }
.bar-track { position:relative; height:10px; background:linear-gradient(90deg, rgba(206,14,45,.16), rgba(255,255,255,.06) 50%, rgba(38,197,243,.18)); }
.bar-fill { position:absolute; top:0; bottom:0; left:50%; width:0; background:var(--bar-color, var(--cyan)); opacity:.78; }
.bar-fill.negative { left:auto; right:50%; }
.projector-hero { min-height:calc(100vh - 190px); display:grid; grid-template-columns:minmax(360px, .82fr) minmax(0, 1.18fr); gap:18px; align-items:stretch; }
.projector-card { position:relative; overflow:hidden; display:grid; align-content:center; min-height:520px; border:1px solid rgba(38,197,243,.24); background:radial-gradient(circle at 85% 0%, rgba(38,197,243,.18), transparent 42%), radial-gradient(circle at 10% 100%, rgba(206,14,45,.18), transparent 42%), rgba(16,18,23,.9); padding:26px; }
.projector-title { font-family:'Bebas Neue', sans-serif; font-size:clamp(4rem, 8.8vw, 8.2rem); letter-spacing:.04em; line-height:.9; color:#fff; }
.projector-sub { margin-top:16px; color:rgba(255,255,255,.62); font-family:'IBM Plex Mono', monospace; font-size:.9rem; letter-spacing:.2em; text-transform:uppercase; line-height:1.6; }
.metric-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:24px; }
.metric { border:1px solid rgba(255,255,255,.09); background:rgba(0,0,0,.24); padding:14px; }
.metric-value { font-family:'Bebas Neue', sans-serif; font-size:2.7rem; letter-spacing:.08em; color:var(--gold); line-height:1; }
.metric-label { margin-top:6px; color:rgba(255,255,255,.45); font-family:'IBM Plex Mono', monospace; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; }
.projector-results { min-height:520px; overflow:auto; }
.timer-ring { width:190px; height:190px; border:1px solid rgba(255,255,255,.12); border-radius:50%; display:grid; place-items:center; margin-top:24px; background:conic-gradient(var(--cyan) var(--timer-progress, 0%), rgba(255,255,255,.08) 0); box-shadow:0 0 36px rgba(38,197,243,.12); }
.timer-inner { width:150px; height:150px; border-radius:50%; background:#101217; display:grid; place-items:center; }
.timer-value { font-family:'Bebas Neue', sans-serif; font-size:3.4rem; letter-spacing:.08em; color:#fff; line-height:1; }
.answer-burst { display:grid; grid-template-columns:repeat(12, 1fr); gap:6px; margin-top:22px; }
.answer-dot { height:18px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); animation:pulseAnswer 1.4s ease-in-out infinite; animation-delay:calc(var(--i) * 55ms); }
.answer-dot.active { background:var(--cyan); box-shadow:0 0 18px rgba(38,197,243,.6); }
@keyframes pulseAnswer { 0%,100%{opacity:.4; transform:scaleY(.65)} 50%{opacity:1; transform:scaleY(1)} }
.rapid-stat { font-family:'Bebas Neue',sans-serif; font-size:clamp(3.5rem,7vw,6rem); letter-spacing:.06em; color:#fff; line-height:1; margin-bottom:20px; }
.rapid-stat span { color:var(--cyan); }
.rapid-progress-list { display:grid; gap:8px; margin-top:16px; }
.rapid-progress-row { display:grid; grid-template-columns:28px 120px 1fr 40px; gap:8px; align-items:center; }
.rapid-progress-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid transparent; }
.rapid-progress-name { font-size:.82rem; color:rgba(255,255,255,.8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rapid-progress-track { height:6px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; }
.rapid-progress-fill { height:100%; border-radius:3px; background:var(--cyan); transition:width .5s ease; }
.rapid-progress-count { font-family:'IBM Plex Mono',monospace; font-size:.6rem; letter-spacing:.1em; color:rgba(255,255,255,.4); text-align:right; }
.settings-drawer, .session-drawer { font-size:14px; }
.settings-drawer { display:none; position:fixed; inset:0; z-index:270; background:rgba(0,0,0,.72); backdrop-filter:blur(10px); padding:16px; overflow:auto; }
.settings-drawer.active { display:block; }
.settings-card { width:min(1280px, 98vw); margin:0 auto; border:1px solid rgba(255,255,255,.1); background:#101217; padding:14px; box-shadow:0 18px 70px rgba(0,0,0,.45); }
.settings-head { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:10px; margin-bottom:12px; }
.settings-head h2 { font-size:1.8rem; }
.settings-head p { font-size:1rem; margin:6px 0 0; }
.settings-drawer .panel { padding:12px; }
.settings-drawer .panel h2 { font-size:1.55rem; margin-bottom:6px; }
.settings-drawer .panel p { font-size:1rem; margin:6px 0 10px; }
.settings-drawer input, .settings-drawer textarea, .settings-drawer select { padding:8px 10px; font-size:.92rem; }
.settings-drawer .btn { padding:8px 12px; font-size:.68rem; }
.settings-drawer .rapid-list { max-height:58vh; }
.settings-drawer .form { gap:10px; }
.settings-drawer .field { gap:4px; }
.session-drawer { display:none; position:fixed; inset:0; z-index:260; background:rgba(0,0,0,.72); backdrop-filter:blur(10px); padding:16px; overflow:auto; }
.session-drawer.active { display:block; }
.session-card { width:min(1120px, 96vw); margin:0 auto; border:1px solid rgba(255,255,255,.1); background:#101217; padding:14px; box-shadow:0 18px 70px rgba(0,0,0,.45); }
.session-head { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:10px; margin-bottom:12px; }
.session-head h2 { font-size:1.8rem; }
.session-head p { font-size:1rem; margin:6px 0 0; }
.session-drawer .btn { padding:8px 12px; font-size:.68rem; }
.session-list { display:grid; gap:8px; }
.session-row { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); padding:10px 12px; }
.session-title { font-family:'Bebas Neue', sans-serif; font-size:1.55rem; letter-spacing:.08em; color:#fff; line-height:1; }
.session-meta { margin-top:4px; color:rgba(255,255,255,.48); font-family:'IBM Plex Mono', monospace; font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; }
.session-empty { color:var(--muted); padding:14px; border:1px dashed rgba(255,255,255,.12); font-size:1rem; }
.exec-section-header { font-family:'Bebas Neue', sans-serif; font-size:2rem; letter-spacing:.08em; padding:14px 16px; margin-bottom:8px; border-left:5px solid; }
.exec-section-header.more { color:var(--green, #7BD88F); border-color:var(--green, #7BD88F); background:linear-gradient(90deg, rgba(123,216,143,.12), transparent); }
.exec-section-header.less { color:var(--red); border-color:var(--red); background:linear-gradient(90deg, rgba(206,14,45,.12), transparent); }
.exec-result-item { display:grid; grid-template-columns:1fr 70px; gap:12px; align-items:center; padding:12px 14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); margin-bottom:6px; }
.exec-result-item.more { border-left:4px solid var(--green, #7BD88F); }
.exec-result-item.less { border-left:4px solid var(--red); }
.exec-result-text { font-size:1.05rem; color:rgba(255,255,255,.9); line-height:1.35; }
.exec-result-bar { height:8px; background:rgba(255,255,255,.08); margin-top:6px; }
.exec-result-fill { height:100%; transition:width .5s ease; }
.exec-result-fill.more { background:var(--green, #7BD88F); }
.exec-result-fill.less { background:var(--red); }
.exec-result-score { font-family:'Bebas Neue', sans-serif; font-size:1.8rem; letter-spacing:.06em; text-align:center; line-height:1; }
.exec-result-score.more { color:var(--green, #7BD88F); }
.exec-result-score.less { color:var(--red); }
.exec-result-votes { font-family:'IBM Plex Mono', monospace; font-size:.58rem; letter-spacing:.1em; color:rgba(255,255,255,.4); text-align:center; }
.exec-group-row { display:grid; grid-template-columns:1fr auto repeat(2, 70px); gap:12px; align-items:center; padding:12px 14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); margin-bottom:8px; }
.exec-group-name { font-family:'Bebas Neue', sans-serif; font-size:1.4rem; letter-spacing:.06em; color:#fff; }
.exec-group-faces { display:flex; gap:-4px; }
.exec-group-face { width:28px; height:28px; border-radius:50%; object-fit:cover; border:2px solid var(--panel); margin-left:-6px; }
.exec-group-face:first-child { margin-left:0; }
.exec-group-stat { font-family:'Bebas Neue', sans-serif; font-size:1.8rem; letter-spacing:.06em; text-align:center; line-height:1; }
.exec-group-stat.more { color:var(--green, #7BD88F); }
.exec-group-stat.less { color:var(--red); }
/* Session picker (workshop/index.html) */
.picker-body { min-height:100vh; padding:48px 24px 80px; background:radial-gradient(circle at 18% 0%, rgba(206,14,45,.18), transparent 34%), radial-gradient(circle at 84% 12%, rgba(38,197,243,.14), transparent 34%), var(--bg); }
.picker-inner { width:min(900px, 100%); margin:0 auto; }
.picker-brand { margin-bottom:40px; }
.picker-kicker { font-family:'IBM Plex Mono', monospace; font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--red); margin-bottom:8px; }
.picker-title { font-family:'Bebas Neue', sans-serif; font-size:clamp(3.2rem, 7vw, 5.8rem); letter-spacing:.04em; line-height:.9; color:#fff; }
.picker-header { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:14px; }
.picker-header-label { font-family:'IBM Plex Mono', monospace; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.picker-sessions { display:grid; gap:8px; }
.picker-card { display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.03); padding:16px 18px; cursor:pointer; transition:background .2s ease, border-color .2s ease; text-decoration:none; }
.picker-card:hover { background:rgba(255,255,255,.06); border-color:rgba(38,197,243,.4); }
.picker-card-name { font-family:'Bebas Neue', sans-serif; font-size:1.85rem; letter-spacing:.06em; color:#fff; line-height:1; }
.picker-card-meta { margin-top:5px; font-family:'IBM Plex Mono', monospace; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45); display:flex; gap:14px; flex-wrap:wrap; }
.picker-card-code { font-family:'IBM Plex Mono', monospace; font-size:.72rem; letter-spacing:.2em; padding:3px 10px; border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.7); }
.status-chip { display:inline-block; padding:3px 9px; font-family:'IBM Plex Mono', monospace; font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; }
.status-chip.registration { background:rgba(255,175,38,.15); color:var(--gold); border:1px solid rgba(255,175,38,.3); }
.status-chip.active { background:rgba(38,197,243,.15); color:var(--cyan); border:1px solid rgba(38,197,243,.3); }
.status-chip.closed { background:rgba(255,255,255,.06); color:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.1); }
.picker-empty { color:var(--muted); padding:28px; border:1px dashed rgba(255,255,255,.1); font-size:1.15rem; text-align:center; }
.picker-loading { color:var(--muted); font-family:'IBM Plex Mono', monospace; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; padding:20px 0; }
/* Welcome deck */
.welcome-panel { position:relative; overflow:hidden; }
.welcome-panel::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 100% 0%, rgba(255,175,38,.16), transparent 55%); pointer-events:none; }
.welcome-panel > * { position:relative; }
.welcome-chips { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 18px; }
.welcome-chip { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); font-family:'IBM Plex Mono', monospace; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.66); }
.welcome-chip b { color:var(--gold); font-weight:600; }
.deck { position:fixed; inset:0; z-index:300; display:none; color:#fff; overflow:hidden; }
.deck.active { display:block; animation:deckIn .35s ease both; }
@keyframes deckIn { from { opacity:0; } to { opacity:1; } }
.deck-bg { position:absolute; inset:0; background:radial-gradient(circle at 18% 0%, rgba(206,14,45,.28), transparent 38%), radial-gradient(circle at 82% 100%, rgba(38,197,243,.22), transparent 40%), radial-gradient(circle at 50% 50%, rgba(255,175,38,.07), transparent 60%), var(--bg); }
.deck-bg::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px); pointer-events:none; }
.deck-close { position:absolute; top:18px; right:24px; width:46px; height:46px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.45); color:#fff; font-size:1.5rem; cursor:pointer; z-index:30; line-height:1; }
.deck-close:hover { border-color:var(--red); color:var(--red); }
.deck-counter { position:absolute; top:24px; left:28px; font-family:'IBM Plex Mono', monospace; font-size:.58rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.5); z-index:30; }
.deck-counter b { color:var(--gold); font-weight:600; }
.deck-stage { position:absolute; inset:64px 0 84px; }
.deck-slide { position:absolute; inset:0; padding:0 60px; opacity:0; transform:translateX(40px) scale(.99); transition:opacity .55s ease, transform .55s ease; pointer-events:none; display:flex; align-items:flex-start; justify-content:center; overflow:auto; scrollbar-gutter:stable; }
.deck-slide.active { opacity:1; transform:translateX(0) scale(1); pointer-events:auto; }
.deck-slide.prev { transform:translateX(-40px) scale(.99); }
.deck-slide-inner { width:100%; max-width:1420px; padding:18px 0; margin:auto 0; }
.deck-step { font-family:'IBM Plex Mono', monospace; font-size:.8rem; letter-spacing:.3em; text-transform:uppercase; color:var(--step-color, var(--red)); margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.deck-step::before { content:''; width:32px; height:2px; background:var(--step-color, var(--red)); }
.deck-title { font-family:'Bebas Neue', sans-serif; font-size:clamp(3.4rem, 6.8vw, 6.4rem); letter-spacing:.04em; line-height:.92; color:#fff; margin:0 0 10px; }
.deck-title em { font-style:normal; color:var(--gold); }
.deck-sub { font-family:'IBM Plex Mono', monospace; font-size:.9rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.55); margin:0 0 28px; }
.deck-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.deck-card { background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); border-top:5px solid var(--card-color, var(--cyan)); padding:22px; transition:transform .3s ease, background .3s ease; }
.deck-card:hover { transform:translateY(-3px); background:rgba(255,255,255,.06); }
.deck-card-title { font-family:'Bebas Neue', sans-serif; font-size:1.65rem; letter-spacing:.08em; color:#fff; margin:0 0 14px; }
.deck-card-list { margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.deck-card-list li { font-family:'Barlow Condensed', sans-serif; font-size:1.28rem; color:rgba(255,255,255,.78); line-height:1.25; padding-left:18px; position:relative; }
.deck-card-list li::before { content:''; position:absolute; left:0; top:11px; width:8px; height:8px; background:var(--card-color, var(--cyan)); }
.deck-callout { margin-top:24px; padding:18px 22px; border:1px solid rgba(255,175,38,.35); background:linear-gradient(90deg, rgba(255,175,38,.1), rgba(255,175,38,.02)); display:flex; gap:18px; align-items:center; }
.deck-callout-label { font-family:'IBM Plex Mono', monospace; font-size:.56rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }
.deck-callout-text { font-family:'Bebas Neue', sans-serif; font-size:clamp(1.6rem, 2.7vw, 2.4rem); letter-spacing:.04em; color:#fff; line-height:1.1; }
.deck-split { display:grid; grid-template-columns:1fr 70px 1fr; gap:18px; align-items:stretch; margin-top:4px; }
.deck-col { padding:22px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); }
.deck-col.then { opacity:.7; }
.deck-col.now { border-color:rgba(38,197,243,.45); background:linear-gradient(180deg, rgba(38,197,243,.1), rgba(38,197,243,.03)); box-shadow:0 16px 50px rgba(38,197,243,.1); }
.deck-col-label { font-family:'IBM Plex Mono', monospace; font-size:.78rem; letter-spacing:.28em; text-transform:uppercase; margin-bottom:16px; }
.deck-col.then .deck-col-label { color:rgba(255,255,255,.55); }
.deck-col.now .deck-col-label { color:var(--cyan); }
.deck-col-list { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.deck-col-list li { font-family:'Barlow Condensed', sans-serif; font-size:1.42rem; line-height:1.25; }
.deck-col.then .deck-col-list li { color:rgba(255,255,255,.45); text-decoration:line-through; text-decoration-color:rgba(206,14,45,.55); text-decoration-thickness:2px; }
.deck-col.now .deck-col-list li { color:rgba(255,255,255,.88); padding-left:18px; position:relative; }
.deck-col.now .deck-col-list li::before { content:''; position:absolute; left:0; top:9px; width:8px; height:8px; background:var(--cyan); transform:rotate(45deg); }
.deck-arrow { display:grid; place-items:center; }
.deck-arrow-icon { font-family:'Bebas Neue', sans-serif; font-size:3.4rem; color:var(--gold); animation:deckArrow 1.6s ease-in-out infinite; }
@keyframes deckArrow { 0%, 100% { transform:translateX(-4px); } 50% { transform:translateX(4px); } }
.deck-stat { margin-top:22px; display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; padding:18px 24px; border-left:4px solid var(--gold); background:rgba(255,255,255,.035); }
.deck-stat-num { font-family:'Bebas Neue', sans-serif; font-size:clamp(3.6rem, 7vw, 5.6rem); line-height:.85; color:var(--gold); letter-spacing:.02em; }
.deck-stat-text { font-family:'Bebas Neue', sans-serif; font-size:clamp(1.6rem, 2.7vw, 2.4rem); letter-spacing:.04em; color:#fff; line-height:1.1; }
.deck-stat-text small { display:block; font-family:'IBM Plex Mono', monospace; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:8px; }
.deck-pillars { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:14px; }
.deck-pillar { padding:14px 16px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); text-align:left; }
.deck-pillar-num { font-family:'IBM Plex Mono', monospace; font-size:.7rem; letter-spacing:.28em; color:var(--gold); margin-bottom:6px; }
.deck-pillar-text { font-family:'Bebas Neue', sans-serif; font-size:1.9rem; letter-spacing:.06em; color:#fff; }
.deck-slide[data-slide="1"] .deck-sub { margin-bottom:18px; }
.deck-slide[data-slide="1"] .deck-col { padding:18px 20px; }
.deck-slide[data-slide="1"] .deck-col-list { gap:8px; }
.deck-slide[data-slide="1"] .deck-stat { margin-top:16px; padding:14px 20px; }
.deck-slide[data-slide="1"] .deck-pillars { margin-top:10px; }
.deck-slide[data-slide="1"] .deck-pillar { padding:12px 14px; }
.deck-principles { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
.deck-principle { padding:18px 22px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.035); border-left:4px solid var(--p-color, var(--red)); transition:transform .3s ease, background .3s ease; }
.deck-principle:hover { transform:translateY(-3px); background:rgba(255,255,255,.06); }
.deck-principle-num { font-family:'IBM Plex Mono', monospace; font-size:.72rem; letter-spacing:.28em; color:var(--p-color, var(--red)); margin-bottom:8px; }
.deck-principle-title { font-family:'Bebas Neue', sans-serif; font-size:2rem; letter-spacing:.06em; color:#fff; margin:0 0 10px; }
.deck-principle-body { font-family:'Barlow Condensed', sans-serif; font-size:1.25rem; color:rgba(255,255,255,.74); line-height:1.35; margin:0; }
.deck-principle-body strong { color:#fff; font-weight:600; }
.deck-skills { margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; }
.deck-skill { padding:5px 10px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.25); font-family:'IBM Plex Mono', monospace; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.78); }
.deck-nav { position:absolute; bottom:24px; left:0; right:0; display:flex; justify-content:center; align-items:center; gap:16px; z-index:20; }
.deck-prev, .deck-next { width:46px; height:46px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.45); color:#fff; cursor:pointer; font-size:1.4rem; line-height:1; }
.deck-prev:hover:not(:disabled), .deck-next:hover:not(:disabled) { border-color:var(--cyan); color:var(--cyan); }
.deck-prev:disabled, .deck-next:disabled { opacity:.25; cursor:not-allowed; }
.deck-dots { display:flex; gap:10px; }
.deck-dot { width:38px; height:5px; background:rgba(255,255,255,.2); cursor:pointer; border:0; padding:0; transition:background .25s ease, transform .25s ease; }
.deck-dot.active { background:var(--gold); transform:scaleX(1.15); }
.deck-hint { position:absolute; bottom:14px; right:24px; font-family:'IBM Plex Mono', monospace; font-size:.5rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.32); z-index:20; }
@media (max-width:850px) { html { font-size:16px; } .topbar, .grid, .workspace, .projector-hero, .rapid-builder { grid-template-columns:1fr; } .topbar { display:grid; } .phase-timeline { grid-template-columns:1fr 1fr; padding:10px; } .page { padding:14px; } .metric-grid { grid-template-columns:1fr; } }
@media (max-width:1100px) { .deck-grid { grid-template-columns:repeat(2, 1fr); } .deck-split { grid-template-columns:1fr; gap:12px; } .deck-arrow { transform:rotate(90deg); padding:6px 0; } .deck-principles { grid-template-columns:1fr; } }
@media (max-width:700px) { .deck-slide { padding:0 22px; } .deck-grid { grid-template-columns:1fr; } .deck-pillars { grid-template-columns:1fr; } .deck-callout { flex-direction:column; align-items:flex-start; gap:6px; } }
@media (max-height:760px) { .deck-stage { inset:58px 0 70px; } .deck-slide-inner { padding:10px 0; } .deck-step { margin-bottom:8px; } .deck-title { font-size:clamp(3rem, 5.8vw, 5.2rem); margin-bottom:6px; } .deck-sub { margin-bottom:18px; } }