/* Icons & Impact — editorial redesign and twelve monthly art directions */
:root{
  --month-primary:#e6508d;--month-secondary:#7254c9;--month-tint:#fff2f8;
  --page-width:1500px;--card-radius:26px;
  --ii-rainbow:linear-gradient(110deg,#e94d55 0%,#f08c34 16%,#f0c83c 31%,#71ae57 47%,#a4c64a 57%,#42a8ce 71%,#6f76d7 83%,#d74b9c 100%);
  scroll-behavior:smooth;
}
html:root[data-theme="month-01"]:not([data-mode="dark"]){--bg:#f6f4ff;--surface:#fff;--hero:linear-gradient(128deg,#dad6ff,#fbf4ff 57%,#e9e3ff);--pink:#b5a6ee;--deep:#4c3b9d;--ink:#211e39;--soft:#665f7d;--glow:#fff;--ornament:'✦';--month-primary:#4c3b9d;--month-secondary:#a98eea;--month-tint:#f0edff}
html:root[data-theme="month-02"]:not([data-mode="dark"]){--bg:#fff3f7;--surface:#fff;--hero:linear-gradient(128deg,#ffc5d5,#fff2f5 52%,#ffd9e7);--pink:#ed86a5;--deep:#a12457;--ink:#37162a;--soft:#775363;--glow:#ffe0ea;--ornament:'♡';--month-primary:#c32f72;--month-secondary:#fb829e;--month-tint:#fff0f5}
html:root[data-theme="month-03"]:not([data-mode="dark"]){--bg:#f3fbf4;--surface:#fff;--hero:linear-gradient(128deg,#cce9d2,#f6fbef 52%,#e2f0ba);--pink:#9fcda5;--deep:#28704d;--ink:#19362a;--soft:#557266;--glow:#f3ffdc;--ornament:'❀';--month-primary:#22845e;--month-secondary:#a7cf54;--month-tint:#e9f7ea}
html:root[data-theme="month-04"]:not([data-mode="dark"]){--bg:#f0faff;--surface:#fff;--hero:linear-gradient(128deg,#bee8f2,#eef9ff 56%,#e0e1ff);--pink:#83c9df;--deep:#236b88;--ink:#18313d;--soft:#546c78;--glow:#dbf8ff;--ornament:'☂';--month-primary:#2986a8;--month-secondary:#77c8e4;--month-tint:#e8f8fd}
html:root[data-theme="month-05"]:not([data-mode="dark"]){--bg:#fff4fa;--surface:#fff;--hero:linear-gradient(128deg,#f3c7eb,#fff7e9 54%,#ead9ff);--pink:#d492d4;--deep:#7a3c95;--ink:#33223c;--soft:#705d76;--glow:#ffe2f3;--ornament:'✿';--month-primary:#8d50bd;--month-secondary:#ed7aa9;--month-tint:#fbecfb}
html:root[data-theme="month-06"]:not([data-mode="dark"]){--bg:#fff5fb;--surface:#fff;--hero:linear-gradient(120deg,#ffc5d6 0%,#ffe7b7 24%,#d6f0cc 47%,#c9edee 68%,#e2d1fa 86%,#ffd6ec 100%);--pink:#e48bb6;--deep:#74408f;--ink:#332139;--soft:#65546b;--glow:#fff;--ornament:'🏳️‍🌈';--month-primary:#e54b79;--month-secondary:#7653ca;--month-tint:#fff0f8}
html:root[data-theme="month-07"]:not([data-mode="dark"]){--bg:#fff8e9;--surface:#fff;--hero:linear-gradient(128deg,#ffdfa0,#fff5d9 55%,#ffd4ab);--pink:#f2ae47;--deep:#a44f1e;--ink:#392516;--soft:#705b48;--glow:#fff1b3;--ornament:'☀';--month-primary:#e06b2f;--month-secondary:#edc837;--month-tint:#fff3d3}
html:root[data-theme="month-08"]:not([data-mode="dark"]){--bg:#fff3f2;--surface:#fff;--hero:linear-gradient(128deg,#fad0de,#fff0dc 55%,#ffd5b7);--pink:#ed9d99;--deep:#a83f66;--ink:#3d222e;--soft:#785b61;--glow:#ffe3cc;--ornament:'☼';--month-primary:#bd4a7a;--month-secondary:#f39559;--month-tint:#fff0e9}
html:root[data-theme="month-09"]:not([data-mode="dark"]){--bg:#eff8ff;--surface:#fff;--hero:linear-gradient(128deg,#c9e5ff,#f3f7ff 56%,#d7f0f7);--pink:#89b9e7;--deep:#315a9b;--ink:#1d2f48;--soft:#536a83;--glow:#e2f7ff;--ornament:'✎';--month-primary:#3472b8;--month-secondary:#73c4df;--month-tint:#e9f4ff}
html:root[data-theme="month-10"]:not([data-mode="dark"]){--bg:#f8f1fa;--surface:#fff;--hero:linear-gradient(128deg,#e2c4ed,#fff1dc 53%,#ffd9b8);--pink:#c994d6;--deep:#6c367e;--ink:#2f1b35;--soft:#6e5870;--glow:#ffe1af;--ornament:'☠';--month-primary:#8b42a6;--month-secondary:#e78038;--month-tint:#f8effb}
html:root[data-theme="month-11"]:not([data-mode="dark"]){--bg:#fbf5eb;--surface:#fff;--hero:linear-gradient(128deg,#f1d2a3,#fbf3df 52%,#dfedce);--pink:#d9aa6a;--deep:#8b492d;--ink:#38281e;--soft:#706051;--glow:#f8e5bd;--ornament:'✦';--month-primary:#a44d31;--month-secondary:#d9a344;--month-tint:#f9edd9}
html:root[data-theme="month-12"]:not([data-mode="dark"]){--bg:#f3f6ff;--surface:#fff;--hero:linear-gradient(128deg,#cfddff,#f8f4ff 54%,#e8d8f7);--pink:#9caee7;--deep:#41518f;--ink:#252a48;--soft:#5f6580;--glow:#eff8ff;--ornament:'❄';--month-primary:#3556a2;--month-secondary:#9c6bc2;--month-tint:#eef0ff}

html:root[data-theme="month-06"]:not([data-mode="dark"]) .hero:before,html:root[data-theme="month-06"]:not([data-mode="dark"]) .calendar-theme-banner:before{background:conic-gradient(#ee4b6d,#ffb43c,#f2dc43,#62b368,#3fadd3,#675fd2,#d64f9f,#ee4b6d)}
html:root[data-theme="month-10"]:not([data-mode="dark"])[data-culture-month="black-history"] .calendar-theme-banner{border-color:#c69352}
html:root[data-theme="month-10"]:not([data-mode="dark"]) .calendar-day.is-event:nth-of-type(even){background:#fff0db}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{min-height:100vh;background:radial-gradient(ellipse at 96% 0%,color-mix(in srgb,var(--month-secondary),transparent 90%),transparent 35%),radial-gradient(ellipse at 1% 98%,color-mix(in srgb,var(--month-primary),transparent 94%),transparent 37%),var(--bg);color:var(--ink);font-family:Inter,'DM Sans',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;transition:background .55s ease,color .35s ease}
body:before{content:'';position:fixed;z-index:-1;inset:0;pointer-events:none;opacity:.16;background-image:radial-gradient(circle at 9% 18%,var(--month-primary) 0 1.5px,transparent 2px),radial-gradient(circle at 93% 26%,var(--month-secondary) 0 2px,transparent 2.5px),radial-gradient(circle at 16% 82%,var(--month-secondary) 0 1.5px,transparent 2px);background-size:190px 190px,240px 240px,310px 310px;animation:ii-background-drift 28s ease-in-out infinite alternate}
a{color:var(--deep);text-underline-offset:3px}
button,input,textarea{font:inherit}
button{touch-action:manipulation}
:focus-visible{outline:3px solid color-mix(in srgb,var(--month-primary),white 17%);outline-offset:3px}
::selection{background:color-mix(in srgb,var(--month-primary),white 60%);color:var(--ink)}
.icons-main header{background:color-mix(in srgb,var(--surface),transparent 8%);backdrop-filter:blur(22px) saturate(1.25);box-shadow:0 14px 42px rgba(38,22,55,.1)}
.icons-main header nav>a,.icons-main header nav>.ii-nav-action{border:1px solid transparent;color:var(--ink);font-weight:650;transition:background .22s,border-color .22s,transform .22s}
.icons-main header nav>a:hover,.icons-main header nav>.ii-nav-action:hover{background:var(--month-tint);border-color:color-mix(in srgb,var(--month-primary),transparent 78%);transform:translateX(3px)}
.icons-main .logo{font-family:Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.12em;color:var(--month-primary)}
.icons-main .logo span{color:var(--deep)}
.icons-main .ii-menu-backdrop.open{z-index:34}
.icons-main .hero{position:relative;isolation:isolate;overflow:hidden;min-height:520px;margin:14px 18px 30px;padding:clamp(38px,6vw,96px);border-radius:0 0 46px 46px;background:var(--hero);box-shadow:0 22px 65px color-mix(in srgb,var(--month-primary),transparent 86%)}
.icons-main .hero:before{content:'';position:absolute;z-index:-1;inset:-15%;opacity:.17;background:radial-gradient(circle at 77% 38%,var(--month-secondary) 0 10%,transparent 10.5%),radial-gradient(circle at 18% 80%,var(--month-primary) 0 12%,transparent 12.5%);transform:rotate(-8deg);animation:ii-background-drift 24s ease-in-out infinite alternate}
.icons-main .hero>div:first-child{max-width:610px}
.icons-main .hero .eyebrow,.icons-main .eyebrow{color:var(--month-primary);font-size:11px;letter-spacing:.2em}
.icons-main .hero h1{font:800 clamp(56px,8.6vw,124px)/.88 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.08em;color:var(--ink);margin:20px 0 24px}
.icons-main .hero h1 em{font-family:Georgia,'Times New Roman',serif;font-weight:500;letter-spacing:-.07em;color:var(--month-primary)}
.icons-main .hero p{max-width:520px;font-size:clamp(15px,1.35vw,19px);line-height:1.75;color:var(--soft)}
.icons-main .hero .button{display:inline-flex;align-items:center;min-height:50px;padding:0 21px;margin-top:12px;border-radius:999px;background:var(--month-primary);color:white;font-weight:750;box-shadow:0 12px 26px color-mix(in srgb,var(--month-primary),transparent 72%);transition:transform .2s,box-shadow .2s}
.icons-main .hero .button:hover{transform:translateY(-3px);box-shadow:0 16px 32px color-mix(in srgb,var(--month-primary),transparent 62%)}
.icons-main .hero-photo{position:relative;width:min(100%,510px);height:480px;margin:0;justify-self:center;border:12px solid color-mix(in srgb,var(--surface),transparent 8%);border-radius:38% 38% 26px 26px;background:var(--month-tint);box-shadow:0 25px 60px color-mix(in srgb,var(--month-primary),transparent 78%);transform:rotate(1.2deg);transition:transform .5s cubic-bezier(.2,.8,.2,1),border-radius .5s,box-shadow .3s}
.icons-main .hero-photo:hover{transform:rotate(0) translateY(-5px)}
.icons-main .hero-photo img{width:100%;height:100%;object-fit:cover;border-radius:inherit;transition:filter .35s,transform .6s}
.icons-main .photo-credit{bottom:8px;left:8px;right:8px;border-radius:13px;background:rgba(20,15,27,.68);color:#fff;padding:8px 11px;backdrop-filter:blur(10px)}
.icons-main main section:not(.hero){max-width:var(--page-width);margin:0 auto;padding:clamp(48px,6vw,92px) clamp(20px,5vw,78px);scroll-margin-top:84px}
.icons-main .icons-heading h2,.icons-main .section-title,.icons-main main h2{font:750 clamp(34px,5vw,58px)/1.03 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.05em;color:var(--ink)}
.icons-main .icons-heading{margin-bottom:22px}
.icons-main .icon-tabs{display:flex;gap:9px;max-width:100%;overflow-x:auto;padding:8px 4px 16px;scrollbar-width:thin}
.icons-main .icon-tab{min-height:44px;padding:11px 16px;border:1px solid color-mix(in srgb,var(--month-primary),transparent 75%);border-radius:999px;background:var(--surface);color:var(--ink);white-space:nowrap;box-shadow:0 5px 14px rgba(38,22,55,.05);transition:transform .22s,border-color .22s,background .22s}
.icons-main .icon-tab:hover{transform:translateY(-3px) rotate(-1deg);border-color:var(--month-primary)}
.icons-main .icon-tab[aria-pressed="true"]{border-color:transparent;background:var(--month-primary);color:white;box-shadow:0 8px 18px color-mix(in srgb,var(--month-primary),transparent 75%)}
.icons-main .grid{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:17px}
.icons-main .era-card,.icons-main .impact-card,.icons-main .quote-card,.icons-main .item,.icons-main .icon-feature{border:1px solid color-mix(in srgb,var(--month-primary),transparent 86%);border-radius:var(--card-radius);box-shadow:0 16px 35px rgba(35,23,50,.065);transition:transform .24s,border-color .24s,box-shadow .24s}
.icons-main .era-card:hover,.icons-main .impact-card:hover,.icons-main .quote-card:hover,.icons-main .item:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--month-primary),transparent 62%);box-shadow:0 20px 42px color-mix(in srgb,var(--month-primary),transparent 88%)}
.icons-main .era-card:nth-child(4n+1){border-top:4px solid #e94d55}.icons-main .era-card:nth-child(4n+2){border-top:4px solid #ef9345}.icons-main .era-card:nth-child(4n+3){border-top:4px solid #59aa75}.icons-main .era-card:nth-child(4n){border-top:4px solid #7482db}
.icons-main .playground-area{max-width:1100px;margin:24px auto;border:1px solid color-mix(in srgb,var(--month-primary),transparent 80%);border-radius:32px;background:linear-gradient(145deg,var(--month-tint),var(--surface));box-shadow:0 18px 44px color-mix(in srgb,var(--month-primary),transparent 89%)}
.icons-main .drag-sticker{touch-action:none;filter:drop-shadow(0 8px 8px rgba(34,22,42,.15));transition:filter .2s,scale .2s}
.icons-main .drag-sticker:hover{scale:1.08}
.icons-main .calendar-toggle{min-height:46px!important;border:1px solid color-mix(in srgb,var(--month-primary),transparent 70%);border-radius:16px!important;background:var(--month-tint);color:var(--month-primary);font-size:19px}
.icons-main .calendar{position:fixed;z-index:49;top:16px;right:16px;width:min(408px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:22px;border:1px solid color-mix(in srgb,var(--month-primary),transparent 70%);border-radius:30px;background:color-mix(in srgb,var(--surface),transparent 3%);box-shadow:0 24px 72px rgba(32,20,48,.23);backdrop-filter:blur(24px) saturate(1.18);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px) scale(.985);transition:opacity .24s,transform .24s,visibility .24s}
.icons-main .calendar.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}
.icons-main .cal-head{position:sticky;top:-22px;z-index:3;margin:-22px -22px 13px;padding:18px 20px 13px;border-bottom:1px solid color-mix(in srgb,var(--month-primary),transparent 86%);border-radius:30px 30px 0 0;background:color-mix(in srgb,var(--surface),transparent 4%);backdrop-filter:blur(18px)}
.icons-main .cal-head h2{font-size:23px!important;margin:3px 0}
.calendar-theme-banner{position:relative;overflow:hidden;display:flex;align-items:center;gap:13px;padding:17px;margin:14px 0 17px;border:1px solid color-mix(in srgb,var(--month-primary),transparent 68%);border-radius:21px;background:linear-gradient(125deg,var(--month-tint),var(--surface));}
.calendar-theme-banner:before{content:'';display:block;flex:0 0 42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--month-primary),var(--month-secondary));box-shadow:inset 0 2px 4px #ffffff66,0 5px 16px color-mix(in srgb,var(--month-primary),transparent 76%);mask:radial-gradient(circle,#000 0 62%,transparent 64%);animation:ii-mark-breathe 3.2s ease-in-out infinite}
.calendar-theme-banner strong{display:block;font-size:14px;letter-spacing:-.02em;color:var(--ink)}
.calendar-theme-banner small{display:block;margin-top:4px;color:var(--soft);line-height:1.45}
.calendar-theme-banner .theme-emoji{font-size:23px}
.icons-main .month-head{display:flex;align-items:center;justify-content:space-between}
.icons-main .month-head button,.icons-main .date-row button,.icons-main .auto{min-height:42px;border:1px solid color-mix(in srgb,var(--month-primary),transparent 78%);border-radius:14px;background:var(--month-tint);color:var(--month-primary);font-weight:750;cursor:pointer;transition:transform .18s,background .18s}
.icons-main .month-head button{width:42px;font-size:23px}
.icons-main .month-head button:hover,.icons-main .date-row button:hover,.icons-main .auto:hover{transform:translateY(-2px);background:var(--surface)}
.icons-main .month-head h3{font-size:15px}
.icons-main .month-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.icons-main .calendar-day{position:relative;min-width:0;aspect-ratio:1;border:1px solid transparent;border-radius:13px;background:var(--surface);color:var(--ink);cursor:pointer;transition:transform .16s,border-color .16s,background .16s}
.icons-main .calendar-day:hover{transform:translateY(-2px) scale(1.03);border-color:var(--month-primary)}
.icons-main .calendar-day .day-mark{display:block;min-height:11px;font-size:9px;color:var(--month-primary)}
.icons-main .calendar-day.is-event{background:color-mix(in srgb,var(--month-secondary),var(--surface) 91%)}
.icons-main .calendar-day.is-today{box-shadow:inset 0 0 0 2px var(--month-secondary)}
.icons-main .calendar-day.is-selected{background:var(--month-primary);color:white}
.icons-main .calendar-day.is-selected .day-mark{color:white}
.icons-main .calendar-key{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0;color:var(--soft);font-size:10px;line-height:1.4}
.icons-main .calendar-key span{padding:5px 8px;border-radius:999px;background:var(--month-tint)}
.icons-main .calendar-theme-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;max-height:210px;overflow:auto;padding:3px}
.icons-main .calendar-theme-list button{min-height:43px;text-align:left;border:1px solid color-mix(in srgb,var(--month-primary),transparent 86%);border-radius:13px;background:var(--surface);color:var(--ink);font-size:10px;font-weight:700;cursor:pointer}
.icons-main .calendar-theme-list button:hover{border-color:var(--month-primary);background:var(--month-tint)}
.icons-main .date-row{display:flex;gap:8px;margin:12px 0}
.icons-main .date-row input{min-width:0;flex:1;min-height:42px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--month-primary),transparent 76%);border-radius:13px;background:var(--surface);color:var(--ink)}
.icons-main .auto{width:100%;margin:5px 0}
.icons-main .status{min-height:22px;color:var(--deep);font-size:12px;line-height:1.5}
.icons-main .event-list ul{display:none}
.icons-main .event-list h3{font-size:12px;margin:15px 0 7px}
.icons-main .secret-toast{border:1px solid color-mix(in srgb,var(--month-primary),transparent 70%);box-shadow:0 14px 34px color-mix(in srgb,var(--month-primary),transparent 78%)}
.icons-main .footer{padding:28px 18px 34px;text-align:center;color:var(--soft);line-height:1.8}
.icons-main .inter-launch{background:var(--month-primary)!important;box-shadow:0 10px 24px color-mix(in srgb,var(--month-primary),transparent 68%)}
.icons-main .inter-panel{border:1px solid color-mix(in srgb,var(--month-primary),transparent 77%);border-radius:26px!important;box-shadow:0 26px 70px rgba(32,20,48,.2)}
.icons-main .people-menu-list{z-index:50}
.icons-main .people-menu-list button:hover{background:var(--month-tint)}
.pride-page,.black-page{min-height:100vh}
.pride-page header,.black-page header{position:sticky;top:0;z-index:30;min-height:68px;padding:12px clamp(18px,5vw,72px);display:flex;align-items:center;justify-content:space-between;background:color-mix(in srgb,var(--surface),transparent 8%);backdrop-filter:blur(20px);border-bottom:1px solid color-mix(in srgb,var(--month-primary),transparent 85%)}
.pride-page .brand,.black-page .brand{font-size:12px;font-weight:800;letter-spacing:.16em;text-decoration:none;color:var(--month-primary)}
.pride-page .back,.black-page .back,.page-switch{display:flex;gap:10px;align-items:center;color:var(--deep);font-size:12px;font-weight:700}
.pride-page .hero,.black-page .hero{min-height:420px;padding:clamp(42px,8vw,100px) clamp(22px,9vw,150px);background:var(--hero)}
.pride-page .rainbow{filter:drop-shadow(0 18px 28px color-mix(in srgb,var(--month-primary),transparent 73%));transition:transform .7s}
.pride-page .rainbow:hover{transform:rotate(10deg) scale(1.035)}
.pride-page section.content,.black-page section.content{max-width:var(--page-width);padding:clamp(50px,7vw,90px) clamp(22px,8vw,120px)}
.pride-page .cards,.black-page .cards{gap:18px}
.pride-page .card,.black-page .card{padding:clamp(19px,3vw,28px);border:1px solid color-mix(in srgb,var(--month-primary),transparent 82%);border-radius:22px;background:var(--surface);box-shadow:0 15px 38px rgba(45,27,58,.08);transition:transform .22s,box-shadow .22s}
.pride-page .card:hover,.black-page .card:hover{transform:translateY(-4px);box-shadow:0 22px 48px color-mix(in srgb,var(--month-primary),transparent 86%)}
.page-leaving{animation:ii-page-out .17s ease-in both}
[data-month-layout="collage"] .hero-photo{border-radius:26px 50% 32px 42%!important;transform:rotate(-2deg)!important}
[data-month-layout="garden"] .hero-photo{border-radius:50% 50% 24px 24px!important}
[data-month-layout="spectrum"] .hero-photo{border-radius:30px!important}
[data-month-layout="sunshine"] .hero-photo{clip-path:polygon(5% 0,95% 2%,100% 92%,45% 100%,0 90%)}
[data-month-layout="night"] .hero-photo{border-radius:45% 45% 26px 26px!important;box-shadow:0 25px 55px color-mix(in srgb,#f18a48,transparent 70%)}
[data-month-layout="starlight"] .hero-photo{border-radius:42% 42% 20px 20px!important}
[data-month-layout="collage"] .icons-heading h2{transform:rotate(-1deg)}
[data-month-layout="sunshine"] .hero{background-image:linear-gradient(120deg,var(--hero),color-mix(in srgb,#fff2ae,var(--surface) 30%))}
@keyframes ii-background-drift{from{background-position:0 0,0 0,0 0;transform:translateY(-3px)}to{background-position:26px 15px,-19px 20px,16px -12px;transform:translateY(3px)}}
@keyframes ii-mark-breathe{50%{transform:scale(.91) rotate(12deg);filter:saturate(1.2)}}
@keyframes ii-pumpkin-pop{from{opacity:0;transform:scale(.5) rotate(-20deg)}to{opacity:1;transform:scale(1) rotate(5deg)}}
@keyframes ii-page-out{to{opacity:0;transform:translateY(8px)}}
@media(max-width:900px){
  .icons-main .hero{margin:4px 0 18px;padding:52px 7% 38px;border-radius:0 0 30px 30px;min-height:0}
  .icons-main .hero-photo{width:min(100%,360px);height:370px;border-width:8px}
  .icons-main main section:not(.hero){padding:52px 6%}
  .icons-main .calendar{top:auto;right:10px;bottom:10px;width:min(430px,calc(100vw - 20px));max-height:min(88dvh,760px);padding:19px;border-radius:27px}
  .icons-main .cal-head{top:-19px;margin:-19px -19px 12px;padding:16px 18px 11px;border-radius:27px 27px 0 0}
  .icons-main .calendar-theme-list{max-height:155px}
  .pride-page .hero,.black-page .hero{grid-template-columns:1fr;text-align:center}
  .pride-page .hero p,.black-page .hero p{margin-inline:auto}
}
@media(max-width:520px){
  .icons-main .hero h1{font-size:clamp(48px,15vw,76px)}
  .icons-main .hero-photo{height:310px;width:min(85vw,310px)}
  .icons-main .calendar-theme-list{grid-template-columns:1fr 1fr;max-height:130px}
  .calendar-theme-banner{padding:12px;gap:10px}
  .calendar-theme-banner:before{flex-basis:34px;height:34px}
  .icons-main .calendar-key{font-size:9px}
  .pride-page header,.black-page header{padding-inline:16px}
  .pride-page .cards,.black-page .cards{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}
:root[data-halloween-accent="true"] .calendar-toggle{position:relative}
:root[data-halloween-accent="true"] .calendar-toggle:after{content:"🎃";position:absolute;right:-6px;bottom:-7px;font-size:11px;filter:drop-shadow(0 2px 3px #533)}
.icons-main .hero-photo.glam-mode{outline:4px solid color-mix(in srgb,var(--month-secondary),transparent 22%);outline-offset:5px;box-shadow:0 25px 60px color-mix(in srgb,var(--month-primary),transparent 62%)}
.icons-main .people-menu-search{width:100%;min-height:42px;margin:8px 0;padding:10px 12px;border:1px solid color-mix(in srgb,var(--month-primary),transparent 78%);border-radius:13px;background:var(--surface);color:var(--ink)}
.icons-main .people-category-filters{display:flex;gap:6px;overflow-x:auto;padding:3px 1px 9px;scrollbar-width:thin}
.icons-main .people-category-chip{flex:0 0 auto;min-height:32px;padding:6px 9px;border:1px solid color-mix(in srgb,var(--month-primary),transparent 80%);border-radius:999px;background:var(--surface);color:var(--soft);font-size:10px;font-weight:700;cursor:pointer}
.icons-main .people-category-chip[aria-pressed="true"]{background:var(--month-primary);border-color:var(--month-primary);color:white}
.icons-main .people-menu-list [hidden]{display:none!important}
.icons-main .people-menu-list button{transition:background .15s,transform .15s}
.icons-main .people-menu-list button:hover{transform:translateX(3px)}
.icons-main .inter-head{display:flex!important;align-items:center;gap:12px}
.icons-main .inter-mascot{flex:0 0 56px;width:56px;height:56px;border-radius:18px;background:linear-gradient(145deg,#ffe5f1,#eee0ff);display:grid;place-items:center;box-shadow:inset 0 1px 2px #fff,0 5px 14px #9351a22a;animation:ii-mascot-float 3s ease-in-out infinite}
.icons-main .inter-mascot svg{width:46px;height:46px;overflow:visible}
.icons-main .inter-mascot .mascot-eye{transform-box:fill-box;transform-origin:center;animation:ii-mascot-blink 5s infinite}
.icons-main .inter-suggestions{max-height:108px;overflow:auto}
.icons-main .inter-chip{transition:transform .16s,background .16s}
.icons-main .inter-chip:hover{transform:translateY(-2px) scale(1.015)}
.icons-main .inter-message{animation:ii-message-arrive .24s cubic-bezier(.2,.8,.2,1) both}
.icons-main .inter-message.user{background:color-mix(in srgb,var(--month-primary),var(--surface) 88%)}
.icons-main .person-avatar{transition:transform .18s,box-shadow .18s}
.icons-main .people-menu-list button:hover .person-avatar{transform:scale(1.08);box-shadow:0 0 0 2px var(--month-secondary)}
.icons-main .drag-sticker.is-dragging{z-index:4;cursor:grabbing;filter:drop-shadow(0 14px 12px #28142633)}
.icons-main .drag-sticker{cursor:grab}
[data-icon-layout="storybook"] .playground-area{background:repeating-linear-gradient(0deg,transparent 0 34px,color-mix(in srgb,var(--month-secondary),transparent 91%) 35px 36px),var(--surface)}
[data-icon-layout="soul"] .playground-area{background:radial-gradient(circle at 20% 20%,color-mix(in srgb,#ffd447,transparent 62%),transparent 42%),linear-gradient(140deg,var(--month-tint),var(--surface))}
[data-icon-layout="portrait"] .hero-photo{border-radius:45% 45% 30px 30px!important}
[data-icon-layout="poetry"] .quote-card{font-family:Georgia,"Times New Roman",serif}
[data-icon-layout="cinema"] .hero-photo{border-radius:18px!important;box-shadow:0 0 0 5px #17111d,0 18px 52px #16101b42}
[data-icon-layout="runway"] .hero-photo{transform:rotate(-2deg)!important}
[data-icon-layout="beauty"] .hero-photo{border-radius:50% 50% 32px 32px!important}
[data-icon-layout="march"] .hero-photo{border-radius:20px 20px 50px 20px!important}
@keyframes ii-mascot-float{50%{transform:translateY(-4px) rotate(2deg)}}
@keyframes ii-mascot-blink{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.08)}}
@keyframes ii-message-arrive{from{opacity:0;transform:translateY(7px) scale(.985)}to{opacity:1;transform:none}}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.page-leaving{animation:ii-page-out .17s ease-in both}

.icons-main .people-menu-content{padding-top:4px}
.icons-main .people-menu-list{position:static!important;top:auto!important;left:auto!important;width:100%!important;max-height:38vh;margin-top:4px;overflow:auto;box-shadow:none!important}
@media(max-width:900px){.icons-main .people-menu-list{max-height:42vh}}