/* Process illustrations — shared 4:3 canvas (800×600 stage, scaled to fit). Palette: Nexcut tokens
   --accent #0A84FF, --accent-2 #30B0FF, --bg #000, --bg-2 #050a14, --ink #f5f5f7 (+ logo navy→blue). */
.nxp-canvas{position:absolute;inset:0;border-radius:22px;overflow:hidden;isolation:isolate;background:radial-gradient(46% 34% at 50% 104%,rgba(228,244,255,.9) 0%,rgba(48,176,255,.58) 28%,rgba(10,132,255,.2) 58%,transparent 80%),radial-gradient(95% 62% at 50% 100%,rgba(8,72,160,.6),transparent 72%),linear-gradient(180deg,#000 0%,#050a14 36%,#061a38 76%,#08295a 100%);border:none;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.nxp-canvas::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(180,220,255,.16) .9px,transparent 1.3px);background-size:13px 13px;-webkit-mask-image:radial-gradient(62% 58% at 50% 58%,#000 20%,transparent 78%);mask-image:radial-gradient(62% 58% at 50% 58%,#000 20%,transparent 78%);opacity:.55}
.nxp-canvas::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.nxp-stage{position:absolute;left:0;top:0;width:800px;height:600px;transform-origin:0 0;z-index:1;font-family:'Geist',system-ui,sans-serif;color:#f5f5f7}
.nxp-stage *{box-sizing:border-box}
.nxp-shift{position:absolute;inset:0}
.nxp-abs{position:absolute}
.nxp-halo{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(20,140,255,.4),rgba(10,132,255,.14) 55%,transparent);pointer-events:none}
.nxp-floor{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(0,4,12,.78),transparent);pointer-events:none}
.nxp-svg{position:absolute;inset:0;width:800px;height:600px;overflow:visible;pointer-events:none}

/* Materials */
.nxp-satin{background:linear-gradient(180deg,#1b1e25 0%,#12151a 52%,#0b0d11 100%);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.13),inset 0 -26px 40px -26px rgba(48,176,255,.24),0 36px 64px -24px rgba(0,0,0,.9),0 2px 6px rgba(0,0,0,.4)}
.nxp-frost{background:linear-gradient(180deg,rgba(30,42,62,.5),rgba(10,16,28,.64));-webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 26px 50px -22px rgba(0,0,0,.8)}
.nxp-blue{background:linear-gradient(180deg,rgba(40,150,255,.9) 0%,rgba(10,124,245,.88) 50%,rgba(8,92,200,.92) 100%);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -18px 28px -10px rgba(4,40,110,.55),0 7px 0 -1px #0a4fa8,0 8px 0 -1px rgba(0,0,0,.35),0 40px 64px -20px rgba(0,10,30,.9)}
.nxp-pill{position:absolute;display:flex;align-items:center;gap:10px;padding:0 22px;height:50px;border-radius:999px;background:rgba(5,10,20,.74);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 30px -12px rgba(0,0,0,.8);font-size:24px;font-weight:500;letter-spacing:-.01em;color:#f5f5f7;white-space:nowrap}

/* Video tile */
.nxp-tile{position:absolute;border-radius:16px;padding:5px;background:linear-gradient(180deg,rgba(30,40,58,.86),rgba(8,12,22,.94));border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 22px 40px -16px rgba(0,0,0,.85)}
.nxp-tile-img{position:relative;width:100%;height:100%;border-radius:11px;overflow:hidden}
.nxp-tile-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 38%)}
.nxp-v0{background:radial-gradient(120% 80% at 50% 108%,#bfe6ff 0%,#30B0FF 26%,#0a5fc4 56%,#04162e 92%)}
.nxp-v1{background:radial-gradient(120% 80% at 32% 108%,#8fd3ff 0%,#0A84FF 30%,#073f86 60%,#030d1c 92%)}
.nxp-v2{background:radial-gradient(120% 80% at 68% 108%,#d8f1ff 0%,#4fc1ff 24%,#0b6ad8 52%,#051a38 90%)}
.nxp-v3{background:radial-gradient(120% 80% at 50% 108%,#a8d8ff 0%,#2f95ff 28%,#0a3f8a 58%,#040c1a 92%)}
.nxp-up.nxp-v0{background:radial-gradient(95% 62% at 50% 46%,#bfe6ff 0%,#30B0FF 30%,#0a5fc4 66%,#04162e 100%)}
.nxp-up.nxp-v1{background:radial-gradient(95% 62% at 40% 46%,#8fd3ff 0%,#0A84FF 34%,#073f86 70%,#030d1c 100%)}
.nxp-up.nxp-v2{background:radial-gradient(95% 62% at 60% 46%,#d8f1ff 0%,#4fc1ff 28%,#0b6ad8 62%,#051a38 100%)}
.nxp-up.nxp-v3{background:radial-gradient(95% 62% at 50% 46%,#a8d8ff 0%,#2f95ff 32%,#0a3f8a 68%,#040c1a 100%)}
.nxp-cap{position:absolute;left:18%;right:18%;height:6.5%;max-height:9px;border-radius:4px;background:rgba(255,255,255,.92)}
.nxp-cap+.nxp-cap{left:28%;right:28%;background:#8fd3ff}
.nxp-play{position:absolute;left:9%;top:6%;width:26px;height:26px;border-radius:50%;background:rgba(0,6,16,.45);border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center}
.nxp-play::before{content:"";margin-left:3px;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent}

/* Folder (Send + Post) */
.nxp-folder{position:absolute;width:300px;height:250px}
.nxp-folder-back{position:absolute;inset:0;filter:drop-shadow(0 30px 40px rgba(0,8,24,.7))}
.nxp-folder-front{position:absolute;left:0;right:0;top:72px;bottom:0;border-radius:24px;display:flex;align-items:center;justify-content:center}
.nxp-orb{width:72px;height:72px;border-radius:50%;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.3),rgba(255,255,255,.08) 70%);border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 24px -8px rgba(2,40,110,.8);display:flex;align-items:center;justify-content:center}
.nxp-orb::before{content:"";margin-left:5px;border-left:20px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent;filter:drop-shadow(0 2px 3px rgba(2,40,110,.5))}

/* 01 Record — phone (focal) + camera behind */
.nxp-lens{width:244px;height:244px;border-radius:50%;background:conic-gradient(from 210deg,#30343c,#111418 22%,#3c414b 48%,#13161a 72%,#30343c);box-shadow:0 24px 40px -10px rgba(0,0,0,.85),inset 0 2px 2px rgba(255,255,255,.18),inset 0 -8px 16px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.6)}
.nxp-lens>*{position:absolute;border-radius:50%}
.nxp-lens-r1{inset:14px;background:repeating-conic-gradient(from 0deg,#14171c 0 2deg,#1b1f25 2deg 4deg);box-shadow:inset 0 2px 6px rgba(0,0,0,.8),inset 0 -1px 0 rgba(255,255,255,.08)}
.nxp-lens-r2{inset:30px;background:linear-gradient(180deg,#0a0c0f,#14171b);box-shadow:inset 0 0 0 1.5px rgba(48,176,255,.22),inset 0 6px 14px rgba(0,0,0,.9)}
.nxp-lens-glass{inset:46px;background:radial-gradient(circle at 42% 36%,#1a7de0 0%,#0a3a80 30%,#04122a 62%,#010308 100%);box-shadow:inset 0 0 0 2px rgba(0,0,0,.7),inset 0 0 26px rgba(0,0,0,.85)}
.nxp-lens-iris{inset:86px;background:radial-gradient(circle,#010308 48%,#0A84FF 74%,#04122a 100%);box-shadow:0 0 0 1px rgba(48,176,255,.18)}
.nxp-lens-spec{inset:46px;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.85) 0 3.2%,rgba(255,255,255,0) 5%),radial-gradient(60% 40% at 38% 26%,rgba(160,220,255,.32),transparent 70%),radial-gradient(40% 30% at 70% 74%,rgba(48,176,255,.42),transparent 70%)}
.nxp-cam{left:432px;top:214px;width:240px;height:156px;border-radius:32px}
.nxp-cam-hump{left:528px;top:194px;width:92px;height:38px;border-radius:14px 14px 8px 8px}
.nxp-cam-grip{position:absolute;right:12px;top:12px;bottom:12px;width:38px;border-radius:12px 26px 26px 12px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 6px),linear-gradient(180deg,#181b21,#0c0e12);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 1px 0 0 rgba(0,0,0,.5)}
.nxp-cam-lens{left:511px;top:228px;transform:scale(.525);transform-origin:0 0}
.nxp-phone{left:262px;top:72px;width:216px;height:436px;border-radius:46px;padding:9px;background:linear-gradient(145deg,#454b55 0%,#161a1f 32%,#0b0d11 68%,#2a2f37 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 1.5px 0 rgba(255,255,255,.34),inset 0 -2px 0 rgba(48,176,255,.18),0 44px 70px -24px rgba(0,0,0,.92),0 0 0 1px rgba(0,0,0,.6)}
.nxp-phone-btn{position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#2a2f37,#4a515c)}
.nxp-screen{position:relative;width:100%;height:100%;border-radius:37px;overflow:hidden;background:radial-gradient(58% 34% at 66% 28%,rgba(170,225,255,.5),transparent 70%),radial-gradient(90% 55% at 50% 104%,rgba(10,132,255,.75),transparent 70%),linear-gradient(180deg,#04101f 0%,#07224a 52%,#0a3a78 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.8)}
.nxp-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.03) 30%,transparent 42%);pointer-events:none}
.nxp-bokeh{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(190,232,255,.55),rgba(48,176,255,.18) 60%,transparent 72%);filter:blur(1.5px)}
.nxp-thirds{position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.1) calc(33.33% - .5px) calc(33.33% + .5px),transparent 0,transparent calc(66.66% - .5px),rgba(255,255,255,.1) calc(66.66% - .5px) calc(66.66% + .5px),transparent 0),linear-gradient(180deg,transparent calc(33.33% - .5px),rgba(255,255,255,.1) calc(33.33% - .5px) calc(33.33% + .5px),transparent 0,transparent calc(66.66% - .5px),rgba(255,255,255,.1) calc(66.66% - .5px) calc(66.66% + .5px),transparent 0)}
.nxp-focus{position:absolute;left:50%;top:150px;width:92px;height:92px;margin-left:-46px;opacity:.9;background:linear-gradient(#fff,#fff) 0 0/18px 2px,linear-gradient(#fff,#fff) 0 0/2px 18px,linear-gradient(#fff,#fff) 100% 0/18px 2px,linear-gradient(#fff,#fff) 100% 0/2px 18px,linear-gradient(#fff,#fff) 0 100%/18px 2px,linear-gradient(#fff,#fff) 0 100%/2px 18px,linear-gradient(#fff,#fff) 100% 100%/18px 2px,linear-gradient(#fff,#fff) 100% 100%/2px 18px;background-repeat:no-repeat}
.nxp-island{position:absolute;left:50%;top:12px;width:76px;height:22px;margin-left:-38px;border-radius:11px;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.nxp-rec{position:absolute;left:16px;top:46px;display:flex;align-items:center;gap:7px;height:30px;padding:0 11px;border-radius:15px;background:rgba(0,6,16,.5);font-size:18px;font-weight:600;letter-spacing:.08em;color:#fff}
.nxp-rec i{width:10px;height:10px;border-radius:50%;background:#ff4d5e;box-shadow:0 0 0 3px rgba(255,77,94,.2),0 0 12px rgba(255,77,94,.8)}
.nxp-wave{position:absolute;left:14px;right:14px;bottom:18px;height:62px;border-radius:20px;display:flex;align-items:center;justify-content:center;gap:4px}
.nxp-wave b{width:4px;border-radius:2px;background:linear-gradient(180deg,#e6f5ff,#30B0FF 55%,#0A84FF)}

/* 02 Send */
.nxp-file{position:absolute;width:190px;height:124px;border-radius:14px;padding:5px;background:linear-gradient(180deg,rgba(236,246,255,.96),rgba(190,220,250,.9));box-shadow:inset 0 1px 0 #fff,0 10px 24px -10px rgba(0,20,60,.7)}
.nxp-file .nxp-tile-img{border-radius:10px}
.nxp-tray-slot{position:absolute;left:20px;right:20px;top:20px;height:26px;border-radius:13px;background:linear-gradient(180deg,#000,#080a0e);box-shadow:inset 0 3px 8px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.08)}
.nxp-tray-brand{position:absolute;left:0;right:0;bottom:30px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:24px;font-weight:600;letter-spacing:-.01em;color:rgba(245,245,247,.85)}
.nxp-tray-brand img{width:38px;height:38px;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 6px 14px -6px rgba(10,132,255,.6)}
.nxp-dot{offset-path:path('M376 214C440 110 560 100 612 192');offset-rotate:0deg;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(48,176,255,.22),0 0 18px 4px rgba(48,176,255,.75);animation:nxpTravel 3.6s cubic-bezier(.45,0,.35,1) infinite;offset-distance:50%}
@keyframes nxpTravel{0%{offset-distance:0%;opacity:0}12%{opacity:1}78%{opacity:1}92%,100%{offset-distance:100%;opacity:0}}

/* 03 Edit */
.nxp-preview{left:116px;top:74px;width:420px;height:236px;border-radius:18px;background:linear-gradient(180deg,#0a0c10,#050608);border:1px solid rgba(48,176,255,.3);box-shadow:0 -12px 60px -14px rgba(10,132,255,.55),0 34px 60px -20px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08);padding:12px}
.nxp-foot{position:relative;width:100%;height:100%;border-radius:10px;overflow:hidden;background:radial-gradient(70% 90% at 50% 110%,#2f95ff 0%,#0a4fa8 34%,#06204a 64%,#03091a 100%)}
.nxp-foot::before{content:"";position:absolute;inset:0;background:rgba(0,4,12,.42)}
.nxp-crop{position:absolute;left:50%;top:10px;bottom:10px;width:112px;margin-left:-56px;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1.5px rgba(160,220,255,.95),0 0 24px rgba(48,176,255,.45)}
.nxp-crop .nxp-tile-img{border-radius:0}
.nxp-tl{left:96px;top:330px;width:460px;height:156px;border-radius:20px;background:linear-gradient(180deg,rgba(20,28,44,.62),rgba(8,12,22,.74));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(48,176,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 50px -22px rgba(0,0,0,.85)}
.nxp-ruler{position:absolute;left:24px;right:24px;top:20px;height:22px;border-bottom:1px solid rgba(255,255,255,.16);background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 1px,transparent 1px 12px) bottom/100% 7px no-repeat,repeating-linear-gradient(90deg,rgba(255,255,255,.75) 0 1.5px,transparent 1.5px 72px) bottom/100% 14px no-repeat}
.nxp-clip{position:absolute;height:26px;border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 10px -4px rgba(0,0,0,.6)}
.nxp-head{position:absolute;top:12px;bottom:14px;left:250px;width:2px;background:#30B0FF;box-shadow:0 0 10px rgba(48,176,255,.9);animation:nxpHead 7s ease-in-out infinite alternate}
.nxp-head::before{content:"";position:absolute;left:-6px;top:-2px;width:14px;height:16px;border-radius:3px;background:#30B0FF;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
@keyframes nxpHead{from{transform:translateX(-90px)}to{transform:translateX(110px)}}

/* 04 Post */
.nxp-cal{left:494px;top:196px;width:224px;height:222px;border-radius:22px;padding:22px 18px 18px}
.nxp-cal-head{display:flex;align-items:center;justify-content:space-between;height:28px;margin-bottom:18px}
.nxp-cal-rings{display:flex;gap:10px}
.nxp-cal-rings i{width:26px;height:8px;border-radius:4px;background:rgba(255,255,255,.16)}
.nxp-check{width:28px;height:28px;border-radius:50%;background:linear-gradient(180deg,#30B0FF,#0A84FF);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 16px rgba(10,132,255,.55);display:flex;align-items:center;justify-content:center}
.nxp-check::before{content:"";width:11px;height:6px;margin-top:-3px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg)}
.nxp-cal-grid{display:grid;grid-template-columns:repeat(7,20px);gap:8px 7.6px}
.nxp-cal-grid i{height:20px;border-radius:6px;background:rgba(255,255,255,.07)}
.nxp-cal-grid i.on{background:linear-gradient(180deg,#30B0FF,#0A84FF);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 12px rgba(10,132,255,.5)}
.nxp-cal-grid i.off{background:transparent}

.nxp-rec i{animation:nxpBlink 1.8s ease-in-out infinite}
@keyframes nxpBlink{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.nxp-rec i,.nxp-head,.nxp-dot{animation:none!important}.nxp-dot{opacity:0}}