:root { font-family: -apple-system, "SF Pro Text", "PingFang SC", "Noto Sans SC", sans-serif; color: #121719; background: #eee9de; }
    * { box-sizing: border-box; }
    body { margin: 0; min-width: 320px; }
    a { font: inherit; }
    .page { min-height: 100svh; position: relative; overflow: hidden; background: #eee9de; isolation: isolate; }
    .paper-grain { position: absolute; inset: 0; z-index: -2; opacity: .5; background: radial-gradient(#4a423a1b .6px, transparent .8px) 0 0 / 5px 5px; }
    .page::before { content: ""; position: absolute; z-index: -1; left: -10vw; top: -30vh; width: 75vw; height: 135vh; border-radius: 50%; background: radial-gradient(ellipse, #fffdf8 0, #f7f3ea 52%, transparent 72%); }
    .stage { display: grid; grid-template-columns: minmax(550px, 54%) 1fr; min-height: 100svh; position: relative; }
    .inside { position: relative; z-index: 7; padding: clamp(50px, 9vh, 120px) 4vw 120px 8vw; }
    .chapter { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; color: #d7332e; font-size: 11px; letter-spacing: .18em; font-weight: 900; }
    .chapter::before { content: ""; width: 28px; height: 2px; background: currentColor; }
    h1 { margin: 0 0 52px; font-size: clamp(42px, 4.7vw, 78px); line-height: 1.2; letter-spacing: -.075em; font-weight: 900; }
    h1 span, h1 em { display: block; }
    h1 em { font-style: normal; color: #e43630; }
    .section-head { display: flex; justify-content: space-between; align-items: end; gap: 15px; border-bottom: 2px solid #181a1b; max-width: 720px; padding-bottom: 9px; }
    .section-head strong { font-size: 13px; letter-spacing: .09em; }
    .section-head small { font-size: 10px; color: #77746d; letter-spacing: .09em; }
    .entries { max-width: 720px; }
    .entry { width: 100%; border-bottom: 1px solid #b7b2a8; background: transparent; color: #1b1b1b; text-decoration: none; display: grid; grid-template-columns: 38px minmax(0,1fr) 100px 24px; gap: 10px; align-items: baseline; padding: 16px 3px 13px; text-align: left; transition: background .25s, padding .25s; }
    .entry:hover, .entry:focus-visible { background: #fffaf0; padding-left: 12px; padding-right: 10px; }
    .entry:focus-visible { outline: 2px solid #e53631; outline-offset: 2px; }
    .entry .index { color: #d73530; font-size: 10px; font-weight: 900; }
    .entry .name { font-size: clamp(21px, 2.4vw, 37px); line-height: 1.12; font-weight: 800; letter-spacing: -.065em; }
    .entry .detail { color: #747068; font-size: 11px; white-space: nowrap; }
    .entry .arrow { font-size: 20px; color: #d73530; text-align: right; line-height: 1; }
    .outside { position: relative; min-height: 760px; }
    .void { position: absolute; inset: 0 -1px 0 -5.5vw; background: radial-gradient(ellipse at 54% 42%, #19212b 0, #070a0e 48%, #020305 76%); clip-path: polygon(18% 0,100% 0,100% 100%,2% 100%); }
    .void::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(#4aaed0 1px, transparent 1.7px); background-size: 87px 93px; transform: rotate(13deg) scale(1.2); }
    .jamb { position: absolute; z-index: 3; top: 0; bottom: 0; left: -3vw; width: 7vw; background: linear-gradient(90deg, #f4f0e6 0, #d5cabe 52%, #a69385 73%, #1d1c1b 100%); clip-path: polygon(65% 0, 100% 0, 28% 100%, 0 100%); box-shadow: 25px 0 45px #0007; }
    .jamb-line { position: absolute; z-index: 4; top: 0; bottom: 0; left: 2.3vw; width: 4px; transform: rotate(4deg); transform-origin: top; background: linear-gradient(#e93932, #bf241f 60%, transparent 95%); opacity: .92; }
    .lintel { position: absolute; z-index: 4; top: 0; left: -2vw; right: 0; height: 26px; background: linear-gradient(#fffaf0 0, #c8bdb1 70%, #302b2a 100%); clip-path: polygon(2% 0, 100% 0,100% 100%,0 100%); }
    .floor { position: absolute; z-index: 2; left: -26vw; right: -2vw; bottom: -1px; height: 29%; background: linear-gradient(130deg, #f8f5ed 0, #eee9de 59%, #88857e 75%, #131416 100%); clip-path: polygon(0 100%, 100% 100%, 48% 0, 27% 0); pointer-events: none; }
    .floor-line { position: absolute; z-index: 3; left: -24vw; right: -2vw; bottom: 17%; height: 2px; background: #dc332e; transform: rotate(-15deg); opacity: .6; pointer-events: none; }
    .mascot { position: absolute; z-index: 5; width: min(53vw, 760px); max-width: none; height: auto; top: 11%; left: -28%; filter: hue-rotate(180deg) drop-shadow(1px 0 1px #fff8) drop-shadow(0 6px 8px #0005); pointer-events: none; }
    .particle { position: absolute; z-index: 4; border-radius: 50%; background: #4aaed0; box-shadow: 0 0 22px #4aaed055; opacity: .78; animation: drift 20s ease-in-out infinite alternate; }
    .p1 { width: 17px; height: 17px; top: 20%; right: 19%; }.p2 { width: 8px; height: 8px; top: 39%; right: 8%; animation-delay: -3s; }.p3 { width: 42px; height: 42px; top: 64%; right: 23%; animation-delay: -8s; }.p4 { width: 11px; height: 11px; bottom: 16%; right: 5%; animation-delay: -13s; }.p5 { width: 5px; height: 5px; top: 11%; right: 42%; animation-delay: -2s; }
    .p6 { width: 10px; height: 10px; top: 29%; right: 35%; animation-delay: -11s; }.p7 { width: 6px; height: 6px; top: 22%; right: 47%; animation-delay: -6s; }.p8 { width: 13px; height: 13px; top: 48%; right: 11%; animation-delay: -16s; }.p9 { width: 5px; height: 5px; top: 56%; right: 41%; animation-delay: -4s; }.p10 { width: 18px; height: 18px; top: 72%; right: 32%; animation-delay: -9s; }.p11 { width: 8px; height: 8px; top: 82%; right: 15%; animation-delay: -15s; }.p12 { width: 12px; height: 12px; top: 70%; right: 6%; animation-delay: -5s; }.p13 { width: 5px; height: 5px; top: 64%; right: 53%; animation-delay: -12s; }.p14 { width: 9px; height: 9px; top: 36%; right: 47%; animation-delay: -7s; }.p15 { width: 7px; height: 7px; top: 9%; right: 28%; animation-delay: -17s; }.p16 { width: 14px; height: 14px; top: 8%; right: 59%; animation-delay: -10s; }
    .signal { position: absolute; z-index: 6; width: 9px; height: 9px; border-radius: 50%; background: #ff5149; box-shadow: 0 0 0 3px #ff514926, 0 0 17px 4px #f33b35aa; animation: dart 3.2s linear infinite; }
    .signal::after { content: ""; position: absolute; left: 8px; top: 4px; width: 24px; height: 2px; background: linear-gradient(90deg, #ff6b62b0, transparent); transform: rotate(20deg); transform-origin: left center; }
    .s1 { left: 85%; top: 23%; animation-delay: -.3s; }.s2 { left: 90%; top: 47%; animation-duration: 2.7s; animation-delay: -1.4s; }.s3 { left: 35%; top: 62%; animation-duration: 3.7s; animation-delay: -2.5s; }
    .outside-label { position: absolute; z-index: 6; right: 3.5vw; top: 95px; color: #b3b8bc; font-size: 10px; letter-spacing: .19em; writing-mode: vertical-rl; }
    .mascot-caption { position: absolute; z-index: 6; right: 5vw; bottom: 8%; color: #f2eee5; font-size: clamp(15px, 1.2vw, 19px); font-weight: 750; line-height: 1.55; letter-spacing: .04em; text-align: right; text-shadow: 0 2px 8px #000; }
    @keyframes drift { to { transform: translate(-6px, 5px); } }
    @keyframes dart { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 8% { opacity: 1; } 25% { transform: translate(-19px, 7px) scale(1.2); } 50% { transform: translate(-47px, -16px) scale(.8); } 72% { transform: translate(-62px, -6px) scale(1.2); } 90% { opacity: 1; } 100% { transform: translate(-90px, -35px) scale(.4); opacity: 0; } }
    @media (max-width: 1100px) {
      .stage { grid-template-columns: minmax(470px, 56%) 1fr; }.inside { padding-left: 5vw; padding-right: 2vw; }.mascot { width: 61vw; left: -20%; top: 18%; }
    }
    @media (max-width: 800px) {
      .stage { display: block; }.inside { padding: 48px 24px 55px; }.chapter { margin-bottom: 13px; }h1 { font-size: clamp(42px, 7vw, 66px); margin-bottom: 38px; }.outside { min-height: 540px; }.void { inset: 0; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }.jamb { top: -2px; bottom: auto; left: 0; right: 0; width: auto; height: 34px; clip-path: none; background: linear-gradient(#f8f5ed,#afa89d 70%,#181b1e); }.jamb-line { top: 20px; left: 0; right: 0; width: auto; height: 3px; transform: none; }.lintel { display: none; }.floor { left: -15%; right: -15%; height: 27%; }.floor-line { display: none; }.mascot { width: min(100vw, 650px); left: -5%; top: 7%; }.outside-label { top: 70px; }.mascot-caption { bottom: 31%; font-size: 14px; }
    }
    @media (max-width: 520px) {
      .inside { padding: 40px 18px 45px; }h1 { font-size: clamp(38px, 9.6vw, 50px); margin-bottom: 34px; }.section-head small { display: none; }.entry { grid-template-columns: 24px 1fr 19px; padding: 13px 3px 11px; }.entry .name { font-size: 24px; }.entry .detail { display: none; }.outside { min-height: 460px; }.mascot { width: 110vw; top: 8%; left: -11%; }.p3 { width: 24px; height: 24px; }
    }
    @media (prefers-reduced-motion: reduce) { .particle, .signal { animation: none; } .entry { transition: none; } }