.when2{
  --ink:#0B2630;--body:#39555F;--muted:#55707C;--line:#DCE7EB;--hair:#EFF5F7;--paper:#F4F8F9;--tint:#EDF5F7;--card:#FFFFFF;
  --sea:#0A7290;--sea-deep:#0B5468;--deep:#062B36;--laurel:#1E7A57;--lava:#C2490F;--lava-ink:#A8420F;--lava-press:#A93C0A;
  --sand:#E8A84B;--sand-ink:#8F4A10;--sand-light:#F3D9AE;--ice:#9FD9E8;--violet:#4A3F8F;
  --gutter:clamp(14px,3.6vw,32px);--r-card:18px;--r-ctl:12px;
  --sans:'Manrope',system-ui,sans-serif;--serif:'Newsreader',Georgia,serif;--mono:'JetBrains Mono',ui-monospace,monospace;
  
  --c-rain:#0A7290;--c-cloud:#4A3F8F;--c-snow:#0B5468;--c-dust:#8F4A10;
}
.when2 *{box-sizing:border-box}
.when2 a{color:var(--sea);text-decoration:none}
.when2 a:hover{color:var(--ink)}
.when2 button{font:inherit;cursor:pointer}
.when2 button:active{transform:scale(.97)}
.when2 :focus-visible{outline:3px solid var(--ice);outline-offset:3px;border-radius:8px}
.when2 p{margin:0}
.when2 .wrap{max-width:1240px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.when2 .ms{font-family:'Material Symbols Outlined';font-weight:300;font-style:normal;line-height:1;display:inline-block;vertical-align:middle}
.when2 .ms.fill{font-variation-settings:'FILL' 1}
.when2 .from{display:flex;align-items:baseline;gap:6px}
.when2 .from small{font:700 10px var(--sans);letter-spacing:.1em;color:var(--muted)}
.when2 .from b{font:800 22px var(--sans);color:var(--ink)}
.when2 .hero{position:relative;background:var(--deep);color:#fff;overflow:hidden;padding:44px 0 40px}
.when2 .hero .bg{position:absolute;inset:0;background:var(--hero-img) center 44%/cover;opacity:.4}
.when2 .hero .veil{position:absolute;inset:0;background:linear-gradient(104deg,rgba(6,43,54,.97) 0%,rgba(6,43,54,.84) 44%,rgba(6,43,54,.52) 100%)}
.when2 .hero .veil2{position:absolute;left:0;right:0;bottom:0;height:110px;background:linear-gradient(180deg,rgba(244,248,249,0),var(--paper))}
.when2 .hero .wrap{position:relative}
.when2 .crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font:600 11.5px var(--mono);color:rgba(240,248,250,.66)}
.when2 .crumb a{display:inline-flex;align-items:center;min-height:44px;color:rgba(240,248,250,.9)}
.when2 .crumb .cur{color:var(--sand-light)}
.when2 .hero h1{margin:2px 0 0;max-width:17ch;font-family:var(--serif);font-weight:300;font-size:clamp(34px,5.2vw,70px);line-height:.99;letter-spacing:-.025em;text-wrap:balance}
.when2 .hero h1 em{font-style:italic;color:#CDE9F1}
.when2 .hero .sub{margin:14px 0 0;max-width:56ch;font:400 15px/1.7 var(--sans);color:rgba(240,248,250,.9);text-wrap:pretty}
.when2 .hero .sub b{color:#fff;font-weight:700}
.when2 .grid{margin-top:24px;display:grid;grid-template-columns:minmax(0,1.32fr) minmax(320px,1fr);gap:22px;align-items:start}
.when2 .year{border-radius:20px;background:rgba(4,26,34,.52);backdrop-filter:blur(18px);border:1px solid rgba(159,217,232,.24);overflow:hidden}
.when2 .year .yh{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:14px 18px;border-bottom:1px solid rgba(159,217,232,.18)}
.when2 .year .yh b{font:800 10px var(--sans);letter-spacing:.2em;color:var(--ice)}
.when2 .year .yh em{font:600 11px var(--mono);color:rgba(240,248,250,.66);font-style:normal}
.when2 .k-snow{--b:#9FD9E8}
.when2 .k-clear{--b:#F3D9AE}
.when2 .k-dust{--b:#E8A84B}
.when2 .k-green{--b:#7FD1A8}
.when2 .months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0}
.when2 .mo{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;min-height:88px;padding:14px 4px 12px;border-right:1px solid rgba(159,217,232,.14);color:#fff;transition:background .22s ease}
.when2 .mo:last-child{border-right:0}
.when2 .mo::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--b)}
.when2 .mo:hover{background:rgba(159,217,232,.14);color:#fff}
.when2 .mo .lab{font:800 13px var(--sans);letter-spacing:.02em}
.when2 .mo .tag{font:700 8.5px var(--sans);letter-spacing:.1em;color:var(--b);white-space:nowrap}
.when2 .legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid rgba(159,217,232,.18);background:rgba(4,26,34,.3)}
.when2 .legend .lg{display:flex;flex-direction:column;gap:5px;min-height:70px;padding:14px 16px;border-right:1px solid rgba(159,217,232,.14);color:#EAF4F7;transition:background .22s ease}
.when2 .legend .lg:last-child{border-right:0}
.when2 .legend .lg:hover{background:rgba(159,217,232,.14);color:#fff}
.when2 .legend .lg i{width:22px;height:4px;border-radius:2px;background:var(--b)}
.when2 .legend .lg em{font:600 10.5px var(--mono);color:rgba(240,248,250,.68);font-style:normal}
.when2 .legend .lg{font:700 12px var(--sans)}
.when2 .ynote{padding:14px 18px;border-top:1px solid rgba(159,217,232,.18);font:500 12.5px/1.6 var(--sans);color:rgba(240,248,250,.8)}
.when2 .side{display:flex;flex-direction:column;gap:12px}
.when2 .herobook{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:16px;border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 16px 40px rgba(3,20,26,.4);transition:transform .3s cubic-bezier(.2,1.2,.4,1),box-shadow .3s ease}
.when2 .herobook:hover{transform:translateY(-4px);box-shadow:0 24px 52px rgba(3,20,26,.5);color:var(--ink)}
.when2 .herobook .ic{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--lava);color:#fff}
.when2 .herobook .ic .ms{font-size:24px}
.when2 .herobook .t{min-width:0;display:flex;flex-direction:column;gap:3px}
.when2 .herobook .t small{font:800 9.5px var(--sans);letter-spacing:.18em;color:var(--lava-ink)}
.when2 .herobook .t b{font:800 14.5px/1.3 var(--sans)}
.when2 .herobook .t em{font:600 11px var(--mono);color:var(--muted);font-style:normal}
.when2 .herobook .p{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:13px;border-top:1px solid var(--hair)}
.when2 .herobook .p .from b{font-size:26px}
.when2 .herobook .p .arw{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r-ctl);background:var(--lava);color:#fff;font:800 12.5px var(--sans);transition:background .25s ease}
.when2 .herobook:hover .p .arw{background:var(--lava-press)}
.when2 .wins{border-radius:18px;background:rgba(4,26,34,.52);backdrop-filter:blur(18px);border:1px solid rgba(159,217,232,.24);overflow:hidden}
.when2 .wins .wh{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid rgba(159,217,232,.18)}
.when2 .wins .wh b{font:800 10px var(--sans);letter-spacing:.2em;color:var(--ice)}
.when2 .wins .wh em{margin-left:auto;font:600 10.5px var(--mono);color:rgba(240,248,250,.5);font-style:normal}
.when2 .win{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:12px 16px;border-bottom:1px solid rgba(159,217,232,.12);color:#fff;transition:background .22s ease}
.when2 .win:last-child{border-bottom:0}
.when2 .win:hover{background:rgba(159,217,232,.12);color:#fff}
.when2 .win .dot{width:9px;height:9px;margin-top:6px;border-radius:50%;background:var(--b)}
.when2 .win b{display:block;font:700 12.5px var(--mono);color:#fff;white-space:nowrap}
.when2 .win span{display:block;margin-top:3px;font:500 12.5px/1.5 var(--sans);color:rgba(240,248,250,.82)}
.when2 .anchors{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.when2 .anchors .lbl{font:800 9.5px var(--sans);letter-spacing:.2em;color:rgba(240,248,250,.6);margin-right:4px}
.when2 .anchors a{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 16px;border-radius:var(--r-ctl);background:rgba(4,26,34,.5);backdrop-filter:blur(14px);border:1px solid rgba(159,217,232,.28);font:700 12.5px var(--sans);color:#EAF4F7;transition:background .25s ease,border-color .25s ease,transform .25s ease}
.when2 .anchors a .ms{font-size:17px;color:var(--ice)}
.when2 .anchors a:hover{background:rgba(4,26,34,.78);border-color:var(--ice);transform:translateY(-3px);color:#fff}
@media (max-width:1000px){
.when2 .grid{grid-template-columns:1fr;gap:16px}
}
@media (max-width:760px){
.when2 .hero{padding:26px 0 30px}
.when2 .grid{margin-top:18px;display:flex;flex-direction:column}
.when2 .side{order:-1}
.when2 .mo{min-height:64px;justify-content:space-between}
.when2 .year .yh{padding:12px 14px}
.when2 .months{grid-template-columns:repeat(4,minmax(0,1fr))}
.when2 .mo{min-height:76px;padding:12px 4px 10px;border-bottom:1px solid rgba(159,217,232,.14)}
.when2 .mo:nth-child(4n){border-right:0}
.when2 .mo:nth-child(n+9){border-bottom:0}
.when2 .mo .lab{font-size:12.5px}
.when2 .mo .tag{font-size:8px}
.when2 .legend{grid-template-columns:1fr 1fr}
.when2 .legend .lg{min-height:64px;padding:12px 14px}
.when2 .legend .lg:nth-child(2n){border-right:0}
.when2 .legend .lg:nth-child(-n+2){border-bottom:1px solid rgba(159,217,232,.14)}
.when2 .ynote{padding:13px 14px}
.when2 .herobook{padding:14px}
.when2 .herobook .ic{width:42px;height:42px;border-radius:13px}
.when2 .herobook .ic .ms{font-size:21px}
.when2 .herobook .t b{font-size:13.5px}
.when2 .anchors{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.when2 .anchors .lbl{grid-column:1 / -1;margin:0}
.when2 .anchors a{min-height:46px;padding:0 12px;font-size:12px;justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
.when2 *, .when2 *::before, .when2 *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

.when2 .mo .tag{white-space:normal;text-align:center;line-height:1.15;
  letter-spacing:.06em;overflow-wrap:anywhere}