/* Devices inhabit one continuous space; the connection controls stay anchored. */
.matte-home .profile-deck { perspective:none; }
.matte-home .home-device-toolbar { margin-bottom:4px; }
.device-reel {
  position:relative; height:222px; margin:0 -28px; overflow:hidden;
  touch-action:pan-y pinch-zoom; user-select:none; -webkit-user-select:none;
  cursor:grab; outline-offset:-5px; border-radius:16px; contain:layout paint;
}
.device-reel.is-dragging { cursor:grabbing; }
.device-reel:focus-visible { outline:2px solid var(--accent); }
.device-reel[aria-disabled="true"] { cursor:default; }
.reel-track { position:absolute; inset:0; perspective:650px; perspective-origin:50% 47%; }
.reel-track:before {
  content:''; position:absolute; width:70%; height:44px; left:15%; top:115px;
  border:1px solid var(--line); border-radius:50%; transform:rotateX(65deg); opacity:.55;
}
.reel-slot {
  position:absolute; width:180px; height:192px; top:5px; left:calc(50% - 90px);
  transform-origin:50% 66%; backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.device-reel[data-moving="true"] .reel-slot { will-change:transform,opacity; }
.reel-model { position:relative; width:180px; height:141px; pointer-events:none; }
.reel-hardware {
  position:absolute; top:3px; left:51px; width:78px; height:124px;
  border:1px solid color-mix(in srgb,var(--ink) 32%,transparent); border-radius:19px;
  background:color-mix(in srgb,var(--panel-solid) 75%,transparent);
  box-shadow:inset 2px 0 0 color-mix(in srgb,var(--ink) 6%,transparent),4px 7px 12px var(--clean-shadow);
}
.reel-screen {
  position:absolute; inset:5px; display:grid; place-items:center; border:1px solid var(--line);
  border-radius:14px; overflow:hidden; background:color-mix(in srgb,var(--matte-control) 70%,transparent);
}
.reel-screen:before { content:''; position:absolute; inset:19px -14px 12px; border:1px solid color-mix(in srgb,var(--accent) 14%,transparent); border-radius:50%; transform:rotate(-35deg); }
.reel-emblem { position:relative; font-family:Georgia,'Times New Roman',serif; font-size:39px; line-height:1; letter-spacing:-6px; padding-right:7px; color:var(--ink); opacity:.85; }
.reel-emblem>span { font-size:.86em; }
.reel-camera { position:absolute; width:19px; height:4px; top:6px; left:calc(50% - 9.5px); border-radius:5px; background:var(--ink); opacity:.28; }
.reel-homebar { position:absolute; width:23px; height:2px; bottom:7px; left:calc(50% - 11.5px); background:var(--ink); opacity:.28; border-radius:3px; }
.reel-contact { position:absolute; width:88px; height:8px; left:46px; bottom:5px; border-radius:50%; background:var(--clean-shadow); opacity:.4; }
.reel-keyboard { display:none; }
.reel-name {
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  height:48px; padding:0 3px; text-align:center; font-size:21px; font-weight:550;
  line-height:1.14; letter-spacing:-.035em; overflow-wrap:anywhere; pointer-events:none;
}
.reel-slot[data-kind="computer"] .reel-hardware { width:132px; height:87px; left:24px; top:26px; border-radius:10px; }
.reel-slot[data-kind="computer"] .reel-screen { inset:5px; border-radius:6px; }
.reel-slot[data-kind="computer"] .reel-camera { top:1px; width:3px; height:3px; left:calc(50% - 1.5px); }
.reel-slot[data-kind="computer"] .reel-homebar { display:none; }
.reel-slot[data-kind="computer"] .reel-keyboard { display:block; position:absolute; top:100%; left:-13px; right:-13px; height:10px; background:color-mix(in srgb,var(--panel-solid) 90%,var(--ink)); border:1px solid color-mix(in srgb,var(--ink) 25%,transparent); border-radius:0 0 12px 12px; transform:perspective(100px) rotateX(30deg); transform-origin:top; }
.reel-slot[data-kind="computer"] .reel-contact { width:140px; left:20px; }
.reel-slot[data-kind="tablet"] .reel-hardware { width:96px; height:120px; left:42px; top:7px; border-radius:13px; }
.reel-slot[data-kind="tablet"] .reel-screen { border-radius:9px; }
.reel-slot[data-kind="other"] .reel-hardware { width:96px; height:96px; left:42px; top:22px; border-radius:24px; }
.reel-slot[data-kind="other"] .reel-screen { inset:7px; border-radius:18px; }
.reel-slot[data-kind="other"] .reel-camera,.reel-slot[data-kind="other"] .reel-homebar { display:none; }
.reel-scale { position:absolute; left:50%; right:50%; bottom:9px; height:3px; pointer-events:none; }
.reel-tick { position:absolute; left:-1.5px; width:3px; height:3px; border-radius:3px; background:var(--ink); transform-origin:center; }
.reel-empty { position:absolute; inset:0; display:none; place-content:center; gap:14px; text-align:center; color:var(--muted); }
.reel-empty svg { width:54px; height:54px; margin:auto; stroke-width:1; opacity:.6; }
.reel-empty strong { font-size:22px; font-weight:500; color:var(--ink); letter-spacing:-.025em; }
.device-reel[data-empty="true"] .reel-empty { display:grid; }
.device-reel[data-empty="true"] .reel-track:before { display:none; }
.reel-announcement { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.matte-home .reel-status { text-align:center; margin:5px 0 0; font-size:12px; line-height:18px; min-height:18px; color:var(--muted); }
.matte-home .connection-focus>.access-pill { text-align:center; font-size:11px; margin-top:4px; }
.matte-home .device-insights-entry { margin-top:17px; min-height:59px; padding-block:11px; }
.matte-home .home-import { margin-top:18px; }
.matte-home.empty-profile .device-reel { height:170px; }
@media(max-width:600px) {
  .device-reel { height:190px; margin-inline:-22px; }
  .reel-slot { top:0; height:171px; }
  .reel-model { height:122px; transform:scale(.85); transform-origin:50% 0; margin-bottom:-1px; }
  .reel-track:before { top:95px; }
  .reel-name { font-size:20px; height:46px; padding-inline:8px; }
  .matte-home .reel-status { margin-top:3px; font-size:11px; }
  .matte-home .device-insights-entry { margin-top:12px; min-height:51px; padding-block:9px; }
  .device-insights-entry>span:first-child { flex-direction:row; align-items:baseline; gap:9px; }
  .device-insights-label { font-size:10px; }
  .device-insights-entry strong { font-size:14px; }
  .device-insights-link { font-size:11px; }
  .matte-home .home-import { margin-top:16px; }
}
@media(max-width:370px) {
  .device-reel { margin-inline:-18px; height:179px; }
  .reel-slot { top:-3px; }
  .reel-model { height:115px; transform:scale(.8); }
  .reel-track:before { top:88px; }
  .reel-name { font-size:19px; height:44px; }
  .device-insights-link { font-size:0; gap:0; }
  .device-insights-link svg { width:16px; height:16px; }
}
@media(max-width:760px) and (max-height:740px) {
  .miniapp .device-reel { height:147px; }
  .miniapp .matte-home .home-device-toolbar { margin-bottom:0; }
  .miniapp .reel-model { height:89px; transform:scale(.64); }
  .miniapp .reel-track:before { top:64px; }
  .miniapp .reel-name { height:40px; font-size:18px; }
  .miniapp .reel-slot { height:137px; top:-2px; }
  .miniapp .reel-scale { bottom:5px; }
  .miniapp .matte-home .device-insights-entry { min-height:44px; margin-top:8px; padding-block:7px; }
  .miniapp .matte-home .home-import { margin-top:12px; }
  .miniapp .matte-home .connection-focus>.access-pill { margin-top:2px; font-size:10px; }
  .miniapp .matte-home .connection-focus>.access-pill:not(.inactive) { display:none; }
}
@media(prefers-reduced-motion:reduce) { .device-reel[data-moving="true"] .reel-slot { will-change:auto; } }
.reduce-glass .reel-hardware,:root[data-reduce-glass="true"] .reel-hardware { background:var(--panel-solid); }
@media(prefers-reduced-transparency:reduce) { .reel-hardware { background:var(--panel-solid); } }
@media(forced-colors:active) { .reel-hardware,.reel-screen { background:Canvas; border-color:CanvasText; }.reel-tick { background:CanvasText; } }