:root{--phone-screen:var(--paper,#fafaf9);--phone-screen-ink:var(--ink,#111);--phone-screen-ink-muted:var(--ink-muted,#5a5a5a);--phone-rule:var(--rule,#e6e6e3);--phone-accent:var(--indigo,#4f2ee8)}.phone-shell{--phone-tilt:rotateY(-5deg);transform:perspective(1000px) var(--phone-tilt);transform-style:preserve-3d;justify-content:center;padding:28px 8px;transition:transform .5s cubic-bezier(.22,1,.36,1);display:flex;position:relative}.phone-shell__frame{aspect-ratio:9/19.5;background:linear-gradient(145deg,#f4f0e6 0%,#ddd6c5 45%,#bfb8a4 100%);border-radius:46px;width:clamp(260px,32vw,380px);padding:11px;animation:6s ease-in-out infinite phone-shell-float;position:relative;box-shadow:0 0 0 1.5px #362c1859,0 0 0 3px #9a7b3c1f,inset 0 0 0 2px #ffffff8c,inset 0 2px 3px #ffffffbf,inset 0 -3px 4px #0000001a,0 34px 80px -22px #3c2e1052,0 14px 34px -12px #3c2e1033}.phone-shell__frame:before{content:"";background:linear-gradient(90deg,#c9c2af 0%,#9a9381 100%);border-radius:0 2px 2px 0;width:3.5px;height:58px;position:absolute;top:132px;right:-3px;box-shadow:inset 0 1px #ffffff24,0 1px 2px #0006}.phone-shell__frame:after{content:"";background:linear-gradient(90deg,#c9c2af 0%,#9a9381 100%);border-radius:2px 0 0 2px;width:3.5px;height:74px;position:absolute;top:112px;left:-3px;box-shadow:inset 0 1px #ffffff24,0 1px 2px #0006}.dark .phone-shell__frame{background:linear-gradient(145deg,#26252f 0%,#181722 45%,#0d0c14 100%);box-shadow:0 0 0 1.5px #050409,0 0 0 3px #c6a15b14,inset 0 0 0 2px #ffffff0d,inset 0 2px 2px #ffffff17,inset 0 -2px 3px #00000080,0 34px 80px -22px #000000bf,0 14px 34px -12px #0000008c}.dark .phone-shell__frame:before,.dark .phone-shell__frame:after{background:linear-gradient(90deg,#100f17 0%,#34333f 100%)}.phone-shell__notch{z-index:6;background:#050409;border-radius:14px;width:96px;height:26px;position:absolute;top:13px;left:50%;transform:translate(-50%);box-shadow:inset 0 0 0 1px #ffffff0a,inset 0 1px 2px #000c}.phone-shell__notch:after{content:"";background:radial-gradient(circle at 35% 30%,#2a3a4a,#060708);border-radius:50%;width:6px;height:6px;position:absolute;top:50%;right:20px;transform:translateY(-50%);box-shadow:inset 0 0 2px #5078a066}.phone-shell__viewport{background:var(--phone-screen);border-radius:35px;height:100%;position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px #050409,inset 0 0 26px #00000073}.phone-shell__viewport:after{content:"";pointer-events:none;z-index:11;background:linear-gradient(135deg,#ffffff0a 0%,#0000 38% 62%,#0000000d 100%);border-radius:35px;position:absolute;inset:0}.phone-shell__glow{pointer-events:none;z-index:-1;background:radial-gradient(at 50% 45%,#7c5cff38 0%,#0000 68%);border-radius:60px;position:absolute;inset:-28px}.phone-shell__statusbar{z-index:7;pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;top:16px;left:22px;right:22px}.phone-shell__time{color:var(--phone-screen-ink);letter-spacing:.02em;font-size:.66rem;font-weight:600}.phone-shell__status-icons{color:var(--phone-screen-ink);align-items:center;gap:5px;display:flex}.phone-shell__status-icons svg{opacity:.75;height:11px}.phone-shell__status-icons svg:first-child{width:15px}.phone-shell__status-icons svg:nth-child(2){width:17px}.phone-shell__status-icons svg:nth-child(3){width:22px;height:11px}.phone-shell__battery-fill{fill:var(--phone-accent)}.phone-shell__navbar{z-index:6;pointer-events:none;justify-content:space-between;align-items:center;height:32px;display:flex;position:absolute;top:40px;left:14px;right:14px}.phone-shell__nav-btn{border:1px solid var(--phone-rule);background:var(--phone-screen);width:32px;height:32px;color:var(--phone-accent);border-radius:50%;justify-content:center;align-items:center;display:flex}.phone-shell__nav-btn svg{width:15px;height:15px}.phone-shell__navbar-title{letter-spacing:.18em;text-transform:uppercase;color:var(--phone-accent);font-size:.62rem;font-weight:600}.phone-shell__screen{color:var(--phone-screen-ink);background:var(--phone-screen);z-index:2;flex-direction:column;padding:4.75rem 1.35rem 3.4rem;display:flex;position:absolute;inset:0;overflow:hidden}@keyframes phone-shell-float{0%,to{translate:0}50%{translate:0 -7px}}@media (prefers-reduced-motion:reduce){.phone-shell{transition:none}.phone-shell__frame{animation:none}}@media (width<=767px){.phone-shell__screen{padding:4rem 1.1rem 3.1rem}}.phone-screen{height:100%;color:var(--phone-screen-ink);background:var(--phone-screen);flex-direction:column;gap:.55rem;display:flex}.phone-screen__title{color:var(--phone-screen-ink);word-break:break-word;margin:0;font-size:1.5rem;font-weight:700;line-height:1.15}.phone-screen__subtitle{letter-spacing:.08em;text-transform:uppercase;color:var(--phone-screen-ink-muted);margin:0;font-size:.68rem}.phone-screen__list{color:var(--phone-screen-ink);flex-direction:column;gap:.5rem;margin:.5rem 0 0;padding:0;font-size:.85rem;line-height:1.4;list-style:none;display:flex}.phone-screen__list li{padding-left:.85rem;position:relative}.phone-screen__list li:before{content:"";background:var(--phone-accent);border-radius:50%;width:.3rem;height:.3rem;position:absolute;top:.5rem;left:0}.phone-screen__actions{gap:.5rem;margin-top:auto;padding-top:.8rem;display:flex}.phone-screen__btn{cursor:pointer;border:1px solid #0000;border-radius:.6rem;flex:1;padding:.55rem .8rem;font-size:.8rem;font-weight:600}.phone-screen__btn--primary{background:var(--phone-screen-ink);color:var(--phone-screen);border-color:var(--phone-screen-ink)}.phone-screen__btn--secondary{color:var(--phone-accent);border-color:var(--phone-accent);background:0 0}