/* Screen 04: fixed watch body with interchangeable face content */
.faces{background:radial-gradient(circle at 50% 42%,rgba(220,225,238,.74),transparent 34%),linear-gradient(180deg,#f7f7f9 0%,#eceef3 100%)}
.faces .section-copy{margin-bottom:24px;text-align:left}
.faces .section-copy h2{margin-bottom:18px;color:#19191b;font-size:clamp(42px,11.715vw,58px);font-weight:800;line-height:1.28;letter-spacing:.06em}
.faces .section-copy p{color:#616168;font-size:clamp(13px,3.45vw,17px);font-weight:400;line-height:1.704;letter-spacing:.06em}
.dial-showcase{width:min(100%,560px);margin:0 auto}
.dial-watch-wrap{display:grid;place-items:center}
.dial-watch{position:relative;width:min(88vw,410px);aspect-ratio:711/978;outline:none;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.dial-watch:active{cursor:grabbing}
.dial-watch:focus-visible{border-radius:44%;outline:3px solid rgba(255,107,0,.32);outline-offset:8px}
.dial-watch-body{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 28px 34px rgba(44,50,64,.24));pointer-events:none;-webkit-user-drag:none}
.dial-screen{position:absolute;z-index:2;top:19.4%;left:13.4%;width:73.2%;aspect-ratio:1;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:#0d0f12;box-shadow:inset 0 0 0 2px rgba(0,0,0,.2);container-type:inline-size;pointer-events:none}
.dial-face-track{display:flex;width:500%;height:100%;will-change:transform;transform:translate3d(0,0,0)}
.dial-face{position:relative;display:flex;width:20%;height:100%;flex:0 0 20%;box-sizing:border-box;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.dial-minimal{flex-direction:column;background:#f7f5ee;color:#131315}
.dial-mini-date{position:absolute;top:17%;font-size:6.2cqw;font-weight:600;letter-spacing:.04em}
.dial-minimal-time{font-size:27cqw;font-weight:260;line-height:.84;letter-spacing:-.09em}
.dial-minimal-time span{font-weight:180;opacity:.42}
.dial-minimal small{position:absolute;bottom:18%;font-size:5.5cqw;letter-spacing:.16em}
.dial-sport{flex-direction:column;background:radial-gradient(circle at 50% 42%,#263448,#080b10 72%);color:#fff}
.dial-sport-top{position:absolute;top:12%;right:14%;left:14%;display:flex;align-items:center;justify-content:space-between;font-size:5.5cqw;font-weight:650}
.dial-sport-top i{padding:1.8cqw 3cqw;border-radius:99px;background:#ff6b00;font-size:4.5cqw;font-style:normal}
.dial-rings{position:relative;width:43%;aspect-ratio:1;margin-top:-3%;border:3.7cqw solid #ff643d;border-right-color:rgba(255,100,61,.22);border-radius:50%;transform:rotate(-28deg)}
.dial-rings::before,.dial-rings::after{position:absolute;border-style:solid;border-radius:50%;content:""}
.dial-rings::before{inset:10%;border-width:3.2cqw;border-color:#68d5a6 rgba(104,213,166,.2) #68d5a6 #68d5a6}
.dial-rings::after{inset:26%;border-width:2.8cqw;border-color:#7a9cff #7a9cff rgba(122,156,255,.2) #7a9cff}
.dial-rings i{display:none}
.dial-sport>strong{margin-top:5%;font-size:11cqw;letter-spacing:-.05em}
.dial-sport>small{color:rgba(255,255,255,.55);font-size:4.5cqw}
.dial-sport-stats{position:absolute;right:16%;bottom:10%;left:16%;display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.14);padding-top:4%;font-size:5cqw}
.dial-sport-stats span{display:grid;gap:1cqw}.dial-sport-stats small{color:rgba(255,255,255,.48);font-size:3.7cqw}
.dial-health{flex-direction:column;justify-content:flex-start;padding:13% 11% 10%;background:linear-gradient(145deg,#eff7f4,#dfeaf2);color:#1c2429}
.dial-health-head{display:flex;width:100%;align-items:end;justify-content:space-between}
.dial-health-head strong{font-size:10cqw;letter-spacing:-.05em}.dial-health-head span{color:#3b8a68;font-size:4cqw;font-weight:700}
.dial-health-grid{display:grid;width:100%;grid-template-columns:repeat(2,1fr);gap:3cqw;margin-top:7%}
.dial-health-grid>span{display:grid;min-height:26cqw;place-content:center;gap:.5cqw;border-radius:5cqw;background:rgba(255,255,255,.76);box-shadow:0 3cqw 8cqw rgba(47,64,78,.08)}
.dial-health-grid i{color:#ff654d;font-size:6cqw;font-style:normal}.dial-health-grid strong{font-size:7cqw}.dial-health-grid small{color:#68757d;font-size:3.7cqw}
.dial-emotion{flex-direction:column;background:radial-gradient(circle at 28% 26%,#ffe9a5,transparent 31%),linear-gradient(145deg,#ffd67d,#ff9c65 58%,#ab78dc);color:#28201e}
.dial-emotion-time{position:absolute;top:12%;font-size:5.5cqw;font-weight:680}
.dial-smile{position:relative;width:40%;aspect-ratio:1;margin-top:-5%;border-radius:50%;background:linear-gradient(145deg,#fff4bc,#ffc84d);box-shadow:0 5cqw 12cqw rgba(139,68,29,.18)}
.dial-smile::before,.dial-smile::after{position:absolute;top:34%;width:8%;height:8%;border-radius:50%;background:#5b382a;content:""}
.dial-smile::before{left:28%}.dial-smile::after{right:28%}
.dial-smile i{position:absolute;right:27%;bottom:26%;left:27%;height:17%;border-bottom:2.2cqw solid #5b382a;border-radius:0 0 50% 50%}
.dial-emotion>strong{margin-top:6%;font-size:7.5cqw}.dial-emotion>small{margin-top:2%;font-size:3.9cqw;opacity:.64}
.dial-mood-dots{display:flex;gap:2cqw;margin-top:6%}.dial-mood-dots i{width:9cqw;height:2.1cqw;border-radius:99px;background:#d94a4a}.dial-mood-dots i:nth-child(2){background:#6285a2}.dial-mood-dots i:nth-child(3){width:22cqw;background:#47b98b}.dial-mood-dots i:nth-child(4){background:#ff6b00}
.dial-trend{display:block;background:#111116;color:#fff;text-align:left}
.dial-trend-shape{position:absolute;right:-18%;bottom:-4%;width:88%;aspect-ratio:1;border-radius:48% 52% 42% 58%;background:linear-gradient(145deg,#ff6b00,#fb2d73 52%,#8a5cff);transform:rotate(-18deg)}
.dial-trend>span{position:absolute;top:16%;left:16%;font-size:4.5cqw;font-weight:700;letter-spacing:.18em}
.dial-trend>strong{position:absolute;top:24%;left:15%;font-size:25cqw;line-height:.72;letter-spacing:-.08em}
.dial-trend>small{position:absolute;left:16%;bottom:17%;font-size:3.7cqw;letter-spacing:.16em}
.dial-current-copy{display:grid;justify-items:center;min-height:118px;margin-top:-6px;text-align:center}
.dial-current-copy>span{color:#ff6b00;font-size:11px;font-weight:750;letter-spacing:.12em}
.dial-current-copy h3{margin:10px 0 7px;color:#19191b;font-size:27px;letter-spacing:-.035em}
.dial-current-copy p{color:#66666d;font-size:14px;line-height:1.55}
.dial-categories{display:flex;width:calc(100% + 40px);gap:8px;overflow-x:auto;margin:18px -20px 0;padding:0 20px 8px;scrollbar-width:none;scroll-snap-type:x proximity}
.dial-categories::-webkit-scrollbar,.dial-thumbnails::-webkit-scrollbar{display:none}
.dial-categories button{flex:0 0 auto;min-width:68px;min-height:40px;padding:0 16px;border:1px solid rgba(29,29,31,.08);border-radius:999px;background:rgba(255,255,255,.56);color:#65656c;font-size:13px;font-weight:620;scroll-snap-align:center;transition:transform 120ms ease,background 220ms ease,color 220ms ease,box-shadow 220ms ease}
.dial-categories button.active{background:#1d1d1f;color:#fff;box-shadow:0 8px 22px rgba(29,29,31,.16)}
.dial-categories button:active,.dial-thumb:active{transform:scale(.96)}
.dial-thumbnails{display:flex;width:calc(100% + 40px);align-items:center;gap:11px;overflow-x:auto;margin:25px -20px 0;padding:8px 20px 12px;scrollbar-width:none;scroll-snap-type:x mandatory}
.dial-thumb{display:grid;flex:0 0 92px;aspect-ratio:1;place-items:center;padding:8px;border:1.5px solid transparent;border-radius:26px;background:rgba(255,255,255,.5);opacity:.62;scroll-snap-align:center;transition:opacity 220ms ease,transform 280ms cubic-bezier(.2,.8,.2,1),border-color 220ms ease,box-shadow 220ms ease}
.dial-thumb.active{border-color:#ff6b00;background:#fff;box-shadow:0 12px 28px rgba(61,68,82,.13);opacity:1;transform:scale(1.06)}
.dial-thumb-face{position:relative;display:grid;width:66px;aspect-ratio:1;place-content:center;overflow:hidden;border-radius:50%;font-style:normal;text-align:center}
.thumb-minimal{background:#f2efe7;color:#111}.thumb-minimal b{font-size:15px}.thumb-minimal i{font-size:8px;font-style:normal}
.thumb-sport{display:block;background:#10141b}.thumb-sport i{position:absolute;inset:12px;border:5px solid #ff643d;border-right-color:rgba(255,100,61,.25);border-radius:50%}.thumb-sport i:nth-child(2){inset:20px;border-width:4px;border-color:#55c997 #55c997 rgba(85,201,151,.2) #55c997}.thumb-sport i:nth-child(3){inset:27px;border-width:3px;border-color:#7796ff rgba(119,150,255,.2) #7796ff #7796ff}
.thumb-health{grid-template-columns:1fr 1fr;gap:3px;padding:9px;background:#e6f0ed;color:#29333a}.thumb-health b,.thumb-health i{display:grid;place-items:center;border-radius:7px;background:#fff;font-size:10px;font-style:normal}
.thumb-emotion{background:linear-gradient(145deg,#ffd86f,#f79b77);color:#513529}.thumb-emotion b{font-size:28px;line-height:1}.thumb-emotion i{font-size:8px;font-style:normal}
.thumb-trend{display:block;background:#111;color:#fff}.thumb-trend::after{position:absolute;right:-16px;bottom:-12px;width:52px;height:52px;border-radius:45%;background:linear-gradient(145deg,#ff6b00,#9b5cff);content:""}.thumb-trend b,.thumb-trend i{position:absolute;z-index:1;left:14px;font-style:normal}.thumb-trend b{top:11px;font-size:20px}.thumb-trend i{top:31px;font-size:14px}
.dial-swipe-hint{display:flex;align-items:center;justify-content:center;gap:7px;margin:6px 0 0;color:#787880;font-size:12px}.dial-swipe-hint i{font-size:17px;font-style:normal}
@media (hover:hover) and (pointer:fine){
  .dial-categories button:hover{background:rgba(255,255,255,.9);color:#1d1d1f}
  .dial-categories button.active:hover{background:#1d1d1f;color:#fff}
  .dial-thumb:hover{opacity:1;transform:translateY(-2px)}
  .dial-thumb.active:hover{transform:translateY(-2px) scale(1.06)}
}
@media (min-width:760px){
  .dial-watch{width:430px}.dial-showcase{width:min(100%,760px)}
  .dial-categories,.dial-thumbnails{width:100%;justify-content:center;margin-inline:0;padding-inline:0}
}
@media (min-width:1024px){
  .faces .section-copy h2>br{display:none}
  .faces .section-copy h2{font-size:clamp(42px,11.715vw,58px);line-height:1.28;letter-spacing:.06em;white-space:nowrap;text-wrap:nowrap}
}
@media (min-width:1180px){
  .faces .section-copy{width:min(100%,1180px);margin-bottom:54px}
  .faces .section-copy h2{font-size:clamp(42px,11.715vw,58px);letter-spacing:.06em}
  .faces .section-copy p{max-width:720px;font-size:18px;line-height:1.7;letter-spacing:-.01em}
  .dial-showcase{display:grid;width:min(100%,1180px);grid-template-columns:minmax(480px,.95fr) minmax(480px,1.05fr);grid-template-rows:auto auto auto auto;column-gap:clamp(60px,8vw,130px);align-items:center}
  .dial-watch-wrap{grid-column:1;grid-row:1/5}.dial-watch{width:min(100%,480px)}
  .dial-current-copy{grid-column:2;grid-row:1;justify-items:start;align-self:end;text-align:left}
  .dial-current-copy h3{font-size:36px}.dial-current-copy p{font-size:17px}
  .dial-categories{grid-column:2;grid-row:2;justify-content:flex-start;width:100%;margin:20px 0 0;padding:0}
  .dial-thumbnails{grid-column:2;grid-row:3;justify-content:flex-start;width:100%;margin:28px 0 0;padding:8px 4px 14px}
  .dial-swipe-hint{grid-column:2;grid-row:4;justify-content:flex-start;margin-top:10px}
}
@media (prefers-reduced-motion:reduce){
  .dial-categories button,.dial-thumb{transition:none}
}
/* Supplied watch body and production dial artwork */
.dial-watch{aspect-ratio:1151/1567}
.dial-screen{top:21.7%;left:11.34%;width:77.32%;border:0;background:#000;box-shadow:none}
.dial-face{padding:0;background:#000}
.dial-face-image{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.dial-current-copy{min-height:94px;margin-top:-2px}
.dial-thumb{padding:7px;background:rgba(255,255,255,.52)}
.dial-thumb-image{display:block;width:100%;height:100%;border-radius:50%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}

/* ===== 情绪符号（21 种情绪 × 多套表情） ===== */
.symbols{background:linear-gradient(180deg,#f5f5f7,#f0f1f4)}
.symbols .section-copy h2 span{color:#6f7078}
.symbols-sets{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 36px}
.symbols-sets button{padding:9px 22px;border:1px solid rgba(29,29,31,.08);border-radius:999px;background:#fff;color:#6e6e73;font-size:13px;font-weight:650;letter-spacing:.02em;cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease,transform .2s ease}
.symbols-sets button:hover{transform:translateY(-1px)}
.symbols-sets button.active{border-color:var(--orange);background:var(--orange);color:#fff}
.symbols-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.symbols-group{border:1px solid rgba(29,29,31,.07);border-radius:24px;background:#fff;box-shadow:0 14px 36px rgba(30,35,48,.06);padding:22px 20px}
.symbols-group-head{display:flex;align-items:center;gap:9px;margin-bottom:18px}
.symbols-dot{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 18%,transparent)}
.symbols-group-head strong{font-size:16px;font-weight:720;letter-spacing:.01em}
.symbols-group-head span{margin-left:auto;color:#9a9da8;font-size:11px;font-weight:600}
.symbols-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:14px 8px}
.symbol{margin:0;text-align:center}
.symbol-face{display:block;aspect-ratio:1;overflow:hidden;border-radius:50%;background:#f3f3f5;transition:transform .28s var(--ease-out),box-shadow .28s ease,background .28s ease}
.symbol:hover .symbol-face{transform:translateY(-4px);background:#eef0f3;box-shadow:0 14px 26px rgba(30,35,48,.16)}
.symbol-face img{width:100%;height:100%;object-fit:contain}
.symbol figcaption{margin-top:8px;color:#6e6e73;font-size:12px;font-weight:650;letter-spacing:.02em}
@media(max-width:759px){.symbols-gallery{grid-template-columns:1fr}}