:root{--canvas:#F5F5F5;--accent:#9D75CB;--on-accent:#fff;--ink:#34313c;--surface:#fff;--menu-surface:#eeebf3;--soft:#eee5f8;--line:#e0d9e9;--muted:#81718f;--avatar:#ffffffb3;--overlay:#30243e55}
:root[data-theme="red"]{--canvas:#FDF5DC;--accent:#D50E3D;--on-accent:#FDF5DC;--ink:#352c30;--surface:#fffdf5;--menu-surface:#f8eccf;--soft:#f9e6e7;--line:#e0d4bc;--muted:#927563;--avatar:#fffdfa9c;--overlay:#34232355}
:root[data-theme="pink"]{--canvas:#1e1e22;--accent:#e8377b;--on-accent:#fff;--ink:#f5eef2;--surface:#29262d;--menu-surface:#252228;--soft:#372533;--line:#47333f;--muted:#c6a6b7;--avatar:#ffffff14;--overlay:#09070dcc}
*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font:14px/1.6 "Microsoft YaHei",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}header{height:90px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid var(--line)}header a{text-decoration:none;color:var(--accent);font-size:24px;font-weight:800;line-height:1.2}header a span{display:block;letter-spacing:3px;font-size:9px;margin-top:7px}header>div{font-size:11px;color:var(--muted)}header i{display:inline-block;background:#60856d;border-radius:50%;width:6px;height:6px;margin-left:7px}header button{border:0;background:transparent;color:var(--accent);font-size:12px}main{max-width:1700px;padding:45px 5vw 35px;margin:auto}.eyebrow{font-size:12px;color:var(--muted);margin-bottom:25px}nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.menu{height:125px;background:var(--menu-surface);color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:17px;text-align:left;position:relative;overflow:hidden;transition:background .35s,color .35s,transform .35s,border-color .35s}.menu small{font-size:10px;opacity:.6}.menu strong{display:block;font-size:21px;margin-top:24px;font-weight:500}.menu .arrow{position:absolute;right:16px;top:14px;font-size:22px}.menu:hover,.menu.active{background:var(--accent);color:var(--canvas);border-color:var(--accent);transform:translateY(-2px)}.menu:focus-visible{outline:3px solid var(--ink);outline-offset:4px}.headline{display:flex;justify-content:space-between;align-items:end;padding:40px 0 25px}.headline span{font-size:10px;color:var(--muted);letter-spacing:2px}.headline h1{font-size:clamp(40px,5vw,80px);line-height:1.15;letter-spacing:-3px;margin:9px 0 0;font-weight:600}.headline p{max-width:280px;font-size:12px;color:var(--muted);margin:0}#stage{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;min-height:285px}.card{display:block;width:100%;text-align:left;color:inherit;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:23px;min-height:255px;animation:reveal 1.45s cubic-bezier(.25,.65,.3,1) both;animation-delay:var(--delay);transition:transform .25s,box-shadow .25s}.card:hover{transform:translateY(-3px);box-shadow:0 12px 25px #62418e14}.card-top{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:var(--muted)}.badge{background:var(--soft);color:var(--accent);padding:3px 7px;border-radius:4px}.card h2{font-size:25px;margin:25px 0 8px}.card p{font-size:12px;color:var(--muted);margin:5px 0}.card-bottom{margin-top:25px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.card-bottom b{font-size:23px;color:var(--accent)}.card-bottom span{font-size:11px;color:var(--muted)}.card.person{background:var(--soft)}.card.person:nth-child(2){background:var(--soft)}.card.person:nth-child(3){background:var(--soft)}.card.person:nth-child(4){background:var(--soft)}.avatar{font-size:35px;color:var(--accent);background:var(--avatar);width:65px;height:65px;border-radius:50%;display:grid;place-items:center;margin-top:15px}.person h2{margin:15px 0 5px}.hint{font-size:11px;color:var(--muted);margin-top:25px}footer{padding:20px 5vw;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}dialog{border:1px solid var(--line);border-radius:16px;padding:38px;width:470px;max-width:90vw;background:var(--surface);color:var(--ink)}dialog::backdrop{background:#30243e55;backdrop-filter:blur(5px)}#close{position:absolute;right:16px;top:13px;border:0;background:transparent;font-size:20px}dialog h2{font-size:29px;margin:10px 0}dialog p{color:var(--muted)}dialog small{color:var(--muted)}@keyframes reveal{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1000px){nav{grid-template-columns:repeat(3,minmax(0,1fr))}.menu{height:95px}.menu strong{margin-top:12px;font-size:18px}#stage{grid-template-columns:repeat(2,minmax(0,1fr))}.headline h1{font-size:50px}}@media(max-width:600px){header{height:75px}header>div{display:none}main{padding-top:25px}nav{gap:7px}.menu{padding:12px;height:85px}.menu strong{font-size:15px}.menu .arrow{right:10px;font-size:16px}.headline{align-items:start;flex-direction:column;gap:16px}.headline h1{font-size:43px}.card{padding:16px;min-height:230px}.card h2{font-size:20px}.card-top{flex-wrap:wrap}.card-bottom b{font-size:20px}}@media(prefers-reduced-motion:reduce){.card{animation:reveal .1s both;animation-delay:0s}.menu,.card{transition:none}}

#stage,.headline{opacity:1;transition:opacity .4s ease,translate .5s cubic-bezier(.22,1,.36,1)}#stage.leaving,.headline.leaving{opacity:0;translate:0 -5px}#stage.leaving{pointer-events:none}.headline{min-height:180px}.menu{transition:background .45s ease,color .45s ease,transform .5s cubic-bezier(.22,1,.36,1),border-color .45s ease}@media(prefers-reduced-motion:reduce){#stage,.headline{transition:none}.headline{min-height:0}}

#stage.exiting{pointer-events:none}#stage.exiting .card{animation:card-exit .65s cubic-bezier(.4,0,.6,1) both;animation-delay:var(--exit-delay,0ms)}@keyframes card-exit{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-24px)}}@media(prefers-reduced-motion:reduce){#stage.exiting .card{animation:none}}

/* Concurrent layers allow outgoing cards to remain visible while the next set enters. */
#stage{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;isolation:isolate;min-height:330px}.card-layer{grid-area:1/1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;min-width:0;position:relative}.card-layer .card{animation:none;min-height:305px;will-change:transform,opacity;backface-visibility:hidden}.card-layer.outgoing{pointer-events:none;z-index:0}.card-layer:not(.outgoing){z-index:1}.headline{transition:none}.menu:hover,.menu.active{transform:none}.card:hover{transform:translateY(-2px)}@media(max-width:1000px){#stage{grid-template-columns:minmax(0,1fr)}.card-layer{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.card-layer{gap:12px}.card-layer .card{min-height:280px}}

#stage{overflow:hidden;overflow:clip;padding-top:8px}.card-layer{padding-bottom:12px}.motion-control{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin:15px 0}.motion-control input{accent-color:var(--accent)}

.menu:hover,.menu.active{color:var(--on-accent)}.palette{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:24px}.palette>span{font-size:11px;color:var(--muted);margin-right:8px}.theme-choice{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:30px;padding:7px 12px;font-size:11px}.theme-choice[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.swatch{display:flex}.swatch i{width:12px;height:12px;border:1px solid #ffffff40;border-radius:50%}.swatch i+i{margin-left:-3px}body,.menu,.card,dialog,.theme-choice{transition:background-color .35s ease,color .35s ease,border-color .35s ease}.card{transition:background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .25s ease}.menu{transition:background-color .35s ease,color .35s ease,border-color .35s ease,transform .5s ease}

:root[data-theme="ice"]{--canvas:#EDF5FF;--accent:#477AD8;--on-accent:#fff;--ink:#25364D;--surface:#fff;--menu-surface:#E1ECFB;--soft:#E8EFFC;--line:#CFDCEE;--muted:#657B99;--avatar:#ffffffb3;--overlay:#21344e66}
:root[data-theme="peach"]{--canvas:#FFF2EB;--accent:#C6664E;--on-accent:#fff;--ink:#4B342E;--surface:#FFFBF8;--menu-surface:#FAE6DA;--soft:#F9E1D8;--line:#ECD1C4;--muted:#936F62;--avatar:#ffffffb3;--overlay:#50332a66}
:root[data-theme="amber"]{--canvas:#28221B;--accent:#E8B666;--on-accent:#28221B;--ink:#F4E7D3;--surface:#342D24;--menu-surface:#30291F;--soft:#443523;--line:#625039;--muted:#C7AD8C;--avatar:#e8b66620;--overlay:#171007bb}

:root[data-theme="warm"]{--canvas:#EEF1F5;--accent:#62748D;--on-accent:#FAFBFD;--ink:#303946;--surface:#F8FAFC;--menu-surface:#E5EAF0;--soft:#E4EAF2;--line:#CFD7E2;--muted:#606E80;--avatar:#f8fafcb3;--overlay:#30394655}
:root[data-theme="night"]{--canvas:#24282D;--accent:#A7B9AB;--on-accent:#242B26;--ink:#DEE2DF;--surface:#2C3137;--menu-surface:#30363B;--soft:#354039;--line:#48534D;--muted:#B3BDB6;--avatar:#a7b9ab20;--overlay:#15191dcc}