@import url("../komplex-journey-2026-10-02-v1/assets/fonts/fonts.css");
:root{--blue:#008ae6;--pink:#e14f9b;--ink:#132f49;--muted:#4f6b80;--line:#cbdce7;--bg:#e7f0f6;font-family:Quicksand,system-ui,sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);overflow:hidden}button,select,output{font:inherit}button{cursor:pointer}
button:focus-visible,select:focus-visible{outline:3px solid #ca3d86;outline-offset:2px}
#bar-open{position:fixed;top:10px;right:10px;z-index:20;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);padding:7px 11px;font-size:13px;box-shadow:0 2px 8px #13304a1f}
#bar{position:fixed;top:0;left:0;right:0;z-index:21;background:#fff;border-bottom:1px solid var(--line);padding:8px 12px;box-shadow:0 2px 10px #13304a1a}
#bar[hidden]{display:none}
.controls{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.brand{font-family:'Nunito Sans',system-ui,sans-serif;font-size:16px}.hint{font-size:12px;color:var(--muted);margin-right:auto;margin-left:10px}
.controls button,.controls select{border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);padding:7px 10px;font-size:13px;min-height:36px}
.controls select{max-width:240px}#bar-hide{background:var(--ink);color:#fff;border-color:var(--ink)}
#percent{font-size:13px;min-width:44px;text-align:center;font-variant-numeric:tabular-nums}
#viewport{position:fixed;inset:0;overflow:auto;overscroll-behavior:contain;background:var(--bg);cursor:grab}
#viewport.dragging{cursor:grabbing;user-select:none}
#space{position:relative}
#world{position:absolute;left:40px;top:40px;transform-origin:0 0;display:grid;column-gap:140px;row-gap:90px;align-items:start;width:max-content}
.lane-label{font-family:'Nunito Sans',system-ui,sans-serif;font-size:34px;font-weight:800;color:#7a93a6;writing-mode:vertical-rl;transform:rotate(180deg);align-self:stretch;text-align:end;border-right:3px solid #c3d6e3;padding-left:16px}
.stage-head{border-bottom:4px solid var(--blue);padding-bottom:14px}
.stage-head.day{border-color:var(--pink)}
.stage-head small{display:block;font-size:20px;color:var(--muted);font-weight:600;margin-bottom:4px}
.stage-head h2{font-family:'Nunito Sans',system-ui,sans-serif;font-size:40px;line-height:1.1;margin:0;white-space:nowrap}
.cell{display:flex;flex-direction:column;gap:40px}
.group{display:flex;gap:36px;align-items:flex-start}
.group-label{font-size:22px;font-weight:700;color:var(--muted);margin:0 0 -18px}
.alts{display:grid;gap:28px;align-items:start}
.frame{flex:none}
.frame>h3{font-size:18px;font-weight:600;margin:0 0 10px;line-height:1.25;max-width:100%}
.frame>h3 em{font-style:normal;font-size:13px;font-weight:700;color:#fff;background:var(--muted);border-radius:4px;padding:2px 6px;margin-right:6px;vertical-align:2px}
.frame.main>h3 em{background:var(--blue)}
.frame.rita>h3{color:#a8326f}.frame.rita>h3 em{background:var(--pink)}
.box{position:relative;background:#fff 0 0/100% auto no-repeat;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 6px 18px #13304a14}
.frame.rita .box{border:3px solid var(--pink)}
.box iframe{display:block;border:0;transform-origin:0 0;pointer-events:none}
.frame.live .box{outline:4px solid var(--blue);outline-offset:3px}.frame.live iframe{pointer-events:auto}
.frame.live>h3::after{content:' · kipróbálás (Esc)';color:var(--blue)}
.email{width:600px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 18px #13304a14;overflow:hidden}
.email .meta{padding:18px 24px;border-bottom:1px solid #e3edf3;background:#f7fbfe}
.email .from{font-size:14px;color:var(--muted)}.email .subject{font-family:'Nunito Sans',system-ui,sans-serif;font-size:21px;font-weight:800;margin:6px 0 4px}.email .pre{font-size:14px;color:var(--muted)}
.email .body{padding:22px 24px 8px;font-size:16px;line-height:1.55;white-space:pre-wrap}
.email .cta{display:inline-block;margin:10px 24px 26px;background:var(--blue);color:#fff;border-radius:8px;padding:12px 18px;font-weight:700;text-decoration:none}
.topic{display:flex;flex-direction:column;gap:8px}
.topic>h3{font-size:20px;margin:0}.topic>p{font-size:14px;color:var(--muted);margin:0 0 6px;max-width:1236px}
.reviewing .frame.live iframe{pointer-events:none}