.device-arc{position:relative;isolation:isolate;margin:12px 0 44px;outline-offset:8px}.device-arc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--ink);padding:20px 0;font:12px var(--font-mono)}.device-arc-toolbar>div{display:flex;align-items:center;gap:12px}.device-arc-toolbar button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--ink);border-radius:50%;background:var(--ink);color:var(--paper)}.device-arc-toolbar button:hover{background:var(--pink)}.device-arc-stage{position:relative;height:650px;perspective:1400px;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;user-select:none}.device-arc-slot{position:absolute;left:50%;top:30px;width:min(74%,760px);margin-left:max(-37%,-380px);height:570px;transform-style:preserve-3d;backface-visibility:hidden}.device-arc-slot.is-side{cursor:pointer}.device-arc-select{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;border-radius:25px}.device-arc-select:focus-visible{outline:4px solid var(--pink);outline-offset:6px}.floating-device{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;gap:22px}.floating-device-frame{position:relative;width:100%;padding:8px;background:linear-gradient(130deg,var(--device-metal),var(--device-shell) 17%,var(--device-shell) 82%,var(--device-metal));border:1px solid var(--device-metal);border-radius:16px;box-shadow:8px 9px 0 var(--ink),0 30px 38px color-mix(in srgb,var(--ink) 18%,transparent)}.floating-device-chrome{height:32px;display:flex;align-items:center;gap:7px;padding:0 10px 7px;color:var(--paper);font:10px var(--font-mono)}.floating-device-chrome>span{display:flex;gap:5px}.floating-device-chrome i{width:7px;height:7px;border-radius:50%;background:var(--pink)}.floating-device-chrome i:nth-child(2){background:var(--yellow)}.floating-device-chrome i:nth-child(3){background:var(--mint)}.floating-device-chrome small{margin:auto;max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.floating-device-screen{height:390px;overflow:hidden;border-radius:5px;background:var(--paper);position:relative}.floating-device-phone .floating-device-frame{width:min(100%,285px);border-radius:39px;padding:8px}.floating-device-phone .floating-device-chrome{height:26px;justify-content:center;padding:0}.floating-device-phone .floating-device-chrome>span{display:none}.floating-device-phone .floating-device-chrome:after{content:"";width:65px;height:12px;background:var(--ink);border-radius:20px}.floating-device-phone .floating-device-chrome small{display:none}.floating-device-phone .floating-device-screen{height:440px;border-radius:0 0 30px 30px}.floating-device-phone .floating-device-frame:before{content:"";position:absolute;left:-4px;top:90px;width:3px;height:60px;background:var(--device-metal);border-radius:3px}.floating-device-laptop .floating-device-frame{border-radius:18px 18px 5px 5px}.floating-device-laptop .floating-device-frame:after{content:"";position:absolute;left:-4%;width:108%;height:20px;bottom:-20px;background:linear-gradient(var(--device-metal),var(--device-shell));border-radius:2px 2px 50% 50%;box-shadow:0 12px 16px color-mix(in srgb,var(--ink) 20%,transparent)}.floating-device-caption{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:14px 18px;background:var(--project-surface);color:var(--project-ink);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}.floating-device-caption strong{font:24px/1.1 var(--font-marker)}.floating-device-caption small{display:block;margin-top:6px;font:12px/1.4 var(--font-body)}.floating-device-caption button{display:flex;align-items:center;gap:8px;min-height:44px;white-space:nowrap;font:12px var(--font-mono);text-decoration:underline;text-underline-offset:4px}.is-side .floating-device-caption{opacity:.85}.is-side .floating-device{pointer-events:none}.live-screen{position:relative;width:100%;height:100%;background:var(--paper)}.live-screen-image{height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-bottom:52px}.live-screen-capture{display:block!important;width:100%;height:auto;min-height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:top;object-position:top}.live-screen-capture[style*=aspect-ratio]{min-height:0}.live-screen-capture img{-o-object-position:top;object-position:top}.live-screen-frame{position:absolute;left:0;top:0;border:0;transform-origin:top left;background:var(--paper)}.live-screen-tools{position:absolute;bottom:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;padding:9px 12px;min-height:52px;background:var(--paper);color:var(--ink);border-top:1px solid var(--ink);font:11px/1.3 var(--font-body)}.live-screen-tools span,.live-screen-tools a{display:flex;align-items:center;gap:6px}.live-screen-tools a{font-weight:700;min-height:28px}.live-screen-tools button{text-decoration:underline;min-height:28px}.floating-device-phone .live-screen-tools>span{display:none}.device-arc-index{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;position:relative;z-index:2}.device-arc-index button{border:1px solid var(--ink);border-radius:99px;padding:10px 15px;font:12px var(--font-body);min-height:44px}.device-arc-index button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.device-arc-hint{text-align:center;margin:18px 0;font:12px/1.5 var(--font-mono);opacity:.7}.device-arc-drag{cursor:grab}.device-arc-drag:active{cursor:grabbing}.device-arc-flat .device-arc-stage{perspective:none}.device-arc-flat .device-arc-slot{transform-style:flat}@media(max-width:700px){.device-arc-toolbar{font-size:10px;gap:10px}.device-arc-toolbar>span{max-width:140px;line-height:1.6}.device-arc-stage{height:590px;margin-inline:-20px}.device-arc-slot{width:86%;margin-left:-43%;height:525px;top:20px}.floating-device-screen{height:320px}.floating-device-phone .floating-device-screen{height:370px}.floating-device-phone .floating-device-frame{width:240px}.floating-device-caption{padding:12px;gap:10px}.floating-device-caption strong{font-size:21px}.floating-device-caption small,.floating-device-caption button{font-size:11px}.device-arc-index{gap:6px}.device-arc-index button{padding:8px 11px;font-size:11px}.live-screen-tools{font-size:10px;padding:6px 8px}.live-screen-tools>span{display:none}}@media(prefers-reduced-motion:reduce){.device-arc-stage{perspective:none}.device-arc-slot{transition:none!important}}.floating-device-frame{isolation:isolate;transform-style:preserve-3d;border-color:var(--device-metal);box-shadow:1px 1px 0 var(--device-metal),2px 2px 0 var(--device-shell),3px 3px 0 var(--device-metal),5px 5px 0 var(--device-shell),7px 7px 0 var(--device-shell),9px 9px 0 var(--device-metal),11px 11px 0 var(--device-shell),18px 25px 25px color-mix(in srgb,var(--ink) 23%,transparent),30px 48px 55px color-mix(in srgb,var(--ink) 16%,transparent),inset 0 1px 1px var(--paper);background:linear-gradient(135deg,var(--device-metal),var(--device-shell) 16%,var(--device-shell) 65%,var(--device-metal))}.floating-device-screen{box-shadow:0 0 0 1px var(--ink),0 0 0 2px color-mix(in srgb,var(--device-metal) 60%,var(--ink)),inset 0 2px 5px var(--ink)}.floating-device-reflection{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;z-index:3;border-top:1px solid color-mix(in srgb,var(--paper) 70%,transparent);border-left:1px solid color-mix(in srgb,var(--paper) 35%,transparent);background:linear-gradient(119deg,color-mix(in srgb,var(--paper) 12%,transparent),transparent 22%,transparent 77%,color-mix(in srgb,var(--paper) 4%,transparent))}.floating-device-chrome{height:38px;padding:0 12px 8px;border-radius:9px 9px 0 0;text-shadow:0 1px 1px var(--ink)}.floating-device-chrome small{padding:4px 25px;background:color-mix(in srgb,var(--ink) 70%,transparent);border:1px solid color-mix(in srgb,var(--device-metal) 30%,transparent);border-radius:6px}.floating-device-chrome i{box-shadow:inset 0 1px 1px color-mix(in srgb,var(--paper) 50%,transparent),0 1px 2px var(--ink)}.floating-device-phone .floating-device-frame{padding:9px 9px 20px;border-radius:42px}.floating-device-phone .floating-device-chrome{height:25px;padding:0;border:0}.floating-device-phone .floating-device-chrome:after{width:71px;height:13px;box-shadow:inset 0 1px 3px color-mix(in srgb,var(--device-metal) 40%,var(--ink));background:radial-gradient(circle at 84% 50%,var(--device-metal) 0 2px,var(--device-shell) 3px,var(--ink) 5px)}.floating-device-phone .floating-device-frame:before{left:-4px;top:98px;width:4px;height:58px;background:linear-gradient(90deg,var(--device-shell),var(--device-metal));box-shadow:0 75px 0 var(--device-metal);border:1px solid var(--device-shell)}.floating-device-phone .floating-device-frame:after{content:"";position:absolute;right:-5px;top:124px;width:4px;height:66px;border-radius:3px;background:var(--device-metal);box-shadow:1px 0 0 var(--device-shell)}.floating-device-home{position:absolute;bottom:7px;left:50%;width:72px;height:3px;transform:translate(-50%);border-radius:8px;background:var(--device-metal)}.floating-device-laptop .floating-device-frame{margin-bottom:36px;padding:10px 10px 20px;border-radius:18px 18px 8px 8px}.floating-device-laptop .floating-device-frame:after{bottom:-39px;height:10px;left:-5%;width:110%;border-radius:0 0 40% 40%;box-shadow:0 18px 25px color-mix(in srgb,var(--ink) 25%,transparent)}.floating-device-keyboard{position:absolute;left:-5%;width:110%;height:38px;bottom:-30px;border:1px solid var(--device-metal);border-radius:3px;background:linear-gradient(0deg,var(--device-metal),var(--device-shell));transform:perspective(400px) rotateX(32deg);transform-origin:top;box-shadow:inset 0 1px 1px var(--paper)}.floating-device-keyboard:before{content:"";position:absolute;top:4px;right:18%;bottom:15px;left:18%;border-radius:3px;background:repeating-linear-gradient(90deg,transparent 0 16px,var(--device-metal) 17px 18px),repeating-linear-gradient(0deg,var(--device-shell) 0 4px,var(--device-metal) 5px 6px)}.floating-device-keyboard i{position:absolute;left:42%;bottom:2px;width:16%;height:10px;border:1px solid var(--device-shell);border-radius:2px;background:var(--device-metal)}.device-arc-directions{position:absolute;inset:42% 12px auto;z-index:12;display:flex;justify-content:space-between;pointer-events:none;transform:translateY(-50%)}.device-arc-direction{pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:5px;width:112px;text-align:center;color:var(--ink)}.device-arc-direction>span{display:grid;place-items:center;width:60px;height:60px;border:2px solid var(--ink);border-radius:50%;background:var(--yellow);box-shadow:4px 5px 0 var(--ink);transition:background .2s,transform .2s}.device-arc-direction:hover>span{background:var(--pink);color:var(--paper);transform:translateY(-3px)}.device-arc-direction small{font:10px var(--font-mono);margin-top:8px;background:var(--paper);padding:3px 6px}.device-arc-direction strong{font:13px/1.2 var(--font-marker);background:var(--paper);padding:4px 7px;max-width:100%}.device-arc-hint{font-size:13px;font-weight:700;opacity:1}@media(max-width:700px){.device-arc-directions{inset:42% 8px auto}.device-arc-direction{width:44px}.device-arc-direction>span{width:42px;height:42px;box-shadow:2px 3px 0 var(--ink)}.device-arc-direction small,.device-arc-direction strong{display:none}.device-arc-hint{font-size:11px}.floating-device-frame{box-shadow:1px 1px 0 var(--device-metal),3px 3px 0 var(--device-shell),5px 5px 0 var(--device-metal),7px 7px 0 var(--device-shell),12px 22px 28px color-mix(in srgb,var(--ink) 25%,transparent)}.floating-device-phone .floating-device-frame{padding-bottom:17px}}@media(prefers-reduced-motion:reduce){.floating-device-frame{transform-style:flat}.device-arc-direction:hover>span{transform:none}.floating-device-keyboard{transform:none}}