.framing-entry-page {
  --entry-glass: rgba(245, 247, 246, .52);
  --entry-glass-strong: rgba(250, 251, 249, .66);
  --entry-glass-line: rgba(218, 226, 224, .9);
  --entry-glass-shadow: 0 14px 38px rgba(62, 51, 40, .1);
  --entry-glass-blur: blur(22px) saturate(1.1);
}

.framing-entry-wall {
  background: #e9e6df url('https://yizhuangbiao.com/device-tests/release-85/framing/assets/scene/owner-ai-white-wall-20260903/white-wall-real-texture-v2.png') center / cover no-repeat;
  overflow:hidden;
  isolation:isolate;
}

.framing-entry-scene-image {
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
}
.framing-entry-scene-image[hidden] { display:none; }
/* Keep the entire scene in one source-sized coordinate space: photo, frame,
   illumination and export all share this aspect ratio, without stretching. */
.framing-entry-page[data-scene-full-view="true"]{height:auto;min-height:0;aspect-ratio:var(--scene-source-aspect)}
.framing-entry-scene-foreground{position:absolute;inset:0;z-index:3;width:100%;height:100%;display:block;object-fit:cover;object-position:center;pointer-events:none}
.framing-entry-scene-foreground[hidden]{display:none}
.scene-foreground-clip-defs{position:absolute;inset:0;width:0;height:0;pointer-events:none}
.framing-scene-scope{position:absolute;inset:0;z-index:auto;overflow:hidden;isolation:auto}
.framing-entry-wall{z-index:0}
.framing-entry-page[data-wall-version="v1"] .framing-entry-wall {
  background-image: url('https://yizhuangbiao.com/device-tests/release-85/framing/assets/scene/owner-ai-white-wall-20260903/white-wall-neutral-v1.png');
}

.framing-entry-wall::after { display: none; }


.framing-entry-head a,
.framing-entry-import,
.framing-entry-dock,
.framing-entry-panel {
  border-color: var(--entry-glass-line);
  background: var(--entry-glass);
  box-shadow: var(--entry-glass-shadow);
  -webkit-backdrop-filter: var(--entry-glass-blur);
  backdrop-filter: var(--entry-glass-blur);
}

.framing-entry-import:active,
.framing-entry-dock button:active,
.framing-entry-panel button:active { background-color: rgba(255, 251, 244, .48); }

.framing-entry-dock button[aria-pressed="true"] {
  color: #a2532e;
  background: var(--entry-glass-strong);
}

.framing-entry-dock button:disabled {
  color: rgba(78, 71, 63, .38);
  background: rgba(249, 246, 239, .2);
}

.framing-entry-candidate-B {
  --entry-glass: rgba(247, 243, 237, .54);
  --entry-glass-strong: rgba(252, 248, 242, .68);
  --entry-glass-line: rgba(229, 223, 214, .92);
}

.framing-entry-candidate-C {
  --entry-glass: rgba(247, 244, 237, .66);
  --entry-glass-strong: rgba(255, 252, 246, .72);
  --entry-glass-shadow: 0 5px 18px rgba(62, 51, 40, .05);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .framing-entry-head a,
  .framing-entry-import,
  .framing-entry-dock,
  .framing-entry-panel { background: rgba(245, 241, 233, .9); }

  .framing-entry-candidate-B .framing-entry-dock,
  .framing-entry-candidate-B .framing-entry-panel { background: rgba(220, 241, 234, .92); }
}

@media (prefers-reduced-motion: reduce) {
  .framing-entry-page { animation: none; }
  .framing-entry-panel { transition: none; }
  .framing-entry-import:active { transform: none; }
}

/* Owner revision: every primary and secondary control owns its glass surface. */
.framing-entry-dock {
  padding: 0;
  gap: clamp(5px, 1.8vw, 8px);
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.framing-entry-dock button {
  flex: 0 1 64px;
  min-width: 56px;
  max-width: 64px;
  min-height: 78px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  display: grid;
  grid-template-rows: 58px 16px;
  justify-items: center;
  align-content: start;
  gap: 4px;
  overflow: visible;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.framing-entry-icon-block {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid var(--entry-glass-line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.52), rgba(230,235,233,.34));
  box-shadow: inset 0 1px rgba(255,255,255,.9), inset 0 -9px 20px rgba(89,98,96,.045), 0 8px 21px rgba(61,68,66,.095);
  -webkit-backdrop-filter: var(--entry-glass-blur);
  backdrop-filter: var(--entry-glass-blur);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.framing-entry-icon-block svg { width: 44px; height: 44px; overflow: visible;opacity:.6;filter:saturate(.78) brightness(1.05); }
.framing-entry-icon-block .icon-back { fill: #596260; filter: drop-shadow(0 2px 1px rgba(39,45,43,.2)); }
.framing-entry-icon-block .icon-mid { fill: #aeb8b5; }
.framing-entry-icon-block .icon-face { fill: #eeeae2; filter: drop-shadow(0 1px 1px rgba(49,52,50,.16)); }
.framing-entry-icon-block .icon-cut { fill: #7fa9a2; }
.framing-entry-icon-block .icon-glint { fill: none; stroke: rgba(255,255,255,.88); stroke-width: 1.1; stroke-linecap: round; }
.framing-entry-icon-block .icon-glint-fill { fill: #f4d5a6; filter: drop-shadow(0 0 3px rgba(218,153,68,.36)); }
.framing-entry-dock button[data-framing-tab="frame"] .icon-back { fill:#596260; }
.framing-entry-dock button[data-framing-tab="frame"] .icon-mid { fill:#9b7456; }
.framing-entry-dock button[data-framing-tab="mat"] .icon-back { fill:#aebdc0; }
.framing-entry-dock button[data-framing-tab="mat"] .icon-mid { fill:#d8ccb8; }
.framing-entry-dock button[data-framing-tab="mat"] .icon-face { fill:#fff7e9; }
.framing-entry-dock button[data-framing-tab="background"] .icon-back { fill:#596260; }
.framing-entry-dock button[data-framing-tab="background"] .icon-mid { fill:#7fa9a2; }
.framing-entry-dock button[data-framing-tab="background"] .icon-face { fill:#dce5e2; }
.framing-entry-dock button[data-framing-tab="scene"] .icon-back { fill:#596260; }
.framing-entry-dock button[data-framing-tab="scene"] .icon-mid { fill:#93aaa4; }
.framing-entry-dock button[data-framing-tab="scene"] .icon-face { fill:#e9e8df; }
.framing-entry-tab-label { color: #51483f; font-size: 11px; font-weight: 560; line-height: 16px; letter-spacing: .05em; text-shadow: 0 1px 5px rgba(255,255,255,.72); }

.framing-entry-dock button[aria-pressed="true"] { background: none; box-shadow: none; }
.framing-entry-dock button[aria-pressed="true"] .framing-entry-icon-block {
  border-color: rgba(127, 169, 162, .82);
  transform: translateY(-2px);
  box-shadow: inset 0 1px rgba(255,255,255,.96), inset 0 -3px rgba(200,137,88,.32), 0 8px 24px rgba(79,92,88,.18);
}
.framing-entry-dock button[aria-pressed="true"] .framing-entry-tab-label { color: #98461f; }

.framing-entry-panel,
.framing-entry-candidate-B .framing-entry-panel,
.framing-entry-candidate-C .framing-entry-panel {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.framing-entry-panel header {
  min-height: 62px;
  padding: 9px 10px 9px 14px;
  border: 1px solid var(--entry-glass-line);
  border-radius: 21px;
  background: var(--entry-glass);
  box-shadow: 0 10px 28px rgba(62, 51, 40, .09);
  -webkit-backdrop-filter: var(--entry-glass-blur);
  backdrop-filter: var(--entry-glass-blur);
}

.framing-entry-options { align-items: stretch; }

.framing-entry-options button {
  min-height: 56px;
  border: 1px solid var(--entry-glass-line);
  background: var(--entry-glass);
  box-shadow: 0 8px 22px rgba(62, 51, 40, .07);
  -webkit-backdrop-filter: var(--entry-glass-blur);
  backdrop-filter: var(--entry-glass-blur);
}

.framing-entry-candidate-B .framing-entry-dock,
.framing-entry-candidate-C .framing-entry-dock { background: none; box-shadow: none; }
.framing-entry-candidate-B .framing-entry-icon-block,
.framing-entry-candidate-B .framing-entry-options button,
.framing-entry-candidate-B .framing-entry-panel header { background: rgba(247, 243, 237, .74); }
.framing-entry-candidate-B .framing-entry-icon-block { border-color:var(--entry-glass-line);background:linear-gradient(145deg,rgba(255,253,249,.76),var(--entry-glass));box-shadow:inset 0 1px rgba(255,255,255,.96),inset 0 -10px 20px rgba(117,94,73,.07),0 9px 24px rgba(74,62,50,.13) }
.framing-entry-candidate-B .framing-entry-icon-block .icon-back { fill:#5f625e; }
.framing-entry-candidate-B .framing-entry-icon-block .icon-mid { fill:#aaa59c; }
.framing-entry-candidate-B .framing-entry-icon-block .icon-face { fill:#f0eade; }
.framing-entry-candidate-B .framing-entry-icon-block .icon-cut { fill:#8b9d98; }
.framing-entry-candidate-B .framing-entry-dock button[data-framing-tab="frame"] .icon-mid { fill:#9b7456; }
.framing-entry-candidate-B .framing-entry-dock button[data-framing-tab="scene"] .icon-glint-fill { fill:#c88958; }
.framing-entry-candidate-B .framing-entry-tab-label { color:#3f4944; text-shadow:0 1px 6px rgba(255,255,255,.84); }
.framing-entry-candidate-B .framing-entry-panel { color:#38443f; }
.framing-entry-candidate-B .framing-entry-panel header small { color:#6d8279; }
.framing-entry-candidate-B .framing-entry-panel header button { color:#4e6259;background:rgba(255,255,255,.35); }
.framing-entry-candidate-B .framing-entry-options button { color:#46584f; }
.framing-entry-candidate-B .framing-entry-options button[aria-pressed="true"] { color:#805035;background:rgba(250,247,238,.78); }
.framing-entry-candidate-B .framing-entry-dock button[aria-pressed="true"] .framing-entry-icon-block { border-color:rgba(199,95,39,.68);box-shadow:inset 0 1px rgba(255,255,255,.28),inset 0 -3px rgba(214,106,47,.42),0 9px 26px rgba(181,84,36,.26) }
.framing-entry-candidate-C .framing-entry-dock { left: 14px; right: 14px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 76px; border: 0; }
.framing-entry-candidate-C .framing-entry-dock button[aria-pressed="true"] { border-radius: 18px; background: rgba(255, 249, 241, .72); box-shadow: inset 0 -2px rgba(184, 86, 34, .45); }

@media (max-height:700px) {
  .framing-entry-dock { height:76px; }
  .framing-entry-dock button { min-height:72px;grid-template-rows:54px 14px;gap:2px; }
  .framing-entry-icon-block { width:54px;height:54px;border-radius:17px; }
  .framing-entry-icon-block svg { width:40px;height:40px; }
  .framing-entry-tab-label { font-size:10px;line-height:14px; }
}

/* Owner-window gate: dynamic viewport sizing and usable overflow fallback. */
html,body { min-height:100%;overflow-x:hidden;overflow-y:auto; }
#app { height:100dvh;min-height:700px;overflow:visible; }
.home-study,.framing-entry-page { height:100dvh;min-height:700px; }

@media (max-width:330px) {
  .framing-entry-dock { left:8px;right:8px;gap:2px; }
  .framing-entry-dock button { flex-basis:54px;min-width:54px;max-width:58px;grid-template-rows:54px 15px;min-height:73px;gap:3px; }
  .framing-entry-icon-block { width:54px;height:54px;border-radius:17px; }
  .framing-entry-icon-block svg { width:40px;height:40px; }
  .framing-entry-tab-label { font-size:10px;line-height:15px; }
}

@media (max-height:800px) {
  .framing-entry-page { --entry-safe-top:60px;--entry-dock-reserve:96px; }
  .framing-entry-head { top:6px; }
  .framing-entry-empty { gap:10px; }
  .framing-entry-panel { bottom:calc(88px + env(safe-area-inset-bottom)); }
  .home-a-final .home-brand { top:10px; }
  .home-a-final .home-copy { top:66px; }
  .home-a-final .home-frame-stage { top:42%;width:clamp(190px,64vw,230px);height:290px; }
  .home-a-final .home-carousel-dots { top:auto;bottom:118px; }
  .home-a-final .home-asset-note { top:auto;bottom:103px; }
  .home-a-final .home-cta { bottom:42px;height:50px; }
}

body.evidence-320 { min-width:320px;min-height:700px;overflow:visible; }
body.evidence-320 #app,body.evidence-320 .framing-entry-page,body.evidence-320 .home-study { width:320px;height:700px;min-height:700px;margin:0; }
body.evidence-319{width:319px;min-width:319px;min-height:785px;overflow:visible}body.evidence-319 #app,body.evidence-319 .framing-entry-page{width:319px;height:785px;min-height:785px;margin:0}

/* Global actions: two circles at each side, with a deliberately empty centre. */
.framing-global-actions {
  position:absolute;z-index:5;left:12px;right:12px;top:58px;
  display:grid;grid-template-columns:44px 44px 1fr 44px 44px;gap:6px;
  pointer-events:none;
}
.framing-global-actions button {
  width:44px;height:44px;padding:0;border:1px solid rgba(218,226,224,.9);border-radius:50%;
  color:#596260;background:rgba(245,247,246,.48);
  box-shadow:inset 0 1px rgba(255,255,255,.96),inset 0 -7px 14px rgba(89,98,96,.06),0 7px 20px rgba(61,68,66,.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.05);backdrop-filter:blur(18px) saturate(1.05);
  display:grid;place-items:center;pointer-events:auto;
}
.framing-global-actions button:nth-child(3) { grid-column:4; }
.framing-global-actions button[aria-pressed="true"] { border-color:rgba(127,169,162,.8);box-shadow:inset 0 1px rgba(255,255,255,.98),inset 0 -2px rgba(200,137,88,.3),0 7px 22px rgba(79,92,88,.18); }
.framing-global-actions svg { width:29px;height:29px;opacity:1;filter:none;fill:none; }

/* Candidate E: Apple-like volume without copying any third-party glyph. */
.framing-entry-candidate-E .framing-entry-icon-block{border-color:rgba(255,255,255,.86);border-radius:20px;background:linear-gradient(155deg,rgba(255,255,255,.94) 0%,rgba(236,239,237,.82) 53%,rgba(202,208,205,.72) 100%);box-shadow:inset 0 2px 2px rgba(255,255,255,.98),inset 0 -8px 14px rgba(73,83,79,.09),0 8px 18px rgba(55,64,61,.15)}
.framing-entry-candidate-E .framing-entry-icon-block svg{width:47px;height:47px;opacity:.94;filter:saturate(.94) brightness(1.03) drop-shadow(0 2px 1px rgba(43,50,48,.16))}
.framing-entry-candidate-E .icon-back{fill:#4f6868}.framing-entry-candidate-E .icon-mid{fill:#7faeaa}.framing-entry-candidate-E .icon-face{fill:#e8f0ec}.framing-entry-candidate-E .icon-cut{fill:#d29152}
.framing-entry-candidate-E button[data-framing-tab="style"] .icon-back{fill:#46686c}.framing-entry-candidate-E button[data-framing-tab="style"] .icon-mid{fill:#78a7a6}.framing-entry-candidate-E button[data-framing-tab="style"] .icon-face{fill:#dce9e4}.framing-entry-candidate-E button[data-framing-tab="style"] .icon-cut{fill:#d18b50}
.framing-entry-candidate-E button[data-framing-tab="frame"] .icon-back{fill:#5a4638}.framing-entry-candidate-E button[data-framing-tab="frame"] .icon-mid{fill:#a66f43}.framing-entry-candidate-E button[data-framing-tab="frame"] .icon-face{fill:#d9a066}
.framing-entry-candidate-E button[data-framing-tab="mat"] .icon-back{fill:#60787c}.framing-entry-candidate-E button[data-framing-tab="mat"] .icon-mid{fill:#9bb8b5}.framing-entry-candidate-E button[data-framing-tab="mat"] .icon-face{fill:#f4ead8}
.framing-entry-candidate-E button[data-framing-tab="background"] .icon-back{fill:#496b75}.framing-entry-candidate-E button[data-framing-tab="background"] .icon-mid{fill:#72a9ae}.framing-entry-candidate-E button[data-framing-tab="background"] .icon-face{fill:#d3e3df}.framing-entry-candidate-E button[data-framing-tab="background"] .icon-glint-fill{fill:#e3a257}
.framing-entry-candidate-E button[data-framing-tab="scene"] .icon-back{fill:#506861}.framing-entry-candidate-E button[data-framing-tab="scene"] .icon-mid{fill:#78a296}.framing-entry-candidate-E button[data-framing-tab="scene"] .icon-face{fill:#d7e3dc}.framing-entry-candidate-E button[data-framing-tab="scene"] .icon-cut{fill:#8d684b}
.framing-entry-top-icons-outline .outline-glyph{fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 .35px .3px rgba(81,76,70,.16))}

/* Context panels stay spatially attached to their trigger and overlay the canvas. */
.framing-entry-panel,
.framing-global-panel {
  position:absolute;z-index:9;
  left:var(--context-left,12px);right:auto;top:var(--context-top,110px);bottom:auto;
  width:var(--context-width,238px);max-height:min(310px,calc(100% - 24px));overflow:auto;
  padding:0;border:0;background:none;box-shadow:none;
  opacity:0;visibility:hidden;transform:translateX(-6px) scale(.985);transform-origin:left center;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.framing-entry-panel[data-side="left"],.framing-global-panel[data-side="left"] { transform:translateX(6px) scale(.985);transform-origin:right center; }
.framing-entry-panel[aria-hidden="false"],.framing-global-panel[aria-hidden="false"] { opacity:1;visibility:visible;transform:none; }
.framing-entry-panel::before,.framing-global-panel::before {
  content:"";position:absolute;z-index:2;left:-5px;top:24px;width:10px;height:10px;
  border-left:1px solid var(--entry-glass-line);border-bottom:1px solid var(--entry-glass-line);
  background:rgba(247,243,237,.82);transform:rotate(45deg);backdrop-filter:var(--entry-glass-blur);
}
.framing-entry-panel[data-side="left"]::before,.framing-global-panel[data-side="left"]::before { left:auto;right:-5px;transform:rotate(225deg); }
.framing-entry-panel header,.framing-global-panel header { min-height:54px;padding:7px 8px 7px 13px;border-radius:18px; }
.framing-entry-panel header span,.framing-global-panel header span { display:grid;gap:1px; }
.framing-entry-panel header small,.framing-global-panel header small { font-size:10px;opacity:.66; }
.framing-entry-panel header button,.framing-global-panel header button { width:44px;height:44px;flex:0 0 44px; }
.framing-entry-options,.framing-global-panel>div { display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px; }
.framing-entry-options button,.framing-global-panel>div button { min-width:0;min-height:48px;padding:7px 8px;border-radius:15px; }
.framing-entry-options button span,.framing-global-panel>div button span { overflow-wrap:anywhere; }

@media (max-width:330px) {
  .framing-entry-panel,.framing-global-panel { width:min(218px,calc(100% - 24px)); }
}

.framing-global-panel {
  position:absolute;z-index:6;left:16px;right:16px;top:108px;padding:0;
  opacity:0;visibility:hidden;transform:translateY(-7px) scale(.985);transform-origin:top center;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.framing-global-panel[aria-hidden="false"] { opacity:1;visibility:visible;transform:none; }
.framing-global-panel header { min-height:54px;padding:7px 8px 7px 13px;border:1px solid var(--entry-glass-line);border-radius:19px;background:var(--entry-glass);box-shadow:0 9px 25px rgba(61,68,66,.1);backdrop-filter:var(--entry-glass-blur);display:flex;align-items:center;justify-content:space-between; }
.framing-global-panel header span { display:grid;gap:2px; }
.framing-global-panel header small { color:#7a817e;font-size:8px;letter-spacing:.1em; }
.framing-global-panel header strong { color:#3f4744;font:500 15px/1.2 "Songti SC",serif;letter-spacing:.08em; }
.framing-global-panel header button { width:44px;height:44px;border:0;border-radius:14px;color:#596260;background:rgba(255,255,255,.32);font-size:20px; }
.framing-global-panel>div { display:flex;gap:7px;margin-top:7px; }
.framing-global-panel>div button { flex:1;min-height:44px;border:1px solid var(--entry-glass-line);border-radius:15px;color:#505956;background:var(--entry-glass);box-shadow:0 7px 18px rgba(61,68,66,.08);backdrop-filter:var(--entry-glass-blur); }

@media (max-height:800px) {
  .framing-global-actions { top:52px; }
  .framing-global-panel { top:100px; }
}

@media (prefers-reduced-motion:reduce) { .framing-global-panel { transition:none; } }

/* Bottom business tabs expand inside the dock, always from the active tab to the right. */
.framing-entry-page.framing-panel-open .framing-entry-dock {
  justify-content:flex-start;align-items:center;gap:8px;padding:4px 10px;height:82px;
}
.framing-entry-page.framing-panel-open .framing-entry-dock>[data-framing-tab] { display:none; }
.framing-entry-page.framing-panel-open .framing-entry-dock>[data-framing-tab][aria-pressed="true"] {
  display:grid;flex:0 0 58px;order:0;
}
.framing-entry-page .framing-entry-dock>.framing-entry-panel,
.framing-entry-page .framing-entry-dock>.framing-entry-panel[data-side="dock-inline-right"] {
  position:relative;z-index:1;order:1;left:auto;right:auto;top:auto;bottom:auto;
  width:auto;min-width:0;max-width:none;max-height:74px;flex:1;overflow:visible;
  border-radius:0;clip-path:none;mask-image:none;-webkit-mask-image:none;
  display:flex;align-items:center;gap:6px;padding:0;
  transform:translateX(-8px);transform-origin:left center;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.framing-entry-page .framing-entry-dock>.framing-entry-panel[aria-hidden="false"] { transform:none; }
.framing-entry-page .framing-entry-dock>.framing-entry-panel::before { display:none; }
.framing-entry-page .framing-entry-dock>.framing-entry-panel header {
  display:none;
}
.framing-entry-page .framing-entry-dock>.framing-entry-panel header span { display:none; }
.framing-entry-page .framing-entry-dock>.framing-entry-panel header button {
  width:44px;height:44px;border-radius:14px;border:1px solid var(--entry-glass-line);background:var(--entry-glass);
}
.framing-entry-page .framing-entry-dock>.framing-entry-panel .framing-entry-options {
  flex:1;min-width:0;display:flex;align-items:center;gap:7px;margin:0;overflow-x:auto;overflow-y:hidden;
  padding-right:12px;scroll-padding-right:12px;scroll-snap-type:x proximity;scrollbar-width:none;
  overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;
}
.framing-entry-page .framing-entry-dock>.framing-entry-panel .framing-entry-options::-webkit-scrollbar { display:none; }
.framing-entry-page .framing-entry-dock>.framing-entry-panel .framing-entry-options button {
  flex:0 0 auto;min-width:72px;min-height:44px;max-width:112px;padding:6px 9px;scroll-snap-align:start;
}

/* Owner review gate: one 58px visual tile plus an external label on Style first. */
.framing-entry-page[data-active-tab="style"] .framing-entry-dock { --tab-size:58px;--tab-label-height:14px;gap:7px;height:84px;padding:4px 8px; }
.framing-entry-page[data-active-tab="style"] .framing-entry-dock>.framing-entry-panel { max-height:75px; }
.framing-entry-page[data-active-tab="style"] .framing-entry-dock .framing-tab-button {
  box-sizing:border-box;flex:0 0 var(--tab-size);width:var(--tab-size);min-width:var(--tab-size);max-width:var(--tab-size);
  height:75px;min-height:75px;max-height:75px;padding:0;border:0;border-radius:0;color:#51483f;background:none;box-shadow:none;
  display:grid;grid-template-rows:var(--tab-size) var(--tab-label-height);place-items:center;gap:3px;font-style:normal;
}
.framing-entry-page[data-active-tab="style"] .framing-entry-dock .framing-entry-options>.framing-tab-button,
.framing-entry-page[data-active-tab="style"] .framing-entry-dock .framing-entry-options>.framing-tab-button[aria-pressed="true"],
.framing-entry-page[data-active-tab="style"] .framing-entry-dock .framing-entry-options>.framing-tab-button[aria-selected="true"] {
  border:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.framing-entry-page[data-active-tab="style"] .framing-entry-dock .framing-tab-visual {
  box-sizing:border-box;display:grid;place-items:center;width:var(--tab-size);height:var(--tab-size);
  border:1px solid rgba(255,255,255,.86);border-radius:18px;
  background:linear-gradient(155deg,rgba(255,255,255,.94),rgba(225,229,226,.78));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.98),inset 0 -5px 10px rgba(73,83,79,.07),0 6px 15px rgba(55,64,61,.12);
}
.framing-entry-page[data-active-tab="style"] .framing-entry-dock .framing-tab-button[aria-pressed="true"] .framing-tab-visual {
  border-color:rgba(127,169,162,.82);background:linear-gradient(155deg,#fff,rgba(225,237,232,.9));
  box-shadow:inset 0 -2px rgba(200,137,88,.32),0 6px 16px rgba(79,92,88,.15);
}
.framing-entry-page[data-active-tab="style"] .framing-entry-dock .framing-tab-button[aria-pressed="true"] { transform:none; }
.framing-entry-page[data-active-tab="style"] .framing-entry-dock>[data-framing-tab][aria-pressed="true"] { grid-template-rows:var(--tab-size) var(--tab-label-height); }
.framing-entry-page[data-active-tab="style"] .framing-entry-icon-block {
  width:var(--tab-size);height:var(--tab-size);border-radius:18px;
}
.framing-entry-page[data-active-tab="style"] .framing-entry-icon-block svg { width:31px;height:31px; }
.framing-entry-page[data-active-tab="style"] .framing-entry-tab-label,
.framing-entry-page[data-active-tab="style"] .framing-entry-panel .framing-tab-label {
  display:block;max-width:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#51483f;font:560 9px/14px -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;letter-spacing:0;font-style:normal;text-shadow:none;
}
.framing-entry-page[data-active-tab="style"] .framing-entry-panel .framing-tab-button i { width:28px;height:28px;border-radius:9px;margin:0; }
.framing-entry-page[data-active-tab="style"] .framing-entry-dock>.framing-entry-panel .framing-entry-options { gap:7px; }
.framing-entry-page[data-active-tab="style"] .framing-entry-dock>.framing-entry-panel .framing-entry-options button { padding:4px; }
.framing-entry-page[data-active-tab="style"] .framing-entry-options .framing-tab-button:last-child { margin-right:2px; }
.framing-entry-page.framing-panel-open[data-active-tab="style"] .framing-entry-dock>[data-framing-tab]:not([aria-pressed="true"]) { display:none; }

/* Style expansion is a horizontal copy sequence: no vertical displacement. */
.framing-entry-page .framing-entry-dock,
.framing-entry-page.framing-panel-open .framing-entry-dock,
.framing-entry-page[data-active-tab="style"] .framing-entry-dock {
  height:84px;padding:4px 8px;gap:7px;align-items:center;
}
.framing-entry-page .framing-entry-dock>[data-framing-tab] {
  box-sizing:border-box;align-self:center;flex:0 0 58px;width:58px;min-width:58px;max-width:58px;
  height:75px;min-height:75px;max-height:75px;padding:0;
  grid-template-rows:58px 14px;gap:3px;transform:none;
}
.framing-entry-page .framing-entry-dock>[data-framing-tab] .framing-entry-icon-block { width:58px;height:58px; }
.framing-entry-page .framing-entry-dock>[data-framing-tab][aria-pressed="true"] { transform:none; }
.framing-entry-page .framing-entry-dock>[data-framing-tab][aria-pressed="true"] .framing-entry-icon-block { transform:none; }
.framing-entry-page .framing-entry-dock>[data-framing-tab]:active,
.framing-entry-page .framing-entry-dock>[data-framing-tab]:active .framing-entry-icon-block { transform:none; }
.framing-entry-page[data-active-tab="style"] .framing-entry-dock>.framing-entry-panel { transform:translateX(-7px); }
.framing-entry-page[data-active-tab="style"] .framing-entry-dock>.framing-entry-panel[aria-hidden="false"] { transform:translateX(0); }
.framing-entry-page[data-active-tab="style"] .framing-entry-options .framing-tab-button { animation:framing-tab-copy-right .22s cubic-bezier(.2,.72,.25,1) both; }
.framing-entry-page[data-active-tab="style"] .framing-entry-options .framing-tab-button:nth-child(2) { animation-delay:35ms; }
.framing-entry-page[data-active-tab="style"] .framing-entry-options .framing-tab-button:nth-child(3) { animation-delay:70ms; }
.framing-entry-page[data-active-tab="style"] .framing-entry-options .framing-tab-button:nth-child(4) { animation-delay:105ms; }
.framing-entry-page[data-active-tab="style"] .framing-entry-options .framing-tab-button:nth-child(5) { animation-delay:140ms; }
@keyframes framing-tab-copy-right { from { opacity:0;transform:translateX(-18px); } to { opacity:1;transform:translateX(0); } }

@media (max-height:700px) {
  #app,.home-study,.framing-entry-page { height:100dvh;min-height:100dvh; }
  .framing-entry-page { --entry-safe-top:54px;--entry-dock-reserve:88px; }
  .framing-entry-page .framing-entry-dock,.framing-entry-page.framing-panel-open .framing-entry-dock { height:84px; }
}

@media (prefers-reduced-motion:reduce) {
  .framing-entry-page[data-active-tab="style"] .framing-entry-options .framing-tab-button { animation:none; }
}

/* Final context geometry override: the legacy sheet declarations above remain
   for older candidates, while this entry route uses trigger-adjacent overlays. */
.framing-entry-page .framing-entry-panel,
.framing-entry-page .framing-global-panel {
  left:var(--context-left,12px);right:auto;top:var(--context-top,110px);bottom:auto;
  width:var(--context-width,238px);max-height:min(310px,calc(100% - 24px));
  transform:translateX(-6px) scale(.985);transform-origin:left center;
}
.framing-entry-page .framing-entry-panel[data-side="left"],
.framing-entry-page .framing-global-panel[data-side="left"] { transform:translateX(6px) scale(.985);transform-origin:right center; }
.framing-entry-page .framing-entry-panel[aria-hidden="false"],
.framing-entry-page .framing-global-panel[aria-hidden="false"] { transform:none; }

/* Fixed five slots: only their contents flip; their boxes never move. */
.framing-entry-page .framing-entry-dock,
.framing-entry-page[data-active-tab="style"] .framing-entry-dock {
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));justify-items:center;
  height:84px;padding:4px 0;gap:0;
}
.framing-entry-page .framing-entry-dock>.framing-entry-panel { display:none; }
.framing-entry-page .framing-entry-dock>[data-framing-tab] { display:grid;order:0; }
.framing-entry-page[data-active-tab="style"] .framing-entry-dock .framing-entry-icon-block svg { width:47px;height:47px; }
.framing-entry-page .framing-entry-dock .slot-flipped .framing-entry-icon-block { animation:slot-turn .28s ease-out; }
@keyframes slot-turn { from { transform:rotateY(90deg); } to { transform:rotateY(0); } }
.framing-entry-page .fixed-slot-dock>[data-slot],.framing-entry-page .fixed-slot-dock>[data-slot]:active {
  width:58px;min-width:58px;max-width:58px;height:75px;min-height:75px;padding:0;
  display:grid;grid-template-rows:58px 14px;gap:3px;transform:none;animation:none;align-content:start;
}
.fixed-slot-visual {display:grid;place-items:center;box-sizing:border-box;width:58px;height:58px;border-radius:18px;border:1px solid rgba(255,255,255,.86);background:linear-gradient(155deg,rgba(255,255,255,.94),rgba(225,229,226,.78));box-shadow:0 5px 12px #37403d18;}
.fixed-slot-dock .fixed-slot-visual svg {width:40px;height:40px;}
.fixed-slot-label {font:560 10px/14px -apple-system,sans-serif;color:#51483f;white-space:nowrap;max-width:62px;overflow:hidden;text-overflow:ellipsis;}
.fixed-slot-dock button[aria-pressed="true"] .fixed-slot-visual {border-color:#7fa9a2;}
.fixed-slot-dock .empty {visibility:hidden;}
@media(prefers-reduced-motion:reduce){.framing-entry-page .framing-entry-dock .slot-flipped .framing-entry-icon-block{animation:none;}}
.dock-editable{display:grid;justify-items:center;gap:16px;color:#514a40}
.dock-editable small{font-size:10px}
.dock-outer,.dock-inner{position:relative;box-sizing:content-box;background:#5c432b;line-height:0}
.dock-mat{position:relative;background:#fff}
.dock-inner{z-index:1}
.dock-art{display:block;width:150px;height:240px;object-fit:contain;background:#f5efdf;filter:none;opacity:1;image-rendering:auto}
.mat-cut-bevel[hidden]{display:none}
.mat-cut-bevel i{position:absolute;display:block;pointer-events:none}
.mat-cut-top{inset:0 0 auto;height:var(--cut-top);background:linear-gradient(#bdb7a9,#ddd7ca);clip-path:polygon(0 0,100% 0,calc(100% - var(--cut-right)) 100%,var(--cut-left) 100%)}
.mat-cut-bottom{inset:auto 0 0;height:var(--cut-bottom);background:linear-gradient(#f8f5ed,#e7e2d7);clip-path:polygon(var(--cut-left) 0,calc(100% - var(--cut-right)) 0,100% 100%,0 100%)}
.mat-cut-left{inset:0 auto 0 0;width:var(--cut-left);background:linear-gradient(90deg,#c6c0b2,#e4dfd3);clip-path:polygon(0 0,100% var(--cut-top),100% calc(100% - var(--cut-bottom)),0 100%)}
.mat-cut-right{inset:0 0 0 auto;width:var(--cut-right);background:linear-gradient(90deg,#faf7ef,#e6e1d6);clip-path:polygon(0 var(--cut-top),100% 0,100% 100%,0 calc(100% - var(--cut-bottom)))}
.dock-frame-piece{position:absolute;overflow:hidden;z-index:2;background:#694d30;pointer-events:none;filter:var(--material-filter,none)}
.dock-frame-piece img{position:absolute;left:50%;top:50%;width:42px;height:500px;max-width:none;transform:translate(-50%,-50%)}
.dock-frame-top,.dock-frame-bottom{left:0;width:100%;height:var(--face)}
.dock-frame-top{top:0;clip-path:polygon(0 0,100% 0,calc(100% - var(--face)) 100%,var(--face) 100%)}
.dock-frame-bottom{bottom:0;clip-path:polygon(var(--face) 0,calc(100% - var(--face)) 0,100% 100%,0 100%)}
.dock-frame-top img,.dock-frame-bottom img{transform:translate(-50%,-50%) rotate(90deg)}
.dock-frame-left,.dock-frame-right{top:0;height:100%;width:var(--face)}
.dock-frame-left{left:0;clip-path:polygon(0 0,100% var(--face),100% calc(100% - var(--face)),0 100%)}
.dock-frame-right{right:0;clip-path:polygon(0 var(--face),100% 0,100% 100%,0 calc(100% - var(--face)))}
.fixed-slot-dock>[data-slot]:disabled{visibility:hidden}
.dock-light-inline{position:absolute;top:110px;left:62px;display:flex;gap:10px;z-index:20}
.dock-light-inline[hidden],.dock-light-inline button[hidden]{display:none}
.dock-light-inline button{width:44px;height:44px;border-radius:50%;border:1px solid #fff;background:#ffffff55;color:#595349;touch-action:none;font-size:24px}
.dock-light-inline [data-sun-control]{background:conic-gradient(from var(--sun-angle),#fff8,#fff2,#fff8)}

/* Owner revision: style children expand horizontally, pushing roots right. */
.framing-entry-page .framing-entry-dock.style-push-dock {
  display:flex;justify-content:flex-start;align-items:flex-start;overflow-x:auto;overflow-y:hidden;
  border-radius:0;mask-image:none;clip-path:none;scrollbar-width:none;
  --dock-step:calc((100vw - 24px)/5);
}
.framing-entry-page .style-push-dock>[data-slot],
.framing-entry-page .style-push-dock>[data-slot]:active {
  flex:0 0 var(--dock-step);width:var(--dock-step);min-width:var(--dock-step);max-width:var(--dock-step);justify-items:center;
}
.style-push-children {display:flex;flex:0 0 0;width:0;overflow:hidden;height:79px;transition:flex-basis .3s ease,width .3s ease;}
.style-push-dock[data-style-open="true"]>.style-push-children {flex-basis:calc(var(--style-count,5) * var(--dock-step));width:calc(var(--style-count,5) * var(--dock-step));}
.framing-entry-page .style-push-children>button {
  flex:0 0 var(--dock-step);width:var(--dock-step);min-width:var(--dock-step);height:75px;padding:0;
  display:grid;grid-template-rows:58px 14px;gap:3px;justify-items:center;align-content:start;
  background:none;border:0;box-shadow:none;transform:none;animation:none;touch-action:pan-x;
}
@media(prefers-reduced-motion:reduce){.style-push-children{transition:none;}}
.classic-wheel-viewport {position:relative;display:block;width:56px;height:56px;overflow:hidden;border-radius:16px;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);pointer-events:none;}
.classic-wheel-track {position:absolute;top:-33px;left:10px;display:flex;flex-direction:column;gap:4px;will-change:transform;}
.classic-mini-frame {position:relative;display:block;flex:none;box-sizing:border-box;width:36px;height:38px;padding:5px;background:#775438;border-radius:var(--mini-radius);overflow:hidden;box-shadow:0 2px 3px #30281945;}
.classic-mini-paper {display:block;width:100%;height:100%;background:linear-gradient(135deg,#faf6e9,#dfd5bf);border:1px solid #cabfa8;box-sizing:border-box;box-shadow:inset 0 1px 2px #4b3d2928;}
.classic-mini-edge {position:absolute;display:block;overflow:hidden;background:#705135;}
.classic-mini-edge img {position:absolute;left:50%;top:50%;width:8px;height:48px;max-width:none;transform:translate(-50%,-50%);}
.classic-mini-top,.classic-mini-bottom {left:0;width:36px;height:5px;}
.classic-mini-top {top:0;clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,5px 100%);}
.classic-mini-bottom {bottom:0;clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 100%,0 100%);}
.classic-mini-top img,.classic-mini-bottom img {transform:translate(-50%,-50%) rotate(90deg);}
.classic-mini-left,.classic-mini-right {top:0;width:5px;height:38px;}
.classic-mini-left {left:0;clip-path:polygon(0 0,100% 5px,100% calc(100% - 5px),0 100%);}
.classic-mini-right {right:0;clip-path:polygon(0 5px,100% 0,100% 100%,0 calc(100% - 5px));}
@media(prefers-reduced-motion:reduce){.classic-wheel-track{transition:none!important;}}
.framing-entry-page .framing-entry-dock.style-push-dock {bottom:calc(58px + env(safe-area-inset-bottom));}
.framing-entry-page .framing-entry-status {bottom:calc(150px + env(safe-area-inset-bottom));}
.framing-page-indicator {position:absolute;z-index:6;bottom:calc(2px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;gap:10px;background:none;border:0;box-shadow:none;}
.framing-page-indicator>a,.framing-page-indicator>button {display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;box-shadow:none;color:#514b43;opacity:.48;text-decoration:none;cursor:pointer;}
.framing-page-indicator svg {width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #ffffffb3);}
.framing-page-indicator [aria-current="page"] {opacity:.95;}
.framing-page-indicator [aria-current="page"] svg {width:21px;height:21px;}
.framing-page-indicator :focus-visible {outline:2px solid #8a7965;outline-offset:-5px;border-radius:10px;}
.framing-entry-page .framing-entry-dock.style-push-dock {bottom:calc(10px + env(safe-area-inset-bottom));}
.framing-entry-page .framing-entry-status {bottom:calc(108px + env(safe-area-inset-bottom));}
.framing-page-indicator.edge-page-navigation {left:0;right:0;bottom:calc(122px + env(safe-area-inset-bottom));height:48px;transform:none;display:block;pointer-events:none;}
.edge-page-navigation>a,.edge-page-navigation>button {position:absolute;top:0;width:48px;height:48px;border-radius:50%;background:rgba(248,247,242,.58);border:1px solid rgba(255,255,255,.8);box-shadow:0 2px 8px #51493812;opacity:1;pointer-events:auto;backdrop-filter:blur(10px);}
.edge-page-navigation>a {left:-24px;padding-left:22px;}
.edge-page-navigation>button {right:-24px;padding-right:22px;}
.edge-page-navigation svg {width:10px;height:17px;fill:currentColor;stroke:none;opacity:.6;filter:none;}
.european-mini-frame {padding:0;background:none;box-shadow:none;border-radius:0;overflow:visible;}
.european-mini-frame>img {display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 1px #30281940);}
.style-real-frame-stack {position:relative;display:block;width:48px;height:48px;pointer-events:none;}
.style-real-frame-stack img {position:absolute;width:30px;height:38px;object-fit:contain;filter:drop-shadow(1px 2px 1px #30281945);}
.style-real-frame-stack img:nth-child(1) {left:2px;top:3px;transform:rotate(-13deg);}
.style-real-frame-stack img:nth-child(2) {left:10px;top:6px;transform:rotate(3deg);}
.style-real-frame-stack img:nth-child(3) {left:18px;top:9px;transform:rotate(12deg);}
.style-crafted-stack {position:relative;display:block;width:50px;height:50px;pointer-events:none;}
.stack-layer {position:absolute;display:block;width:30px;height:37px;filter:drop-shadow(1px 2px 1px #2c211e45);transform-origin:50% 90%;}
.stack-back {left:6px;top:5px;transform:rotate(-7deg);}
.stack-middle {left:10px;top:7px;transform:rotate(-1deg);}
.stack-front {left:14px;top:9px;transform:rotate(5deg);}
.stack-european {display:block;width:30px;height:37px;object-fit:fill;}
.stack-wood-frame {position:relative;display:block;width:30px;height:37px;background:#765137;}
.single-frame-perspective{display:grid;place-items:center;width:46px;height:46px;perspective:95px;pointer-events:none}
.mat-perspective-icon{position:relative;display:block;box-sizing:border-box;width:30px;height:37px;transform:rotateY(32deg);border:6px solid #e9dfcc;border-top-color:#f7f1e4;border-left-color:#f2eadb;border-right-color:#ded1ba;border-bottom-color:#e2d6c1;box-shadow:1.5px 0 0 #b9aa91,0 1px 0 #b9aa91;filter:drop-shadow(3px 4px 2px #38261730)}
.mat-color-icon{position:relative;display:block;width:38px;height:38px;filter:drop-shadow(0 4px 5px #322c2430)}
.mat-color-icon i{position:absolute;width:24px;height:24px;border-radius:50%;border:1px solid #ffffffaa;box-shadow:inset 0 1px 2px #fff8,0 2px 4px #342d2528}
.mat-color-icon i:nth-child(1){left:1px;top:11px;background:#8f908d}.mat-color-icon i:nth-child(2){right:1px;top:3px;background:#d7d3ca}.mat-color-icon i:nth-child(3){right:5px;bottom:0;background:#b4b1aa}
.mat-colour-wheel{position:relative;display:block;width:54px;height:54px;overflow:hidden;border-radius:16px;mask-image:linear-gradient(transparent,#000 17%,#000 83%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 17%,#000 83%,transparent);pointer-events:none}
.mat-colour-track{position:absolute;left:13px;top:-15px;display:flex;flex-direction:column;gap:5px;will-change:transform;transition:transform 150ms ease-out}
.mat-colour-chip{box-sizing:border-box;display:block;flex:0 0 28px;width:28px;height:28px;border-radius:9px;background:var(--mat-colour);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 2px #ffffffcc,0 2px 5px #342d2533}
.mat-colour-chip.is-custom{background:conic-gradient(from 15deg,#e68383,#e9ce79,#88c88e,#7fcad2,#889ada,#c78acb,#e68383)}
.mat-spectrum-pad{box-sizing:border-box;flex:0 0 68px;width:68px;min-width:68px;height:75px;padding:0;display:grid;grid-template-rows:58px 14px;gap:3px;justify-items:center;align-content:start;border:0;background:none;color:inherit;touch-action:none}
.mat-spectrum-pad[hidden]{display:none}
.mat-spectrum-pad>.fixed-slot-visual{position:relative;display:grid;place-items:center;width:58px;height:58px}
.mat-spectrum-track{position:relative;display:block;width:42px;height:12px;border-radius:999px;background:linear-gradient(90deg,#df7777,#e5d272,#80c988,#75c8cf,#8294da,#c17fc9,#df7777);box-shadow:inset 0 1px 2px #2d29233b,0 1px 1px #fff9}
.mat-spectrum-track b{position:absolute;left:var(--mat-hue-position,10%);top:50%;box-sizing:border-box;width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);background:#fff;border:2px solid #71695f;box-shadow:0 2px 4px #2e292344}
.framing-entry-page .framing-entry-dock.mat-colour-custom-open{justify-content:center!important;gap:10px!important;overflow:visible;--dock-step:68px}
.framing-entry-page .mat-colour-custom-open>[data-slot]:not([data-entry-id="mat"]):not([data-entry-id="mat-color"]),.framing-entry-page .mat-colour-custom-open>.style-push-children{display:none!important}
.wall-sample-icon,.room-space-icon{position:relative;display:block;width:34px;height:38px;transform:rotateY(32deg);filter:drop-shadow(3px 4px 2px #38261730)}
.wall-sample-icon i{position:absolute;width:27px;height:34px;border:1px solid #fff9ec;box-sizing:border-box;box-shadow:1.5px 0 0 #a79d8b}
.wall-sample-back{left:0;top:0;background:linear-gradient(120deg,#b6bfb5,#d1d3c4)}
.wall-sample-front{left:6px;top:4px;background:linear-gradient(130deg,#f7f0df,#d6cbb6)}
.wall-sample-front b{position:absolute;inset:0;background:linear-gradient(150deg,transparent 36%,#a8997c25 37%,#a8997c25 48%,transparent 49%)}
.room-space-icon i{position:absolute;display:block}
.wall-option-icon{display:grid;place-items:center;width:29px;height:36px;transform:rotateY(32deg);background:linear-gradient(125deg,#ffffff55,transparent 55%),var(--wall-chip);border:1px solid #fff9e9;box-shadow:2px 0 0 #aa9f8c,3px 4px 3px #38261738}
.wall-auto-symbol{font-size:19px;color:#817563}
.home-account-trigger{position:absolute;left:18px;top:22px;z-index:30;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid #ffffffb8;background:#ffffff40;backdrop-filter:blur(18px);box-shadow:inset 0 1px 1px #fff,0 5px 16px #332b211c;color:#565149}
.home-account-trigger svg{width:24px;height:24px}
.home-account-panel{position:absolute;left:72px;right:18px;top:22px;max-width:300px;z-index:31;padding:20px;box-sizing:border-box;border:1px solid #ffffffaa;border-radius:24px;background:#f6f3eadb;backdrop-filter:blur(24px);box-shadow:0 16px 44px #302a2526;color:#514a40;animation:wall-options-in .22s ease-out}
.home-account-panel[hidden]{display:none}.home-account-panel header{display:flex;align-items:center;justify-content:space-between;font-size:17px}.home-account-panel header button{border:0;background:none;font-size:23px;color:inherit}
.home-account-panel p{font-size:12px;color:#81776a;margin:10px 0 22px}.account-switch{display:flex;gap:20px;margin-bottom:18px}.account-switch button{background:none;border:0;padding:6px 0;color:#938b80}.account-switch button[aria-pressed=true]{color:#4d463c;border-bottom:1px solid #8b7b62}
.home-account-panel label{display:grid;gap:7px;font-size:11px;margin:15px 0}.home-account-panel input{box-sizing:border-box;width:100%;min-width:0;border:0;border-bottom:1px solid #c4bdb1;background:transparent;padding:9px 0;font:13px sans-serif;color:#514a40}.account-code{display:flex}.account-code button{white-space:nowrap;border:0;background:none;font-size:11px}.account-submit{width:100%;border:1px solid #fff9;border-radius:14px;padding:12px;background:#d9d2c4;color:#756c5e}.home-account-panel small{display:block;font-size:10px;line-height:1.8;margin-top:13px;color:#8c8377}
.home-a-final .home-cta{background:linear-gradient(135deg,#ffffff94,#f5f0e33d)!important;border:1px solid #ffffffba!important;backdrop-filter:blur(20px);box-shadow:inset 0 1px 1px #fff,0 8px 25px #42352522!important;border-radius:28px!important;color:#554a3c!important}
.home-a-final .home-asset-note{display:none}
.home-a-final .home-space{background:#eeeae2 url('https://yizhuangbiao.com/device-tests/release-85/framing/assets/wall/owner-20260904/plaster-portrait.png') center/cover no-repeat}
.home-a-final .home-space::after{background:linear-gradient(145deg,transparent 16%,#716b5c14 48%,#716b5c05 72%,transparent);mix-blend-mode:multiply;animation:home-cloud-light 24s ease-in-out infinite;transform-origin:left top;pointer-events:none}
.home-a-final .home-space{z-index:0}
.home-a-final .home-frame-stage{z-index:3;contain:layout!important}
@keyframes home-cloud-light{0%,100%{opacity:.3;transform:translateY(-1%) scaleY(1.02)}50%{opacity:.8;transform:translateY(1%) scaleY(1.02)}}
@media(prefers-reduced-motion:reduce){.home-a-final .home-space::after{animation:none;opacity:.45}}
.home-a-final .home-wall-detail,.home-a-final .home-plinth{display:none}
.home-a-final .home-brand{top:24px}
.home-a-final .home-copy{display:block;top:100px;left:24px;right:24px}
.home-a-final .home-copy p{font-size:10px;letter-spacing:.2em;color:#827d72}
.home-a-final .home-copy h1{font:500 20px/1.6 'Songti SC',serif;color:#514d45;letter-spacing:.12em}
.home-a-final .home-frame-stage{top:46%;filter:drop-shadow(7px 12px 9px #37312630)}
.home-a-final .home-carousel-dots,.home-a-final .carousel-arrow,.home-a-final .home-page-indicator{display:none}
.home-a-final .home-slide{transition:opacity var(--home-carousel-fade,1600ms) cubic-bezier(.4,0,.2,1);will-change:opacity}
.home-a-final .home-brand{padding:8px;border-radius:20px;background:linear-gradient(135deg,#ffffff80,#ffffff18);border:1px solid #ffffffa6;backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);box-shadow:inset 0 1px 2px #ffffffcc,inset 0 -1px 2px #ffffff40,0 5px 16px #4b44351c}
.home-a-final .home-owner-logo{width:44px;height:44px;mix-blend-mode:multiply;opacity:.62;filter:saturate(.45);border-radius:12px}
@media(prefers-reduced-motion:reduce){.home-a-final .home-slide{transition:none}}
.home-a-final .home-carousel-dots button[aria-current=true]::after{background:#827760}
.home-a-final .home-cta{bottom:66px;background:linear-gradient(135deg,#ffffff70,#ffffff20)!important;backdrop-filter:blur(16px) saturate(1.08);-webkit-backdrop-filter:blur(16px) saturate(1.08)}
.home-a-final .home-account-panel{background:linear-gradient(135deg,#ffffffad,#f5f2e9a1);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
@media(max-height:700px){.home-a-final .home-copy{top:78px}.home-a-final .home-copy h1{font-size:17px}.home-a-final .home-frame-stage{top:45%;height:300px}.home-a-final .home-carousel-dots{bottom:105px}.home-a-final .home-cta{bottom:40px;height:48px}}
.framing-entry-page[data-active-global] .framing-global-actions>[aria-pressed="true"]{grid-column:1!important;left:0!important;right:auto!important;top:0!important;transform:none!important}
.environment-wheel{display:flex;flex-direction:column;align-items:center;gap:6px;width:54px;height:54px;overflow:hidden;pointer-events:none}
.environment-wheel>span{display:block;flex:0 0 34px;width:28px;border:1px solid #fff9;box-shadow:1px 2px 2px #0003;transform:translateY(-28px)}
.environment-expanded{scale:1.35;z-index:100!important}
.framing-entry-page .framing-entry-dock:has(.environment-expanded){overflow:visible!important;clip-path:none!important;mask-image:none!important;-webkit-mask-image:none!important;contain:none!important}
.custom-wall-controls{display:flex;gap:8px;align-items:center;flex:none}.custom-wall-controls[hidden]{display:none}
.custom-wall-controls>label,.custom-wall-controls>button{width:58px;height:58px;box-sizing:border-box;border-radius:18px;background:#ffffff70;border:1px solid #fff9;backdrop-filter:blur(12px);display:grid;place-items:center;font-size:10px;color:#554e43}
.custom-wall-controls input{max-width:48px;width:48px}
.framing-entry-page[data-active-global] .framing-global-actions>[aria-pressed="false"]{visibility:hidden;pointer-events:none}
.framing-entry-page[data-active-global] .framing-global-actions>[aria-pressed="true"]{position:absolute;left:0;right:auto}
.framing-entry-page .framing-global-panel[aria-hidden="false"]{left:68px;right:12px;top:52px;width:auto;max-width:none;max-height:none;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;overflow:visible}
.global-inline-options{display:flex;align-items:flex-start;gap:8px;overflow-x:auto;padding:0 4px 12px;scrollbar-width:none}
.global-inline-options>button{flex:0 0 48px;width:48px;padding:0;border:0;background:none;color:#554e43;display:grid;justify-items:center;gap:5px;animation:wall-options-in 220ms ease-out}
.global-option-glass{width:44px;height:44px;box-sizing:border-box;border-radius:50%;display:grid;place-items:center;border:1px solid #ffffffcf;background:linear-gradient(145deg,#ffffff6e,#f8f5ed22 52%,#dddad03b);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 2px #ffffffd9,0 2px 3px #332b2124,0 6px 9px #332b2130;font:22px serif}
.global-option-glass svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.global-option-label{font:10px/14px -apple-system,sans-serif;white-space:nowrap}
.framing-entry-page .framing-global-panel[aria-hidden="false"]{top:52px;transform:none!important}
.framing-entry-page .framing-global-panel .global-inline-options{margin:0!important;padding-top:0!important;align-items:start!important}
.framing-entry-page .framing-global-panel .global-inline-options>button{margin:0!important;align-content:start!important}
@media(max-width:430px){.framing-entry-page .framing-global-panel[aria-hidden="false"]{top:52px}}
.framing-entry-page .framing-global-panel .global-inline-options{display:flex;gap:8px;background:none;border:0;box-shadow:none;padding:0 4px 12px;min-height:44px}
.framing-entry-page .framing-global-panel .global-inline-options>button{height:44px!important;min-height:44px!important;max-height:44px;gap:0!important}
.framing-entry-page .framing-global-panel .global-option-glass{width:44px;height:44px;border-radius:50%;margin:0;padding:0}
.framing-entry-page:has(.light-tabs:not([hidden])) .framing-global-actions>[data-global-action]:not([data-global-action="light"]){visibility:hidden;pointer-events:none}
.framing-entry-page .framing-global-panel::before,.framing-entry-page .framing-global-panel::after{display:none}
.framing-entry-page .framing-global-panel .global-inline-options>button{flex:0 0 48px;width:48px;min-width:48px;padding:0;border:0;background:none;box-shadow:none;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;display:grid;grid-template-columns:1fr;gap:5px;justify-items:center}
@media(prefers-reduced-motion:reduce){.global-inline-options>button{animation:none}}
.framing-entry-page .scene-menu-open{justify-content:flex-start}
.scene-menu-open [data-entry-id^="scene-"]{animation:wall-options-in 220ms ease-out both}
.room-space-icon[data-room="scene-candidate-home"] .room-console{height:6px;background:#9a8d79;border-radius:2px 2px 0 0;top:25px}
.room-space-icon[data-room="scene-candidate-home"] .room-side-wall{background:linear-gradient(90deg,#9e8a76,#b9a58a)}
.room-space-icon[data-room="scene-candidate-study"] .room-back-wall{background:linear-gradient(125deg,#d6cfbd,#9a9d88)}
.room-space-icon[data-room="scene-candidate-study"] .room-console{background:#514333}
.room-space-icon[data-room="scene-candidate-study"] .room-mini-art{width:7px;left:18px;height:17px}
@media(prefers-reduced-motion:reduce){.scene-menu-open [data-entry-id^="scene-"]{animation:none}}
.framing-entry-page .background-menu-open{justify-content:flex-start;scroll-behavior:smooth}
.background-menu-open [data-entry-id^="wall-"]{animation:wall-options-in 220ms ease-out both}
@keyframes wall-options-in{from{opacity:0;translate:-18px 0}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.background-menu-open [data-entry-id^="wall-"]{animation:none}}
.room-back-wall{inset:2px 0 7px 9px;background:linear-gradient(130deg,#d9cfb9,#b2a38a);border-top:1px solid #eee2ca;border-right:1.5px solid #80705a}
.room-side-wall{left:0;top:2px;width:9px;height:36px;background:linear-gradient(90deg,#686b5c,#92917d);clip-path:polygon(0 0,100% 0,100% 81%,0 100%)}
.room-floor{left:0;bottom:0;width:34px;height:9px;background:linear-gradient(155deg,#ad9471,#806a4e);clip-path:polygon(26% 0,100% 0,100% 100%,0 100%)}
.room-mini-art{left:15px;top:7px;width:12px;height:15px;box-sizing:border-box;border:2px solid #57432f;background:linear-gradient(145deg,#ece7d9 48%,#899083 49%,#d4d4bf 69%);box-shadow:1px 1.5px 1px #40362155}
.room-console{left:12px;top:27px;width:19px;height:3px;background:#59452f;box-shadow:0 2px 1px #463b3150}
.room-console:before,.room-console:after{content:'';position:absolute;top:3px;width:2px;height:5px;background:#65503a}.room-console:before{left:1px}.room-console:after{right:1px}
.room-vase{left:12px;top:23px;width:4px;height:4px;border-radius:1px 1px 2px 2px;background:#e4dbca;box-shadow:1px 0 1px #584d3a80}
.room-plant{left:13px;top:17px;width:1px;height:7px;background:#555e46;transform:rotate(-12deg)}
.room-plant:before,.room-plant:after{content:'';position:absolute;width:4px;height:2px;border-radius:90% 0;background:#626b50}.room-plant:before{left:-3px;top:1px;transform:rotate(30deg)}.room-plant:after{left:0;top:3px;transform:rotate(-25deg)}
.mat-icon-opening{position:absolute;inset:0;box-shadow:inset 1px 1px 1px #87765a77;outline:1px solid #fff9}
.composite-inline-controls[hidden]{display:none}
.composite-inline-controls{display:flex;gap:10px;animation:frame-adjust-open .18s ease-out}
.composite-inline-controls>label,.composite-inline-controls>button{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:58px;height:58px;margin:0;padding:4px;border-radius:18px;border:1px solid #ffffffc7;background:linear-gradient(145deg,#ffffff6e,#f8f5ed22,#dddad03b);backdrop-filter:blur(12px);box-shadow:inset 0 1px 2px #fffd,0 6px 9px #332b2130;color:#655a49;font-size:10px}
.composite-inline-controls input{width:48px;margin:0;accent-color:#9d896e}
.framing-entry-page .composite-inline-controls>button,.framing-entry-page .composite-inline-controls>label{box-sizing:border-box;flex:0 0 58px;min-height:58px;max-height:58px;height:58px;min-width:58px;max-width:58px;width:58px;align-self:flex-start;border-radius:18px}
.framing-entry-page .composite-inline-controls>button{touch-action:none}
.framing-entry-page .composite-options-open>[data-slot]{display:none}
.framing-entry-page .composite-options-open>.style-push-children{flex:0 0 auto;width:auto;overflow:visible;gap:10px}
.framing-entry-page .composite-options-open .style-push-children>button:not([data-entry-id="composite"]){display:none}
.framing-entry-page .composite-options-open .style-push-children>button[data-entry-id="composite"]{flex:0 0 58px;width:58px;min-width:58px}
.framing-entry-page .framing-entry-dock.composite-options-open{justify-content:center}
.framing-entry-page .framing-entry-dock.frame-width-open{justify-content:center;gap:10px;--dock-step:68px}
.framing-entry-page .frame-width-open>[data-slot]:disabled,.frame-width-open>.style-push-children{display:none}
.framing-entry-page .frame-width-tab{display:grid;flex:0 0 68px;justify-items:center;grid-template-rows:58px 14px;gap:3px;padding:0;border:0;background:none;touch-action:none;color:#655a49;animation:frame-adjust-open .18s ease-out}
.framing-entry-page .frame-width-tab[hidden]{display:none}
.frame-part-icon{position:relative;display:block;width:30px;height:37px;transform:rotateY(32deg);filter:drop-shadow(2px 3px 2px #38261730)}
.frame-part-icon .stack-wood-frame{position:absolute;inset:0;background:transparent}
.frame-part-icon .part-inner{transform:scale(.61,.65);transform-origin:center}
.frame-part-outer .part-inner{opacity:.22;filter:grayscale(1)}
.frame-part-inner .part-outer{opacity:.22;filter:grayscale(1)}
.frame-part-inner .part-inner{filter:drop-shadow(1px 1px 0 #493523)}
.single-open-frame{background:transparent;transform:rotateY(32deg);transform-origin:center;box-shadow:2px 1px 0 #493523;filter:drop-shadow(3px 5px 2px #38261745)}
.stack-paper {position:absolute;inset:4px;background:linear-gradient(135deg,#f8f3e8,#ded2bb);box-shadow:inset 0 1px 2px #43332135;border:1px solid #cbbda0;}
.stack-edge {position:absolute;display:block;overflow:hidden;}
.stack-edge img {position:absolute;left:50%;top:50%;width:6px;height:42px;max-width:none;transform:translate(-50%,-50%);}
.stack-top,.stack-bottom {left:0;width:30px;height:4px;}
.stack-top {top:0;clip-path:polygon(0 0,100% 0,26px 100%,4px 100%);}
.stack-bottom {bottom:0;clip-path:polygon(4px 0,26px 0,100% 100%,0 100%);}
.stack-top img,.stack-bottom img {transform:translate(-50%,-50%) rotate(90deg);}
.stack-left,.stack-right {top:0;width:4px;height:37px;}
.stack-left {left:0;clip-path:polygon(0 0,100% 4px,100% 33px,0 100%);}
.stack-right {right:0;clip-path:polygon(0 4px,100% 0,100% 100%,0 33px);}
.dock-composite-ring {position:relative;line-height:0;box-sizing:content-box;}
.dock-composite-ring>.dock-frame-piece[hidden] {display:none!important;}
.dock-composite-ring[data-active="true"]::after {content:'';position:absolute;inset:0;pointer-events:none;z-index:3;box-shadow:inset 0 2px 2px #25170e88,inset 0 -1px 1px #fff5;}
.dock-composite-ring[data-edge="round"][data-active="true"]>.dock-frame-piece::after {content:'';position:absolute;inset:0;background:linear-gradient(var(--seam-angle),#0005,transparent 35%,#fff5 55%,#0003);}
.composite-controls {position:absolute;z-index:24;left:50%;top:108px;transform:translateX(-50%);width:240px;padding:10px 14px;border-radius:18px;background:#f8f4e6aa;backdrop-filter:blur(10px);font-size:11px;color:#655642;}
.composite-controls[hidden]{display:none;}
.composite-controls label {display:flex;align-items:center;gap:8px;min-height:27px;}
.composite-controls input {width:110px;accent-color:#8e7758;}
.composite-thumb,.composite-thumb-inner {padding:var(--rim);box-sizing:border-box;}
.composite-thumb-inner {position:relative;display:block;width:100%;height:100%;box-shadow:inset 0 1px 1px #30201480;}
.composite-thumb-edge {position:absolute;display:block;overflow:hidden;}
.composite-thumb-edge img {position:absolute;left:50%;top:50%;width:9px;height:44px;max-width:none;transform:translate(-50%,-50%);}
.composite-thumb-top,.composite-thumb-bottom {left:0;width:100%;height:var(--rim);}
.composite-thumb-top {top:0;clip-path:polygon(0 0,100% 0,calc(100% - var(--rim)) 100%,var(--rim) 100%);}
.composite-thumb-bottom {bottom:0;clip-path:polygon(var(--rim) 0,calc(100% - var(--rim)) 0,100% 100%,0 100%);}
.composite-thumb-top img,.composite-thumb-bottom img {transform:translate(-50%,-50%) rotate(90deg);}
.composite-thumb-left,.composite-thumb-right {top:0;width:var(--rim);height:100%;}
.composite-thumb-left {left:0;clip-path:polygon(0 0,100% var(--rim),100% calc(100% - var(--rim)),0 100%);}
.composite-thumb-right {right:0;clip-path:polygon(0 var(--rim),100% 0,100% 100%,0 calc(100% - var(--rim)));}
.composite-thumb-inner[data-edge="round"] .composite-thumb-edge {box-shadow:inset 0 1px 1px #fff8,inset 0 -1px 1px #0005;}
.dock-light-inline [data-sun-control] {position:relative;width:64px;height:64px;background:rgba(248,246,237,.82);backdrop-filter:blur(12px);box-shadow:0 3px 12px #51483218;}
.sun-orbit {position:absolute;inset:10px;border:1px solid #95887140;border-radius:50%;pointer-events:none;}
.sun-orbit-center {position:absolute;left:29px;top:29px;width:4px;height:4px;border-radius:50%;background:#9e917b;pointer-events:none;}
.sun-orbit-dot {position:absolute;left:50%;top:50%;width:22px;height:22px;display:grid;place-items:center;font-size:21px;line-height:1;color:#b57e2f;text-shadow:0 1px 3px #fff;transform:translate(calc(-50% + var(--sun-x)),calc(-50% + var(--sun-y)));pointer-events:none;}
.light-tabs {position:absolute;z-index:25;width:200px;user-select:none;-webkit-user-select:none;}
.light-tabs[hidden],.light-tabs [hidden]{display:none;}
.light-tab-row {display:flex;gap:8px;}
.light-tabs button {touch-action:none;border:1px solid #ffffffb8;color:#756550;background:#f8f5edc9;backdrop-filter:blur(12px);padding:0;}
.light-tab-row button {width:48px;height:60px;border-radius:16px;display:grid;place-items:center;gap:0;box-shadow:0 3px 10px #4b3c2915;}
.light-tab-row button>span {font-size:25px;line-height:30px;}
.light-tab-row small {font-size:9px;}
.light-tabs [aria-pressed="true"] {border-color:#b99d6e;}
.light-tabs .free-sun-pad {position:relative;display:block;margin-top:10px;width:160px;height:160px;border-radius:22px;box-shadow:0 6px 20px #40342415;}
.free-sun {position:absolute;left:50%;top:50%;font-size:28px;color:#b9802e;pointer-events:none;}
.sun-center {position:absolute;left:calc(50% - 2px);top:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:#b6aa95;pointer-events:none;}
.light-value {display:block;margin-top:8px;font-size:10px;color:#645643;text-shadow:0 1px 2px #fff;}
.light-tabs .free-sun-pad[hidden] {display:none;}
.light-tab-row button {width:44px;height:44px;min-width:44px;border-radius:50%;display:grid;place-items:center;}
.light-tab-row[hidden] {display:none;}
.light-tabs.is-adjusting {left:var(--adjust-x)!important;top:var(--adjust-y)!important;width:var(--adjust-size);transform:translate(-50%,-50%);}
.light-tabs .free-sun-pad {width:var(--adjust-size,104px);height:var(--adjust-size,104px);border-radius:50%;margin:0;background:linear-gradient(145deg,rgba(255,255,255,.38),rgba(248,245,237,.12) 55%,rgba(224,218,205,.2));border:1px solid rgba(255,255,255,.72);backdrop-filter:blur(9px) saturate(1.08);-webkit-backdrop-filter:blur(9px) saturate(1.08);box-shadow:inset 0 1px 2px #ffffffb3,inset 0 -2px 3px #74634a12,0 5px 12px #51442e18;}
.light-tabs .light-value {display:none;}
.light-tabs .free-sun-pad:focus-visible {outline:1px solid #b6a382;outline-offset:3px;}
.background-gesture-zone {position:absolute;z-index:1;left:30px;right:30px;display:grid;place-items:center;overflow:hidden;touch-action:none;outline:none;}
.background-gesture-zone:focus-visible {outline:none;}
.gesture-hint {font-size:11px;line-height:1.9;text-align:center;color:#756c5d;text-shadow:0 1px 3px #fff;pointer-events:none;animation:gesture-hint-fade 6.5s both;}
@keyframes gesture-hint-fade {0%{opacity:0}12%,75%{opacity:.8}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.gesture-hint{animation:none;}}

/* Shared translucent glass skin. Keep labels and artwork outside the filter. */
.frame-adjustment{position:absolute;z-index:25;width:0;height:0}
.frame-adjust-trigger,.frame-adjust-pad{position:absolute;display:grid;place-items:center;color:#655a49;border:1px solid #ffffffc7;background:linear-gradient(145deg,#ffffff6e,#f8f5ed22 52%,#dddad03b);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 2px #ffffffd9,0 2px 3px #332b2124,0 6px 9px #332b2130;cursor:pointer}
.frame-adjust-trigger{box-sizing:border-box;padding:0;width:26px;height:26px;left:-13px;top:-13px;border-radius:9px;font-size:16px;line-height:1;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;color:#514c45}
.frame-adjust-trigger svg{filter:drop-shadow(0 1px 1px #00000065);overflow:visible}
.frame-adjust-trigger svg circle{fill:#b69a67;stroke:#665841;stroke-width:1}
.frame-adjust-pad{width:58px;height:58px;left:25px;top:-29px;border-radius:18px;touch-action:none;font-size:27px;animation:frame-adjust-open .18s ease-out}
.frame-adjust-pad[hidden],.frame-adjust-value[hidden]{display:none}
.frame-adjust-value{position:absolute;left:23px;top:34px;white-space:nowrap;font-size:10px;color:#665b4d}
.frame-material-name{position:absolute;left:0;transform:translateX(-50%);white-space:nowrap;font-size:11px;color:#706554;pointer-events:none}
@keyframes frame-adjust-open{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.frame-adjust-pad{animation:none}}
.framing-entry-page .fixed-slot-visual,
.framing-entry-page .framing-global-actions>:is([data-global-action],.favorite-top-button),
.framing-entry-page .light-tab-row>button {
  background:linear-gradient(145deg,rgba(255,255,255,.43),rgba(248,245,237,.13) 52%,rgba(221,218,207,.23));
  border:1px solid rgba(255,255,255,.78);
  backdrop-filter:blur(12px) saturate(1.12);
  -webkit-backdrop-filter:blur(12px) saturate(1.12);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.85),inset 0 -2px 3px rgba(88,74,53,.10),0 2px 3px rgba(51,43,33,.14),0 6px 9px rgba(51,43,33,.19);
}
.framing-entry-page .fixed-slot-dock button[aria-pressed="true"],
.framing-entry-page .fixed-slot-dock button:active {
  background:transparent;box-shadow:none;
}
.framing-entry-page .fixed-slot-dock button[aria-pressed="true"] .fixed-slot-visual,
.framing-entry-page .light-tab-row>button[aria-pressed="true"] {
  border-color:rgba(161,137,100,.78);
  box-shadow:inset 0 1px 2px #ffffffd9,inset 0 -2px 3px #584a351a,0 2px 3px rgba(51,43,33,.14),0 6px 9px rgba(51,43,33,.19);
}
.framing-entry-page .framing-entry-dock.mat-menu-open{justify-content:center;gap:10px;--dock-step:68px}
.framing-entry-page .framing-entry-dock.mat-menu-open [data-slot]:disabled,.framing-entry-page .framing-entry-dock.mat-menu-open .style-inline-children{display:none}
.mat-adjust-tab{flex:0 0 68px;display:grid;grid-template-rows:58px 14px;justify-items:center;gap:5px;border:0;background:none;padding:0;color:inherit;touch-action:none}
.mat-adjust-tab[hidden]{display:none}
.mat-mode-wheel{height:54px;width:34px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;gap:3px;pointer-events:none}
.mat-mode-wheel>span{opacity:.24;height:8px;flex:0 0 8px;overflow:hidden}.mat-mode-wheel>strong{height:32px;flex:0 0 32px}.mat-mode-wheel svg{width:32px;height:32px;display:block}.mat-mode-wheel>span:first-child svg{transform:translateY(-24px)}
.framing-entry-page .mat-mode-wheel{position:relative;display:block;height:54px;width:36px}
.framing-entry-page .mat-mode-wheel>strong{position:absolute;top:11px;left:2px;width:32px;height:32px;filter:drop-shadow(0 1.5px 1px #00000036)}
.framing-entry-page .mat-mode-wheel>span{position:absolute;left:2px;width:32px;height:8px;opacity:.23;overflow:hidden}
.framing-entry-page .mat-mode-wheel>span:first-child{top:0}.framing-entry-page .mat-mode-wheel>span:last-child{bottom:0}
.framing-entry-page .mat-mode-wheel svg{fill:none;stroke:none}
.framing-entry-page .mat-mode-wheel .mat-mode-lines path{fill:none;stroke:#666;stroke-width:.65}
.framing-entry-page .mat-mode-wheel .mat-mode-blocks path{fill:#858585;stroke:#858585;stroke-width:.3}
.framing-entry-page [data-entry-id="mat-size"] .fixed-slot-visual{display:grid;place-items:center;padding:0}
.framing-entry-page .mat-mode-wheel{width:54px;height:54px;flex:none}
.framing-entry-page .mat-mode-wheel>strong,.framing-entry-page .mat-mode-wheel>span{position:absolute;top:11px;left:11px;bottom:auto;width:32px;height:32px;overflow:visible;display:block;line-height:0;margin:0;padding:0}
.framing-entry-page .mat-mode-wheel>span:first-child{top:11px;transform:translateY(-34px)}
.framing-entry-page .mat-mode-wheel>span:last-child{bottom:auto;transform:translateY(34px)}
.framing-entry-page .mat-mode-wheel svg{width:32px!important;height:32px!important;max-width:none;transform:none!important}
.framing-entry-page :is(.classic-frame-wheel,[data-entry-id="mat-size"],[data-entry-id="mat-color"],.mat-adjust-tab,.mat-spectrum-pad,.frame-width-tab,.frame-adjust-pad,.free-sun-pad,.composite-inline-controls>label,.composite-inline-controls>button,[data-entry-id^="wall-"],[data-entry-id^="scene-"]){transition:scale 160ms ease-out;transform-origin:center center}
.framing-entry-page .adjustment-magnified{scale:1.45;position:relative;z-index:100!important;filter:drop-shadow(0 7px 8px #30291f26)}
.framing-entry-page .free-sun-pad.adjustment-magnified,.framing-entry-page .frame-adjust-pad.adjustment-magnified{position:absolute}
.framing-entry-page .magnifier-overflow{overflow:visible!important;clip-path:none!important;mask-image:none!important;-webkit-mask-image:none!important;contain:none!important;z-index:100!important}
@media(prefers-reduced-motion:reduce){.framing-entry-page .adjustment-magnified{transition:none}}
.mat-depth-icon{position:relative;width:32px;height:36px;transform:rotateY(32deg)}
.mat-depth-icon i{position:absolute;inset:3px;border:5px solid #e9dfc9;box-shadow:1px 2px 2px #665a4659}
.mat-depth-icon i:nth-child(1){transform:translate(-4px,-4px)}.mat-depth-icon i:nth-child(2){transform:translate(0,0);border-color:#f6edda}.mat-depth-icon i:nth-child(3){transform:translate(4px,4px);border-color:#fff7e5}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .framing-entry-page .fixed-slot-visual,.framing-entry-page .framing-global-actions>:is([data-global-action],.favorite-top-button),.framing-entry-page .light-tab-row>button {background:rgba(245,242,233,.82);}
}

/* High-contrast top controls: white linework reverses against the live scene. */
.framing-entry-page.framing-entry-top-icons-outline .framing-global-actions button{color:#fff}
.framing-entry-page.framing-entry-top-icons-outline .framing-global-actions svg,
.framing-entry-page .global-option-glyph,
.framing-entry-page .light-tab-row button>span{
  color:#fff;mix-blend-mode:difference;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.72));
}
.framing-entry-page .global-option-glyph{display:grid;place-items:center;width:25px;height:25px;font-size:21px;line-height:1}
.framing-entry-page .global-option-glyph svg{width:25px;height:25px;fill:none;stroke:#fff;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.framing-entry-page [data-global-action="save"]{position:relative}
.framing-entry-page.project-saved [data-global-action="save"]::after{content:'';position:absolute;right:5px;top:5px;width:7px;height:7px;border-radius:50%;background:#86a995;border:1px solid #fff9;box-shadow:0 2px 7px #314f3d66,0 0 0 2px #fff3}
.framing-save-feedback{position:absolute;z-index:110;left:50%;top:108px;transform:translate(-50%,-7px);margin:0;padding:8px 16px;border:1px solid #ffffffb8;border-radius:18px;color:#4e6356;background:linear-gradient(145deg,#ffffffad,#eef5ef75);-webkit-backdrop-filter:blur(16px) saturate(1.08);backdrop-filter:blur(16px) saturate(1.08);box-shadow:inset 0 1px 1px #fff,0 7px 18px #364d3e2e;font:500 12px/1.2 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;opacity:0;pointer-events:none}
.framing-save-feedback[hidden]{display:none}.framing-save-feedback.is-visible{animation:save-feedback-in 1.5s ease both}@keyframes save-feedback-in{0%{opacity:0;transform:translate(-50%,-7px)}14%,70%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-3px)}}

/* Scene receiver experiments stay separable: exposure and neutral colour-temperature matrix. */
.framing-entry-page .dock-outer{filter:none;transition:filter .28s ease}
.framing-entry-page.scene-adapt-combined .dock-outer{-webkit-filter:brightness(var(--scene-receiver-brightness,1)) url("#scene-receiver-temperature");filter:brightness(var(--scene-receiver-brightness,1)) url("#scene-receiver-temperature")}
.framing-entry-page.scene-adapt-temperature .dock-outer{-webkit-filter:url("#scene-receiver-temperature");filter:url("#scene-receiver-temperature")}
.framing-entry-page.scene-adapt-brightness .dock-outer{-webkit-filter:brightness(var(--scene-receiver-brightness,1));filter:brightness(var(--scene-receiver-brightness,1))}
.framing-entry-page.scene-mat-adapted .dock-mat{background-color:var(--scene-mat-color)!important}
.framing-entry-page.scene-material-adapted .dock-outer{-webkit-filter:none;filter:none}
.framing-entry-page.scene-material-adapted .dock-outer>.dock-frame-piece{
  -webkit-filter:var(--material-filter,none) brightness(var(--scene-outer-brightness,1)) url("#scene-receiver-outer-temperature");
  filter:var(--material-filter,none) brightness(var(--scene-outer-brightness,1)) url("#scene-receiver-outer-temperature")
}
.framing-entry-page.scene-material-adapted .dock-composite-ring>.dock-frame-piece,
.framing-entry-page.scene-material-adapted .dock-inner>.dock-frame-piece{
  -webkit-filter:var(--material-filter,none) brightness(var(--scene-inner-brightness,1)) url("#scene-receiver-inner-temperature");
  filter:var(--material-filter,none) brightness(var(--scene-inner-brightness,1)) url("#scene-receiver-inner-temperature")
}
.adaptive-carved-frame{
  -webkit-filter:var(--carved-shadow,none);
  filter:var(--carved-shadow,none)
}
.framing-entry-page.scene-material-adapted .adaptive-carved-frame{
  /* Carved slices only receive scene brightness. The complete mounted-work
     plane owns the shadow, avoiding a hollow outline and iPhone drag trails. */
  -webkit-filter:var(--carved-shadow,none) brightness(var(--scene-outer-brightness,1));
  filter:var(--carved-shadow,none) brightness(var(--scene-outer-brightness,1))
}
.framing-entry-page.scene-material-adapted .dock-mat{
  -webkit-filter:url("#scene-receiver-mat-temperature");
  filter:url("#scene-receiver-mat-temperature")
}
.framing-entry-page.scene-material-adapted .dock-art{
  -webkit-filter:brightness(var(--scene-artwork-brightness,1)) url("#scene-receiver-artwork-temperature");
  filter:brightness(var(--scene-artwork-brightness,1)) url("#scene-receiver-artwork-temperature")
}
.scene-temperature-filter{position:absolute;left:-2px;top:-2px;width:1px;height:1px;overflow:visible;pointer-events:none}
@media(prefers-reduced-motion:reduce){.framing-entry-page .dock-outer{transition:none}}

/* iOS WebKit/WeChat can retain the off-screen buffer of the eight-piece
   European frame while its filtered parent is transformed.  Scope the mobile
   fallback to that renderer; standard strip frames keep full colour matching. */
@supports (-webkit-touch-callout:none){
  .framing-entry-page.artwork-placement-active .adaptive-carved-frame{-webkit-filter:none;filter:none}
}

/* One page-coordinate illumination canvas crosses wall, frame, mat and art. */
.shared-illumination-field{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none;mix-blend-mode:normal}
.shared-illumination-field[hidden]{display:none}
.scene-light-study-source .framing-entry-empty{opacity:0;pointer-events:none}
.scene-light-study-source .shared-illumination-field,
.scene-light-study-baseline .shared-illumination-field,
.scene-light-study-unadapted .shared-illumination-field{display:none!important}
.scene-light-study-source .scene-receiver-lights,
.scene-light-study-unadapted .scene-receiver-lights,
.scene-light-study-baseline .scene-receiver-lights,
.scene-light-study-ambient-only .scene-receiver-lights,
.scene-light-study-window-only .scene-receiver-lights,
.scene-light-study-fixture-only .scene-receiver-lights,
.scene-light-study-combined .scene-receiver-lights{display:none!important}
.framing-entry-page:not(.scene-light-debug) .placement-guides,
.framing-entry-page:not(.scene-light-debug) .scene-window-light-guide{display:none!important}
.framing-entry-page[data-scene-light-study] .dock-editable>small,
.framing-entry-page[data-scene-light-study] .framing-entry-status,
.framing-entry-page[data-scene-light-study] .gesture-hint{display:none!important}

/* Scene-owned light receivers. These layers contain no fill colour: they only
   continue the photographed window and ceiling-fixture luminance across the
   live frame stack, above frame/mat/artwork and below every editor control. */
.scene-receiver-lights{position:absolute;inset:0;z-index:12;overflow:hidden;pointer-events:none;isolation:isolate}
.scene-receiver-lights>i{position:absolute;inset:0;display:block;background:transparent;pointer-events:none}
.scene-receiver-window-light{
  -webkit-mask-image:linear-gradient(108deg,#000 0%,rgba(0,0,0,.82) 18%,rgba(0,0,0,.48) 42%,rgba(0,0,0,.14) var(--receiver-window-top-extent,62%),transparent var(--receiver-window-bottom-extent,82%));
  mask-image:linear-gradient(108deg,#000 0%,rgba(0,0,0,.82) 18%,rgba(0,0,0,.48) 42%,rgba(0,0,0,.14) var(--receiver-window-top-extent,62%),transparent var(--receiver-window-bottom-extent,82%));
  -webkit-backdrop-filter:brightness(var(--receiver-window-brightness,1));
  backdrop-filter:brightness(var(--receiver-window-brightness,1));
}
.scene-receiver-window-light.from-right{
  -webkit-mask-image:linear-gradient(252deg,#000 0%,rgba(0,0,0,.82) 18%,rgba(0,0,0,.48) 42%,rgba(0,0,0,.14) var(--receiver-window-top-extent,62%),transparent var(--receiver-window-bottom-extent,82%));
  mask-image:linear-gradient(252deg,#000 0%,rgba(0,0,0,.82) 18%,rgba(0,0,0,.48) 42%,rgba(0,0,0,.14) var(--receiver-window-top-extent,62%),transparent var(--receiver-window-bottom-extent,82%));
}
.scene-receiver-window-light.window-band{
  -webkit-mask-image:linear-gradient(108deg,transparent 4%,rgba(0,0,0,.12) 13%,rgba(0,0,0,.72) 25%,#000 38%,#000 56%,rgba(0,0,0,.58) 68%,transparent 84%);
  mask-image:linear-gradient(108deg,transparent 4%,rgba(0,0,0,.12) 13%,rgba(0,0,0,.72) 25%,#000 38%,#000 56%,rgba(0,0,0,.58) 68%,transparent 84%);
}
.scene-receiver-window-light.window-band.from-right{
  -webkit-mask-image:linear-gradient(252deg,transparent 4%,rgba(0,0,0,.12) 13%,rgba(0,0,0,.72) 25%,#000 38%,#000 56%,rgba(0,0,0,.58) 68%,transparent 84%);
  mask-image:linear-gradient(252deg,transparent 4%,rgba(0,0,0,.12) 13%,rgba(0,0,0,.72) 25%,#000 38%,#000 56%,rgba(0,0,0,.58) 68%,transparent 84%);
}
.scene-receiver-window-light.window-side-soft{
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.76) 28%,rgba(0,0,0,.34) 58%,transparent 92%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.76) 28%,rgba(0,0,0,.34) 58%,transparent 92%);
}
.scene-receiver-window-light.window-side-soft.from-right{
  -webkit-mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.76) 28%,rgba(0,0,0,.34) 58%,transparent 92%);
  mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.76) 28%,rgba(0,0,0,.34) 58%,transparent 92%);
}
.scene-receiver-window-light.window-top-soft{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.72) 30%,rgba(0,0,0,.28) 64%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.72) 30%,rgba(0,0,0,.28) 64%,transparent 100%);
}
.scene-receiver-window-shade{
  -webkit-backdrop-filter:brightness(var(--receiver-window-shade,.9));
  backdrop-filter:brightness(var(--receiver-window-shade,.9));
  -webkit-mask-image:linear-gradient(108deg,#000 0%,rgba(0,0,0,.82) 13%,rgba(0,0,0,.16) 25%,transparent 38%,transparent 56%,rgba(0,0,0,.32) 70%,#000 88%);
  mask-image:linear-gradient(108deg,#000 0%,rgba(0,0,0,.82) 13%,rgba(0,0,0,.16) 25%,transparent 38%,transparent 56%,rgba(0,0,0,.32) 70%,#000 88%);
}
.scene-receiver-window-shade.from-right{
  -webkit-mask-image:linear-gradient(252deg,#000 0%,rgba(0,0,0,.82) 13%,rgba(0,0,0,.16) 25%,transparent 38%,transparent 56%,rgba(0,0,0,.32) 70%,#000 88%);
  mask-image:linear-gradient(252deg,#000 0%,rgba(0,0,0,.82) 13%,rgba(0,0,0,.16) 25%,transparent 38%,transparent 56%,rgba(0,0,0,.32) 70%,#000 88%);
}
.scene-receiver-window-shade.window-side-soft{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 24%,rgba(0,0,0,.48) 60%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 24%,rgba(0,0,0,.48) 60%,#000 100%);
}
.scene-receiver-window-shade.window-side-soft.from-right{
  -webkit-mask-image:linear-gradient(270deg,transparent 0%,rgba(0,0,0,.08) 24%,rgba(0,0,0,.48) 60%,#000 100%);
  mask-image:linear-gradient(270deg,transparent 0%,rgba(0,0,0,.08) 24%,rgba(0,0,0,.48) 60%,#000 100%);
}
.scene-receiver-window-shade.window-top-soft{
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.08) 28%,rgba(0,0,0,.5) 68%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.08) 28%,rgba(0,0,0,.5) 68%,#000 100%);
}
.scene-receiver-fixture-light{
  -webkit-backdrop-filter:brightness(var(--receiver-fixture-brightness,1)) contrast(var(--receiver-fixture-contrast,1));
  backdrop-filter:brightness(var(--receiver-fixture-brightness,1)) contrast(var(--receiver-fixture-contrast,1));
}
.scene-receiver-fixture-shade{
  -webkit-backdrop-filter:brightness(var(--receiver-fixture-shade,.76));
  backdrop-filter:brightness(var(--receiver-fixture-shade,.76));
  -webkit-mask-image:radial-gradient(ellipse var(--receiver-fixture-radius-x,48%) var(--receiver-fixture-radius-y,84%) at var(--receiver-fixture-x) var(--receiver-fixture-y,0%),transparent 0%,rgba(0,0,0,.08) 32%,rgba(0,0,0,.58) 68%,#000 100%);
  mask-image:radial-gradient(ellipse var(--receiver-fixture-radius-x,48%) var(--receiver-fixture-radius-y,84%) at var(--receiver-fixture-x) var(--receiver-fixture-y,0%),transparent 0%,rgba(0,0,0,.08) 32%,rgba(0,0,0,.58) 68%,#000 100%);
}
.scene-receiver-fixture-penumbra{
  -webkit-mask-image:radial-gradient(ellipse var(--receiver-fixture-radius-x,54%) var(--receiver-fixture-radius-y,86%) at var(--receiver-fixture-x) var(--receiver-fixture-y,0%),rgba(0,0,0,.9) 0%,rgba(0,0,0,.62) 30%,rgba(0,0,0,.26) 61%,transparent 100%);
  mask-image:radial-gradient(ellipse var(--receiver-fixture-radius-x,54%) var(--receiver-fixture-radius-y,86%) at var(--receiver-fixture-x) var(--receiver-fixture-y,0%),rgba(0,0,0,.9) 0%,rgba(0,0,0,.62) 30%,rgba(0,0,0,.26) 61%,transparent 100%);
}
.scene-receiver-fixture-core{
  -webkit-mask-image:radial-gradient(ellipse 24% 52% at var(--receiver-fixture-x) var(--receiver-fixture-y,0%),rgba(0,0,0,.64),rgba(0,0,0,.25) 44%,transparent 100%);
  mask-image:radial-gradient(ellipse 24% 52% at var(--receiver-fixture-x) var(--receiver-fixture-y,0%),rgba(0,0,0,.64),rgba(0,0,0,.25) 44%,transparent 100%);
}

/* The framing surface is an appliance-like canvas, not a text document. */
.framing-entry-page,.framing-entry-page *{-webkit-user-select:none;user-select:none}

/* Read-only comparison tiles reuse the real renderer without its controls. */
body.scene-comparison-tile .framing-entry-page{width:390px;height:844px;min-height:844px}
body.scene-comparison-tile .framing-entry-head,
body.scene-comparison-tile .framing-global-actions,
body.scene-comparison-tile .framing-global-panel,
body.scene-comparison-tile .framing-entry-dock,
body.scene-comparison-tile .framing-entry-status{display:none!important}
body.scene-comparison-tile .framing-entry-empty{top:0;bottom:0}

/* Owner-defined window-light region: neutral luminance only, with no tint or blur. */
.scene-window-brightness-region{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  -webkit-mask:url('https://yizhuangbiao.com/device-tests/release-85/framing/assets/scene/day-gallery-wall-01/window-region-soft-mask.svg') center/100% 100% no-repeat;
  mask:url('https://yizhuangbiao.com/device-tests/release-85/framing/assets/scene/day-gallery-wall-01/window-region-soft-mask.svg') center/100% 100% no-repeat;
  -webkit-backdrop-filter:brightness(var(--window-region-brightness,1));
  backdrop-filter:brightness(var(--window-region-brightness,1));
}
.scene-window-brightness-region[hidden]{display:none}
.scene-window-light-guide{position:absolute;inset:0;z-index:4;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none}
.scene-window-light-guide[hidden]{display:none}
.window-region-selection{stroke:rgba(255,255,255,.88);stroke-width:1;stroke-dasharray:6 5;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 1px rgba(0,0,0,.72))}
.window-region-leading-edge{stroke:#fff;stroke-width:1.35;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 1px rgba(0,0,0,.9))}
.window-region-anchors rect{fill:#fff;stroke:rgba(29,27,25,.78);stroke-width:1;vector-effect:non-scaling-stroke}

/* No artwork or frame silhouette before a real image has loaded. */
.framing-entry-page:not([data-artwork-persistence="ready"]) .dock-editable,
.framing-entry-page .dock-editable[data-artwork-ready="false"]{visibility:hidden!important;pointer-events:none!important}