#suase-workshop { font-family: Arial, "PingFang SC", sans-serif; }
#suase-workshop * { box-sizing: border-box; }
#suase-workshop [hidden] { display: none !important; }
#suase-workshop button { cursor: pointer; font-family: inherit; }
#suase-workshop a { color: inherit; }
#suase-workshop :focus-visible { outline: rgb(251, 206, 112) solid 3px; outline-offset: 4px; }
#suase-workshop { position: relative; overflow: hidden; background: rgb(33, 50, 62); color: rgb(255, 255, 255); margin: auto; width: 100%; min-height: 320px; aspect-ratio: 16 / 9; container-type: inline-size; border-radius: 5px; isolation: isolate; }
#suase-workshop .hero-scene { position: absolute; inset: 0px; overflow: hidden; background: rgb(33, 50, 62); }
#suase-workshop .poster { display: contents; }
#suase-workshop .poster img, #suase-workshop .workshop-video { position: absolute; display: block; max-width: none; object-fit: fill; }
#suase-workshop .workshop-video { opacity: 0; pointer-events: none; }
#suase-workshop[data-media-ready="true"] .workshop-video { opacity: 1; }
#suase-workshop .hero-shade { position: absolute; inset: 0px; pointer-events: none; background: linear-gradient(rgba(17, 33, 46, 0.52), transparent 17%, transparent 77%, rgba(20, 35, 45, 0.52)); z-index: 1; }
#suase-workshop .hero-nav { position: absolute; left: 4%; right: 4%; top: 0px; display: flex; align-items: center; justify-content: space-between; gap: 20px; z-index: 8; }
#suase-workshop .brand-logo { width: clamp(106px, 11cqw, 175px); height: auto; display: block; }
#suase-workshop .hero-nav nav { display: flex; align-items: center; gap: clamp(12px, 2.4cqw, 40px); font-size: clamp(11px, 1.1cqw, 17px); font-weight: 600; letter-spacing: 0.035em; }
#suase-workshop .hero-nav a { text-decoration: none; }
#suase-workshop .hero-nav button { border: 0px; background: none; color: rgb(255, 255, 255); font-size: inherit; padding: 10px 0px; font-weight: 600; letter-spacing: inherit; }
#suase-workshop .language-link { font-size: 12px; white-space: nowrap; }
#suase-workshop .mobile-menu-toggle { display: none; }
#suase-workshop #process-menu { position: absolute; z-index: 10; right: 4%; top: 66px; background: rgba(20, 42, 55, 0.96); border: 1px solid rgb(102, 128, 140); border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.333) 0px 8px 28px; display: grid; grid-template-columns: 1fr 1fr; padding: 10px; max-width: 420px; gap: 4px; }
#suase-workshop #process-menu a { display: block; padding: 11px 12px; color: rgb(255, 255, 255); font-size: 13px; text-decoration: none; border-radius: 3px; }
#suase-workshop #process-menu a:hover { background: rgb(56, 85, 101); }
#suase-workshop .brand-copy { position: absolute; left: 5%; right: 5%; bottom: 1.8%; text-align: center; z-index: 3; pointer-events: none; }
#suase-workshop .brand-copy h1 { font-size: clamp(23px, 2.6cqw, 46px); line-height: 1.1; letter-spacing: -0.025em; margin: 0px 0px 6px; font-weight: 700; }
#suase-workshop .brand-copy p { font-size: clamp(11px, 1.2cqw, 21px); line-height: 1.35; margin: 0px; }
#suase-workshop .playback-controls { position: absolute; left: 4%; bottom: 2.5%; z-index: 6; display: flex; gap: 8px; align-items: center; max-width: 28%; font-size: 11px; }
#suase-workshop .motion-toggle { display: flex; align-items: center; gap: 8px; white-space: nowrap; min-height: 36px; padding: 7px 10px; background: rgba(21, 43, 56, 0.91); border: 1px solid rgb(115, 137, 150); border-radius: 4px; color: rgb(255, 255, 255); font-size: 11px; }
#suase-workshop .motion-icon { font-size: 11px; min-width: 11px; }
#suase-workshop .motion-status { font-size: 11px; line-height: 1.4; }
#suase-workshop .noscript-note { position: relative; padding: 10px; background: rgb(22, 48, 61); z-index: 10; }
#suase-workshop[data-mobile="true"] { max-width: none; }
#suase-workshop[data-mobile="true"] .hero-nav { left: 18px; right: 18px; height: 64px !important; }
#suase-workshop[data-mobile="true"] .brand-logo { width: 115px; }
#suase-workshop[data-mobile="true"] .hero-nav nav, #suase-workshop[data-mobile="true"] .language-link { display: none; }
#suase-workshop[data-mobile="true"] .mobile-menu-toggle { display: block; font-size: 11px; }
#suase-workshop[data-mobile="true"] .brand-copy { inset: 89px 14px auto; }
#suase-workshop[data-mobile="true"] .brand-copy h1 { font-size: 29px; margin-bottom: 9px; }
#suase-workshop[data-mobile="true"] .brand-copy p { font-size: 13px; line-height: 1.4; }
#suase-workshop[data-mobile="true"] .process-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: absolute; left: 18px; right: 18px; }
#suase-workshop .process-grid button { min-height: 44px; background: rgb(45, 69, 83); border: 1px solid rgb(102, 128, 140); color: rgb(255, 255, 255); font-size: 12px; padding: 8px 5px; border-radius: 4px; }
#suase-workshop .process-grid button[aria-pressed="true"] { background: rgb(64, 94, 109); border-color: rgb(255, 255, 255); }
#suase-workshop .process-grid button:last-child { grid-column: span 2; }
#suase-workshop[data-mobile="true"] .playback-controls { bottom: 16px; left: 18px; right: 18px; max-width: none; }
#suase-workshop[data-mobile="true"] #process-menu { left: 12px; right: 12px; top: 61px; padding: 8px; }
#suase-workshop[data-mobile="true"] #process-menu a { font-size: 12px; padding: 10px 8px; }
@media (prefers-reduced-motion: reduce) {
  #suase-workshop * { scroll-behavior: auto; transition: none !important; }
}
#suase-workshop .process-grid { display: none; }
#suase-workshop[data-mobile="true"] .hero-shade { display: none; }
#suase-workshop [hidden] { display: none !important; }
#suase-workshop .hotpoint { position: absolute; z-index: 4; width: 32px; height: 32px; transform: translate(-50%, -50%); padding: 0px; border: 0px; border-radius: 50%; background: transparent; touch-action: manipulation; }
#suase-workshop .hotpoint::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%); border: 1px solid rgb(255, 255, 255); border-radius: 50%; background: rgb(200, 40, 64); box-shadow: rgba(33, 50, 62, 0.7) 0px 0px 0px 1px; pointer-events: none; }
#suase-workshop .hotpoint::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border: 1px solid rgb(246, 198, 207); border-radius: 50%; pointer-events: none; opacity: 0; animation: suase-ripple 3.6s cubic-bezier(.2,.6,.3,1) var(--pulse-delay,0s) infinite; }
#suase-workshop .hotpoint[data-active="true"]::before { background: rgb(255, 255, 255); border-color: rgb(201, 44, 66); box-shadow: rgba(201, 44, 66, 0.314) 0px 0px 0px 2px; }
#suase-workshop .hotpoint[data-active="true"]::after { border-color: rgb(255, 255, 255); }
#suase-workshop .hotpoint:focus-visible { outline: rgb(255, 255, 255) solid 2px; outline-offset: 0px; }
#suase-workshop .process-popover { position: absolute; z-index: 7; width: 252px; box-sizing: border-box; padding: 14px; background: rgba(21, 41, 53, 0.98); color: rgb(248, 250, 251); border: 1px solid rgba(120, 144, 156, 0.5); border-radius: 8px; box-shadow: rgba(6, 19, 29, 0.25) 0px 8px 24px; font: 12px / 1.5 Arial, "PingFang SC", sans-serif; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 160ms, transform 160ms; }
#suase-workshop .process-popover[data-visible="true"] { opacity: 1; transform: translateY(0px); pointer-events: auto; transition-duration: 240ms; transition-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
#suase-workshop .popover-header { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 7px; }
#suase-workshop .popover-header h2 { display: flex; align-items: center; gap: 8px; flex: 1 1 0%; min-width: 0px; font: 600 15px / 1.3 Arial, sans-serif; letter-spacing: 0px; margin: 1px 0px 0px; }
#suase-workshop .process-icon { display: grid; place-items: center; flex: 0 0 26px; height: 26px; border: 1px solid rgba(239, 170, 182, 0.15); border-radius: 5px; background: rgba(239, 170, 182, 0.05); color: rgb(239, 170, 182); }
#suase-workshop .process-icon svg { display: block; }
#suase-workshop .process-title-text { min-width: 0px; }
#suase-workshop .close-popover { display: grid; place-items: center; flex: 0 0 26px; height: 26px; margin: -5px -5px 0px 0px; padding: 0px; border: 0px; border-radius: 4px; background: transparent; color: rgb(187, 203, 212); font-size: 22px; line-height: 1; cursor: pointer; }
#suase-workshop .close-popover:hover { color: white; background: rgba(255, 255, 255, 0.07); }
#suase-workshop .popover-copy { margin: 0px 0px 10px; color: rgb(197, 210, 218); font-size: 12px; line-height: 1.5; }
#suase-workshop .process-tags { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 4px; margin: 0px 0px 12px; }
#suase-workshop .process-tags span { display: flex; align-items: center; justify-content: center; min-width: 0px; min-height: 22px; padding: 3px 4px; border: 1px solid rgba(140, 161, 173, 0.19); border-radius: 3px; color: rgb(169, 191, 204); font-size: 10px; line-height: 1.4; white-space: nowrap; }
#suase-workshop .process-tags span:last-child { grid-column: 1 / -1; }
#suase-workshop .popover-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(162, 182, 193, 0.15); padding-top: 10px; }
#suase-workshop .process-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 32px; font-size: 12px; font-weight: 600; text-decoration: none; color: rgb(255, 255, 255); white-space: nowrap; transition: color 220ms; }
#suase-workshop .process-link span { display: inline-block; margin-right: 3px; color: rgb(239, 170, 182); font-size: 18px; line-height: 1; transform: translate(0px, 0px); transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1), color 220ms; }
#suase-workshop .process-link:is(:hover, :focus-visible) { color: rgb(246, 202, 210); }
#suase-workshop .process-link:is(:hover, :focus-visible) span { transform: translate(4px, 0px); color: rgb(255, 255, 255); }
#suase-workshop[data-mobile="true"] .process-link { min-height: 44px; }
#suase-workshop .hotspot-connector { position: absolute; inset: 0px; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; opacity: 0; transition: opacity 160ms; }
#suase-workshop[data-popup="open"] .hotspot-connector { opacity: 1; transition-duration: 240ms; }
#suase-workshop .hotspot-connector path { stroke: rgb(216, 165, 178); stroke-width: 1; fill: none; opacity: 0.65; }
#suase-workshop .process-grid button[data-active="true"] { background: rgb(64, 94, 109); border-color: rgb(255, 255, 255); }
#suase-workshop[data-playing="false"] .hotpoint::after { animation-play-state: paused; }
#suase-workshop[data-mobile="true"] .process-popover { padding: 15px; }
@media (pointer: coarse) {
  #suase-workshop .hotpoint { width: 44px; height: 44px; }
}
@keyframes suase-ripple { 
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.58); }
  10% { opacity: 0.64; }
  65%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); }
}
@media (prefers-reduced-motion: reduce) {
  #suase-workshop *, #suase-workshop ::before, #suase-workshop ::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  #suase-workshop .process-link span { transform: none !important; }
}
#suase-workshop[lang="zh-CN"] { font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif; }
#suase-workshop[lang="zh-CN"] .brand-copy h1 { font-size: clamp(28px, 3cqw, 46px); line-height: 1.2; letter-spacing: 0.12em; }
#suase-workshop[lang="zh-CN"] .brand-copy p { letter-spacing: 0.08em; line-height: 1.5; }
#suase-workshop[lang="zh-CN"] .popover-header h2 { font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif; line-height: 1.5; }
#suase-workshop[lang="zh-CN"] .popover-copy { font-size: 13px; line-height: 1.7; }
#suase-workshop[lang="zh-CN"] .process-tags span { font-size: 11px; line-height: 14px; }
#suase-workshop[lang="zh-CN"] .process-link { font-size: 13px; letter-spacing: 0.04em; }
#suase-workshop[lang="zh-CN"] .process-grid button { font-size: 13px; }
#suase-workshop[lang="zh-CN"][data-mobile="true"] .brand-copy h1 { font-size: 32px; }
#suase-workshop[lang="zh-CN"][data-mobile="true"] .brand-copy p { font-size: 14px; }
#suase-workshop .hotpoint { width: 48px; height: 48px; background: radial-gradient(circle, transparent 12px, rgba(25, 54, 67, 0.72) 12px, rgba(25, 54, 67, 0.72) 13px, rgba(255, 255, 255, 0.94) 13px, rgba(255, 255, 255, 0.94) 14.5px, rgba(25, 54, 67, 0.533) 14.5px, rgba(25, 54, 67, 0.533) 15.5px, transparent 15.5px); transition: filter 0.18s; }
#suase-workshop .hotpoint::before { width: 10px; height: 10px; border: 1.5px solid rgb(255, 255, 255); background: rgb(209, 38, 66); box-shadow: rgba(24, 52, 65, 0.7) 0px 0px 0px 1px, rgba(11, 38, 59, 0.333) 0px 1px 4px; }
#suase-workshop .hotpoint::after { width: 30px; height: 30px; border: 1px solid rgb(255, 255, 255); animation: suase-discover-ripple 3.8s ease-out var(--pulse-delay,0s) infinite; }
#suase-workshop .hotpoint:hover, #suase-workshop .hotpoint:focus-visible { filter: drop-shadow(rgba(255, 255, 255, 0.6) 0px 0px 4px); }
#suase-workshop .hotpoint[data-active="true"]::before { background: rgb(255, 255, 255); border-color: rgb(209, 38, 66); box-shadow: rgba(209, 38, 66, 0.4) 0px 0px 0px 2px; }
#suase-workshop[data-playing="false"] .hotpoint::after { animation-play-state: running; }
#suase-workshop .workshop-interaction-hint { position: absolute; right: 4%; top: clamp(72px, 6cqw, 116px); z-index: 4; display: flex; align-items: center; gap: 8px; margin: 0px; padding: 0px; color: rgb(243, 247, 250); font-size: 13px; line-height: 1.5; letter-spacing: 0.03em; pointer-events: none; text-shadow: rgba(8, 26, 42, 0.8) 0px 1px 3px; }
#suase-workshop .workshop-interaction-hint::before { content: ""; width: 13px; height: 13px; border: 1px solid rgb(255, 255, 255); border-radius: 50%; background: radial-gradient(circle, rgb(220, 55, 80) 0px, rgb(220, 55, 80) 2px, transparent 3px); flex: 0 0 auto; }
#suase-workshop[data-mobile="true"] .workshop-interaction-hint { display: none; }
@keyframes suase-discover-ripple { 
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  12% { opacity: 0.5; }
  72%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
  #suase-workshop .hotpoint, #suase-workshop .hotpoint::after { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
}
#suase-workshop { display: block; text-align: left; }
#suase-workshop[data-full-bleed="true"] { width: var(--suase-viewport-width,100vw); max-width: none; left: 50%; transform: translateX(-50%); margin: 0px; border-radius: 0px; }
#suase-workshop .workshop-interaction-hint { top: calc(var(--workshop-nav-height,88px) + 12px); }
#suase-workshop .brand-copy p, #suase-workshop .popover-copy { padding: 0px; }
body.home #ajax-content-wrap > .container-wrap:has(#suase-workshop) { padding-top: 0px; }
#suaseModule { --ink: #1e3040; --muted: #687c8b; --line: #e0e6eb; --accent: #0488a4; --blue: #235daa; color-scheme: light; }
#suaseModule button, #suaseModule a, #suaseModule summary { -webkit-tap-highlight-color: transparent; }
#suaseModule button, #suaseModule summary { cursor: pointer; }
#suaseModule button { touch-action: manipulation; }
#suaseModule button:disabled { opacity: 0.4; cursor: default; }
#suaseModule button:focus-visible, #suaseModule a:focus-visible, #suaseModule input:focus-visible, #suaseModule summary:focus-visible { outline: rgb(19, 166, 192) solid 3px; outline-offset: 3px; }
#suaseModule { width: 100%; padding: 24px; display: grid; grid-template: "intro stage" "controls stage" 1fr "cta stage" / clamp(320px, 36%, 416px) minmax(0px, 1fr); gap: 16px 24px; min-height: 744px; box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 0px, rgba(0, 0, 0, 0.05) 0px 2px 7px, rgba(0, 0, 0, 0.06) 0px 12px 22px; border-radius: 20px; margin-top: calc(5vw); margin-bottom: calc(5vw); }
#suaseModule .card { background: rgb(247, 248, 250); border: 1px solid var(--line); border-radius: 16px; box-shadow: rgba(33, 60, 77, 0.024) 0px 3px 7px; }
#suaseModule .intro { grid-area: intro; padding: 26px 28px; }
#suaseModule .eyebrow { font-size: 10px; letter-spacing: 2px; font-weight: 700; color: rgb(4, 136, 164); line-height: 1.6; display: flex; align-items: center; gap: 8px; }
#suaseModule .eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgb(33, 182, 205); flex: 0 0 auto; }
#suaseModule h2 { margin: 16px 0px 13px; font-size: clamp(32px, 2.8vw, 38px); line-height: 1.06; letter-spacing: -1.2px; font-weight: 730; }
#suaseModule h2 span { color: rgb(134, 154, 168); }
#suaseModule .intro p { font-size: 12px; line-height: 1.65; color: var(--muted); margin: 0px 0px 19px; max-width: 350px; }
#suaseModule .specs { display: grid; grid-template-columns: 1.15fr 1.15fr 0.55fr; gap: 10px; border-top: 1px solid var(--line); padding-top: 15px; }
#suaseModule .specs dt { color: rgb(132, 150, 165); font-size: 9px; font-weight: 650; letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 5px; }
#suaseModule .specs dd { margin: 0px; font-size: 13px; font-weight: 650; white-space: nowrap; }
#suaseModule .specs dl { margin: 0px; }
#suaseModule .controls { grid-area: controls; padding: 18px 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
#suaseModule .section-label { font-size: 9px; letter-spacing: 1.6px; color: rgb(129, 148, 161); font-weight: 650; margin-bottom: 10px; }
#suaseModule .view-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
#suaseModule .view-grid button { border: 1px solid rgb(213, 223, 229); border-radius: 7px; background: rgba(255, 255, 255, 0.533); color: rgb(64, 92, 109); font-size: 11px; min-height: 40px; display: flex; align-items: center; gap: 9px; padding: 9px 11px; text-align: left; }
#suaseModule .view-grid button span { font-size: 9px; color: rgb(142, 161, 173); }
#suaseModule .view-grid button[aria-pressed="true"] { background: rgb(223, 237, 241); color: rgb(4, 108, 133); border-color: rgb(133, 182, 193); }
#suaseModule .motion { border-top: 1px solid var(--line); padding-top: 12px; }
#suaseModule .label { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; }
#suaseModule .label output { color: var(--accent); font-variant-numeric: tabular-nums; }
#suaseModule input[type="range"] { width: 100%; height: 20px; margin: 8px 0px 10px; accent-color: var(--accent); cursor: ew-resize; }
#suaseModule .primary { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0px; background: rgb(35, 60, 77); color: rgb(255, 255, 255); border-radius: 7px; min-height: 42px; padding: 11px 13px; font-size: 11px; font-weight: 650; }
#suaseModule .action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
#suaseModule .secondary { min-height: 40px; border: 1px solid rgb(204, 217, 225); background: transparent; border-radius: 7px; color: rgb(53, 83, 104); padding: 9px 6px; font-size: 11px; }
#suaseModule .motion-status { display: flex; justify-content: space-between; gap: 12px; font-size: 9px; line-height: 1.5; color: rgb(120, 142, 157); margin-top: 10px; }
#suaseModule .motion-status output { color: var(--accent); font-variant-numeric: tabular-nums; }
#suaseModule .footnote { font-size: 9px; line-height: 1.5; color: rgb(138, 155, 167); margin: 7px 0px 0px; }
#suaseModule .project-cta { grid-area: cta; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 80px; padding: 17px 25px; color: rgb(255, 255, 255); background: linear-gradient(110deg, rgb(7, 154, 185), rgb(36, 93, 174)); text-decoration: none; border: 1px solid rgba(88, 174, 197, 0.4); border-radius: 14px; box-shadow: rgba(8, 125, 179, 0.13) 0px 7px 18px; transition: background 0.2s, box-shadow 0.2s; }
#suaseModule .project-cta small { display: block; color: rgb(205, 238, 245); font-size: 9px; letter-spacing: 2px; font-weight: 650; margin-bottom: 6px; }
#suaseModule .project-cta strong { font-size: 19px; letter-spacing: 0.4px; font-weight: 700; }
#suaseModule .project-cta .arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(215, 245, 255, 0.36); display: grid; place-items: center; font-size: 23px; flex: 0 0 auto; transition: transform 0.2s; }
#suaseModule .project-cta:hover { box-shadow: rgba(8, 125, 179, 0.2) 0px 9px 24px; }
#suaseModule .project-cta:hover .arrow { transform: translateX(3px); }
#suaseModule .stage { grid-area: stage; position: relative; isolation: isolate; min-width: 0px; min-height: 660px; border: 1px solid rgb(219, 228, 236); border-radius: 16px; overflow: hidden; background: radial-gradient(at 45% 30%, rgb(245, 246, 248), rgb(223, 228, 233)); }
#suaseModule .stage[data-theme="dark"] { background: radial-gradient(at 45% 36%, rgb(41, 54, 68), rgb(16, 26, 36) 70%, rgb(11, 18, 27)); border-color: rgb(35, 52, 65); }
#suaseModule #canvasHost { position: absolute; inset: 0px; }
#suaseModule canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
#suaseModule #poster { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: contain; background: rgb(21, 34, 45); pointer-events: none; }
#suaseModule .stage.ready #poster { visibility: hidden; }
#suaseModule .stage-top { position: absolute; z-index: 3; left: 23px; right: 17px; top: 21px; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; pointer-events: none; }
#suaseModule .stage-top > * { pointer-events: auto; }
#suaseModule .viewtitle { font-size: 9px; line-height: 1.6; letter-spacing: 1.3px; font-weight: 650; color: rgb(88, 116, 131); }
#suaseModule #viewNote { margin-top: 5px; font-size: 11px; line-height: 1.55; color: rgb(112, 135, 148); max-width: 280px; }
#suaseModule .stage[data-theme="dark"] .viewtitle { color: rgb(190, 208, 220); }
#suaseModule .stage[data-theme="dark"] #viewNote { color: rgb(140, 165, 182); }
#suaseModule .stage-tools { display: flex; gap: 6px; flex: 0 0 auto; }
#suaseModule .tool, #suaseModule .settings summary { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(107, 135, 153, 0.3); border-radius: 50%; background: rgba(238, 244, 248, 0.867); color: rgb(52, 81, 101); font-size: 18px; list-style: none; }
#suaseModule .settings summary::-webkit-details-marker { display: none; }
#suaseModule .settings summary svg { width: 16px; height: 16px; }
#suaseModule .settings { position: relative; }
#suaseModule .settings-panel { position: absolute; right: 0px; top: 44px; width: 217px; background: rgb(248, 250, 252); border: 1px solid rgb(219, 229, 236); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 35px; padding: 17px; color: rgb(46, 75, 92); }
#suaseModule .settings-panel .settings-label { font-size: 10px; font-weight: 650; margin-bottom: 10px; }
#suaseModule .theme { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
#suaseModule .theme button, #suaseModule .finish button { border: 1px solid rgb(210, 224, 230); border-radius: 6px; background: transparent; color: rgb(82, 111, 128); font-size: 10px; min-height: 35px; padding: 7px 3px; }
#suaseModule .theme button[aria-pressed="true"], #suaseModule .finish button[aria-pressed="true"] { background: rgb(222, 237, 242); color: rgb(18, 103, 125); border-color: rgb(133, 184, 197); }
#suaseModule .toggle { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 10px; margin: 15px 0px; }
#suaseModule .switch { border: 0px; width: 35px; height: 21px; padding: 3px; background: rgb(185, 201, 212); border-radius: 20px; flex: 0 0 auto; }
#suaseModule .switch::after { content: ""; display: block; width: 15px; height: 15px; border-radius: 50%; background: white; transition: transform 0.2s; }
#suaseModule .switch[aria-checked="true"] { background: var(--accent); }
#suaseModule .switch[aria-checked="true"]::after { transform: translateX(14px); }
#suaseModule .finish { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
#suaseModule .reset { border: 0px; background: transparent; color: rgb(74, 106, 123); font-size: 11px; padding: 14px 0px 0px; }
#suaseModule .stage-bottom { position: absolute; z-index: 3; bottom: 20px; left: 23px; right: 19px; display: flex; justify-content: space-between; gap: 12px; align-items: center; pointer-events: none; }
#suaseModule .hint { font-size: 9px; line-height: 1.5; color: rgb(98, 128, 147); background: rgba(234, 240, 245, 0.66); border: 1px solid rgba(137, 159, 170, 0.125); backdrop-filter: blur(8px); padding: 10px 12px; border-radius: 24px; }
#suaseModule .stage[data-theme="dark"] .hint { background: rgba(29, 46, 59, 0.72); color: rgb(166, 191, 205); }
#suaseModule .zoom { display: flex; gap: 5px; pointer-events: auto; }
#suaseModule .zoom button { width: 33px; height: 33px; border-radius: 50%; border: 1px solid rgba(138, 161, 176, 0.3); background: rgba(230, 238, 242, 0.875); color: rgb(41, 77, 100); font-size: 19px; }
#suaseModule .status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#suaseModule #loadPanel { position: absolute; z-index: 4; left: 50%; top: 56%; transform: translate(-50%, -50%); border: 1px solid rgba(148, 174, 187, 0.333); background: rgba(19, 36, 45, 0.91); backdrop-filter: blur(12px); border-radius: 12px; padding: 20px; min-width: 235px; max-width: 90%; text-align: center; box-shadow: rgba(0, 0, 0, 0.133) 0px 12px 36px; }
#suaseModule #start { border: 1px solid rgba(71, 167, 186, 0.376); color: rgb(255, 255, 255); background: linear-gradient(110deg, rgb(11, 145, 172), rgb(33, 93, 158)); border-radius: 7px; padding: 13px 20px; font-size: 12px; font-weight: 650; width: 100%; white-space: nowrap; }
#suaseModule #loadText { font-size: 10px; color: rgb(174, 197, 209); line-height: 1.6; margin: 10px 0px 0px; }
#suaseModule .stage.ready #loadPanel { display: none; }
#suaseModule .stage:not(.ready) .stage-tools, #suaseModule .stage:not(.ready) .stage-bottom { visibility: hidden; }
#suaseModule .full-controls, #suaseModule .fullscreen-project { display: none; }
#suaseModule .stage:is(:fullscreen, body.expanded .stage) { border: 0px; border-radius: 0px; min-height: 0px; }
#suaseModule .stage:is(:fullscreen, body.expanded .stage) .full-controls { display: flex; position: absolute; z-index: 5; bottom: 76px; left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column; gap: 11px; max-width: 95%; width: max-content; }
#suaseModule .full-controls > div { display: flex; gap: 7px; padding: 8px; background: rgba(32, 48, 61, 0.867); backdrop-filter: blur(12px); border: 1px solid rgba(123, 148, 166, 0.314); border-radius: 11px; }
#suaseModule .full-controls button { background: rgb(51, 76, 93); color: rgb(233, 242, 247); border: 1px solid rgba(105, 138, 157, 0.333); border-radius: 6px; font-size: 12px; padding: 10px 14px; white-space: nowrap; }
#suaseModule .full-controls span { font-size: 11px; color: rgb(158, 181, 197); }
#suaseModule .stage:is(:fullscreen, body.expanded .stage) .fullscreen-project { display: block; position: absolute; right: 19px; top: 79px; z-index: 5; border: 1px solid rgb(87, 158, 180); background: rgb(32, 86, 124); color: rgb(239, 248, 255); text-decoration: none; padding: 11px 15px; border-radius: 7px; font-size: 11px; }
@media (min-width: 1100px) {
#suaseModule .view-grid { grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 5px; }
#suaseModule .view-grid button { display: block; text-align: center; padding: 8px 5px; font-size: 10px; min-height: 44px; }
#suaseModule .view-grid button span { display: none; }
}
@media (max-width: 1050px) {
#suaseModule { grid-template-columns: clamp(290px, 36%, 360px) minmax(0px, 1fr); gap: 16px 20px; }
#suaseModule .intro { padding: 24px; }
#suaseModule .controls { padding: 20px; }
#suaseModule .stage-top { left: 19px; right: 14px; }
#suaseModule .viewtitle { font-size: 8px; letter-spacing: 1px; }
#suaseModule #viewNote { font-size: 10px; }
#suaseModule .project-cta { padding: 17px 22px; }
}
@media (max-width: 899px) {
#suaseModule { padding: 18px; grid-template: "intro intro" "stage stage" "controls cta" / 1fr 1fr; gap: 16px; min-height: 0px; }
#suaseModule .intro { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; padding: 24px; }
#suaseModule .intro .eyebrow { grid-column: 1 / -1; }
#suaseModule .intro h2 { font-size: 32px; grid-row: 2 / 4; margin: 9px 0px 0px; }
#suaseModule .intro h2 br:first-child { display: none; }
#suaseModule .intro p { margin: 9px 0px 8px; font-size: 12px; }
#suaseModule .specs { padding-top: 11px; }
#suaseModule .specs dd { font-size: 12px; }
#suaseModule .stage { height: 430px; min-height: 430px; }
#suaseModule .project-cta { align-self: start; min-height: 86px; }
#suaseModule .controls { padding: 21px; }
#suaseModule .stage-tools .tool, #suaseModule .settings summary { width: 36px; height: 36px; }
#suaseModule .hint { font-size: 10px; }
#suaseModule .zoom button { width: 36px; height: 36px; }
}
@media (max-width: 560px) {
#suaseModule { padding: 12px; grid-template-columns: minmax(0px, 1fr); grid-template-areas: "intro" "stage" "controls" "cta"; gap: 12px; }
#suaseModule .intro { display: block; padding: 22px; }
#suaseModule .intro h2 { font-size: 30px; line-height: 1.07; margin: 13px 0px 12px; letter-spacing: -0.9px; }
#suaseModule .intro h2 br:first-child { display: none; }
#suaseModule .intro h2 span { display: block; }
#suaseModule .intro p { font-size: 11px; margin: 0px 0px 15px; }
#suaseModule .eyebrow { font-size: 8px; letter-spacing: 1.6px; }
#suaseModule .specs { padding-top: 13px; }
#suaseModule .specs dd { font-size: 12px; }
#suaseModule .stage { height: 380px; min-height: 380px; }
#suaseModule .stage-top { top: 16px; left: 17px; right: 13px; }
#suaseModule .viewtitle { font-size: 8px; letter-spacing: 0.6px; }
#suaseModule #viewNote { font-size: 10px; max-width: 205px; }
#suaseModule .stage-tools { gap: 5px; }
#suaseModule .tool, #suaseModule .settings summary { width: 33px !important; height: 33px !important; }
#suaseModule .controls { padding: 20px; }
#suaseModule .view-grid button { min-height: 43px; font-size: 11px; }
#suaseModule .primary, #suaseModule .secondary { min-height: 43px; font-size: 11px; }
#suaseModule .project-cta { padding: 17px 22px; min-height: 80px; }
#suaseModule .project-cta strong { font-size: 19px; }
#suaseModule .stage-bottom { left: 15px; right: 13px; bottom: 15px; gap: 8px; }
#suaseModule .hint { font-size: 8px; padding: 9px 10px; max-width: 210px; }
#suaseModule .zoom button { width: 31px; height: 31px; }
#suaseModule .settings-panel { width: 204px; }
#suaseModule .stage:is(:fullscreen, body.expanded .stage) .full-controls { bottom: 73px; width: 92%; }
#suaseModule .full-controls > div { flex-wrap: wrap; justify-content: center; }
#suaseModule .full-controls button { padding: 8px 10px; font-size: 11px; }
#suaseModule #loadPanel { min-width: 214px; padding: 17px; }
#suaseModule .stage:is(:fullscreen, body.expanded .stage) .fullscreen-project { top: 70px; }
}
body.expanded #suaseModule { display: block; padding: 0px; min-height: 0px; height: 100dvh; }
body.expanded #suaseModule > .intro, body.expanded #suaseModule > .controls, body.expanded #suaseModule > .project-cta { display: none; }
body.expanded #suaseModule .stage { width: 100%; height: 100dvh; min-height: 0px; }
#suaseModule .full-controls button[aria-pressed="true"] { background: rgb(53, 101, 122); border-color: rgb(134, 188, 203); color: rgb(255, 255, 255); }
@media (prefers-reduced-motion: reduce) {
#suaseModule * { scroll-behavior: auto !important; transition: none !important; }
}
#suaseModule .intro h2 { font-size: 32px; line-height: 1.3; letter-spacing: 0px; word-break: keep-all; }
#suaseModule .intro h2 br:first-child { display: initial; }
#suaseModule .intro h2 span { display: inline; }
#suaseModule .eyebrow { font-size: 11px; letter-spacing: 1.2px; }
#suaseModule .section-label { font-size: 10px; letter-spacing: 1px; }
#suaseModule .specs dt { font-size: 10px; letter-spacing: 0.4px; }
#suaseModule .project-cta small { font-size: 10px; letter-spacing: 1px; }
#suaseModule .project-cta strong { font-size: 21px; letter-spacing: 1px; }
#suaseModule .viewtitle { font-size: 10px; letter-spacing: 0.8px; }
#suaseModule #viewNote { font-size: 11px; }
#suaseModule .footnote, #suaseModule .motion-status { font-size: 10px; }
@media (max-width: 899px) {
#suaseModule .intro h2 { font-size: 30px; }
#suaseModule .intro .specs { align-self: center; }
#suaseModule .viewtitle { font-size: 10px; }
}
@media (max-width: 560px) {
#suaseModule .intro h2 { font-size: 29px; line-height: 1.32; margin: 13px 0px 16px; }
#suaseModule .eyebrow { font-size: 10px; letter-spacing: 1px; }
#suaseModule .project-cta strong { font-size: 21px; }
#suaseModule .viewtitle { font-size: 10px; }
#suaseModule .hint { font-size: 9px; }
#suaseModule #viewNote { font-size: 10px; max-width: 180px; }
}
/* SUASE mould readability fix, 2026-09-17. Scoped to the mould module only. */
#suaseModule{--ink:#132d43;--muted:#536b7d;--accent:#006e86;color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial,sans-serif}
#suaseModule .intro h2,#suaseModule .specs dd,#suaseModule .label{color:#132d43}
#suaseModule .intro h2 span{color:#245e7a}
#suaseModule .eyebrow{color:#006e86}
#suaseModule .specs dt,#suaseModule .section-label{color:#496176}
#suaseModule .motion-status{color:#405d72}
#suaseModule .footnote{color:#566b7d}
#suaseModule .label output,#suaseModule .motion-status output{color:#006e86}
#suaseModule .view-grid button{background:#fff;color:#25485e;border-color:#afc2ce;font-weight:550}
#suaseModule .view-grid button span{color:#566b7d}
#suaseModule .view-grid button[aria-pressed=true]{background:#d9edf3;color:#005d74;border-color:#52a0b5;font-weight:650}
#suaseModule .secondary{background:#fff;color:#25485e;border-color:#afc2ce;font-weight:550}
#suaseModule .view-grid button:not(:disabled):hover,#suaseModule .secondary:not(:disabled):hover{background:#e9f4f7;border-color:#538da3}
#suaseModule .primary{background:#203d50;color:#fff}
#suaseModule .primary:not(:disabled):hover{background:#153044}
#suaseModule .controls button:not(:disabled){opacity:1}