/* Proof table: the full-screen cover editor. Prefix pf-. */
.proof{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;background:#08080b;animation:fade .25s}
.pf-top{display:flex;align-items:center;gap:14px;height:64px;padding:0 18px;padding-top:env(safe-area-inset-top,0);box-shadow:0 1px 0 var(--hair);flex:none}
.pf-top .who{flex:1;min-width:0}
.pf-top .who b{display:block;font:700 19px/1.15 var(--display);font-stretch:86%;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-top .who small{display:block;color:var(--muted);font:400 11px/1.3 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 380px}
.pf-stage{position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;padding:26px 20px 70px;overflow:hidden;
  background:radial-gradient(70% 60% at 50% 40%,rgba(255,255,255,.045),transparent 70%),
    repeating-linear-gradient(0deg,transparent 0 39px,rgba(255,255,255,.028) 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,rgba(255,255,255,.028) 39px 40px)}
.pf-art{position:relative;height:100%;max-height:100%;aspect-ratio:9/16;max-width:100%;touch-action:none;user-select:none}
.pf-art canvas{width:100%;height:100%;display:block;border-radius:10px;background:#15151c;box-shadow:0 0 0 1px var(--hair3),0 50px 100px -40px #000}
.pf-art .crop{width:18px;height:18px;opacity:.8}
.pf-art .crop.tl{top:-22px;left:-22px}.pf-art .crop.tr{top:-22px;right:-22px}.pf-art .crop.bl{bottom:-22px;left:-22px}.pf-art .crop.br{bottom:-22px;right:-22px}
.pf-art .crop.tl::before,.pf-art .crop.bl::before{left:17px}.pf-art .crop.tr::before,.pf-art .crop.br::before{right:17px}
.pf-art .crop.tl::after,.pf-art .crop.tr::after{top:17px}.pf-art .crop.bl::after,.pf-art .crop.br::after{bottom:17px}
/* guides */
.pf-guides{position:absolute;inset:0;pointer-events:none;border-radius:10px;overflow:hidden}
.pf-g{position:absolute;display:none}
.pf-guides.safe .g-safe{display:block;border:1.500px dashed rgba(39,211,255,.8);border-radius:4px}
.pf-guides.safe .g-safe::after{content:"SAFE BOX";position:absolute;top:4px;left:6px;font:500 9px/1 var(--mono);letter-spacing:.14em;color:var(--c)}
.pf-guides.grid .g-top,.pf-guides.grid .g-bot{display:block;left:0;right:0;background:repeating-linear-gradient(135deg,rgba(255,63,142,.22) 0 8px,rgba(255,63,142,.08) 8px 16px)}
.pf-guides.grid .g-top::after{content:"CUT IN PROFILE GRID";position:absolute;bottom:5px;left:8px;font:500 9px/1 var(--mono);letter-spacing:.14em;color:#fff}
.g-cx,.g-cy{background:var(--y);box-shadow:0 0 12px var(--y)}
.g-cx{top:0;bottom:0;left:50%;width:1px}.g-cy{left:0;right:0;height:1px}
.pf-guides.snapx .g-cx,.pf-guides.snapy .g-cy{display:block}
/* the title box you drag */
.pf-box{position:absolute;border:1.500px solid var(--m);border-radius:6px;cursor:grab;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 26px -6px var(--m);touch-action:none}
.pf-box:active{cursor:grabbing}
.pf-box.idle{border-color:rgba(255,63,142,.55);box-shadow:none}
.pf-box::before{content:"DRAG TITLE";position:absolute;top:-22px;left:-1px;padding:3px 7px;border-radius:6px 6px 6px 0;background:var(--m);color:#17060d;font:500 9px/1.2 var(--mono);letter-spacing:.14em;white-space:nowrap}
.pf-h{position:absolute;width:16px;height:16px;margin:-8px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--m),0 4px 10px -2px #000;touch-action:none}
.pf-h.tl{top:0;left:0;cursor:nwse-resize}.pf-h.tr{top:0;left:100%;cursor:nesw-resize}.pf-h.bl{top:100%;left:0;cursor:nesw-resize}.pf-h.br{top:100%;left:100%;cursor:nwse-resize}
.pf-busy{position:absolute;inset:0;z-index:5;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-radius:10px;background:rgba(9,9,12,.72);overflow:hidden}
.pf-busy.on{display:flex}
.pf-busy p{font-weight:500;text-align:center;padding:0 20px}
.pf-tools{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:6px;padding:6px;border-radius:16px;background:rgba(20,20,27,.92);box-shadow:0 0 0 1px var(--hair2),0 20px 50px -18px #000}
.pf-tools .chip{height:34px}
/* inspector */
.pf-side{min-height:0;overflow:auto;padding:18px;box-shadow:-1px 0 0 var(--hair);display:flex;flex-direction:column;gap:14px;overscroll-behavior:contain}
.pf-sec{padding:14px;border-radius:15px;background:rgba(255,255,255,.03);box-shadow:0 0 0 1px var(--hair)}
.pf-sec>h4{display:flex;align-items:center;gap:8px;margin:0 0 11px;font:500 10.500px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pf-sec>h4 .ic{width:15px;height:15px}
.pf-row{display:flex;align-items:center;gap:10px}
.pf-row+.pf-row{margin-top:10px}
.pf-row label{flex:none;width:44px;color:var(--muted);font:500 10.500px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.pf-row output{flex:none;width:54px;text-align:right;font:500 12px/1 var(--mono);color:var(--soft)}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:22px;background:transparent;padding:0;box-shadow:none}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:999px;background:linear-gradient(90deg,var(--c),var(--m),var(--y))}
input[type=range]::-moz-range-track{height:5px;border-radius:999px;background:linear-gradient(90deg,var(--c),var(--m),var(--y))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7.500px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(9,9,12,.9),0 4px 12px -2px #000;cursor:grab}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(9,9,12,.9);cursor:grab}
.pf-pad{display:grid;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(3,34px);gap:4px}
.pf-pad button{border-radius:9px;background:rgba(255,255,255,.05);box-shadow:0 0 0 1px var(--hair);color:var(--soft);display:grid;place-items:center;transition:background .15s,transform .15s}
.pf-pad button:hover{background:rgba(255,255,255,.1);color:var(--text)}.pf-pad button:active{transform:scale(.92)}
.pf-pad .u{grid-area:1/2}.pf-pad .l{grid-area:2/1}.pf-pad .c{grid-area:2/2}.pf-pad .r{grid-area:2/3}.pf-pad .d{grid-area:3/2}
.pf-pad .u .ic{transform:rotate(-90deg)}.pf-pad .l .ic{transform:rotate(180deg)}.pf-pad .d .ic{transform:rotate(90deg)}
.pf-style{display:flex;align-items:center;gap:12px}
.pf-style img{width:44px;height:78px;border-radius:7px;object-fit:cover;background:#1c1c26;box-shadow:0 0 0 1px var(--hair2)}
.pf-style b{display:block;font-weight:600}.pf-style small{color:var(--muted);font-size:12px}
.pf-vers{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.pf-ver{flex:none;width:62px;text-align:center}
.pf-ver img{width:62px;height:110px;object-fit:cover;border-radius:8px;box-shadow:0 0 0 1px var(--hair2);transition:transform .2s var(--ease),box-shadow .2s}
.pf-ver:hover img{transform:translateY(-3px)}
.pf-ver.on img{box-shadow:0 0 0 2px var(--good)}
.pf-ver small{display:block;margin-top:4px;font:400 9.500px/1.2 var(--mono);color:var(--muted)}
.pf-note{color:var(--muted);font-size:12.500px;line-height:1.45}
.pf-note.y{color:var(--y)}
.pf-check{display:flex;align-items:center;gap:9px;margin-top:11px;color:var(--soft);font-size:13px;cursor:pointer}
.pf-check input{width:17px;height:17px;accent-color:var(--m)}
.pf-foot{position:sticky;bottom:-18px;margin:auto -18px -18px;padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));display:flex;gap:10px;background:linear-gradient(180deg,transparent,#0b0b0f 30%)}
.pf-foot .btn{flex:1}
@media (max-width:980px){
  .pf-body{grid-template-columns:1fr;grid-template-rows:minmax(300px,54dvh) minmax(0,1fr)}
  .pf-stage{padding:26px 14px 62px}
  .pf-side{box-shadow:0 -1px 0 var(--hair)}
}

/* v2: one accent, and the phone that shows the cover as Instagram will */
.proof{background:radial-gradient(70% 60% at 34% 45%,#0c1310,#060908 70%)}
.pf-top .who b{font:500 italic 24px/1.15 var(--display);letter-spacing:-.01em}
.pf-top .who small{font:400 9px/1.5 var(--mono);letter-spacing:.08em}
.pf-stage{background:radial-gradient(60% 50% at 50% 45%,rgba(95,230,179,.05),transparent 70%)}
.pf-art canvas{border-radius:18px;box-shadow:0 0 0 1px var(--hair3),0 60px 120px -50px #000,0 0 120px -60px var(--acc)}
.pf-art .crop{display:none}
.pf-guides,.pf-busy{border-radius:18px}
.pf-guides.safe .g-safe{border-color:rgba(240,243,237,.75)}
.pf-guides.safe .g-safe::after{color:var(--text);font:400 8px/1 var(--mono)}
.pf-guides.grid .g-top,.pf-guides.grid .g-bot{background:repeating-linear-gradient(135deg,rgba(6,9,8,.72) 0 8px,rgba(6,9,8,.5) 8px 16px)}
.pf-guides.grid .g-top::after{font:400 8px/1 var(--mono);color:var(--soft)}
.g-cx,.g-cy{background:var(--acc);box-shadow:0 0 14px var(--acc)}
.pf-box{border:1px solid var(--acc);border-radius:10px;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 30px -6px var(--acc)}
.pf-box.idle{border-color:rgba(95,230,179,.6)}
.pf-box::before{content:"DRAG";background:var(--acc);color:#04201a;font:500 8px/1.3 var(--mono);border-radius:999px;top:-24px;left:0;padding:4px 9px}
.pf-h{width:14px;height:14px;margin:-7px;box-shadow:0 0 0 2px var(--acc),0 4px 10px -2px #000}
.pf-tools{border-radius:999px;background:rgba(12,17,15,.92)}
.pf-sec{border-radius:20px;background:rgba(255,255,255,.025)}
.pf-sec>h4{font:400 8.500px/1 var(--mono);letter-spacing:.2em}
.pf-row label{font:400 8.500px/1 var(--mono)}.pf-row output{font:400 11px/1 var(--mono)}
input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,rgba(255,255,255,.14),var(--acc))}
input[type=range]::-moz-range-track{background:linear-gradient(90deg,rgba(255,255,255,.14),var(--acc))}
input[type=range]::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(6,9,8,.9),0 0 18px -2px var(--acc)}
.pf-pad button{border-radius:50%}
.pf-ver img{border-radius:10px}
.pf-ver.on img{box-shadow:0 0 0 2px var(--acc)}
.pf-foot{background:linear-gradient(180deg,transparent,#080b0a 30%)}
/* 3D phone */
.pf-insta{display:flex;align-items:center;gap:18px}
.pf-phone-wrap{flex:none;perspective:900px;padding:6px 4px 10px}
.pf-phone{position:relative;width:132px;aspect-ratio:9/19.3;border-radius:26px;padding:5px;background:linear-gradient(145deg,#39433e,#0c100e 40%,#1c2320);
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 60px -30px #000,0 0 70px -30px var(--acc),inset 0 0 0 1px rgba(0,0,0,.6);
  transform:rotateY(calc(-18deg + var(--ry,0deg) * 2.4)) rotateX(calc(7deg + var(--rx,0deg) * 2.4));transform-style:preserve-3d;transition:transform .5s var(--ease);animation:phonefloat 6s ease-in-out infinite}
@keyframes phonefloat{50%{translate:0 -5px}}
.pf-phone canvas{display:block;width:100%;height:100%;border-radius:21px;background:#000}
.pf-phone::before{content:"";position:absolute;z-index:2;top:10px;left:50%;width:34px;height:9px;margin-left:-17px;border-radius:999px;background:#000}
.pf-phone::after{content:"";position:absolute;inset:5px;border-radius:21px;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.2),transparent 32%,transparent 70%,rgba(255,255,255,.06));transform:translateZ(2px)}
.pf-insta .seg{margin-bottom:10px}
@media (max-width:980px){.pf-phone{width:104px}}