:root{
  --bg:#f5f7fa; --fg:#14202b; --muted:#4a5a68; --card:#fff; --line:#c5d0da;
  --build:#0b5fa5; --design:#8a2f7a; --ship:#1b6b3a; --focus:#c25a00;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0f1720; --fg:#eaf0f5; --muted:#a7b6c3; --card:#17222d; --line:#2f4051;
    --build:#7cc0ff; --design:#f0a3e3; --ship:#8fdcaa; --focus:#ffb454; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);line-height:1.5;padding:0 .75rem 3rem}
h1,h2,h3,p{overflow-wrap:anywhere}
.top,main{max-width:64rem;margin:0 auto}
.top{padding:1.25rem 0 .5rem}
h1{font-size:1.5rem;margin:0 0 .25rem;line-height:1.2}
.top p{margin:0;color:var(--muted)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:.5rem;top:-4rem;background:var(--card);padding:.5rem .75rem;border:2px solid var(--fg);z-index:10}
.skip:focus{top:.5rem}
.controls{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;margin:1rem 0 .5rem}
.seg{display:flex;flex-wrap:wrap;gap:.4rem}
.seg button{font:inherit;min-height:2.75rem;padding:.4rem .9rem;border:2px solid var(--line);background:var(--card);color:var(--fg);border-radius:.5rem;cursor:pointer}
.seg button[aria-pressed="true"]{border-color:var(--fg);background:var(--fg);color:var(--bg);font-weight:600}
.status{min-height:1.5rem;margin:.25rem 0;color:var(--muted)}
.slot{margin:1.25rem 0}
.slot h3{margin:0 0 .5rem;font-size:1.05rem}
.row{display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem}
.session{display:block;width:100%;min-width:0;text-align:left;font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-top:6px solid var(--c);border-radius:.5rem;padding:.7rem .8rem;cursor:pointer}
.session:hover{border-color:var(--c)}
.session .t{display:block;font-weight:600}
.session .s,.speaker{display:block;color:var(--muted);font-size:.95rem}
.tag{display:block;font-weight:700;font-size:.85rem;color:var(--c);margin-bottom:.15rem}
.build{--c:var(--build)}.design{--c:var(--design)}.ship{--c:var(--ship)}
.break{padding:.6rem .8rem;border:1px dashed var(--line);border-radius:.5rem;color:var(--muted)}
@media (min-width:48rem){
  body{padding:0 1.5rem 3rem}
  .row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .slot h3{font-size:1.15rem}
}
dialog{width:min(36rem,calc(100% - 1.5rem));max-height:calc(100% - 1.5rem);overflow:auto;background:var(--card);color:var(--fg);border:2px solid var(--fg);border-radius:.6rem;padding:1rem}
dialog::backdrop{background:rgba(0,0,0,.55)}
.dlg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem}
.meta{margin:0;font-weight:600;color:var(--muted)}
.close{font:inherit;min-height:2.75rem;padding:.4rem .9rem;border:2px solid var(--fg);background:var(--card);color:var(--fg);border-radius:.5rem;cursor:pointer}
dialog h2{margin:.5rem 0 .25rem;font-size:1.3rem;line-height:1.25}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}