:root{
  --bg:#FFFFFF;
  --ink:#0F172A;
  --body:#475569;
  --border:#E2E8F0;
  --blue:#1E40AF;
  --blue-soft:rgba(30,64,175,.06);
  --ink-soft:rgba(15,23,42,.04);
  --surface-3:#E2E8F0;
  --ink-2:#475569;
  --ink-3:#94A3B8;
  --nav-bg:rgba(255,255,255,.75);
  --elev-card:0 1px 2px rgba(15,23,42,.04), 0 12px 32px -8px rgba(15,23,42,.12);
  --elev-float:0 2px 4px rgba(15,23,42,.04), 0 30px 60px -12px rgba(15,23,42,.25);
  --radius:16px;
  --radius-sm:8px;
}
[data-theme="dark"]{
  --bg:#0F172A;
  --ink:#F8FAFC;
  --body:#94A3B8;
  --border:#1E293B;
  --blue:#3B82F6;
  --blue-soft:rgba(59,130,246,.12);
  --ink-soft:rgba(248,250,252,.06);
  --surface-3:#1E293B;
  --ink-2:#94A3B8;
  --ink-3:#64748B;
  --nav-bg:rgba(15,23,42,.75);
  --elev-card:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -8px rgba(0,0,0,.6);
  --elev-float:0 2px 4px rgba(0,0,0,.4), 0 30px 60px -12px rgba(0,0,0,.75);
}
html{scroll-behavior:smooth}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--ink);margin:0;line-height:1.25;letter-spacing:-.02em}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
input,select,textarea{font-family:inherit;font-size:15px;color:var(--ink)}
.mono{font-family:'JetBrains Mono',monospace}
.wrap{max-width:1152px;margin:0 auto;padding:0 16px 64px}
@media(min-width:768px){.wrap{padding:0 24px 80px}}

/* Navbar (ala Poketo: 3 lapis, pill 28px, transparan 75% + blur) */
.navbar{position:sticky;top:0;z-index:50;transition:padding .3s}
.navbar.scrolled{padding:8px 12px 0}
@media(min-width:640px){.navbar.scrolled{padding:8px 16px 0}}
.nav-shell{margin:0 auto;max-width:100rem;overflow:hidden;border-bottom:1px solid transparent;transition:max-width .3s,background-color .3s,border-color .3s,box-shadow .3s}
.navbar.scrolled .nav-shell{max-width:1024px;border:1px solid var(--border);border-radius:28px;background:var(--nav-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:var(--elev-float)}
.navbar.scrolled.open .nav-shell{background:var(--nav-bg)}
.nav-inner{max-width:1152px;margin:0 auto;padding:0 16px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:height .3s,padding .3s}
.navbar.scrolled .nav-inner{height:56px;padding-left:20px;padding-right:10px}
@media(min-width:768px){.nav-inner{padding:0 24px}}
@media(min-width:640px){.navbar.scrolled .nav-inner{padding-left:24px}}
.logo{font-size:21px;font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:-.055em;line-height:1;display:inline-flex;align-items:flex-start;flex:none}
.logo-dot{width:5px;height:5px;border-radius:1.5px;background:var(--blue);margin:2px 0 0 2px;flex:none}
.nav-links{display:none;align-items:center;gap:4px}
@media(min-width:1024px){.nav-links{display:flex}}
.nav-links a{color:var(--ink-2);text-decoration:none;font-weight:500;font-size:14px;padding:6px 12px;border-radius:999px;white-space:nowrap;transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:8px;flex:none}
.theme-switch{display:none}
@media(min-width:640px){.theme-switch{display:inline-flex}}
.mobile-theme .theme-switch{display:inline-flex}
.theme-switch button{display:inline-flex;height:28px;min-width:28px;align-items:center;justify-content:center;border:0;border-radius:999px;padding:0 8px;background:transparent;color:var(--ink-3);cursor:pointer;transition:color .15s,background .15s}
.theme-switch button:hover{color:var(--ink)}
.theme-switch button.on{background:var(--surface-3);color:var(--ink);box-shadow:0 1px 2px rgba(15,23,42,.08)}
.theme-switch button svg{width:14px;height:14px}
.nav-burger{display:grid;height:36px;width:36px;place-items:center;border:0;border-radius:999px;background:transparent;color:var(--ink);cursor:pointer}
.nav-burger:hover{background:var(--ink-soft)}
.nav-burger svg{width:20px;height:20px}
.nav-burger .icon-close{display:none}
.navbar.open .nav-burger .icon-menu{display:none}
.navbar.open .nav-burger .icon-close{display:block}
@media(min-width:1024px){.nav-burger{display:none}}
.nav-mobile{display:none}
.navbar.open .nav-mobile{display:block;animation:menu-in .2s ease-out both}
@keyframes menu-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.nav-mobile .mobile-links{display:flex;flex-direction:column;border-top:1px solid var(--border);padding:8px 16px 4px}
.nav-mobile .mobile-links a{color:var(--ink);text-decoration:none;font-weight:500;font-size:16px;padding:10px 0}
.nav-mobile .mobile-theme{display:flex;align-items:center;gap:8px;padding:12px 16px 20px}

/* Hero */
.hero{margin:0 -16px;padding:40px 16px 8px;text-align:left;background:linear-gradient(to top, var(--blue-soft), var(--bg) 60%, var(--bg))}
@media(min-width:768px){.hero{margin:0 -24px;padding:56px 24px 8px}}
.hero-inner{max-width:1152px;margin:0 auto}
@media(min-width:768px){.hero{padding:72px 0 8px}}
.hero h1{font-size:clamp(2rem,4.2vw,3.4rem);font-weight:600;letter-spacing:-.03em;line-height:1.1;margin-top:16px;text-wrap:balance}
.hero h1 .hero-copy{color:color-mix(in srgb, var(--ink) 58%, transparent);font-weight:500}
.hero p{margin:16px 0 0;font-size:16px;max-width:640px}
@media(min-width:768px){.hero p{font-size:18px}}
.hero-cta{margin-top:24px}
.hero-stats{display:flex;gap:32px;margin-top:32px;flex-wrap:wrap}
.hero-stats div{display:flex;flex-direction:column;gap:2px}
.hero-stats strong{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.hero-stats span{font-size:13px;color:var(--body)}

section[id]{scroll-margin-top:80px}

/* Info sections */
.info{margin-top:64px}
@media(min-width:640px){.info{margin-top:112px}}
.info h2{font-size:28px;font-weight:600;letter-spacing:-.025em;line-height:1.2}
@media(min-width:640px){.info h2{font-size:41.6px;line-height:1.15}}
.info .sub{margin:8px 0 0;font-size:15px}
.steps{display:grid;grid-template-columns:1fr;gap:16px;margin-top:24px}
@media(min-width:640px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.step h3{font-size:16px;font-weight:700;margin:0}
.step p{margin:8px 0 0;font-size:14px}
.step-num{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--blue);margin-bottom:12px}
.faq-list{margin-top:24px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:last-child{border-bottom:0}
.faq-q{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;text-align:left;font-weight:500;color:var(--ink);cursor:pointer;font-size:16px;background:none;border:0}
.faq-q svg{width:20px;height:20px;flex:none;color:var(--ink-3);transition:transform .3s}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a p{margin:0;padding:0 32px 20px 0;font-size:14px;line-height:1.625}

/* Header */
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.brand h1{font-size:28px;font-weight:800}
@media(min-width:768px){.brand h1{font-size:34px}}
.brand p{margin:8px 0 0;font-size:15px;max-width:560px}
.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:999px;padding:8px 14px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--bg);white-space:nowrap;min-height:44px}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--blue);display:inline-block;flex:none}
.badge.blue{background:var(--blue);border-color:var(--blue);color:#FFFFFF}
.badge.blue i{background:#FFFFFF}

/* Tool nav */
.tools{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:24px 0}
@media(min-width:640px){.tools{grid-template-columns:repeat(4,1fr)}}
.tool-btn{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:16px;min-height:88px;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,border-color .35s,background .35s}
.tool-btn:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:var(--elev-card)}
.tool-btn svg{width:22px;height:22px;stroke:var(--ink);flex:none}
.tool-btn .t{font-weight:700;color:var(--ink);font-size:14px;line-height:1.3}
.tool-btn .d{font-size:12px;color:var(--body);line-height:1.4}
.tool-btn.active{background:var(--blue);border-color:var(--blue)}
.tool-btn.active svg{stroke:#FFFFFF}
.tool-btn.active .t{color:#FFFFFF}
.tool-btn.active .d{color:rgba(255,255,255,.75)}

/* Panels & cards */
.panel{display:none}
.panel.active{display:block}
.card{border:1px solid var(--border);border-radius:var(--radius);padding:24px;background:var(--bg)}
@media(max-width:560px){.card{padding:16px}}
.card h2{font-size:20px;font-weight:700}
.card .sub{margin:8px 0 0;font-size:14px}
.label{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--body);display:block;margin-bottom:8px}

/* Dropzone */
.drop{border:1.5px dashed var(--border);border-radius:var(--radius);padding:32px 16px;text-align:center;margin-top:16px;transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--blue);background:var(--blue-soft)}
.drop svg{width:32px;height:32px;stroke:var(--ink);margin-bottom:8px}
.drop .big{font-weight:700;color:var(--ink);font-size:15px}
.drop .small{font-size:13px;margin-top:4px;overflow-wrap:anywhere}
.drop input{display:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;border:1px solid var(--blue);background:var(--blue);color:#FFFFFF;font-weight:600;font-size:14px;padding:10px 20px;min-height:44px;text-decoration:none;transition:opacity .15s}
.btn:hover{opacity:.9}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn svg{width:17px;height:17px;stroke:currentColor;flex:none}
.btn-sec{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;border:1px solid var(--border);background:var(--nav-bg);color:var(--ink);font-weight:600;font-size:14px;padding:10px 16px;min-height:44px;text-decoration:none;transition:background .15s;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn-sec:hover{background:var(--bg)}
.btn-sec:hover{border-color:var(--ink)}
.btn-sec:disabled{opacity:.45;cursor:not-allowed}
.btn-sec svg{width:16px;height:16px;stroke:currentColor;flex:none}
.btn-plain{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--bg);color:var(--ink);border-radius:999px;min-width:44px;min-height:44px;padding:8px 12px;font-weight:600;font-size:13px}
.btn-plain:hover{border-color:var(--ink)}
.btn-plain svg{width:16px;height:16px;stroke:currentColor}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row.mt{margin-top:16px}
.grow{flex:1}

.hover-arrow{flex-shrink:0;width:14px;height:10px;margin-left:2px;display:inline-block;overflow:hidden}
.hover-arrow .shaft{transition:transform .15s;transform:translateX(-10px)}
.hover-arrow .tip{transition:transform .15s}
.btn:hover .hover-arrow .shaft,.btn-sec:hover .hover-arrow .shaft{transform:translateX(0)}
.btn:hover .hover-arrow .tip,.btn-sec:hover .hover-arrow .tip{transform:translateX(3px)}

/* Reveal on scroll (Poketo: 0.8s cubic-bezier(.16,1,.3,1)) */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0s)}
.reveal[data-shown="true"]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* Inputs */
.field{margin-top:16px}
.field input[type=text],.field select,.field textarea{width:100%;border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;min-height:48px;background:var(--bg);outline:none}
.field input[type=text]:focus,.field select:focus,.field textarea:focus{border-color:var(--blue)}
.field textarea{min-height:220px;resize:vertical;line-height:1.6;font-size:14px}
.grid2{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.grid2{grid-template-columns:1fr 1fr}}
.hint{font-size:13px;margin-top:8px}
.radio-row{display:flex;gap:8px;flex-wrap:wrap}
.radio-pill{border:1px solid var(--border);border-radius:999px;padding:10px 18px;min-height:44px;display:inline-flex;align-items:center;font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;background:var(--bg)}
.radio-pill.sel{background:var(--blue);border-color:var(--blue);color:#FFFFFF}
.radio-pill input{display:none}

/* File list */
.filelist{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.fileitem{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px}
.fileitem .num{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:#FFFFFF;background:var(--ink);border-radius:16px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex:none}
.fileitem .meta{min-width:0;flex:1}
.fileitem .name{font-weight:600;color:var(--ink);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fileitem .size{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--body)}
.fileitem .acts{display:flex;gap:8px;flex:none}

/* Page thumbs */
.pagetools{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.pages{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}
@media(min-width:640px){.pages{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.pages{grid-template-columns:repeat(4,1fr)}}
.page{border:1px solid var(--border);border-radius:var(--radius);padding:8px;background:var(--bg);text-align:center;position:relative}
.page canvas{width:100%;height:auto;display:block;border-radius:16px;background:var(--bg);border:1px solid var(--border)}
.page .pnum{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;color:var(--body);margin-top:8px;letter-spacing:.04em}
.page .pact{margin-top:8px;display:flex;justify-content:center;gap:8px}
.page.clickable{cursor:pointer}
.page.marked{border-color:var(--ink);background:var(--ink-soft)}
.page.marked canvas{opacity:.35;filter:grayscale(1)}
.page .markbadge{display:none;position:absolute;top:16px;left:50%;transform:translateX(-50%);background:var(--ink);color:#FFFFFF;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.06em;padding:6px 10px;border-radius:999px;text-transform:uppercase;white-space:nowrap}
.page.marked .markbadge{display:block}
.page .rotbadge{position:absolute;top:16px;right:16px;background:var(--blue);color:#FFFFFF;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px}

/* Status / progress */
.status{display:none;margin-top:16px;border:1px solid var(--border);border-radius:var(--radius);padding:16px;font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.status.show{display:block}
.status.err{border-color:var(--ink);font-weight:600}
.progress{display:none;height:8px;background:var(--border);border-radius:999px;overflow:hidden;margin-top:16px}
.progress.show{display:block}
.progress i{display:block;height:100%;width:0%;background:var(--blue);border-radius:999px;transition:width .2s}
.result{display:none;margin-top:16px;border:1px solid var(--blue);border-radius:var(--radius);padding:16px;background:var(--blue-soft)}
.result.show{display:block}
.result .rt{font-weight:700;color:var(--ink);font-size:15px}
.result .rs{font-size:13px;margin-top:4px;overflow-wrap:anywhere}
.result .fname{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:var(--ink);margin-top:8px;overflow-wrap:anywhere}
.result .btn{max-width:100%}
.imggrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}
@media(min-width:640px){.imggrid{grid-template-columns:repeat(3,1fr)}}
.imgitem{border:1px solid var(--border);border-radius:var(--radius);padding:8px;text-align:center}
.imgitem img{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--border)}
.imgitem .pnum{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;margin:8px 0}
.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.stat{border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center}
.stat .v{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--ink);font-size:17px}
.stat .k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--body);margin-top:4px}
footer{margin-top:40px;border-top:1px solid var(--border);padding-top:24px;font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hidden{display:none !important}