@property --pfk-a{syntax:'<angle>';inherits:false;initial-value:0deg} #pfk{ --bg:#030a1c; --bg2:#06132f; --text:#eaf3ff; --soft:#c3d3ea; --muted:#8ea5c6; --line:rgba(130,190,255,.13); --line2:rgba(130,190,255,.24); --cyan:#4fd8ff; --lime:#c8ff50; --amber:#ffc65c; --pink:#ff7ac8; --violet:#9d8cff; --coral:#ff8f6b; --mint:#5ee6c4; --acc:var(--cyan); --sans:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,"Liberation Mono",monospace; position:relative; isolation:isolate; clip-path:inset(0); overflow:hidden; overflow:clip; width:100vw; max-width:none; margin:0 0 0 calc(50% - 50vw); padding:0; background:var(--bg); color:var(--text); font:400 17px/1.65 var(--sans); text-align:left; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } #pfk *,#pfk *::before,#pfk *::after{box-sizing:border-box} #pfk h1,#pfk h2,#pfk h3,#pfk h4,#pfk p,#pfk ul,#pfk ol,#pfk li,#pfk figure,#pfk pre,#pfk blockquote{ margin:0; padding:0; color:inherit; font-family:inherit; text-transform:none; letter-spacing:normal; border:0; background:none} #pfk ul,#pfk ol{list-style:none} #pfk a{color:inherit; text-decoration:none; box-shadow:none} #pfk img{max-width:100%; border:0} #pfk button{font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; text-transform:none; letter-spacing:inherit; box-shadow:none; border-radius:0; line-height:inherit; min-height:0; width:auto; text-align:inherit} #pfk button:hover,#pfk button:focus{background:none; color:inherit; border:0} #pfk input{font:inherit; color:inherit; margin:0; box-shadow:none} #pfk a:focus-visible,#pfk button:focus-visible,#pfk input:focus-visible{outline:2px solid var(--cyan); outline-offset:3px} #pfk .pfk-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} #pfk #pfk-bg{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.75} #pfk .pfk-blob{position:absolute; z-index:0; border-radius:50%; opacity:.35; pointer-events:none; background:radial-gradient(closest-side,var(--b) 22%,color-mix(in srgb,var(--b) 50%,transparent) 62%,transparent); animation:pfkBlob 22s ease-in-out infinite alternate} #pfk .pfk-blob.b1{width:980px; height:980px; left:-360px; top:920px; --b:#1546c9} #pfk .pfk-blob.b2{width:880px; height:880px; right:-340px; top:2420px; --b:#0e7c8f; animation-delay:-7s} #pfk .pfk-blob.b3{width:920px; height:920px; left:calc(10% - 180px); top:4520px; --b:#3b2a9c; animation-delay:-12s} #pfk .pfk-blob.b4{width:860px; height:860px; right:calc(5% - 180px); top:6720px; --b:#4f7a10; opacity:.22; animation-delay:-4s} @keyframes pfkBlob{to{transform:translate(90px,-120px) scale(1.15)}} #pfk .pfk-wrap{position:relative; max-width:1200px; margin:0 auto; padding:0 32px} #pfk .pfk-sec{position:relative; z-index:1; padding:130px 0; scroll-margin-top:20px} #pfk .pfk-sec::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:min(1136px,calc(100% - 64px)); height:1px; background:linear-gradient(90deg,transparent,var(--line2),transparent)} #pfk .pfk-eyebrow{display:flex; align-items:center; gap:10px; margin-bottom:22px; font:500 12.5px/1.4 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--acc)} #pfk .pfk-eyebrow::before{content:"//"; opacity:.65} #pfk .pfk-h2{font-weight:300; font-size:clamp(34px,4.6vw,62px); line-height:1.06; letter-spacing:-.028em; max-width:15ch} #pfk .pfk-h3{font-weight:400; font-size:clamp(23px,2.3vw,30px); line-height:1.22; letter-spacing:-.012em} #pfk .pfk-lead{font-size:clamp(17px,1.4vw,19.5px); line-height:1.65; color:var(--soft); max-width:58ch} #pfk .pfk-head{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; align-items:end} #pfk .pfk-head .pfk-lead{padding-bottom:6px} #pfk .pfk-head .pfk-h2{max-width:none; font-size:clamp(34px,4.3vw,58px)} #pfk .pfk-grad{background:linear-gradient(100deg,var(--cyan) 0%,#a8ecff 30%,var(--lime) 60%,var(--cyan) 100%); background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-box-decoration-break:clone; box-decoration-break:clone; animation:pfkShine 7s linear infinite} #pfk [style*="--acc"] .pfk-grad, #pfk .pfk-sec[style] .pfk-grad{ background-image:linear-gradient(100deg,var(--acc) 0%,#ffffff 32%,var(--acc) 64%,var(--acc) 100%)} @keyframes pfkShine{to{background-position:-220% 0}} #pfk.pfk-js [data-words] .w{display:inline-block; opacity:0; transform:translateY(.35em); filter:blur(10px)} #pfk.pfk-js [data-words].is-in .w{animation:pfkWord .9s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i) * 70ms)} @keyframes pfkWord{to{opacity:1; transform:none; filter:blur(0)}} #pfk.pfk-js [data-reveal]{opacity:0; transform:translateY(34px); filter:blur(6px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease; transition-delay:var(--d,0s)} #pfk.pfk-js [data-reveal].is-in{opacity:1; transform:none; filter:none} #pfk .pfk-checks{border-top:1px solid var(--line)} #pfk .pfk-checks li{position:relative; padding:22px 0 22px 38px; border-bottom:1px solid var(--line)} #pfk .pfk-checks li::before{content:""; position:absolute; left:2px; top:26px; width:20px; height:20px; background:var(--acc); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 10.5l4.2 4.2L16.5 5.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3.5 10.5l4.2 4.2L16.5 5.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; filter:drop-shadow(0 0 6px var(--acc))} #pfk .pfk-checks b{display:block; font-weight:600; font-size:17px; color:var(--text)} #pfk .pfk-checks span{display:block; margin-top:5px; font-size:15.5px; line-height:1.6; color:var(--muted)} #pfk .pfk-split{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:64px; align-items:center; margin-top:72px} #pfk .pfk-split.rev > :first-child{order:2} #pfk .pfk-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px} #pfk .pfk-tags li{padding:6px 13px; border-radius:999px; border:1px solid var(--line2); background:rgba(10,26,60,.55); font:500 12.5px/1.3 var(--mono); letter-spacing:.04em; color:var(--soft)} #pfk .pfk-win{position:relative; border-radius:20px; overflow:hidden; background:linear-gradient(180deg,rgba(14,32,72,.86),rgba(5,14,36,.92)); border:1px solid var(--line2); box-shadow:0 50px 90px -40px rgba(0,0,0,.85),0 0 80px -30px var(--acc)} #pfk .pfk-win::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:3; background:conic-gradient(from var(--pfk-a),transparent 0 62%,var(--acc) 80%,transparent 92%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); animation:pfkSpin 7s linear infinite} @keyframes pfkSpin{to{--pfk-a:360deg}} #pfk .pfk-win-bar{display:flex; align-items:center; gap:12px; height:44px; padding:0 14px 0 16px; border-bottom:1px solid var(--line); font:500 12px var(--mono); letter-spacing:.06em; color:var(--muted); background:rgba(3,10,28,.35)} #pfk .pfk-win-bar .pfk-sp{flex:1} #pfk .pfk-dots{display:flex; gap:7px} #pfk .pfk-dots i{width:10px; height:10px; border-radius:50%; background:#22355a} #pfk .pfk-dots i:first-child{background:#ff6b6b99} #pfk .pfk-dots i:nth-child(2){background:#ffc65c99} #pfk .pfk-dots i:nth-child(3){background:#c8ff5099} #pfk .pfk-mini{padding:5px 11px; border-radius:999px; border:1px solid var(--line2); font:500 11.5px var(--mono); letter-spacing:.06em; color:var(--soft); white-space:nowrap; transition:.2s} #pfk button.pfk-mini:hover{border-color:var(--acc); color:#fff} #pfk .pfk-hero{position:relative; z-index:1; padding-bottom:34px} #pfk .pfk-hero-media{position:relative; width:100%; aspect-ratio:2048/768; min-height:250px; max-height:78vh; overflow:hidden} #pfk .pfk-hero-media img{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 40%; will-change:transform} #pfk .pfk-hero-media::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(3,10,28,0) 75%,var(--bg) 100%)} #pfk .pfk-hero-text{margin-top:24px; position:relative} #pfk .pfk-crumb{font:500 12px var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--muted)} #pfk .pfk-crumb b{color:var(--cyan); font-weight:500} #pfk .pfk-h1{margin-top:20px; font-weight:300; font-size:clamp(46px,7.4vw,108px); line-height:.98; letter-spacing:-.04em; max-width:12ch} #pfk .pfk-hero .pfk-lead{margin-top:30px; max-width:62ch} #pfk .pfk-prompt{position:relative; display:flex; align-items:center; gap:14px; max-width:760px; margin-top:42px; min-height:70px; padding:14px 14px 14px 18px; border-radius:20px; background:rgba(7,19,46,.82); border:1px solid var(--line2); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 30px 70px -30px rgba(0,0,0,.8),0 0 60px -25px var(--cyan)} #pfk .pfk-prompt::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; pointer-events:none; background:conic-gradient(from var(--pfk-a),var(--cyan),var(--lime),#7d5cff,var(--cyan)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); animation:pfkSpin 5s linear infinite; opacity:.85} #pfk .pfk-spark{flex:0 0 36px; width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:radial-gradient(circle at 30% 25%,#ffffff,#7fe6ff 35%,#1d5be0 100%); box-shadow:0 0 22px rgba(79,216,255,.6)} #pfk .pfk-spark svg{width:20px; height:20px; animation:pfkTurn 8s linear infinite} @keyframes pfkTurn{to{transform:rotate(360deg)}} #pfk .pfk-typed-box{flex:1; min-width:0; font-size:18px; line-height:1.45; color:var(--text)} #pfk .pfk-caret{display:inline-block; width:2px; height:1.15em; margin-left:2px; vertical-align:-.18em; background:var(--cyan); box-shadow:0 0 10px var(--cyan); animation:pfkBlink 1s steps(1) infinite} @keyframes pfkBlink{50%{opacity:0}} #pfk .pfk-send{flex:0 0 44px; width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#04122e; background:linear-gradient(135deg,var(--cyan),var(--lime)); transition:transform .2s, box-shadow .2s} #pfk .pfk-send svg{width:20px; height:20px} #pfk .pfk-prompt.sending .pfk-send{transform:scale(.88); box-shadow:0 0 30px var(--lime)} #pfk .pfk-prompt-under{display:flex; align-items:center; gap:10px; min-height:26px; margin-top:14px; padding-left:4px; font:500 12.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)} #pfk .pfk-prompt-under a{display:inline-flex; align-items:center; gap:8px; color:var(--c,var(--cyan)); opacity:0; transform:translateX(-8px); transition:opacity .4s, transform .4s} #pfk .pfk-prompt-under a.on{opacity:1; transform:none} #pfk .pfk-prompt-under a i{width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor} #pfk .pfk-think{display:inline-flex; gap:4px; vertical-align:middle} #pfk .pfk-think i{width:6px; height:6px; border-radius:50%; background:currentColor; animation:pfkDot 1s ease-in-out infinite} #pfk .pfk-think i:nth-child(2){animation-delay:.15s} #pfk .pfk-think i:nth-child(3){animation-delay:.3s} @keyframes pfkDot{0%,100%{opacity:.25; transform:translateY(0)}50%{opacity:1; transform:translateY(-3px)}} #pfk .pfk-map{position:relative; margin-top:64px; height:620px; border-radius:28px; overflow:hidden; border:1px solid var(--line); background:radial-gradient(55% 65% at 50% 50%,rgba(40,95,210,.20),transparent 70%),rgba(3,10,30,.55)} #pfk .pfk-map canvas{position:absolute; inset:0; width:100%; height:100%} #pfk .pfk-map-lbl{position:absolute; left:0; top:0; display:flex; align-items:center; gap:8px; white-space:nowrap; padding:6px 10px; border-radius:8px; font:500 12px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--soft); background:rgba(3,10,30,.55); transition:color .25s, background .25s, box-shadow .25s} #pfk .pfk-map-lbl i{width:7px; height:7px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c)} #pfk .pfk-map-lbl em{font-style:normal; color:var(--muted)} #pfk .pfk-map-lbl:hover,#pfk .pfk-map-lbl.hot{color:#fff; background:rgba(10,26,60,.9); box-shadow:0 0 0 1px var(--c),0 0 24px -6px var(--c)} #pfk .pfk-map-note{position:absolute; right:22px; bottom:16px; font:500 10.5px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); opacity:.7} #pfk .pfk-art-win{margin-top:72px} #pfk .pfk-art-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); height:510px} #pfk .pfk-chat{display:flex; flex-direction:column; justify-content:flex-end; gap:14px; padding:20px; border-right:1px solid var(--line); overflow:hidden} #pfk .pfk-msg{max-width:94%; padding:12px 15px; border-radius:16px; font-size:15px; line-height:1.55; animation:pfkPop .45s cubic-bezier(.2,.8,.2,1) both} #pfk .pfk-msg small{display:block; margin-bottom:4px; font:600 10.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; opacity:.7} #pfk .pfk-msg.user{align-self:flex-end; background:rgba(79,216,255,.13); border:1px solid rgba(79,216,255,.28); border-bottom-right-radius:5px} #pfk .pfk-msg.ai{align-self:flex-start; background:rgba(255,255,255,.045); border:1px solid var(--line); border-bottom-left-radius:5px} #pfk .pfk-msg.ai small{color:var(--acc); opacity:1} @keyframes pfkPop{from{opacity:0; transform:translateY(10px) scale(.97)}} #pfk .pfk-pane{position:relative; padding:20px; overflow:hidden} #pfk .pfk-pane-tab{display:flex; align-items:center; gap:8px; margin-bottom:16px; font:500 11.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)} #pfk .pfk-pane-tab i{width:8px; height:8px; border-radius:2px; background:var(--acc); box-shadow:0 0 10px var(--acc)} #pfk .pfk-pane-tab b{margin-left:auto; font-weight:500; padding:3px 8px; border-radius:6px; background:rgba(200,255,80,.12); color:var(--lime); opacity:0; transition:.4s} #pfk .pfk-pane[data-s="app"] .pfk-pane-tab b{opacity:1} #pfk .pfk-pane-empty{position:absolute; inset:60px 20px 20px; display:grid; place-items:center; border-radius:14px; border:1px dashed var(--line2); font:500 12.5px var(--mono); letter-spacing:.1em; color:var(--muted); text-align:center; padding:20px; background-image:radial-gradient(rgba(130,190,255,.12) 1px,transparent 1px); background-size:18px 18px; transition:opacity .4s} #pfk .pfk-pane:not([data-s="leer"]) .pfk-pane-empty{opacity:0} #pfk .pfk-code{position:absolute; inset:56px 20px 20px; margin:0; padding:16px; border-radius:14px; overflow:hidden; white-space:pre-wrap; background:rgba(2,8,22,.75); border:1px solid var(--line); font:400 12.5px/1.75 var(--mono); color:#b7c8e4; opacity:0; transition:opacity .35s, filter .5s} #pfk .pfk-pane[data-s="code"] .pfk-code{opacity:1} #pfk .pfk-code .t{color:var(--cyan); font-style:normal} #pfk .pfk-code .s{color:var(--lime); font-style:normal} #pfk .pfk-code .k{color:#c4a8ff; font-style:normal} #pfk .pfk-pane::after{content:""; position:absolute; left:20px; bottom:20px; height:2px; width:calc((100% - 40px) * var(--prog,0)); border-radius:2px; background:linear-gradient(90deg,var(--cyan),var(--lime)); box-shadow:0 0 12px var(--cyan); opacity:0; transition:width .2s, opacity .4s} #pfk .pfk-pane[data-s="code"]::after{opacity:1} #pfk .pfk-poll{--pc:var(--cyan); position:relative; padding:22px; border-radius:16px; background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); border:1px solid var(--line2); opacity:0; transform:scale(.96); filter:blur(8px); transition:opacity .6s, transform .6s, filter .6s; pointer-events:none} #pfk .pfk-pane[data-s="app"] .pfk-poll{opacity:1; transform:none; filter:none; pointer-events:auto} #pfk .pfk-poll.v2{--pc:var(--lime)} #pfk .pfk-poll-k{font:600 11px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--pc); transition:color .6s} #pfk .pfk-poll h4{margin-top:6px; font-size:20px; font-weight:500; line-height:1.3} #pfk .pfk-opts{display:grid; gap:10px; margin-top:18px} #pfk .pfk-opt{position:relative; display:flex; align-items:center; gap:10px; width:100%; padding:13px 14px; border-radius:12px; overflow:hidden; border:1px solid var(--line2); background:rgba(3,10,28,.45); font-size:15px; text-align:left; transition:border-color .3s} #pfk .pfk-opt:hover{border-color:var(--pc)} #pfk .pfk-opt .bar{position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,var(--pc),transparent); opacity:.22; transition:width .8s cubic-bezier(.2,.8,.2,1), background .6s} #pfk .pfk-opt .l{position:relative; flex:1} #pfk .pfk-opt .p{position:relative; font:600 13px var(--mono); color:var(--soft)} #pfk .pfk-opt.mine{border-color:var(--pc); box-shadow:0 0 22px -8px var(--pc)} #pfk .pfk-opt.mine .l::after{content:"  ✓"; color:var(--pc)} #pfk .pfk-poll-foot{display:flex; align-items:center; gap:10px; margin-top:16px; font-size:13px; color:var(--muted)} #pfk .pfk-poll-foot span{flex:1} #pfk .pfk-share{padding:8px 13px; border-radius:10px; background:var(--pc); color:#04122e; font-weight:600; font-size:13px; transition:background .6s} #pfk button.pfk-share:hover{background:var(--pc); color:#04122e; filter:brightness(1.1)} #pfk .pfk-komm{display:flex; gap:8px; max-height:0; overflow:hidden; opacity:0; transition:max-height .7s, opacity .7s, margin .7s} #pfk .pfk-poll.v2 .pfk-komm{max-height:60px; opacity:1; margin-top:14px} #pfk .pfk-komm input{flex:1; min-width:0; height:40px; padding:0 12px; border-radius:10px; border:1px solid var(--line2); background:rgba(3,10,28,.6); font-size:14px; color:var(--text)} #pfk .pfk-komm button{padding:0 14px; border-radius:10px; border:1px solid var(--pc); color:var(--pc); font-size:13px; font-weight:600} #pfk .pfk-scan{position:absolute; left:0; right:0; top:-30%; height:30%; pointer-events:none; opacity:0; background:linear-gradient(180deg,transparent,rgba(79,216,255,.18) 70%,rgba(200,255,80,.55) 100%); mix-blend-mode:screen} #pfk .pfk-scan.go{animation:pfkScan 1.1s ease-in-out} @keyframes pfkScan{0%{top:-30%; opacity:1}100%{top:110%; opacity:1}} #pfk .pfk-toast{position:absolute; left:50%; bottom:18px; transform:translate(-50%,10px); padding:8px 14px; border-radius:999px; z-index:4; background:#eaf3ff; color:#04122e; font-size:13px; font-weight:600; opacity:0; transition:.3s; pointer-events:none; white-space:nowrap} #pfk .pfk-toast.on{opacity:1; transform:translate(-50%,0)} #pfk .pfk-term-body{height:400px; padding:18px 20px; overflow:hidden; font:400 13.5px/1.75 var(--mono); color:#b9c9e3} #pfk .pfk-term-body div{white-space:pre-wrap; animation:pfkPop .3s ease both} #pfk .pfk-term-body .cmd{color:#fff} #pfk .pfk-term-body .cmd::before{content:"$ "; color:var(--lime)} #pfk .pfk-term-body .ask{color:var(--cyan)} #pfk .pfk-term-body .ask::before{content:"> "; color:var(--muted)} #pfk .pfk-term-body .dim{color:var(--muted)} #pfk .pfk-term-body .ok{color:var(--lime)} #pfk .pfk-term-body .step{display:flex; gap:10px} #pfk .pfk-term-body .step .st{width:16px; flex:0 0 16px; color:var(--amber)} #pfk .pfk-term-body .step.done .st{color:var(--lime)} #pfk .pfk-term-body .step .tx{flex:1} #pfk .pfk-term-body .cur::after{content:""; display:inline-block; width:8px; height:1.1em; margin-left:2px; vertical-align:-.2em; background:var(--lime); animation:pfkBlink 1s steps(1) infinite} #pfk .pfk-case{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; margin-top:110px; padding:56px; border-radius:30px; border:1px solid var(--line); background:radial-gradient(70% 90% at 85% 10%,color-mix(in srgb,var(--acc) 12%,transparent),transparent 70%),linear-gradient(180deg,rgba(10,26,62,.55),rgba(4,12,32,.4))} #pfk .pfk-case.rev > :first-child{order:2} #pfk .pfk-case.pfk-tall{align-items:start} #pfk .pfk-case.pfk-tall > :first-child{position:sticky; top:110px; padding-top:40px} #pfk .pfk-case-k{display:inline-flex; align-items:center; gap:9px; margin-bottom:18px; font:600 11.5px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--acc)} #pfk .pfk-case-k i{width:8px; height:8px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 0 var(--acc); animation:pfkPing 2s infinite} @keyframes pfkPing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 70%,transparent)}100%{box-shadow:0 0 0 12px transparent}} #pfk .pfk-case p{margin-top:16px; color:var(--soft); font-size:16.5px} #pfk .pfk-case p.pfk-note{font-size:15px; color:var(--muted)} #pfk .pfk-phone{position:relative; min-height:400px; display:flex; justify-content:center} #pfk .pfk-phone::before{content:""; position:absolute; left:50%; top:46%; width:80%; height:70%; transform:translate(-50%,-50%); background:radial-gradient(closest-side,rgba(79,216,255,.35),transparent); filter:blur(30px); pointer-events:none} #pfk .pfk-phone iframe{position:relative; display:block; width:100%; max-width:470px; height:960px; border:0; background:transparent; color-scheme:normal} #pfk .pfk-phone-load{align-self:center; font:500 12.5px var(--mono); color:var(--muted)} #pfk .pfk-plan{margin-top:72px} #pfk .pfk-plan-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)} #pfk .pfk-clock{position:relative; padding:30px; border-right:1px solid var(--line); display:grid; place-items:center} #pfk .pfk-clock svg{width:100%; max-width:390px; height:auto; overflow:visible} #pfk .pfk-clock-c{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none} #pfk .pfk-clock-c b{font:300 46px/1 var(--mono); letter-spacing:-.02em; color:#fff; text-shadow:0 0 24px rgba(255,198,92,.5)} #pfk .pfk-clock-c span{margin-top:10px; font-size:15px; color:var(--soft)} #pfk .pfk-clock-c small{margin-top:6px; font:500 10.5px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--muted)} #pfk .pfk-clock .mk{transition:r .3s} #pfk .pfk-clock .mk.ping{animation:pfkMk 1.2s ease-out} @keyframes pfkMk{0%{stroke-width:0; stroke-opacity:1}100%{stroke-width:26; stroke-opacity:0}} #pfk .pfk-plan-side{display:flex; flex-direction:column; min-width:0} #pfk .pfk-tasks{padding:12px 20px; border-bottom:1px solid var(--line)} #pfk .pfk-tasks li{display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:10px; font-size:14.5px; transition:background .4s} #pfk .pfk-tasks li i{width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c)} #pfk .pfk-tasks li b{font:500 13px var(--mono); color:var(--soft); width:46px; flex:0 0 46px} #pfk .pfk-tasks li span{flex:1; min-width:0} #pfk .pfk-tasks li em{font-style:normal; font:500 11px var(--mono); letter-spacing:.06em; color:var(--muted); white-space:nowrap} #pfk .pfk-tasks li.fire{background:color-mix(in srgb,var(--c) 16%,transparent)} #pfk .pfk-log{flex:1; min-height:250px; padding:16px 22px; font:400 13px/1.6 var(--mono); color:#b9c9e3; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:8px} #pfk .pfk-log div{display:flex; gap:10px; animation:pfkPop .35s ease both} #pfk .pfk-log div > b{flex:0 0 auto; font-weight:500; color:var(--muted)} #pfk .pfk-log div > i{flex:0 0 14px; font-style:normal; color:var(--amber)} #pfk .pfk-log div.done > i{color:var(--lime)} #pfk .pfk-log div > span{flex:1} #pfk .pfk-log div.old{opacity:.45} #pfk .pfk-spin{display:inline-block; animation:pfkTurn .8s linear infinite} #pfk .pfk-pipe{position:relative; padding:34px 10px 10px} #pfk .pfk-pipe-line{position:absolute; left:12%; right:12%; top:70px; height:2px; background:var(--line2)} #pfk .pfk-pipe-fill{position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg,var(--amber),var(--lime)); box-shadow:0 0 12px var(--lime); transition:width 1s ease} #pfk .pfk-pipe-steps{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:8px} #pfk .pfk-pipe-step{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px} #pfk .pfk-pipe-ic{width:72px; height:72px; border-radius:20px; display:grid; place-items:center; border:1px solid var(--line2); background:rgba(6,18,44,.9); color:var(--muted); transition:all .5s} #pfk .pfk-pipe-ic svg{width:30px; height:30px} #pfk .pfk-pipe-step.on .pfk-pipe-ic{color:#04122e; background:linear-gradient(135deg,var(--amber),var(--lime)); border-color:transparent; box-shadow:0 0 36px -6px var(--lime)} #pfk .pfk-pipe-step b{font-size:14.5px; font-weight:600} #pfk .pfk-pipe-step span{font-size:13px; color:var(--muted); line-height:1.4} #pfk .pfk-paper{position:absolute; width:26px; height:34px; top:52px; left:12%; margin-left:-13px; border-radius:3px; background:#fff; opacity:0; box-shadow:0 0 18px rgba(255,255,255,.7); transition:left 1s cubic-bezier(.5,0,.3,1), opacity .4s} #pfk .pfk-paper::before{content:""; position:absolute; left:5px; right:5px; top:7px; height:14px; background:repeating-linear-gradient(180deg,#9fb3d1 0 2px,transparent 2px 5px)} #pfk .pfk-studio{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)} #pfk .pfk-canvas{position:relative; display:grid; place-items:center; padding:40px 28px; border-right:1px solid var(--line); overflow:hidden; background-image:radial-gradient(rgba(130,190,255,.10) 1px,transparent 1px); background-size:20px 20px} #pfk .pfk-flyer{--h:195; --r:18px; --fs:38px; --gap:22px; position:relative; width:100%; max-width:380px; overflow:hidden; border-radius:var(--r); background:#fff; color:#0a1f3a; box-shadow:0 30px 60px -25px rgba(0,0,0,.8); display:grid; grid-template-columns:1fr; transition:border-radius .5s, background .5s, color .5s, max-width .5s} #pfk .pfk-fl-img{position:relative; height:170px; overflow:hidden; background:linear-gradient(160deg,hsl(var(--h) 85% 62%),hsl(calc(var(--h) + 40) 75% 40%)); transition:background .5s} #pfk .pfk-fl-img svg{position:absolute; inset:0; width:100%; height:100%} #pfk .pfk-fl-body{padding:var(--gap); transition:padding .5s} #pfk .pfk-fl-tag{display:inline-block; padding:4px 10px; border-radius:calc(var(--r) * .6); font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:hsl(var(--h) 90% 94%); color:hsl(var(--h) 70% 32%); transition:all .5s} #pfk .pfk-flyer h4{margin-top:12px; font-size:min(var(--fs),8.4vw); overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto; line-height:1.05; font-weight:800; letter-spacing:-.02em; color:hsl(var(--h) 60% 22%); transition:font-size .4s, color .5s} #pfk .pfk-flyer p{margin-top:10px; font-size:14.5px; line-height:1.5; color:#40566f; transition:color .5s} #pfk .pfk-fl-meta{margin-top:14px; font-size:13px; font-weight:600; color:hsl(var(--h) 55% 35%); transition:color .5s} #pfk .pfk-fl-btn{display:inline-block; margin-top:16px; padding:10px 18px; border-radius:calc(var(--r) * .7); font-size:14px; font-weight:700; background:hsl(var(--h) 80% 45%); color:#fff; transition:all .5s} #pfk .pfk-flyer.dark{background:#0d1626; color:#eaf3ff} #pfk .pfk-flyer.dark h4{color:hsl(var(--h) 90% 75%)} #pfk .pfk-flyer.dark p{color:#b4c4da} #pfk .pfk-flyer.dark .pfk-fl-meta{color:hsl(var(--h) 80% 70%)} #pfk .pfk-flyer.dark .pfk-fl-tag{background:hsl(var(--h) 60% 20%); color:hsl(var(--h) 90% 80%)} #pfk .pfk-flyer.verspielt h4{font-family:"Segoe Print","Bradley Hand","Chalkboard SE","Comic Neue","Trebuchet MS",cursive; font-weight:700; letter-spacing:0; transform:rotate(-2deg)} #pfk .pfk-flyer.verspielt .pfk-fl-tag{transform:rotate(-4deg)} #pfk .pfk-flyer.verspielt .pfk-fl-btn{border-radius:999px} #pfk .pfk-flyer.elegant h4{font-family:Georgia,"Times New Roman",serif; font-weight:400; font-style:italic; letter-spacing:0} #pfk .pfk-flyer.elegant .pfk-fl-tag{background:none; padding-left:0; letter-spacing:.24em} #pfk .pfk-flyer.elegant .pfk-fl-btn{background:none; color:hsl(var(--h) 60% 35%); box-shadow:inset 0 0 0 1.5px currentColor; letter-spacing:.12em; text-transform:uppercase; font-size:12px} #pfk .pfk-flyer.dark.elegant .pfk-fl-btn{color:hsl(var(--h) 90% 75%)} #pfk .pfk-flyer.links{grid-template-columns:42% 1fr; max-width:520px} #pfk .pfk-flyer.links .pfk-fl-img{height:auto; min-height:100%} #pfk .pfk-ctrl{padding:22px 24px; display:flex; flex-direction:column; gap:18px} #pfk .pfk-ctrl-h{font:600 11px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--acc); display:flex; gap:8px; align-items:center} #pfk .pfk-ctrl-h svg{width:14px; height:14px} #pfk .pfk-field label{display:flex; justify-content:space-between; margin:0 0 8px; font-size:13.5px; font-weight:600; color:var(--soft)} #pfk .pfk-field label output{font:500 12px var(--mono); color:var(--muted)} #pfk .pfk-range{-webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px; border:0; padding:0; background:linear-gradient(90deg,var(--acc) var(--p,50%),rgba(130,190,255,.18) var(--p,50%)); outline:none} #pfk .pfk-range.hue{background:linear-gradient(90deg,hsl(0 85% 60%),hsl(60 85% 60%),hsl(120 85% 55%),hsl(180 85% 55%),hsl(240 85% 65%),hsl(300 85% 65%),hsl(360 85% 60%))} #pfk .pfk-range::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#fff; border:0; box-shadow:0 0 0 4px rgba(255,122,200,.35),0 2px 8px rgba(0,0,0,.5); cursor:grab} #pfk .pfk-range::-moz-range-thumb{width:20px; height:20px; border-radius:50%; background:#fff; border:0; box-shadow:0 0 0 4px rgba(255,122,200,.35),0 2px 8px rgba(0,0,0,.5); cursor:grab} #pfk .pfk-seg{display:flex; gap:6px; padding:4px; border-radius:12px; background:rgba(3,10,28,.6); border:1px solid var(--line)} #pfk .pfk-seg button{flex:1; padding:8px 6px; border-radius:9px; font-size:13px; font-weight:600; color:var(--muted); text-align:center; transition:.25s} #pfk .pfk-seg button.on{background:var(--acc); color:#1a0420} #pfk .pfk-seg button:not(.on):hover{color:#fff} #pfk .pfk-ask{display:flex; gap:8px; margin-top:4px} #pfk .pfk-ask input{flex:1; min-width:0; height:44px; padding:0 14px; border-radius:12px; border:1px solid var(--line2); background:rgba(3,10,28,.7); font-size:14.5px; color:var(--text)} #pfk .pfk-ask input::placeholder{color:#6f86a8} #pfk .pfk-ask button{width:44px; flex:0 0 44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#1a0420; background:linear-gradient(135deg,var(--pink),#ffb36b)} #pfk .pfk-ask button svg{width:18px; height:18px} #pfk .pfk-sugg{display:flex; flex-wrap:wrap; gap:6px} #pfk .pfk-sugg button{padding:6px 11px; border-radius:999px; border:1px solid var(--line2); font-size:12.5px; color:var(--soft); transition:.2s} #pfk .pfk-sugg button:hover{border-color:var(--acc); color:#fff} #pfk .pfk-reply{min-height:22px; font-size:13.5px; color:var(--acc)} #pfk .pfk-busy{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; opacity:0; transition:opacity .3s} #pfk .pfk-busy span{padding:8px 14px; border-radius:999px; background:rgba(3,10,28,.85); border:1px solid var(--acc); font:500 12px var(--mono); letter-spacing:.08em; color:#fff; box-shadow:0 0 30px -6px var(--acc)} #pfk .pfk-canvas.busy .pfk-busy{opacity:1} #pfk .pfk-canvas .pfk-scan{background:linear-gradient(180deg,transparent,rgba(255,122,200,.16) 70%,rgba(255,200,240,.6) 100%)} #pfk .pfk-orbit-wrap{display:flex; flex-direction:column; align-items:center} #pfk .pfk-orbit{position:relative; width:min(100%,560px); aspect-ratio:1} #pfk .pfk-orbit canvas{position:absolute; inset:0; width:100%; height:100%} #pfk .pfk-core{position:absolute; left:50%; top:50%; width:120px; height:120px; margin:-60px 0 0 -60px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 35% 30%,#ffffff 0%,#c8bfff 18%,#6d55ff 55%,#1d1470 100%); color:#fff; font-size:19px; font-weight:600; letter-spacing:.02em; box-shadow:0 0 60px rgba(157,140,255,.75),0 0 140px rgba(110,80,255,.35); text-shadow:0 1px 6px rgba(20,10,80,.8)} #pfk .pfk-core::after{content:""; position:absolute; inset:-14px; border-radius:50%; border:1px solid rgba(157,140,255,.5); animation:pfkCore 2.6s ease-out infinite} @keyframes pfkCore{from{transform:scale(.85); opacity:1}to{transform:scale(1.5); opacity:0}} #pfk .pfk-svc{position:absolute; left:0; top:0; display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px; white-space:nowrap; background:rgba(8,18,44,.92); border:1px solid var(--line2); font-size:13.5px; font-weight:600; color:var(--text); cursor:default; transition:border-color .25s, box-shadow .25s, background .25s; will-change:transform} #pfk .pfk-svc i{width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:0 0 10px var(--c)} #pfk .pfk-svc.hot{border-color:var(--c); background:rgba(20,30,70,.95); box-shadow:0 0 28px -4px var(--c)} #pfk .pfk-orbit-cap{min-height:56px; max-width:440px; margin-top:16px; text-align:center; font-size:15.5px; color:var(--soft)} #pfk .pfk-orbit-cap b{color:#fff} #pfk .pfk-flows{display:grid; gap:14px; margin-top:80px} #pfk .pfk-flow{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:28px; align-items:center; padding:22px 26px; border-radius:18px; border:1px solid var(--line); background:rgba(6,16,40,.55)} #pfk .pfk-flow-line{display:flex; align-items:center; gap:0} #pfk .pfk-node{flex:0 0 auto; padding:8px 12px; border-radius:10px; border:1px solid var(--line2); background:rgba(3,10,28,.8); font-size:13.5px; font-weight:600; white-space:nowrap} #pfk .pfk-node.c{border-color:var(--acc); color:#fff; box-shadow:0 0 22px -6px var(--acc)} #pfk .pfk-wire{position:relative; flex:1; min-width:24px; height:2px; background:var(--line2); overflow:hidden} #pfk .pfk-wire i{position:absolute; top:-2px; left:0; width:30%; height:6px; border-radius:3px; background:linear-gradient(90deg,transparent,var(--acc),#fff); filter:drop-shadow(0 0 6px var(--acc)); transform:translateX(-100%); animation:pfkWire 2.2s linear infinite} #pfk .pfk-flow:nth-child(2) .pfk-wire i{animation-delay:-.7s} #pfk .pfk-flow:nth-child(3) .pfk-wire i{animation-delay:-1.4s} #pfk .pfk-wire + .pfk-node + .pfk-wire i{animation-delay:-1.1s} @keyframes pfkWire{to{transform:translateX(334%)}} #pfk .pfk-flow p{font-size:15.5px; color:var(--soft)} #pfk .pfk-cols{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:36px; margin-top:48px; border-top:0} #pfk .pfk-cols li{border-bottom:0; border-top:1px solid var(--line)} #pfk .pfk-kifx-frame{position:relative; margin-top:64px; border-radius:26px; overflow:hidden; border:1px solid var(--line2); box-shadow:0 60px 120px -50px rgba(0,0,0,.9),0 0 120px -40px rgba(79,216,255,.6)} #pfk .pfk-facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:28px} #pfk .pfk-facts div{padding:20px 22px; border-radius:16px; border:1px solid color-mix(in srgb,var(--acc) 50%,transparent); background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 12%,transparent),rgba(6,16,40,.6) 70%); box-shadow:0 0 28px -14px var(--acc), inset 0 1px 0 color-mix(in srgb,var(--acc) 25%,transparent)} #pfk .pfk-facts em{display:block; font-style:normal; font:600 11px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--acc)} #pfk .pfk-facts b{display:block; margin-top:6px; font-size:15.5px; font-weight:500; line-height:1.45} #pfk .pfk-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:64px} #pfk .pfk-card{--mx:50%; --my:50%; position:relative; padding:28px; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:rgba(6,16,40,.6); transition:transform .3s, border-color .3s} #pfk .pfk-card::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s; background:radial-gradient(320px circle at var(--mx) var(--my),color-mix(in srgb,var(--c) 22%,transparent),transparent 60%)} #pfk .pfk-card:hover{transform:translateY(-4px); border-color:color-mix(in srgb,var(--c) 50%,transparent)} #pfk .pfk-card:hover::before{opacity:1} #pfk .pfk-card-ic{position:relative; width:48px; height:48px; border-radius:14px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb,var(--c) 14%,transparent); border:1px solid color-mix(in srgb,var(--c) 35%,transparent)} #pfk .pfk-card-ic svg{width:24px; height:24px} #pfk .pfk-card h3{position:relative; margin-top:20px; font-size:19px; font-weight:600} #pfk .pfk-card p{position:relative; margin-top:8px; font-size:15px; line-height:1.6; color:var(--muted)} #pfk .pfk-fine{max-width:760px; margin:90px auto 0; text-align:center; font-size:13px; line-height:1.6; color:var(--muted)} #pfk .pfk-navplatz{position:relative; z-index:30; padding:4px 0 70px} #pfk .pfk-nav{display:inline-flex; align-items:center; gap:4px; max-width:100%; padding:6px; border-radius:999px; background:rgba(4,12,32,.8); border:1px solid var(--line2); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 20px 50px -24px rgba(0,0,0,.9); animation:pfkNavAuf .8s .9s cubic-bezier(.2,.8,.2,1) backwards} @keyframes pfkNavAuf{from{opacity:0; transform:translateY(20px); filter:blur(6px)}} #pfk .pfk-nav.fix{position:fixed; top:14px; left:50%; z-index:40; transform:translateX(-50%); box-shadow:0 18px 50px -14px rgba(0,0,0,.95),0 0 44px -18px var(--cyan); animation:pfkNavFix .45s cubic-bezier(.2,.8,.2,1)} @keyframes pfkNavFix{from{opacity:0; transform:translate(-50%,-18px)}to{opacity:1; transform:translate(-50%,0)}} #pfk .pfk-nav a,#pfk .pfk-dock a{display:flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; font:500 11.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--soft); white-space:nowrap; transition:color .25s, background .25s} #pfk .pfk-nav a i,#pfk .pfk-dock a i{width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--c); opacity:.6; transition:.25s} #pfk .pfk-nav a:hover,#pfk .pfk-dock a:hover{color:#fff; background:color-mix(in srgb,var(--c) 12%,transparent)} #pfk .pfk-nav a.on,#pfk .pfk-dock a.on{color:#fff; background:color-mix(in srgb,var(--c) 22%,transparent)} #pfk .pfk-nav a.on i,#pfk .pfk-dock a.on i{opacity:1; box-shadow:0 0 10px var(--c)} #pfk .pfk-lang{display:inline-flex; gap:2px; margin-left:6px; padding-left:8px; border-left:1px solid var(--line2)} #pfk .pfk-lang button{padding:8px 11px; border-radius:999px; font:600 11.5px var(--mono); letter-spacing:.08em; color:var(--muted); transition:color .25s, background .25s} #pfk .pfk-lang button:hover{color:#fff; background:rgba(255,255,255,.06)} #pfk .pfk-lang button.on,#pfk .pfk-lang button.on:hover{color:#04122e; background:linear-gradient(135deg,var(--cyan),var(--lime)); box-shadow:0 0 18px -4px var(--cyan)} #pfk .pfk-dock{position:fixed; left:50%; bottom:18px; z-index:20; display:flex; align-items:center; gap:4px; padding:6px; border-radius:999px; max-width:calc(100vw - 24px); background:rgba(4,12,32,.86); border:1px solid var(--line2); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 20px 50px -20px rgba(0,0,0,.9); transform:translate(-50%,140%); opacity:0; transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s} #pfk .pfk-dock.on{transform:translate(-50%,0); opacity:1} #pfk .pfk-dock .pfk-dock-lang,#pfk .pfk-dock .pfk-dock-lang:hover{flex:0 0 auto; margin-left:2px; padding:8px 11px; border-radius:999px; font:600 11.5px var(--mono); letter-spacing:.08em; color:#04122e; background:linear-gradient(135deg,var(--cyan),var(--lime))} #pfk .pfk-neu{animation:pfkNeu .7s ease} @keyframes pfkNeu{from{opacity:0; filter:blur(8px)}} @media (min-width:900px){ #pfk .pfk-dock{display:none} #pfk .pfk-sec{scroll-margin-top:84px} } @media (max-width:899px){ #pfk .pfk-navplatz{padding-bottom:44px} #pfk .pfk-nav,#pfk .pfk-nav.fix{position:static; transform:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none} #pfk .pfk-nav a{border:1px solid var(--line2); background:rgba(8,22,52,.6)} #pfk .pfk-lang{margin-left:0; padding:3px; border:1px solid var(--line2); border-radius:999px; background:rgba(8,22,52,.6)} } @media (max-width:1180px){ #pfk .pfk-map-lbl em{display:none} } @media (max-width:1100px){ #pfk .pfk-dock a span{display:none} #pfk .pfk-dock a.on span{display:inline} } @media (max-width:960px){ #pfk .pfk-head,#pfk .pfk-split,#pfk .pfk-case,#pfk .pfk-flow{grid-template-columns:1fr; gap:32px} #pfk .pfk-split.rev > :first-child,#pfk .pfk-case.rev > :first-child{order:0} #pfk .pfk-case{padding:36px 28px; margin-top:80px} #pfk .pfk-art-grid,#pfk .pfk-plan-grid,#pfk .pfk-studio{grid-template-columns:1fr} #pfk .pfk-art-win{margin-top:72px} #pfk .pfk-art-grid{height:auto} #pfk .pfk-chat{border-right:0; border-bottom:1px solid var(--line); height:270px} #pfk .pfk-pane{height:480px} #pfk .pfk-case.pfk-tall > :first-child{position:static; padding-top:0} #pfk .pfk-cols{grid-template-columns:1fr} #pfk .pfk-clock,#pfk .pfk-canvas{border-right:0; border-bottom:1px solid var(--line)} #pfk .pfk-cards{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:700px){ #pfk{font-size:16px} #pfk .pfk-wrap{padding:0 18px} #pfk .pfk-sec{padding:90px 0} #pfk .pfk-sec::before{width:calc(100% - 36px)} #pfk .pfk-h1,#pfk .pfk-h2{-webkit-hyphens:auto; hyphens:auto} #pfk .pfk-prompt{align-items:flex-start; min-height:96px} #pfk .pfk-typed-box{font-size:16px} #pfk .pfk-map{height:560px; margin-top:44px} #pfk .pfk-map-lbl{font-size:10.5px; letter-spacing:.08em; padding:4px 6px} #pfk .pfk-map-lbl em{display:none} #pfk .pfk-case{padding:26px 18px; border-radius:22px} #pfk .pfk-term-body{height:440px; font-size:12.5px; padding:14px} #pfk .pfk-clock{padding:18px} #pfk .pfk-clock-c b{font-size:36px} #pfk .pfk-tasks{padding:10px} #pfk .pfk-tasks li em{display:none} #pfk .pfk-log{padding:14px; font-size:12px} #pfk .pfk-pipe-ic{width:56px; height:56px; border-radius:16px} #pfk .pfk-pipe-ic svg{width:24px; height:24px} #pfk .pfk-pipe-line{top:62px} #pfk .pfk-paper{top:44px} #pfk .pfk-pipe-step span{display:none} #pfk .pfk-flyer.links{grid-template-columns:1fr} #pfk .pfk-flyer.links .pfk-fl-img{height:150px} #pfk .pfk-svc{font-size:11.5px; padding:6px 10px} #pfk .pfk-core{width:76px; height:76px; margin:-38px 0 0 -38px; font-size:15px} #pfk .pfk-canvas{padding:26px 14px} #pfk .pfk-flow{padding:18px} #pfk .pfk-node{font-size:12px; padding:7px 9px} #pfk .pfk-facts{grid-template-columns:1fr} #pfk .pfk-cards{grid-template-columns:1fr} #pfk .pfk-fine{margin-top:60px} } @media (prefers-reduced-motion:reduce){ #pfk *,#pfk *::before,#pfk *::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important} #pfk.pfk-js [data-reveal],#pfk.pfk-js [data-words] .w{opacity:1; transform:none; filter:none} } #pfk .pfk-gwin{display:flex; flex-direction:column} #pfk .pfk-themen{display:flex; flex-wrap:wrap; gap:8px; padding:14px 16px; border-bottom:1px solid var(--line)} #pfk .pfk-themen button{padding:8px 13px; border-radius:999px; border:1px solid var(--line2); font-size:13px; font-weight:600; color:var(--soft); transition:color .25s, border-color .25s, background .25s} #pfk .pfk-themen button:hover{border:1px solid var(--acc); color:#fff} #pfk .pfk-themen button.on,#pfk .pfk-themen button.on:hover{background:var(--acc); border:1px solid var(--acc); color:#2a0e04} #pfk .pfk-gchat{height:440px; overflow-y:auto; padding:18px 18px 8px; display:flex; flex-direction:column; gap:14px; scrollbar-width:thin; scrollbar-color:rgba(130,190,255,.25) transparent} #pfk .pfk-gchat .pfk-msg{max-width:90%; flex:0 0 auto} #pfk .pfk-gchat .pfk-msg.user{background:color-mix(in srgb,var(--acc) 14%,transparent); border-color:color-mix(in srgb,var(--acc) 38%,transparent)} #pfk .pfk-msg > div > * + *{margin-top:8px} #pfk .pfk-msg ul{list-style:disc; padding-left:20px} #pfk .pfk-msg li{margin:3px 0 0; padding:0} #pfk .pfk-msg blockquote{padding:10px 12px; border-left:3px solid var(--acc); border-radius:0 10px 10px 0; background:rgba(255,255,255,.05); font-style:italic; color:var(--text)} #pfk .pfk-gein{display:flex; align-items:center; gap:10px; margin:6px 14px 14px; padding:8px 8px 8px 16px; border-radius:14px; border:1px solid var(--line2); background:rgba(3,10,28,.6); font-size:14px; color:#6f86a8} #pfk .pfk-gein span{flex:1} #pfk .pfk-gein i{width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb,var(--acc) 30%,transparent); color:#fff} #pfk .pfk-gein svg{width:16px; height:16px} #pfk .pfk-cwin{margin-top:72px} #pfk .pfk-frei{display:inline-flex; align-items:center; gap:6px; color:var(--acc); border-color:color-mix(in srgb,var(--acc) 45%,transparent)} #pfk .pfk-frei svg{width:12px; height:12px} #pfk .pfk-cw-grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); min-height:480px} #pfk .pfk-cw-links{display:flex; flex-direction:column; gap:16px; padding:20px; border-right:1px solid var(--line)} #pfk .pfk-cw-auftrag{align-self:stretch; max-width:none; min-height:82px; background:color-mix(in srgb,var(--acc) 12%,transparent); border-color:color-mix(in srgb,var(--acc) 35%,transparent)} #pfk .pfk-cw-auftrag small{color:var(--acc); opacity:1} #pfk .pfk-cw-plan{display:grid; gap:10px; font:400 13.5px/1.5 var(--mono); color:#b9c9e3} #pfk .pfk-cw-plan li{display:flex; gap:10px; animation:pfkPop .3s ease both} #pfk .pfk-cw-plan .st{width:16px; flex:0 0 16px; color:var(--amber)} #pfk .pfk-cw-plan li.done .st{color:var(--acc)} #pfk .pfk-cw-rechts{position:relative; padding:20px; min-width:0} #pfk .pfk-cw-pfad{display:flex; align-items:center; gap:8px; margin-bottom:12px; font:500 12px var(--mono); letter-spacing:.06em; color:var(--muted)} #pfk .pfk-cw-pfad svg{width:16px; height:16px; color:var(--acc)} #pfk .pfk-cw-files{display:grid; gap:4px} #pfk .pfk-cw-files li{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; border:1px solid transparent; background:rgba(255,255,255,.025); font:400 13px var(--mono); color:var(--soft); transition:background .3s, border-color .3s} #pfk .pfk-cw-files li i,#pfk .pfk-cw-tab-k i{flex:0 0 34px; height:22px; border-radius:5px; display:grid; place-items:center; font:700 9.5px var(--mono); font-style:normal; letter-spacing:.04em; color:#04122e} #pfk .t-pdf{background:#ff8a8a} #pfk .t-jpg{background:#ffc65c} #pfk .t-xlsx{background:#5ee6a0} #pfk .pfk-cw-files .n{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} #pfk .pfk-cw-files em{font-style:normal; font-size:11.5px; color:var(--acc); white-space:nowrap; opacity:0; transition:opacity .4s} #pfk .pfk-cw-files li.erkannt em{opacity:1} #pfk .pfk-cw-files li.lesen{background:color-mix(in srgb,var(--acc) 14%,transparent); border-color:color-mix(in srgb,var(--acc) 40%,transparent)} #pfk .pfk-cw-files li.neu .n{color:#fff} #pfk .pfk-cw-files li.erstellt{animation:pfkPop .5s ease both; background:color-mix(in srgb,var(--acc) 14%,transparent); border-color:var(--acc); box-shadow:0 0 22px -8px var(--acc)} #pfk .pfk-cw-tab{margin-top:14px; padding:14px; border-radius:14px; background:#f4fbf8; color:#0b2a24; font-size:13px; opacity:0; transform:translateY(10px); transition:opacity .5s, transform .5s} #pfk .pfk-cw-tab:empty{display:none} #pfk .pfk-cw-tab.on{opacity:1; transform:none} #pfk .pfk-cw-tab-k{display:flex; align-items:center; gap:8px; margin-bottom:8px; font-weight:700} #pfk .pfk-cw-tab table{width:100%; margin:0; border:0; border-collapse:collapse; font-variant-numeric:tabular-nums} #pfk .pfk-cw-tab th,#pfk .pfk-cw-tab td{padding:4px 8px; border:0; border-bottom:1px solid #d7ece4; background:none; color:inherit; text-align:left; font-size:12.5px} #pfk .pfk-cw-tab th{background:#e2f5ee; color:#3c6b5d; font-size:11px; letter-spacing:.06em; text-transform:uppercase} #pfk .pfk-cw-tab th:last-child,#pfk .pfk-cw-tab td:last-child{text-align:right} #pfk .pfk-cw-tab tfoot td{border-bottom:0; font-weight:700} #pfk .pfk-vier{grid-template-columns:repeat(4,minmax(0,1fr))} @media (min-width:900px) and (max-width:1240px){ #pfk .pfk-nav a{padding:8px 9px; font-size:10.5px; letter-spacing:.05em} #pfk .pfk-nav a i{display:none} #pfk .pfk-lang button{padding:7px 9px} } @media (max-width:1100px){ #pfk .pfk-dock{gap:2px} #pfk .pfk-dock a{padding:8px 7px} } @media (max-width:960px){ #pfk .pfk-cw-grid{grid-template-columns:1fr} #pfk .pfk-cw-links{border-right:0; border-bottom:1px solid var(--line)} #pfk .pfk-vier{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:700px){ #pfk .pfk-vier{grid-template-columns:1fr} #pfk .pfk-gchat{height:430px; padding:14px 12px 6px} #pfk .pfk-cw-files li{flex-wrap:wrap; row-gap:2px} #pfk .pfk-cw-files em{flex-basis:100%; padding-left:44px} } #pfk .pfk-ruhe,#pfk .pfk-ruhe::before,#pfk .pfk-ruhe::after, #pfk .pfk-ruhe *,#pfk .pfk-ruhe *::before,#pfk .pfk-ruhe *::after{animation-play-state:paused !important} @media (max-width:899px),(pointer:coarse){ #pfk .pfk-blob{animation:none} #pfk .pfk-win::before,#pfk .pfk-prompt::before{animation:none; --pfk-a:200deg} #pfk .pfk-nav,#pfk .pfk-dock,#pfk .pfk-prompt{-webkit-backdrop-filter:none; backdrop-filter:none} #pfk .pfk-nav,#pfk .pfk-dock{background:rgba(4,12,32,.95)} #pfk .pfk-prompt{background:rgba(7,19,46,.95)} #pfk.pfk-js [data-reveal],#pfk.pfk-js [data-words] .w{filter:none} #pfk.pfk-js [data-reveal]{transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s)} #pfk.pfk-js [data-words].is-in .w{animation-name:pfkWortSpar} #pfk .pfk-neu{animation-name:pfkNeuSpar} } @keyframes pfkWortSpar{to{opacity:1; transform:none}} @keyframes pfkNeuSpar{from{opacity:0}}