.hanlab-pub{--pur:#4E2A84;--pur2:#6B43A8;--bg:#EFF2FB;--ink:#241f31;--mut:#6b6880;--line:#e3e2ee}.hanlab-pub *{box-sizing:border-box}.hanlab-pub{margin:0;background:var(--bg);color:var(--ink);font:400 16.5px/1.6 "Be Vietnam Pro",system-ui,sans-serif;-webkit-font-smoothing:antialiased}.hanlab-pub .wrap{max-width:1080px;margin:0 auto;padding:22px 18px 46px}.hanlab-pub .top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:13px}.hanlab-pub .logo{flex:none}.hanlab-pub h1{font:600 30px/1.1 "Be Vietnam Pro",sans-serif;margin:0;color:var(--pur);letter-spacing:-.01em}.hanlab-pub .sub{font-size:13.5px;color:var(--mut);margin-top:3px}.hanlab-pub .srch{margin-left:auto;position:relative}.hanlab-pub .srch input{width:290px;max-width:52vw;border:1px solid var(--line);background:#fff;border-radius:999px;
 padding:11px 17px;font:400 14px "Be Vietnam Pro",sans-serif;color:var(--ink);outline:none}.hanlab-pub .srch input:focus{border-color:var(--pur2);box-shadow:0 0 0 3px rgba(107,67,168,.13)}.hanlab-pub .secttl{font:600 11.5px "Be Vietnam Pro",sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--mut);margin:0 0 8px}.hanlab-pub .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:22px}
@media(max-width:860px){.hanlab-pub .cards{grid-template-columns:1fr}}.hanlab-pub .card,.hanlab-pub .hi{background:#fff;border-radius:16px;box-shadow:0 2px 14px rgba(40,25,80,.07);padding:18px}.hanlab-pub .hgrid{display:flex;gap:17px;align-items:flex-start}.hanlab-pub .rail{width:clamp(96px,23%,188px);flex:none}.hanlab-pub .card .rail{width:clamp(80px,26%,132px)}
@media(max-width:620px){.hanlab-pub .hgrid{flex-direction:column;gap:13px}.hanlab-pub .rail,.hanlab-pub .card .rail{width:62%;min-width:150px;max-width:230px}}.hanlab-pub .htext{flex:1;min-width:0}.hanlab-pub .mark{display:flex;align-items:center;min-height:26px;margin-bottom:9px}.hanlab-pub .jlogo{max-height:clamp(20px,3.6vw,40px);max-width:100%;object-fit:contain;display:block}.hanlab-pub .card .jlogo{max-height:clamp(16px,2.6vw,26px)}.hanlab-pub .vbadge{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--mut);font-weight:700;
 border:1px solid var(--line);border-radius:6px;padding:4px 8px;white-space:nowrap}.hanlab-pub .figbox{border:1px solid var(--line);border-radius:11px;background:#fff;padding:clamp(4px,.8vw,7px)}.hanlab-pub .figbox img{width:100%;max-height:clamp(120px,26vw,300px);object-fit:contain;display:block;border-radius:5px}.hanlab-pub .tag{display:inline-block;font:700 9.5px "Be Vietnam Pro",sans-serif;letter-spacing:.12em;text-transform:uppercase;
 color:#fff;border-radius:999px;padding:4px 10px;margin-bottom:9px}.hanlab-pub .hi .tag{margin-bottom:12px}.hanlab-pub h3{font:600 16.5px/1.33 "Be Vietnam Pro",sans-serif;margin:0 0 5px}.hanlab-pub h3 a{color:var(--ink);text-decoration:none}.hanlab-pub h3 a:hover{color:var(--pur2)}.hanlab-pub .au{font-size:12.8px;color:var(--mut);line-height:1.45}.hanlab-pub .jr{font-size:12.8px;color:var(--mut);margin-top:5px}.hanlab-pub .jr a{color:var(--pur2);text-decoration:none}.hanlab-pub .jr a:hover{text-decoration:underline}.hanlab-pub .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
@media(max-width:900px){.hanlab-pub .grid{grid-template-columns:repeat(2,1fr)}}.hanlab-pub .tile{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:0;text-align:left;background:#fff;border:1px solid var(--line);border-left:4px solid var(--col);border-radius:9px;padding:9px 12px;cursor:pointer;font:inherit;transition:box-shadow .15s,transform .15s}.hanlab-pub .tile:hover{box-shadow:0 4px 16px rgba(40,25,80,.1);transform:translateY(-1px)}.hanlab-pub .tile[aria-expanded=true]{background:var(--col);border-color:var(--col)}.hanlab-pub .tile[aria-expanded=true] .tn,.hanlab-pub .tile[aria-expanded=true] .tc{color:#fff}.hanlab-pub .tn{font:600 14.5px/1.3 "Be Vietnam Pro",sans-serif;color:var(--ink)}.hanlab-pub .tc{flex:none;font-size:12px;color:var(--mut);font-weight:600;background:#f2f1f8;border-radius:999px;padding:2px 8px}.hanlab-pub .panel{display:none;margin-bottom:22px}.hanlab-pub .panel.open{display:block}.hanlab-pub .pgrid{display:grid;grid-template-columns:1.05fr 1.25fr;gap:16px;align-items:start}
@media(max-width:900px){.hanlab-pub .pgrid{grid-template-columns:1fr}}.hanlab-pub .plist{background:#fff;border-radius:16px;box-shadow:0 2px 14px rgba(40,25,80,.07);padding:16px 6px 10px 18px}.hanlab-pub .phead{font:600 12.5px "Be Vietnam Pro",sans-serif;letter-spacing:.11em;text-transform:uppercase;color:var(--col);margin-bottom:10px}.hanlab-pub .rows{max-height:560px;overflow-y:auto;padding-right:12px}.hanlab-pub .rows::-webkit-scrollbar{width:7px}.hanlab-pub .rows::-webkit-scrollbar-thumb{background:#d6d3e6;border-radius:4px}.hanlab-pub .r{padding:13px 0;border-top:1px solid var(--line)}.hanlab-pub .r:first-child{border-top:none}.hanlab-pub .r .t{font:500 16.5px/1.42 "Be Vietnam Pro",sans-serif}.hanlab-pub .r .t a{color:var(--ink);text-decoration:none}.hanlab-pub .r .t a:hover{color:var(--pur2)}.hanlab-pub .r .a{font-size:14px;color:var(--mut);margin-top:2px}.hanlab-pub .r .v{font-size:14px;color:var(--mut);margin-top:2px}.hanlab-pub .r .dl{font-size:14px;margin-top:2px}.hanlab-pub .r .dl a{color:var(--pur2);text-decoration:none}.hanlab-pub .r .dl a:hover{text-decoration:underline}.hanlab-pub .nodoi{color:#9a97ab;font-style:italic}.hanlab-pub .nores{display:none;padding:16px 0;color:var(--mut);font-size:14.5px}.hanlab-pub .foot{font-size:13px;color:var(--mut);border-top:1px solid var(--line);padding-top:13px;margin-top:8px}

.hanlab-pub .wrap{max-width:100%;padding:0}
.hanlab-pub h2.hptitle{font:600 27px/1.1 "Be Vietnam Pro",sans-serif;margin:0;color:var(--pur);letter-spacing:-.01em}
.hanlab-pub{background:transparent}

.hanlab-pub .top.bare{margin-bottom:11px}
.hanlab-pub .top.bare .sub{font-size:13.5px}
.hanlab-pub .top.bare .srch{margin-left:auto}

@media(max-width:560px){.hanlab-pub .grid{grid-template-columns:1fr}}
.hanlab-pub .yrbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 12px}
.hanlab-pub .yrbtn{font:600 12px "Be Vietnam Pro",sans-serif;color:var(--pur2);background:#fff;
 border:1px solid var(--line);border-radius:999px;padding:5px 11px;cursor:pointer}
.hanlab-pub .yrbtn[aria-pressed=true]{background:var(--pur);border-color:var(--pur);color:#fff}
.hanlab-pub .yrgroup{margin:0 0 16px}
.hanlab-pub .yrhead{font:700 13px "Be Vietnam Pro",sans-serif;color:var(--pur);letter-spacing:.04em;
 border-bottom:2px solid var(--line);padding-bottom:5px;margin:0 0 2px}
.hanlab-pub .ylist{background:#fff;border-radius:12px;box-shadow:0 2px 14px rgba(40,25,80,.07);padding:3px 18px}

.hanlab-pub .r.withpic{display:flex;gap:15px;align-items:flex-start}
.hanlab-pub .rthumb{flex:none;width:clamp(72px,8%,104px)}
.hanlab-pub .rthumb img{width:100%;max-height:92px;object-fit:contain;display:block;border:1px solid var(--line);border-radius:6px;background:#fff;padding:3px}
.hanlab-pub .rbody{flex:1;min-width:0}

.hanlab-pub .prelink{color:var(--pur2);text-decoration:none;border-bottom:1px dotted var(--pur2)}
.hanlab-pub .prelink:hover{border-bottom-style:solid}
.hanlab-pub .pretitle{display:block;font-size:11.5px;color:var(--mut);font-style:italic;margin-top:2px}

/* ---- editorial pass: serif titles, colour per theme, quieter chrome ---- */
.hanlab-pub{--c1:#4e2a84;--c2:#396f8c;--c3:#63a9c8;--c4:#a84964;--c5:#d98068;--c6:#f1bb76;--c7:#682c46;--c8:#8a8fb0}
.hanlab-pub{background:#fff}
.hanlab-pub .wrap{max-width:1180px}
.hanlab-pub .secttl{font-weight:600;letter-spacing:.16em;color:#6f7585}
/* paper titles carry the weight */
.hanlab-pub .r .t{font-family:"Source Serif 4",Georgia,serif;font-weight:400;font-size:19px;line-height:1.32}
.hanlab-pub .hi h3,.hanlab-pub .card h3,.hanlab-pub .htext h3{
  font-family:"Source Serif 4",Georgia,serif;font-weight:400;font-size:19px;line-height:1.3}
/* flat cards, hairline instead of shadow */
.hanlab-pub .card,.hanlab-pub .hi,.hanlab-pub .plist{box-shadow:none;border:1px solid var(--line)}
/* the TOC is a crop, never the whole graphic */
.hanlab-pub .rthumb{width:124px;height:72px;overflow:hidden;border:1px solid var(--line);background:#fff;flex:none}
.hanlab-pub .rthumb img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.hanlab-pub .r.withpic{display:flex;gap:22px;align-items:flex-start}
.hanlab-pub .rbody{min-width:0;flex:1}
/* theme tiles: one colour bar each, no boxes */
.hanlab-pub .grid{gap:2px 30px}
.hanlab-pub .tile{background:none;border:0;border-left:3px solid var(--col);border-radius:0;padding:9px 0 9px 13px}
.hanlab-pub .tile:hover{box-shadow:none;transform:none;background:#f7f7fb}
.hanlab-pub .tile[aria-expanded=true]{background:#f3f1f8}
.hanlab-pub .tile[aria-expanded=true] .tn{color:var(--col)}
.hanlab-pub .tile[aria-expanded=true] .tc{color:#6f7585}
.hanlab-pub .tc{background:none;padding:0;font-size:12px;transform:translateY(-5px)}
/* equal highlight columns — a wide figure must not stretch its card */
.hanlab-pub .cards{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---- larger, darker list type ---- */
.hanlab-pub{--ink:#1c1726;--mut:#565167}
.hanlab-pub .r{padding:19px 0}
.hanlab-pub .r .t{font-size:20.5px;line-height:1.34;color:var(--ink)}
.hanlab-pub .r .t a{color:var(--ink);font-weight:500}
.hanlab-pub .r .a{font-size:14.5px;color:#4a465c;margin-top:5px}
.hanlab-pub .r .v{font-size:14.5px;color:#4a465c}
.hanlab-pub .r .dl{font-size:14px}
.hanlab-pub .r .dl a{color:#5b32a0;font-weight:500}
.hanlab-pub .yrhead{font-family:"Source Serif 4",Georgia,serif;font-size:26px;font-weight:400;color:#1c1726}
.hanlab-pub .tn{font-size:15.5px;color:var(--ink)}
.hanlab-pub .sub{color:#6b6880}
.hanlab-pub .hi h3,.hanlab-pub .card h3,.hanlab-pub .htext h3{font-size:20.5px;color:var(--ink)}
.hanlab-pub .yrbtn{font-size:15px;padding:6px 14px}
.hanlab-pub .yrhead{margin:26px 0 6px}

/* ================= hierarchy: one dominant paper, three supporting ============ */
.hanlab-pub .hero{background:#4e2a84;color:#fff;margin:0 -9999px 30px;padding:46px 9999px 34px}
.hanlab-pub .heroh1{font:400 62px/1 "Source Serif 4",Georgia,serif;color:#fff;margin:0 0 16px;letter-spacing:-.02em}
.hanlab-pub .stand{font-size:16px;line-height:1.6;color:#d9cdee;max-width:760px;margin:0 0 22px}
.hanlab-pub .hero .top.bare{margin:0;border-top:1px solid rgba(255,255,255,.22);padding-top:16px}
.hanlab-pub .hero .sub{color:#c2b0de}
.hanlab-pub .hero .srch input{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.hanlab-pub .hero .srch input::placeholder{color:#c2b0de}

/* first Latest card runs full width with a large figure */
.hanlab-pub .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hanlab-pub .cards > .card:first-child{grid-column:1 / -1;padding:24px;border:0;background:#f4f1fa}
.hanlab-pub .cards > .card:first-child .hgrid{gap:30px;align-items:center}
.hanlab-pub .cards > .card:first-child .rail{width:clamp(220px,38%,420px)}
.hanlab-pub .cards > .card:first-child .figbox img{width:100%}
.hanlab-pub .cards > .card:first-child .jlogo{max-height:34px}
.hanlab-pub .cards > .card:first-child h3{font-size:32px;line-height:1.18}
.hanlab-pub .cards > .card:first-child .au,
.hanlab-pub .cards > .card:first-child .jr{font-size:14.5px}
.hanlab-pub .cards > .card:nth-child(n+2) h3{font-size:17.5px;line-height:1.3}
@media(max-width:900px){.hanlab-pub .cards{grid-template-columns:1fr}
  .hanlab-pub .cards > .card:first-child h3{font-size:24px}
  .hanlab-pub .heroh1{font-size:42px}}

/* themes read as a coloured set, not grey text */
.hanlab-pub .tile{border-left-width:5px;padding:11px 0 11px 15px}
.hanlab-pub .tn{font-weight:600}
.hanlab-pub .tc{color:var(--col);font-weight:700}
/* venue mark in the year rows */
.hanlab-pub .v{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hanlab-pub .rlogo{max-height:16px;max-width:96px;object-fit:contain}

/* ================= match the site's own type size ============ */
.hanlab-pub{font-size:17px}
.hanlab-pub .sub{font-size:15px}
.hanlab-pub .secttl{font-size:12.5px}
.hanlab-pub .r .t{font-size:21px}
.hanlab-pub .r .a,.hanlab-pub .r .v,.hanlab-pub .r .dl{font-size:15.5px}
.hanlab-pub .tn{font-size:16.5px}
.hanlab-pub .tc{font-size:13px}
.hanlab-pub .yrbtn{font-size:15.5px;padding:7px 15px}
.hanlab-pub .yrhead{font-size:28px}
.hanlab-pub .cards > .card:nth-child(n+2) h3{font-size:18.5px}
.hanlab-pub .cards > .card:nth-child(n+2) .au,
.hanlab-pub .cards > .card:nth-child(n+2) .jr{font-size:14.5px}
.hanlab-pub .phead{font-size:13px}
.hanlab-pub .foot{font-size:14px}
.hanlab-pub .srch input{font-size:15.5px}
.hanlab-pub .vbadge{font-size:11px}

/* ================= use the full content width ============ */
.hanlab-pub .wrap{max-width:none;padding-left:0;padding-right:0}
.hanlab-pub{background:transparent}
.hanlab-pub .hero{margin-left:-9999px;margin-right:-9999px;padding-left:9999px;padding-right:9999px}

/* ================= match the site: bold Be Vietnam Pro, not serif ============ */
.hanlab-pub .heroh1,
.hanlab-pub .r .t,
.hanlab-pub .yrhead,
.hanlab-pub .hi h3,
.hanlab-pub .card h3,
.hanlab-pub .htext h3{font-family:"Be Vietnam Pro",system-ui,sans-serif}
.hanlab-pub .heroh1{font-weight:700;font-size:54px;letter-spacing:-.015em}
.hanlab-pub .yrhead{font-weight:700;font-size:30px;color:#1c1726;letter-spacing:-.01em}
.hanlab-pub .cards > .card:first-child h3{font-weight:700;font-size:30px;line-height:1.2;letter-spacing:-.01em}
.hanlab-pub .cards > .card:nth-child(n+2) h3{font-weight:600;font-size:19px;line-height:1.32}
.hanlab-pub .r .t{font-weight:600;font-size:19.5px;line-height:1.38}
.hanlab-pub .r .t a{font-weight:600}
.hanlab-pub .stand{font-size:17px}

/* ================= hero inside the page, highlights that read as highlights ===== */
.hanlab-pub .hero{margin:0 0 28px;padding:44px 46px 30px}
.hanlab-pub .heroh1{font-size:48px}

/* the featured paper: purple rule, bigger badge, white ground */
.hanlab-pub .cards > .card:first-child{
  background:#fff;border:1px solid var(--line);border-top:4px solid #4e2a84;padding:26px 28px}
.hanlab-pub .cards > .card:first-child .tag{font-size:11px;padding:5px 12px;letter-spacing:.12em}
.hanlab-pub .cards > .card:nth-child(n+2){background:#fff;border:1px solid var(--line);border-top:3px solid #9fd8ef}
.hanlab-pub .tag{background:#4e2a84;color:#fff;border-radius:3px;font-weight:700;text-transform:uppercase}
.hanlab-pub .secttl{color:#4e2a84;font-weight:700}

/* ================= keep the venue badge inside its rail ============ */
.hanlab-pub .mark{overflow:hidden}
.hanlab-pub .vbadge{display:block;max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.25}
.hanlab-pub .card .rail,.hanlab-pub .hi .rail{min-width:0}

/* ================= TOC above, journal mark below, in one left column ========= */
.hanlab-pub .rpic{flex:none;width:124px}
.hanlab-pub .rthumb{width:124px;height:72px}
.hanlab-pub .rmark{height:22px;margin-top:7px;display:flex;align-items:center}
.hanlab-pub .rmark img{max-height:22px;max-width:124px;object-fit:contain;display:block}
.hanlab-pub .v{display:block}

/* ================= hero with optional art at the right ============ */
.hanlab-pub .hero{display:grid;grid-template-columns:1fr;gap:0 44px;align-items:start}
.hanlab-pub .hero.haspic{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
.hanlab-pub .herotext{min-width:0}
.hanlab-pub .heroart{display:flex;align-items:center;justify-content:center;min-width:0}
.hanlab-pub .heroart img{max-width:100%;max-height:230px;object-fit:contain;display:block}
.hanlab-pub .hero .top.bare{grid-column:1 / -1}
@media(max-width:900px){.hanlab-pub .hero.haspic{grid-template-columns:1fr}
  .hanlab-pub .heroart{margin-top:18px}}

/* ================= spin pattern on the right of the hero ============ */
.hanlab-pub .hero{position:relative;overflow:hidden;background-color:#4e2a84}
.hanlab-pub .herospins{position:absolute;inset:0 0 0 38%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);
  mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
.hanlab-pub .hero.haspic .herospins{inset:0 0 0 60%;opacity:.55}
.hanlab-pub .herosvg{width:100%;height:100%;display:block}
.hanlab-pub .spin{cursor:pointer}
.hanlab-pub .spin .hit{pointer-events:all}
.hanlab-pub .herotext,.hanlab-pub .heroart,.hanlab-pub .hero .top.bare{position:relative;z-index:1}
@media(max-width:900px){.hanlab-pub .hero::before{inset:0 0 0 20%;opacity:.55}}

/* ================= spin tool ============ */
.hanlab-spin .spingrid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:34px;align-items:start}
.hanlab-spin label{display:block;margin:0 0 16px;font-weight:600;font-size:14.5px;color:#1c1726}
.hanlab-spin label output{float:right;font-weight:500;color:#4e2a84;font-variant-numeric:tabular-nums}
.hanlab-spin input[type=range]{width:100%;margin-top:7px;accent-color:#4e2a84}
.hanlab-spin .spinnote{font-size:13px;color:#6f7585;margin:0 0 16px;line-height:1.5}
.hanlab-spq .spinout{border-top:1px solid var(--line);padding-top:14px}
.hanlab-spq .spinout div{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0}
.hanlab-spq .spinout span{font-size:14px;color:#6f7585}
.hanlab-spq .spinout b{font-size:19px;font-weight:700;color:#4e2a84;font-variant-numeric:tabular-nums}
.hanlab-spin .spinplot canvas{width:100%;height:380px;display:block;background:#fff;
  border:1px solid var(--line);border-radius:4px}
@media(max-width:860px){.hanlab-spin .spingrid{grid-template-columns:1fr}}

/* journal name as a mark where no masthead exists */
.hanlab-pub .rmark{height:auto;min-height:20px}
.hanlab-pub .rvtext{display:block;font:700 10px/1.25 "Be Vietnam Pro",system-ui,sans-serif;
  letter-spacing:.09em;text-transform:uppercase;color:#6f7585;max-width:124px}

/* spins read as clickable */
.hanlab-pub .spin{transition:opacity .18s}
.hanlab-pub .spin:hover{opacity:.9!important}
.hanlab-pub .spin.paused{opacity:.24!important}
.hanlab-pub .herospins{inset:0 0 0 30%}

/* make sure clicks reach the tops */
.hanlab-pub .herospins,
.hanlab-pub .herosvg{pointer-events:auto}
.hanlab-pub .spin{pointer-events:bounding-box;pointer-events:all;cursor:pointer}
.hanlab-pub .spin *{pointer-events:none}
.hanlab-pub .spin .hit{pointer-events:all}

/* ================= SpinQube: expandable tool panels ============ */
.hanlab-spq .spq{border:1px solid var(--line);border-left:4px solid #4e2a84;background:#fff;
  margin:0 0 16px;border-radius:3px}
.hanlab-spq .spq > summary{cursor:pointer;list-style:none;padding:18px 22px;display:flex;
  align-items:baseline;gap:14px;flex-wrap:wrap}
.hanlab-spq .spq > summary::-webkit-details-marker{display:none}
.hanlab-spq .spq > summary::before{content:"\25B8";color:#4e2a84;font-size:15px;
  transition:transform .15s;display:inline-block}
.hanlab-spq .spq[open] > summary::before{transform:rotate(90deg)}
.hanlab-spq .spqname{font:600 19px/1.3 "Be Vietnam Pro",system-ui,sans-serif;color:#1c1726}
.hanlab-spq .spqhint{font:600 10.5px/1 "Be Vietnam Pro",sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:#6f7585}
.hanlab-spq .spqbody{padding:0 22px 22px}

.hanlab-spq .spynote{font-size:13.5px;line-height:1.55;color:#6f7585;margin:0 0 16px;max-width:760px}
.hanlab-spq .spynote a{color:#4e2a84}
.hanlab-spq .spygrid{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:30px;
  align-items:start}
.hanlab-spq label{display:block;margin:0 0 12px;font-weight:600;font-size:14px;color:#1c1726}
.hanlab-spq input{width:100%;margin-top:5px;padding:7px 10px;border:1px solid var(--line);
  border-radius:4px;font:400 14.5px "Be Vietnam Pro",system-ui,sans-serif}
.hanlab-spq button{background:#4e2a84;color:#fff;border:0;border-radius:4px;padding:10px 20px;
  font:600 14.5px "Be Vietnam Pro",sans-serif;cursor:pointer}
.hanlab-spq button:disabled{opacity:.5;cursor:default}
.hanlab-spq .spy-sync{background:#fff;color:#4e2a84;border:1px solid #4e2a84}
.hanlab-spq .spy-status{font-size:13.5px;color:#4e2a84;min-height:20px;margin:10px 0 0}
.hanlab-spq .spy-canvas{width:100%;height:360px;display:block;background:#fff;
  border:1px solid var(--line);border-radius:4px}
.hanlab-spq .spycode{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.hanlab-spq .spycode > summary{cursor:pointer;font:600 14px "Be Vietnam Pro",sans-serif;color:#4e2a84}
.hanlab-spq .spy-code{width:100%;font:400 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  border:1px solid var(--line);border-radius:4px;padding:12px;background:#fbfbfe;color:#1c1726}
@media(max-width:860px){.hanlab-spq .spygrid{grid-template-columns:1fr}}

/* ================= periodic table ============ */
.hanlab-ptable .pt-grid{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:3px;margin:14px 0 20px}
.hanlab-ptable .pt-cell{border:1px solid var(--line);background:#fafafd;border-radius:3px;cursor:pointer;
  padding:5px 2px 4px;display:flex;flex-direction:column;align-items:center;gap:1px;min-height:52px;
  font-family:"Be Vietnam Pro",system-ui,sans-serif;transition:background .12s,border-color .12s}
.hanlab-ptable .pt-cell.active{background:#efe9f7;border-color:#c9b6e6}
.hanlab-ptable .pt-cell:hover{border-color:#4e2a84}
.hanlab-ptable .pt-cell.sel{background:#4e2a84;border-color:#4e2a84}
.hanlab-ptable .pt-cell.sel span{color:#fff}
.hanlab-ptable .pt-z{font-size:8.5px;color:#9a97ab;line-height:1}
.hanlab-ptable .pt-sym{font-size:14px;font-weight:700;color:#1c1726;line-height:1.1}
.hanlab-ptable .pt-best{font-size:8px;color:#6f7585;line-height:1}
.hanlab-ptable .pt-panel h4{font:700 19px "Be Vietnam Pro",sans-serif;margin:0 0 10px;color:#1c1726}
.hanlab-ptable .pt-panel h4 span{font-weight:400;font-size:15px;color:#6f7585}
.hanlab-ptable .pt-tab{width:100%;border-collapse:collapse;font-size:14px}
.hanlab-ptable .pt-tab th{text-align:left;font:600 11px "Be Vietnam Pro",sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:#6f7585;border-bottom:1px solid var(--line);padding:7px 10px 7px 0}
.hanlab-ptable .pt-tab td{padding:7px 10px 7px 0;border-bottom:1px solid #f1f0f7;
  font-variant-numeric:tabular-nums;color:#6f7585}
.hanlab-ptable .pt-tab tr.mag td{color:#1c1726}
.hanlab-ptable .pt-tab tr.mag td:first-child{font-weight:600;color:#4e2a84}
@media(max-width:860px){.hanlab-ptable .pt-grid{grid-template-columns:repeat(9,minmax(0,1fr))}
  .hanlab-ptable .pt-cell{grid-column:auto!important;grid-row:auto!important}}

.hanlab-spq .spyex{margin:18px 0 0;font-size:14px;font-weight:600;color:#1c1726}
.hanlab-spq .spyex select{margin-left:8px;padding:6px 9px;border:1px solid var(--line);
  border-radius:4px;font:400 14px "Be Vietnam Pro",system-ui,sans-serif}

.hanlab-spq .spylic{margin:0 0 16px}
.hanlab-spq .spylic > summary{cursor:pointer;font-size:13px;color:#6f7585}
.hanlab-spq .spylictext{font:400 11.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre-wrap;background:#fbfbfe;border:1px solid var(--line);border-radius:4px;
  padding:12px;color:#6f7585;max-height:300px;overflow:auto;margin:10px 0 0}

/* leave room for the sticky header when jumping to an anchor */
.hanlab-pub #highlights,
.hanlab-pub.hanlab-year{scroll-margin-top:120px}

/* ================= polarization panel ============ */
.hanlab-pol .polpick{font-size:13.5px;color:#6f7585;margin:0 0 10px;display:flex;gap:14px;flex-wrap:wrap}
.hanlab-pol .polpick label{display:inline-flex;align-items:center;gap:5px;font-weight:600;
  color:#1c1726;margin:0;font-size:13.5px}
.hanlab-pol .polpick input{width:auto;margin:0}
.hanlab-pol .pol-canvas{width:100%;height:340px;display:block;background:#fff;
  border:1px solid var(--line);border-radius:4px}
.hanlab-pol select{width:100%;margin-top:5px;padding:7px 10px;border:1px solid var(--line);
  border-radius:4px;font:400 14.5px "Be Vietnam Pro",system-ui,sans-serif}
.hanlab-pol input[type=range]{width:100%;margin-top:7px;accent-color:#4e2a84}
.hanlab-pol label{display:block;margin:0 0 14px;font-weight:600;font-size:14px;color:#1c1726}
.hanlab-pol label output{float:right;font-weight:500;color:#4e2a84;font-variant-numeric:tabular-nums}
.hanlab-spq .spinwin{margin-left:8px;padding:5px 8px;border:1px solid var(--line);border-radius:4px;
  font:400 13.5px "Be Vietnam Pro",system-ui,sans-serif}

/* two-column panel stack: wide panels span both columns */
.hanlab-spq .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.hanlab-spq .spq{margin:0}
.hanlab-spq .spq.spqwide{grid-column:1/-1}
.hanlab-spq .spq:not(.spqwide) .spygrid{grid-template-columns:1fr;gap:18px}
.hanlab-spq .spq:not(.spqwide) .spynote{max-width:none}
@media(max-width:1000px){.hanlab-spq .wrap{grid-template-columns:1fr}}

.hanlab-spq .spqfoot{grid-column:1/-1;border:0;border-left:6px solid #9fd8ef;
  background:linear-gradient(135deg,#2a1545 0%,#4e2a84 62%,#5f3a95 100%);padding:30px 34px;color:#efeaf7}
.hanlab-spq .spqfoot h3{margin:0 0 14px;font:700 25px/1.2 "Be Vietnam Pro",sans-serif;color:#fff;
  letter-spacing:-.01em}
.hanlab-spq .spqfoot p{margin:0 0 13px;font-size:15px;line-height:1.65;color:#ded5ee;max-width:860px}
.hanlab-spq .spqfoot a{color:#9fd8ef;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(159,216,239,.45)}
.hanlab-spq .spqfoot a:hover{color:#fff;border-bottom-color:#fff}
.hanlab-spq .spqcode{margin:0 0 16px;padding:13px 17px;background:rgba(0,0,0,.28);
  border:1px solid rgba(159,216,239,.3);border-radius:5px;
  font:400 14px ui-monospace,SFMono-Regular,Menlo,monospace;color:#9fd8ef}

/* ---- panel layout repairs ------------------------------------------- */
/* every plot canvas is bounded by its column; without this they grow on
   each redraw because clientWidth feeds back into the width attribute */
.hanlab-spq .spq canvas{display:block;width:100%;max-width:100%;background:#fff;
  border:1px solid var(--line);border-radius:4px}
.hanlab-spq .spq .tr-canvas,.hanlab-spq .spq .pk-canvas,.hanlab-spq .spq .ep-canvas{height:320px}
/* narrow panels collapse their inner two-column grids */
.hanlab-spq .spq:not(.spqwide) .spingrid{grid-template-columns:1fr;gap:18px}
/* one typographic scale across every tool */
.hanlab-spq{font-family:"Be Vietnam Pro",system-ui,sans-serif}
.hanlab-spq .spq label{display:block;margin:0 0 14px;font-weight:600;font-size:14.5px;color:#1c1726}
.hanlab-spq .spq label output{float:right;font-weight:500;color:#4e2a84;font-variant-numeric:tabular-nums}
.hanlab-spq .spq input[type=range]{width:100%;margin-top:7px;accent-color:#4e2a84}
.hanlab-spq .spq input[type=number],.hanlab-spq .spq input[type=text]{width:100%;margin-top:5px;
  padding:7px 10px;border:1px solid var(--line);border-radius:4px;font:400 14px "Be Vietnam Pro",sans-serif}
.hanlab-spq .spq .spynote{font-size:13.5px;line-height:1.55;color:#6f7585;margin:0 0 16px}
.hanlab-spq .spinout b{font-size:18px}

/* ---- nuclear table beside paramagnetic species ---------------------- */
.hanlab-spq .ptsplit{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);gap:28px;align-items:start}
.hanlab-spq .ptcol{min-width:0}
.hanlab-spq .spqsub{margin:0 0 12px;padding-bottom:8px;border-bottom:2px solid #4e2a84;
  font:700 12px "Be Vietnam Pro",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#4e2a84}

/* the table has to survive the narrower column */
.hanlab-spq .hanlab-ptable .pt-grid{gap:2px}
.hanlab-spq .hanlab-ptable .pt-sym{font-size:12.5px}
.hanlab-spq .hanlab-ptable .pt-z{font-size:7.5px}
.hanlab-spq .hanlab-ptable .pt-best{font-size:7px}
.hanlab-spq .hanlab-ptable .pt-cell{padding:3px 1px}
/* species picker */
.hanlab-epr .eppick{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
.hanlab-epr .ep-pick{font:600 13px "Be Vietnam Pro",sans-serif;cursor:pointer;
  background:#fff;color:#4e2a84;border:1.5px solid #d8cfe9;border-radius:999px;padding:6px 14px;
  transition:background .14s,border-color .14s,color .14s}
.hanlab-epr .ep-pick:hover{border-color:#4e2a84}
.hanlab-epr .ep-pick.on{background:#4e2a84;border-color:#4e2a84;color:#fff}
.hanlab-epr .epdesc{min-height:34px;font-size:13.5px;line-height:1.5;color:#4a4f5e;margin:0 0 14px}
.hanlab-epr .epfields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px;margin-bottom:16px}
.hanlab-epr .epfields label{margin-bottom:11px;font-size:13px}
.hanlab-epr .epfields select{width:100%;margin-top:5px;padding:7px 9px;border:1px solid var(--line);
  border-radius:4px;font:400 13.5px "Be Vietnam Pro",sans-serif;background:#fff}
.hanlab-epr .epfields output{float:none;margin-left:5px;font-size:12px;color:#9a97ab}
.hanlab-epr .spinout{margin-top:14px}
@media(max-width:700px){.hanlab-epr .epfields{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* time trace and its spectrum, side by side */
.hanlab-spin .sppair{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:start}
.hanlab-spin .sppair canvas{width:100%;max-width:100%;height:380px;display:block;background:#fff;
  border:1px solid var(--line);border-radius:4px}
@media(max-width:700px){.hanlab-spin .sppair{grid-template-columns:1fr}}
/* elements that carry a paramagnetic species */
.hanlab-ptable .pt-cell.pt-epr{box-shadow:inset 0 -3px 0 #d98068}
.hanlab-ptable .pt-cell.pt-epr.sel{box-shadow:inset 0 -3px 0 #f1bb76}

/* per-element species row */
.hanlab-epr .eppick2{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0 0 12px;
  padding:10px 12px;background:#faf8fd;border:1px solid #ece7f5;border-radius:6px;min-height:42px}
.hanlab-epr .eppick2:empty{display:none}
.hanlab-epr .eplab{font:700 11.5px "Be Vietnam Pro",sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:#6f7585;margin-right:4px}
.hanlab-epr .epnone{font-size:13px;color:#9a97ab}
.hanlab-epr .ep-cfg{margin:0 0 6px;font:700 16px "Be Vietnam Pro",sans-serif;color:#1c1726}
.hanlab-epr .ep-cfg span{font-weight:400;font-size:13.5px;color:#6f7585;margin-left:6px}

/* ---- dipolar panel at full width: controls, trace, spectrum + P(r) ---- */
.hanlab-spq .spq.spqwide .spingrid{grid-template-columns:minmax(0,280px) minmax(0,1.2fr) minmax(0,1fr);
  gap:24px;align-items:start}
.hanlab-spin .spinside{min-width:0}
.hanlab-spin .spinside canvas{width:100%;max-width:100%;display:block;background:#fff;
  border:1px solid var(--line);border-radius:4px}
.hanlab-spin .spinside #sp-canvas2{height:200px}
.hanlab-spin .spinside #sp-canvas3{height:150px}
.hanlab-spin .spinside .spinnote{margin:6px 0 16px}


/* ---- one type scale for every tool ---------------------------------- */
.hanlab-spq .spq .spynote,.hanlab-spq .spq .spinnote{font-size:14px;line-height:1.6;color:#6f7585}
.hanlab-spq .spq .spynote em,.hanlab-spq .spq .spinnote em{font-style:italic}
.hanlab-spq .spq label,.hanlab-spq .spq .spinctl label{font-size:14px;font-weight:600}
.hanlab-spq .spq .spinout span,.hanlab-spq .spq .spinout div span{font-size:14px}
.hanlab-spq .spq .spinout b{font-size:18px;font-weight:700}
.hanlab-spq .spq > summary .spqname{font-size:19px;font-weight:700;letter-spacing:-.005em}
.hanlab-spq .spq > summary .spqhint{font-size:10.5px;letter-spacing:.12em}

/* ---- panel identity: colours lifted from the SpinQube artwork -------- */
.hanlab-spq .wrap{gap:24px}
.hanlab-spq .spq{
  --acc:#4e2a84; --tint:rgba(78,42,132,.07); --line2:rgba(78,42,132,.22);
  border:1px solid #e8e4f1; border-left:5px solid var(--acc); border-radius:12px;
  background:#fff; box-shadow:0 3px 16px rgba(40,25,80,.07); overflow:hidden}
.hanlab-spq .spq:hover{box-shadow:0 6px 24px rgba(40,25,80,.11)}
.hanlab-spq .spq > summary{
  background:var(--tint); border-bottom:1px solid var(--line2);
  padding:17px 24px; gap:12px; align-items:baseline}
.hanlab-spq .spq[open] > summary{border-bottom:1px solid var(--line2)}
.hanlab-spq .spq > summary::before{color:var(--acc);font-size:13px}
.hanlab-spq .spq > summary .spqname{color:#1c1726}
.hanlab-spq .spq > summary .spqhint{
  color:var(--acc); background:#fff; border:1px solid var(--line2);
  border-radius:999px; padding:3px 11px; font-weight:700}
.hanlab-spq .spqbody{padding:22px 24px 24px}
.hanlab-spq .spq .spqsub{border-bottom-color:var(--acc);color:var(--acc)}
/* one colour per panel, in the order they appear */
.hanlab-spq .spq:nth-of-type(1){--acc:#1fa9bd;--tint:rgba(31,169,189,.09);--line2:rgba(31,169,189,.28)}
.hanlab-spq .spq:nth-of-type(2){--acc:#e07b2e;--tint:rgba(224,123,46,.09);--line2:rgba(224,123,46,.28)}
.hanlab-spq .spq:nth-of-type(3){--acc:#4e2a84;--tint:rgba(78,42,132,.08);--line2:rgba(78,42,132,.24)}
.hanlab-spq .spq:nth-of-type(4){--acc:#2f6f8f;--tint:rgba(47,111,143,.09);--line2:rgba(47,111,143,.26)}
.hanlab-spq .spq:nth-of-type(5){--acc:#c9544e;--tint:rgba(201,84,78,.08);--line2:rgba(201,84,78,.26)}
.hanlab-spq .spq:nth-of-type(6){--acc:#c08a1e;--tint:rgba(192,138,30,.10);--line2:rgba(192,138,30,.28)}
/* accents inside a panel follow its own colour */
.hanlab-spq .spq .spinout b{color:var(--acc)}
.hanlab-spq .spq label output{color:var(--acc)}
.hanlab-spq .spq input[type=range]{accent-color:var(--acc)}
.hanlab-spq .spq button:not(.ep-pick):not(.tw-add):not(.tw-clear):not(.gt-btn):not(.gt-reset){background:var(--acc)}
.hanlab-epr .ep-pick.on{background:var(--acc);border-color:var(--acc)}
.hanlab-epr .ep-pick{color:var(--acc)}
.hanlab-epr .ep-pick:hover{border-color:var(--acc)}
.hanlab-spq .spq .spqsub{border-bottom:2px solid var(--acc)}

/* lead band */
.hanlab-spq .spqlead{grid-column:1/-1;border-radius:12px;padding:28px 32px;
  background:linear-gradient(118deg,#2a1545 0%,#4e2a84 46%,#1fa9bd 100%);color:#fff;
  box-shadow:0 4px 20px rgba(40,25,80,.16);position:relative;overflow:hidden}
.hanlab-spq .spqlead::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;
  border-radius:50%;background:radial-gradient(circle,rgba(224,123,46,.55) 0%,rgba(224,123,46,0) 68%)}
.hanlab-spq .spqlead h2{margin:0 0 8px;font:700 30px/1.15 "Be Vietnam Pro",sans-serif;
  color:#fff;letter-spacing:-.015em;position:relative;z-index:1}
.hanlab-spq .spqlead p{margin:0;font-size:15.5px;line-height:1.55;color:#e4dcf2;max-width:640px;
  position:relative;z-index:1}

/* The wide panels lay out by available room, not by a fixed column count, so a
   browser zoom or a narrower window degrades gracefully instead of dropping a
   column onto its own row and leaving a third of the panel empty. */
.hanlab-spq .spq.spqwide .spingrid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px;align-items:start}
.hanlab-spq .spq.spqwide .ptsplit{grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:26px}
.hanlab-spq .spq .spingrid > *,.hanlab-spq .spq .ptsplit > *,
.hanlab-spq .spq .spygrid > *{min-width:0}
.hanlab-spq,.hanlab-spq .wrap,.hanlab-spq .spq{max-width:100%}
.hanlab-spq .spqbody{overflow-x:auto}

/* ====================================================================
   SpinQube runs on a dark ground. White cards on a white page read as a
   settings form however they are spaced; the dark field is what makes the
   plots and the accent colours carry. Every canvas colour in the JS was
   repainted to match. Scoped to .hanlab-spq so nothing else on the site
   is touched.
   ==================================================================== */
.hanlab-spq{
  --c-card:#1e1830; --c-head:#262036; --c-edge:#342c4c; --c-field:#171222;
  --c-ink:#f0ecfa; --c-mut:#a79fc0;
  background:radial-gradient(1200px 600px at 12% -5%,#2a1f45 0%,#140f20 55%,#100c19 100%);
  padding:34px 30px 38px; border-radius:16px; color:var(--c-ink)}
.hanlab-spq .secttl{color:var(--c-mut)}

.hanlab-spq .spq{background:var(--c-card);border:1px solid var(--c-edge);
  border-left:5px solid var(--acc);box-shadow:0 10px 30px rgba(0,0,0,.34)}
.hanlab-spq .spq:hover{box-shadow:0 14px 40px rgba(0,0,0,.46);border-color:var(--acc)}
.hanlab-spq .spq > summary{background:var(--c-head);border-bottom:1px solid var(--c-edge);
  padding:19px 26px}
.hanlab-spq .spq > summary .spqname{color:var(--c-ink)}
.hanlab-spq .spq > summary .spqhint{color:var(--acc);background:rgba(255,255,255,.05);
  border:1px solid var(--c-edge)}
.hanlab-spq .spq > summary::before{color:var(--acc)}

.hanlab-spq .spq .spynote,.hanlab-spq .spq .spinnote{color:var(--c-mut)}
.hanlab-spq .spq label,.hanlab-spq .spq .spinctl label{color:var(--c-ink)}
.hanlab-spq .spq .spinout{border-top:1px solid var(--c-edge)}
.hanlab-spq .spq .spinout span{color:var(--c-mut)}
.hanlab-spq .spq .spinout b{color:var(--acc)}
.hanlab-spq .spq label output{color:var(--acc)}
.hanlab-spq .spq .spqsub{color:var(--acc);border-bottom-color:var(--acc)}

/* fields on dark */
.hanlab-spq .spq input[type=number],.hanlab-spq .spq input[type=text],
.hanlab-spq .spq select,.hanlab-spq .spq textarea{
  background:var(--c-field);border:1px solid var(--c-edge);color:var(--c-ink)}
.hanlab-spq .spq input:focus,.hanlab-spq .spq select:focus{
  border-color:var(--acc);outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.07)}
.hanlab-spq .spq input[type=range]{accent-color:var(--acc)}

/* plots sit on the card, not on white */
.hanlab-spq .spq canvas,.hanlab-spq .spq .spy-canvas,.hanlab-spq .spq .pol-canvas,
.hanlab-spq .spin .spinplot canvas,.hanlab-spq .spq .spinside canvas{
  background:#15101f;border:1px solid var(--c-edge);border-radius:6px}

/* periodic table on dark */
.hanlab-ptable .pt-cell{background:#221b36;border-color:var(--c-edge)}
.hanlab-ptable .pt-cell.active{background:#2c2347;border-color:#4b3f6e}
.hanlab-ptable .pt-cell:hover{border-color:var(--acc)}
.hanlab-ptable .pt-cell.sel{background:var(--acc);border-color:var(--acc)}
.hanlab-ptable .pt-sym{color:var(--c-ink)}
.hanlab-ptable .pt-z{color:#7b7296}
.hanlab-ptable .pt-best{color:var(--c-mut)}
.hanlab-ptable .pt-cell.sel .pt-sym,.hanlab-ptable .pt-cell.sel .pt-z,
.hanlab-ptable .pt-cell.sel .pt-best{color:#140f20}
.hanlab-ptable .pt-panel h4{color:var(--c-ink)}
.hanlab-ptable .pt-panel h4 span{color:var(--c-mut)}
.hanlab-ptable .pt-tab th{color:var(--c-mut);border-bottom-color:var(--c-edge)}
.hanlab-ptable .pt-tab td{border-bottom-color:#241d3a;color:var(--c-mut)}
.hanlab-ptable .pt-tab tr.mag td{color:var(--c-ink)}
.hanlab-ptable .pt-tab tr.mag td:first-child{color:var(--acc)}

/* species picker on dark */
.hanlab-epr .eppick2{background:rgba(255,255,255,.035);border-color:var(--c-edge)}
.hanlab-epr .ep-pick{background:transparent;color:var(--c-ink);border-color:var(--c-edge)}
.hanlab-epr .ep-pick:hover{border-color:var(--acc);color:var(--acc)}
.hanlab-epr .ep-pick.on{background:var(--acc);border-color:var(--acc);color:#140f20}
.hanlab-epr .ep-cfg{color:var(--c-ink)}
.hanlab-epr .ep-cfg span,.hanlab-epr .epdesc,.hanlab-epr .eplab,
.hanlab-epr .epnone{color:var(--c-mut)}

/* Spynach code box and licence */
.hanlab-spq .spy-code{background:var(--c-field);border-color:var(--c-edge);color:#cfe8f5}
.hanlab-spq .spycode > summary,.hanlab-spq .spylic > summary{color:var(--acc)}
.hanlab-spq .spylictext{background:var(--c-field);border-color:var(--c-edge);color:var(--c-mut)}
.hanlab-spq .spy-status{color:var(--acc)}
.hanlab-spq .spq a{color:var(--acc)}

/* lead band: brighter, with the cube colours */
.hanlab-spq .spqlead{background:linear-gradient(112deg,#3a1f6b 0%,#4e2a84 38%,#17707f 100%);
  border:1px solid rgba(255,255,255,.1);padding:34px 36px}
.hanlab-spq .spqlead h2{font-size:34px}
.hanlab-spq .spqlead p{color:#ddd4f0;font-size:16px}

/* the Spynach block reads as the one light-on-dark destination */
.hanlab-spq .spqfoot{background:linear-gradient(135deg,#17707f 0%,#1fa9bd 58%,#2ec4d6 100%);
  border-left:6px solid #ffd27a;color:#06232a}
.hanlab-spq .spqfoot h3{color:#06232a}
.hanlab-spq .spqfoot p{color:#083039}
.hanlab-spq .spqfoot a{color:#06232a;border-bottom-color:rgba(6,35,42,.5);font-weight:700}
.hanlab-spq .spqfoot a:hover{color:#000;border-bottom-color:#000}
.hanlab-spq .spqcode{background:rgba(0,0,0,.22);border-color:rgba(6,35,42,.25);color:#eafaff}

/* The Spynach block takes his own site's treatment: near-black ground, one
   teal accent, larger body type than the panels around it. */
.hanlab-spq .spqfoot{background:#0d1117;border:1px solid #1d2a30;border-left:6px solid #2ec4b6;
  color:#c9d6db;padding:34px 38px;box-shadow:0 10px 34px rgba(0,0,0,.4)}
.hanlab-spq .spqfoot h3{color:#fff;font-size:27px;margin-bottom:16px}
.hanlab-spq .spqfoot h4{margin:24px 0 10px;font:700 18px "Be Vietnam Pro",sans-serif;color:#2ec4b6}
.hanlab-spq .spqfoot p{color:#c2d0d6;font-size:16.5px;line-height:1.72;max-width:70ch;margin:0 0 14px}
.hanlab-spq .spqfoot a{color:#2ec4b6;font-weight:600;border-bottom:1px solid rgba(46,196,182,.4)}
.hanlab-spq .spqfoot a:hover{color:#6fe3d6;border-bottom-color:#6fe3d6}
.hanlab-spq .spqcode{background:#11181d;border:1px solid #243238;border-radius:6px;
  color:#2ee6c4;font-size:15px;padding:14px 18px;margin:0 0 18px}

/* Dipolar panel: controls left, plots right. The right side is its own grid -
   the time trace spans the full width, the Pake pattern and P(r) sit as a pair
   beneath it. Fixed two columns at the top level, so no column can be stranded
   on its own row whatever the zoom level. */
.hanlab-spq .spq.spqwide .spingrid{grid-template-columns:minmax(260px,320px) minmax(0,1fr);
  gap:30px;align-items:start}
.hanlab-spin .spinplots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px 22px;min-width:0}
.hanlab-spin .spfig{margin:0;min-width:0}
.hanlab-spin .spfig-wide{grid-column:1/-1}
.hanlab-spin .spfig canvas{width:100%;max-width:100%;display:block}
.hanlab-spin .spfig-wide canvas{height:340px}
.hanlab-spin .spfig:not(.spfig-wide) canvas{height:240px}
.hanlab-spin .spfig figcaption{margin-top:9px;font-size:13.5px;line-height:1.55;color:var(--c-mut)}
@media(max-width:900px){
  .hanlab-spq .spq.spqwide .spingrid{grid-template-columns:1fr}
  .hanlab-spin .spinplots{grid-template-columns:1fr}
}

/* ---- pulse sequence panel ------------------------------------------- */
.hanlab-seq .sqgrid{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:26px;align-items:start}
.hanlab-seq .sqpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;margin-top:4px}
.hanlab-seq .sqpair label{font-size:13px;margin-bottom:11px}
.hanlab-seq .sqchan{margin:0 0 16px;padding:12px 14px;background:rgba(255,255,255,.04);
  border:1px solid var(--c-edge);border-radius:8px}
.hanlab-seq .sqchan > span{display:block;font:700 11px "Be Vietnam Pro",sans-serif;
  letter-spacing:.13em;text-transform:uppercase;color:var(--c-mut);margin-bottom:9px}
.hanlab-seq .sqck{display:flex;align-items:center;gap:8px;margin:0 0 7px;font-size:13.5px;
  font-weight:500;cursor:pointer}
.hanlab-seq .sqck input{width:auto;margin:0;accent-color:var(--acc)}
.hanlab-seq .sqplots{display:grid;gap:20px;min-width:0}
.hanlab-seq .sq-diagram{height:190px}
.hanlab-seq .sq-plot{height:300px}
.hanlab-seq .sq-status{margin:6px 0 0;font-size:13px;color:var(--acc)}
@media(max-width:900px){.hanlab-seq .sqgrid{grid-template-columns:1fr}}

/* ---- qubit gate panel ----------------------------------------------- */
.hanlab-gate .gtgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.hanlab-gate .gtbtns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.hanlab-gate .gt-btn,.hanlab-gate .gt-reset{
  font:700 15px "Be Vietnam Pro",sans-serif;cursor:pointer;min-width:50px;
  background:rgba(255,255,255,.05);color:var(--c-ink);border:1px solid var(--c-edge);
  border-radius:9px;padding:10px 14px;transition:background .13s,border-color .13s,transform .08s}
.hanlab-gate .gt-btn:hover,.hanlab-gate .gt-reset:hover{border-color:var(--acc);color:var(--acc)}
.hanlab-gate .gt-btn:active{transform:translateY(1px)}
.hanlab-gate .gt-reset{font-weight:500;font-size:13.5px;color:var(--c-mut)}
.hanlab-gate .gt-state{font-size:14.5px;color:var(--c-ink);
  font-variant-numeric:tabular-nums;margin:14px 0 8px}
.hanlab-gate .gt-hist{color:var(--acc);font-weight:600}
.hanlab-gate .gt-canvas{height:300px}
@media(max-width:900px){.hanlab-gate .gtgrid{grid-template-columns:1fr}}

/* ---- one spin on the Bloch sphere ----------------------------------- */
.hanlab-one .ongrid{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);
  gap:24px;align-items:start}
.hanlab-one .onplots{display:grid;gap:18px;min-width:0}
.hanlab-one .on-sphere{height:300px}
.hanlab-one .on-trace{height:170px}
.hanlab-one .onplay{display:flex;align-items:center;gap:12px;margin:4px 0 16px}
.hanlab-one .on-play{font:600 13.5px "Be Vietnam Pro",sans-serif;cursor:pointer;min-width:74px;
  background:var(--acc);color:#140f20;border:0;border-radius:8px;padding:9px 14px}
.hanlab-one .on-play:hover{filter:brightness(1.12)}
.hanlab-one .on-scrub{flex:1;margin:0;accent-color:var(--acc)}
.hanlab-one .sqchan{margin:0 0 14px;padding:12px 14px;background:rgba(255,255,255,.04);
  border:1px solid var(--c-edge);border-radius:8px}
.hanlab-one .sqchan > span{display:block;font:700 11px "Be Vietnam Pro",sans-serif;
  letter-spacing:.13em;text-transform:uppercase;color:var(--c-mut);margin-bottom:9px}
.hanlab-one .sqck{display:flex;align-items:center;gap:8px;margin:0 0 9px;font-size:13.5px;
  font-weight:500;cursor:pointer}
.hanlab-one .sqck input{width:auto;margin:0;accent-color:var(--acc)}
.hanlab-one .sqpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.hanlab-one .sqpair label{font-size:13px;margin-bottom:11px}
@media(max-width:900px){.hanlab-one .ongrid{grid-template-columns:1fr}}
/* the Spynach panel now sits at half width beside the three-channel one */
.hanlab-spq .spq .spygrid{grid-template-columns:1fr;gap:18px}

/* ---- the two parallel builder panels -------------------------------- */
.hanlab-twopulse .twgrid,.hanlab-twogate .twgrid{display:grid;
  grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:24px;align-items:start}
.hanlab-twopulse .sqpair,.hanlab-twogate .sqpair{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.hanlab-twopulse .sqpair label,.hanlab-twogate .sqpair label{font-size:13px;margin-bottom:11px}
.hanlab-twopulse .sqchan,.hanlab-twogate .sqchan{margin:0 0 14px;padding:12px 14px;
  background:rgba(255,255,255,.04);border:1px solid var(--c-edge);border-radius:8px}
.hanlab-twopulse .sqchan > span,.hanlab-twogate .sqchan > span,
.hanlab-twopulse .twhead,.hanlab-twogate .twhead{display:block;
  font:700 11px "Be Vietnam Pro",sans-serif;letter-spacing:.13em;text-transform:uppercase;
  color:var(--c-mut);margin-bottom:9px}
.hanlab-twopulse .sqck,.hanlab-twogate .sqck{display:flex;align-items:center;gap:8px;
  margin:0 0 7px;font-size:13.5px;font-weight:500;cursor:pointer}
.hanlab-twopulse .sqck input,.hanlab-twogate .sqck input{width:auto;margin:0;accent-color:var(--acc)}
.hanlab-twopulse .twbuild,.hanlab-twogate .twbuild{margin:0 0 16px}
.hanlab-twopulse .tw-pal,.hanlab-twogate .tw-pal{display:flex;flex-wrap:wrap;gap:6px}
.hanlab-twopulse .tw-add,.hanlab-twogate .tw-add{font:600 12.5px "Be Vietnam Pro",sans-serif;
  cursor:pointer;background:rgba(255,255,255,.05);color:var(--c-ink);
  border:1px solid var(--c-edge);border-radius:7px;padding:7px 11px}
.hanlab-twopulse .tw-add:hover,.hanlab-twogate .tw-add:hover{border-color:var(--acc);color:var(--acc)}
.hanlab-twopulse .tw-list,.hanlab-twogate .tw-list{display:flex;flex-wrap:wrap;gap:6px;
  min-height:38px;padding:9px;background:rgba(0,0,0,.22);border:1px solid var(--c-edge);
  border-radius:8px}
.hanlab-twopulse .twstep,.hanlab-twogate .twstep{display:inline-flex;align-items:center;gap:6px;
  font:600 12.5px "Be Vietnam Pro",sans-serif;cursor:pointer;background:var(--acc);color:#140f20;
  border-radius:6px;padding:5px 9px}
.hanlab-twopulse .twstep em,.hanlab-twogate .twstep em{font-style:normal;opacity:.6;font-weight:700}
.hanlab-twopulse .twstep:hover,.hanlab-twogate .twstep:hover{filter:brightness(1.15)}
.hanlab-twopulse .twstep:hover em,.hanlab-twogate .twstep:hover em{opacity:1}
.hanlab-twopulse .twempty,.hanlab-twogate .twempty{font-size:13px;color:#6f6790}
.hanlab-twopulse .twrow,.hanlab-twogate .twrow{display:flex;gap:9px;margin-top:10px}
.hanlab-twopulse .twrow select,.hanlab-twogate .twrow select{flex:1;margin:0}
.hanlab-twopulse .tw-clear,.hanlab-twogate .tw-clear{font:500 13px "Be Vietnam Pro",sans-serif;
  cursor:pointer;background:transparent;color:var(--c-mut);border:1px solid var(--c-edge);
  border-radius:7px;padding:7px 13px}
.hanlab-twopulse .tw-clear:hover,.hanlab-twogate .tw-clear:hover{color:var(--acc);border-color:var(--acc)}
.hanlab-twopulse .tw-play,.hanlab-twogate .tw-play{font:600 13.5px "Be Vietnam Pro",sans-serif;
  cursor:pointer;min-width:74px;background:var(--acc);color:#140f20;border:0;border-radius:8px;
  padding:9px 14px}
.hanlab-twopulse .tw-scrub,.hanlab-twogate .tw-scrub{flex:1;margin:0;accent-color:var(--acc)}
.hanlab-twopulse .twplots,.hanlab-twogate .twplots{display:grid;gap:18px;min-width:0}
.hanlab-twopulse .twspheres,.hanlab-twogate .twspheres{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hanlab-twopulse .tw-sphA,.hanlab-twopulse .tw-sphB,
.hanlab-twogate .tw-sphA,.hanlab-twogate .tw-sphB{height:260px}
.hanlab-twopulse .tw-trace{height:150px}
@media(max-width:900px){
  .hanlab-twopulse .twgrid,.hanlab-twogate .twgrid{grid-template-columns:1fr}
  .hanlab-twopulse .twspheres,.hanlab-twogate .twspheres{grid-template-columns:1fr}
}

/* These sit under .hanlab-spq .spq so they outrank the panel-wide button rule. */
.hanlab-spq .spq .tw-add{font:600 12.5px "Be Vietnam Pro",sans-serif;cursor:pointer;
  background:rgba(255,255,255,.055);color:var(--c-ink);border:1px solid var(--c-edge);
  border-radius:7px;padding:7px 11px}
.hanlab-spq .spq .tw-add:hover{border-color:var(--acc);color:var(--acc);
  background:rgba(255,255,255,.1)}
.hanlab-spq .spq .tw-clear{font:500 13px "Be Vietnam Pro",sans-serif;cursor:pointer;
  background:transparent;color:var(--c-mut);border:1px solid var(--c-edge);
  border-radius:7px;padding:7px 13px}
.hanlab-spq .spq .tw-clear:hover{color:var(--acc);border-color:var(--acc)}
.hanlab-spq .spq .tw-list{display:flex;flex-wrap:wrap;gap:7px;align-items:center;
  min-height:40px;padding:10px;background:rgba(0,0,0,.26);border:1px solid var(--c-edge);
  border-radius:8px}
.hanlab-spq .spq .twstep{display:inline-flex;align-items:center;gap:7px;
  font:600 12.5px "Be Vietnam Pro",sans-serif;cursor:pointer;background:var(--acc);
  color:#140f20;border-radius:6px;padding:6px 10px;line-height:1}
.hanlab-spq .spq .twstep em{font-style:normal;font-weight:700;opacity:.55}
.hanlab-spq .spq .twstep:hover{filter:brightness(1.15)}
.hanlab-spq .spq .twstep:hover em{opacity:1}
.hanlab-spq .spq .twempty{font-size:13px;color:#6f6790}
/* start button reads as the one primary action in the panel */
.hanlab-spq .spq .tw-play{font:700 13.5px "Be Vietnam Pro",sans-serif;cursor:pointer;
  min-width:82px;background:var(--acc);color:#140f20;border:0;border-radius:8px;padding:10px 16px}
.hanlab-spq .spq .tw-play:hover{filter:brightness(1.12)}

/* ---- the sequence diagram is the centrepiece ------------------------ */
.hanlab-spq .spq .twseqfig{margin:0 0 16px;padding:14px 16px 10px;border-radius:10px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--c-edge)}
.hanlab-spq .spq .tw-seq{height:210px;background:transparent;border:0;border-radius:0}
.hanlab-twogate .tw-seq{height:170px}
.hanlab-spq .spq .twlead{margin:0 0 16px}
/* the two panels drop their old side-by-side control column */
.hanlab-twopulse .twgrid,.hanlab-twogate .twgrid{display:block}
.hanlab-spq .spq .twspheres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;margin-bottom:16px}
/* checkboxes: the panel-wide label rule makes them block, so override it here */
.hanlab-spq .spq label.sqck{display:flex;align-items:center;gap:9px;margin:0 0 9px;
  font-size:13.5px;font-weight:500;cursor:pointer}
.hanlab-spq .spq label.sqck input{width:auto;margin:0;flex:none;accent-color:var(--acc)}
/* spin parameters: present but not the headline */
.hanlab-spq .spq .twparams{margin:18px 0 0;border:1px solid var(--c-edge);border-radius:9px;
  background:rgba(0,0,0,.2)}
.hanlab-spq .spq .twparams > summary{cursor:pointer;list-style:none;padding:11px 15px;
  font:600 12.5px "Be Vietnam Pro",sans-serif;letter-spacing:.06em;color:var(--c-mut)}
.hanlab-spq .spq .twparams > summary::-webkit-details-marker{display:none}
.hanlab-spq .spq .twparams > summary::before{content:"\25B8";margin-right:9px;color:var(--acc);
  display:inline-block;transition:transform .15s}
.hanlab-spq .spq .twparams[open] > summary::before{transform:rotate(90deg)}
.hanlab-spq .spq .twparams > summary:hover{color:var(--acc)}
.hanlab-spq .spq .twpbody{padding:4px 15px 14px}
.hanlab-spq .spq .twpbody .sqpair{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 12px;margin-top:10px}
.hanlab-spq .spq .twpbody label{font-size:12.5px;margin-bottom:9px}
.hanlab-spq .spq .twpbody input[type=number]{padding:6px 9px;font-size:13px}
@media(max-width:700px){.hanlab-spq .spq .twpbody .sqpair{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hanlab-spq .spq .twspheres{grid-template-columns:1fr}}

/* target selector: which spin a pulse or gate is applied to */
.hanlab-spq .spq .tw-targets{display:flex;gap:7px}
.hanlab-spq .spq .tw-tgt{font:700 13px "Be Vietnam Pro",sans-serif;cursor:pointer;min-width:58px;
  background:rgba(255,255,255,.055);color:var(--c-ink);border:1px solid var(--c-edge);
  border-radius:7px;padding:8px 14px}
.hanlab-spq .spq .tw-tgt:hover{border-color:var(--acc);color:var(--acc)}
.hanlab-spq .spq .tw-tgt.on{background:var(--acc);border-color:var(--acc);color:#140f20}
.hanlab-spq .spq .tw-pal2{display:flex;flex-wrap:wrap;gap:6px}
.hanlab-spq .spq .tw-add2{font:600 12.5px "Be Vietnam Pro",sans-serif;cursor:pointer;
  background:rgba(255,255,255,.055);color:var(--c-ink);border:1px solid var(--c-edge);
  border-radius:7px;padding:7px 11px}
.hanlab-spq .spq .tw-add2:hover{border-color:var(--acc);color:var(--acc);
  background:rgba(255,255,255,.1)}
.hanlab-spq .spq .tw-detect{color:#56c7e8;border-color:rgba(86,199,232,.45)}
.hanlab-spq .spq .tw-detect:hover{color:#8fe0f5;border-color:#56c7e8}

/* target row with the two sequence-editing controls pushed to the right */
.hanlab-spq .spq .twtoprow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hanlab-spq .spq .twspacer{flex:1;min-width:8px}
.hanlab-spq .spq .tw-undo,.hanlab-spq .spq .tw-empty{
  font:600 12.5px "Be Vietnam Pro",sans-serif;cursor:pointer;background:transparent;
  color:var(--c-mut);border:1px solid var(--c-edge);border-radius:7px;padding:7px 12px}
.hanlab-spq .spq .tw-undo:hover,.hanlab-spq .spq .tw-empty:hover{
  color:var(--acc);border-color:var(--acc)}

/* playback row: play the whole thing, or walk it one step at a time */
.hanlab-spq .spq .tw-prev,.hanlab-spq .spq .tw-next{
  font:600 13px "Be Vietnam Pro",sans-serif;cursor:pointer;background:rgba(255,255,255,.055);
  color:var(--c-ink);border:1px solid var(--c-edge);border-radius:8px;padding:9px 13px}
.hanlab-spq .spq .tw-prev:hover,.hanlab-spq .spq .tw-next:hover{
  border-color:var(--acc);color:var(--acc)}
/* one card per step: thumbnail plus what that step did */

/* the running commentary, right under the spheres */
.hanlab-spq .spq .twwhatline{margin:0 0 14px;padding:11px 14px;border-radius:8px;
  background:rgba(255,255,255,.045);border-left:3px solid var(--acc);
  font-size:14px;line-height:1.55;color:var(--c-ink)}
.hanlab-spq .spq .twwhatline:empty{display:none}