:root{--night:#0b1020;--night-2:#111729;--night-line:#232b45;--paper:#f7f7f5;--paper-2:#f0efea;--card:#fff;--line:#e7e5e0;--line-strong:#d6d3cd;--ink:#1c1b1a;--ink-soft:#57534e;--ink-faint:#78716c;--on-night:#e7eaf3;--on-night-soft:#94a3b8;--blue:#2563eb;--blue-deep:#1d4ed8;--blue-soft:#eaf0ff;--blue-light:#60a5fa;--scan:#7ee0ff;--danger:#dc2626;--success:#16a34a;--c-pdf:#ef4444;--c-image:#8b5cf6;--c-word:#2563eb;--c-amber:#f59e0b;--c-cyan:#06b6d4;--c-green:#22c55e;--font-display:"Bricolage Grotesque Variable", "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;--font-body:"Plus Jakarta Sans Variable", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--ease-out:cubic-bezier(.23, 1, .32, 1);--sidebar:248px;--radius:20px}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--paper);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;margin:0;font-size:15px;line-height:1.55}button,input,select,textarea{font:inherit;color:inherit}img,svg,canvas{max-width:100%;display:block}a{color:inherit}:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px}h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;margin:0;line-height:1.1}p{margin:0}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.shell{min-height:100dvh}.sidebar{width:var(--sidebar);z-index:20;background:var(--night);color:var(--on-night);flex-direction:column;padding:20px 14px;display:flex;position:fixed;inset:0 auto 0 0}.side-brand{font-family:var(--font-display);letter-spacing:-.02em;align-items:center;gap:10px;padding:6px 10px 22px;font-size:19px;font-weight:700;text-decoration:none;display:flex}.side-brand img{border-radius:9px;width:32px;height:32px}.side-brand small{font-family:var(--font-body);color:var(--scan);letter-spacing:0;background:#7ee0ff1f;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:600}.side-nav{gap:2px;display:grid}.nav-item{height:44px;color:var(--on-night-soft);border-radius:12px;align-items:center;gap:12px;padding:0 12px;font-size:14px;font-weight:600;text-decoration:none;transition:background-color .15s,color .15s;display:flex}.nav-item svg{flex:none;width:20px;height:20px}.nav-item[aria-current=page]{color:#fff;background:#60a5fa24}.nav-item[aria-current=page] svg{color:var(--blue-light)}@media (hover:hover) and (pointer:fine){.nav-item:hover{color:#fff;background:#ffffff0f}}.side-foot{border-top:1px solid var(--night-line);color:var(--on-night-soft);gap:10px;margin-top:auto;padding:16px 12px 4px;font-size:12.5px;display:grid}.side-foot .privacy-note{align-items:flex-start;gap:8px;display:flex}.side-foot .privacy-note svg{width:16px;height:16px;color:var(--scan);flex:none;margin-top:2px}.side-foot a{color:var(--on-night);font-weight:600;text-decoration:none}.link-btn{font:inherit;color:inherit;cursor:pointer;text-align:left;text-underline-offset:2px;background:0 0;border:0;padding:0;text-decoration:underline}.side-foot .link-btn{color:var(--on-night-soft);font-size:12.5px}.home-foot{color:var(--ink-faint);flex-wrap:wrap;gap:6px 18px;margin-top:28px;font-size:13px;display:flex}.home-foot a{color:inherit}.main{margin-left:var(--sidebar);min-height:100dvh}.content{max-width:1040px;margin:0 auto;padding:28px 32px 64px}.bottom-nav{display:none}@media (width<=860px){.sidebar{display:none}.main{margin-left:0}.content{padding:16px 16px calc(96px + env(safe-area-inset-bottom))}.bottom-nav{z-index:20;padding:8px 8px calc(8px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(16px)saturate(140%);border-top:1px solid var(--line);background:#ffffffe0;grid-template-columns:repeat(5,1fr);display:grid;position:fixed;bottom:0;left:0;right:0}.bottom-nav a{color:var(--ink-faint);border-radius:12px;flex-direction:column;align-items:center;gap:3px;padding:6px 0;font-size:11px;font-weight:600;text-decoration:none;display:flex}.bottom-nav a svg{width:22px;height:22px}.bottom-nav a[aria-current=page]{color:var(--blue)}.bottom-nav a[aria-current=page] .bn-pill{background:var(--blue-soft)}.bn-pill{width:52px;height:30px;transition:background-color .2s var(--ease-out);border-radius:999px;place-items:center;display:grid}}.hero-card{isolation:isolate;color:#fff;background:linear-gradient(135deg, #3b82f6 0%, var(--blue) 45%, var(--blue-deep) 100%);border-radius:28px;padding:26px 28px 30px;position:relative;overflow:hidden;box-shadow:0 24px 48px -28px #2563ebcc}.hero-card:before,.hero-card:after{content:"";z-index:-1;background:#ffffff14;border-radius:32px;position:absolute}.hero-card:before{width:260px;height:220px;top:-60px;right:-40px}.hero-card:after{width:160px;height:140px;bottom:-70px;right:30px}.hero-chip{align-items:center;gap:10px;font-size:14px;display:inline-flex}.hero-chip span:first-child{background:#ffffff29;border-radius:13px;place-items:center;width:40px;height:40px;display:grid}.hero-chip img{border-radius:6px;width:22px;height:22px}.hero-chip b{font-weight:700}.hero-card h1{letter-spacing:-.03em;margin-top:18px;font-size:clamp(28px,4vw,40px);font-weight:800}.hero-card p{color:#ffffffd1;max-width:520px;margin-top:6px;font-size:15.5px}.section-title{margin:32px 0 14px;font-size:22px;font-weight:700}.section-sub{color:var(--ink-soft);margin:-8px 0 16px}.card{background:var(--card);border-radius:var(--radius);box-shadow:0 0 0 1px var(--line) inset;padding:22px}.card+.card{margin-top:14px}.card h3{font-size:18px}.muted{color:var(--ink-soft)}.faint{color:var(--ink-faint);font-size:13px}.btn{cursor:pointer;white-space:nowrap;height:46px;transition:transform .16s var(--ease-out), background-color .15s ease, box-shadow .15s ease, opacity .15s ease;border:0;border-radius:14px;justify-content:center;align-items:center;gap:8px;padding:0 20px;font-size:15px;font-weight:600;text-decoration:none;display:inline-flex}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn svg{flex:none;width:18px;height:18px}.btn-primary{background:var(--blue);color:#fff}.btn-outline{color:var(--blue);box-shadow:0 0 0 1.5px var(--blue) inset;background:0 0}.btn-soft{background:var(--paper-2);color:var(--ink)}.btn-ghost{color:var(--ink-soft);background:0 0}.btn-danger{color:var(--danger);background:0 0}.btn-sm{border-radius:10px;height:36px;padding:0 12px;font-size:13.5px}.btn-block{width:100%}@media (hover:hover) and (pointer:fine){.btn-primary:hover:not(:disabled){background:var(--blue-deep)}.btn-outline:hover:not(:disabled){background:var(--blue-soft)}.btn-soft:hover:not(:disabled){background:#e7e5de}.btn-ghost:hover:not(:disabled){background:var(--paper-2);color:var(--ink)}}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.row-end{justify-content:flex-end}.stack{gap:14px;display:grid}.field{gap:6px;display:grid}.field>span{color:var(--ink-soft);font-size:13px;font-weight:600}.input,.select,.textarea{background:var(--paper);width:100%;height:46px;box-shadow:0 0 0 1px var(--line-strong) inset;border:0;border-radius:12px;outline:none;padding:0 14px;transition:box-shadow .15s}.textarea{resize:vertical;height:auto;min-height:140px;padding:12px 14px;line-height:1.6}.input:focus,.select:focus,.textarea:focus{box-shadow:0 0 0 2px var(--blue) inset;background:#fff}.segmented{background:var(--paper-2);border-radius:14px;flex-wrap:wrap;gap:4px;padding:4px;display:inline-flex}.segmented button{cursor:pointer;height:36px;color:var(--ink-soft);background:0 0;border:0;border-radius:10px;padding:0 14px;font-size:13.5px;font-weight:600;transition:background-color .15s,color .15s,box-shadow .15s}.segmented button[aria-pressed=true]{color:var(--ink);box-shadow:0 1px 2px #1c1b1a1f, 0 0 0 1px var(--line) inset;background:#fff}.quick-grid{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.quick{background:var(--card);box-shadow:0 0 0 1px var(--line) inset;cursor:pointer;text-align:left;transition:transform .2s var(--ease-out), box-shadow .2s ease;border:0;border-radius:20px;flex-direction:column;align-items:flex-start;gap:14px;padding:18px;text-decoration:none;display:flex}.quick:active{transform:scale(.98)}@media (hover:hover) and (pointer:fine){.quick:hover{box-shadow:0 0 0 1px var(--line-strong) inset, 0 12px 28px -18px #1c1b1a59;transform:translateY(-2px)}}.quick b{font-size:15px}.quick small{color:var(--ink-faint);margin-top:2px;font-size:12.5px;font-weight:500;display:block}.ico{border-radius:14px;flex:none;place-items:center;width:44px;height:44px;display:grid}.ico svg{width:22px;height:22px}.ico-blue{color:var(--blue);background:#e0eaff}.ico-red{color:var(--c-pdf);background:#fee2e2}.ico-violet{color:var(--c-image);background:#ede9fe}.ico-amber{color:#b45309;background:#fef3c7}.ico-green{color:var(--success);background:#dcfce7}.ico-cyan{color:#0e7490;background:#cffafe}@media (width<=860px){.quick-grid{grid-template-columns:repeat(3,1fr);gap:10px}.quick{text-align:center;align-items:center;padding:14px}.quick small{display:none}.quick b{font-size:13px;font-weight:600}}@media (width<=380px){.quick-grid{grid-template-columns:repeat(2,1fr)}}.drop{text-align:center;cursor:pointer;background:var(--blue-soft);color:var(--blue);transition:background-color .2s ease, border-color .2s ease, transform .2s var(--ease-out);border:2px dashed #b8cbf6;border-radius:22px;place-items:center;gap:10px;padding:34px 20px;display:grid}.drop.is-over{border-color:var(--blue);background:#dce7ff;transform:scale(1.01)}.drop svg{width:28px;height:28px}.drop b{font-size:16px}.drop small{color:var(--ink-soft);font-size:13px}.file-list{gap:8px;margin-top:14px;padding:0;list-style:none;display:grid}.file-item{background:var(--paper);border-radius:14px;align-items:center;gap:12px;padding:10px 10px 10px 12px;display:flex}.file-item .ico{border-radius:11px;width:38px;height:38px}.file-item .ico svg{width:18px;height:18px}.file-meta{flex:1;min-width:0}.file-meta b{white-space:nowrap;text-overflow:ellipsis;font-size:14px;display:block;overflow:hidden}.file-meta small{color:var(--ink-faint);font-size:12.5px}.icon-btn{width:34px;height:34px;color:var(--ink-faint);cursor:pointer;background:0 0;border:0;border-radius:10px;place-items:center;transition:background-color .15s,color .15s;display:grid}.icon-btn:disabled{opacity:.3;cursor:default}.icon-btn svg{width:18px;height:18px}@media (hover:hover) and (pointer:fine){.icon-btn:hover:not(:disabled){color:var(--ink);background:#fff}}.tool-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.tool-card{background:var(--card);box-shadow:0 0 0 1px var(--line) inset;text-align:left;cursor:pointer;transition:transform .2s var(--ease-out), box-shadow .2s ease;border:0;border-radius:20px;align-items:flex-start;gap:14px;padding:18px;display:flex}.tool-card:active{transform:scale(.98)}@media (hover:hover) and (pointer:fine){.tool-card:hover{box-shadow:0 0 0 1px var(--line-strong) inset, 0 12px 28px -18px #1c1b1a59}}.tool-card b{font-size:15px;display:block}.tool-card small{color:var(--ink-faint);margin-top:2px;font-size:13px;line-height:1.45;display:block}@media (width<=980px){.tool-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=560px){.tool-grid{grid-template-columns:1fr}}.back{color:var(--blue);cursor:pointer;background:0 0;border:0;border-radius:10px;align-items:center;gap:6px;margin:22px 0 6px;padding:6px 10px 6px 4px;font-weight:600;display:inline-flex}.back svg{width:18px;height:18px}.conv-group{margin-top:22px}.conv-group h3{align-items:center;gap:10px;margin-bottom:12px;font-size:17px;display:flex}.conv-group h3 .ico{border-radius:10px;width:34px;height:34px}.conv-group h3 .ico svg{width:17px;height:17px}.fmt-pair{align-items:center;gap:6px;display:flex}.fmt{color:#fff;letter-spacing:.02em;border-radius:7px;place-items:center;min-width:46px;height:24px;padding:0 7px;font-size:11px;font-weight:700;display:inline-grid}.thumbs{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px;margin-top:14px;display:grid}.thumb{background:var(--paper);cursor:pointer;text-align:center;border:0;border-radius:12px;padding:8px;transition:box-shadow .15s;position:relative}.thumb canvas,.thumb img{width:100%;height:auto;transition:transform .3s var(--ease-out);background:#fff;border-radius:6px;box-shadow:0 1px 3px #1c1b1a2e}.thumb span{color:var(--ink-soft);margin-top:6px;font-size:12px;font-weight:600;display:block}.thumb[aria-pressed=true]{box-shadow:0 0 0 2px var(--blue) inset;background:var(--blue-soft)}.thumb .thumb-actions{justify-content:center;gap:2px;margin-top:4px;display:flex}.viewer-bar{z-index:5;background:var(--paper);flex-wrap:wrap;align-items:center;gap:10px;padding:10px 0;display:flex;position:sticky;top:0}.viewer-bar .title{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-weight:700;overflow:hidden}.pages{justify-items:center;gap:16px;padding:8px 0 24px;display:grid}.pages canvas,.pages img{width:100%;max-width:860px;height:auto;box-shadow:0 0 0 1px var(--line) , 0 18px 40px -26px #1c1b1a66;background:#fff;border-radius:8px}.text-view{white-space:pre-wrap;box-shadow:0 0 0 1px var(--line) inset;background:#fff;border-radius:16px;max-height:70vh;padding:20px;font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:13.5px;overflow:auto}.progress{background:var(--paper-2);border-radius:999px;height:6px;overflow:hidden}.progress i{background:var(--blue);border-radius:inherit;height:100%;transition:width .2s var(--ease-out);display:block}.notice{background:var(--paper-2);color:var(--ink-soft);border-radius:14px;gap:10px;padding:12px 14px;font-size:14px;display:flex}.notice svg{flex:none;width:18px;height:18px;margin-top:2px}.notice-error{color:#b91c1c;background:#fef2f2}.notice-success{color:#15803d;background:#f0fdf4}.notice-info{background:var(--blue-soft);color:var(--blue-deep)}.toast-wrap{z-index:60;pointer-events:none;gap:8px;width:min(420px,100% - 32px);display:grid;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}@media (width<=860px){.toast-wrap{bottom:calc(92px + env(safe-area-inset-bottom))}}.toast{background:var(--night);color:var(--on-night);animation:toast-in .26s var(--ease-out);border-radius:14px;padding:12px 16px;font-size:14px;font-weight:500;box-shadow:0 16px 40px -16px #00000080}@keyframes toast-in{0%{opacity:0;transform:translateY(10px)scale(.97)}}.spinner{border:2px solid #fff6;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.7s linear infinite spin}.btn-outline .spinner,.btn-soft .spinner{border-color:#2563eb40;border-top-color:var(--blue)}@keyframes spin{to{transform:rotate(360deg)}}.two-col{grid-template-columns:1fr 1fr;align-items:start;gap:14px;display:grid}@media (width<=860px){.two-col{grid-template-columns:1fr}}.qr-preview{background:var(--paper);border-radius:18px;place-items:center;min-height:260px;padding:22px;display:grid}.qr-preview img{width:220px;height:220px;image-rendering:pixelated;border-radius:8px}.camera{aspect-ratio:4/3;background:#000;border-radius:18px;position:relative;overflow:hidden}.camera video{object-fit:cover;width:100%;height:100%}.camera .frame{border-radius:18px;position:absolute;inset:18%;box-shadow:0 0 0 999px #00000059}.camera .scanline{background:var(--scan);height:2px;animation:2.4s ease-in-out infinite alternate cam-scan;position:absolute;top:18%;left:18%;right:18%;box-shadow:0 0 14px 3px #7ee0ff99}@keyframes cam-scan{to{top:82%}}.result-box{word-break:break-word;background:var(--paper);border-radius:14px;padding:14px;font-family:ui-monospace,Consolas,monospace;font-size:14px}.timer-wrap{justify-items:center;gap:18px;padding:10px 0;display:grid}.timer{width:220px;height:220px;position:relative}.timer svg{width:100%;height:100%;transform:rotate(-90deg)}.timer circle{fill:none;stroke-width:12px}.timer .track{stroke:var(--paper-2)}.timer .prog{stroke:var(--blue);stroke-linecap:round;transition:stroke-dashoffset 1s linear,stroke .3s}.timer.is-break .prog{stroke:var(--success)}.timer-label{text-align:center;place-content:center;display:grid;position:absolute;inset:0}.timer-label b{font-family:var(--font-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;font-size:52px;line-height:1}.timer-label small{color:var(--ink-faint);margin-top:6px;font-weight:600}.dots{gap:8px;display:flex}.dots i{background:var(--paper-2);width:10px;height:10px;box-shadow:0 0 0 1px var(--line-strong) inset;border-radius:50%}.dots i.on{background:var(--c-amber);box-shadow:none}.notes{gap:10px;margin-top:14px;display:grid}.note{background:#fffbeb;border-radius:14px;padding:14px 14px 10px;box-shadow:inset 0 0 0 1px #fde68a}.note p{white-space:pre-wrap}.note footer{color:var(--ink-faint);justify-content:space-between;align-items:center;margin-top:6px;font-size:12px;display:flex}.reading{background:var(--paper);white-space:pre-wrap;border-radius:16px;max-height:50vh;padding:18px;font-size:17px;line-height:1.75;overflow:auto}.reading mark{background:#fef08a;border-radius:4px;padding:0 1px}.screen{animation:screen-in .32s var(--ease-out)}@keyframes screen-in{0%{opacity:0;transform:translateY(8px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
