/* The discharge exam (discharge.js). Generated with it: see the note at the top of discharge.js. */
@font-face{font-family:"Bodoni Moda";src:url(fonts/BodoniModa.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/InstrumentSerif.woff2) format("woff2");font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/PlexMono.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Mrs Saint Delafield";src:url(fonts/Signature.woff2) format("woff2");font-display:swap}
.dx-exam *,.dx-exam *::before,.dx-exam *::after{font-style:normal!important}
.dx-prac{position:absolute;left:0;right:0;top:0;z-index:30;background:#ffe45c;color:#222;font:13px/1.3 Tahoma,sans-serif;padding:4px 8px;text-align:center;pointer-events:none}
.hx-tabs{gap:2px;padding-top:34px;overflow:hidden}
.fc-hx .hx-tab{height:calc((100vh - 240px) / 18);min-height:22px;max-height:32px;font-size:13px;width:178px}
.fc-hx .hx-tab.hx-on{width:190px}
.hx-tn{font-size:13px;width:18px}
.hx-tck{width:14px;height:14px}
.hx-inav{position:sticky;bottom:-20px;z-index:6;display:flex;gap:8px;margin:14px -8px -20px;padding:12px 8px 20px;background:linear-gradient(rgba(255,253,246,0),var(--paper) 22%)}
/* the referral */
.hx-ref{max-width:640px;margin:0 0 18px;padding:14px 16px;background:#fff;border:1px solid #c9c2b0;border-top:5px solid #1d3f8f;box-shadow:0 1px 3px rgba(0,0,0,.12);font:16px/1.4 -apple-system,system-ui,sans-serif;color:#23211d}
.hx-ref-h{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;border-bottom:1px solid #d8d3c6;padding-bottom:8px;margin-bottom:10px}
.hx-ref-h b{font:500 20px "Bodoni Moda",serif;letter-spacing:.14em}
.hx-ref-h span{font:11.5px "IBM Plex Mono",monospace;color:#6a6456}
.hx-ref dl{display:grid;grid-template-columns:92px 1fr;gap:8px 12px;margin:0}
.hx-ref dt{font:11.5px/1.9 "IBM Plex Mono",monospace;color:#6a6456;text-transform:uppercase;letter-spacing:.04em}
.hx-ref dd{margin:0}
/* the graduation stage */
.hx-room.hx-grad{background:repeating-linear-gradient(90deg,#3a1420 0 26px,#4d1b2a 26px 52px);box-shadow:inset 0 0 60px rgba(0,0,0,.55)}
.gr-floor{position:absolute;left:0;right:0;bottom:0;height:27%;background:linear-gradient(#a9794a,#8a5f38 18%,#6f4b2c);border-top:4px solid #c79a63}
.gr-banner{position:absolute;left:14%;right:22%;top:5%;padding:8px 6px;background:#f4efe2;border:2px solid #b9974d;text-align:center;color:#2a2418;box-shadow:0 3px 8px rgba(0,0,0,.45);z-index:1}
.gr-banner b{display:block;font:500 clamp(13px,2.1vw,21px) "Bodoni Moda",serif;letter-spacing:.14em;white-space:nowrap}
.gr-banner span{font:clamp(9px,1.1vw,11.5px) "IBM Plex Mono",monospace;letter-spacing:.14em;color:#6a6456}
.gr-flag{position:absolute;bottom:27%;width:7%;min-width:26px;height:42%;background:linear-gradient(90deg,#1d3f8f,#2c56b4);clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%);border-top:5px solid #b9974d}
.gr-f1{left:5%}.gr-f2{left:15%;background:linear-gradient(90deg,#b9974d,#d8b868)}
.hx-grad .hx-door{right:0;bottom:22%;width:17%;min-width:64px;height:78%;background:transparent;border:0;perspective:none;z-index:2}
.hx-grad .hx-dp{inset:0 0 16px 0;background:repeating-linear-gradient(90deg,#7c1f2e 0 12px,#9c2a3c 12px 24px);transform-origin:100% 50%;box-shadow:-4px 0 10px rgba(0,0,0,.45)}
.hx-grad .hx-door.hx-open .hx-dp{transform:scaleX(.3)}
.gr-shoes{position:absolute;left:30%;bottom:0;width:46px;height:16px;background:radial-gradient(ellipse at 28% 70%,#241a12 0 55%,transparent 58%) 0 0/22px 16px no-repeat,radial-gradient(ellipse at 72% 70%,#241a12 0 55%,transparent 58%) 24px 0/22px 16px no-repeat;transition:opacity .2s}
.hx-door.gr-empty .gr-shoes{opacity:0}
.hx-grad .hx-dbub{right:58%;top:30%}
.hx-grad .hx-guy{bottom:27%;z-index:3}
.hx-grad .hx-coat{background:#1b1d29;height:112px}
.hx-grad .hx-coat::before{border-top-color:#b9974d}
.gr-cap{position:absolute;left:50%;top:-10px;width:84px;height:22px;margin-left:-42px;background:#14151c;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);z-index:4}
.hx-al .gr-cap{top:-4px;transform:rotate(-9deg)}
.gr-podium{position:absolute;left:50%;bottom:17%;width:150px;height:27%;margin-left:-75px;background:linear-gradient(90deg,#5a3a20,#7b5230 45%,#5a3a20);border:2px solid #2f1e10;border-bottom:0;border-radius:6px 6px 0 0;clip-path:polygon(0 0,100% 0,92% 100%,8% 100%);z-index:4}
.gr-mic{position:absolute;left:50%;top:0;width:4px;height:0}
.gr-seal{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:#e9c978;border:3px double #7b5a1d;display:flex;align-items:center;justify-content:center;color:#5a3f10}
.gr-seal b{font:500 15px "Bodoni Moda",serif;letter-spacing:.03em}
.gr-crowd{position:absolute;left:0;right:0;bottom:0;height:19%;z-index:5;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 64'%3E%3Ccircle cx='37' cy='48' r='20' fill='%2310111a'/%3E%3Cpolygon points='37,10 70,23 37,36 4,23' fill='%2323252f'/%3E%3Cpath d='M58 25 V40' stroke='%23b9974d' stroke-width='2.5'/%3E%3C/svg%3E") 0 0/74px 64px repeat-x,linear-gradient(transparent 62%,#10111a 62%)}
.gr-crowd i{position:absolute;bottom:60%;width:34px;height:12px;background:#14151c;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);opacity:0}
.gr-crowd i:nth-child(1){left:8%}.gr-crowd i:nth-child(2){left:24%}.gr-crowd i:nth-child(3){left:40%}.gr-crowd i:nth-child(4){left:56%}.gr-crowd i:nth-child(5){left:72%}.gr-crowd i:nth-child(6){left:88%}
.gr-toss i{animation:gr-toss 1.5s ease-out forwards}
.gr-toss i:nth-child(2n){animation-delay:.12s;--h:-230px}.gr-toss i:nth-child(3n){animation-delay:.22s;--h:-280px}
@keyframes gr-toss{0%{opacity:1;transform:none}55%{opacity:1;transform:translateY(var(--h,-200px)) rotate(200deg)}100%{opacity:0;transform:translateY(-10px) rotate(420deg)}}
.hx-grad .hx-say{z-index:7}
/* the diploma */
.hx-paper.hx-rxmode{background:#f4f1ea;box-shadow:0 1px 3px rgba(0,0,0,.22)}
.hx-paper.hx-rxmode .hx-pg{display:block}
.dp-wrap{max-width:860px;margin:0 auto;font:16px/1.45 -apple-system,system-ui,sans-serif;color:#23211d}
.dp-canvas{display:block;width:auto;max-width:100%;height:auto;max-height:calc(100vh - 318px);margin:0 auto;border-radius:2px;box-shadow:0 8px 30px rgba(0,0,0,.18)}
.dp-note{margin:4px 0 10px;font-size:15px}
.dp-fields{display:grid;grid-template-columns:1fr 1fr 2fr;gap:10px;margin:0 0 14px}
.dp-fields label{display:block;font-size:12.5px;color:#66604f}
.dp-fields input{display:block;width:100%;box-sizing:border-box;font:16px -apple-system,system-ui,sans-serif;padding:8px 9px;margin-top:3px;border:1px solid #c9c2b0;border-radius:6px;background:#fff;color:#23211d}
.dp-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.dp-acts button,.dp-acts a{font:600 15px -apple-system,system-ui,sans-serif;min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;padding:0 16px;border:1px solid #23211d;border-radius:8px;background:#fff;color:#23211d;cursor:pointer;text-decoration:none}
.dp-acts .dp-main{background:#23211d;color:#fff}
.dp-said{display:none}
@media (max-width:700px){
  .hx-tabs{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .hx-tabs::-webkit-scrollbar{display:none}
  .fc-hx .hx-tab,.fc-hx .hx-tab.hx-on{flex:0 0 34px;min-height:0;max-height:none;height:40px;font-size:14px}
  .fc-hx .hx-tab.hx-on{height:46px}
  .hx-tn{width:auto;font-size:15px}
  .hx-inav{bottom:-22px;margin-bottom:-22px;padding-bottom:22px}
  .hx-inav .hx-b98{flex:1;min-height:44px}
  .hx-ref dl{grid-template-columns:1fr;gap:1px}
  .hx-ref dd{margin-bottom:8px}
  .hx-grad .hx-dbub{right:40%;top:26%}
  .gr-podium{width:112px;margin-left:-56px}
  .gr-seal{width:44px;height:44px;margin:-22px 0 0 -22px}
  .gr-seal b{font-size:11px}
  .gr-cap{width:64px;margin-left:-32px;height:18px}
  .gr-banner{left:4%;right:20%}
  .gr-f2{display:none}
  .dp-fields{grid-template-columns:1fr}
  .dp-canvas{max-height:none;width:100%}
  .dp-acts button,.dp-acts a{flex:1 1 44%;justify-content:center}
}

/* from graduation on, the whole window is the stage */
.hx-onstage .hx-client{position:relative;padding:0;gap:0}
.hx-onstage .hx-stage{display:block;height:100%}
.hx-onstage .hx-gut,.hx-onstage .hx-tabs,.hx-onstage .hx-ftab,.hx-onstage .hx-flabel{display:none}
.hx-onstage .hx-folder{position:absolute;inset:0;margin:0;background:#1c070c;border:0;border-radius:0;box-shadow:none}
.hx-onstage .hx-folder::before,.hx-onstage .hx-folder::after{display:none}
.hx-onstage .hx-paper,.hx-onstage .hx-paper.hx-rxmode,.hx-onstage .hx-paper.hx-scmode{position:relative;z-index:8;margin:0;padding:0;background:transparent;box-shadow:none;border-radius:0}
.hx-onstage .hx-pg{min-height:100%}
.hx-onstage .hx-paper.hx-scmode .hx-pg,.hx-onstage .hx-scene{height:100%}
.hx-onstage .hx-room{height:100%;border-radius:0}
.fc-hx:not(.hx-onstage) .st-back{display:none}
.st-back{position:absolute;inset:0}
.hx-onstage .hx-scmode~*{display:none}
.hx-onstage .hx-foot{position:absolute;right:12px;bottom:10px;z-index:20;width:auto;max-width:none;margin:0}
.fc-hx.hx-onstage .hx-cap{position:absolute;left:14px;bottom:14px;right:190px;z-index:19;margin:0;color:#f4efe2;text-shadow:0 1px 3px #000}
/* the set */
.gr-val{position:absolute;left:0;right:0;top:0;height:9%;min-height:40px;z-index:6;background:radial-gradient(ellipse 50% 100% at 50% 0,#a22b3e 0 62%,#7c1f2e 97%,transparent 99%) 0 0/16.67% 100% repeat-x;filter:drop-shadow(0 3px 0 #c9a24f) drop-shadow(0 5px 5px rgba(0,0,0,.5))}
.gr-cl{position:absolute;left:0;top:0;bottom:22%;width:17%;min-width:64px;z-index:2;background:repeating-linear-gradient(90deg,#9c2a3c 0 12px,#7c1f2e 12px 24px);box-shadow:4px 0 10px rgba(0,0,0,.45)}
.gr-spot{position:absolute;left:24%;right:24%;top:0;bottom:24%;z-index:2;pointer-events:none;background:linear-gradient(rgba(255,238,185,.34),rgba(255,238,185,.06));clip-path:polygon(44% 0,56% 0,100% 100%,0 100%)}
.hx-onstage .gr-banner{left:26%;right:26%;top:11%;z-index:5}
.hx-onstage .gr-banner b{font-size:clamp(14px,2.5vw,30px)}
.hx-onstage .gr-floor{height:30%;background:repeating-linear-gradient(90deg,rgba(0,0,0,.1) 0 2px,transparent 2px 120px),linear-gradient(#b5834f,#8a5f38 22%,#5f3f24)}
.hx-onstage .gr-flag{bottom:30%;height:46%;width:6%}
.hx-onstage .gr-f1{left:21%}.hx-onstage .gr-f2{left:73%;display:block}
.hx-onstage .hx-grad .hx-door{width:17%;bottom:27%;height:73%}
.hx-onstage .hx-grad .hx-guy{bottom:31%;zoom:1.3}
.hx-onstage .gr-podium{bottom:19%;height:25%;width:230px;margin-left:-115px;z-index:5}
.hx-onstage .gr-seal{width:84px;height:84px;margin:-42px 0 0 -42px}
.hx-onstage .gr-seal b{font-size:21px}
.hx-onstage .gr-crowd{height:25%;z-index:7;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 92'%3E%3Cellipse cx='48' cy='92' rx='44' ry='34' fill='%2310111a'/%3E%3Ccircle cx='48' cy='44' r='24' fill='%2310111a'/%3E%3Cpolygon points='48,6 92,23 48,40 4,23' fill='%2310111a'/%3E%3Crect x='76' y='23' width='3' height='24' fill='%23c9a24f'/%3E%3C/svg%3E") 0 0/96px 92px repeat-x,linear-gradient(transparent 80px,#10111a 80px)}
.hx-onstage .gr-crowd::before{content:"";position:absolute;left:-30px;right:0;top:-34px;height:60px;z-index:-1;opacity:.7;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52'%3E%3Ccircle cx='30' cy='40' r='15' fill='%2323242e'/%3E%3Cpolygon points='30,10 56,20 30,30 4,20' fill='%2323242e'/%3E%3C/svg%3E") 0 100%/60px 52px repeat-x}
.hx-onstage .gr-toss i{--h:-58vh}
.hx-onstage .gr-toss i:nth-child(2n){--h:-48vh}.hx-onstage .gr-toss i:nth-child(3n){--h:-66vh}
.hx-onstage .hx-say{left:62%;right:19%;top:24%;font-size:22px;line-height:1.25;padding:12px 14px}
.hx-onstage .hx-say::after{left:-24px;top:50%;margin:-10px 0 0;border:10px solid transparent;border-right:16px solid #222;border-top-color:transparent}
.hx-onstage .hx-grad .hx-dbub{right:18%;top:26%}
/* the diploma, on stage */
.hx-onstage .dp-wrap{padding:calc(11vh + 86px) 16px 74px;max-width:none}
.hx-onstage .dp-canvas{max-height:max(250px,calc(100vh - 400px));max-width:min(100%,860px);border:6px solid #2b1a0d;box-sizing:border-box;box-shadow:0 14px 40px rgba(0,0,0,.6)}
.fc-hx.hx-onstage .dp-acts a,.fc-hx.hx-onstage .dp-acts button{box-shadow:0 2px 8px rgba(0,0,0,.4)}
.hx-onstage:not(.st-talk) .st-back .gr-podium{opacity:0}
.hx-onstage:not(.st-talk) .st-back .hx-guy{left:12%!important}
/* the fork and the endings: dr. pranav at the podium */
.st-speak{position:relative;margin:calc(11vh + 98px) 0 0 58%;width:min(300px,23vw);min-width:260px;box-sizing:border-box;padding:16px 20px;background:#fff;border:2.5px solid #222;border-radius:18px;font:20px/1.3 var(--serif,Georgia),serif;color:#222;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.st-speak p{margin:0}
.st-speak::after{content:"";position:absolute;left:-26px;top:96px;border:10px solid transparent;border-right:16px solid #222}
.st-yn{display:flex;gap:10px;margin-top:14px}
.fc-hx .st-yn .hx-b98{flex:1;min-height:46px;font-size:18px}
/* the follow-on: a sheet held up in front of the stage */
.st-sheet{position:relative;box-sizing:border-box;width:min(760px,calc(100% - 28px));margin:16px auto 68px;padding:22px 30px 0;background:var(--paper,#fffdf6);border-radius:3px;box-shadow:0 14px 40px rgba(0,0,0,.55)}
.st-nav{position:sticky;bottom:0;margin:14px -8px 0;padding:12px 8px 16px}
.fc-hx .hx-b98.st-stop{color:#fff;text-shadow:0 1px 2px #000}
@media (max-width:700px){
  .hx-onstage .hx-grad .hx-guy{zoom:1}
  .hx-onstage .gr-podium{width:128px;margin-left:-64px;height:16%}
  .hx-onstage .gr-seal{width:48px;height:48px;margin:-24px 0 0 -24px;top:32%}
  .hx-onstage .gr-seal b{font-size:12px}
  .hx-onstage .gr-banner{left:6%;right:6%;top:10%}
  .hx-onstage .gr-f1,.hx-onstage .gr-f2{display:none}
  .gr-cl,.hx-onstage .hx-grad .hx-door{width:12%;min-width:40px}
  .gr-val{background-size:33.34% 100%}
  .hx-onstage .hx-say{left:5%;right:5%;top:20%;font-size:20px}
  .hx-onstage .hx-say::after{left:50%;top:100%;margin:0 0 0 -10px;border:10px solid transparent;border-top:16px solid #222}
  .hx-onstage .hx-grad .hx-dbub{right:14%;top:24%}
  .fc-hx.hx-onstage .hx-cap{right:110px;font-size:11px}
  .hx-onstage .dp-canvas{max-height:none;width:100%}
  .hx-onstage .dp-wrap{padding:calc(10% + 90px) 10px 84px}
  .hx-onstage:not(.st-talk) .st-back .hx-guy{opacity:0}
  .hx-onstage .gr-crowd{background-size:70px 67px,auto;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 92'%3E%3Cellipse cx='48' cy='92' rx='44' ry='34' fill='%2310111a'/%3E%3Ccircle cx='48' cy='44' r='24' fill='%2310111a'/%3E%3Cpolygon points='48,6 92,23 48,40 4,23' fill='%2310111a'/%3E%3C/svg%3E"),linear-gradient(transparent 58px,#10111a 58px)}
  .st-speak{margin:146px auto 0;width:calc(100% - 28px);min-width:0;font-size:20px;padding:14px 16px}
  .st-speak::after{left:50%;top:100%;margin-left:-10px;border:10px solid transparent;border-top:16px solid #222}
  .st-sheet{padding:18px 16px 0;margin-top:10px}
  .fc-hx .hx-q{font-size:26px}
}

/* the picture after Download, for phones that ignore the download */
.dp-saved{position:absolute;inset:0;z-index:40;overflow:auto;background:#fff;color:#222;padding:12px;font:16px/1.4 -apple-system,system-ui,sans-serif}
.dp-saved img{display:block;width:100%;max-width:860px;height:auto;margin:10px auto}

/* nov 5: the exam happens on the stage */
.fc-hx.dx-exam .hx-client{position:relative;background:repeating-linear-gradient(90deg,#9c2a3c 0 14px,#7c1f2e 14px 28px)}
.dx-set{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.dx-set .gr-crowd{height:17%}
.hx-stage,.hx-foot{position:relative;z-index:1}
.hx-onstage .dx-set{display:none}
.hx-part[hidden],.dx-pnav[hidden],.dx-skip[hidden]{display:none}
/* the little tv */
.dx-tv{position:absolute;right:16px;bottom:12px;z-index:25;width:176px}
.dx-ant{position:relative;height:26px}
.dx-ant::before,.dx-ant::after{content:"";position:absolute;left:50%;bottom:0;width:2px;height:30px;background:#2a2a2a;transform-origin:50% 100%}
.dx-ant::before{transform:rotate(-28deg)}.dx-ant::after{transform:rotate(24deg)}
.dx-box{padding:8px 8px 4px;background:linear-gradient(#7b5230,#5a3a20);border:2px solid #2f1e10;border-radius:10px;box-shadow:0 5px 14px rgba(0,0,0,.5)}
.dx-tube{position:relative;display:block;width:100%;aspect-ratio:4/3;padding:0;border:3px solid #1b1208;border-radius:14px/18px;overflow:hidden;background:#111;cursor:pointer}
.dx-tube video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.dx-static{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#555 0 2px,#999 2px 3px,#333 3px 5px,#bbb 5px 6px);background-size:100% 12px;animation:dx-snow .22s steps(4) infinite}
.dx-static[hidden]{display:none}
@keyframes dx-snow{to{background-position:0 12px}}
.dx-tvfoot{display:flex;align-items:center;justify-content:space-between;gap:4px;padding-top:4px;font:11px/1.2 "IBM Plex Mono",monospace;color:#f4efe2}
.dx-snd{font:11px/1.2 "IBM Plex Mono",monospace;padding:3px 5px;min-height:22px;border:1px solid #2f1e10;border-radius:4px;background:#e9c978;color:#2a1a0a;cursor:pointer}
.hx-onstage .dx-tv{left:2%;right:auto;bottom:27%;width:15%;min-width:120px;max-width:176px}
.hx-onstage .hx-client:has(.hx-rxmode) .dx-tv{left:auto;right:2%}
/* the tv wheels itself on */
.dx-tv{transition:transform 1.8s cubic-bezier(.3,.8,.4,1)}
.dx-tv.dx-off{transform:translateX(-120vw);transition:none}
.dx-tv.dx-rolling .dx-box{animation:dx-rattle .18s steps(2) infinite}
.dx-tv.dx-rolling .dx-cart i{animation:dx-spin .45s linear infinite}
@keyframes dx-rattle{50%{transform:translateY(-2px) rotate(-.6deg)}}
@keyframes dx-spin{to{transform:rotate(360deg)}}
.dx-cart{display:none;position:relative;height:40px;margin:0 16px;border-left:4px solid #2a2a2a;border-right:4px solid #2a2a2a}
.dx-cart i{position:absolute;bottom:0;width:18px;height:18px;border-radius:50%;background:conic-gradient(#222 0 25%,#777 0 50%,#222 0 75%,#777 0);border:2px solid #111;box-sizing:border-box}
.dx-cart i:first-child{left:-11px}.dx-cart i:last-child{right:-11px}
.hx-onstage .dx-cart{display:block}
/* walking up on stage */
.dx-open .hx-bub{max-width:460px}
.dx-open{position:absolute;inset:0;z-index:22}
.dx-you{--dx-youx:33%}
.dx-head{width:62px;height:62px;border-radius:50%;background:#10111a;border:2px solid #333;box-sizing:border-box}
.dx-head{overflow:hidden}
.dx-head img{display:block;width:100%;height:100%;object-fit:cover}
.dx-you{filter:drop-shadow(0 0 7px rgba(255,238,185,.75))}
.dx-tag{position:absolute;left:50%;bottom:100%;margin:0 0 16px;transform:translateX(-50%);padding:1px 8px;background:#ffe45c;color:#222;border:2px solid #222;border-radius:10px;font:13px/1.3 "IBM Plex Mono",monospace}
.dx-skip{position:absolute;right:12px;bottom:10px;z-index:21}
.fc-hx .dx-pick{position:absolute;left:50%;bottom:8%;z-index:21;transform:translateX(-50%);min-height:64px;padding:0 30px;font-size:24px;white-space:nowrap;background:#ffe45c;box-shadow:0 8px 26px rgba(0,0,0,.6);animation:dx-pulse 1.5s ease-in-out infinite}
@keyframes dx-pulse{50%{transform:translateX(-50%) scale(1.05)}}
.fc-hx .hx-b98.dx-psst,.fc-hx #hxon{background:#ffe45c;color:#222}
/* the sneaky bonus exam */
.dx-stamp{position:absolute;right:18px;top:14px;padding:3px 10px;border:3px solid #c8202a;border-radius:4px;color:#c8202a;font:600 17px/1.2 "IBM Plex Mono",monospace;letter-spacing:.14em;transform:rotate(7deg);opacity:.85;pointer-events:none}
/* the testimonial prompts, one at a time */
.dx-pnav{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:6px 0 4px;font:14px/1.3 "IBM Plex Mono",monospace;color:#6a6456}
.fc-hx .dx-pnav .hx-b98{min-height:40px}
.dx-pnav .hx-b98[disabled]{opacity:.45;cursor:default}
@media (max-width:1000px){
  .dx-tv,.hx-onstage .dx-tv,.hx-onstage .hx-client:has(.hx-rxmode) .dx-tv{left:auto;right:8px;bottom:4px;width:88px;min-width:0;max-width:none}
  .dx-ant{display:none}
  .dx-open .hx-bub{max-width:230px}
  .dx-rip{top:60px}
  .dx-half{height:56px;width:24px}
  .dx-l{left:-24px}
  .hx-onstage .dx-cart{height:14px;margin:0 10px;border-width:3px}
  .dx-cart i{width:12px;height:12px}
  .dx-cart i:first-child{left:-8px}.dx-cart i:last-child{right:-8px}
  .dx-box{padding:3px;border-radius:6px}
  .dx-tube{border-width:2px;border-radius:7px}
  .dx-tvfoot{display:none}
  .hx-onstage .dx-tv,.hx-onstage .hx-client:has(.hx-rxmode) .dx-tv{right:auto;left:8px;bottom:60px}
  .hx-client:has(.st-sheet) .dx-tv{display:none}
  .dx-you{--dx-youx:16%}
  .dx-head{width:50px;height:50px}
  .fc-hx .dx-pick{bottom:138px;min-height:56px;padding:0 20px;font-size:20px}
  .dx-stamp{top:10px;right:10px;font-size:13px;padding:2px 6px}
  .st-sheet .hx-eye{padding-right:76px}
  .fc-hx .hx-foot #hxon{font-size:14px;padding:0 8px;white-space:nowrap}
  .fc-hx .hx-foot #hxagain{font-size:13px;padding:0 6px;line-height:1.1}
}

/* the tv, off */
.dx-isoff .dx-tube video{opacity:0}
.dx-isoff .dx-static{display:none}
.dx-isoff .dx-tube::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#fff;animation:dx-crt .55s ease-out forwards}
@keyframes dx-crt{0%{transform:scale(1,40);opacity:1}55%{transform:scale(1,1);opacity:1}100%{transform:scale(0,1);opacity:0}}
/* alex rips the answers */
.dx-rip{position:absolute;left:50%;top:84px;width:0;height:0;z-index:9;pointer-events:none}
.dx-half{position:absolute;top:0;width:32px;height:80px;background:repeating-linear-gradient(#fffdf6 0 9px,#c9d3e6 9px 10px);box-shadow:0 2px 6px rgba(0,0,0,.4)}
.dx-l{left:-32px;clip-path:polygon(0 0,100% 0,88% 22%,100% 44%,84% 66%,100% 84%,92% 100%,0 100%);animation:dx-tearl 1.1s ease-in .45s forwards}
.dx-r{left:0;clip-path:polygon(0 0,100% 0,100% 100%,8% 100%,0 84%,16% 66%,0 44%,12% 22%);animation:dx-tearr 1.1s ease-in .45s forwards}
@keyframes dx-tearl{to{transform:translate(-46px,190px) rotate(-70deg);opacity:0}}
@keyframes dx-tearr{to{transform:translate(46px,190px) rotate(70deg);opacity:0}}
.dx-rip b{position:absolute;left:-5px;top:30px;width:10px;height:13px;background:#fffdf6;opacity:0;animation:dx-scrap 1.5s ease-in calc(.5s + var(--d)) forwards}
@keyframes dx-scrap{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(var(--x),230px) rotate(var(--r))}}
/* the advanced exam */
.dx-advanced .st-back{filter:brightness(.32) saturate(.7);transition:filter .7s}
.fc-hx .st-sheet.dx-adv{--paper:#0f1a33;color:#e8eefc;background:linear-gradient(rgba(127,178,255,.09) 1px,transparent 1px) 0 0/100% 24px,linear-gradient(90deg,rgba(127,178,255,.09) 1px,transparent 1px) 0 0/24px 100%,#0f1a33;box-shadow:0 0 0 2px #7fb2ff,0 14px 50px rgba(0,0,0,.8)}
.dx-adv .hx-q,.dx-adv .hx-txt,.dx-adv .hx-plabel,.dx-adv .hx-hint,.dx-adv .hx-ends,.dx-adv .hx-cell{color:#e8eefc}
.dx-adv .hx-eye{color:#a9c6f5}
.dx-adv .hx-box,.dx-adv .hx-dot,.dx-adv .hx-cell{border-color:#a9c6f5;background:transparent}
.dx-adv .hx-opt.hx-on{background:rgba(127,178,255,.2)}
.dx-adv .hx-dot::after{background:#ffe45c}
.dx-adv .dx-stamp{color:#ffe45c;border-color:#ffe45c;opacity:1}
.dx-form{margin:0 0 8px;font:12px/1.3 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#7fb2ff}
.fc-hx .st-sheet.dx-adv .st-nav{background:linear-gradient(rgba(15,26,51,0),#0f1a33 22%)}
.fc-hx.dx-advanced .hx-b98.st-stop{color:#fff}
.dx-adv .hx-words{color:#23211d}

/* the way in is huge */
.hx-onstage .hx-foot:has(#hxon){left:12px;right:12px;justify-content:center;gap:12px}
.fc-hx .hx-foot #hxon{min-height:74px;padding:0 34px;font-size:clamp(22px,2.6vw,32px);font-weight:700;white-space:nowrap;box-shadow:0 8px 28px rgba(0,0,0,.65);animation:dx-bigpulse 1.5s ease-in-out infinite}
@keyframes dx-bigpulse{50%{transform:scale(1.04)}}
@keyframes dx-bigpulse-wide{50%{transform:scale(1.012)}}
.hx-onstage .hx-foot:has(#hxon) #hxagain{position:absolute;left:0;bottom:0}
.hx-onstage .hx-paper.hx-rxmode .dp-wrap{padding-bottom:104px}
/* room for the diploma's own buttons above the way in, at every window height: overlap_test.py */
.hx-onstage .hx-rxmode .dp-canvas{max-height:max(210px,calc(100vh - 470px))}
.dx-body{font:20px/1.45 var(--serif,Georgia),serif;margin:0 0 18px;color:#e8eefc}
.dx-adv .hx-ref dt{color:#6a6456}
@media (max-width:1000px){
  .fc-hx .hx-foot #hxon{min-height:62px;width:100%;padding:0 10px;font-size:21px;justify-content:center}
  .hx-onstage .hx-foot:has(#hxon){flex-wrap:wrap}
  .hx-onstage .hx-foot:has(#hxon) #hxagain{position:static;order:2;min-height:34px}
  .hx-onstage .hx-paper.hx-rxmode .dp-wrap{padding-bottom:128px}
  .hx-onstage .hx-rxmode .dp-canvas{max-height:max(150px,calc(100vh - 445px))}
  .fc-hx .hx-foot #hxon{animation-name:dx-bigpulse-wide}
  .hx-onstage .hx-client:has(.hx-rxmode) .dx-tv{display:none}
  .dx-adv .dx-form{padding-right:112px}
}


html:root .hx-room.hx-grad,html:root .fc-hx.dx-exam .hx-client{background:#1a0a08 url("stage-ceremony/back.webp") center bottom 6vh/cover no-repeat;box-shadow:none}
html:root .gr-floor,html:root .hx-onstage .gr-floor{background:none;border:0}
html:root .gr-spot{display:none}
html:root .gr-val{height:27%;min-height:96px;z-index:3;filter:none;background:url("stage-ceremony/valance.webp") center top/max(100%,760px) auto no-repeat}
html:root .gr-cl{bottom:21%;width:17%;min-width:64px;background:url("stage-ceremony/curtain.webp") left top/auto 100% no-repeat;box-shadow:none;transform:scaleX(-1)}
html:root .hx-grad .hx-dp{background:url("stage-ceremony/curtain.webp") left top/auto 100% no-repeat;box-shadow:none}
html:root .gr-shoes,html:root .hx-grad .gr-shoes{width:72px;height:25px;background:url("stage-ceremony/shoes.webp") center/contain no-repeat;filter:drop-shadow(0 2px 2px rgba(0,0,0,.55))}
html:root .gr-banner,html:root .hx-onstage .gr-banner{z-index:5;background:url("stage-ceremony/banner.webp") center/100% 100% no-repeat;border:0;box-shadow:none;padding:24px 46px 25px}
html:root .gr-flag,html:root .gr-f2{clip-path:none;border:0;background:url("stage-ceremony/flag1.webp") center top/100% 100% no-repeat}
html:root .gr-f2{background-image:url("stage-ceremony/flag2.webp")}
html:root .gr-seal b,html:root .hx-onstage .gr-seal b{color:#2a1a05;font-weight:600}
html:root .gr-podium,html:root .hx-onstage .gr-podium{clip-path:none;border:0;border-radius:0;background:url("stage-ceremony/podium.webp") center bottom/100% 100% no-repeat}
html:root .gr-seal,html:root .hx-onstage .gr-seal{background:url("stage-ceremony/seal.webp") center/contain no-repeat;border:0;border-radius:0}
html:root .gr-crowd,html:root .hx-onstage .gr-crowd{height:27%;z-index:7;background:linear-gradient(transparent 58%,rgba(8,4,6,.78) 92%) 0 0/100% 100% no-repeat,url("stage-ceremony/crowd.webp") 0 100%/auto 100% repeat-x}
html:root .dx-set .gr-crowd{height:18%}
html:root .hx-onstage .gr-crowd::before{display:none}
html:root .gr-crowd i{filter:drop-shadow(0 0 1px rgba(255,240,210,.8))}
html:root .hx-grad .hx-coat{background:url("stage-ceremony/robe.webp") center top/100% 100% no-repeat;border:0;border-radius:0}
html:root .hx-grad .hx-coat::before{display:none}
html:root .hx-grad .hx-tee{background:url("stage-ceremony/tee.webp") center top/100% 100% no-repeat;border:0;border-radius:0}
html:root .hx-coat::after{top:94%;background:linear-gradient(90deg,#15121c 0 13px,transparent 13px 27px,#15121c 27px)}
html:root .dx-box{background:url("stage-ceremony/tv.webp") center/100% 100% no-repeat;border:0;box-shadow:none;padding:18px 20px 12px}
html:root .dx-tube{border-radius:34px/38px}
@media (max-width:1000px){
  html:root .dx-box{padding:7px 8px}
  html:root .dx-tube{border-radius:10px}
}
@media (max-width:700px){
  html:root .gr-cl,html:root .hx-onstage .hx-grad .hx-door{width:14%;min-width:46px}
  html:root .gr-val{height:17%;min-height:84px}
  html:root .gr-crowd,html:root .hx-onstage .gr-crowd{height:22%}
  html:root .gr-banner,html:root .hx-onstage .gr-banner{padding:17px 22px 17px}
  html:root .hx-onstage .gr-f1,html:root .hx-onstage .gr-f2{display:none}
  html:root .gr-shoes,html:root .hx-grad .gr-shoes{left:0;width:44px;height:16px}
}


html:root .hx-onstage .dp-canvas{border:24px solid transparent;border-image:url("stage-ceremony/frame.webp") 82 stretch;border-radius:0;box-shadow:none;filter:drop-shadow(0 14px 22px rgba(0,0,0,.55))}
@media (max-width:700px){ html:root .hx-onstage .dp-canvas{border-width:11px} }

/* Small fixes on top of the Blender stage: the diploma's frame clears the banner. overlap_test.py checks it. */
html:root .hx-onstage .hx-rxmode .dp-wrap{padding-top:calc(11vh + 104px)}
/* the curtain voice's bubble hangs below the curtain trim */
html:root .hx-onstage .hx-dbub{top:calc(37% - 10px)}
/* dr. pranav's bubble sits in front of the banner on short windows, and he stays behind the podium. bubble_test.py checks it. */
html:root .hx-onstage .hx-grad .hx-pr{z-index:6}
html:root .hx-onstage .hx-grad .gr-podium{z-index:7}
/* the you tag fades once they've walked up, before he talks */
.dx-tag{transition:opacity .25s}
.dx-arrived .dx-tag{opacity:0}
@media (max-width:1000px){
  /* the curtain voice's long line stays below the banner */
  html:root .hx-onstage .hx-dbub{width:190px;font-size:16px;top:calc(26% + 26px)}
  html:root .hx-onstage .hx-rxmode .dp-wrap{padding-top:calc(10% + 116px)}
  html:root .hx-onstage .hx-rxmode .dp-canvas{max-height:max(130px,calc(100vh - 490px))}
}
@media (min-width:700px) and (max-width:1000px){ html:root .hx-onstage .hx-dbub{top:calc(26% + 66px)} }
/* at the tv on a phone he stands near the left edge, so his bubble is narrower and stays on screen */
@media (max-width:699px){ html:root .hx-onstage .hx-scene:not(.dx-open) .hx-bub{max-width:150px} }