/* Google Fonts (Playfair Display, Caveat) are loaded via a
in each page's instead of @import here — @import inside a CSS file is
render-blocking (browser must fetch+parse it before treating this stylesheet
as ready), while a in lets it load in parallel with everything else. */
:root{
--bg:#1c1712; --bg-2:#211b15; --surface:#241e17; --surface-2:#2a231a; --surface-3:#31281d;
--ink:#f4ecd8; --ink-soft:rgba(244,236,216,.68); --ink-faint:rgba(244,236,216,.45);
--line:rgba(244,236,216,.14); --line-strong:rgba(244,236,216,.3);
--violet:#c98a2b; --violet-2:#d99a3c; --violet-deep:#7a2222;
--green:#34d399; --amber:#fbbf24; --red:#fb7185;
--white:#fff;
--font-body:Georgia,'Times New Roman',serif; --font-display:'Playfair Display',Georgia,serif; --font-mono:Georgia,'Times New Roman',serif;
--radius-sm:8px; --radius-md:10px; --radius-lg:14px; --radius-xl:16px;
--shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 16px 40px rgba(0,0,0,.28); --shadow-lg:0 28px 80px rgba(0,0,0,.42);
--container:1180px; --tap-min:44px;
}
/* Used for the native picker instead of the `hidden`
attribute (display:none). Safari/WebKit can silently refuse to open a
color picker that's triggered via .click() in the same synchronous tick
as toggling it from display:none to visible — keeping it always present
in the render tree (just visually and interactively invisible) avoids
that race entirely, on every browser. */
.visually-hidden-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;opacity:0;pointer-events:none}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:radial-gradient(circle at 75% -10%,rgba(201,138,43,.10),transparent 32%),var(--bg);color:var(--ink);font:16px/1.55 var(--font-body);-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit} button,input,select{font:inherit} h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;letter-spacing:-.01em;color:var(--ink);margin:0 0 .55em} h1{font-size:clamp(2.5rem,5vw,4.6rem)} h2{font-size:clamp(1.7rem,3vw,2.5rem)} h3{font-size:1.15rem} p{margin:0 0 1em}.wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--violet);color:#1c1712;padding:10px 16px;z-index:1000;border-radius:0 0 10px 0}.skip-link:focus{left:0}:focus-visible{outline:3px solid var(--violet-2);outline-offset:3px;border-radius:6px}
/* shared navigation */
.site-nav{position:sticky;top:0;z-index:50;background:rgba(10,11,16,.78);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.07)}
.site-nav__inner{max-width:var(--container);height:72px;margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}.site-nav__brand{display:flex;align-items:center;gap:10px;text-decoration:none}.site-nav__brand img{width:30px;height:30px}.site-nav__brand-text{font:800 1.08rem var(--font-display);letter-spacing:-.02em}.site-nav__links{display:flex;align-items:center;gap:6px}.site-nav__links a{color:var(--ink-soft);text-decoration:none;padding:9px 12px;border-radius:10px;font-size:.9rem;transition:.15s;display:flex;align-items:center;min-height:var(--tap-min)}.site-nav__links a:hover,.site-nav__links a[aria-current=page]{color:#fff;background:rgba(255,255,255,.06)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:var(--tap-min);padding:0 18px;border:1px solid transparent;border-radius:12px;cursor:pointer;text-decoration:none;font-weight:700;font-size:.92rem;white-space:nowrap;transition:.16s ease}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.42;cursor:not-allowed}.btn--primary{background:linear-gradient(135deg,var(--violet-2),var(--violet-deep));color:#fff;box-shadow:0 12px 28px rgba(124,58,237,.25)}.btn--primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 16px 34px rgba(124,58,237,.35)}.btn--secondary{background:#fff;color:#1a1611}.btn--secondary:hover:not(:disabled){background:#f5f3f0}.btn--ghost{background:rgba(255,255,255,.03);color:var(--ink);border-color:var(--line-strong)}.btn--ghost:hover:not(:disabled){background:rgba(255,255,255,.07)}.btn--lg{min-height:54px;padding:0 24px;font-size:1rem}.btn--sm{min-height:38px;padding:0 13px;font-size:.82rem}
/* landing */
.hero{padding:88px 0 72px;overflow:hidden}.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center}.hero__copy{max-width:650px}.eyebrow,.tool-intro__eyebrow{display:inline-flex;align-items:center;gap:9px;color:#ffd6a5;font:700 .72rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:20px}.eyebrow__tick{width:9px;height:9px;border-left:2px solid var(--violet-2);border-top:2px solid var(--violet-2)}.hero__sub{font-size:1.13rem;color:var(--ink-soft);max-width:60ch}.hero__actions{display:flex;gap:10px;margin:26px 0}.hero__flow{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}.hero__flow li{display:inline-flex;align-items:center;gap:6px;color:#b4aa9d;background:rgba(255,255,255,.035);border:1px solid var(--line);padding:7px 10px;border-radius:999px;font-size:.78rem}.hero__flow svg{color:var(--green)}.hero__art{display:flex;justify-content:center}.hero-tool-preview{width:min(100%,470px);aspect-ratio:1.05/1;position:relative;border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,#241e17,#15110d);box-shadow:var(--shadow-lg);padding:22px;display:grid;grid-template-columns:1.1fr .8fr;gap:16px;transform:rotate(1deg)}.hero-tool-preview:before{content:'PHOTO STUDIO';position:absolute;top:15px;left:18px;font:700 .62rem var(--font-mono);letter-spacing:.12em;color:#918577}.hero-tool-preview:after{content:'';position:absolute;inset:12px;border:1px solid rgba(255,255,255,.04);border-radius:22px;pointer-events:none}.hero-tool-preview__icon{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#302920,#211c15);font-size:4rem;filter:saturate(.7)}.hero-tool-preview__icon:first-child{grid-row:1/3;font-size:7rem}.hero-flow-cards{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}.hero-flow-card{width:110px}.hero-flow-card__frame{aspect-ratio:3.5/4.5;border:1px solid var(--line-strong);border-radius:12px;background:#f8f7f6;color:#c6bfb6;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(0,0,0,.25)}.hero-flow-card__frame.is-sheet{background:#fff;position:relative;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);align-items:stretch;justify-items:stretch;gap:3px;padding:5px}.hero-flow-card__frame.is-sheet .cell{background-image:url('/assets/demo/avatar-passport.jpg');background-size:cover;background-position:center top;border-radius:2px;border:1px solid rgba(0,0,0,.06)}.hero-flow-card__label{display:block;margin-top:8px;text-align:center;font-size:.72rem;color:var(--ink-soft)}.hero-flow-arrow{color:#8e8273}
.tool{padding:20px 0 90px}.stepper{position:sticky;top:72px;z-index:25;margin-bottom:22px;padding:8px 0;background:rgba(10,11,16,.9);-webkit-backdrop-filter:blur(14px)}backdrop-filter:blur(14px)}.stepper__row{display:flex;align-items:center;gap:8px}.stepper ol{list-style:none;display:flex;gap:6px;overflow:auto;padding:0;margin:0;flex:1;scrollbar-width:none}.stepper ol::-webkit-scrollbar{display:none}.stepper li{flex:0 0 auto}.stepper button{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);border-radius:999px;padding:7px 13px 7px 7px;min-height:40px;cursor:pointer}.stepper__num{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#2d2720;color:#ada396;font:700 .72rem var(--font-mono)}.stepper li[data-state=active] button{border-color:rgba(201,138,43,.7);color:#fff;background:rgba(201,138,43,.09)}.stepper li[data-state=active] .stepper__num{background:var(--violet);color:#fff}.stepper li[data-state=done] .stepper__num{background:var(--green);color:#07120e}.stepper li[data-state=locked] button{opacity:.45}.stepper__reset{min-height:40px;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);border-radius:999px;padding:0 12px;display:flex;gap:7px;align-items:center;cursor:pointer}.toast{background:#27151b;border:1px solid #5b2632;color:#fecdd3;padding:12px 15px;border-radius:12px;margin-bottom:16px}
.panel{background:linear-gradient(180deg,rgba(24,27,36,.96),rgba(17,19,26,.96));border:1px solid var(--line);border-radius:var(--radius-xl);padding:28px;box-shadow:var(--shadow-md);display:flex;flex-direction:column}.panel__title{font-size:1.6rem}.panel__hint{color:var(--ink-soft);max-width:70ch}.panel__note,.drag-hint{color:var(--ink-faint);font-size:.84rem}.panel__actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}.panel__error{background:#29151b;border:1px solid #5d2733;color:#fecdd3;padding:10px 13px;border-radius:10px;font-size:.86rem}
.dropzone{border:1.5px dashed #60564a;border-radius:20px;padding:56px 24px;text-align:center;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.015));color:var(--ink-soft);transition:.16s}.dropzone:hover,.dropzone.is-dragover{border-color:var(--violet);background:rgba(201,138,43,.07)}.dropzone svg{margin:0 auto 12px;color:#edbd83}.dropzone__title{font-weight:700;color:#fff;margin-bottom:3px}.dropzone__sub{font-size:.85rem;color:var(--ink-faint);margin-bottom:16px}.upload-preview{display:flex;align-items:center;gap:14px;margin-top:16px;padding:12px;border:1px solid var(--line);border-radius:14px;background:#11141b}.upload-preview img{width:88px;height:88px;object-fit:cover;border-radius:10px}.upload-preview__meta{flex:1}.upload-preview__meta p{font:500 .75rem var(--font-mono);color:var(--ink-soft)}.privacy-note{display:flex;align-items:flex-start;gap:8px;color:var(--ink-faint);font-size:.8rem;margin-top:16px}.privacy-note svg{color:var(--green);flex:none}
.size-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin:22px 0}.size-card{border:1px solid var(--line);border-radius:16px;padding:18px;background:#11141b;color:var(--ink);cursor:pointer;min-height:100px;text-align:left;transition:.16s}.size-card:hover{border-color:#706455;transform:translateY(-1px)}.size-card[aria-checked=true]{border-color:var(--violet);background:rgba(201,138,43,.1);box-shadow:0 0 0 1px rgba(201,138,43,.18)}.size-card__ratio{border-color:#b2a79a}.size-card__label{font:700 .9rem var(--font-mono);color:#fff;display:block}.size-card__sub{font-size:.78rem;color:var(--ink-soft)}.custom-size{margin-top:6px;padding:16px;background:#17130e;border:1px solid var(--line);border-radius:16px}.field-row{display:grid;grid-template-columns:1fr 1fr 100px;gap:12px}.field{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:600;color:var(--ink-soft)}.field input,.field select{min-height:44px;border-radius:10px;border:1px solid var(--line-strong);padding:0 12px;background:#16120d;color:#fff}.field-hint{font-size:.78rem;color:var(--ink-faint)}
/* passport studio */
.editor-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(270px,.75fr);gap:22px;align-items:start}.crop-stage{display:flex;flex-direction:column;align-items:center;gap:10px;background:#110e0a;border:1px solid #352d24;border-radius:20px;padding:20px}.crop-frame-wrap{width:min(100%,380px);border-radius:14px;overflow:hidden;background:#080705;box-shadow:0 20px 50px rgba(0,0,0,.45);position:relative}.crop-canvas{width:100%;height:auto;display:block;cursor:grab;touch-action:none}.crop-canvas:active{cursor:grabbing}.crop-hint{text-align:center;color:var(--ink-faint);font-size:.8rem}.editor-controls{display:flex;flex-direction:column;gap:12px;background:#11141b;border:1px solid var(--line);border-radius:18px;padding:18px}.control{display:flex;flex-direction:column;gap:7px}.control label{font-size:.8rem;color:var(--ink-soft);font-weight:700}.control input[type=range]{width:100%;accent-color:var(--violet);min-height:38px}.control output{font:700 .72rem var(--font-mono);color:var(--ink-faint)}
.bg-options{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0}.bg-option{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:12px;padding:8px 13px;background:#11141b;color:var(--ink-soft);cursor:pointer;min-height:44px}.bg-option[aria-pressed=true]{border-color:var(--violet);color:#fff;background:rgba(201,138,43,.09)}.bg-swatch{width:25px;height:25px;border-radius:7px;border:1px solid #60564a}.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}.compare__label{font:700 .67rem var(--font-mono);letter-spacing:.08em;color:#918577;text-transform:uppercase;margin-bottom:7px}.compare__canvas{width:100%;height:clamp(230px,34vh,340px);aspect-ratio:auto;background:#120f0b;border-radius:12px;border:1px solid var(--line);object-fit:contain;display:block}.quality-panel{margin-top:20px;padding:17px;border-radius:16px;background:rgba(52,211,153,.055);border:1px solid rgba(52,211,153,.2)}.quality-panel__head{display:flex;align-items:center;justify-content:space-between}.quality-panel h3{font-size:1rem}.quality-badge{font:700 .68rem var(--font-mono);padding:6px 9px;border-radius:999px;background:var(--green);color:#04130d}.quality-badge[data-status="PLEASE ADJUST"]{background:var(--red);color:#fff}.quality-list{list-style:none;padding:0;margin:10px 0;display:flex;flex-direction:column;gap:7px}.quality-list li{display:flex;gap:9px;font-size:.82rem}.q-dot{width:8px;height:8px;border-radius:50%;margin-top:6px}.q-dot[data-s=ok]{background:var(--green)}.q-dot[data-s=warn]{background:var(--amber)}.q-dot[data-s=fail]{background:var(--red)}.q-dot[data-s=info]{background:#8a7f71}.quality-panel__note{font-size:.72rem;color:var(--ink-faint)}
.paper-size-toggle{display:flex;gap:8px}.paper-size-btn{flex:1;text-align:left;border:1px solid var(--line);background:#11141b;color:var(--ink-soft);padding:11px 13px;border-radius:12px;cursor:pointer;font-weight:700}.paper-size-btn span{display:block;font:500 .68rem var(--font-mono);color:var(--ink-faint);margin-top:2px}.paper-size-btn[aria-checked=true]{border-color:var(--violet);background:rgba(201,138,43,.1);color:#fff}.printer-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.printer-card{border:1px solid var(--line);border-radius:14px;padding:15px;background:#11141b;color:var(--ink-soft);cursor:pointer}.printer-card[aria-checked=true]{border-color:var(--violet);background:rgba(201,138,43,.09);color:#fff}.printer-card__name{font-weight:700;color:inherit}.printer-card__badge{background:#302920;color:#c0b6aa;padding:3px 7px;border-radius:999px;font:700 .62rem var(--font-mono)}.printer-card__desc{font-size:.78rem;margin-top:6px}.layout-summary{margin-top:8px;padding:16px;border-radius:14px;background:linear-gradient(135deg,#302314,#1d1812);border:1px solid rgba(201,138,43,.25);color:#fff;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}.layout-summary .stat span{color:#baa891}.layout-summary.is-error{background:#29151b;color:#fecdd3}
.preview-layout{display:grid;grid-template-columns:.65fr 1.35fr;gap:26px}.preview-photo{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.preview-photo__canvas{width:190px;background:#fff;border-radius:10px;box-shadow:0 20px 40px rgba(0,0,0,.35)}.preview-sheet__head{display:flex;align-items:center;justify-content:space-between}.sheet-nav{display:flex;gap:8px;align-items:center;font:700 .75rem var(--font-mono);color:var(--ink-soft)}.sheet-nav button{min-width:36px;min-height:36px;border-radius:9px;border:1px solid var(--line);background:#11141b;color:#fff}.preview-sheet__canvas{width:100%;max-width:440px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:var(--shadow-md)}.sheet-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:12px 0}.sheet-facts div{background:#11141b;border:1px solid var(--line);border-radius:10px;padding:8px 10px}.sheet-facts dt{font-size:.64rem;text-transform:uppercase;color:var(--ink-faint)}.sheet-facts dd{margin:2px 0 0;font:700 .78rem var(--font-mono)}.preview-sheet__downloads{display:flex;gap:8px;flex-wrap:wrap}.print-instructions,.studio-note{margin-top:24px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:#11141b}.print-instructions h3,.studio-note h3{font-size:1rem}.print-instructions ol{padding-left:20px;color:var(--ink-soft)}.studio-note{background:rgba(201,138,43,.06);border-color:rgba(201,138,43,.2)}
/* general product pages */
.tool-intro{padding:72px 0 30px}.tool-intro__sub{color:var(--ink-soft);max-width:65ch;font-size:1.05rem}.resultArea .panel{margin-top:10px}.vp-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px}.compare-wrap{position:relative;width:100%;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-md);background:#120f0b;cursor:ew-resize;touch-action:none;user-select:none;line-height:0}.compare-wrap canvas{display:block;width:100%;height:auto}.compare-layer{position:absolute;top:0;left:0;height:100%;overflow:hidden}.compare-layer canvas{height:100%;width:auto;max-width:none}#originalLayer{position:relative;z-index:1}#editedClip{z-index:2;width:50%}.compare-label{position:absolute;top:12px;z-index:3;font:700 .62rem var(--font-mono);letter-spacing:.06em;color:#fff;background:rgba(8,10,14,.72);padding:5px 9px;border-radius:999px}.compare-label--before{left:12px}.compare-label--after{right:12px}.compare-handle{position:absolute;top:0;bottom:0;left:50%;z-index:4;width:2px;background:#fff;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.2)}.compare-handle:after{content:'↔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;box-shadow:var(--shadow-md)}.preset-gallery{display:grid;grid-template-columns:1fr 1fr;gap:9px}.preset-card{text-align:left;border:1px solid var(--line);border-radius:12px;padding:11px;background:#11141b;color:var(--ink);cursor:pointer}.preset-card[aria-checked=true]{border-color:var(--violet);background:rgba(201,138,43,.09)}.preset-card__swatch{height:24px;border-radius:6px}.preset-card__name{display:block;font-weight:700;font-size:.82rem;margin-top:6px}.preset-card__desc{font-size:.7rem;color:var(--ink-faint);line-height:1.35;margin-top:3px}
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}.tool-card{display:flex;flex-direction:column;min-height:240px;padding:22px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(150deg,#211c15,#191510);text-decoration:none;transition:.18s;position:relative;overflow:hidden}.tool-card:hover{transform:translateY(-3px);border-color:#62574a;box-shadow:var(--shadow-md)}.tool-card:after{content:'';position:absolute;width:130px;height:130px;border-radius:50%;background:rgba(201,138,43,.1);filter:blur(25px);right:-60px;top:-60px}.tool-card__icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:rgba(201,138,43,.12);border:1px solid rgba(201,138,43,.22);font-size:1.4rem;margin-bottom:18px}.tool-card h3{font-size:1.05rem}.tool-card p{color:var(--ink-soft);font-size:.86rem}.tool-card__cta{margin-top:auto;color:#fdddb5;font-weight:700;font-size:.82rem}.tool-card--soon{opacity:.78}.tool-card__soon-tag{font:700 .62rem var(--font-mono);color:#fbbf24;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.18);padding:4px 7px;border-radius:999px;margin-left:5px}.content-section{padding:76px 0;border-top:1px solid rgba(255,255,255,.05)}.content-section__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.content-step{background:#11141b;border:1px solid var(--line);border-radius:16px;padding:18px}.content-step__num{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(201,138,43,.12);color:#fdddb5;font:700 .72rem var(--font-mono);margin-bottom:13px}.content-step strong{display:block;margin-bottom:5px}.content-step p{color:var(--ink-soft);font-size:.84rem;margin:0}.faq-item{border-top:1px solid var(--line);padding:18px 0}.faq-item:last-child{border-bottom:1px solid var(--line)}.faq-item summary{cursor:pointer;font-weight:700}.faq-item p{color:var(--ink-soft);max-width:75ch;margin:12px 0 0}.ad-slot{margin-top:26px;min-height:90px;border:1px dashed #3d352c;border-radius:14px;display:grid;place-items:center;color:#6d6255;font:600 .68rem var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.site-footer2{border-top:1px solid rgba(255,255,255,.07);padding:50px 0 30px;background:#0d0b08}.site-footer2__inner{max-width:var(--container);margin:auto;padding:0 24px;display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:40px}.site-footer2__brand{display:flex;align-items:center;gap:9px;font:800 1rem var(--font-display);margin-bottom:10px}.site-footer2__brand img{width:28px}.site-footer2__inner h4{font-size:.8rem;color:#fff;margin-bottom:12px}.site-footer2__inner a{display:block;text-decoration:none;color:var(--ink-faint);font-size:.82rem;margin:7px 0}.site-footer2__inner a:hover{color:#fff}.site-footer2__legal{max-width:var(--container);margin:36px auto 0;padding:20px 24px 0;border-top:1px solid rgba(255,255,255,.06);color:#6d6255;font-size:.72rem}.site-footer{padding:40px 0 60px;color:var(--ink-faint);text-align:center}
/* legal / simple pages */
main.wrap h2{margin-top:40px}main.wrap ul{color:var(--ink-soft)}main.wrap li{margin:7px 0}main.wrap[style]{background:#1a1610!important;border:1px solid var(--line);border-radius:24px;margin-top:50px;margin-bottom:60px;padding:40px 42px!important;box-shadow:var(--shadow-md)}
[hidden]{display:none!important}
@media(max-width:900px){.hero__grid,.editor-layout,.preview-layout,.vp-layout{grid-template-columns:1fr}.hero{padding:62px 0 50px}.hero__art{order:-1}.hero-tool-preview{max-width:520px}.tool-grid,.content-section__grid{grid-template-columns:1fr 1fr}.preview-photo__canvas{width:160px}}
@media(max-width:640px){.wrap{padding:0 16px}.site-nav__inner{height:64px;padding:0 16px}.site-nav__links{gap:2px}.site-nav__links a{font-size:.7rem;padding:7px 9px}.hero{padding:48px 0 38px}.hero h1{font-size:2.45rem}.hero__sub{font-size:1rem}.hero__flow li{font-size:.72rem}.hero-tool-preview{padding:14px;border-radius:20px}.hero-tool-preview__icon{font-size:2.8rem}.hero-tool-preview__icon:first-child{font-size:5rem}.stepper{top:64px}.stepper__reset .stepper__label{display:none}.panel{padding:20px;border-radius:20px;min-height:0}.field-row,.printer-grid,.compare,.tool-grid,.content-section__grid{grid-template-columns:1fr}.paper-size-toggle{flex-direction:column}.size-grid{grid-template-columns:1fr 1fr}.preview-sheet__downloads{flex-direction:column}.preview-sheet__downloads .btn{width:100%}.site-footer2__inner{grid-template-columns:1fr 1fr;gap:24px}.site-footer2__inner>div:first-child{grid-column:1/-1}.tool-intro{padding:48px 0 24px}main.wrap[style]{margin:24px 16px 40px;padding:26px 22px!important}}
@media(max-width:360px){.site-nav__inner{padding:0 10px}.site-nav__brand-text{display:none}.site-nav__links{gap:0}.site-nav__links a{font-size:.62rem;padding:7px 6px}}
.panel-kicker{font:700 .67rem var(--font-mono);letter-spacing:.1em;color:#f3c58c;margin:0 0 7px;text-transform:uppercase}
.hero-studio-canvas{position:relative;border:1px solid #483f34;border-radius:18px;background:linear-gradient(145deg,#2f2820,#1a1611);min-height:390px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.hero-studio-badge{position:absolute;top:14px;left:14px;z-index:2;font:700 .58rem var(--font-mono);letter-spacing:.08em;color:#d6c7b4;background:rgba(10,11,16,.65);border:1px solid #4a4238;border-radius:999px;padding:6px 8px}
.hero-studio-photo{position:absolute;left:12%;right:12%;top:17%;bottom:10%;border-radius:18px;background:linear-gradient(#f9f8f7 0 70%,#f0ede9 70%);display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-studio-head{width:92px;height:118px;background:linear-gradient(145deg,#a3988b,#645a4d);border-radius:48% 48% 44% 44%;position:absolute;top:23%;box-shadow:inset 8px -10px 18px rgba(0,0,0,.12)}
.hero-studio-shoulders{width:230px;height:155px;background:#75695b;border-radius:120px 120px 0 0;position:absolute;bottom:-20px}
.hero-studio-frame{position:absolute;left:calc(50% - 78px);top:20%;width:156px;height:57%;border:2px solid rgba(201,138,43,.85);border-radius:10px;box-shadow:0 0 0 999px rgba(5,6,9,.08)}
.hero-studio-side{display:flex;flex-direction:column;gap:10px;position:absolute;right:14px;top:64px;width:145px}.hero-studio-side>div{background:rgba(10,11,16,.88);border:1px solid #483f34;border-radius:12px;padding:11px}.hero-studio-side small{display:block;color:#918577;font:700 .55rem var(--font-mono);letter-spacing:.06em}.hero-studio-side strong{display:block;font-size:.78rem;margin-top:3px}.hero-check{display:flex;gap:8px;align-items:center}.hero-check>span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(52,211,153,.15);color:#34d399;font-weight:800}.hero-check b{display:block;font-size:.72rem}.hero-check small{margin-top:2px!important;font-size:.58rem!important;color:#a89d8f!important}.hero-export{display:flex;align-items:center;justify-content:space-between!important}.hero-export span{background:#c98a2b;color:#fff;border-radius:6px;padding:4px 6px;font:700 .58rem var(--font-mono)}.hero-export b{font-size:.65rem}
@media(max-width:640px){.hero-studio-canvas{min-height:300px}.hero-studio-side{right:9px;width:120px;top:48px}.hero-studio-photo{left:7%;right:30%}.hero-studio-frame{left:calc(50% - 70px);width:140px}}
/* Document-first passport flow */
.document-grid {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin:22px 0 14px;
}
.document-card {
display:flex;
align-items:center;
gap:14px;
width:100%;
min-height:88px;
padding:16px;
border:1px solid var(--line, #4a3a27);
border-radius:16px;
background:rgba(255,255,255,.025);
color:inherit;
text-align:left;
cursor:pointer;
transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.document-card:hover { transform:translateY(-1px); }
.document-card.is-selected,
.document-card[aria-checked="true"] {
border-color:#c98a2b;
background:rgba(201,138,43,.10);
box-shadow:0 0 0 1px rgba(201,138,43,.16);
}
.document-card__icon { font-size:26px; flex:0 0 auto; }
.document-card strong { display:block; font-size:15px; margin-bottom:4px; }
.document-card small { display:block; color:var(--ink-soft); line-height:1.35; }
.document-note {
min-height:24px;
margin:10px 2px 0;
color:var(--ink-soft);
font-size:.88rem;
}
.copy-suggestions {
display:flex;
flex-wrap:wrap;
gap:8px;
margin:10px 0 4px;
}
.copy-suggestion {
border:1px solid var(--line, #4a3a27);
background:transparent;
color:inherit;
border-radius:999px;
padding:8px 13px;
font:inherit;
font-weight:600;
cursor:pointer;
}
.copy-suggestion:hover { border-color:#c98a2b; }
@media (max-width:700px) {
.document-grid { grid-template-columns:1fr; }
.document-card { min-height:74px; }
}
.upload-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.layout-summary__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.layout-summary__grid>div{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025)}
.layout-summary__grid span{display:block;color:var(--ink-faint);font-size:.72rem;margin-bottom:4px}
.layout-summary__grid strong{font-size:1rem;color:#fff}
.layout-summary__note{margin:10px 0 0;color:var(--ink-soft);font-size:.82rem}
@media(max-width:640px){.compare__canvas{height:240px}.layout-summary__grid{grid-template-columns:1fr 1fr}.layout-summary__grid>div:last-child{grid-column:1/-1}}
/* Passport: one stable workspace. The six steps change inside the same frame;
the navigation never moves with the content. */
.passport-workspace{
display:grid;
grid-template-columns:220px minmax(0,1fr);
gap:22px;
align-items:start;
}
.passport-workspace .stepper{
grid-column:1;
grid-row:1;
position:sticky;
top:82px;
margin:0;
padding:10px 0;
background:transparent;
-webkit-backdrop-filter:none;backdrop-filter:none;
}
.passport-workspace .stepper__row{
display:flex;
flex-direction:column;
align-items:stretch;
gap:10px;
}
.passport-workspace .stepper ol{
display:flex;
flex-direction:column;
gap:6px;
}
.passport-workspace .stepper ol li button{
width:100%;
justify-content:flex-start;
text-align:left;
}
.passport-workspace .stepper__reset{
width:100%;
justify-content:flex-start;
}
.passport-workspace > .panel{
grid-column:2;
grid-row:1;
width:100%;
min-width:0;
}
.passport-workspace > .panel[hidden]{display:none}
.passport-workspace .panel__actions{
margin-top:26px;
}
.passport-workspace .editor-layout{
max-height:none;
}
.passport-workspace .compare{
max-width:760px;
margin-inline:auto;
}
.passport-workspace .compare__canvas{
max-height:330px;
width:auto;
max-width:100%;
margin-inline:auto;
object-fit:contain;
}
.passport-workspace .preview-layout{
align-items:start;
}
.passport-workspace .preview-photo__canvas{
max-height:300px;
width:auto;
max-width:100%;
}
.passport-workspace .preview-sheet__canvas{
max-height:340px;
width:auto;
max-width:100%;
}
@media(max-width:900px){
.passport-workspace{
grid-template-columns:1fr;
gap:12px;
}
.passport-workspace .stepper{
grid-column:1;
grid-row:auto;
position:sticky;
top:64px;
z-index:25;
overflow:hidden;
padding:7px 0;
background:rgba(10,11,16,.94);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.passport-workspace .stepper__row{
display:flex;
flex-direction:row;
align-items:center;
gap:8px;
}
.passport-workspace .stepper ol{
flex-direction:row;
overflow-x:auto;
flex:1;
scrollbar-width:none;
min-width:0;
}
.passport-workspace .stepper ol::-webkit-scrollbar{display:none}
.passport-workspace .stepper ol li{flex:0 0 auto}
.passport-workspace .stepper ol li button{
width:auto;
white-space:nowrap;
}
.passport-workspace .stepper__reset{
width:auto;
flex:0 0 auto;
}
.passport-workspace > .panel{
grid-column:1;
grid-row:auto;
}
.passport-workspace .compare__canvas{
max-height:250px;
}
.passport-workspace .preview-photo__canvas{
max-height:240px;
}
.passport-workspace .preview-sheet__canvas{
max-height:260px;
}
}
/* Passport UI stability: one predictable workspace frame.
This is layout-only. No step, processing, crop, print or export code changes. */
.passport-workspace {
overflow-anchor: none;
}
@media (min-width: 901px) {
.passport-workspace {
align-items: stretch;
}
/* The panel gets a viewport-relative floor instead of a hard-coded 680px.
This keeps the stepper/action area from moving when canvases load or a
different step has less content. Taller content can still grow naturally. */
.passport-workspace > .panel {
min-height: max(520px, calc(100dvh - 250px));
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.passport-workspace > .panel > .panel__body {
flex: 1 1 auto;
}
.passport-workspace > .panel .panel__actions {
margin-top: auto;
min-height: 52px;
box-sizing: border-box;
flex: 0 0 52px;
}
/* Keep preview/canvas dimensions intrinsic; only constrain their maximum
display size so loading them cannot change the workspace geometry. */
.passport-workspace .compare__canvas,
.passport-workspace .preview-photo__canvas,
.passport-workspace .preview-sheet__canvas {
flex: 0 0 auto;
}
}
@media (max-width: 900px) {
.passport-workspace > .panel {
min-height: 0;
}
.passport-workspace > .panel .panel__actions {
min-height: 52px;
}
}
/* ============================================================
VEDHAVERTEX MASTER UI THEME
Visual-only layer derived from the Retro Frames design system.
Passport functionality is intentionally untouched.
============================================================ */
:root{
--bg:#1c1712; --bg-2:#241d17; --surface:#2a211a; --surface-2:#33281f; --surface-3:#3b2e24;
--ink:#f4ecd8; --ink-soft:rgba(244,236,216,.72); --ink-faint:rgba(244,236,216,.45);
--line:rgba(244,236,216,.14); --line-strong:rgba(244,236,216,.24);
--violet:#c98a2b; --violet-2:#d99a3c; --violet-deep:#c98a2b;
--green:#c98a2b; --amber:#c98a2b; --red:#7a2222;
--font-body:Georgia,"Times New Roman",serif; --font-display:'Playfair Display',Georgia,serif; --font-mono:Georgia,"Times New Roman",serif;
--shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 18px 40px -12px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.3); --shadow-lg:0 24px 60px -16px rgba(0,0,0,.65);
}
html,body{background:#1c1712!important;color:#f4ecd8!important}
body{font-family:Georgia,"Times New Roman",serif;background:#1c1712!important;position:relative}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.055;z-index:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body > *{position:relative;z-index:1}
h1,h2,h3,h4{font-family:'Playfair Display',Georgia,serif;color:#f4ecd8}
.site-nav{background:rgba(28,23,18,.94);border-bottom:1px solid rgba(244,236,216,.12);-webkit-backdrop-filter:none}backdrop-filter:none}
.site-nav__brand-text{font-family:'Playfair Display',Georgia,serif;color:#f4ecd8}
.site-nav__links a{color:rgba(244,236,216,.68);font-family:Georgia,serif}
.site-nav__links a:hover,.site-nav__links a[aria-current=page]{color:#f4ecd8;background:rgba(201,138,43,.12)}
.btn{font-family:Georgia,serif;border-radius:6px}
.btn--primary{background:#c98a2b;color:#1c1712;box-shadow:none;border-color:#c98a2b}
.btn--primary:hover:not(:disabled){background:#d99a3c;box-shadow:none}
.btn--secondary{background:#f4ecd8;color:#2a2420;border-color:#f4ecd8}
.btn--secondary:hover:not(:disabled){background:#efe3c8}
.btn--ghost{background:transparent;color:#f4ecd8;border-color:rgba(244,236,216,.2)}
.btn--ghost:hover:not(:disabled){background:rgba(244,236,216,.05);border-color:rgba(244,236,216,.4)}
.eyebrow,.tool-intro__eyebrow{color:#c98a2b}
.stepper{background:rgba(28,23,18,.94);-webkit-backdrop-filter:none}backdrop-filter:none}
.stepper button{background:#241d17;border-color:rgba(244,236,216,.14);color:rgba(244,236,216,.68)}
.stepper__num{background:#33281f;color:rgba(244,236,216,.55)}
.stepper li[data-state=active] button{border-color:#c98a2b;color:#f4ecd8;background:rgba(201,138,43,.12)}
.stepper li[data-state=active] .stepper__num{background:#c98a2b;color:#1c1712}
.stepper li[data-state=done] .stepper__num{background:#c98a2b;color:#1c1712}
.stepper__reset{background:#241d17;border-color:rgba(244,236,216,.14);color:rgba(244,236,216,.68)}
.panel{background:rgba(36,29,23,.96);border-color:rgba(244,236,216,.14);box-shadow:var(--shadow-md)}
.panel__hint,.panel__note,.drag-hint{color:rgba(244,236,216,.58)}
.panel__actions{border-top-color:rgba(244,236,216,.1)}
.dropzone{border-color:rgba(244,236,216,.22);background:rgba(255,255,255,.015);color:rgba(244,236,216,.72)}
.dropzone:hover,.dropzone.is-dragover{border-color:#c98a2b;background:rgba(201,138,43,.07)}
.dropzone svg{color:#c98a2b}.dropzone__title{color:#f4ecd8}.dropzone__sub{color:rgba(244,236,216,.45)}
.upload-preview{border-color:rgba(244,236,216,.14);background:#241d17}
.privacy-note{color:rgba(244,236,216,.45)}.privacy-note svg{color:#c98a2b}
.size-card{border-color:rgba(244,236,216,.14);background:#241d17;color:#f4ecd8}
.size-card:hover{border-color:rgba(244,236,216,.35)}
.size-card[aria-checked=true]{border-color:#c98a2b;background:rgba(201,138,43,.1);box-shadow:0 0 0 1px rgba(201,138,43,.2)}
.size-card__label{color:#f4ecd8}.size-card__sub{color:rgba(244,236,216,.58)}
.custom-size{background:#211a15;border-color:rgba(244,236,216,.14)}
input,select,textarea{background:#241d17!important;color:#f4ecd8!important;border-color:rgba(244,236,216,.16)!important}
input::placeholder,textarea::placeholder{color:rgba(244,236,216,.32)!important}
input:focus,select:focus,textarea:focus{border-color:#c98a2b!important}
.compare__pane,.preview-photo,.preview-sheet{background:#211a15;border-color:rgba(244,236,216,.14)}
.compare__label,.panel-kicker{color:#c98a2b}
.bg-option,.paper-size-btn{background:#241d17;color:#f4ecd8;border-color:rgba(244,236,216,.14)}
.bg-option[aria-pressed=true],.paper-size-btn[aria-checked=true]{border-color:#c98a2b;background:rgba(201,138,43,.12)}
.quality-panel{background:rgba(201,138,43,.07);border-color:rgba(201,138,43,.35)}
.quality-panel__note{color:rgba(244,236,216,.45)}
.layout-summary,.sheet-facts,.studio-note,.print-instructions{background:#241d17;border-color:rgba(244,236,216,.14)}
.copy-suggestions button{background:#241d17;color:#f4ecd8;border-color:rgba(244,236,216,.14)}
.copy-suggestions button[aria-pressed=true]{border-color:#c98a2b;background:rgba(201,138,43,.12)}
.preview-sheet__downloads{border-top-color:rgba(244,236,216,.1)}
.hero{background:transparent}
.hero__sub,.hero__flow li,.hero__flow-card__label{color:rgba(244,236,216,.58)}
.hero__flow li{background:rgba(255,255,255,.025);border-color:rgba(244,236,216,.12)}
.hero-tool-preview{background:#241d17;border-color:rgba(244,236,216,.14);box-shadow:var(--shadow-lg)}
.hero-tool-preview__icon{background:#33281f;border-color:rgba(244,236,216,.14)}
.toast,.panel__error{background:rgba(122,34,34,.28);border-color:rgba(201,138,43,.25);color:#f4ecd8}
a{color:#f4ecd8} a:hover{color:#d99a3c}
/* ============================================================
PASSPORT FLOW — ORIGINAL STABLE LAYOUT
One normal page scroll only. No nested Passport panel scrollbar.
Visual theme remains unchanged. Passport functionality untouched.
============================================================ */
.passport-workspace{
overflow-anchor:none;
}
@media (min-width:901px){
.passport-workspace{
min-height:calc(100vh - 104px);
align-items:start;
}
.passport-workspace > .panel{
min-height:680px;
box-sizing:border-box;
overflow:visible;
}
.passport-workspace .panel__actions{
margin-top:auto;
}
}
@media (max-width:900px){
.passport-workspace > .panel{
min-height:0;
overflow:visible;
}
}
/* Passport flow stability: all six panels share one grid cell.
This prevents page height from changing when steps switch. Inactive
panels remain in layout but are invisible and inert, so there is no
second scrollbar and no step-to-step page jump. */
.passport-workspace{
scroll-margin-top:82px;
position:relative;
}
.passport-workspace > .panel{
grid-column:2;
grid-row:1;
min-width:0;
}
.passport-workspace > .panel.is-step-hidden{
visibility:hidden;
pointer-events:none;
}
.passport-workspace > .panel:not(.is-step-hidden){
visibility:visible;
}
@media (max-width:900px){
.passport-workspace{
scroll-margin-top:72px;
}
.passport-workspace > .panel{
grid-column:1;
grid-row:1;
}
}
/* Camera capture fallback/desktop support */