#paw-phone{--paw-orange:#ff7918;--paw-ink:#29223e;--paw-cream:#fff4df;--paw-art-width:min(82svh,80vw);position:relative;height:100svh;min-height:720px;color:var(--paw-ink);font-family:Assistant,sans-serif;line-height:1.2}#paw-phone .stage{height:100svh;min-height:720px;position:relative;overflow:clip;background:var(--paw-orange);isolation:isolate}#paw-phone .landscape{position:absolute;inset:0;z-index:0;pointer-events:none}#paw-phone .landscape img{filter:url(#paw-violet-ink);height:100%;width:100%;object-fit:cover}#paw-phone .camera{filter:url(#paw-violet-ink);position:absolute;right:-2vw;top:6svh;width:var(--paw-art-width);aspect-ratio:2/3;z-index:5;transform-origin:40.43% 35.22%;will-change:transform}#paw-phone .engraving{width:100%;height:100%;overflow:visible}#paw-phone .phone-static{position:absolute;inset:0;pointer-events:none}#paw-phone .phone-static img{position:absolute;height:auto;max-width:none}#paw-phone:not(.paw-active) .engraving,#paw-phone.paw-active:not(.paw-ready) .engraving{visibility:hidden}#paw-phone.paw-active.paw-ready .phone-static{visibility:hidden}#paw-phone .falling-device{opacity:0}#paw-phone .demonstration{position:absolute;top:10%;left:10%;font-size:10px;letter-spacing:.03em;z-index:8}#paw-phone .scene-footer{position:absolute;left:4vw;right:4vw;bottom:24px;display:flex;align-items:center;gap:22px;z-index:8;font-size:11px}#paw-phone .scene-footer p{margin:0}#paw-phone .scene-footer p span{margin-left:12px}#paw-phone .scroll-track{height:2px;flex:1;background:#29223e25;max-width:160px;margin-left:auto}#paw-phone .scroll-track i{display:block;height:100%;background:var(--paw-ink);transform:scaleX(0);transform-origin:left}#paw-phone.paw-active{height:480svh;min-height:0;z-index:2}#paw-phone.paw-active .stage{position:sticky;top:0;min-height:0;background:transparent}#paw-phone.paw-active .after-print{opacity:0}#paw-phone:not(.paw-active) .scene-footer{display:none}@media(min-width:768px)and (max-width:1100px){#paw-phone{--paw-art-width:min(83svh,72vw)}#paw-phone .camera{right:-8vw;top:14svh}}@media(max-width:767px){#paw-phone{--paw-art-width:min(85svh,101vw)}#paw-phone .stage,#paw-phone{min-height:800px}#paw-phone .camera{right:-12vw;top:37svh}#paw-phone .landscape img{object-position:36% 50%}#paw-phone .demonstration{left:8%;top:9%;font-size:8px}#paw-phone .scene-footer{left:8%;right:8%;bottom:20px;font-size:9px;gap:12px}#paw-phone .scroll-track{display:none}#paw-phone:not(.paw-active),#paw-phone:not(.paw-active) .stage{height:1050px}#paw-phone:not(.paw-active) .camera{top:350px}}@media(max-width:767px)and (max-height:700px){#paw-phone{--paw-art-width:min(88svh,95vw)}#paw-phone .camera{top:42svh}}@media(max-width:767px){#paw-phone{--paw-art-width:min(85svh,76vw)}#paw-phone .camera{right:-8vw;top:25svh}#paw-phone .demonstration{left:5%;top:17%}#paw-phone:not(.paw-active),#paw-phone:not(.paw-active) .stage{height:100svh;min-height:640px}#paw-phone:not(.paw-active) .camera{top:25%}}#paw-phone .paw-method-shade{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,rgba(30,12,62,.94),rgba(30,12,62,.83) 38%,rgba(30,12,62,.32) 64%,transparent 88%)}#paw-phone .paw-method-copy{position:relative;z-index:6;color:#fff;padding:100svh 4vw 60px;font-family:var(--f-text);line-height:1.55}#paw-phone #methode{padding:0;background:transparent;color:#fff;--mauve:#fff;--mauve-soft:rgba(255,255,255,.9);--line:rgba(255,255,255,.24);font-size:16px}#paw-phone #methode h2{font-size:clamp(28px,3.5vw,56px);max-width:18ch}#paw-phone #methode h2 em{color:#ff8b38}#paw-phone #methode .split .w{opacity:1;transform:none;transition:none}#paw-phone #methode .rail{margin-top:28px;gap:26px;padding-left:30px}#paw-phone #methode .station-mark{left:-30px}#paw-phone #methode .station h3{font-size:21px}#paw-phone #methode .station p{margin-top:10px}#paw-phone #methode .station-out{margin-top:12px;padding-top:10px}#paw-phone.paw-active .paw-method-copy{position:absolute;left:4vw;top:110px;bottom:40px;width:51%;padding:0;overflow:clip}#paw-phone.paw-active .camera{width:min(72svh,46vw);right:-2vw;top:20svh}#paw-phone:not(.paw-active),#paw-phone:not(.paw-active) .stage{height:auto;min-height:100svh}#paw-phone:not(.paw-active) .landscape{height:100svh}@media(max-width:767px){#paw-phone.paw-active .paw-method-copy{left:5vw;top:100px;bottom:36px;width:60%}#paw-phone.paw-active .camera{width:52vw;right:-14vw;top:28svh}#paw-phone #methode{font-size:14px}#paw-phone #methode h2{font-size:clamp(24px,6.2vw,38px)}#paw-phone #methode .station h3{font-size:18px}#paw-phone #methode .rail{padding-left:23px;gap:24px}#paw-phone #methode .station-mark{left:-23px}}
