.live-phone-presentation{width:100%;min-width:0;display:flex;flex-direction:column;align-items:center;gap:12px}.project-phone{--pf-accent:#b3a5ff;position:relative;flex:0 0 auto;width:330px;max-width:100%;aspect-ratio:1470 / 3000;isolation:isolate;text-align:left;filter:drop-shadow(0 18px 22px #0005)}.project-phone[data-project-phone=portfolio]{--pf-accent:#e7e2d8}.project-phone[data-project-phone=kernelos]{--pf-accent:#abd9ee}.project-phone>.phone-bezel{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;padding:0;object-fit:contain;z-index:5;pointer-events:none;-webkit-user-select:none;user-select:none;mix-blend-mode:normal}.project-phone>.pf-screen{position:absolute;inset:1.6% 3.9% 1.8%;overflow:hidden;border-radius:13%/6%;background:radial-gradient(ellipse at 50% 0%,#242328,#0c0c0d 28%)}.pf-viewport{position:absolute;inset:7% 0 0;overflow:hidden}.pf-live-frame{position:absolute;top:0;left:0;display:block;width:390px;height:825px;border:0;margin:0;padding:0;max-width:none;transform-origin:top left;background:#0c0c0d;color-scheme:normal}.pf-live-frame:focus-visible{outline:2px solid var(--pf-accent);outline-offset:-3px}.phone-preview-cover{min-height:100%;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:32px 22px;background:radial-gradient(ellipse at top,#24212f,#0c0c0d 75%);color:#eeeae4}.phone-preview-cover[hidden]{display:none!important}.phone-cover-label{font:400 .64rem/1.5 var(--font-mono,monospace);color:#b8b2c2;overflow-wrap:anywhere}.phone-preview-cover strong{font:700 clamp(1.4rem,6vw,2rem)/1.15 var(--font-display,sans-serif);letter-spacing:-.03em;overflow-wrap:anywhere}.phone-preview-cover p{font-size:.8rem;color:#b8b2c2}.phone-preview-cover a{display:inline-flex;align-items:center;min-height:44px;color:var(--pf-accent);font-size:.8rem;text-decoration:underline;text-underline-offset:4px}.live-phone-tools{width:min(330px,100%);min-height:44px;display:flex;align-items:center;gap:8px;color:var(--ash)}.live-phone-tools a{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-width:0;min-height:44px;padding:8px 12px;border:1px solid var(--line-2);border-radius:999px;color:inherit;font:500 .68rem/1.4 var(--font-mono,monospace);overflow-wrap:anywhere}.live-phone-tools button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;background:transparent;color:inherit;cursor:pointer}.live-phone-tools [hidden]{display:none!important}.live-phone-tools :is(a,button):focus-visible{outline:2px solid var(--bone);outline-offset:3px}@media(hover:hover){.live-phone-tools :is(a,button):hover{color:var(--bone);border-color:var(--ash)}}.panel-visual:has(.project-phone){cursor:default;height:auto;min-height:0;max-height:none;padding-block:22px;flex-shrink:0}.panel-visual:has(.project-phone) .ph-stage{width:100%;max-width:100%}.cs-hero-card:has(.project-phone),.pp-visual:has(.project-phone){display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 18px;height:auto;min-height:0}.cs-hero-card .project-phone,.pp-visual .project-phone{width:330px}.phone-caption{display:none}@media(min-width:961px){.panel-visual .project-phone,.panel-visual .live-phone-tools{width:min(330px,36svh)}}@media(max-width:880px){.project-phone{max-width:calc(100vw - 56px)}.cs-hero-card .project-phone,.pp-visual .project-phone{max-width:calc(100vw - 100px)}}html.phone-preview{overscroll-behavior:contain}.phone-preview .project-phone{width:100%;max-width:100%;aspect-ratio:auto;filter:none}.phone-preview .project-phone>.pf-screen{position:relative;inset:auto;border:1px solid var(--line-2);border-radius:24px}.phone-preview .pf-viewport{position:relative;inset:auto}.phone-preview .phone-bezel,.phone-preview .live-phone-tools{display:none}.phone-preview .phone-preview-cover{min-height:170px;padding:24px}.phone-preview .panel-visual:has(.project-phone){padding:0}@media(prefers-reduced-motion:reduce){.live-phone-presentation *{transition:none!important;animation:none!important}}
