:root{font-family:Outfit,system-ui,sans-serif}body{margin:0}#root{min-height:100vh}:root{--bg: #f4f6f8;--bg-deep: #e8eef3;--surface: rgba(255, 255, 255, .72);--ink: #12151a;--muted: #5c6b7a;--line: rgba(18, 21, 26, .1);--accent: #0b7a6a;--accent-soft: rgba(11, 122, 106, .12);--accent-ink: #f4fffc;--warn: #c45c12;--danger: #c0392b;--radius: 22px;--font: "Outfit", "Segoe UI", sans-serif;--display: "Syne", "Outfit", sans-serif;--mono: "IBM Plex Mono", ui-monospace, monospace;color:var(--ink);background:var(--bg);font-family:var(--font);line-height:1.5;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:var(--bg);padding-bottom:env(safe-area-inset-bottom,0)}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button,textarea,input{font:inherit}.page{position:relative;isolation:isolate;min-height:100vh;overflow-x:clip}.atmosphere{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 90% 70% at 88% 8%,rgba(11,122,106,.1),transparent 58%),radial-gradient(ellipse 80% 65% at 6% 92%,rgba(11,122,106,.06),transparent 55%),linear-gradient(165deg,#f7f9fb,#eef3f7,#e8eef3)}.atmosphere:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.55;background:repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(11,122,106,.028) 31px,rgba(11,122,106,.028) 32px),repeating-linear-gradient(90deg,transparent,transparent 31px,rgba(11,122,106,.028) 31px,rgba(11,122,106,.028) 32px)}.atmosphere:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 120% 90% at 50% 0%,transparent 42%,rgba(232,238,243,.45) 100%),radial-gradient(ellipse 100% 80% at 50% 100%,transparent 55%,rgba(232,238,243,.35) 100%)}.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:max(1rem,env(safe-area-inset-top,0)) clamp(1rem,4vw,2.75rem) 1rem;border-bottom:1px solid var(--line);background:#ffffff8c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:10}.top-brand{display:inline-flex;align-items:center;text-decoration:none;color:inherit}.top-brand:hover{text-decoration:none}.top-logo{height:28px;width:auto;display:block}.top-nav{display:flex;align-items:center;gap:1rem}.nav-quiet{color:var(--muted);font-weight:500;font-size:.92rem}.install-bar{width:min(1080px,calc(100% - 2rem));margin:.75rem auto;padding:.75rem 1rem;border-radius:14px;background:var(--accent-soft);border:1px solid rgba(11,122,106,.22);display:flex;gap:.75rem 1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;animation:rise .5s ease both}.install-actions{display:flex;gap:.5rem;flex-shrink:0}.install-bar .btn.ghost{color:var(--ink);background:#ffffff8c}main{width:min(1080px,calc(100% - 2rem));margin:0 auto;padding:0 0 1.25rem}.hero{padding:1.75rem 0 .75rem;animation:rise .65s ease both}.hero-intro{margin-bottom:1.5rem}.hero-kicker{margin:0 0 .45rem;color:var(--accent);font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.hero-title{margin:0 0 .65rem;font-family:var(--display);font-weight:800;font-size:clamp(1.85rem,5vw,2.75rem);line-height:1.08;letter-spacing:-.03em}.lead{margin:0;color:var(--muted);font-size:clamp(1rem,2.2vw,1.12rem);max-width:36rem;line-height:1.55}.workspace{animation:rise .75s .12s ease both}.workspace-shell{display:grid;grid-template-columns:1.2fr auto .9fr;gap:0;background:#fff;border:1px solid rgba(18,21,26,.08);border-radius:28px;overflow:hidden;box-shadow:0 1px #fffc inset,0 24px 60px #12151a12;align-items:stretch}.workspace-divider{width:1px;background:linear-gradient(180deg,transparent,rgba(18,21,26,.1) 15%,rgba(18,21,26,.1) 85%,transparent)}.workspace-input,.preview{background:transparent;border:0;border-radius:0;padding:1.15rem 1.25rem 1.2rem;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;display:flex;flex-direction:column}.preview{background:linear-gradient(165deg,#f7fafb,#eef5f4)}.preview .actions{margin-top:.75rem}.tool-body{flex:1;display:flex;flex-direction:column;animation:panelIn .22s ease both}.text-form,.uploader{flex:1;display:flex;flex-direction:column}.text-form .form-row{margin-top:auto;padding-top:1rem}@media (max-width: 860px){.workspace-shell{grid-template-columns:1fr;border-radius:22px}.workspace-input,.preview{min-height:auto}.workspace-divider{width:auto;height:1px;background:linear-gradient(90deg,transparent,rgba(18,21,26,.1) 15%,rgba(18,21,26,.1) 85%,transparent)}.field-head{flex-direction:column;align-items:flex-start;gap:.2rem}.field-hint{white-space:normal}.tab{flex-direction:column;gap:.25rem;padding:.65rem .25rem;font-size:.88rem}.tab-icon{width:18px;height:18px}.top-nav{display:none}}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem;margin-bottom:1.15rem;padding:.28rem;background:#12151a0b;border-radius:16px}.tab{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:transparent;border:0;color:var(--muted);border-radius:12px;padding:.72rem .35rem;cursor:pointer;font-weight:600;transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}.tab:hover{color:var(--ink)}.tab.active{color:var(--ink);background:#fff;box-shadow:0 1px 2px #12151a0d,0 6px 16px #12151a0d}.tab-icon{width:16px;height:16px;display:inline-block;background:currentColor;opacity:.7;mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}.tab.active .tab-icon{opacity:1;color:var(--accent);background:var(--accent)}.icon-code{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E")}.icon-photo{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10.5' r='1.5'/%3E%3Cpath d='M21 16l-5-5-4 4-2-2-5 5'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10.5' r='1.5'/%3E%3Cpath d='M21 16l-5-5-4 4-2-2-5 5'/%3E%3C/svg%3E")}.icon-cam{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E")}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.tab:focus-visible,.btn:focus-visible,textarea:focus-visible,.dropzone:focus-within{outline:2px solid var(--accent);outline-offset:2px}textarea:focus-visible{outline:none}.field-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;margin-bottom:.55rem}.field-head label{margin:0;color:var(--ink);font-size:.95rem;font-weight:600}.field-hint{color:var(--muted);font-size:.8rem;white-space:nowrap}.textarea-wrap{position:relative;border-radius:16px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#0b7a6a59,#12151a14) border-box;border:1.5px solid transparent;transition:box-shadow .2s ease}.textarea-wrap:focus-within{box-shadow:0 0 0 4px #0b7a6a1f}textarea{width:100%;resize:none;min-height:138px;border-radius:15px;border:0;background:transparent;color:var(--ink);padding:1rem 1.05rem;font-family:var(--mono);font-size:.9rem;line-height:1.55}textarea:focus{outline:none}textarea::placeholder{color:#9aa8b5}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid transparent;border-radius:12px;padding:.82rem 1.2rem;cursor:pointer;font-weight:700;transition:transform .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn.compact{padding:.45rem .8rem;font-size:.9rem}.btn.primary{background:var(--accent);color:var(--accent-ink)}.btn.primary:hover{box-shadow:0 10px 24px #0b7a6a47}.btn.secondary{background:#fff;color:var(--ink);border-color:var(--line)}.btn.ghost{background:transparent;color:var(--muted)}.form-row,.actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}.dropzone{display:grid;place-items:center;gap:.4rem;min-height:188px;flex:1;border:1.5px dashed rgba(18,21,26,.16);border-radius:18px;padding:1.6rem 1.2rem;cursor:pointer;text-align:center;background:radial-gradient(circle at 50% 30%,rgba(11,122,106,.06),transparent 55%),#f7fafbe6;transition:border-color .15s ease,background .15s ease,transform .15s ease}.dropzone:hover,.dropzone.over{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-1px)}.dropzone.busy{opacity:.7;pointer-events:none}.dropzone-icon{color:var(--accent);margin-bottom:.15rem}.dropzone-title{font-weight:700;color:var(--ink)}.dropzone-sub{color:var(--muted);font-size:.9rem}.camera-cta{display:grid;gap:.85rem;justify-items:center;text-align:center;color:var(--muted);min-height:188px;flex:1;place-content:center;padding:.5rem .25rem}.camera-cta-visual{position:relative;width:64px;height:64px;display:grid;place-items:center}.cam-ring{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:2px solid rgba(11,122,106,.25);animation:pulseRing 2.2s ease-out infinite}.cam-lens{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#1aa890,#0b7a6a 70%);box-shadow:0 8px 18px #0b7a6a47}.camera-cta-copy strong{display:block;color:var(--ink);font-size:1.05rem;margin-bottom:.15rem}.camera-cta-copy p{margin:0;font-size:.92rem}.camera-cta-note{margin:0;font-size:.85rem;color:var(--muted);opacity:.9}.preview-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.85rem}.preview h3{margin:0;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}.preview-badge{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:#0b7a6a1a;border-radius:999px;padding:.28rem .55rem}.preview.has-result .preview-badge{color:#0a5c50;background:#0b7a6a29}.preview-badge.is-loading{color:var(--warn);background:#c45c121a}.size-picker{margin-bottom:.85rem}.size-picker-label{display:block;margin-bottom:.45rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.size-presets{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.45rem}.size-preset{border:1px solid var(--line);border-radius:999px;padding:.28rem .62rem;font-size:.78rem;font-weight:600;color:var(--muted);background:#fffc;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}.size-preset:hover{border-color:#0b7a6a59;color:var(--ink)}.size-preset.active{border-color:#0b7a6a73;color:#0a5c50;background:#0b7a6a1a}.size-custom{display:flex;align-items:center;gap:.45rem}.size-custom input{width:4.2rem;padding:.38rem .45rem;border:1px solid var(--line);border-radius:10px;font-size:.86rem;font-family:var(--mono);text-align:center;background:#fff}.size-custom input:focus-visible{outline:2px solid rgba(11,122,106,.35);outline-offset:1px}.size-custom span{color:var(--muted);font-weight:600}.preview-stage{position:relative;flex:0 0 260px;height:260px;max-width:100%;display:grid;place-items:center;background:#fff;border:1px solid rgba(18,21,26,.08);border-radius:18px;padding:1.2rem;overflow:hidden;box-shadow:0 10px 28px #12151a0a}.preview-stage.is-empty{background:radial-gradient(circle at 50% 40%,rgba(11,122,106,.05),transparent 55%),repeating-linear-gradient(0deg,transparent,transparent 11px,rgba(18,21,26,.025) 11px,rgba(18,21,26,.025) 12px),repeating-linear-gradient(90deg,transparent,transparent 11px,rgba(18,21,26,.025) 11px,rgba(18,21,26,.025) 12px),#fff}.preview-empty{display:grid;gap:.9rem;justify-items:center;z-index:1}.empty-matrix{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;width:88px;height:88px;opacity:.35;animation:floaty 5.5s ease-in-out infinite}.empty-matrix span{border-radius:1.5px;background:transparent}.empty-matrix span.on{background:var(--ink)}.preview-loading{display:grid;gap:.75rem;justify-items:center;z-index:1}.preview-spinner{width:26px;height:26px;border-radius:50%;border:2.5px solid rgba(11,122,106,.18);border-top-color:var(--accent);animation:spin .8s linear infinite}.dm-image{position:relative;z-index:1;width:min(100%,220px);height:min(100%,220px);max-width:220px;max-height:220px;object-fit:contain;image-rendering:pixelated;animation:popIn .35s ease both}.meta{display:grid;grid-template-columns:auto 1fr;gap:.35rem .75rem;margin:1rem 0 0;padding:.75rem .85rem;font-size:.86rem;background:#ffffffa6;border:1px solid var(--line);border-radius:12px}.meta dd.mono{max-height:4.5rem;overflow:auto;padding:.35rem .45rem;background:#12151a0a;border-radius:8px}.meta dt{color:var(--muted)}.meta dd{margin:0;overflow-wrap:anywhere}.mono{font-family:var(--mono);font-size:.78rem}.hint{position:relative;z-index:1;color:var(--muted);margin:0;text-align:center;max-width:14rem}.scanner-panel .hint{color:#9bb0bf;margin-top:.75rem;max-width:none;text-align:left}.hint.muted{color:#7f8d9b}.error{color:var(--danger);margin:.75rem 0 0;padding:.65rem .85rem;font-size:.92rem;background:#c0392b14;border:1px solid rgba(192,57,43,.18);border-radius:10px}.preview-stage .error{max-width:16rem;text-align:center}@keyframes panelIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes pulseRing{0%{transform:scale(.85);opacity:.9}to{transform:scale(1.25);opacity:0}}.flow{margin-top:1.5rem;animation:rise .8s .15s ease both}.flow h2{margin:0 0 .85rem;font-family:var(--display);font-size:clamp(1.35rem,3vw,1.75rem);letter-spacing:-.03em}.flow ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}@media (max-width: 860px){.flow ol{grid-template-columns:1fr}}.flow li{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;padding:1.1rem 1.15rem;background:#ffffffb3;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px #12151a0a}.step-num{font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:-.02em;color:var(--accent)}.flow strong{display:block;font-size:1.08rem;margin-bottom:.2rem}.flow p{margin:0;color:var(--muted);font-size:.95rem}.trust{margin-top:1rem;animation:rise .85s .18s ease both}.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem}@media (max-width: 860px){.trust-grid{grid-template-columns:1fr}}.trust-item{display:grid;gap:.2rem;padding:1rem 1.1rem;background:var(--accent-soft);border:1px solid rgba(11,122,106,.14);border-radius:14px}.trust-item strong{font-size:.98rem;color:var(--ink)}.trust-item span{font-size:.88rem;color:var(--muted)}.foot{margin-top:1rem;padding:.85rem clamp(1rem,4vw,2.75rem) 1rem;color:var(--muted);font-size:.82rem;border-top:1px solid var(--line)}.scanner-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#0a0e128c;display:grid;place-items:center;padding:1rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fade .2s ease}.scanner-panel{width:min(560px,100%);background:#102231;color:#f3f6f8;border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:1rem}.scanner-panel.is-fallback{background:linear-gradient(180deg,#143042,#0f1f2b)}.scanner-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.scanner-head h3{margin:0;font-size:1.05rem}.scanner-panel .btn.ghost{color:#9bb0bf}.scanner-panel .btn.secondary{background:#ffffff14;color:#f3f6f8;border-color:#ffffff24}.scanner-viewport{position:relative;overflow:hidden;border-radius:14px;background:#000;aspect-ratio:3 / 4}.scanner-viewport video{width:100%;height:100%;object-fit:cover}.scanner-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;gap:.75rem;background:#0000008c;color:#d7e2ea;text-align:center}.scanner-loading p{margin:0;font-size:.95rem}.scanner-spinner{width:28px;height:28px;margin:0 auto;border-radius:50%;border:2.5px solid rgba(255,255,255,.2);border-top-color:var(--accent);animation:spin .8s linear infinite}.scanner-frame{position:absolute;top:18%;right:14%;bottom:18%;left:14%;border:2px solid rgba(11,122,106,.9);border-radius:16px;box-shadow:0 0 0 999px #00000047;pointer-events:none;animation:pulse 1.8s ease-in-out infinite}.camera-fallback{display:grid;gap:1rem;justify-items:center;text-align:center;padding:1.4rem .75rem .85rem;animation:rise .35s ease both}.camera-fallback-icon{color:#ffffffb8;opacity:.9}.camera-fallback-text{margin:0;max-width:28rem;color:#b7c6d1;font-size:.98rem;line-height:1.45}.camera-fallback-actions{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin-top:.25rem}@keyframes spin{to{transform:rotate(360deg)}}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes brandIn{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}@keyframes popIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{border-color:#0b7a6a80}50%{border-color:#0b7a6a}}@keyframes drift{0%{transform:translate(0)}to{transform:translate(18px,12px)}}@keyframes floaty{0%,to{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(10px) rotate(2deg)}}@media print{.top,.hero-intro,.flow,.trust,.foot,.install-bar,.workspace-input,.actions,.meta,.atmosphere{display:none!important}.page,.atmosphere{background:#fff!important}.preview,.preview-stage{border:none;box-shadow:none;background:#fff}}