/* XORN // Cicada 3301-inspired terminal UI */ :root{ --bg:#070a08; --bg2:#0b100d; --panel:#0e140f; --ink:#c8f6dd; --dim:#5f7a68; --acc:#00ff9c; --acc2:#12b981; --amber:#ffb454; --err:#ff5d5d; --line:#1c2a20; --mono:"SFMono-Regular",Consolas,"Roboto Mono",monospace; /* accent as an rgb triple + derived shades — themes below only override these */ --acc-rgb:0,255,156; --acc-hi:#4dffbb; --on-acc:#04140c; color-scheme:dark; } /* ---- selectable themes (data-theme on ); default above = cicada green ---- */ html[data-theme="pink"]{ --acc:#ff5db1; --acc2:#ff93cf; --acc-rgb:255,93,177; --acc-hi:#ff8ccb; --on-acc:#2a0716; --ink:#ffdcef; --dim:#8a6076; --line:#2a1a22; } html[data-theme="blue"]{ --acc:#3da5ff; --acc2:#6fc3ff; --acc-rgb:61,165,255; --acc-hi:#74c0ff; --on-acc:#041423; --ink:#cfe6ff; --dim:#5f7489; --line:#182233; } html[data-theme="red"]{ --acc:#ff5d5d; --acc2:#ff8f6b; --acc-rgb:255,93,93; --acc-hi:#ff8686; --on-acc:#200505; --ink:#ffd6d6; --dim:#8a6060; --line:#2a1a1a; --amber:#ffb454; } html[data-theme="green"]{ --acc:#39ff88; --acc2:#1fd96f; --acc-rgb:57,255,136; --acc-hi:#78ffae; --on-acc:#04140c; --ink:#cdf7dc; --dim:#5f7a68; --line:#1c2a20; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:radial-gradient(120% 90% at 50% -10%,#0d160f 0%,var(--bg) 60%); color:var(--ink); font-family:var(--mono); font-size:15px; line-height:1.5; min-height:100vh; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3{font-weight:600;letter-spacing:.08em} button{font-family:inherit;cursor:pointer} small{color:var(--dim)} /* ambient */ .scanlines{position:fixed;inset:0;pointer-events:none;z-index:9; background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.28) 2px 3px); mix-blend-mode:multiply;opacity:.5} .vignette{position:fixed;inset:0;pointer-events:none;z-index:8; box-shadow:inset 0 0 180px 40px rgba(0,0,0,.85)} body.calm .scanlines,body.calm .vignette{display:none} body.calm *{animation:none!important;transition:none!important} /* boot */ .boot{max-width:820px;margin:0 auto;padding:8vh 24px;white-space:pre-wrap; color:var(--acc);text-shadow:0 0 8px rgba(var(--acc-rgb),.4);font-size:14px} /* layout */ main{max-width:960px;margin:0 auto;padding:28px 20px 60px;position:relative;z-index:1} .hd{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line);padding-bottom:18px} .glyph{color:var(--acc);filter:drop-shadow(0 0 10px rgba(var(--acc-rgb),.35));animation:pulse 6s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:.85}50%{opacity:1}} .ttl{flex:1} .ttl h1{margin:0;font-size:34px;letter-spacing:.35em;position:relative;text-shadow:0 0 12px rgba(var(--acc-rgb),.35)} .ttl h1[data-glitch]{animation:flick 8s infinite} @keyframes flick{0%,97%,100%{opacity:1}98%{opacity:.6}99%{opacity:.9}} .sub{margin:4px 0 0;color:var(--dim);letter-spacing:.15em;font-size:12px} #stat{color:var(--acc2)} .creed{color:var(--dim);font-size:12px;letter-spacing:.06em;margin:18px 0 22px;text-align:center;opacity:.8} /* buttons */ .primary{background:var(--acc);color:var(--on-acc);border:none;padding:9px 16px;font-weight:700;letter-spacing:.1em;border-radius:3px} .primary:hover{background:var(--acc-hi);box-shadow:0 0 16px rgba(var(--acc-rgb),.5)} .ghost{background:transparent;color:var(--acc);border:1px solid var(--line);padding:8px 14px;letter-spacing:.1em;border-radius:3px} .ghost:hover{border-color:var(--acc);box-shadow:0 0 10px rgba(var(--acc-rgb),.2)} button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none} /* drop zone */ .drop{border:1.5px dashed var(--line);border-radius:8px;background:linear-gradient(180deg,var(--panel),transparent); padding:44px 20px;text-align:center;transition:.2s;outline:none} .drop:hover,.drop:focus,.drop.over{border-color:var(--acc);background:rgba(var(--acc-rgb),.05);box-shadow:0 0 30px rgba(var(--acc-rgb),.12) inset} .drop .plus{font-size:44px;color:var(--acc);line-height:1} .drop p{margin:10px 0 0;letter-spacing:.08em} .drop .lnk{color:var(--acc);text-decoration:underline} .drop .hint{color:var(--dim);font-size:12px;letter-spacing:.15em;margin-top:8px} /* queue */ .queue{margin-top:26px} .queue-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} #qcount{color:var(--dim);letter-spacing:.1em} .queue-actions{display:flex;gap:8px} .jobs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .job{border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:14px 16px} .job-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .job-name{font-weight:600;flex:1;min-width:150px;word-break:break-all} .job-name .from{color:var(--dim);font-size:12px;margin-left:6px} .job select,.job input[type=text],.job input[type=number]{background:var(--bg2);color:var(--ink); border:1px solid var(--line);border-radius:3px;padding:6px 8px;font-family:inherit;font-size:13px} .job select:focus,.job input:focus{border-color:var(--acc);outline:none} .arrow{color:var(--acc)} .opts{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)} .opt{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--dim);letter-spacing:.08em} .opt .val{color:var(--acc2)} .opt input[type=range]{accent-color:var(--acc);width:130px} .opt label.toggle{display:flex;align-items:center;gap:6px;color:var(--ink)} .job-foot{display:flex;align-items:center;gap:12px;margin-top:12px} .bar{flex:1;height:6px;background:var(--bg2);border-radius:3px;overflow:hidden;border:1px solid var(--line)} .bar > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc2),var(--acc));transition:width .2s} .status{font-size:12px;letter-spacing:.05em;min-width:64px;text-align:right} .status.err{color:var(--err)} .status.ok{color:var(--acc)} .log{font-size:11px;color:var(--dim);max-height:0;overflow:hidden;transition:max-height .25s;white-space:pre-wrap;margin-top:0} .job.open .log{max-height:180px;overflow:auto;margin-top:10px} .note{color:var(--amber);font-size:11px;margin-top:8px} .dl{color:var(--acc);text-decoration:none;border:1px solid var(--acc);padding:4px 10px;border-radius:3px;font-size:12px} .dl:hover{background:rgba(var(--acc-rgb),.12)} .badge{font-size:10px;padding:2px 6px;border:1px solid var(--line);border-radius:3px;color:var(--dim);letter-spacing:.1em} .badge.heavy{color:var(--amber);border-color:var(--amber)} /* matrix */ .matrix{margin-top:44px} .matrix h2{color:var(--dim);font-size:13px;letter-spacing:.2em} .matrix-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:14px} .mx{border:1px solid var(--line);border-radius:5px;padding:12px;background:var(--panel)} .mx h3{margin:0 0 8px;font-size:13px;color:var(--acc);letter-spacing:.15em} .mx code{color:var(--dim);font-size:11px;display:block;word-break:break-all} .limits{margin-top:22px;border:1px solid var(--line);border-radius:5px;padding:0 14px;background:var(--panel)} .limits summary{cursor:pointer;padding:12px 0;color:var(--amber);letter-spacing:.12em;font-size:12px} .limits p{color:var(--dim);font-size:12px;margin:6px 0 12px} .limits b{color:var(--ink)} /* footer */ .ft{margin-top:50px;border-top:1px solid var(--line);padding-top:16px} .ft-row{display:flex;justify-content:space-between;color:var(--line); font-size:11px;letter-spacing:.3em} .ft-dev{margin-top:12px;text-align:center;color:var(--acc2);font-size:12px; letter-spacing:.18em;text-shadow:0 0 8px rgba(var(--acc-rgb),.25)} #primes{color:var(--dim);opacity:.5} /* dialog */ .dlg{background:var(--panel);color:var(--ink);border:1px solid var(--acc);border-radius:8px; padding:24px;max-width:440px;box-shadow:0 0 40px rgba(var(--acc-rgb),.2)} .dlg::backdrop{background:rgba(0,0,0,.75)} .dlg h3{margin:0 0 16px;color:var(--acc);letter-spacing:.15em} .dlg label{display:block;margin-bottom:14px;font-size:12px;color:var(--dim);letter-spacing:.05em} .dlg input[type=text]{width:100%;margin-top:6px;background:var(--bg2);color:var(--ink);border:1px solid var(--line);padding:8px;border-radius:3px;font-family:inherit} .dlg .chk{display:flex;align-items:center;gap:8px;color:var(--ink)} .dlg-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px} @media (max-width:560px){.ttl h1{font-size:26px}.opts{gap:10px}} @media (prefers-reduced-motion:reduce){*{animation:none!important}} /* ============================================================ XORN // slide-in navigation drawer (replaces the [CFG] dialog) ============================================================ */ .scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:40;opacity:0;visibility:hidden; transition:opacity .25s;backdrop-filter:blur(1px)} .scrim.open{opacity:1;visibility:visible} .drawer{position:fixed;top:0;left:0;height:100%;width:min(342px,87vw);z-index:41; background:linear-gradient(180deg,var(--panel),var(--bg2)); border-right:1px solid var(--acc);box-shadow:0 0 60px rgba(var(--acc-rgb),.15); transform:translateX(-102%);transition:transform .28s cubic-bezier(.4,0,.2,1); display:flex;flex-direction:column;overflow-y:auto;padding:20px 20px 30px} .drawer.open{transform:translateX(0)} .drawer-hd{display:flex;align-items:center;justify-content:space-between; border-bottom:1px solid var(--line);padding-bottom:14px} .drawer-hd h2{margin:0;font-size:14px;letter-spacing:.28em;color:var(--acc); text-shadow:0 0 10px rgba(var(--acc-rgb),.35)} .drawer-x{background:none;border:none;color:var(--dim);font-size:24px;line-height:1;padding:0 4px} .drawer-x:hover{color:var(--acc)} .nav-sec{margin-top:22px} .nav-label{color:var(--dim);font-size:11px;letter-spacing:.22em;margin:0 0 10px} .nav-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left; background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:5px; padding:13px 14px;letter-spacing:.05em;transition:.18s} .nav-item:hover{border-color:var(--acc);background:rgba(var(--acc-rgb),.06); box-shadow:0 0 16px rgba(var(--acc-rgb),.1) inset} .nav-item .ico{color:var(--acc);font-size:17px;width:22px;text-align:center;flex:none} .nav-item .txt{flex:1;font-size:13px} .nav-item .txt small{display:block;color:var(--dim);font-size:10px;letter-spacing:.06em;margin-top:3px} /* theme swatches */ .themes{display:flex;flex-wrap:wrap;gap:12px;margin-top:2px} .swatch{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);cursor:pointer; position:relative;transition:.16s;padding:0} .swatch:hover{transform:scale(1.09)} .swatch[aria-pressed="true"]{border-color:#eafff5;box-shadow:0 0 12px rgba(255,255,255,.45)} .swatch[aria-pressed="true"]::after{content:"\2713";position:absolute;inset:0;display:flex; align-items:center;justify-content:center;color:#0a0a0a;font-size:16px;font-weight:700} .sw-default{background:radial-gradient(circle at 50% 38%,#00ff9c,#0b3b2a)} .sw-pink{background:radial-gradient(circle at 50% 38%,#ff5db1,#3a1022)} .sw-blue{background:radial-gradient(circle at 50% 38%,#3da5ff,#0a2138)} .sw-red{background:radial-gradient(circle at 50% 38%,#ff5d5d,#3a0f0f)} .sw-green{background:radial-gradient(circle at 50% 38%,#39ff88,#0c3b1f)} /* config controls moved into the drawer */ .nav-field{display:block;font-size:11px;color:var(--dim);letter-spacing:.06em;margin-top:14px} .nav-field input[type=text]{width:100%;margin-top:6px;background:var(--bg2);color:var(--ink); border:1px solid var(--line);padding:8px;border-radius:3px;font-family:inherit} .nav-chk{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:12px;margin-top:14px} .nav-chk input{accent-color:var(--acc)} /* ============================================================ XORN // Image -> PDF scanner (CamScanner-style overlay) ============================================================ */ .scanner{position:fixed;inset:0;z-index:50; background:radial-gradient(120% 90% at 50% -10%,#0d160f 0%,var(--bg) 60%); display:flex;flex-direction:column;overflow:hidden} .scanner[hidden]{display:none} .sc-hd{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)} .sc-hd h2{margin:0;flex:1;font-size:14px;letter-spacing:.2em;color:var(--acc); text-shadow:0 0 10px rgba(var(--acc-rgb),.3)} .sc-body{flex:1;overflow-y:auto;padding:18px;max-width:920px;margin:0 auto;width:100%} .sc-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:14px} .sc-toolbar .sep{flex:1} .sc-filter{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--dim);letter-spacing:.08em} .sc-filter select{background:var(--bg2);color:var(--ink);border:1px solid var(--line); border-radius:3px;padding:7px 8px;font-family:inherit;font-size:13px} .toggle-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line); border-radius:20px;padding:8px 13px;color:var(--ink);font-size:12px;letter-spacing:.06em;cursor:pointer} .toggle-pill:hover{border-color:var(--acc)} .toggle-pill input{accent-color:var(--acc)} .sc-hint{color:var(--amber);font-size:11px;letter-spacing:.04em;margin:0 0 14px;min-height:14px} /* live camera */ .sc-cam{position:relative;background:#000;border:1px solid var(--line);border-radius:8px; overflow:hidden;margin-bottom:16px} .sc-cam[hidden]{display:none} .sc-cam video{display:block;width:100%;max-height:58vh;object-fit:contain;background:#000} .sc-cam-bar{display:flex;gap:14px;justify-content:center;align-items:center;padding:12px;background:rgba(0,0,0,.45)} .shutter{width:60px;height:60px;border-radius:50%;border:3px solid var(--acc); background:rgba(var(--acc-rgb),.18)} .shutter:hover{background:rgba(var(--acc-rgb),.34)} /* captured / imported pages */ .sc-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px} .sc-empty{grid-column:1/-1;color:var(--dim);text-align:center;padding:52px 20px;letter-spacing:.08em; border:1.5px dashed var(--line);border-radius:8px} .sc-page{border:1px solid var(--line);border-radius:6px;background:var(--panel);overflow:hidden;position:relative} .sc-page canvas{display:block;width:100%;height:172px;object-fit:cover;background:#0a0a0a} .sc-page .pg-n{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.62);color:var(--acc); font-size:11px;padding:2px 7px;border-radius:3px;letter-spacing:.05em} .sc-page .pg-busy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:rgba(0,0,0,.55);color:var(--acc);font-size:11px;letter-spacing:.15em} .sc-page .pg-tools{display:flex;gap:4px;padding:7px;flex-wrap:nowrap;border-top:1px solid var(--line)} .pg-btn{flex:1;min-width:0;background:var(--bg2);color:var(--ink);border:1px solid var(--line); border-radius:3px;padding:7px 2px;font-size:14px;line-height:1} .pg-btn:hover{border-color:var(--acc);color:var(--acc)} .pg-btn:disabled{opacity:.4} .pg-btn.on{border-color:var(--acc);color:var(--acc);background:rgba(var(--acc-rgb),.1)} .sc-foot{display:flex;align-items:center;gap:12px;padding:14px 18px;border-top:1px solid var(--line);flex-wrap:wrap} .sc-foot .grow{flex:1;color:var(--dim);font-size:12px;letter-spacing:.06em;min-width:120px} @media (max-width:560px){ .sc-page canvas{height:140px} .themes{gap:10px} } /* ============================================================ XORN // header brand + top nav ============================================================ */ .brand{display:flex;align-items:center;gap:16px;text-decoration:none;color:inherit} .brand:hover .glyph{filter:drop-shadow(0 0 14px rgba(var(--acc-rgb),.55))} .topnav{display:flex;gap:6px;margin-left:auto} .navlink{background:transparent;color:var(--dim);border:1px solid transparent;border-radius:3px; padding:8px 12px;letter-spacing:.16em;font-size:12px;transition:.16s} .navlink:hover{color:var(--acc);border-color:var(--line)} .navlink.active{color:var(--acc);border-color:var(--acc);box-shadow:0 0 12px rgba(var(--acc-rgb),.18)} .hd #menuBtn{margin-left:12px} /* ============================================================ XORN // homepage ============================================================ */ .view[hidden]{display:none} .home{position:relative} .home-hero{text-align:center;padding:34px 12px 10px;position:relative} .sigil{color:var(--acc);display:flex;justify-content:center;margin-bottom:6px; filter:drop-shadow(0 0 22px rgba(var(--acc-rgb),.3))} .sigil .ring{transform-origin:100px 100px;animation:spin 34s linear infinite} .sigil .ring.rev{animation:spin 22s linear infinite reverse} @keyframes spin{to{transform:rotate(360deg)}} .home-eyebrow{color:var(--dim);letter-spacing:.34em;font-size:11px;margin:0 0 8px} .home-word{font-size:clamp(58px,15vw,132px);line-height:.9;margin:0;letter-spacing:.14em; color:var(--acc);text-shadow:0 0 26px rgba(var(--acc-rgb),.4);font-weight:600} .home-word[data-glitch]{animation:flick 8s infinite} .home-decode{color:var(--acc2);letter-spacing:.24em;font-size:clamp(12px,2.6vw,15px); margin:16px 0 0;min-height:1.2em} .home-lede{max-width:560px;margin:16px auto 0;color:var(--dim);line-height:1.7; letter-spacing:.02em;font-size:14px} .home-stats{display:flex;align-items:baseline;justify-content:center;gap:16px;margin:26px 0 6px} .stat-cell{display:flex;flex-direction:column;align-items:center;gap:3px} .stat-cell b{color:var(--acc);font-size:30px;letter-spacing:.06em;text-shadow:0 0 14px rgba(var(--acc-rgb),.3)} .stat-cell small{color:var(--dim);font-size:10px;letter-spacing:.24em} .stat-div{color:var(--line);font-size:26px;align-self:center} /* three tool cards */ .home-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:40px auto 0;max-width:900px} .hcard{position:relative;text-align:left;display:flex;flex-direction:column;gap:10px; background:linear-gradient(180deg,var(--panel),transparent); border:1px solid var(--line);border-radius:8px;padding:22px 20px 20px;color:var(--ink); overflow:hidden;transition:.2s} .hcard::before{content:"";position:absolute;inset:0;background: radial-gradient(120% 80% at 0% 0%,rgba(var(--acc-rgb),.1),transparent 55%);opacity:0;transition:.2s} .hcard:hover{border-color:var(--acc);transform:translateY(-3px); box-shadow:0 14px 40px rgba(0,0,0,.4),0 0 26px rgba(var(--acc-rgb),.14)} .hcard:hover::before{opacity:1} .hcard-n{position:absolute;top:14px;right:16px;color:var(--line);font-size:26px;font-weight:700;letter-spacing:.05em} .hcard:hover .hcard-n{color:rgba(var(--acc-rgb),.4)} .hcard-ico{font-size:30px;color:var(--acc);line-height:1} .hcard-t{font-size:19px;letter-spacing:.14em;color:var(--acc);font-weight:600} .hcard-d{color:var(--dim);font-size:12.5px;line-height:1.6;flex:1} .hcard-go{color:var(--acc2);font-size:11px;letter-spacing:.2em;margin-top:2px} .hcard:hover .hcard-go{color:var(--acc)} .home-foot{text-align:center;color:var(--dim);opacity:.7;font-size:11px;letter-spacing:.1em;margin:44px 0 0} @media (max-width:720px){ .topnav{display:none} .home-cards{grid-template-columns:1fr;max-width:420px} .home-hero{padding-top:20px} } /* ============================================================ XORN // manual crop editor (overlays the scanner) ============================================================ */ .sc-crop{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column; background:radial-gradient(120% 90% at 50% -10%,#0d160f 0%,var(--bg) 60%)} .sc-crop[hidden]{display:none} .crop-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:14px 18px;border-bottom:1px solid var(--line)} .crop-title{color:var(--acc);letter-spacing:.16em;font-size:13px; text-shadow:0 0 10px rgba(var(--acc-rgb),.3)} .crop-hint{color:var(--amber);font-size:11px;letter-spacing:.04em;flex:1;min-width:120px} .crop-wrap{flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;padding:18px} .crop-stage{position:relative;touch-action:none;line-height:0; box-shadow:0 0 40px rgba(0,0,0,.6)} .crop-stage canvas{display:block;border:1px solid var(--line)} .crop-h{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%; border:2px solid var(--acc);background:rgba(var(--acc-rgb),.28);cursor:grab;touch-action:none; box-shadow:0 0 12px rgba(var(--acc-rgb),.4)} .crop-h::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--acc)} .crop-h:active{cursor:grabbing;background:rgba(var(--acc-rgb),.45)} .crop-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:14px 18px;border-top:1px solid var(--line)} .crop-bar .sep{flex:1}