#magnetic-charge { --duo-green:#46e76d; --duo-scale:1; --duo-rear-light:#f4f3ef; --duo-rear-dark:#daddd7; --duo-metal-light:#e8ece2; --duo-metal-mid:#a0ab9c; --duo-metal-dark:#586451; --duo-pack-light:#dce1e2; --duo-pack-mid:#bcc5c8; --duo-pack-dark:#8e9b9f; position:relative; min-width:0; width:100%; padding-bottom:34px; color:var(--ink); }
#magnetic-charge .duo-product { position:relative; width:100%; height:auto; max-height:500px; aspect-ratio:31/25; overflow:hidden; background:radial-gradient(ellipse at 58% 43%,#eaf6ee 0%,#f6faf7 42%,transparent 73%); isolation:isolate; }
#magnetic-charge .duo-scene { width:620px; height:500px; position:absolute; left:50%; top:0; margin-left:-310px; transform:scale(var(--duo-scale)); transform-origin:50% 0; opacity:var(--duo-scene-alpha,1); }
#magnetic-charge .duo-aura { position:absolute; left:95px; top:64px; width:430px; height:350px; border-radius:50%; background:radial-gradient(ellipse,rgba(101,230,144,.16),rgba(101,230,144,0) 68%); opacity:var(--duo-aura,.4); }
#magnetic-charge .duo-shadow { position:absolute; top:410px; left:105px; width:410px; height:63px; border-radius:50%; background:rgba(21,47,34,.18); filter:blur(23px); transform:scaleX(var(--duo-shadow-scale,.7)); opacity:var(--duo-scene-alpha,1); }
#magnetic-charge .duo-perspective { position:absolute; left:310px; top:238px; perspective:1350px; perspective-origin:0 -80px; transform-style:preserve-3d; }
#magnetic-charge .duo-assembly { position:absolute; width:0; height:0; transform-style:preserve-3d; transform-origin:var(--duo-pivot,115px) 0 -7px; transform:translateX(var(--duo-center,-115px)) rotateZ(-7deg) rotateX(9deg) rotateY(var(--duo-yaw,-18deg)); }
#magnetic-charge .duo-half { position:absolute; top:-165px; width:230px; height:330px; transform-style:preserve-3d; }
#magnetic-charge .duo-right { left:0; }
#magnetic-charge .duo-wing { left:-230px; transform-origin:100% 50%; transform:rotateY(var(--duo-fold,179deg)); }
#magnetic-charge .duo-face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
#magnetic-charge .duo-inner { padding:5px; background:linear-gradient(115deg,#f5f4e9 0%,#b7b9af 11%,#424b46 25%,#e9e8dd 45%,#8a918a 64%,#eaeee3 83%,#7d847b 100%); box-shadow:inset 0 0 0 1px #5b655d; overflow:hidden; }
#magnetic-charge .duo-inner-left { right:-2px; border-radius:28px var(--duo-spine-radius,24px) var(--duo-spine-radius,24px) 28px; transform:translateZ(0.5px); }
#magnetic-charge .duo-inner-right { left:-2px; border-radius:var(--duo-spine-radius,24px) 28px 28px var(--duo-spine-radius,24px); transform:translateZ(0.5px); }
#magnetic-charge .duo-inner-unified { inset:auto; left:-230px; top:-165px; width:460px; height:330px; border-radius:28px; transform:translateZ(.55px); visibility:hidden; }
#magnetic-charge .duo-inner-unified::before { border-radius:24px; }
#magnetic-charge .duo-inner::before { content:""; position:absolute; inset:4px; z-index:1; border:4px solid #080c0b; pointer-events:none; }
#magnetic-charge .duo-inner-left::before { right:-1px; border-radius:24px 0 0 24px; border-right:0; }
#magnetic-charge .duo-inner-right::before { left:-1px; border-radius:var(--duo-spine-radius,24px) 24px 24px var(--duo-spine-radius,24px); border-left:0; }
#magnetic-charge .duo-inner-left::after { content:""; position:absolute; top:5px; bottom:5px; left:5px; right:-1px; border-radius:22px 0 0 22px; background:linear-gradient(90deg,rgba(0,0,0,var(--duo-wing-shade,0)),transparent 80%); pointer-events:none; }
#magnetic-charge .duo-inner-art { position:absolute; top:6px; bottom:6px; width:448px; background:radial-gradient(ellipse at 50% 52%,rgba(70,154,112,var(--duo-screen-glow,0)) 0%,transparent 57%),linear-gradient(145deg,#172623,#080e0c 34%,#0e1915 70%,#172b23); }
#magnetic-charge .duo-art-left { left:6px; border-radius:20px; }
#magnetic-charge .duo-art-right { right:6px; border-radius:20px; }
#magnetic-charge .duo-art-unified { left:6px; border-radius:20px; }
#magnetic-charge .duo-glass { position:absolute; top:6px; bottom:6px; width:448px; border-radius:20px; background:linear-gradient(116deg,rgba(255,255,255,.075),transparent 43%,transparent 70%,rgba(178,217,199,.04)); pointer-events:none; }
#magnetic-charge .duo-inner-left .duo-glass { left:6px; }
#magnetic-charge .duo-inner-right .duo-glass { right:6px; }
#magnetic-charge .duo-inner-unified .duo-glass { left:6px; }
#magnetic-charge .duo-rim { position:absolute; inset:0; border-radius:27px; background:linear-gradient(110deg,#c0c3bb,#fbfaf1 17%,#8d958c 37%,#282e29 39%,#e3e6dc 47%,#8b958c 80%,#eef0e8); transform:translateZ(-14px); box-shadow:0 0 0 1px #5d675e; }
#magnetic-charge .duo-rim-right { border-radius:24px 28px 28px 24px; }
#magnetic-charge .duo-rim-left { border-radius:28px 24px 24px 28px; }
#magnetic-charge .duo-body-face { position:absolute; left:0; top:0; transform-origin:0 0; backface-visibility:visible; -webkit-backface-visibility:visible; background:linear-gradient(0deg,var(--duo-metal-light) 0%,var(--duo-metal-mid) 27%,var(--duo-metal-mid) 64%,var(--duo-metal-light) 100%); }
#magnetic-charge .duo-body-spine { background:linear-gradient(180deg,#111d18,#0a120e 45%,#101d16); }
#magnetic-charge .duo-bottom { position:absolute; top:330.04px; left:18px; height:14px; width:194px; transform:rotateX(-90deg); transform-origin:50% 0; backface-visibility:visible; display:flex; align-items:center; justify-content:center; gap:16px; }
#magnetic-charge .duo-port { display:block; width:28px; height:6px; border-radius:5px; background:#1c231e; box-shadow:0 0 0 1px #9da69b,inset 0 1px 1px #000; }
#magnetic-charge .duo-speakers { width:36px; height:4px; background:radial-gradient(circle,#29332b 1.3px,transparent 1.5px) 0 0 / 6px 4px; }
#magnetic-charge .duo-side-button { position:absolute; right:-3px; top:82px; width:4px; height:40px; border-radius:3px; transform:translateZ(-6px); background:linear-gradient(90deg,#404b42,#d8ded2,#899582); }
#magnetic-charge .duo-cover { padding:4px; border-radius:24px 28px 28px 24px; transform:rotateY(180deg) translateZ(14.05px); background:linear-gradient(130deg,#fbfcf3,#a0a99d 18%,#e2e5db 29%,#6c776b 50%,#e5eadf 72%,#84937f); box-shadow:inset 0 0 0 1px #4e5a4f; }
#magnetic-charge .duo-cover-glass { position:absolute; inset:4px; overflow:hidden; border:4px solid #090e0b; border-radius:20px 24px 24px 20px; background:#b9d1ce; }
#magnetic-charge .duo-wallpaper { position:absolute; inset:0; overflow:hidden; background:linear-gradient(162deg,#789fa9 0%,#c5d3c6 42%,#d9c9a5 70%,#bca27e 100%); }
#magnetic-charge .duo-dune { position:absolute; width:440px; height:250px; border-radius:50%; box-shadow:inset 0 2px 1px rgba(255,255,234,.5); }
#magnetic-charge .duo-dune-far { left:-160px; top:170px; transform:rotate(24deg); background:linear-gradient(174deg,#e2d8b5,#9f956f 44%,#6c7961 80%); }
#magnetic-charge .duo-dune-near { left:-25px; top:220px; transform:rotate(-21deg); background:linear-gradient(170deg,#ded7b8,#a6ad8e 46%,#697965 92%); }
#magnetic-charge .duo-island { position:absolute; top:10px; left:50%; width:58px; height:16px; margin-left:-29px; border-radius:14px; background:#0a100e; box-shadow:inset 0 0 1px #050706; }
#magnetic-charge .duo-island::after { content:""; position:absolute; right:6px; top:5px; width:6px; height:6px; border-radius:50%; background:radial-gradient(circle at 40% 30%,#304557,#101f25 45%,#050909 70%); }
#magnetic-charge .duo-lock { position:absolute; left:0; right:0; top:51px; color:#eff6e9; text-align:center; font:500 60px/1.1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif; letter-spacing:-3px; text-shadow:0 1px 12px rgba(38,64,50,.12); opacity:calc(1 - var(--duo-outer-charge,0)); }
#magnetic-charge .duo-wallpaper { filter:brightness(calc(1 - .87 * var(--duo-outer-charge,0))); }
#magnetic-charge .duo-home-indicator { position:absolute; bottom:8px; left:50%; width:75px; height:3px; margin-left:-37.5px; border-radius:4px; background:rgba(255,255,248,.8); }
#magnetic-charge .duo-reflection { position:absolute; inset:0; background:linear-gradient(118deg,rgba(255,255,255,.16),transparent 38%,transparent 75%,rgba(255,255,255,.07)); }
#magnetic-charge .duo-charging { position:absolute; width:240px; height:240px; left:104px; top:39px; transform:scale(var(--duo-charge-scale,.94)); opacity:var(--duo-charge,0); color:var(--duo-green); font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif; }
#magnetic-charge .duo-outer-charging { left:calc(50% - 120px); top:calc(50% - 120px); transform:scale(.72); opacity:var(--duo-outer-charge,0); }
#magnetic-charge .duo-outer-charging .duo-charge-label { font-size:calc(var(--duo-screen-type,15px) * 1.3); }
#magnetic-charge .duo-hinge-cover { position:absolute; left:0; top:-165px; width:0; height:0; transform-style:preserve-3d; }
#magnetic-charge .duo-hinge-face { position:absolute; left:0; top:0; transform-origin:0 0; backface-visibility:hidden; -webkit-backface-visibility:hidden; background:var(--duo-metal-mid); background:color-mix(in srgb,var(--duo-metal-light) var(--duo-hinge-shine,65%),var(--duo-metal-dark)); }
#magnetic-charge .duo-hinge-internal { display:none; }
#magnetic-charge .duo-hinge-rail { background:#293431; }
#magnetic-charge .duo-hinge-panel { border-radius:7px; background:linear-gradient(90deg,var(--duo-metal-dark),var(--duo-metal-light) 4%,var(--duo-metal-mid) 15%,var(--duo-metal-light) 26%,var(--duo-metal-mid) 82%,var(--duo-metal-light) 96%,var(--duo-metal-dark)); box-shadow:inset 0 0 0 .6px var(--duo-metal-dark); }
#magnetic-charge .duo-charge-halo { position:absolute; inset:-34px; border-radius:50%; background:radial-gradient(circle,rgba(80,231,132,.12),rgba(80,231,132,.05) 44%,transparent 68%); transform:scale(var(--duo-breathe,1)); }
#magnetic-charge .duo-magsafe-ring { position:absolute; left:15px; top:0; width:210px !important; height:210px !important; max-width:none; }
#magnetic-charge .duo-magsafe-bolt { position:absolute; left:91px; top:76px; width:58px; height:58px; color:#46e76d; }
#magnetic-charge .duo-magsafe-bolt svg { width:58px !important; height:58px !important; fill:currentColor; stroke-width:1.8; }
#magnetic-charge .duo-charge-label { position:absolute; top:202px; left:0; right:0; text-align:center; font-size:var(--duo-screen-type,15px); font-weight:400; letter-spacing:.2px; color:#e6eee8; }
#magnetic-charge .duo-back-view { position:absolute; inset:0; transform:rotateY(180deg) translateZ(14.08px); transform-style:preserve-3d; }
#magnetic-charge .duo-rear-panel { position:absolute; inset:0; border-radius:24px 28px 28px 24px; background:linear-gradient(115deg,rgba(255,255,255,.23),transparent 52%),linear-gradient(150deg,var(--duo-rear-light),var(--duo-rear-dark)); box-shadow:inset 0 0 0 1px rgba(76,86,78,.3),inset 0 0 0 4px rgba(255,255,255,.12); backface-visibility:hidden; }
#magnetic-charge .duo-camera { position:absolute; left:14px; top:16px; width:202px; height:72px; transform:translateZ(6px); transform-style:preserve-3d; }
#magnetic-charge .duo-camera-plate { position:absolute; inset:0; border-radius:36px; transform:translateZ(.3px); background:linear-gradient(145deg,var(--duo-rear-light),var(--duo-rear-dark)); box-shadow:inset 0 0 0 1px rgba(155,165,155,.7),0 2px 3px rgba(36,44,34,.1); backface-visibility:hidden; }
#magnetic-charge .duo-lens { position:absolute; top:7px; width:58px; height:58px; transform:translateZ(4px); transform-style:preserve-3d; }
#magnetic-charge .duo-lens-main { left:10px; }
#magnetic-charge .duo-lens-wide { left:79px; }
#magnetic-charge .duo-lens-glass { position:absolute; inset:0; border-radius:50%; transform:translateZ(.3px); background:radial-gradient(ellipse at 32% 18%,rgba(214,222,244,.3),transparent 34%),radial-gradient(circle at 50% 53%,#061119 0 12%,#2c3443 13%,#0b111b 20%,#151a24 22%,#11141c 44%,#06080d 65%,#727c7b 67%,#d9dfd8 71%,#65706a 74%,#101614 76%); box-shadow:0 1px 1px rgba(0,0,0,.4); backface-visibility:hidden; }
#magnetic-charge .duo-lens-glass::after { content:""; position:absolute; top:23px; left:24px; width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 30% 28%,#637b92,#253e4e 28%,#0b1527 55%,#060a13 75%); box-shadow:inset 0 0 2px #768786; }
#magnetic-charge .duo-camera-flash { position:absolute; right:22px; top:39px; width:13px; height:13px; transform:translateZ(1px); border-radius:50%; background:radial-gradient(circle,#e8eadf 25%,#fffefa 42%,#d2d8cf 67%,#b4bfb3 72%,#edf0e7 80%); }
#magnetic-charge .duo-camera-mic { position:absolute; right:24px; top:17px; width:9px; height:5px; transform:translateZ(1px); border-radius:4px; background:repeating-linear-gradient(90deg,#4e5850,#4e5850 1px,#86917f 1px,#86917f 2px); }
#magnetic-charge .duo-pack { position:absolute; left:26px; top:98px; width:178px; height:220px; transform-origin:89px 110px -13px; transform:translate3d(var(--duo-pack-x,235px),var(--duo-pack-y,14px),var(--duo-pack-z,148px)) rotateY(var(--duo-pack-spin,180deg)); transform-style:preserve-3d; opacity:var(--duo-pack-visible,0); }
#magnetic-charge .duo-pack-front { position:absolute; inset:0; overflow:hidden; border-radius:14px; transform:translateZ(.3px); backface-visibility:hidden; background:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0,rgba(255,255,255,.045) .5px,transparent .5px,transparent 2px),linear-gradient(140deg,var(--duo-pack-light),var(--duo-pack-mid) 63%,var(--duo-pack-dark)); box-shadow:inset 0 0 0 1px rgba(59,74,78,.4),inset 0 0 0 3px rgba(255,255,255,.18); }
#magnetic-charge .duo-wayto-logo { position:absolute; top:40px; left:25px; width:128px; height:auto; object-fit:contain; }
#magnetic-charge .duo-pack-print { position:absolute; bottom:24px; left:13px; font:500 8px/1.2 -apple-system,BlinkMacSystemFont,sans-serif; letter-spacing:.9px; color:#44545a; }
#magnetic-charge .duo-pack-display { position:absolute; bottom:14px; right:11px; width:55px; height:39px; border-radius:4px; transform:skewY(-1deg); background:#07100e; box-shadow:inset 0 0 0 1px #53615b; color:#f2fff5; font:500 10px/1.1 -apple-system,BlinkMacSystemFont,sans-serif; display:flex; align-items:center; justify-content:center; gap:2px; }
#magnetic-charge .duo-pack-display small { font-size:6px; }
#magnetic-charge .duo-pack-status { position:absolute; bottom:5px; right:5px; color:#85cbd0; font-size:5px; font-weight:400; letter-spacing:.3px; }
#magnetic-charge .duo-pack-meter { position:absolute; width:27px; height:27px; top:5px; left:4px; border:2px solid #7ce68f; border-radius:50%; opacity:.85; }
#magnetic-charge .duo-pack-display > span:nth-child(2) { position:absolute; left:8px; top:13px; }
#magnetic-charge .duo-pack-contact { position:absolute; inset:0; border-radius:14px; transform:rotateY(180deg) translateZ(26.2px); background:linear-gradient(140deg,var(--duo-pack-mid),var(--duo-pack-dark)); box-shadow:inset 0 0 0 1px rgba(60,70,75,.45),inset 0 0 0 3px rgba(255,255,255,.18); backface-visibility:hidden; }
#magnetic-charge .duo-magnet-ring { position:absolute; left:26px; top:25px; width:126px; height:126px; border:5px solid rgba(248,250,245,.7); border-radius:50%; }
#magnetic-charge .duo-magnet-align { position:absolute; left:84px; top:166px; width:10px; height:27px; border-radius:7px; background:rgba(248,250,245,.7); }
#magnetic-charge .duo-nfc { position:absolute; left:78px; top:77px; width:24px; height:24px; color:rgba(248,250,245,.8); }
#magnetic-charge .duo-nfc::before { content:""; position:absolute; left:0; top:3px; width:10px; height:18px; border:1px solid currentColor; border-radius:2px; transform:rotate(-12deg); }
#magnetic-charge .duo-nfc i { position:absolute; left:10px; top:6px; width:4px; height:12px; border-right:1px solid currentColor; border-radius:50%; }
#magnetic-charge .duo-nfc i:nth-child(2) { top:3px; width:7px; height:18px; }
#magnetic-charge .duo-nfc i:nth-child(3) { top:0; width:10px; height:24px; }
#magnetic-charge .duo-pack .duo-body-face { background:linear-gradient(0deg,var(--duo-pack-light),var(--duo-pack-dark) 42%,var(--duo-pack-mid) 68%,var(--duo-pack-light)); }
#magnetic-charge .duo-pack-port { position:absolute; top:220.05px; left:77px; width:24px; height:26px; transform:rotateX(-90deg); transform-origin:50% 0; }
#magnetic-charge .duo-pack-port::after { content:""; position:absolute; top:10px; width:24px; height:6px; border-radius:5px; background:#13201d; box-shadow:inset 0 1px 0 #63796d; }
#magnetic-charge[data-phone="night"] { --duo-rear-light:#424a50; --duo-rear-dark:#252e35; --duo-metal-light:#818d93; --duo-metal-mid:#4e5d65; --duo-metal-dark:#1b2b35; }
#magnetic-charge[data-phone="night"] .duo-inner,#magnetic-charge[data-phone="night"] .duo-cover,#magnetic-charge[data-phone="night"] .duo-rim { background:linear-gradient(125deg,var(--duo-metal-light),var(--duo-metal-dark) 30%,var(--duo-metal-mid) 70%,var(--duo-metal-light)); }
#magnetic-charge[data-pack="graphite"] { --duo-pack-light:#657078; --duo-pack-mid:#3f4b54; --duo-pack-dark:#242f36; }
#magnetic-charge[data-pack="plum"] { --duo-pack-light:#8d627f; --duo-pack-mid:#714563; --duo-pack-dark:#4e2947; }
#magnetic-charge[data-pack="graphite"] .duo-pack-print,#magnetic-charge[data-pack="plum"] .duo-pack-print { color:#d6dfe0; }
#magnetic-charge .magnetic-motion-toggle { position:absolute; right:0; bottom:0; min-height:32px; padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.88); color:var(--ink-2); font:400 12px/1.4 var(--font); cursor:pointer; }
#magnetic-charge .magnetic-motion-toggle[hidden] { display:none; }
@media(pointer:coarse) {
  #magnetic-charge { padding-bottom:46px; }
  #magnetic-charge .magnetic-motion-toggle { min-height:44px; padding:10px 14px; }
}

/* Localized parameter leaders, timed with the magnetic charging sequence. */
#magnetic-charge{container-type:inline-size}
.charge-annotation-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:0}
.charge-leader{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.charge-leader-path{stroke:#719380;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.charge-leader-dot{fill:#498458}
.charge-annotation{position:absolute;left:0;top:0;max-width:135px;opacity:0;font-family:var(--font);line-height:1.5}
.charge-annotation-label{display:block;color:#687d70;font-size:11px;font-weight:400;overflow-wrap:anywhere;hyphens:auto}
.charge-annotation-value{display:block;color:#2c5140;font-size:14px;font-weight:550;line-height:1.35;overflow-wrap:anywhere;hyphens:auto}
.duo-spec-anchor{position:absolute;width:0;height:0;pointer-events:none;transform:translateZ(.6px)}
@container(max-width:390px){.charge-annotation{max-width:108px}.charge-annotation-value{font-size:12px}.charge-annotation-label{font-size:11px}}