/* Halloween collection: candlelight gold, velvet red and midnight violet. */
:root { --gold:#bb903f; --gold-bright:#f0cd7f; --gold-light:#ffe9b5; --gold-pale:#ead9b3; --paper:#fff9ec; --paper-deep:#f4e8d0; --red:#791832; --red-deep:#450e26; --serif:"Hiragino Mincho ProN","Yu Mincho",serif; }
body { background:radial-gradient(ellipse at 15% 10%,#41205180,transparent 48%),radial-gradient(ellipse at 90% 45%,#741c2440,transparent 48%),#100c19; }
body::before { content:""; position:fixed; pointer-events:none; inset:0; background-image:radial-gradient(circle,#e4bc6660 1px,transparent 1.5px),radial-gradient(circle,#e4bc6630 .7px,transparent 1.5px); background-size:113px 137px,71px 97px; background-position:19px 32px,47px 61px; z-index:-1; }
.edition-bar { display:flex; justify-content:space-between; gap:12px; padding:13px 22px; background:#160d20; color:#e9c67d; font-size:10px; font-weight:700; letter-spacing:.17em; border-bottom:1px solid #ba8e4055; }
.edition-bar span:first-child { letter-spacing:.24em; }
.library-page .shell { width:min(100%,1040px); background:linear-gradient(135deg,#281023,#170d20); }
.library-page .hero { position:relative; border-bottom:1px solid #ba8e40; }
.library-page .hero img { width:100%; aspect-ratio:1672/941; object-fit:contain; }
.library-page .toolbar { margin:0; padding:16px 28px; background:#180e20f5; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px 20px; align-items:center; }
.library-page .toolbar-title { margin:0; font-size:.9rem; }
.library-page .picker { background:linear-gradient(180deg,#422042,#29142c); font-size:.88rem; }
.library-page .progress-row { grid-column:2; margin:0; }
.library-page .logout-btn { grid-column:3; grid-row:1 / 3; margin:0; padding:12px 0; }
.library-page main { margin:28px; padding:34px; border-radius:3px; background:linear-gradient(120deg,#fffbee,#f7edd9); }
.library-page .eyebrow { color:#8b6225; font-size:.68rem; letter-spacing:.19em; }
.library-page h1 { color:#4e1731; font-size:2rem; }
.library-page h1 br { display:none; }
.library-page .lead { max-width:620px; margin:0 auto; text-align:center; font-size:.9rem; line-height:1.9; }
.library-page .notice { margin:24px 0; padding:16px 20px; border-left-color:#6f2d67; font-size:.82rem; line-height:1.9; }
.library-page .box { border-radius:4px; }
.library-page .box-head,.library-page .list-heading { background:linear-gradient(110deg,#67122d,#351332); }
.library-page .box-title { color:#681b44; font-family:var(--serif); font-size:1.65rem; }
.library-page .video-frame { width:min(100%,340px); background:#170e22; }
.library-page .nav-btn { background:linear-gradient(135deg,#702145,#421739); font-size:.9rem; border-radius:4px; }
.library-page .list-heading { margin-top:30px; border-radius:3px; }
.library-page .list-heading h2 { font-size:1.1rem; }
.library-page .list-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.library-page .list-btn { min-height:98px; border-radius:3px; padding-top:25px; }
.library-page .list-btn b { color:#651d46; font-family:Georgia,serif; font-size:1.3rem; }
.library-page .list-btn.playing { outline-color:#773b7a; background:#f4e9f0; }
.library-page .list-btn.watched { background:#f2e8d4; }
.library-page .box { scroll-margin-top:130px; }
.library-page footer { margin-top:26px; font-size:.82rem; }
.library-page .closing-note { border-radius:3px; }
.library-page .closing-note p { font-size:.82rem; }
.login-page { min-height:100svh; padding:40px 20px; color:#352439; }
.login-page main { width:min(100%,1000px); display:grid; grid-template-columns:1.12fr 1fr; border:1px solid #bc904b; border-radius:5px; background:#fff9ed; box-shadow:0 25px 100px #0008,0 0 45px #a85e2220; }
.login-page .banner { padding:0; text-align:left; color:#f7dfaa; background:radial-gradient(ellipse at 10% 100%,#64224666,transparent 65%),#211128; border-bottom:0; border-right:1px solid #bb903f88; display:flex; flex-direction:column; }
.login-page .edition-bar { padding:16px 20px; font-size:9px; }
.login-art { width:100%; height:auto; display:block; aspect-ratio:1672/941; object-fit:contain; }
.login-heading { padding:32px 28px 38px; margin:auto 0; text-align:center; }
.login-page .banner small { color:#d6ad64; font-size:9px; letter-spacing:.18em; }
.login-page .banner h1 { margin:15px 0 12px; font-size:1.3rem; line-height:1.8; letter-spacing:.04em; }
.login-heading p { margin:0; font-size:11px; letter-spacing:.07em; color:#cfb8ba; }
.login-page .content { padding:46px 36px 34px; align-self:center; }
.form-eyebrow { margin:0 0 13px; color:#96702f; font-size:10px; letter-spacing:.22em; font-weight:700; }
.form-title { margin:0 0 18px; color:#4f1e39; font-family:var(--serif); font-size:1.15rem; line-height:1.7; }
.login-page .intro { color:#74616a; font-size:13px; line-height:1.9; margin-bottom:25px; }
.login-page label { color:#51334a; font-size:12px; }
.login-page input { border:1px solid #c9b79a; border-radius:3px; min-height:49px; color:#3c2838; background:#fffdf9; }
.login-page input::placeholder { color:#a8989b; font-size:13px; }
.login-page button { background:linear-gradient(110deg,#77223f,#4d214a); border:1px solid #b78a43; border-radius:3px; min-height:50px; font-size:13px; box-shadow:0 4px 12px #55203b18; transition:filter .2s; }
.login-page button span { margin-left:18px; color:#edcb84; }
.login-page button:hover:not(:disabled) { filter:brightness(1.15); }
.login-page .status { font-size:12px; }
.login-page .fine { padding-top:17px; border-top:1px solid #dbcbb1; font-size:10px; line-height:1.9; color:#87737a; margin-top:12px; }
:where(button,select,input):focus-visible { outline:2px solid #a67526; outline-offset:4px; }
/* Keep the phone layout at every viewport width. */
 .login-page { padding:24px 16px; } .login-page main { display:block; max-width:450px; } .login-page .banner { border-right:0; border-bottom:1px solid #bb903f88; } .login-heading { padding:22px 16px; } .login-page .banner h1 { font-size:1.1rem; margin:9px 0; } .login-page .content { padding:28px 25px; } .library-page main { margin:18px 12px; padding:28px 18px; } .library-page .toolbar { padding:12px 16px; grid-template-columns:minmax(0,1fr) auto; gap:7px 12px; } .library-page .toolbar-title { grid-column:1; text-align:left; font-size:.8rem; } .library-page .picker { grid-column:1 / -1; grid-row:2; } .library-page .progress-row { grid-column:1 / -1; grid-row:3; } .library-page .logout-btn { grid-column:2; grid-row:1; padding:0; } .library-page h1 { font-size:1.65rem; } .library-page .list-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .edition-bar { padding:12px 16px; font-size:8px; } .library-page .box { scroll-margin-top:165px; } 
/* A fixed phone-width canvas, centered on larger screens. */
.library-page .shell { width:min(100%,430px); }
.login-page main { width:min(100%,430px); max-width:430px; }

.deadline-note { margin:14px 0; color:#681b44; font-size:11px; font-weight:700; line-height:1.8; }