:root{--paper:#faf9f6;--ink:#263d4e;--soft:#60707b;--line:#d9d8d0;--gold:#a58c52}
*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;color:var(--ink);background:var(--paper);font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif}
a,button{-webkit-tap-highlight-color:transparent}
.hell-realm{min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto}
.hell-header{width:100%;max-width:1600px;justify-self:center;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 3vw 18px}
.hell-wordmark{display:inline-flex;align-items:baseline;gap:14px;text-decoration:none;color:var(--ink);white-space:nowrap}
.hell-wordmark strong{font-family:"Noto Serif TC","Songti TC",serif;font-size:30px;font-weight:400;letter-spacing:.12em}
.hell-wordmark small{font-family:Georgia,serif;font-size:9px;letter-spacing:.2em;color:var(--soft)}
.hell-return{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);font-size:11px;letter-spacing:.08em;text-decoration:none;border-bottom:1px solid var(--line);white-space:nowrap}
.hell-main{display:grid;place-items:center;align-content:center;padding:0 24px 12px;min-width:0}
/* the painting is 2200 x 1420; every level video sits on it at its own box, cut to its silhouette */
.hell-stage{position:relative;width:100%;max-width:min(1600px,calc((100svh - 166px)*2200/1420));aspect-ratio:2200/1420;overflow:hidden}
.hell-world{position:absolute;inset:0;transform-origin:0 0;transition:transform .6s cubic-bezier(.3,.7,.3,1)}
.hell-still{display:block;width:100%;height:100%;object-fit:contain;background:var(--paper);user-select:none;-webkit-user-drag:none;pointer-events:none}
.hell-stage.is-over{cursor:pointer}
.hell-level{position:absolute;display:block;object-fit:fill;background:var(--paper);opacity:0;pointer-events:none;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:opacity .45s ease}
.hell-level.is-on{opacity:1}
/* spotlight: a paper veil fades the rest of the painting back while one level plays; the veil has a
   soft hole the shape of that island (its spot mask), so the playing island keeps its full colour */
.hell-veil{position:absolute;inset:0;background:var(--paper);opacity:0;pointer-events:none;transition:opacity .45s ease;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-composite:xor;mask-composite:exclude}
.hell-veil.is-on{opacity:.58}
/* keyboard / screen reader list of the levels (visually hidden until focused) */
.hell-levels{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hell-levels:focus-within{position:static;width:auto;height:auto;clip:auto;white-space:normal;display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;max-width:1100px;margin-top:12px}
.hell-levels button{border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:inherit;font-size:11px;letter-spacing:.06em;padding:6px 0;cursor:pointer}
.hell-message{font-size:12px;color:var(--soft);text-align:center}
.hell-footer{width:100%;max-width:1600px;justify-self:center;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 3vw 28px}
.hell-caption{margin:0;font-family:"Noto Serif TC","Songti TC",serif;font-size:17px;letter-spacing:.15em;font-weight:400}
.hell-caption span{margin-left:12px;font-family:Georgia,serif;font-size:9px;letter-spacing:.18em;color:var(--soft)}
.hell-now{margin:0;min-height:22px;font-family:"Noto Serif TC","Songti TC",serif;font-size:15px;letter-spacing:.14em;text-align:right}
.hell-hint{font-family:"Noto Sans TC","PingFang TC",sans-serif;font-size:11px;letter-spacing:.08em;color:var(--soft)}
.hell-realm:not(.is-touch) [data-hint-touch],.hell-realm.is-touch [data-hint-hover]{display:none}
[hidden]{display:none!important}
.hell-return:hover,.hell-levels button:hover{color:var(--gold);border-color:var(--gold)}
a:focus-visible,button:focus-visible{outline:1px solid var(--gold);outline-offset:5px}
@media(max-width:560px){
  .hell-header{padding:20px 20px 14px;gap:12px}
  .hell-wordmark{gap:8px}
  .hell-wordmark strong{font-size:26px}
  .hell-wordmark small{font-size:7px;letter-spacing:.1em}
  .hell-return{font-size:10px;gap:6px;letter-spacing:0}
  .hell-main{padding:0 10px 12px}
  .hell-footer{padding:16px 20px 24px;gap:10px}
  .hell-caption{font-size:15px}
  .hell-caption span{font-size:8px;margin-left:7px}
  .hell-now{font-size:13px;letter-spacing:.08em}
}
@media(max-height:420px) and (orientation:landscape){
  .hell-header{padding-block:6px}
  .hell-footer{padding-block:6px}
  .hell-stage{max-width:calc((100svh - 112px)*2200/1420)}
}
@media(prefers-reduced-motion:reduce){.hell-level,.hell-world{transition:none}}