:root{
  --bg:#07101d;--surface:#0d1727;--surface-2:#121f33;--line:#23334c;--text:#f7f9fc;--muted:#a9b8cc;--accent:#69e7b8;--accent-2:#baf6df;--danger:#ff8a8a;--shadow:0 24px 70px rgba(0,0,0,.28);--radius:24px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 20% 0,#10233d 0,transparent 32rem),var(--bg);color:var(--text);font:16px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.shell{width:min(1160px,calc(100% - 32px));margin-inline:auto}.skip-link{position:fixed;left:16px;top:-80px;z-index:100;background:#fff;color:#000;padding:10px 14px;border-radius:8px}.skip-link:focus{top:16px}.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(7,16,29,.82);backdrop-filter:blur(16px)}.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:68px}.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:800}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--accent);color:#04130d;font-size:24px}.header-nav{display:flex;gap:22px}.header-nav a{color:var(--muted);text-decoration:none}.header-nav a:hover{color:var(--text)}.hero{display:grid;grid-template-columns:1.3fr .7fr;gap:34px;align-items:center;padding-block:72px 46px}.eyebrow{margin:0 0 10px;color:var(--accent);font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.hero h1,.section-heading h2{margin:.1em 0 .35em;line-height:1.05;letter-spacing:-.04em}.hero h1{font-size:clamp(2.55rem,7vw,5.6rem);max-width:850px}.hero-lead{max-width:760px;color:#c8d3e1;font-size:clamp(1.05rem,2vw,1.25rem)}.hero-actions,.empty-actions,.control-actions{display:flex;flex-wrap:wrap;gap:10px}.privacy-note{color:var(--muted);font-size:.92rem}.btn,.preset,.icon-btn,.text-btn{font:inherit}.btn{border:1px solid var(--line);border-radius:14px;padding:12px 16px;cursor:pointer;font-weight:800}.btn-primary{background:var(--accent);color:#06140f;border-color:transparent}.btn-primary:hover{background:var(--accent-2)}.btn-secondary{background:var(--surface-2);color:var(--text)}.btn-ghost{background:transparent;color:var(--muted)}.btn:disabled,.icon-btn:disabled{opacity:.4;cursor:not-allowed}.hero-card{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:var(--shadow)}.hero-card div{min-height:125px;padding:18px;border-radius:18px;background:rgba(255,255,255,.045)}.hero-card strong{display:block;font-size:1.5rem}.hero-card span{color:var(--muted)}.tool-section{padding-block:40px 72px}.section-heading{max-width:820px;margin-bottom:24px}.section-heading h2{font-size:clamp(2rem,5vw,3.7rem)}.section-heading p:not(.eyebrow){color:var(--muted)}.section-heading.compact{margin-bottom:20px}.app-card{overflow:hidden;border:1px solid var(--line);border-radius:28px;background:var(--surface);box-shadow:var(--shadow)}.viewer-wrap{position:relative;aspect-ratio:16/9;min-height:360px;overflow:hidden;background:#02060d;touch-action:none}.viewer-wrap canvas{display:block;width:100%;height:100%;background:linear-gradient(135deg,#07111e,#02060d)}#cameraVideo,#photoSource{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.empty-state{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;padding:28px;background:radial-gradient(circle at 50% 40%,rgba(105,231,184,.12),transparent 35%)}.empty-state[hidden]{display:none}.empty-icon{font-size:4rem;color:var(--accent)}.empty-state h3{margin:8px 0 0;font-size:1.45rem}.empty-state p{margin:6px 0 18px;color:var(--muted)}.viewer-topbar{position:absolute;left:14px;top:14px;display:flex;gap:8px}.badge{padding:7px 10px;border-radius:999px;background:rgba(3,8,15,.7);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);font-size:.82rem}.viewer-actions{position:absolute;right:14px;top:14px;display:flex;gap:8px}.icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:rgba(3,8,15,.72);color:#fff;cursor:pointer;font-size:1.2rem}.camera-help{position:absolute;left:16px;right:16px;bottom:16px;padding:14px;border:1px solid rgba(255,138,138,.4);border-radius:16px;background:rgba(55,13,18,.91);color:#ffecec}.camera-help span{margin-left:5px}.text-btn{border:0;background:none;color:#fff;text-decoration:underline;cursor:pointer}.controls{padding:22px}.control-row label,.advanced label{display:grid;gap:7px;color:#dce5f2;font-weight:700}.control-row label{grid-template-columns:1fr auto;align-items:center}.control-row input{grid-column:1/-1}.controls input[type=range]{width:100%;accent-color:var(--accent)}.preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}.preset{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--surface-2);color:var(--text);cursor:pointer;font-weight:700}.preset.active{background:rgba(105,231,184,.16);border-color:var(--accent);color:var(--accent-2)}.advanced{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin:6px 0 18px}.advanced summary{cursor:pointer;font-weight:800}.advanced-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:16px}.switch-line{display:flex!important;align-items:center;gap:10px!important;font-weight:600!important}.status{margin:14px 0 0;color:var(--muted);font-size:.9rem}.noscript-note{margin-top:16px;padding:14px;border-radius:14px;background:#2a1f0d}.info-section,.use-cases,.faq{padding-block:58px}.steps,.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.steps article,.case-grid article{padding:22px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.035)}.steps article>span{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--accent);color:#06140f;font-weight:900}.steps h3,.case-grid h3{margin:14px 0 5px}.steps p,.case-grid p{color:var(--muted);margin:0}.case-grid{grid-template-columns:repeat(4,1fr)}.faq details{border-bottom:1px solid var(--line);padding:17px 0}.faq summary{cursor:pointer;font-weight:800;font-size:1.05rem}.faq details p{max-width:850px;color:var(--muted)}.site-footer{margin-top:38px;border-top:1px solid var(--line);background:#050b14}.footer-inner{display:flex;justify-content:space-between;gap:24px;padding-block:30px;color:var(--muted);font-size:.92rem}.footer-inner p{max-width:540px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:820px){.header-nav{display:none}.hero{grid-template-columns:1fr;padding-block:48px 32px}.hero-card{grid-template-columns:1fr 1fr}.viewer-wrap{min-height:0;aspect-ratio:3/4}.preset-grid{grid-template-columns:1fr 1fr}.advanced-grid{grid-template-columns:1fr 1fr}.steps,.case-grid{grid-template-columns:1fr 1fr}.footer-inner{display:block}}
@media(max-width:560px){.shell{width:min(100% - 20px,1160px)}.hero{padding-top:34px}.hero-card{grid-template-columns:1fr 1fr}.hero-card div{min-height:100px;padding:14px}.tool-section{padding-top:24px}.app-card{border-radius:20px}.viewer-wrap{aspect-ratio:10/13}.controls{padding:16px}.advanced-grid,.steps,.case-grid{grid-template-columns:1fr}.control-actions .btn{flex:1 1 calc(50% - 10px)}.viewer-actions .icon-btn:nth-child(2){display:none}.footer-inner{padding-bottom:calc(28px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Clear zoom controls for older and less experienced users */
.viewer-wrap{scroll-margin-top:82px}
.zoom-row{display:grid;gap:14px}
.zoom-buttons{display:grid;grid-template-columns:minmax(0,1fr) minmax(88px,.48fr) minmax(0,1fr);gap:10px;align-items:stretch}
.zoom-btn{min-height:68px;border:2px solid var(--line);border-radius:16px;background:var(--surface-2);color:var(--text);font:inherit;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;font-size:1.05rem}
.zoom-btn:hover{border-color:var(--accent)}
.zoom-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.zoom-btn:disabled{opacity:.42;cursor:not-allowed}
.zoom-btn-plus{background:var(--accent);border-color:var(--accent);color:#06140f}
.zoom-btn-plus:hover{background:var(--accent-2);border-color:var(--accent-2)}
.zoom-symbol{display:grid;place-items:center;min-width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);font-size:2rem;line-height:1;font-weight:700}
.zoom-btn-plus .zoom-symbol{background:rgba(0,0,0,.12)}
.zoom-current{border:1px solid var(--line);border-radius:16px;background:#07111e;display:grid;place-content:center;text-align:center;padding:8px}
.zoom-current span{color:var(--muted);font-size:.75rem;font-weight:700}
.zoom-current strong{font-size:1.35rem;line-height:1.1}
.zoom-row input[type=range]{height:34px}
@media(max-width:560px){.viewer-wrap{scroll-margin-top:74px}.zoom-buttons{grid-template-columns:1fr 82px 1fr;gap:7px}.zoom-btn{min-height:72px;flex-direction:column;gap:3px;padding:8px 5px;font-size:.92rem}.zoom-symbol{min-width:34px;height:34px;font-size:1.8rem}.zoom-current strong{font-size:1.2rem}}

/* Large, unmistakable fullscreen control */
.fullscreen-main{width:100%;min-height:64px;margin:0 0 22px;border:2px solid var(--accent);border-radius:16px;background:rgba(105,231,184,.12);color:var(--text);font:inherit;font-size:1.15rem;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px}
.fullscreen-main span:first-child{font-size:1.65rem;line-height:1}
.fullscreen-main:hover{background:rgba(105,231,184,.2)}
.fullscreen-main:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:560px){.fullscreen-main{min-height:70px;font-size:1.2rem;margin-bottom:18px}}

/* Scenario hubs: useful content kept visually separate from the main tool. */
.seo-hubs { padding-top: 18px; padding-bottom: 38px; }
.hub-nav { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 22px; }
.hub-nav a { display:inline-flex; align-items:center; min-height:44px; padding:9px 14px; border:1px solid var(--line); border-radius:999px; color:var(--text); text-decoration:none; background:var(--surface); font-weight:700; }
.hub-nav a:hover { border-color:var(--accent); }
.hub-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.hub-card { scroll-margin-top:84px; padding:22px; border:1px solid var(--line); border-radius:22px; background:var(--surface); }
.hub-card h3 { margin:0 0 10px; font-size:clamp(1.1rem,2vw,1.35rem); }
.hub-card p { margin:0 0 10px; line-height:1.65; color:var(--muted); }
.hub-action { display:inline-flex; margin-top:4px; font-weight:800; color:var(--accent); text-underline-offset:3px; }
.seo-copy { padding-top:0; padding-bottom:36px; }
.seo-copy-inner { max-width:900px; padding:24px; border:1px solid var(--line); border-radius:22px; background:var(--surface); }
.seo-copy h2 { margin-top:0; }
.seo-copy p { color:var(--muted); line-height:1.7; }
.seo-copy p:last-child { margin-bottom:0; }
@media (max-width:760px) {
  .hub-grid { grid-template-columns:1fr; }
  .hub-card { padding:18px; }
  .hub-nav { display:grid; grid-template-columns:1fr 1fr; }
  .hub-nav a { justify-content:center; text-align:center; }
}
@media (max-width:430px) {
  .hub-nav { grid-template-columns:1fr; }
}


/* Search/render-safe text equivalent for the dynamic magnifier area. */
.viewer-description{margin:0;padding:11px 22px 0;color:var(--muted);font-size:.92rem;background:var(--surface)}
@media(max-width:560px){.viewer-description{display:none}}

/* Fullscreen action above the magnifier; zoom controls begin immediately below it. */
.fullscreen-above{padding:16px 22px 0;background:var(--surface)}
.fullscreen-above .fullscreen-main{margin:0}
.fullscreen-zoom{display:none;grid-template-columns:minmax(68px,1fr) minmax(86px,.7fr) minmax(68px,1fr);gap:10px;margin-top:10px}
.fullscreen-zoom-btn{min-height:60px;border:2px solid var(--line);border-radius:16px;background:#07111e;color:var(--text);font:inherit;font-size:2rem;font-weight:900;line-height:1;cursor:pointer;display:grid;place-items:center}
.fullscreen-zoom-plus{background:var(--accent);border-color:var(--accent);color:#06140f}
.fullscreen-zoom-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.fullscreen-zoom-btn:disabled{opacity:.42;cursor:not-allowed}
.fullscreen-zoom-value{min-height:60px;border:1px solid var(--line);border-radius:16px;background:#07111e;color:var(--text);display:grid;place-items:center;font-weight:900;font-size:1.15rem}
.controls{padding-top:16px}
@media(max-width:560px){
  .fullscreen-above{padding:14px 16px 0}
  .fullscreen-above .fullscreen-main{margin:0}
  .controls{padding-top:14px}
}


/* Fullscreen: native where supported, page-filling fallback on iPhone. */
body.loupe-fullscreen-open{overflow:hidden;overscroll-behavior:none}
.app-card:fullscreen,
.app-card:-webkit-full-screen,
.app-card.is-pseudo-fullscreen{
  background:var(--surface);
  border:0;
  border-radius:0;
  margin:0;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.app-card.is-pseudo-fullscreen{
  position:fixed;
  inset:0;
  z-index:10000;
  width:100%;
  height:100vh;
  height:100dvh;
  max-width:none;
}
.app-card:fullscreen .fullscreen-above,
.app-card:-webkit-full-screen .fullscreen-above,
.app-card.is-pseudo-fullscreen .fullscreen-above{
  position:sticky;
  top:0;
  z-index:12;
  padding-top:max(14px,env(safe-area-inset-top));
  background:rgba(13,23,39,.97);
}
.app-card:fullscreen .fullscreen-zoom,
.app-card:-webkit-full-screen .fullscreen-zoom,
.app-card.is-pseudo-fullscreen .fullscreen-zoom{
  display:grid;
}
.app-card:fullscreen .viewer-wrap,
.app-card:-webkit-full-screen .viewer-wrap,
.app-card.is-pseudo-fullscreen .viewer-wrap{
  width:100%;
  height:calc(100vh - 166px);
  height:calc(100dvh - 166px);
  min-height:360px;
  aspect-ratio:auto;
}
@media(max-width:560px){
  .app-card:fullscreen .viewer-wrap,
  .app-card:-webkit-full-screen .viewer-wrap,
  .app-card.is-pseudo-fullscreen .viewer-wrap{
    height:calc(100vh - 170px);
    height:calc(100dvh - 170px);
    min-height:0;
  }
}