/* Independent 3D phone. Layout uses actual CSS pixels, never a scaled iframe. */
body[data-page="product"] .phone-stage{background:transparent;color:#18202b;box-shadow:none;border-radius:0;isolation:auto;overflow:visible;height:100%;max-height:900px;min-height:480px;display:block;animation:none}
.phone-stage:before,.phone-stage:after{display:none}.phone-space{position:relative;width:100%;height:100%;perspective:1800px;touch-action:none;cursor:grab;outline:none}.phone-space:focus-visible{outline:2px solid #3267ee;border-radius:24px;outline-offset:4px}.phone-space.is-dragging{cursor:grabbing}.phone-shadow{position:absolute;left:50%;bottom:3%;width:40%;height:24px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,#18202b22,transparent 72%);filter:blur(9px);pointer-events:none}
.phone-size{position:absolute;width:var(--device-width,360px);height:var(--device-height,757px);--u:calc(var(--device-width,360px) / 390);transform-style:preserve-3d}.phone-rotator{width:100%;height:100%;position:relative;transform-style:preserve-3d;user-select:none}.phone-slice{position:absolute;inset:0;border-radius:calc(var(--u)*60);background:linear-gradient(112deg,#626771,#d8dbe0 6%,#5e6570 12%,#252a31 44%,#989ea6 80%,#edf0f2 94%,#616773);box-shadow:inset 0 0 0 1px #a4a9b1;pointer-events:none}
.phone-front{position:absolute;inset:0;border-radius:calc(var(--u)*60);background:#080a0d;backface-visibility:hidden;box-shadow:inset 0 0 0 1px #dde0e5,inset 0 0 0 3px #444a53,inset 0 0 0 5px #080a0d;overflow:hidden;cursor:grab}.phone-screen{position:absolute;inset:calc(var(--u)*11);border-radius:calc(var(--u)*49);background:#f2f4f7;overflow:hidden;border:1px solid #000}.phone-screen iframe{display:block;width:100%;height:100%;border:0;position:relative;z-index:1;background:#f2f4f7}.phone-island{position:absolute;top:calc(var(--u)*11);left:50%;transform:translateX(-50%);width:calc(var(--u)*106);height:calc(var(--u)*29);background:#050608;border-radius:20px;z-index:3;pointer-events:none;box-shadow:inset 0 0 1px 1px #272a30}.phone-island:after{content:"";position:absolute;right:9px;top:7px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#223657,#08101c 45%,#010203 70%);box-shadow:0 0 2px #273448}
.phone-back{position:absolute;inset:0;border-radius:calc(var(--u)*60);transform:translateZ(calc(var(--u)*-22)) rotateY(180deg);backface-visibility:hidden;background:linear-gradient(125deg,#d0d5de,#b7bec9 46%,#cbd0d8 80%,#e3e6eb);box-shadow:inset 0 0 0 2px #707985,inset 0 0 0 5px #ced4de;transform-style:preserve-3d}.phone-back:after{content:"";position:absolute;inset:7px;border-radius:calc(var(--u)*52);border:1px solid #fff7;background:linear-gradient(120deg,#fff2,transparent 50%,#fff1);pointer-events:none}.phone-back-brand{position:absolute;left:0;right:0;top:48%;text-align:center;font-size:26px;font-weight:600;color:#748090}.phone-back-note{display:none}.camera-bump{position:absolute;left:calc(var(--u)*25);top:calc(var(--u)*26);width:calc(var(--u)*162);height:calc(var(--u)*173);border-radius:calc(var(--u)*39);background:linear-gradient(130deg,#e3e6eb,#9ca6b4);box-shadow:0 2px 1px #606c7b,3px 5px 9px #53607355,inset 0 0 0 1px #eef1f6;transform:translateZ(5px);transform-style:preserve-3d}.camera-lens{position:absolute;width:calc(var(--u)*65);height:calc(var(--u)*65);border-radius:50%;background:radial-gradient(circle at 44% 40%,#0d243e 0%,#03060b 28%,#111720 46%,#03050a 57%,#647080 60%,#b2bcc8 64%,#747e8d 69%,#bbc4ce 72%,#6b7481 76%,#b2bbc6 83%);box-shadow:1px 3px 3px #3e47577d,inset 0 0 0 1px #e5ebf3;transform:translateZ(5px)}.camera-lens:after{content:"";position:absolute;width:11px;height:7px;left:30%;top:30%;background:#536cb759;border-radius:50%;filter:blur(2px)}.camera-lens:nth-child(1){top:7.5%;left:7.5%}.camera-lens:nth-child(2){bottom:7.5%;left:7.5%}.camera-lens:nth-child(3){right:6%;top:31%}.camera-flash{position:absolute;right:18%;top:10%;width:calc(var(--u)*25);height:calc(var(--u)*25);border-radius:50%;background:radial-gradient(#f7f2d8,#e7e6df 60%,#a3adba 70%);transform:translateZ(3px)}.camera-sensor{position:absolute;right:23%;bottom:10%;width:calc(var(--u)*15);height:calc(var(--u)*15);background:#29333f;border-radius:50%}.phone-button{position:absolute;width:4px;border-radius:3px;background:linear-gradient(90deg,#5f6670,#d5dbe3,#7b8491);box-shadow:0 0 1px #424b59;transform:translateZ(-10px)}.phone-button.power{right:-3px;top:28%;height:10%}.phone-button.volume-up{left:-3px;top:22.5%;height:7%}.phone-button.volume-down{left:-3px;top:31%;height:7%}.phone-button.silent{left:-3px;top:15.5%;height:3.3%}.phone-loading{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:#687385;z-index:0}.phone-stage[aria-busy=true] .phone-loading{z-index:4}.phone-stage:not([aria-busy=true]) .phone-loading{display:none}
.phone-stage~.product-update-note{position:static;transform:none;grid-column:2;grid-row:2;width:auto;max-width:none;margin-top:-12px;font-size:10px}.product-layout:has(.phone-stage){grid-template-rows:minmax(0,1fr) auto;row-gap:12px}.product-layout:has(.phone-stage)>.product-rail{grid-row:1}.product-layout:has(.phone-stage)>.phone-stage{grid-column:2;grid-row:1}
@media(min-width:901px) and (max-height:700px){html:has(body[data-page="product"]){overflow:auto}body[data-page="product"]{min-height:740px;height:auto}.product-page:has(.phone-stage){min-height:620px}}
@media(max-width:900px){html:has(body[data-page="product"]){height:auto;overflow:auto}body[data-page="product"]{height:auto;min-height:100svh;overflow:visible;display:block}body[data-page="product"] .product-page{overflow:visible}.product-layout:has(.phone-stage){height:auto;display:flex;flex-direction:column;gap:22px;padding:25px 0}.product-layout:has(.phone-stage)>.product-rail{width:100%}.product-layout:has(.phone-stage) .product-lead{display:block}.product-layout:has(.phone-stage) .product-intro h1{font-size:38px}.product-layout:has(.phone-stage) .product-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.product-layout:has(.phone-stage) .product-tab{padding:0 5px;justify-content:center;font-size:12px}.product-layout:has(.phone-stage) .product-tab-name{font-size:12px}body[data-page="product"] .phone-stage{height:770px;min-height:0;max-height:none;width:100%}.phone-stage~.product-update-note{margin:0;text-align:center;position:static;transform:none;font-size:10px}}
@media(max-width:450px){body[data-page="product"] .phone-stage{height:690px}}
/* iPhone 18 Pro exterior study: broad camera plateau and inset rear glass. */
.phone-back{background:linear-gradient(125deg,#dce5ee,#becbd9 47%,#d2dce8 84%,#e4ebf3);box-shadow:inset 0 0 0 1px #8696a9,inset 0 0 0 4px #c9d4e1}.phone-back:after{background:linear-gradient(130deg,#fff2,transparent 55%);border-color:#ffffff55}.rear-glass{position:absolute;left:5.5%;right:5.5%;top:31%;bottom:3%;border-radius:calc(var(--u)*43);background:linear-gradient(145deg,#d8e2ed,#c7d3e0 68%,#d5dfe9);box-shadow:inset 0 0 0 1px #b9c6d444,inset 0 2px 3px #f5f8fc55}.phone-apple{position:absolute;left:44%;top:49%;width:12%;height:auto;fill:#8394a8;opacity:.8;transform:translateZ(1px)}.camera-bump{left:5.5%;right:5.5%;top:3%;width:auto;height:25%;border-radius:calc(var(--u)*41);background:linear-gradient(120deg,#d5e0ed,#b5c5d7 70%,#c2d0df);box-shadow:0 3px 2px #8496aa,2px 7px 10px #74849a55,inset 0 0 0 1px #eff5ff;transform:translateZ(8px)}.camera-lens{width:calc(var(--u)*82);height:calc(var(--u)*82);background:radial-gradient(circle at 47% 43%,#284061 0%,#050c18 13%,#141c28 23%,#020407 34%,#161b22 45%,#020407 55%,#10151d 61%,#374555 64%,#d6e2ef 67%,#8a9db3 70%,#b9ccdf 77%,#8196ac 82%,#b6c7da 91%)}.camera-lens:nth-child(1){left:6%;top:6%}.camera-lens:nth-child(2){left:6%;bottom:6%}.camera-lens:nth-child(3){left:34%;right:auto;top:29%}.camera-flash{right:10%;top:14%;width:calc(var(--u)*29);height:calc(var(--u)*29)}.camera-sensor{right:10%;bottom:12%;width:calc(var(--u)*28);height:calc(var(--u)*28);background:radial-gradient(#111721,#040609 70%);transform:translateZ(2px)}.camera-mic{position:absolute;right:14%;top:49%;width:4px;height:4px;background:#303d4b;border-radius:50%;box-shadow:inset 0 0 0 1px #94a6ba;transform:translateZ(2px)}.phone-button.camera-control{right:-3px;top:64%;height:8%;width:4px}.phone-bottom,.phone-top-edge{position:absolute;left:13%;right:13%;height:calc(var(--u)*22);background:linear-gradient(#768494,#d5dee8 35%,#9eafc2 75%,#738398);transform-origin:50% 0;transform:rotateX(-90deg);transform-style:preserve-3d;backface-visibility:hidden}.phone-bottom{top:100%;border-radius:2px}.phone-top-edge{top:0;transform:translateZ(calc(var(--u)*-22)) rotateX(90deg)}.usb-port{position:absolute;width:calc(var(--u)*45);height:calc(var(--u)*12);left:50%;top:50%;transform:translate(-50%,-50%) translateZ(.3px);background:#070a0e;border-radius:calc(var(--u)*6);border:1px solid #687887;box-shadow:0 0 0 1px #d8e3ed,inset 0 2px 2px #000}.usb-port i{position:absolute;left:12%;right:12%;top:45%;height:2px;background:#4b535d;border-radius:2px}.port-screw{position:absolute;top:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:radial-gradient(#273647 35%,#98a9bc 40%,#556878 70%);transform:translateZ(.3px)}.port-screw.left{left:35%}.port-screw.right{right:35%}.speaker-grille{position:absolute;top:50%;display:flex;gap:calc(var(--u)*5);transform:translateY(-50%) translateZ(.3px)}.speaker-grille.left{left:2%}.speaker-grille.right{right:2%}.speaker-grille i{width:calc(var(--u)*4);height:calc(var(--u)*7);border-radius:3px;background:#1f2c39;box-shadow:inset 0 0 1px #000}
.phone-back-brand{color:#8394a8;font-size:calc(var(--u)*27);font-weight:650;letter-spacing:1px;top:50%;transform:translateZ(1px)}.phone-display-note{grid-column:2;grid-row:2;text-align:center;margin:0;font-size:12px;line-height:1.7;color:#7b8490}.phone-stage~.product-update-note{grid-row:3;margin-top:3px}.product-layout:has(.phone-stage){grid-template-rows:minmax(0,1fr) auto auto;row-gap:9px}@media(max-width:900px){.phone-display-note{font-size:11px;padding:0 12px}}

/* Dynamic Island: intentional user playback, real audio-driven bars. */
.music-island{pointer-events:auto;cursor:pointer;border:0;padding:4px 9px;width:calc(var(--u)*124);height:calc(var(--u)*32);min-height:27px;display:flex;align-items:center;justify-content:space-between;color:#f5f5f7;transition:width .32s cubic-bezier(.2,.8,.2,1),box-shadow .2s;touch-action:none;font-family:inherit}.music-island:after{display:none}.music-island:hover{box-shadow:inset 0 0 0 1px #62656c,0 0 0 3px #0000000b}.music-island:focus-visible{outline:2px solid #3264ff;outline-offset:3px}.music-island.is-playing{width:calc(var(--u)*146)}.island-art{display:grid;place-items:center;width:23px;height:23px;border-radius:6px;background:linear-gradient(140deg,#f0f1f3,#b6bcc5);color:#242a33;flex-shrink:0}.island-art svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}.island-play{display:grid;place-items:center;width:23px;height:23px}.island-play svg{width:16px;height:16px;fill:currentColor}.island-bars{height:20px;display:flex;align-items:center;gap:2px}.island-bars i{width:3px;height:16px;border-radius:2px;background:#bbbfc7;transform:scaleY(.18);transition:transform .08s linear;transform-origin:center}.is-playing .island-bars i{background:#f5f5f7}.island-feedback{position:absolute;z-index:5;top:calc(var(--u)*51);left:50%;transform:translateX(-50%);max-width:90%;width:max-content;padding:7px 11px;border-radius:12px;background:#111c;color:#fff;font-size:11px;line-height:1.5;text-align:center;pointer-events:none;opacity:0;transition:opacity .2s}.island-feedback.visible{opacity:1}#island-audio-file[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){.music-island,.island-bars i{transition:none}}

.island-art{overflow:hidden}.island-art img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}


.phone-front,.phone-back,.phone-back *{-webkit-backface-visibility:hidden;backface-visibility:hidden}
@media(max-width:900px){body[data-page="product"] .phone-stage{height:min(740px,80svh);min-height:510px}.phone-space{perspective:1600px}}
.youhu-shell-covered>.site-header,.youhu-shell-covered>main,.youhu-shell-covered>.site-footer{visibility:hidden}