/* V12: hand-cut geometry, staggered type and monochrome weather collage. */
:root{--v12-red:#ec002b;--v12-ink:#111114;--v12-paper:#fffef9;--v12-mint:#91f3df}
body{background-color:var(--v12-red);background-image:radial-gradient(#1116 1.15px,transparent 1.7px),radial-gradient(#fff8 1.2px,transparent 1.8px),linear-gradient(139deg,transparent 0 34%,#1112 34.07% 34.5%,transparent 34.57% 68%,#fff4 68.1% 68.55%,transparent 68.7%);background-size:24px 24px,43px 43px,100% 100%;background-position:0 0,11px 7px,0 0}
body::before{background:linear-gradient(113deg,transparent 0 18%,#fff9 18.1% 18.25%,transparent 18.4% 56%,#1116 56.1% 56.4%,transparent 56.5%),linear-gradient(170deg,transparent 0 77%,#fff7 77.1% 77.3%,transparent 77.4%);opacity:.7}
.chapter-hero{grid-template-columns:minmax(0,1fr) minmax(330px,460px);gap:clamp(25px,4vw,75px);background:linear-gradient(149deg,transparent 0 52%,#111 52.1% 78%,transparent 78.2%),var(--v12-red)}
.chapter-hero::before{background:linear-gradient(167deg,transparent 0 49%,#fff9 49.1% 49.4%,transparent 49.5%),linear-gradient(145deg,transparent 0 63%,#1118 63.1% 63.5%,transparent 63.6%),linear-gradient(158deg,transparent 0 85%,#fff 85.05% 85.4%,transparent 85.5%)}
.chapter-hero-copy>p{position:relative;z-index:3;background:#fff;color:#111;box-shadow:5px 5px 0 #111,11px 11px 0 #fff,17px 17px 0 #111;transform:rotate(-2.1deg)}
.hero-ticket{transform:rotate(-6deg) translate(-4px,2px)}
.stacked-heading>span:first-child{transform:rotate(-2deg) translateY(4px)}
.stacked-heading>span:nth-child(2){transform:rotate(2.4deg) translate(11px,-3px);box-shadow:5px 5px 0 #111,11px 11px 0 #fff,17px 17px 0 #111}
.stacked-heading .cutout-char:nth-child(3n){font-size:clamp(43px,7.7vw,111px);--cutout-tilt:8deg;--cutout-shift:-5px}
.stacked-heading .cutout-char:nth-child(5n+4){font-size:clamp(38px,6.8vw,96px);--cutout-tilt:-9deg;--cutout-shift:8px}

/* One scene made from five independently drifting stars. */
.weather-poster{width:min(100%,460px);min-height:445px;margin:39px 0 18px;padding:25px 20px 22px;clip-path:polygon(0 2%,17% 0,90% 1%,100% 10%,98% 54%,100% 87%,89% 100%,5% 98%,0 89%,2% 43%);border-width:9px 6px 11px 10px!important;outline:0;box-shadow:8px 7px 0 #fff,16px 16px 0 #111,23px 22px 0 #fff!important;transform:rotate(2.1deg)}
.weather-poster::before{opacity:.26;background:radial-gradient(#fff 1px,transparent 1.6px) 0 0/14px 14px,radial-gradient(#e9002b 1px,transparent 1.7px) 7px 9px/25px 25px,linear-gradient(125deg,transparent 0 36%,#fff8 36.2% 36.5%,transparent 36.7%)}
.weather-poster .chapter-orbit{position:absolute;z-index:0;display:block;inset:0;width:100%;height:100%;opacity:.53;pointer-events:none;transform:none;overflow:hidden}
.weather-poster .chapter-orbit::before{inset:3% -18% 0 20%;opacity:.18}
.weather-poster .chapter-orbit img{filter:drop-shadow(3px 3px 0 #fff);animation-name:v12-star-breathe;animation-timing-function:ease-in-out;animation-direction:alternate;will-change:auto}
.weather-poster .chapter-orbit img:nth-child(1){width:67%;right:-16%;top:7%;animation-duration:6.8s;animation-delay:-1.2s}
.weather-poster .chapter-orbit img:nth-child(2){width:48%;right:28%;top:25%;animation-duration:5.7s;animation-delay:-3.9s}
.weather-poster .chapter-orbit img:nth-child(3){width:46%;right:-9%;top:56%;animation-duration:7.1s;animation-delay:-.3s}
.weather-poster .chapter-orbit img:nth-child(4){width:26%;right:51%;top:-7%;animation-duration:4.9s;animation-delay:-2.4s}
.weather-poster .chapter-orbit img:nth-child(5){width:31%;right:28%;top:71%;animation-duration:6.1s;animation-delay:-4.6s}
@keyframes v12-star-breathe{0%{transform:translate3d(-5px,4px,0) scale(.98)}50%{transform:translate3d(2px,-6px,0) scale(1.025)}100%{transform:translate3d(6px,3px,0) scale(1.05)}}
.weather-poster>*:not(.chapter-orbit){position:relative;z-index:2}
.weather-kicker{margin-bottom:12px;transform:rotate(-7deg)}
.weather-week-badge{position:relative;display:block;max-width:calc(100% - 6px);margin:0 0 1px -7px;padding:3px 12px 14px 8px;font:1000 italic clamp(57px,6vw,87px)/.94 Impact,"Arial Black",sans-serif;letter-spacing:-.085em;white-space:nowrap;border-width:5px 7px 7px 4px;box-shadow:4px 4px 0 #ed0030,9px 9px 0 #111,14px 14px 0 #fff;transform:rotate(-6deg)}
.weather-week-badge::after{content:attr(data-week-label);position:absolute;right:-4px;bottom:-16px;display:block;padding:3px 8px;background:var(--v12-red);color:#fff;border:3px solid #111;box-shadow:3px 3px 0 #fff;font:1000 13px/1 Impact,sans-serif;letter-spacing:.09em;transform:rotate(12deg)}
.weather-poster-word{margin-left:29px;transform:rotate(6deg)}
.weather-icon-paper{right:4px;top:116px;width:clamp(107px,10vw,144px);background:#fff;border:4px solid #111;filter:drop-shadow(6px 6px 0 #e9002b) drop-shadow(-4px -4px 0 #fff);transform:rotate(8deg);clip-path:polygon(3% 5%,89% 0,100% 17%,95% 87%,12% 100%,0 86%)}
.weather-icon-paper img{filter:none;width:100%;height:100%;object-fit:contain}
.weather-poster>.weather-icon-paper{position:absolute;z-index:3}
.weather-status-en{max-width:72%;margin-top:28px;transform:rotate(-2deg)}
.weather-status-en .cutout-char:nth-child(3n+1){--cutout-tilt:-8deg;--cutout-shift:6px}
.weather-status-en .cutout-char:nth-child(3n+2){--cutout-tilt:7deg;--cutout-shift:-5px}
.weather-hero-title{transform:rotate(-7deg);box-shadow:4px 4px 0 #111,8px 8px 0 #fff}
.weather-score-ticket{transform:rotate(4deg);border-width:5px 7px 7px 5px;box-shadow:4px 4px 0 #ed0030,9px 9px 0 #fff,13px 13px 0 #111}
.weather-detail{position:relative;transform:rotate(-.25deg);box-shadow:8px 8px 0 #fff,16px 16px 0 #111,22px 23px 0 #ed0030}
.weather-detail::after{content:"";position:absolute;z-index:-1;right:-16px;bottom:-15px;width:48%;height:65px;background:#1116;clip-path:polygon(0 0,100% 28%,86% 100%,13% 60%)}
.weather-average:nth-child(1){transform:rotate(-1.8deg)}.weather-average:nth-child(2){transform:rotate(1.6deg) translateY(7px)}
.weather-average{box-shadow:5px 5px 0 #ed0030,10px 10px 0 #111,15px 15px 0 #fff;transition:transform .18s,box-shadow .18s}
.weather-average:hover{transform:translateY(-5px) rotate(-3deg);box-shadow:5px 10px 0 #ed0030,10px 15px 0 #111}
.weather-average[aria-expanded=true]{background:#111;color:#fff;box-shadow:4px 4px 0 #fff,9px 9px 0 #ed0030}

/* Unequal paper cuts and multi-color shadow layers across the chapter. */
.special-heading h2,.control-bar h2,.chapter-label strong,.personal-head h3,.source-layout h3{overflow:visible}
.special-heading h2{transform:rotate(-2.5deg) translateX(-10px);box-shadow:5px 6px 0 #fff,11px 11px 0 #ed0030,17px 17px 0 #111}
.special-heading h2 .cutout-char:nth-child(4n+2){--cutout-tilt:9deg;--cutout-shift:-9px;font-size:1.08em}
.special-heading h2 .cutout-char:nth-child(4n+3){--cutout-tilt:-10deg;--cutout-shift:8px;font-size:.9em}
.event-half{clip-path:polygon(0 6%,13% 2%,92% 0,100% 13%,98% 51%,100% 89%,90% 100%,2% 96%);border-width:8px 5px 11px 9px;box-shadow:5px 5px 0 #fff,12px 12px 0 #111,18px 18px 0 #ed0030}
.event-half:nth-child(2){clip-path:polygon(0 1%,91% 3%,100% 10%,97% 94%,87% 100%,2% 98%,1% 67%);box-shadow:5px 5px 0 #111,12px 12px 0 #fff,18px 18px 0 #111}
.event-half h3{display:inline-block;transform:rotate(-4deg) translateX(-5px);padding:0 7px 4px;background:#fff;border:3px solid #111;box-shadow:4px 4px 0 #ed0030,8px 8px 0 #111}
.event-half:nth-child(2) h3{transform:rotate(3deg) translateX(4px)}
.event-half .cutout-char:nth-child(odd){--cutout-tilt:-8deg;--cutout-shift:5px}
.event-half .cutout-char:nth-child(even){--cutout-tilt:8deg;--cutout-shift:-5px}
.control-bar{transform:rotate(-1deg);box-shadow:7px 7px 0 #fff,13px 13px 0 #ed0030,19px 19px 0 #111;clip-path:polygon(0 3%,93% 0,100% 12%,98% 86%,91% 100%,1% 97%)}
.control-bar h2{transform:rotate(-2deg) translateX(-5px);text-shadow:3px 3px 0 #ed0030,7px 7px 0 #fff}
.chapter-list{gap:42px}
.chapter{clip-path:polygon(0 2%,18% 0,93% 1%,100% 8%,98% 54%,100% 93%,92% 100%,3% 97%,0 86%);border-width:7px 5px 10px 11px;box-shadow:5px 5px 0 #fff,12px 12px 0 #111,19px 19px 0 #fff!important;transform:rotate(-.7deg)}
.chapter:nth-child(2n){clip-path:polygon(0 1%,91% 0,100% 11%,98% 95%,87% 100%,2% 98%,1% 53%);border-width:6px 11px 9px 5px;transform:rotate(.85deg);box-shadow:5px 5px 0 #111,12px 12px 0 #fff,19px 19px 0 #111!important}
.chapter::after{right:-14px;bottom:-17px;width:69%;height:39px;background:#111;opacity:.75}
.chapter>summary,.persona-feature-heading{position:relative;grid-template-columns:91px minmax(0,1fr) 54px;gap:19px;min-height:120px;background:linear-gradient(163deg,#fff 0 69%,#dedee1 69.2% 73%,#fff 73.2%);overflow:visible}
.chapter-no{position:relative;top:-7px;left:-4px;z-index:3;width:75px;height:75px;transform:rotate(-10deg);box-shadow:4px 4px 0 #fff,10px 10px 0 #ed0030,14px 14px 0 #111}
.chapter:last-child .chapter-no{font-size:19px;letter-spacing:-.06em}
.chapter:nth-child(even) .chapter-no{transform:rotate(8deg) translateY(7px)}
.chapter-label{position:relative;z-index:2;overflow:visible}
.chapter-label strong{position:relative;display:inline-block;margin:-9px 0 4px;padding:6px 8px 8px 3px;background:#fff;border:4px solid #111;box-shadow:4px 4px 0 #ed0030,9px 9px 0 #111;transform:rotate(-2.5deg)}
.chapter:nth-child(2n) .chapter-label strong{transform:rotate(2.5deg);box-shadow:4px 4px 0 #111,9px 9px 0 #ed0030}
.chapter-label strong .cutout-char{box-shadow:2px 2px 0 #fff,5px 5px 0 #111,8px 8px 0 #ed0030;font-size:clamp(26px,2.8vw,41px);--cutout-tilt:-6deg;--cutout-shift:4px}
.chapter-label strong .cutout-char:nth-child(4n+2){--cutout-tilt:9deg;--cutout-shift:-7px;font-size:1.07em;background:#111;color:#fff;-webkit-text-stroke:.8px #fff;box-shadow:2px 2px 0 #ed0030,5px 5px 0 #fff,8px 8px 0 #111}
.chapter-label strong .cutout-char:nth-child(4n+3){--cutout-tilt:-9deg;--cutout-shift:7px;font-size:.91em;background:#ed0030;color:#fff;box-shadow:2px 2px 0 #fff,5px 5px 0 #111,8px 8px 0 #fff}
.chapter-label strong .cutout-char:nth-child(4n){--cutout-tilt:7deg;--cutout-shift:-4px;font-size:1.03em}
.chapter-label small{position:relative;display:block;width:max-content;max-width:100%;margin:5px 0 0 9px;padding:2px 7px;background:#111;color:#fff;transform:rotate(2deg);font-size:12px;box-shadow:3px 3px 0 #ed0030}
.chapter-toggle{transform:rotate(13deg);box-shadow:3px 3px 0 #fff,7px 7px 0 #ed0030,10px 10px 0 #111}
.chapter[open]>summary{border-bottom-width:9px}
.chapter-body{background-image:radial-gradient(#1112 1px,transparent 1.5px),linear-gradient(153deg,#fff 0 88%,#ececef 88.2%);background-size:21px 21px,100% 100%}
.chapter-body::before{width:31%;height:170px;opacity:.7;background:radial-gradient(#1116 1.3px,transparent 2px) 0 0/8px 8px;clip-path:polygon(12% 0,100% 0,100% 96%,0 45%)}
.group-row{clip-path:polygon(0 3%,93% 0,100% 12%,98% 95%,87% 100%,1% 96%);box-shadow:4px 4px 0 #fff,9px 9px 0 #111,14px 14px 0 #ed0030!important;transform:rotate(-1.1deg)}
.group-row:nth-child(even){transform:rotate(1.3deg)}
.group-row>summary:active,.chapter>summary:active{background:#eee;transform:translateY(2px)}
.group-name{font-size:clamp(18px,2.1vw,26px);text-shadow:2px 2px 0 #fff,4px 4px 0 #ed0030}
.group-score{font-size:clamp(29px,3.2vw,40px);text-shadow:2px 2px 0 #fff,5px 5px 0 #ed0030,8px 8px 0 #111}
.persona-feature{overflow:visible}
.persona-feature-heading{display:grid;grid-template-columns:91px minmax(0,1fr);padding:17px 23px;border-bottom:8px solid #111}
.persona-feature .chapter-label strong{font-size:clamp(39px,5.2vw,76px);transform:rotate(-5deg) translateY(-5px)}
.personal-head{clip-path:polygon(0 4%,91% 0,100% 12%,97% 92%,88% 100%,2% 97%);box-shadow:5px 5px 0 #fff,11px 11px 0 #111,16px 16px 0 #ed0030!important;transform:rotate(-1.3deg)}
.personal-head h3{transform:rotate(-2.3deg);box-shadow:4px 4px 0 #ed0030,9px 9px 0 #111}
.personal-score{box-shadow:4px 4px 0 #fff,9px 9px 0 #ed0030,14px 14px 0 #111!important}
.source-layout>div{box-shadow:4px 4px 0 #fff,9px 9px 0 #111,14px 14px 0 #ed0030!important}
.source-line{transform:rotate(-1.1deg);box-shadow:5px 5px 0 #ed0030,10px 10px 0 #111}

button{transform-origin:center;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
button:not(:disabled):active,button.is-tapping{filter:brightness(1.12);animation:v12-button-hit .25s cubic-bezier(.17,.9,.2,1)}
summary.is-tapping{filter:brightness(.96);animation:v12-button-hit .25s cubic-bezier(.17,.9,.2,1)}
button:focus-visible,summary:focus-visible{outline:4px solid var(--v12-mint);outline-offset:5px}
@keyframes v12-button-hit{0%{scale:1}42%{scale:.94;translate:3px 3px}100%{scale:1;translate:0 0}}
@media(max-width:1050px){.chapter-hero{grid-template-columns:1fr 360px}.weather-poster{min-height:410px}.weather-week-badge{font-size:68px}.weather-icon-paper{top:110px;width:112px}.weather-status-en{max-width:80%}}
@media(max-width:760px){.chapter-hero{display:block}.weather-poster{margin:38px auto 0;max-width:470px}.weather-poster .chapter-orbit{right:0;top:0;width:100%;height:100%;opacity:.42}.weather-week-badge{font-size:clamp(58px,12vw,81px)}.weather-icon-paper{top:102px}.chapter-list{gap:32px}.chapter{content-visibility:auto;contain-intrinsic-size:auto 520px}.persona-feature{content-visibility:visible}.chapter-label strong .cutout-char{font-size:clamp(24px,3.6vw,33px)}.persona-feature-heading{grid-template-columns:65px 1fr;gap:12px;padding:14px}.persona-feature .chapter-label strong{font-size:clamp(31px,7vw,49px)}}
@media(max-width:520px){body{background-image:radial-gradient(#1114 1px,transparent 1.5px),linear-gradient(139deg,transparent 0 39%,#fff4 39.1% 39.3%,transparent 39.4%);background-size:23px 23px,100% 100%}.chapter-hero{padding:25px 10px 49px}.stacked-heading .cutout-char:nth-child(3n){font-size:clamp(35px,10vw,55px)}.stacked-heading .cutout-char:nth-child(5n+4){font-size:clamp(32px,8.8vw,48px)}.weather-poster{min-height:387px;margin:31px 7px 0;padding:18px 12px}.weather-week-badge{font-size:clamp(54px,12.5vw,67px);padding-inline:5px}.weather-week-badge::after{font-size:10px;bottom:-14px}.weather-icon-paper{top:93px;right:5px;width:99px}.weather-status-en{max-width:100%;margin-top:19px}.weather-status-en .cutout-char{font-size:clamp(23px,6vw,36px)}.chapter>summary{grid-template-columns:47px 1fr 28px;gap:7px;padding:9px}.chapter-no{width:42px;height:44px;left:-5px;top:-4px;font-size:21px}.chapter-label strong{max-width:100%;padding:3px 3px 4px 2px;margin-top:-5px;border-width:3px;box-shadow:3px 3px 0 #ed0030,6px 6px 0 #111}.chapter-label strong .cutout-char{font-size:clamp(16px,4.1vw,24px);min-width:.75em;padding:2px 1px 3px}.chapter-label small{font-size:9px;margin-left:2px}.persona-feature-heading{grid-template-columns:49px 1fr;gap:7px;padding:10px}.persona-feature .chapter-label strong{font-size:33px}.weather-detail{box-shadow:5px 5px 0 #fff,10px 10px 0 #111}.event-half{box-shadow:4px 4px 0 #fff,8px 8px 0 #111,12px 12px 0 #ed0030}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}.weather-poster .chapter-orbit img{animation:none!important}button:not(:disabled):active,button.is-tapping{animation:none!important;scale:1!important;translate:0 0!important}}
body.v12-save-data .weather-poster .chapter-orbit img{animation:none!important}