[hidden]{display:none!important}main{min-height:calc(100vh - 56px)}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}input,textarea{min-width:0;border:1px solid var(--hairline);border-radius:8px;background:var(--canvas);color:var(--ink);font-size:14px;padding:12px 14px}textarea{display:block;resize:vertical;width:100%;font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}input::placeholder,textarea::placeholder{color:var(--ink-tertiary)}:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.local-status{display:inline-flex;align-items:center;gap:10px;color:var(--ink-subtle);font-size:12px}nav [aria-current=page]{color:var(--ink)}.encoder-hero{padding:80px 0 64px}.hero-copy h1{font-size:72px}.hero-copy p{font-size:18px;max-width:660px}.signal-demo{min-height:300px}.code-demo{display:grid;justify-items:center;gap:8px;margin:20px 0}.demo-source{font:20px ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--ink-muted)}.demo-source span{color:var(--ink-tertiary);font-size:13px;margin-left:12px}.demo-arrow{color:var(--ink-tertiary)}.code-demo strong{font:46px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:500;letter-spacing:-2px}.signal-demo>p{margin:0;color:var(--ink-subtle);font-size:13px;line-height:1.6;text-align:center}.workspace{padding-bottom:64px}.workspace-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.tabs{display:flex;gap:8px}.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.feature-card h2{font-size:22px;line-height:1.25;font-weight:500;margin:0 0 24px}.input-panel,.result-panel{min-width:0;padding:28px}.drop-zone{border:1px dashed var(--hairline-strong);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:230px;padding:24px;text-align:center;transition:background .15s,border-color .15s}.drop-zone.drag{border-color:var(--ink);background:var(--surface-2)}.drop-zone svg{color:var(--ink-subtle)}.drop-zone p{font-size:15px;line-height:1.6;color:var(--ink-muted);overflow-wrap:anywhere;margin:16px 0 20px}.drop-zone p span{color:var(--ink-subtle);font-size:13px}.field-label{display:block;color:var(--ink-muted);font-size:13px;margin-bottom:10px}.password-block{margin-top:28px}.password-field{display:flex;gap:8px}.password-field input{flex:1;width:100%}.password-tools{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px}.text-button{padding:0;border:0;background:none;color:var(--ink-muted);font-size:12px;line-height:1.5;text-decoration:underline;text-underline-offset:4px}.text-button:hover{color:var(--ink)}.hint{color:var(--ink-subtle);font-size:12px;line-height:1.6;margin:14px 0 0}.run-actions{display:flex;gap:10px;margin-top:24px}.operation{margin-top:24px;min-height:40px}.stage-head{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink-subtle);line-height:1.5}progress{display:block;appearance:none;width:100%;height:4px;margin-top:12px;accent-color:var(--ink)}progress::-webkit-progress-bar{background:var(--hairline);border-radius:3px}progress::-webkit-progress-value{background:var(--ink);border-radius:3px;transition:width .15s}#error{color:#f29c9c;font-size:13px;line-height:1.6;border-left:2px solid #f29c9c;padding-left:12px;margin:18px 0 0}.result-panel{display:flex;flex-direction:column}.result-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.result-heading h2{margin:0}.result-heading>span{font-size:12px;color:var(--ink-muted)}.result-empty{display:flex;flex:1;min-height:400px;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:var(--ink-subtle);gap:10px}.result-empty p{font-size:15px;color:var(--ink-muted);margin:8px 0 0}.result-empty>span{font-size:12px}.cipher-mark{display:flex;align-items:center;gap:22px}.cipher-mark>span{border:1px solid var(--hairline);border-radius:6px;padding:8px;color:var(--ink-tertiary);font:13px ui-monospace,monospace}.cipher-mark svg{color:var(--ink-subtle)}body[data-busy=true] .cipher-mark>span{animation:packet 1.4s ease-in-out infinite}body[data-busy=true] .cipher-mark>span:last-child{animation-delay:.5s}body[data-busy=true] .cipher-mark svg{animation:pulse 1.4s ease-in-out infinite}.local-note{border-top:1px solid var(--hairline);padding-top:18px;margin:24px 0 0;color:var(--ink-tertiary);font-size:12px;line-height:1.6}#result-content{flex:1;margin-top:28px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;margin:0 0 24px}.stats dt{font-size:12px;color:var(--ink-subtle);margin-bottom:6px}.stats dd{margin:0;font-size:18px;color:var(--ink);overflow-wrap:anywhere}.stats small{font-size:12px;color:var(--ink-subtle)}#output{height:180px}#encoded-input{height:178px}.text-file-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}.text-file-row>span{max-width:230px;font-size:12px;color:var(--ink-subtle);line-height:1.5}.file-caption{font-size:12px;color:var(--ink-muted);overflow-wrap:anywhere;margin:12px 0 0}.result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.restored-file{display:flex;min-height:200px;align-items:center;justify-content:center;flex-direction:column;gap:16px;text-align:center;padding:24px;border:1px solid var(--hairline);border-radius:8px}.restored-file svg{color:var(--ink-subtle)}.restored-file strong{font-size:16px;font-weight:500;overflow-wrap:anywhere}.restored-file span{font-size:12px;color:var(--ink-subtle)}.notes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-bottom:72px}.notes-grid h2{font-size:20px;margin-bottom:14px}.notes-grid p{margin:0;font-size:13px;line-height:1.7;color:var(--ink-subtle)}.notes-grid code{color:var(--ink-muted);font-size:12px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:30;padding:13px 20px;border:1px solid var(--hairline-strong);border-radius:8px;background:var(--surface-2);color:var(--ink);font-size:13px;max-width:90vw;line-height:1.5}@keyframes packet{50%{transform:translateX(5px);color:var(--ink);border-color:var(--ink-subtle)}}@keyframes pulse{50%{filter:drop-shadow(0 0 12px #ffffff44)}}
@media(max-width:1040px){.encoder-hero{grid-template-columns:1fr 1fr;gap:36px}.hero-copy h1{font-size:58px}.editor-grid{grid-template-columns:1fr}.result-empty{min-height:240px}.notes-grid{grid-template-columns:1fr}.notes-grid .feature-card{padding:24px}.notes-grid h2{margin-top:0}}
@media(max-width:680px){.encoder-hero{grid-template-columns:1fr;padding:54px 0 40px;gap:28px}.hero-copy h1{font-size:44px}.hero-copy p{font-size:17px}.signal-demo{min-height:240px}.header-actions .local-status{font-size:0;gap:0}.header-actions .status-dot{width:7px;height:7px}.input-panel,.result-panel{padding:22px}.workspace-head{align-items:stretch;flex-direction:column;gap:12px}.workspace-head>#clear{align-self:flex-end;font-size:12px;min-height:32px}.tabs .button{flex:1}.password-field .button{font-size:12px;padding:8px 12px}.text-file-row{align-items:flex-start}.text-file-row .button{white-space:nowrap;font-size:12px;padding:8px 12px}.stats dd{font-size:16px}.run-actions .button{flex:1}.result-actions .button{flex:1}.notes-grid{padding-bottom:48px}.workspace{padding-bottom:40px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

select{display:block;width:100%;max-width:100%;font:inherit;font-size:13px;padding:12px;border:1px solid var(--hairline);border-radius:8px;background:var(--canvas);color:var(--ink)}.codec-options{margin-top:24px}.codec-options>.field-label{margin-top:22px}.photo-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.photo-fields label{font-size:12px;color:var(--ink-subtle)}.photo-fields select{margin-top:8px}#photo-quality{width:100%;padding:0;margin:0 0 18px;accent-color:var(--ink)}#prepare-photo{margin-top:18px}.photo-preview{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.photo-preview figure{min-width:0;margin:0}.photo-preview figcaption{font-size:11px;color:var(--ink-subtle);margin-bottom:8px}.photo-preview img{display:block;width:100%;height:160px;object-fit:contain;background:var(--canvas);border:1px solid var(--hairline);border-radius:8px}@media(max-width:500px){.photo-fields{grid-template-columns:1fr}.photo-preview img{height:120px}}

.stream-option{padding:18px 22px;border:1px solid var(--hairline);border-radius:10px;margin-bottom:16px}.stream-option>label{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-muted)}.stream-option input{accent-color:var(--ink);flex-shrink:0}.stream-option .hint{margin-top:10px}

.cipher-flow{margin-top:20px;padding:15px 16px;border:1px solid var(--hairline);border-radius:12px;background:linear-gradient(120deg,#ffffff03,#6ccaff05 55%,#ffffff02);overflow:hidden;contain:layout paint}.cipher-flow-head,.cipher-flow-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}.cipher-caption{font-size:12px;color:var(--ink-muted)}.cipher-live-dot{width:5px;height:5px;border-radius:50%;background:#8dd7ff;box-shadow:0 0 12px #8dd7ff66}.cipher-stage{position:relative;height:126px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}.cipher-track{position:absolute;inset:24px 0;background:repeating-linear-gradient(0deg,transparent,transparent 19px,#ffffff06 20px);border-top:1px solid #ffffff05;border-bottom:1px solid #ffffff05}.cipher-particles{position:absolute;inset:5px 0}.cipher-particles>span{position:absolute;left:-10%;top:calc(8px + var(--lane)*17px);font:14px/1 ui-monospace,monospace;color:#bdd7e4;opacity:0;unicode-bidi:isolate;direction:ltr;animation:cipher-flight var(--speed) linear infinite;animation-delay:var(--delay);animation-play-state:paused;will-change:transform;max-width:30px}.cipher-engine{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;border:1px solid #8dd7ff44;border-radius:16px;display:grid;place-items:center;color:var(--ink);background:#0c1117;box-shadow:0 0 35px #8dd7ff10;z-index:2}.cipher-engine i{position:absolute;inset:-9px;border:1px solid #8dd7ff22;border-radius:23px;animation:cipher-ring 2s ease-in-out infinite;animation-play-state:paused}.cipher-shackle{transition:transform .5s;transform-origin:8px 10px}.cipher-edge{position:absolute;top:53px;font:9px ui-monospace,monospace;letter-spacing:2px;color:var(--ink-tertiary);z-index:3;background:var(--canvas);padding:4px}.cipher-edge-left{left:0}.cipher-edge-right{right:0}.cipher-flow-foot{min-height:20px}.cipher-state{font-size:11px;color:var(--ink-subtle)}.cipher-flow-foot button{font-size:11px;white-space:nowrap}.cipher-flow[data-state=running] .cipher-particles>span,.cipher-flow[data-state=complete] .cipher-particles>span,.cipher-flow[data-state=running] .cipher-engine i{animation-play-state:running}.cipher-flow[data-mode=decode] .cipher-particles>span{animation-direction:reverse;color:#c5e7dc}.cipher-flow[data-mode=decode][data-state=complete] .cipher-shackle,.cipher-flow[data-mode=decode][data-state=resting] .cipher-shackle{transform:translateY(-2px) rotate(-25deg)}.cipher-flow[data-state=resting] .cipher-engine{border-color:#ffffff33}.cipher-flow[data-state=waiting] .cipher-engine i{animation-play-state:running}.cipher-flow.motion-reduced .cipher-particles>span{animation:none!important;opacity:.55;left:calc(var(--offset) + 2%);transform:none}.cipher-flow.motion-reduced .cipher-engine i{animation:none!important}.cipher-flow.motion-reduced .cipher-shackle{transition:none}.cipher-flow[data-state=stopped] .cipher-live-dot{background:var(--ink-tertiary);box-shadow:none}@keyframes cipher-flight{0%{transform:translateX(0) scale(.8);opacity:0}12%{opacity:.6}44%{opacity:.9}50%{opacity:0;filter:blur(2px)}58%{opacity:.85;filter:blur(0)}88%{opacity:.5}100%{transform:translateX(var(--travel,540px)) scale(.8);opacity:0}}@keyframes cipher-ring{50%{transform:scale(1.07);opacity:.3}}@media(prefers-reduced-motion:reduce){.cipher-particles>span{animation:none!important;opacity:.55;left:calc(var(--offset) + 2%);transform:none}.cipher-engine i{animation:none!important}.cipher-shackle{transition:none}}@media(max-width:500px){.cipher-flow{padding:12px}.cipher-caption{font-size:11px}.cipher-state{font-size:10px}.cipher-engine{width:52px;height:52px}.cipher-flow-foot{gap:8px}}

.performance-controls{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.performance-controls label{font-size:12px;color:var(--ink-subtle)}.performance-controls select{margin-top:8px}@media(max-width:600px){.performance-controls{grid-template-columns:1fr}}