html,body{margin:0;height:100%;background:#0C0C0B;overflow:hidden}
body{font-family:'Noto Sans',system-ui,-apple-system,sans-serif;color:#EDEAE3;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation;overscroll-behavior:none;-webkit-text-size-adjust:100%;-webkit-touch-callout:none}
*{box-sizing:border-box}
#app{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#device{position:relative;width:393px;height:852px;background:#141412;overflow:hidden;flex:none}
body.desktop #device{border-radius:52px;box-shadow:0 0 0 8px #2A2A26,0 40px 120px rgba(0,0,0,.65)}
#stage{position:absolute;left:0;top:0;width:393px;height:852px;transform-origin:0 0}
#screens{position:absolute;inset:0}
#screens>.screen{position:absolute;inset:0}
#ovl{position:absolute;inset:0;z-index:20;pointer-events:none}
#ovl>*{pointer-events:auto}
#toastHost{position:absolute;left:16px;right:16px;bottom:104px;z-index:40;pointer-events:none}
.toast{pointer-events:auto;background:#2A2A26;border:1px solid #34332F;color:#EDEAE3;padding:13px 14px;font-size:14px;line-height:1.4;display:flex;gap:12px;align-items:flex-start;animation:toastIn 160ms cubic-bezier(.2,0,0,1)}
.toast i{display:block;width:8px;height:8px;background:#C4452F;flex:none;margin-top:6px}
.toast.out{animation:toastOut 160ms cubic-bezier(.2,0,0,1) forwards}
#safeProbe{position:fixed;top:0;left:0;width:0;height:0;padding-top:env(safe-area-inset-top,0px);visibility:hidden;pointer-events:none}
#safeProbeB{position:fixed;top:0;left:0;width:0;height:0;padding-bottom:env(safe-area-inset-bottom,0px);visibility:hidden;pointer-events:none}
body.phone{background:#141412}
html{background:#141412}
body.phone .pt-sb{visibility:hidden;height:var(--sat,54px)!important;min-height:0!important;overflow:hidden}
body.phone .pt-hi{display:none}
body.phone #screens>.screen{height:var(--stage-h,852px)!important}
body.phone:not(.standalone) #ovl>.pt-banner{top:12px!important}
body.phone.standalone .pt-tabbar{height:calc(60px + var(--sab,28px))!important;padding-bottom:var(--sab,28px)!important}
#screens *{-webkit-overflow-scrolling:touch;scrollbar-width:none}
#screens *::-webkit-scrollbar{display:none;width:0;height:0}
.tappable{cursor:pointer}
.pressed{opacity:.72}
input.pt-input{width:100%;height:52px;background:#1E1E1B;border:0;outline:0;color:#EDEAE3;padding:0 14px;font:400 15px 'Noto Sans',system-ui,sans-serif;min-width:0;-webkit-user-select:text;user-select:text;border-radius:0;-webkit-appearance:none}
input.pt-input::placeholder{color:#8F8B82}
.anim-push{animation:pushIn 190ms cubic-bezier(.2,0,0,1)}
.anim-pop{animation:popOut 170ms cubic-bezier(.2,0,0,1) forwards}
.anim-fade{animation:fadeIn 140ms cubic-bezier(.2,0,0,1)}
.anim-fadeout{animation:fadeOut 120ms cubic-bezier(.2,0,0,1) forwards}
.anim-up{animation:slideUp 200ms cubic-bezier(.2,0,0,1)}
.anim-down{animation:slideDown 170ms cubic-bezier(.2,0,0,1) forwards}
.anim-drop{animation:dropIn 220ms cubic-bezier(.2,0,0,1)}
.anim-lift{animation:liftOut 180ms cubic-bezier(.2,0,0,1) forwards}
.scrim{position:absolute;inset:0;background:rgba(12,12,11,0.7);animation:fadeIn 140ms}
.sheet{position:absolute;left:0;right:0;bottom:0;background:#1E1E1B;padding:24px 24px 44px;display:flex;flex-direction:column;gap:14px}
.sheet .sh-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8F8B82}
.sheet .sh-title{font-size:26px;font-weight:800;line-height:1.02;text-transform:uppercase}
.sheet .sh-text{font-size:15px;line-height:1.5;color:#B3AFA6}
.sheet .sh-btn{height:56px;margin-top:6px;background:#EDEAE3;color:#141412;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.sheet .sh-btn.brick{background:#C4452F;color:#fff}
.sheet .sh-btn.ghost{background:transparent;color:#EDEAE3;border:1px solid #34332F}
.pt-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#26261F}
.pt-hero-shade{position:absolute;left:0;right:0;top:0;height:100%;background:linear-gradient(180deg,rgba(20,20,18,0.6) 0%,rgba(20,20,18,0) 22%);pointer-events:none}
#caption{display:none;position:fixed;left:40px;bottom:36px;max-width:300px;flex-direction:column;gap:10px}
body.desktop #caption{display:flex}
.cap-mark{font-size:22px;font-weight:800;letter-spacing:-.02em}
.cap-text{font-size:13px;line-height:1.5;color:#8F8B82}
.cap-meta{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#5E5B55;padding-top:4px}
@media (max-width:1100px){#caption{display:none!important}}
@keyframes pushIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes popOut{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes slideDown{from{transform:translateY(0)}to{transform:translateY(100%)}}
@keyframes dropIn{from{transform:translateY(-120%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes liftOut{from{transform:translateY(0);opacity:1}to{transform:translateY(-120%);opacity:0}}
@keyframes toastIn{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes toastOut{from{transform:translateY(0);opacity:1}to{transform:translateY(12px);opacity:0}}
@media (prefers-reduced-motion:reduce){.anim-push,.anim-pop,.anim-fade,.anim-fadeout,.anim-up,.anim-down,.anim-drop,.anim-lift,.toast,.toast.out,.scrim{animation:none}}