/* ---------- 6. personality: accent, star mark, hover motion ---------- */
:root{--brand:#508566;--pop:#e7ed78}
::selection{background:var(--pop);color:#1a1a18}
.brand-mark span{display:inline-block;transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.brand:hover .brand-mark span{transform:rotate(180deg) scale(1.25)}
.resource-card,.lh-art,.lh-tool,.lh-case,.lh-skill,.lab-card,.ch-card,.cp-col{transition:transform .25s ease,box-shadow .25s ease}
.resource-card:hover,.lh-art:hover,.lh-tool:hover,.lh-case:hover,.lh-skill:hover,.lab-card:hover,.ch-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.lh-art img,.lh-case img{transition:transform .5s ease}
.lh-art:hover img,.lh-case:hover img{transform:scale(1.04)}
.kicker::before{content:"✳ ";color:var(--brand)}
.lh-hero h1 em{background:linear-gradient(transparent 62%,var(--pop) 62% 92%,transparent 92%);padding:0 .08em}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- 1. hero collage ---------- */
.lh-number strong{font-size:clamp(56px,7vw,88px)}
.cl-wall{display:grid;gap:12px;padding:8px 0 40px;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cl-row{overflow:hidden}
.cl-track{display:flex;gap:12px;width:max-content;animation:cl-move 90s linear infinite}
.cl-right .cl-track{animation-direction:reverse;animation-duration:110s}
.cl-wall:hover .cl-track{animation-play-state:paused}
.cl-track a{flex:none;width:168px;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--soft)}
.cl-track img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.cl-track a:hover img{transform:scale(1.06)}
@keyframes cl-move{to{transform:translateX(-50%)}}
@media (max-width:700px){.cl-track a{width:120px}}

/* ---------- 2. today's solar term ---------- */
.tm-wrap{max-width:1100px;margin:56px auto;padding:0 24px;display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:48px;align-items:center}
.tm-art{display:block;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--soft);box-shadow:var(--shadow)}
.tm-art img{width:100%;height:100%;object-fit:cover;display:block}
.tm-type{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:linear-gradient(160deg,#eef3ec,#f7f3ea);position:relative;color:#1f3a2c}
.tm-type span{writing-mode:vertical-rl;font:600 clamp(56px,8vw,96px)/1 "Songti SC","STSong","Noto Serif SC",serif;letter-spacing:.1em}
.tm-type small{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#6c8a78}
.tm-type i{position:absolute;right:22px;top:18px;font-style:normal;color:var(--brand);font-size:22px;animation:tm-spin 12s linear infinite}
@keyframes tm-spin{to{transform:rotate(360deg)}}
.tm-copy h2{font-size:clamp(40px,5vw,64px);margin:12px 0;letter-spacing:-.03em}
.tm-copy h2 small{font-size:14px;font-weight:400;color:var(--muted);margin-left:14px;letter-spacing:.08em}
.tm-copy>p{color:var(--muted);line-height:1.8}
.tm-prompt{max-height:9em;overflow:auto}
.tm-actions{justify-content:flex-start;margin-top:14px}
@media (max-width:760px){.tm-wrap{grid-template-columns:1fr;gap:24px}.tm-art{max-width:300px}}

/* ---------- lab home cards ---------- */
.lab-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lab-card{display:flex;flex-direction:column;gap:8px;padding:26px;border:1px solid var(--line);border-radius:18px;background:var(--paper);color:inherit;text-decoration:none}
.lab-card span{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--pop);color:#1a1a18;font-weight:700}
.lab-card h3{margin:8px 0 0;font-size:20px}
.lab-card p{color:var(--muted);margin:0;flex:1;line-height:1.7}
.lab-card b{font-size:13px}
@media (max-width:760px){.lab-cards{grid-template-columns:1fr}}

/* ---------- lab pages ---------- */
.lab-page .resource-tabs a.active{background:var(--ink);color:var(--paper)}
.lab-lead{font-size:16px;color:var(--muted);max-width:720px;line-height:1.8}
.lab-page mark,.cp-base mark{background:var(--pop);color:#1a1a18;padding:0 .2em;border-radius:3px}

/* 3. compare */
.cp-set{margin:44px 0;padding-top:28px;border-top:1px solid var(--line)}
.cp-head h2{margin:8px 0}
.cp-base{color:var(--muted);line-height:1.8;max-width:900px}
.cp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.cp-col{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper)}
.cp-col img,.cp-ph{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.cp-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:repeating-linear-gradient(135deg,var(--soft) 0 14px,transparent 14px 28px)}
.cp-ph span{font-size:30px;font-weight:700}
.cp-ph small{color:var(--muted)}
.cp-col figcaption{padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.cp-col figcaption span{background:var(--pop);color:#1a1a18;width:fit-content;padding:0 6px;border-radius:3px;font-size:13px}
.cp-col .text-link{background:none;border:0;padding:0;text-align:left;cursor:pointer;font:inherit;font-size:13px;margin-top:6px}
@media (max-width:760px){.cp-grid{grid-template-columns:1fr 1fr 1fr;gap:8px}.cp-col figcaption{padding:8px}.cp-col figcaption span,.cp-col .text-link{display:none}}

/* 4. mixer */
.mx-layout{display:grid;grid-template-columns:1fr 380px;gap:32px;align-items:start;margin-top:24px}
.mx-group{border:0;padding:0;margin:0 0 22px}
.mx-group legend{font-weight:600;margin-bottom:10px}
.mx-chips{display:flex;flex-wrap:wrap;gap:8px}
.mx-chip{border:1px solid var(--line);background:var(--paper);color:inherit;border-radius:999px;padding:7px 14px;cursor:pointer;font:inherit;font-size:14px;transition:background .15s,transform .15s}
.mx-chip:hover{transform:translateY(-1px)}
.mx-chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mx-own{border:1px dashed var(--line);border-radius:999px;padding:7px 14px;font:inherit;font-size:14px;background:transparent;color:inherit;min-width:180px}
.mx-out{position:sticky;top:90px;border:1px solid var(--line);border-radius:18px;padding:22px;background:var(--paper);box-shadow:var(--shadow)}
.mx-out .prompt-box{min-height:150px;white-space:pre-wrap}
.mx-out .lh-actions{justify-content:flex-start}
@media (max-width:900px){.mx-layout{grid-template-columns:1fr}.mx-out{position:static}}

/* 5. challenge */
.ch-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;margin:28px 0 48px;align-items:start}
.ch-hero h2{font-size:clamp(28px,3.4vw,42px);margin:10px 0}
.ch-hero>div>p{color:var(--muted);line-height:1.8}
.ch-label{font-size:13px;margin-bottom:4px}
.ch-hero .lh-actions{justify-content:flex-start}
.ch-form{border:1px solid var(--line);border-radius:18px;padding:22px;background:var(--paper);display:flex;flex-direction:column;gap:14px}
.ch-form h3{margin:0}
.ch-form label{display:flex;flex-direction:column;gap:6px;font-size:14px}
.ch-form input[type=text],.ch-form input:not([type]),.ch-form textarea{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;background:var(--bg);color:inherit}
.ch-form small{color:var(--muted);font-size:12px}
.ch-check{flex-direction:row!important;align-items:flex-start;gap:8px!important;color:var(--muted);font-size:13px!important}
.ch-wall{columns:4 220px;column-gap:14px}
.ch-card{break-inside:avoid;margin:0 0 14px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper)}
.ch-card img{display:block;width:100%}
.ch-card figcaption{padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.ch-card small{color:var(--muted)}
.ch-card details{font-size:13px;color:var(--muted)}
.ch-admin{margin-top:40px;padding:22px;border:2px dashed var(--brand);border-radius:18px}
@media (max-width:860px){.ch-hero{grid-template-columns:1fr}}

/* keep the collage inside the first screen */
.lh-hero{padding-top:36px!important;padding-bottom:16px}
.lh-hero h1{margin:16px 0}
.lh-number{margin:14px auto 16px}
.lh-values{margin:24px auto 0}

/* AI-generated content labels */
.ai-tag{position:absolute;right:8px;bottom:8px;font:600 11px/1 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif;font-style:normal;color:#fff;background:rgba(20,20,18,.62);padding:4px 8px;border-radius:999px;pointer-events:none;letter-spacing:.02em}
.ai-note{font-size:12px;color:var(--muted,#6b6b68);margin:4px 0 0}
.cl-note{text-align:center}
.tm-art,.cp-col>a,.ch-card>a{position:relative;display:block}
.lh-installs{margin:-6px 0 14px;font-size:13px;color:var(--muted)}

.lang-link{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;color:inherit;text-decoration:none;white-space:nowrap;margin-right:8px}
.lang-link:hover{background:var(--soft)}
.pk-lang-banner{display:flex;justify-content:center;align-items:center;gap:10px;background:#173832;color:#e5ffc9;font-size:14px;padding:8px 16px}
.pk-lang-banner a{color:#e5ffc9;font-weight:600;text-decoration:none}
.pk-lang-banner button{border:0;background:none;color:inherit;font-size:18px;cursor:pointer;opacity:.7}