/* UIUT motion: reading cues, tactile controls, and accessible feedback. */
:root{--ease-ui:cubic-bezier(.22,1,.36,1)}
html{scrollbar-gutter:stable}
html.has-lightbox{overflow:hidden}
[hidden]{display:none!important}
.skip-link{position:fixed;top:10px;left:16px;z-index:120;padding:9px 18px;background:var(--lime);border:2px solid var(--ink);border-radius:99px;translate:0 -160%;font-weight:800;text-decoration:none}
.skip-link:focus{translate:0 0}
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--ink);outline-offset:4px;box-shadow:0 0 0 5px var(--pink)}
nav .brand{text-decoration:none;color:var(--ink)}
nav .links a[aria-current="location"]{background:var(--lime);color:var(--ink)}
.reading-progress{position:absolute;bottom:-1px;left:0;right:0;height:3px;overflow:hidden;pointer-events:none}
.reading-progress span{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--lime),var(--pink));transform:scaleX(0);transform-origin:left}
.nav-toggle{display:none;width:42px;height:38px;border:1.5px solid var(--ink);border-radius:99px;background:#fff;position:relative;cursor:pointer}
.nav-toggle span{position:absolute;left:12px;width:16px;height:2px;background:var(--ink);transition:transform .22s var(--ease-ui),top .22s var(--ease-ui)}
.nav-toggle span:first-child{top:13px}
.nav-toggle span:last-child{top:21px}
nav.is-open .nav-toggle span:first-child{top:17px;transform:rotate(45deg)}
nav.is-open .nav-toggle span:last-child{top:17px;transform:rotate(-45deg)}

/* Reveal uses translate so existing sticker rotations remain intact. */
.reveal,.reveal.in{opacity:1;transform:none;translate:0 0;transition:opacity .55s var(--ease-ui),translate .55s var(--ease-ui),box-shadow .25s,border-color .25s}
.motion-ready .reveal:not(.in){opacity:0;translate:0 18px}
.hero .slogan.reveal{transform:rotate(-2deg)}
.hero .slogan{transition:transform .3s var(--ease-ui),opacity .55s,translate .55s var(--ease-ui)}
.btn,.mini,.dl-btn,.tab,.sw,.floor-tape,.back-top{touch-action:manipulation;transition:transform .2s var(--ease-ui),translate .2s var(--ease-ui),background .2s,border-color .2s,box-shadow .2s,opacity .2s}
:where(.btn,.mini,.dl-btn,.tab,.sw,.floor-tape,.back-top):active{transform:scale(.97)}
.magnetic{translate:var(--mag-x,0px) var(--mag-y,0px)}
.is-starting{box-shadow:0 0 0 4px rgba(255,111,255,.45)!important}
.sw.is-copied{box-shadow:inset 0 0 0 2px var(--ink)}
.sw .copy{transition:background .2s,color .2s}
.sw.is-copied .copy{background:var(--ink);color:#fff}

/* Brand-house labels are the controls; the knowledge remains visible. */
.house{isolation:isolate}
/* Keep the four labels in one stacking context, above every structural border. */
.house>.floor.reveal,.house>.floor.reveal.in{opacity:1;transform:none;translate:none}
.motion-ready .house>.floor.reveal:not(.in){opacity:1;translate:none}
.house>.floor.reveal .body{translate:none;transition:opacity .45s var(--ease-ui),translate .45s var(--ease-ui),filter .28s}
.motion-ready .house>.floor.reveal:not(.in) .body{opacity:0;translate:0 10px}
.floor:hover{transform:none}
button.floor-tape{font:inherit;border:0;cursor:pointer;text-align:left}
button.floor-tape.ft4{border:1.5px solid var(--ink)}
.floor-tape[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px currentColor,0 5px 12px rgba(17,17,20,.18)}
.floor-tape[aria-pressed="true"]::after{content:"✓";position:absolute;top:5px;right:8px;font-size:11px;font-weight:900;pointer-events:none}
.floor .body{transition:opacity .28s,filter .28s}
.house.has-focus>.floor:not(.is-focused) .body{filter:saturate(.5)}
.house>.floor.is-focused .body{opacity:1}
.house>.floor.is-focused{box-shadow:inset 0 0 0 2px var(--pink),0 7px 18px rgba(17,17,20,.12)}
.house>.floor.f1.is-focused{box-shadow:none}
.house-help{font-size:10.5px;font-weight:600;color:var(--mut);margin-left:10px;white-space:nowrap}
.house-note{display:flex;justify-content:space-between;align-items:center;gap:10px}
button.floor-tape:active{transform:rotate(0deg) scale(.97)!important}
.card:hover{transform:none}
@media(min-width:961px){
  #house{padding:16px 0 12px}
  #house .house{gap:18px}
  #house .house>.floor.f3{padding-top:34px}
  #house .house>.floor.f4{padding-top:26px}
  #house .house-note{margin-top:6px}
}

/* Native details keeps its semantics; content and following cards use FLIP. */
.step>summary{position:relative}
.step-label{transition:background .22s,box-shadow .22s,transform .22s var(--ease-ui)}
.step-indicator{position:relative;width:25px;height:25px;flex:none;align-self:center;margin-left:0;border:1.5px solid var(--ink);border-radius:50%;background:var(--lime);transition:background .22s,transform .22s var(--ease-ui)}
.step-indicator::before,.step-indicator::after{content:"";position:absolute;top:10px;left:6px;width:10px;height:2px;background:var(--ink);transition:transform .22s var(--ease-ui)}
.step-indicator::after{transform:rotate(90deg)}
.step[open]:not(.is-closing) .step-indicator{background:var(--pink)}
.step[open]:not(.is-closing) .step-indicator::after{transform:rotate(0)}
.step.no-hint .step-indicator{margin-left:auto}
.step[open] .step-indicator{margin-left:auto}
.pane{animation:none}
.tab[aria-selected="true"]{box-shadow:0 3px 0 rgba(17,17,20,.15)}

/* Image controls use a real button; MODEL links remain separate. */
.zoom-trigger{display:block;width:100%;padding:0;border:0;background:transparent;position:relative;overflow:hidden;cursor:zoom-in;color:var(--ink)}
.zoom-trigger img{transition:transform .4s var(--ease-ui);width:100%}
.zoom-trigger::after{content:"＋ 放大查看";position:absolute;right:12px;bottom:12px;padding:4px 11px;border:1.5px solid var(--ink);border-radius:99px;background:var(--lime);font-size:11px;font-weight:800;opacity:0;translate:0 5px;transition:opacity .2s,translate .2s;pointer-events:none}
.zoom-trigger:focus-visible::after{opacity:1;translate:0 0}
.model-tag{transition:transform .3s var(--ease-ui),box-shadow .3s}

.back-top{position:fixed;right:22px;bottom:22px;z-index:60;width:43px;height:43px;background:var(--lime);color:var(--ink);border:1.5px solid var(--ink);border-radius:50%;font-size:21px;font-weight:800;cursor:pointer;opacity:0;visibility:hidden;translate:0 12px;box-shadow:0 4px 12px rgba(17,17,20,.12)}
.back-top.is-visible{opacity:1;visibility:visible;translate:0 0}
.toast{position:fixed;bottom:24px;left:50%;translate:-50% 12px;z-index:115;padding:10px 19px;max-width:min(520px,calc(100vw - 100px));background:var(--ink);color:#fff;border:1.5px solid var(--lime);border-radius:99px;font-size:13px;font-weight:600;line-height:1.5;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,translate .2s,visibility .2s}
.toast.is-visible{opacity:1;visibility:visible;translate:-50% 0}

/* Dialog controls, loading feedback, and shared-image transitions. */
#lb{background:rgba(12,12,16,.94);padding:58px 65px 22px;gap:12px}
#lb .frame{position:relative;background:transparent;max-width:min(1100px,86vw);max-height:76vh;overflow:auto;touch-action:pan-y pinch-zoom}
#lb .frame img{max-width:min(1100px,86vw);max-height:76vh;width:auto;object-fit:contain;background:#fff;transform-origin:center}
#lb.is-loading .frame img{opacity:0}
#lb .lb-status{display:none;min-width:200px;min-height:100px;align-items:center;justify-content:center;color:#fff;font-size:14px}
#lb.is-loading .lb-status,#lb.has-error .lb-status{display:flex}
#lb.has-error .frame img{display:none}
#lb .x{background:var(--lime);color:var(--ink);border:1.5px solid var(--ink);border-radius:50%;width:38px;height:38px;font-size:25px;line-height:1;cursor:pointer;opacity:1;top:16px;right:20px;display:flex;align-items:center;justify-content:center}
.lb-arrow{position:absolute;top:50%;translate:0 -50%;width:38px;height:38px;border:1.5px solid rgba(255,255,255,.6);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:22px;cursor:pointer;transition:background .2s,transform .2s}
.lb-prev{left:16px}.lb-next{right:16px}
.lb-footer{text-align:center;max-width:900px;color:#fff}
#lb .cap{padding:0;font-size:13px}
.lb-count,.lb-hint{font-size:11px;opacity:.65;margin-top:4px}
#lb :focus-visible{outline-color:var(--lime);box-shadow:none}

@media(hover:hover) and (pointer:fine){
  .hero .slogan.reveal:hover{transform:rotate(0deg)}
  .floor-tape:hover{transform:rotate(0deg) translateY(-2px)!important;box-shadow:0 7px 15px rgba(17,17,20,.2)}
  .step>summary:hover .step-label{transform:translateY(-2px);box-shadow:0 7px 16px rgba(17,17,20,.17)}
  .zoom-trigger:hover img{transform:scale(1.025)}
  .zoom-trigger:hover::after{opacity:1;translate:0 0}
  .model-tag:hover{transform:rotate(0deg) translateY(-3px);box-shadow:0 10px 22px rgba(17,17,20,.18)}
  .lb-arrow:hover{background:var(--pink);color:var(--ink)}
  .back-top:hover{background:var(--pink);transform:translateY(-2px)}
}
@media(max-width:760px){
  nav .wrap{gap:12px;justify-content:space-between}
  .nav-toggle{display:block;flex:none}
  nav .links{display:none;position:absolute;left:16px;right:16px;top:72px;padding:12px;margin:0;grid-template-columns:1fr 1fr;gap:6px;background:#fff;border:1.5px solid var(--ink);box-shadow:0 10px 24px rgba(17,17,20,.14);border-radius:16px}
  nav.is-open .links{display:grid;animation:menu-in .22s var(--ease-ui)}
  nav .links a{padding:10px 12px;font-size:13px}
  nav .links .dl{grid-column:1/-1;text-align:center}
  .step .hint{display:none}
  .step-indicator{margin-left:auto}
  .house-help{display:block;margin:4px 0 0;white-space:normal}
  .house-note{display:block}
  .zoom-trigger::after{opacity:1;translate:0 0;font-size:10px;padding:3px 9px}
  .toast{bottom:20px;font-size:12px}
  .back-top{right:14px;bottom:18px;width:38px;height:38px}
  #lb{padding:64px 12px 22px}
  #lb .frame,#lb .frame img{max-width:94vw;max-height:70vh}
  .lb-arrow{top:auto;bottom:20px;translate:0 0;width:34px;height:34px}
  .lb-footer{max-width:calc(100vw - 100px)}
  .lb-hint{display:none}
}
@keyframes menu-in{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
@media(hover:none),(pointer:coarse){
  .sku:hover,.card:hover,.btn.dark:hover,.sw:hover{transform:none}
  .magnetic{translate:0 0}
  #apps{background-attachment:scroll!important}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .motion-ready .reveal:not(.in){opacity:1;translate:0 0}
  .motion-ready .house>.floor.reveal:not(.in) .body{opacity:1;translate:none}
  .magnetic{translate:0 0!important}
  .zoom-trigger:hover img{transform:none}
  .floor-tape:hover{transform:rotate(-1.5deg)!important}
  .sku:hover,.card:hover,.btn.dark:hover,.sw:hover{transform:none}
  .model-tag:hover{transform:rotate(3deg)}
  .hero .slogan.reveal:hover{transform:rotate(-2deg)}
  .step>summary:hover .step-label,.back-top:hover{transform:none}
  #apps{background-attachment:scroll!important}
  .hero .blob{translate:0 0!important}
}