:root { --bg: #0B1220; --panel: #0E1B2E; --side: #111C2E; --line: #22324A;
  --ink: #E6EDF7; --mut: #93A9C7; --saf: #FF9933; --grn: #4CC38A;
  --mono: "Cascadia Code", Consolas, Menlo, monospace;
  --k-tag: #FF8FB1; --k-attr: #FFD166; --k-attrval: #A7E8A0; --k-text: #E9EFF8;
  --k-sel: #FFB26B; --k-prop: #7CC7FF; --k-val: #B5F2A7; --k-num: #FFE08A;
  --k-colour: #F6A6FF; --k-fn: #C9B8FF; --k-sym: #A6B4C8; --k-comment: #8394AB; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif; }
header { padding: 22px 24px 8px; max-width: 1400px; margin: 0 auto; }
.where { margin: 0; color: var(--saf); font-weight: 700; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; }
h1 { margin: 6px 0 8px; font-size: clamp(22px, 3vw, 32px); line-height: 1.2; }
.pts { margin: 0 0 8px; padding-left: 20px; color: #C9D6E8; }
.tip { margin: 6px 0 0; color: var(--mut); font-size: 14px; }
.grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, 1fr);
  gap: 18px; padding: 12px 24px 32px; max-width: 1400px; margin: 0 auto; }
.codewrap { min-width: 0; }
.bar { display: flex; justify-content: space-between; align-items: center;
  color: var(--mut); font-size: 12px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; margin-bottom: 6px; }
button { font: inherit; cursor: pointer; }
#copy, #clear { background: none; color: var(--mut); border: 1px solid var(--line);
  border-radius: 8px; padding: 4px 10px; font-size: 12px; letter-spacing: 0;
  text-transform: none; font-weight: 600; }
.code { background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 0; overflow: auto; font: 15px/1.6 var(--mono); }
.ln { display: flex; }
.gut { flex: 0 0 3.2em; text-align: right; padding-right: 12px; color: #4E5F79;
  user-select: none; }
.src { white-space: pre; padding-right: 16px; color: var(--k-text); }
.ln.scaf { opacity: .5; }
.scafnote { color: var(--mut); font-size: 13px; margin: 6px 2px 0; }
[data-x] { cursor: help; border-radius: 4px; }
[data-x]:hover, [data-x].on { background: rgba(255, 209, 102, .16);
  box-shadow: 0 0 0 1px rgba(255, 209, 102, .55); }
[data-x].pin { background: rgba(255, 153, 51, .28); box-shadow: 0 0 0 2px var(--saf); }
.side { position: sticky; top: 16px; align-self: start; background: var(--side);
  border: 1px solid var(--line); border-radius: 14px; padding: 18px;
  max-height: calc(100vh - 32px); overflow: auto; }
.side .empty { color: var(--mut); margin: 0; }
.side .lab { color: var(--saf); font-size: 12px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; }
.side .big { font: 700 22px/1.3 var(--mono); color: #FFD166; margin: 6px 0 10px;
  overflow-wrap: anywhere; }
.side .say { color: #D8E2F0; }
.side .say b { color: #fff; }
.side .say code { font-family: var(--mono); background: #1B2A40; padding: 0 .3em;
  border-radius: 4px; color: #FFD9A8; }
.side .pinned { margin-top: 12px; color: var(--mut); font-size: 12.5px; }
.runbar { margin-top: 12px; }
#run { background: linear-gradient(135deg, var(--saf), #E07B1E); color: #fff; border: 0;
  border-radius: 10px; padding: 10px 22px; font-weight: 700; font-size: 16px; }
.out { margin-top: 12px; }
#frame { width: 100%; height: 440px; border: 0; border-radius: 12px 12px 0 0;
  background: #fff; display: block; }
.rc { background: #0F1B2D; border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 12px 12px; font: 13px/1.5 var(--mono); }
/* a script with nothing to draw: the console is the whole result */
.jsonly #frame { height: 0; }
.jsonly .rc { border-top: 1px solid var(--line); border-radius: 12px; }
.rc-head { display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px 6px 14px; background: #16243A; color: var(--mut);
  font: 800 11px/1 "Segoe UI", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.rc-body { max-height: 260px; overflow: auto; }
.rc-line { padding: 4px 14px; border-bottom: 1px solid rgba(255, 255, 255, .06);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.rc-line.rc-warn { color: #FFD58A; } .rc-line.rc-error { color: #FFA3A3; }
.rc-line.rc-info { color: #9FD3FF; } .rc-line.rc-empty { color: #7D8DA3; font-style: italic; }
.rc-table { border-collapse: collapse; } .rc-table th, .rc-table td {
  border: 1px solid #33465F; padding: 2px 8px; text-align: left; }
.k-tag, .k-endtag, .k-tagend, .k-at, .k-doctype { color: var(--k-tag); }
.k-attr { color: var(--k-attr); } .k-attrval, .k-quote { color: var(--k-attrval); }
.k-sel, .k-sclass, .k-sid, .k-suniv, .k-comb, .k-sattr, .k-spcl, .k-spel, .k-kfsel,
.k-kfname { color: var(--k-sel); }
.k-prop, .k-cprop, .k-mqfeat { color: var(--k-prop); }
.k-kw, .k-string, .k-varref, .k-mqkw, .k-url { color: var(--k-val); }
.k-num, .k-jnum { color: var(--k-num); } .k-cname, .k-hex, .k-cfn { color: var(--k-colour); }
.k-fn { color: var(--k-fn); } .k-sym, .k-jp { color: var(--k-sym); }
.k-comment, .k-hcomment, .k-jcom, .k-shcom { color: var(--k-comment); font-style: italic; }
.k-important { color: #FF7B7B; font-weight: 700; }
.k-jkw { color: #FF8FB1; font-weight: 700; } .k-jlit { color: #FFB26B; }
.k-jstr, .k-jtpl, .k-shstr { color: var(--k-attrval); } .k-jtpls { color: #FF7B7B; }
.k-jrx { color: #F6A6FF; } .k-jop, .k-shop { color: #7CC7FF; }
.k-jid.r-decl, .k-jid.r-param { color: #FFE08A; font-weight: 700; }
.k-jid.r-prop, .k-jid.r-key { color: #A7E8A0; }
.k-jid.r-meth, .k-jid.r-call { color: #C9B8FF; } .k-jid.r-global { color: #7CC7FF; }
.k-shcmd { color: #FF8FB1; font-weight: 700; } .k-shsub { color: #FFB26B; font-weight: 700; }
.k-shflag { color: #7CC7FF; } .k-shurl { color: #C9B8FF; }
@media (max-width: 820px) {
  .grid { grid-template-columns: 1fr; padding: 10px 12px 24px; }
  header { padding: 16px 12px 6px; }
  .side { position: static; max-height: none; order: -1; }
  .code { font-size: 13px; }
}

/* The site around the explorer (the explorer's own rules come first, from
   the portal's exkit.js EXPLORER_CSS, so the code looks exactly as it does in
   class). Dark theme throughout. */
a { color: #8CC8FF; }
a:hover { color: #FFD166; }
.code, .side, .tc, .gut, .src, h1, h2, .sub, .compare, .after { -webkit-user-select: none; user-select: none; }
.allow-copy, input, textarea { -webkit-user-select: text; user-select: text; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 24px; border-bottom: 1px solid var(--line); background: #0A1424;
  position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand b { display: block; font-size: 17px; }
.brand small { display: block; color: var(--mut); font-size: 12px; }
.logo { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, var(--saf), #E07B1E); color: #fff; font: 800 15px/1 var(--mono); }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { color: #C9D6E8; text-decoration: none; padding: 7px 12px; border-radius: 9px; font-size: 14.5px; }
.nav a:hover, .nav a[aria-current] { background: #16243A; color: #fff; }
.foot { border-top: 1px solid var(--line); color: var(--mut); font-size: 13.5px; padding: 18px 24px 28px;
  max-width: 1400px; margin: 30px auto 0; }
.foot p { margin: 4px 0; }

/* home */
.home { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.hero { padding: 28px 0 8px; max-width: 900px; }
.hero h1 { font-size: clamp(26px, 4vw, 40px); margin: 6px 0 10px; }
.lead { color: #C9D6E8; font-size: 17px; }
.how { color: #C9D6E8; padding-left: 22px; }
.how li { margin: 4px 0; }
.find { display: block; margin: 18px 0 6px; }
.find span { display: block; font-weight: 700; margin-bottom: 6px; }
#find { width: 100%; max-width: 560px; padding: 12px 14px; border-radius: 12px; border: 1px solid #33465F;
  background: #0E1B2E; color: var(--ink); font: inherit; }
.none { color: #FFD58A; }
.unit { margin: 26px 0 8px; }
.unit h2 { font-size: 22px; margin: 0 0 4px; }
.un { color: var(--saf); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-right: 6px; }
.ud { color: var(--mut); margin: 0 0 12px; max-width: 900px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.tc { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: start; text-decoration: none;
  color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; transition: border-color .15s, transform .15s; }
.tc:hover { border-color: var(--saf); transform: translateY(-2px); color: var(--ink); }
.tc .no { grid-row: span 2; display: grid; place-items: center; min-width: 40px; height: 40px;
  border-radius: 10px; background: #1B2A40; color: #FFD166; font: 800 16px/1 var(--mono); }
.tc b { font-size: 16px; }
.tc .hd { color: var(--mut); font-size: 13.5px; }

.tc.soon { opacity: .55; }
.tc.soon:hover { border-color: var(--line); transform: none; }
.ready { color: #FFD166; }

/* topic */
.topic .th { padding: 18px 24px 4px; max-width: 1400px; margin: 0 auto; }
.crumbs { margin: 0 0 6px; font-size: 13.5px; color: var(--mut); }
.crumbs a { color: var(--mut); }
.topic h1 { margin: 4px 0 2px; }
.sub { margin: 0 0 10px; color: #FFD166; font-weight: 600; }
.compare { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px;
  margin: 8px 0; max-width: 1000px; }
.compare summary { cursor: pointer; font-weight: 700; color: #fff; }
.compare ul { margin: 8px 0 2px; padding-left: 20px; color: #C9D6E8; }
.compare code, .after code, .qc code { font-family: var(--mono); background: #1B2A40; color: #FFD9A8;
  padding: 0 .3em; border-radius: 4px; }
.topic .grid { padding-top: 6px; }
.acts { display: flex; gap: 6px; }
.acts button, #big { background: #16243A; color: #E6EDF7; border: 1px solid #33465F; border-radius: 8px;
  padding: 5px 11px; font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.acts button:hover, #big:hover { border-color: var(--saf); }
#edit { border-color: var(--saf); }
.loading { color: var(--mut); padding: 10px 18px; margin: 0; }
.ed { width: 100%; min-height: 70vh; resize: vertical; color: var(--k-text); padding: 12px 16px;
  white-space: pre; tab-size: 2; outline: none; }
.ed:focus { border-color: var(--saf); }
.code { max-height: 78vh; }
#run { margin-right: 8px; }
#frame.tall { height: 92vh !important; }
#out, .side { scroll-margin-top: 76px; }
.after { max-width: 1000px; margin: 0 auto; padding: 4px 24px; color: #C9D6E8; }
.after h2 { color: #fff; font-size: 19px; }
.qc { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.qc summary { cursor: pointer; font-weight: 700; color: #fff; }
.qc div { margin-top: 8px; }
.pn { display: flex; justify-content: space-between; gap: 12px; max-width: 1400px; margin: 18px auto 0;
  padding: 0 24px; flex-wrap: wrap; }
.pn a { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px;
  text-decoration: none; color: var(--ink); }
.pn a:hover { border-color: var(--saf); }

/* about / support */
.prose { max-width: 860px; margin: 0 auto; padding: 22px 24px; color: #C9D6E8; }
.prose h1 { color: #fff; }
.prose h2 { color: #fff; font-size: 20px; margin-top: 26px; }
.who { display: flex; gap: 16px; align-items: center; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; padding: 16px; }
.who p { margin: 2px 0; }
.avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--saf), #E07B1E); color: #fff; font: 800 22px/1 system-ui; }
.name { color: #fff; font-size: 20px; font-weight: 700; }
.name span { color: var(--mut); font-weight: 600; font-size: 15px; }
.faq dt { color: #fff; font-weight: 700; margin-top: 14px; }
.faq dd { margin: 4px 0 0; }
.upi { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.upi > div:last-child { flex: 1 1 280px; }
.qr { background: #fff; border-radius: 12px; padding: 8px; width: 200px; height: 200px; flex: none; }
.qr svg { width: 100%; height: 100%; display: block; }
.mono { font-family: var(--mono); }
.note { color: var(--mut); font-size: 13.5px; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { display: inline-block; background: #16243A; color: #E6EDF7; border: 1px solid #33465F;
  border-radius: 10px; padding: 9px 16px; font: 600 15px/1.2 inherit; text-decoration: none; cursor: pointer; }
.btn.primary { background: linear-gradient(135deg, var(--saf), #E07B1E); border: 0; color: #fff; }

@media (max-width: 820px) {
  .top { padding: 10px 12px; }
  .home, .topic .th, .after, .pn, .prose { padding-left: 12px; padding-right: 12px; }
  .code { max-height: none; }
}
@media print {
  body * { display: none !important; }
  body::after { content: "Printing is turned off for CSE326 Examples. Open the page in a browser to study it.";
    display: block; padding: 40px; font: 18px sans-serif; color: #000; }
}