:root{color-scheme:dark;font-family:Inter,"SF Pro Display","Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--bg:#0c111a;--surface:#131a25;--surface2:#1a2330;--surface3:#222d3a;--border:#ffffff13;--border-active:#91e1d154;--ink:#edf0f4;--secondary:#9caab9;--muted:#637386;--mint:#96e6d7;--lilac:#afa6f0;--orange:#efb895;--panel:#101721;--field:#0e151e;--focus:#96e6d7;--shadow:0 30px 100px #02091155;--radius:22px;--speed:280ms;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden;transition:background .4s ease,color .4s ease}body:before{content:'';position:absolute;inset:0 0 auto;height:900px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 62% 36% at 72% 4%,#80c7d010,transparent 90%),radial-gradient(ellipse 42% 38% at -9% 45%,#a79af00c,transparent 90%)}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}a{color:inherit;text-decoration:none}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button:focus,input:focus,textarea:focus,a:focus{outline:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus);outline-offset:3px}button{touch-action:manipulation}button,svg{-webkit-user-select:none;user-select:none}::selection{background:#7ccdb582;color:#0d2124}body,button,input,textarea{font-size:14px}
.app-shell{max-width:1480px;margin:0 auto}.topbar{height:90px;padding:0 clamp(24px,5.2vw,90px);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border-bottom:1px solid var(--border)}.brand{display:inline-flex;align-items:center;gap:13px;width:max-content}.brand-mark{display:grid;grid-template-columns:repeat(2,12px);grid-template-rows:repeat(2,12px);gap:3px;transform:rotate(-7deg)}.brand-mark span{border-radius:4px;background:var(--mint)}.brand-mark span:nth-child(2){background:var(--lilac)}.brand-mark span:nth-child(3){background:var(--orange)}.brand-mark span:nth-child(4){background:var(--ink)}.brand-label{font-weight:770;letter-spacing:-.06em;font-size:19px;line-height:1}.brand-label>span{color:var(--mint)}.brand-label small{display:block;font-size:10px;color:var(--secondary);margin-top:6px;font-weight:500;letter-spacing:.09em}.topbar-actions{display:flex;align-items:center;gap:12px}.privacy-tag{display:flex;align-items:center;gap:10px;color:var(--secondary);border:1px solid var(--border);padding:10px 16px;border-radius:30px;font-size:10px;letter-spacing:.14em;font-weight:750}.pulse,.live-indicator{width:7px;height:7px;display:inline-block;border-radius:50%;background:var(--mint);box-shadow:0 0 13px #96e6d777;flex:none}.icon-button{width:41px;height:41px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--ink);display:grid;place-items:center;transition:transform var(--speed),background var(--speed),border var(--speed)}.icon-button:hover{transform:translateY(-2px);border-color:var(--border-active);background:var(--surface2)}.icon-button svg{width:17px;height:17px}.github-link svg{width:17px;height:17px}
.page-main{padding:0 clamp(24px,5.2vw,90px)}.intro{min-height:430px;padding:66px 0 70px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:32px;align-items:center}.intro-left{position:relative;z-index:1}.eyebrow,.section-index{color:var(--mint);letter-spacing:.18em;font-size:10px;font-weight:800}.eyebrow{display:flex;gap:13px;align-items:center}.eyebrow-line{width:26px;height:1px;background:var(--mint)}.eyebrow-version{border:1px solid var(--border);border-radius:99px;padding:6px 9px;color:var(--muted);letter-spacing:.1em;margin-left:9px}.intro h1{margin:24px 0 20px;letter-spacing:-.09em;line-height:1.12;font-weight:820;font-size:clamp(45px,5.5vw,76px)}.gradient-text{background:linear-gradient(110deg,var(--mint),#a4d9dd 35%,var(--lilac));background-clip:text;-webkit-background-clip:text;color:transparent}.title-dot{color:var(--orange)}.intro-description{font-size:15px;line-height:1.95;color:var(--secondary);max-width:520px;letter-spacing:.02em}.feature-notes{display:flex;flex-wrap:wrap;gap:13px 24px;margin-top:24px;font-size:11px;color:var(--secondary)}.feature-notes span{display:flex;align-items:center;gap:8px}.feature-dot{width:6px;height:6px;display:inline-block;border-radius:50%}.feature-dot.cyan{background:var(--mint)}.feature-dot.lilac{background:var(--lilac)}.feature-dot.orange{background:var(--orange)}.hero-art{height:300px;position:relative;isolation:isolate;display:grid;place-items:center}.halo{position:absolute;width:280px;height:280px;border-radius:50%;filter:blur(45px);opacity:.2}.halo-a{background:#79d7bf;transform:translate(-30px,-10px)}.halo-b{background:#9b7ddd;transform:translate(70px,50px)}.art-frame{position:absolute;width:min(230px,58%);aspect-ratio:1/1;border-radius:18px;border:8px solid #ffffff0a;box-shadow:0 20px 60px #0004}.art-frame-back{transform:rotate(13deg) translate(34px,-5px);background:linear-gradient(135deg,#3b4762,#3d3555)}.art-frame-front{transform:rotate(-9deg) translate(-7px,-5px);background:#161e2b;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);gap:2px;padding:8px;box-shadow:0 25px 70px #05090dbb;overflow:hidden}.art-frame-front span{border-radius:2px;transition:transform .3s}.art-frame-front span:hover{transform:scale(.78)}.art-label{position:absolute;font-size:10px;letter-spacing:.16em;bottom:0;left:5%;color:var(--muted);transform:rotate(-90deg);transform-origin:top left}.art-stamp{position:absolute;top:5px;right:8%;border-radius:50%;border:1px dashed var(--secondary);width:62px;height:62px;display:grid;place-items:center;color:var(--ink);letter-spacing:-.08em;font-size:15px;font-weight:800;transform:rotate(12deg)}.art-stamp span{color:var(--mint)}
.workbench{border:1px solid var(--border);border-radius:28px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden}.workbench-head{min-height:110px;padding:28px 35px 20px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.workbench-head .section-index{margin:0 0 8px}.workbench-head h2,.more-info h2{font-size:27px;letter-spacing:-.05em;margin:0}.workbench-version{color:var(--muted);font-size:10px;letter-spacing:.14em;display:flex;align-items:center;gap:8px}.tiny-square{width:5px;height:5px;background:var(--mint);transform:rotate(45deg)}.workspace-tabs{position:relative;display:flex;max-width:410px;height:54px;padding:5px;margin:0 35px 26px;background:var(--surface2);border:1px solid var(--border);border-radius:15px;isolation:isolate}.workspace-tab{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:9px;flex:1;border:0;background:transparent;color:var(--secondary);font-weight:670;border-radius:11px;transition:color .25s var(--ease)}.workspace-tab.is-current{color:var(--ink)}.tab-symbol{font-size:16px;color:var(--mint)}.tab-glider{position:absolute;z-index:0;left:5px;top:5px;bottom:5px;width:calc(50% - 5px);border-radius:10px;background:var(--surface3);box-shadow:0 2px 12px #0003;transition:transform .42s cubic-bezier(.2,.9,.2,1)}.workspace-tabs[data-active=decode] .tab-glider{transform:translateX(100%)}.mode-panel{animation:panel-in .4s var(--ease) both}.mode-panel[hidden],.source-input[hidden],.password-fields[hidden],.decode-result-stage [hidden],.result-canvas[hidden]{display:none!important}@keyframes panel-in{from{opacity:.35;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.workbench-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);border-top:1px solid var(--border)}.setup-column{padding:32px 35px 34px;border-right:1px solid var(--border);min-width:0}.panel-section{margin-bottom:33px}.section-topline{display:flex;align-items:center;gap:12px;margin-bottom:19px}.step-no{color:var(--mint);font-size:10px;letter-spacing:.1em;font-weight:800}.section-topline h3{font-size:15px;margin:0;font-weight:700;letter-spacing:-.015em}.subtle-label{font-size:9px;color:var(--muted);letter-spacing:.16em;margin-left:auto;font-weight:700}.field-label{display:block;margin-bottom:11px;font-size:12px;font-weight:640;color:var(--secondary)}.field-label span{font-size:11px;font-weight:450;color:var(--muted);float:right}.choice-switch{position:relative;display:flex;gap:3px;padding:4px;border:1px solid var(--border);background:var(--field);border-radius:13px;margin-bottom:19px;isolation:isolate}.choice-button{position:relative;z-index:1;flex:1;height:39px;border:0;background:transparent;color:var(--secondary);font-weight:660;transition:color .3s}.choice-button.is-current{color:var(--ink)}.choice-track{position:absolute;z-index:0;left:4px;top:4px;bottom:4px;width:calc(50% - 6px);border-radius:9px;background:var(--surface3);transition:transform .36s var(--ease)}.choice-switch[data-active=file] .choice-track{transform:translateX(calc(100% + 4px))}.text-area-wrap{position:relative}.text-area-wrap textarea{background:var(--field);border:1px solid var(--border);border-radius:15px;padding:16px 16px 32px;color:var(--ink);width:100%;resize:vertical;min-height:143px;max-height:400px;line-height:1.75;transition:border-color .25s,box-shadow .25s}.text-area-wrap textarea:focus{border-color:var(--border-active);box-shadow:0 0 0 3px #87dcba0a}.text-area-wrap textarea::placeholder,input::placeholder{color:var(--muted)}.char-count{position:absolute;right:13px;bottom:12px;font-size:10px;color:var(--muted)}.sample-row{margin-top:9px;display:flex;justify-content:flex-end;align-items:center;gap:8px;font-size:11px;color:var(--muted)}.text-link{border:0;background:transparent;color:var(--mint);padding:5px;font-size:11px}.text-link:hover{text-decoration:underline}.palette-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.palette-card{position:relative;min-width:0;padding:8px 8px 10px;border-radius:12px;border:1px solid var(--border);background:var(--field);text-align:left;color:var(--secondary);font-size:11px;font-weight:650;transition:border .2s,transform .3s var(--ease),background .2s}.palette-card:hover{transform:translateY(-2px)}.palette-card.is-selected{background:var(--surface2);border-color:var(--mint);color:var(--ink)}.palette-preview{display:block;height:56px;margin-bottom:10px;border-radius:7px;background-size:100% 100%}.palette-spectrum{background:conic-gradient(from 20deg at 40% 40%,#92dece,#9e85cf,#db968e,#ffe6ad,#7bd3ba,#557dc3,#92dece)}.palette-aurora{background:linear-gradient(130deg,#182646,#276478,#37918a,#7eb69d,#b69dd1,#5b569a)}.palette-sunset{background:linear-gradient(130deg,#422340,#944051,#de865e,#f8cf96,#a66f8b)}.palette-graphite{background:linear-gradient(130deg,#101820,#505960,#909aa0,#edf1f1)}.palette-check{position:absolute;top:12px;right:12px;width:17px;height:17px;border-radius:50%;background:var(--mint);color:#0c2020;display:none;place-items:center;font-size:12px}.palette-card.is-selected .palette-check{display:grid}.size-control{margin-top:24px;display:flex;justify-content:space-between;align-items:center;gap:16px}.size-control .field-label{margin:0 0 5px}.size-help{font-size:11px;color:var(--muted)}.range-control{display:flex;align-items:center;gap:10px;min-width:160px}.range-control input{width:100%;accent-color:var(--mint);cursor:pointer}.range-control output{color:var(--mint);font-size:12px;font-weight:750;min-width:27px;text-align:right}.setting-toggle{display:flex;align-items:center;gap:15px;justify-content:space-between;cursor:pointer;border:1px solid var(--border);background:var(--field);border-radius:14px;padding:15px}.setting-toggle input{position:absolute;opacity:0;width:1px;height:1px}.setting-toggle:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px}.toggle-description{display:flex;flex-direction:column;gap:5px;min-width:0}.toggle-description strong{font-size:12px;font-weight:680}.toggle-description small{font-size:10px;color:var(--muted);line-height:1.5}.secure-flag{font-weight:800;font-size:9px;letter-spacing:.04em;color:var(--mint);margin-left:4px}.switch-ui{width:41px;height:24px;min-width:41px;border-radius:18px;background:var(--surface3);border:1px solid var(--border);position:relative;transition:background .25s,border .25s}.switch-ui:after{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:var(--secondary);transition:transform .25s var(--ease),background .25s}.setting-toggle input:checked+.switch-ui{background:var(--mint);border-color:var(--mint)}.setting-toggle input:checked+.switch-ui:after{transform:translateX(17px);background:#132b2a}.compact-toggle{margin-top:10px}.password-fields{padding:14px 6px 5px;animation:panel-in .3s both}.password-box{position:relative}.password-box input{width:100%;height:48px;border-radius:12px;padding:0 72px 0 14px;border:1px solid var(--border);background:var(--field);color:var(--ink)}.password-box input:focus{border-color:var(--border-active)}.reveal-button{position:absolute;right:9px;top:7px;height:34px;padding:0 11px;border-radius:8px;border:0;background:var(--surface2);color:var(--secondary);font-size:11px}.reveal-button:hover{color:var(--ink)}.security-help{color:var(--muted);font-size:11px;line-height:1.7;margin:9px 0 0}.primary-action{height:54px;width:100%;border:0;border-radius:14px;background:var(--mint);color:#112927;font-size:14px;font-weight:800;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:background .25s,box-shadow .25s,transform .3s var(--ease)}.primary-action:hover:not(:disabled){background:#aef1e4;transform:translateY(-2px);box-shadow:0 12px 30px #9ce9d121}.primary-action:active{transform:scale(.985)}.button-gleam{position:absolute;width:180px;height:100px;background:#fff5;filter:blur(20px);transform:translate(-220px,0) rotate(45deg);transition:transform .8s}.primary-action:hover .button-gleam{transform:translate(260px,0) rotate(45deg)}.button-arrow{position:absolute;right:20px;font-size:20px;font-weight:400}.local-footnote{text-align:center;font-size:10px;color:var(--muted);margin:13px 0 0;line-height:1.6}
.preview-column{padding:23px 25px 26px;display:flex;flex-direction:column;min-width:0}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 3px 17px;color:var(--muted);font-size:10px;letter-spacing:.13em;font-weight:780}.preview-toolbar>div{display:flex;align-items:center;gap:9px}.preview-toolbar #preview-mode-label{text-align:right;font-size:10px;letter-spacing:0;color:var(--secondary)}.preview-stage{border:1px solid var(--border);background:var(--field);min-height:340px;flex:1;position:relative;display:grid;place-items:center;border-radius:18px;overflow:hidden;isolation:isolate}.stage-grid{position:absolute;inset:0;z-index:-1;opacity:.24;background-image:linear-gradient(var(--secondary) 1px,transparent 1px),linear-gradient(90deg,var(--secondary) 1px,transparent 1px);background-size:22px 22px;mask-image:radial-gradient(circle at center,#000 10%,transparent 80%)}.preview-placeholder{text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:30px}.placeholder-art{width:135px;height:135px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:7px;transform:rotate(-12deg);margin:7px 0 26px;filter:drop-shadow(0 15px 15px #0003)}.placeholder-art span{border-radius:7px;background:#6ccab7}.placeholder-art span:nth-child(2),.placeholder-art span:nth-child(7){background:#6c819f}.placeholder-art span:nth-child(3),.placeholder-art span:nth-child(6){background:#a796d1}.placeholder-art span:nth-child(4),.placeholder-art span:nth-child(9){background:#d5a18e}.placeholder-art span:nth-child(5){background:#d2e6d5}.preview-placeholder strong{font-size:16px;letter-spacing:-.03em}.preview-placeholder p{color:var(--muted);font-size:12px;line-height:1.8;margin:9px 0}.result-canvas{display:block;image-rendering:pixelated;max-width:calc(100% - 32px);max-height:calc(100% - 32px);width:auto;height:auto;object-fit:contain;box-shadow:0 15px 40px #0006;animation:reveal-canvas .5s var(--ease) both}@keyframes reveal-canvas{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}.preview-footer{display:grid;grid-template-columns:repeat(3,1fr);padding:21px 0;gap:10px}.preview-stat{display:flex;flex-direction:column;gap:7px;text-align:center;border-right:1px solid var(--border)}.preview-stat:last-child{border:0}.preview-stat span{font-size:10px;color:var(--muted)}.preview-stat strong{font-size:12px;color:var(--ink);font-weight:690;overflow-wrap:anywhere}.output-actions{display:flex;gap:9px}.secondary-action{height:46px;flex:1;border:1px solid var(--border-active);border-radius:13px;background:var(--surface2);color:var(--ink);font-size:12px;font-weight:730;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .22s,transform .22s}.secondary-action:hover:not(:disabled){transform:translateY(-1px);background:var(--surface3)}.secondary-action span{font-size:19px;color:var(--mint)}.quiet-action{height:46px;min-width:50px;padding:0 15px;border:1px solid var(--border);border-radius:13px;background:var(--surface);color:var(--secondary);font-size:20px;transition:background .2s,color .2s}.quiet-action:hover:not(:disabled){background:var(--surface2);color:var(--ink)}.aside-tip{border-top:1px solid var(--border);margin:18px 0 0;padding:15px 4px 0;color:var(--muted);font-size:10px;line-height:1.8}.aside-tip span{color:var(--orange);font-size:13px;margin-right:4px}
.dropzone{min-height:190px;border:1px dashed #8bafaa65;background:linear-gradient(155deg,#9fe5d509,transparent 90%),var(--field);border-radius:16px;position:relative;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:9px;text-align:center;padding:28px 16px;transition:background .2s,border-color .2s,transform .2s;cursor:pointer}.dropzone:hover,.dropzone.is-dragging,.dropzone:focus-within{border-color:var(--mint);background:linear-gradient(140deg,#9fe5d51b,transparent 90%),var(--field);transform:translateY(-1px)}.sr-file{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.upload-glyph{display:grid;place-items:center;width:47px;height:47px;border-radius:15px;background:var(--surface2);font-size:29px;font-weight:200;color:var(--mint)}.dropzone strong{font-size:13px;max-width:100%;overflow-wrap:anywhere}.dropzone>span:last-child{font-size:11px;color:var(--muted);line-height:1.5}.decode-intro{font-size:12px;line-height:1.85;color:var(--secondary);margin:-4px 0 20px}.decode-dropzone{min-height:240px}.image-upload-glyph{font-size:27px}.decode-column{display:flex;flex-direction:column}.decode-column>.panel-section:nth-child(2){margin-bottom:32px}.decode-column .local-footnote{margin-top:14px}.decode-result-stage{min-height:420px;border:1px solid var(--border);border-radius:18px;background:var(--field);display:flex;align-items:center;justify-content:center;flex:1;padding:25px;overflow:hidden}.decode-placeholder{text-align:center}.big-lock{display:block;font-size:75px;line-height:1;color:var(--lilac);margin-bottom:15px;font-weight:200}.decode-placeholder h3{font-size:17px;margin:0 0 8px}.decode-placeholder p{font-size:12px;color:var(--muted);line-height:1.8}.decode-result-stage #decode-result{width:100%;align-self:stretch;animation:panel-in .45s both}.recovered-header{display:flex;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.1em;color:var(--mint);font-weight:700}.recovered-header span:last-child{color:var(--secondary);letter-spacing:0}.decode-result-stage h3{font-size:18px;margin:19px 0 7px;overflow-wrap:anywhere}.decode-result-stage #recovered-meta{font-size:11px;color:var(--muted);margin:0 0 20px;overflow-wrap:anywhere}.decode-result-stage textarea{width:100%;min-height:210px;max-height:420px;resize:vertical;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:11px;padding:15px;font-size:12px;line-height:1.8}.recovered-file-card{display:flex;gap:13px;align-items:center;padding:16px;border-radius:12px;background:var(--surface2);border:1px solid var(--border)}.recovered-file-card>span{font-size:28px;color:var(--mint)}.recovered-file-card>div{min-width:0;display:flex;flex-direction:column;gap:6px}.recovered-file-card strong{font-size:13px;overflow-wrap:anywhere}.recovered-file-card small{color:var(--muted);font-size:11px}.recovery-actions{display:flex;gap:10px;margin-top:16px}.copy-action{font-size:12px}
.more-info{padding:100px 0 110px;display:grid;grid-template-columns: .72fr 1.28fr;gap:30px}.more-info h2{font-size:clamp(31px,3.4vw,47px);line-height:1.35;letter-spacing:-.065em;margin:17px 0}.info-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.info-cards article{border:1px solid var(--border);border-radius:16px;padding:18px;background:var(--surface)}.info-cards article>span{font-size:21px;color:var(--mint)}.info-cards article:nth-child(2)>span{color:var(--lilac)}.info-cards article:nth-child(3)>span{color:var(--orange)}.info-cards h3{font-size:13px;margin:19px 0 9px;letter-spacing:-.025em}.info-cards p{font-size:11px;line-height:1.8;color:var(--secondary);margin:0}.footer{padding:28px clamp(24px,5.2vw,90px) 45px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--border);color:var(--muted);font-size:10px;letter-spacing:.1em}.footer-brand{color:var(--ink);font-size:12px;letter-spacing:-.025em;font-weight:800}.footer-brand span{color:var(--mint)}.footer p{margin:0}.toast-region{position:fixed;z-index:50;bottom:max(30px,env(safe-area-inset-bottom) + 18px);left:50%;transform:translateX(-50%);width:min(480px,calc(100vw - 32px));display:flex;flex-direction:column;gap:9px;pointer-events:none}.toast{pointer-events:auto;background:var(--surface3);border:1px solid var(--border-active);padding:14px 19px;border-radius:14px;box-shadow:0 12px 35px #0008;font-size:12px;line-height:1.6;color:var(--ink);animation:toast-in .3s var(--ease)}.toast.is-error{border-color:#e59c9c88}.toast.is-leaving{opacity:0;transform:translateY(12px);transition:all .25s ease}@keyframes toast-in{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.busy-overlay{position:fixed;inset:0;z-index:40;background:#05080c90;backdrop-filter:blur(5px);display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s}.busy-overlay.is-visible{opacity:1;visibility:visible;pointer-events:all}.busy-box{background:var(--surface);border:1px solid var(--border);border-radius:22px;min-width:min(310px,80vw);padding:38px;display:flex;align-items:center;flex-direction:column;gap:12px;box-shadow:var(--shadow)}.busy-box strong{font-size:16px}.busy-box>span:last-child{font-size:11px;color:var(--secondary)}.busy-spinner{width:38px;height:38px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--mint);animation:spin .65s linear infinite;margin-bottom:10px}@keyframes spin{to{transform:rotate(360deg)}}
body[data-theme=light]{color-scheme:light;--bg:#f2f5f4;--surface:#fff;--surface2:#e6eeeb;--surface3:#d9e7e3;--border:#15322b16;--border-active:#167e7281;--ink:#162c32;--secondary:#546973;--muted:#73868e;--mint:#217d72;--lilac:#6d62ab;--orange:#ae6d4e;--panel:#fbfdfc;--field:#f1f6f5;--focus:#278577;--shadow:0 24px 65px #233a3630}body[data-theme=light] .primary-action{background:#278577;color:white}body[data-theme=light] .primary-action:hover{background:#1c6f64}body[data-theme=light] .setting-toggle input:checked+.switch-ui{background:#278577}body[data-theme=light] .setting-toggle input:checked+.switch-ui:after{background:#fff}body[data-theme=light] .brand-mark span:nth-child(4){background:#243b46}body[data-theme=light] .art-frame-front{background:#203240}body[data-theme=light] .art-frame-back{border-color:#667c8b11}body[data-theme=light] .art-stamp{border-color:var(--muted)}body[data-theme=light] .palette-card.is-selected{border-color:var(--mint)}body[data-theme=light] .hero-art .halo{opacity:.15}body[data-theme=light] .pulse,body[data-theme=light] .live-indicator{box-shadow:0 0 12px #27857744}body[data-theme=light] .eyebrow{color:#267c70}body[data-theme=light] .preview-placeholder .placeholder-art{filter:drop-shadow(0 15px 15px #0002)}
@media (min-width:1100px){.preview-column{position:relative}.preview-stage{min-height:410px}.workbench-grid{align-items:stretch}}
@media (max-width:1080px){.intro{grid-template-columns:1fr .7fr;min-height:400px}.hero-art{height:250px}.workbench-grid{grid-template-columns: minmax(0,1fr) minmax(0,.86fr)}.setup-column{padding:25px 23px}.preview-column{padding:23px 18px}.palette-grid{gap:6px}.palette-card{padding:6px}.palette-preview{height:42px}.info-cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:800px){.topbar{height:72px}.intro{grid-template-columns:1fr;min-height:unset;padding:50px 0 42px}.intro h1{font-size:clamp(47px,8vw,69px)}.intro-description{max-width:650px}.hero-art{display:none}.workbench-grid{grid-template-columns:1fr}.setup-column{border-right:0;border-bottom:1px solid var(--border);padding:29px 30px}.preview-column{padding:25px 30px 28px}.preview-stage{min-height:350px}.workbench-head{padding:25px 30px 20px}.workspace-tabs{margin-left:30px}.more-info{grid-template-columns:1fr;padding:65px 0;gap:25px}.info-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.info-cards article{padding:16px}.info-cards h3{margin-top:13px}}
@media (max-width:540px){.topbar{height:64px;padding:0 19px}.brand-label{font-size:17px}.brand-mark{grid-template-columns:repeat(2,10px);grid-template-rows:repeat(2,10px)}.topbar-actions{gap:7px}.privacy-tag{display:none}.icon-button{width:36px;height:36px}.page-main{padding:0 14px}.intro{padding:43px 9px 39px}.intro h1{font-size:clamp(40px,12vw,56px);margin:20px 0 15px}.intro-description{font-size:13px;line-height:1.9}.feature-notes{gap:10px 15px;margin-top:18px;font-size:10px}.eyebrow{font-size:9px;gap:10px}.eyebrow-version{font-size:8px;margin-left:0}.workbench{border-radius:20px}.workbench-head{padding:23px 19px 15px;min-height:auto}.workbench-head h2{font-size:22px}.workbench-version{display:none}.workspace-tabs{margin:5px 18px 18px;max-width:none;height:51px}.workspace-tab{font-size:12px}.setup-column{padding:24px 19px 28px}.preview-column{padding:22px 18px 26px}.preview-stage{min-height:300px}.palette-grid{gap:6px}.palette-card{border-radius:9px;padding:6px 5px 9px;font-size:10px}.palette-preview{height:44px}.palette-check{top:9px;right:7px;width:14px;height:14px;font-size:10px}.size-control{gap:10px}.size-help{font-size:10px}.range-control{min-width:145px}.setting-toggle{padding:14px 12px}.preview-footer{padding:18px 0}.decode-result-stage{min-height:340px;padding:17px}.more-info{padding:55px 3px 65px}.more-info h2{font-size:35px}.info-cards{grid-template-columns:1fr}.info-cards article{display:grid;grid-template-columns:40px 1fr;align-items:start;padding:18px}.info-cards article>span{grid-row:span 2}.info-cards h3{margin:0 0 7px}.footer{padding:24px 19px 32px;flex-wrap:wrap}.footer p{display:none}.footer>span{font-size:9px}}
@media (max-width:355px){.palette-grid{grid-template-columns:repeat(2,1fr)}.palette-preview{height:30px}.range-control{min-width:118px}.intro h1{font-size:39px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}} 
.source-input:not([hidden]){animation:panel-in .3s var(--ease) both}
.result-canvas{max-height:min(420px,62vw)}
@media(max-width:800px){.result-canvas{max-height:360px}}
@media(max-width:540px){.result-canvas{max-height:280px}}


/* WinUI 3-inspired Fluent surfaces · Mica background + acrylic panels */
:root {
  font-family: "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  color-scheme:dark;
  --bg:#161b26; --surface:rgba(37,43,55,.78); --surface2:rgba(52,59,74,.73);
  --surface3:rgba(65,72,88,.94); --border:rgba(255,255,255,.085);
  --border-active:rgba(147,199,255,.45); --ink:#f4f5f8; --secondary:#bac2d1;
  --muted:#8d98ad; --mint:#83bbff; --lilac:#a9baff; --orange:#dab8ef;
  --panel:rgba(25,31,43,.42); --field:rgba(18,23,34,.38);
  --focus:#a0ceff; --shadow:0 18px 58px rgba(3,7,17,.32);
  --radius:14px; --speed:210ms; --ease:cubic-bezier(.2,0,0,1);
}
body[data-theme=light] {
  --bg:#eaeef7; --surface:rgba(255,255,255,.76); --surface2:rgba(250,252,255,.78);
  --surface3:rgba(247,249,253,.96); --border:rgba(25,45,78,.12);
  --border-active:rgba(0,95,180,.45); --ink:#202938; --secondary:#46566d;
  --muted:#66768b; --mint:#0067c0; --lilac:#535da9; --orange:#aa527d;
  --panel:rgba(255,255,255,.42); --field:rgba(255,255,255,.66);
  --focus:#0067c0; --shadow:0 18px 58px rgba(70,88,123,.12);
}
html {scroll-padding-top:84px;}
body {
  min-height:100vh;
  background:var(--bg);
  background-image:radial-gradient(ellipse 75% 65% at 9% 2%,rgba(90,112,151,.23),transparent 84%),
                   radial-gradient(ellipse 62% 64% at 96% 96%,rgba(84,104,153,.16),transparent 85%),
                   linear-gradient(140deg,#141a25,#1b2230 56%,#171c28);
  background-attachment:fixed;
}
body[data-theme=light] {
  background-image:radial-gradient(ellipse 70% 65% at 12% 4%,rgba(163,188,233,.48),transparent 85%),
                   radial-gradient(ellipse 55% 60% at 91% 90%,rgba(197,181,232,.29),transparent 89%),
                   linear-gradient(135deg,#e9eff9,#edf1f8 55%,#f1eff8);
}
body:before{display:none}
body,button,input,textarea{font-size:14px}
button,input,textarea,a,label,* {-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--focus);outline-offset:3px;
}
button:active:not(:disabled){transform:scale(.985);filter:brightness(.96)}
.topbar {
  height:70px;
  background:rgba(23,29,41,.69);
  backdrop-filter:blur(34px) saturate(135%);
  -webkit-backdrop-filter:blur(34px) saturate(135%);
  border-bottom:1px solid var(--border);
}
body[data-theme=light] .topbar{background:rgba(246,249,255,.68)}
.brand-mark{transform:none}
.brand-mark span{border-radius:3px}
.brand-mark span:nth-child(1){background:#82bdff}
.brand-mark span:nth-child(2){background:#bbcaff}
.brand-mark span:nth-child(3){background:#7097cf}
.brand-mark span:nth-child(4){background:#91b8f2}
.brand-label>span{color:var(--ink)}
.brand-label small{letter-spacing:.015em}
.icon-button{border-radius:10px;background:rgba(255,255,255,.065)}
body[data-theme=light] .icon-button{background:rgba(255,255,255,.58)}
.privacy-tag{letter-spacing:0;font-weight:600;border-radius:8px}
.intro{display:block;min-height:unset;padding:48px 0 33px}
.intro-left{max-width:800px}
.intro h1{font-size:clamp(35px,4.7vw,56px);letter-spacing:-.045em;line-height:1.17;margin:14px 0 12px;font-weight:690}
.intro-description{max-width:660px;font-size:14px;line-height:1.75;color:var(--secondary)}
.eyebrow{font-size:10px;letter-spacing:.08em;color:var(--mint)}
.gradient-text{background:none;-webkit-text-fill-color:initial;color:var(--mint)}
.workbench {
  border:1px solid rgba(255,255,255,.10);
  background:rgba(30,36,49,.58);
  -webkit-backdrop-filter:blur(30px) saturate(135%);
  backdrop-filter:blur(30px) saturate(135%);
  box-shadow:var(--shadow);
  border-radius:16px;
}
body[data-theme=light] .workbench{background:rgba(255,255,255,.57);border-color:rgba(255,255,255,.86)}
.workbench-head{padding:22px 27px 10px;min-height:unset}
.workbench-head h2{font-size:21px;letter-spacing:-.03em}
.section-index{font-size:10px;letter-spacing:.06em;color:var(--muted)}
.workbench-version{letter-spacing:0}
.workspace-tabs{border-radius:10px;max-width:326px;height:43px;margin:5px 27px 18px;background:rgba(10,15,24,.38)}
body[data-theme=light] .workspace-tabs{background:rgba(23,48,83,.10)}
.tab-glider{border-radius:8px;background:rgba(255,255,255,.13);box-shadow:0 1px 4px rgba(0,0,0,.09)}
body[data-theme=light] .tab-glider{background:rgba(255,255,255,.85)}
.workspace-tab{font-size:12px;letter-spacing:0}
.workbench-grid{border-top:1px solid var(--border)}
.setup-column{background:rgba(18,24,35,.13)}
.preview-column{background:rgba(16,22,32,.16)}
body[data-theme=light] .setup-column,body[data-theme=light] .preview-column{background:rgba(255,255,255,.04)}
.panel-section{border-color:var(--border)}
.section-topline h3{font-size:15px;letter-spacing:0}
.step-no{color:var(--muted)}
.subtle-label{font-size:10px;letter-spacing:.03em;color:var(--muted)}
.choice-switch{border-radius:9px;background:rgba(0,0,0,.17)}
body[data-theme=light] .choice-switch{background:rgba(25,56,91,.08)}
.choice-track{border-radius:8px;background:var(--surface3)}
.choice-button{font-size:12px}
.palette-card{border-radius:10px;background:var(--field);transition:background .18s,border-color .18s,transform .18s}
.palette-card.is-selected{border:2px solid var(--mint);background:var(--surface2)}
.palette-preview{border-radius:7px}
textarea,input[type=password],.password-box,.text-area-wrap{border-radius:9px}
textarea:focus,input:focus{border-color:var(--mint)}
.field-label{color:var(--secondary)}
.setting-toggle{border-radius:10px;background:var(--field)}
.switch-ui{transition:background .18s ease}
.setting-toggle input:checked+.switch-ui{background:var(--mint)}
.setting-toggle input:checked+.switch-ui:after{background:#102841}
.primary-action {
  background:var(--mint);color:#0b2034;border-radius:9px;
  box-shadow:inset 0 1px 0 #ffffff65,0 3px 9px #00000016;
  transition:background .18s ease,box-shadow .18s ease,transform .18s ease;
}
.primary-action:hover:not(:disabled){background:#b0d6ff;box-shadow:inset 0 1px 0 #ffffff85,0 6px 14px #00000024}
body[data-theme=light] .primary-action{background:#0067c0;color:white}
body[data-theme=light] .primary-action:hover:not(:disabled){background:#125fa5}
.secondary-action,.quiet-action{border-radius:9px;background:rgba(255,255,255,.055);transition:background .18s ease,transform .18s ease}
body[data-theme=light] .secondary-action,body[data-theme=light] .quiet-action{background:rgba(255,255,255,.72)}
.secondary-action:hover:not(:disabled),.quiet-action:hover:not(:disabled){background:var(--surface3)}
.preview-stage,.decode-result-stage {
  border-radius:12px;
  background:rgba(10,15,25,.21);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
body[data-theme=light] .preview-stage,body[data-theme=light] .decode-result-stage{background:rgba(239,244,252,.44)}
.preview-toolbar{letter-spacing:.015em}
.preview-stage{min-height:340px}
.preview-placeholder strong,.decode-placeholder h3{font-weight:600}
.preview-placeholder p,.decode-placeholder p{line-height:1.65}
.dropzone{border-radius:12px}
.toast{border-radius:10px;background:rgba(48,56,73,.93);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);box-shadow:0 12px 24px #080b1440}
body[data-theme=light] .toast{background:rgba(252,253,255,.94)}
.busy-overlay{background:rgba(5,10,19,.38);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.busy-box{border-radius:14px;background:rgba(41,49,65,.92);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}
body[data-theme=light] .busy-box{background:rgba(253,254,255,.92)}
.footer{margin-top:55px;letter-spacing:0}
@media(max-width:800px){.intro{padding:40px 0 28px}.workbench-grid{grid-template-columns:1fr}.preview-stage{min-height:310px}}
@media(max-width:540px){
  .topbar{height:60px;padding:0 16px}
  .page-main{padding:0 12px}.intro{padding:34px 6px 26px}
  .intro h1{font-size:clamp(30px,8.5vw,42px);line-height:1.22;margin:13px 0}
  .intro-description{font-size:12px;line-height:1.8}
  .workbench{border-radius:13px}.workbench-head{padding:21px 17px 12px}
  .workspace-tabs{margin:5px 17px 15px;max-width:none;height:46px}
  .setup-column{padding:22px 17px 25px}.preview-column{padding:20px 17px 22px}
  .size-control{flex-wrap:wrap}.range-control{width:100%}
  .preview-stage{min-height:265px}.footer{margin-top:32px}
}
@media(prefers-reduced-transparency:reduce){
  .topbar,.workbench,.busy-box,.toast{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--surface3)}
}
@media(prefers-reduced-motion:reduce){.topbar,.workbench,.busy-box,.toast{scroll-behavior:auto}}