:root{--bg-canvas: #0c0c0e;--bg-surface: #141417;--bg-surface-hover: #18181c;--bg-card: #131316;--bg-card-hover: #17171b;--bg-inset: #1a1a1e;--bg-pill: #1a1a1f;--bg-pill-hover: #222228;--bg-pill-active: #2b2b34;--border-subtle: #1e1e23;--border-card: #222227;--border-card-hover: #34343d;--border-pill: #282830;--text-primary: #f4f4f5;--text-secondary: #a1a1aa;--text-muted: #71717a;--text-subtle: #52525b;--accent-blue: #1d70f5;--accent-blue-hover: #155bd0;--accent-blue-glow: rgba(29, 112, 245, .25);--font-serif: "Newsreader", "Cormorant Garamond", "Playfair Display", Georgia, serif;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", monospace;--shadow-card: 0 4px 20px rgba(0, 0, 0, .4);--shadow-card-hover: 0 12px 36px rgba(0, 0, 0, .7)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--bg-canvas);color:var(--text-primary);font-family:var(--font-sans);font-size:14px;line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.north-app-root{min-height:100vh;display:flex;flex-direction:column;background-color:var(--bg-canvas)}.north-nav{position:sticky;top:0;z-index:1000;background-color:#0c0c0ed9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-subtle);padding:0 2rem;height:64px;display:flex;align-items:center;justify-content:center}.nav-container-centered{max-width:1200px;width:100%;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:100%}.nav-center-brand{display:flex;align-items:center;justify-content:center;height:100%}.north-brand{font-family:var(--font-serif);font-size:1.5rem;font-style:italic;font-weight:500;color:#fff;text-decoration:none;letter-spacing:-.01em;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;line-height:1}.brand-favicon{width:24px;height:24px;border-radius:6px;display:block;flex-shrink:0}.brand-favicon.inverted{filter:invert(1)}.north-brand span{display:inline-block;line-height:1;transform:translateY(2px)}.nav-right{display:flex;align-items:center;justify-content:flex-end;height:100%}.footer-content{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;font-size:.82rem;color:var(--text-muted);font-family:var(--font-mono);line-height:1}.footer-favicon{width:16px;height:16px;border-radius:4px;display:block;flex-shrink:0}.footer-favicon.inverted{filter:invert(1);opacity:.9}.footer-brand-text{font-family:var(--font-serif);font-style:italic;font-size:.95rem;font-weight:500;color:#fff;transform:translateY(1px)}.footer-domain-text{font-family:var(--font-mono);font-size:.78rem;color:var(--text-muted);transform:translateY(.5px)}.footer-sep{color:#3f3f46}.privacy-pill{display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;color:var(--text-muted);background:var(--bg-pill);border:1px solid var(--border-pill);padding:.35rem .75rem;border-radius:8px}.privacy-pill svg{width:13px;height:13px;color:#10b981}.btn-blue-pill{display:inline-flex;align-items:center;gap:.4rem;background-color:#1e222a;color:#f1f5f9;border:1px solid #333a48;padding:.55rem 1.15rem;border-radius:10px;font-family:var(--font-sans);font-size:.86rem;font-weight:500;cursor:pointer;box-shadow:0 2px 6px #0006;transition:transform .16s ease-out,background-color .16s ease-out,border-color .16s ease-out}.btn-blue-pill:hover{background-color:#292f3b;border-color:#4b5568;color:#fff;transform:translateY(-1px)}.btn-blue-pill:active{transform:scale(.97)}.btn-blue-pill svg{width:14px;height:14px}.north-main{flex:1;max-width:1200px;margin:0 auto;width:100%;padding:3.5rem 1.5rem 4.5rem}.north-hero{text-align:center;margin-bottom:2.75rem}.hero-content{max-width:820px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:.85rem}.hero-headline-single{font-family:var(--font-serif);font-size:2.4rem;line-height:1.2;font-weight:400;letter-spacing:-.02em;color:#fff;white-space:nowrap}.hero-headline-single em{font-style:italic;color:#e4e4e7;font-weight:400}.hero-subtext-single{font-size:.92rem;color:var(--text-secondary);line-height:1.4;white-space:nowrap}.pill-filter-bar{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-top:1rem}.filter-pill{background:var(--bg-pill);border:1px solid var(--border-pill);color:var(--text-secondary);padding:.45rem .95rem;border-radius:8px;font-size:.82rem;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;transition:all .15s ease}.filter-pill:hover{background:var(--bg-pill-hover);color:#fff;border-color:#3f3f46}.filter-pill.active{background:var(--bg-pill-active);color:#fff;border-color:#52525b}.btn-search-toggle svg{width:13px;height:13px;color:var(--text-muted)}.btn-search-toggle:hover svg{color:#fff}.btn-search-toggle.has-query{border-color:var(--accent-blue);color:#fff}.expandable-search-wrap{display:inline-flex;align-items:center;background:#141418;border:1px solid var(--accent-blue);border-radius:8px;padding:.2rem .5rem .2rem .75rem;gap:.4rem;box-shadow:0 0 0 2px var(--accent-blue-glow);animation:searchExpand .18s cubic-bezier(.16,1,.3,1) forwards}@keyframes searchExpand{0%{width:80px;opacity:.5}to{width:240px;opacity:1}}.search-icon-inside{width:14px;height:14px;color:var(--text-muted);flex-shrink:0}.expandable-search-wrap input{width:100%;background:transparent;border:none;color:var(--text-primary);font-size:.82rem;outline:none;font-family:var(--font-sans)}.btn-search-close{background:transparent;border:none;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:.2rem;border-radius:4px}.btn-search-close:hover{color:#fff;background:#25252d}.btn-search-close svg{width:12px;height:12px}.north-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.5rem}.north-card{background:var(--bg-card);border:1px solid var(--border-card);border-radius:14px;padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.25rem;box-shadow:var(--shadow-card);transition:transform .2s cubic-bezier(.16,1,.3,1),border-color .2s ease-out,box-shadow .2s ease-out}.north-card:hover{background:var(--bg-card-hover);border-color:var(--border-card-hover);box-shadow:var(--shadow-card-hover);transform:translateY(-3px)}.north-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.north-card-title-link{display:flex;flex-direction:column;gap:.15rem;text-decoration:none;cursor:pointer}.north-card-title-link:hover .north-card-title{color:var(--accent-blue)}.north-card-title-link:hover .north-card-sub{color:#e4e4e7;text-decoration:underline}.north-card-title{font-family:var(--font-serif);font-size:1.4rem;font-style:italic;font-weight:500;color:#fff;letter-spacing:-.01em;transition:color .15s ease}.north-card-sub{font-family:var(--font-mono);font-size:.74rem;color:var(--text-muted);transition:color .15s ease}.card-visual-anchor{display:block;text-decoration:none;cursor:pointer;border-radius:10px}.card-visual-anchor:hover .visual-display{border-color:#3b3b4a}.north-card-header-actions{display:flex;align-items:center;gap:.45rem}.north-card-icon-btn{width:30px;height:30px;border-radius:8px;background:#1c1c22;border:1px solid #282830;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;transition:all .15s ease}.north-card-icon-btn:hover{background:#282832;color:#fff;border-color:#3f3f4c}.north-card-icon-btn svg{width:13px;height:13px}.btn-delete-node{display:inline-flex;align-items:center;gap:.35rem;background:transparent;border:1px solid rgba(239,68,68,.3);color:#ef4444;padding:.5rem .85rem;border-radius:8px;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .15s ease}.btn-delete-node:hover{background:#ef44441f;border-color:#ef4444}.btn-delete-node svg{width:13px;height:13px}.card-visual-box{width:100%;height:165px;border-radius:10px;overflow:hidden;background:#09090b;border:1px solid #1c1c22;display:flex;align-items:center;justify-content:center;padding:0;position:relative}.card-custom-image-box{background:#000}.card-custom-image{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s cubic-bezier(.16,1,.3,1)}.north-card:hover .card-custom-image{transform:scale(1.04)}.visual-display{width:calc(100% - 1.5rem);height:calc(100% - 1.5rem);background:#0e0e12;border:1px solid #202028;border-radius:8px;padding:.75rem;display:flex;flex-direction:column;justify-content:space-between}.display-header{display:flex;align-items:center;gap:.4rem}.dot{width:6px;height:6px;border-radius:50%}.dot-red{background:#ef4444}.dot-amber{background:#f59e0b}.dot-green{background:#10b981}.dot-blue{background:#3b82f6}.dot-purple{background:#a855f7}.display-title{font-family:var(--font-mono);font-size:.68rem;font-weight:600;color:#a1a1aa;letter-spacing:.05em;margin-left:.25rem}.display-body{display:flex;flex-direction:column;gap:.5rem}.wave-bars{display:flex;align-items:flex-end;gap:4px;height:38px}.bar{flex:1;background:#7c3aed;border-radius:2px;opacity:.85}.b1{height:40%;background:#6366f1}.b2{height:75%;background:#8b5cf6}.b3{height:95%;background:#a855f7}.b4{height:60%;background:#c084fc}.b5{height:85%;background:#8b5cf6}.b6{height:50%;background:#6366f1}.b7{height:70%;background:#a855f7}.progress-meter{width:100%;height:12px;background:#181820;border-radius:6px;overflow:hidden;border:1px solid #282834}.meter-fill{width:82%;height:100%;background:linear-gradient(90deg,#2563eb,#38bdf8)}.terminal-lines{display:flex;flex-direction:column;gap:.2rem;font-family:var(--font-mono);font-size:.7rem;color:#38bdf8}.terminal-lines code{color:#38bdf8}.display-metric{font-family:var(--font-mono);font-size:.65rem;color:#71717a;text-transform:uppercase;letter-spacing:.04em}.north-card-desc{font-size:.86rem;color:var(--text-secondary);line-height:1.5;min-height:2.6rem}.north-card-actions{display:flex;align-items:center;justify-content:space-between;padding-top:.85rem;border-top:1px solid #1c1c22}.btn-north-copy{display:inline-flex;align-items:center;gap:.35rem;background:#19191e;border:1px solid #2a2a32;color:var(--text-secondary);padding:.45rem .85rem;border-radius:8px;font-size:.74rem;font-family:var(--font-mono);cursor:pointer;transition:transform .16s ease-out,background-color .16s ease-out,color .16s ease-out}.btn-north-copy:hover{background:#25252d;color:#fff}.btn-north-copy:active{transform:scale(.97)}.btn-north-copy.copied{background:#10b98126;border-color:#10b98166;color:#34d399}.btn-north-copy svg{width:12px;height:12px}.btn-north-open{display:inline-flex;align-items:center;gap:.35rem;background-color:var(--accent-blue);color:#fff;padding:.45rem 1.05rem;border-radius:8px;font-size:.8rem;font-weight:600;text-decoration:none;transition:transform .16s ease-out,background-color .16s ease-out}.btn-north-open:hover{background-color:var(--accent-blue-hover)}.btn-north-open:active{transform:scale(.97)}.btn-north-open svg{width:12px;height:12px}.north-empty-box{padding:4rem 2rem;text-align:center;background:var(--bg-card);border:1px dashed var(--border-card);border-radius:16px;color:var(--text-muted)}.north-footer{border-top:1px solid var(--border-subtle);padding:2rem 1.5rem;text-align:center;background-color:var(--bg-canvas)}.footer-content{display:flex;align-items:center;justify-content:center;gap:.75rem;font-size:.8rem;color:var(--text-muted)}.footer-brand-text{font-family:var(--font-serif);font-size:.95rem;color:#fff}.footer-domain-text{font-family:var(--font-mono)}.footer-sep{opacity:.4}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1.5rem}.modal-content{width:100%;max-width:480px;background:#141418;border:1px solid #282832;border-radius:16px;padding:1.75rem;box-shadow:0 24px 60px #000c}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.25rem}.modal-title-wrap h3{font-family:var(--font-serif);font-size:1.35rem;font-style:italic;color:#fff}.modal-title-wrap p{font-size:.8rem;color:var(--text-secondary);margin-top:.15rem}.btn-close-x{background:transparent;border:none;color:var(--text-muted);font-size:1.2rem;cursor:pointer;padding:.2rem}.btn-close-x:hover{color:#fff}.modal-form{display:flex;flex-direction:column;gap:1rem}.form-group{display:flex;flex-direction:column;gap:.35rem}.form-group label{font-size:.78rem;font-weight:500;color:var(--text-secondary)}.form-group input,.form-group select{padding:.55rem .85rem;border:1px solid #282832;border-radius:8px;font-size:.86rem;color:#fff;background:#0d0d10;outline:none}.form-group input:focus,.form-group select:focus{border-color:var(--accent-blue)}.subdomain-input-group{display:flex;align-items:center;border:1px solid #282832;border-radius:8px;overflow:hidden;background:#0d0d10}.prefix-tag{background:#18181f;padding:.55rem .75rem;font-family:var(--font-mono);font-size:.76rem;color:var(--text-muted);border-right:1px solid #282832}.subdomain-input-group input{flex:1;border:none;border-radius:0}.upload-input-combo{display:flex;align-items:center;gap:.5rem;transition:all .15s ease;border-radius:8px}.upload-input-combo.dragging-over{border:1px dashed var(--accent-blue);background:#1d70f514;padding:.25rem}.upload-input-combo input{flex:1}.btn-file-upload{display:inline-flex;align-items:center;gap:.35rem;background:#181820;border:1px solid #282834;color:var(--text-secondary);padding:.55rem .85rem;border-radius:8px;font-size:.8rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .15s ease}.btn-file-upload:hover{background:#242430;color:#fff;border-color:#3f3f50}.btn-file-upload svg{width:14px;height:14px}.spin{animation:spinAnim 1s linear infinite}@keyframes spinAnim{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.image-preview-strip{display:flex;align-items:center;justify-content:space-between;background:#0d0d10;border:1px solid #24242e;padding:.4rem .6rem;border-radius:8px;margin-top:.4rem}.image-preview-strip img{width:48px;height:32px;object-fit:cover;border-radius:4px}.image-preview-strip button{background:transparent;border:none;color:#ef4444;font-size:.74rem;cursor:pointer}.image-preview-strip button:hover{text-decoration:underline}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;margin-top:.5rem}.btn-secondary{background:transparent;border:1px solid #2a2a34;padding:.55rem 1.15rem;border-radius:8px;font-size:.84rem;font-weight:500;color:var(--text-secondary);cursor:pointer}.btn-secondary:hover{background:#1f1f26;color:#fff}.toast-container{position:fixed;bottom:2rem;right:2rem;z-index:2000;display:flex;flex-direction:column;gap:.5rem}.toast-bubble{background:#181820;border:1px solid #2c2c38;color:#fff;padding:.6rem 1.15rem;border-radius:8px;font-size:.82rem;font-weight:500;box-shadow:0 12px 30px #0009}@media(max-width:768px){.north-main{padding:2.25rem 1.15rem 5rem}.north-hero{margin-bottom:2rem}.hero-headline-single{font-size:1.85rem;white-space:normal;text-align:center}.hero-subtext-single{font-size:.86rem;white-space:normal;text-align:center}.north-cards-grid{grid-template-columns:1fr;gap:1.25rem}.card-visual-box{height:150px}.modal-content{width:95%;padding:1.25rem;max-height:88vh;border-radius:12px}}.mobile-fab-add{display:none}@media(max-width:640px){.desktop-only{display:none!important}.mobile-fab-add{display:flex!important;position:fixed;bottom:1.75rem;right:1.5rem;z-index:9999;width:52px;height:52px;border-radius:50%;background-color:#1e222a;color:#fff;border:1px solid #384152;box-shadow:0 8px 24px #000000bf;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .16s ease-out,background-color .16s ease-out,border-color .16s ease-out}.mobile-fab-add:hover{background-color:#282f3c;border-color:#4f5a70}.mobile-fab-add:active{transform:scale(.92)}.mobile-fab-add svg{width:24px;height:24px;color:#fff}.north-nav{padding:0 1rem;height:56px}.nav-side-spacer{display:none}.nav-container-centered{display:flex;justify-content:center;align-items:center}@keyframes fabPop{0%{transform:scale(.85) translateY(12px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.hero-headline-single{font-size:1.6rem;line-height:1.25}.hero-subtext-single{font-size:.82rem;line-height:1.4}.pill-filter-bar{gap:.35rem}.filter-pill{padding:.4rem .8rem;font-size:.78rem}.north-card{padding:1.25rem;border-radius:12px}.north-card-title{font-size:1.25rem}.toast-container{bottom:5.5rem;right:1rem;left:1rem;align-items:center}.toast-bubble{width:auto;text-align:center}.modal-footer{flex-direction:column-reverse;gap:.5rem}.modal-footer>div{width:100%;display:flex;gap:.5rem}.modal-footer button{flex:1;text-align:center;justify-content:center}.btn-delete-node{width:100%;justify-content:center}}