:root{--font:ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", "Consolas", monospace;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--radius-sm:3px;--radius-md:5px;--radius-lg:7px}:root,[data-theme=dark]{--bg:#0c0c0f;--bg-subtle:#111117;--surface:#1b1b24;--surface-hover:#21212c;--border:#2a2a3a;--border-strong:#383849;--text:#c2c2d2;--text-strong:#e8e8f4;--muted:#565670;--accent:#e09508;--accent-hover:#eaa50c;--accent-muted:#e0950826;--accent-subtle:#e0950812;--btn-bg:#e09508;--btn-bg-hover:#eaa50c;--btn-fg:#0a0806;--error:#f87171;--error-muted:#f871711f;--success:#34d399;--success-muted:#34d3991f;--shadow-sm:0 1px 4px #00000080}[data-theme=light]{--bg:#f2f1ec;--bg-subtle:#e8e6df;--surface:#fff;--surface-hover:#f9f8f5;--border:#dddbd3;--border-strong:#c6c4bc;--text:#383642;--text-strong:#17151d;--muted:#86848e;--accent:#c97a08;--accent-hover:#d4860a;--accent-muted:#c97a081f;--accent-subtle:#c97a080d;--btn-bg:#e8920a;--btn-bg-hover:#f09c10;--btn-fg:#1a0900;--error:#dc2626;--error-muted:#dc262614;--success:#059669;--success-muted:#0596691a;--shadow-sm:0 1px 3px #00000014}*{box-sizing:border-box}body{font-family:var(--font);background:var(--bg);color:var(--text);flex-direction:column;min-height:100vh;margin:0;font-size:13px;line-height:1.55;display:flex}.site-header{align-items:center;gap:var(--space-3);padding:0 var(--space-5);border-bottom:1px solid var(--border);background:var(--surface);z-index:100;height:42px;display:flex;position:sticky;top:0}.header-brand{flex-shrink:0;font-size:.8125rem;font-weight:600}.header-brand a{color:var(--text-strong);letter-spacing:-.01em;align-items:center;gap:.375rem;text-decoration:none;display:flex}.header-brand a:hover,.header-brand .brand-accent{color:var(--accent)}.header-divider{background:var(--border-strong);flex-shrink:0;width:1px;height:16px}.main-nav{align-items:center;gap:1px;display:flex}.main-nav a{border-radius:var(--radius-sm);height:26px;color:var(--muted);align-items:center;gap:.3rem;padding:0 .5rem;font-size:.75rem;font-weight:500;text-decoration:none;transition:color .1s,background .1s;display:inline-flex}.main-nav a:hover{color:var(--text);background:var(--bg-subtle)}.main-nav a.active{color:var(--accent);background:var(--accent-muted)}.main-nav a svg{opacity:.65;flex-shrink:0}.main-nav a.active svg{opacity:1}.header-right{align-items:center;gap:var(--space-2);margin-left:auto;display:flex}button.shortcuts-trigger{border:1px solid var(--border-strong);border-radius:var(--radius-sm);width:24px;height:24px;color:var(--muted);background:0 0;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:.8125rem;font-weight:600;line-height:1;transition:color .1s,border-color .1s,background .1s;display:inline-flex}button.shortcuts-trigger:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-muted)}.theme-switcher{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);align-items:center;gap:1px;padding:2px;display:flex}.theme-switcher button{width:26px;height:22px;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:2px;justify-content:center;align-items:center;padding:0;transition:color .1s,background .1s;display:inline-flex}.theme-switcher button:hover{color:var(--text)}.theme-switcher button[aria-pressed=true]{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm)}main{width:100%;max-width:80rem;padding:var(--space-6) var(--space-5);flex:1;margin:0 auto}.tool-page .page-title{margin:0 0 var(--space-5);color:var(--text-strong);align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;display:flex}.tool-page .page-title:before{content:"//";color:var(--accent);font-size:.8125rem;font-weight:400}.home-intro{margin:0 0 var(--space-5);color:var(--muted);font-size:.75rem}.home .tool-cards{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));display:grid}.card{padding:var(--space-4) var(--space-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);color:inherit;text-decoration:none;transition:border-color .12s,background .12s;display:block;position:relative;overflow:hidden}.card:hover{border-color:var(--accent);background:var(--surface-hover)}.card-icon{border-radius:var(--radius-md);background:var(--accent-muted);width:30px;height:30px;color:var(--accent);margin-bottom:var(--space-3);justify-content:center;align-items:center;display:inline-flex}.card h2{color:var(--text-strong);margin:0 0 .2rem;font-size:.8125rem;font-weight:600}.card p{color:var(--muted);margin:0;font-size:.75rem;line-height:1.5}.card-arrow{bottom:var(--space-4);right:var(--space-4);color:var(--muted);font-size:.75rem;transition:color .12s,transform .12s;position:absolute}.card:hover .card-arrow{color:var(--accent);transform:translate(2px)}.panel{margin-bottom:var(--space-4);padding:var(--space-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg)}.panel:last-child{margin-bottom:0}.panel>h3{margin:0 0 var(--space-4);color:var(--text-strong);align-items:center;gap:.4rem;font-size:.8125rem;font-weight:600;display:flex}.panel>h3:before{content:"//";color:var(--accent);font-size:.75rem;font-weight:400}.panel label{margin-top:var(--space-3);margin-bottom:var(--space-1);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:.6875rem;font-weight:500;display:block}.panel label:first-of-type{margin-top:0}.panel input[type=text],.panel select,.panel textarea{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);width:100%;color:var(--text);font:inherit;appearance:none;padding:.375rem .5rem;font-size:.8125rem;transition:border-color .1s,box-shadow .1s}.panel select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%2352526a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;padding-right:1.75rem}.panel input:focus,.panel select:focus,.panel textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-muted);outline:none}.panel input::placeholder,.panel textarea::placeholder{color:var(--muted);font-style:italic}.panel textarea{resize:vertical;min-height:96px}.panel textarea[rows="1"]{min-height:unset;resize:none}.panel textarea[rows="4"]{min-height:unset;font-size:.75rem}.panel .actions{gap:var(--space-2);margin-top:var(--space-3);flex-wrap:wrap;display:flex}button{background:var(--btn-bg);border-radius:var(--radius-sm);height:32px;color:var(--btn-fg);font:inherit;cursor:pointer;white-space:nowrap;border:none;flex-shrink:0;justify-content:center;align-items:center;gap:.4rem;padding:0 .75rem;font-size:.8125rem;font-weight:600;transition:background .1s;display:inline-flex}button:hover{background:var(--btn-bg-hover)}button svg{flex-shrink:0;width:14px;height:14px}button:focus-visible{box-shadow:0 0 0 2px var(--accent-muted);outline:none}button.secondary{background:var(--bg-subtle);border:1px solid var(--border-strong);color:var(--text)}button.secondary:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-muted)}button.btn-divide{background:var(--bg-subtle);border:1px solid var(--border-strong);color:var(--text);height:22px;padding:0 .4rem;font-size:.6875rem}button.btn-divide:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-muted)}.kbd-hint{margin-top:var(--space-2);color:var(--muted);font-size:.75rem}kbd{border:1px solid var(--border-strong);font:inherit;color:var(--text);background:var(--bg-subtle);border-radius:3px;padding:.1em .35rem;font-size:.75rem;line-height:1.5;display:inline-block}.result-box{margin-top:var(--space-3);padding:var(--space-3) var(--space-3);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);font:inherit;white-space:pre-wrap;word-break:break-all;min-height:3.5rem;color:var(--text);font-size:.8125rem;line-height:1.6}.result-box:empty:before{content:attr(data-placeholder);color:var(--muted);font-style:italic}.result-box.error{border-color:var(--error);color:var(--error);background:var(--error-muted)}.result-box.valid{border-color:var(--success);color:var(--success);background:var(--success-muted)}.output-row{align-items:flex-start;gap:var(--space-2);margin-top:var(--space-1);display:flex}.output-row textarea{flex:1;min-width:0}.output-row button.secondary{flex-shrink:0;align-self:flex-start;margin-top:0}.input-row{gap:var(--space-2);align-items:center;display:flex}.input-row input{flex:1;width:auto;min-width:0}.base64-tool,.jwt-tool{gap:var(--space-4);display:grid}@media (width>=640px){.base64-tool,.jwt-tool{grid-template-columns:1fr 1fr}.base64-tool .panel,.jwt-tool .panel{margin-bottom:0}}.jwt-tool .actions{gap:var(--space-2);margin-top:var(--space-3);display:flex}.cidr-tool .table-wrap{margin-top:var(--space-3);overflow-x:auto}.cidr-table{border-collapse:collapse;width:100%;font-size:.75rem}.cidr-table th,.cidr-table td{padding:.3rem var(--space-3);text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}.cidr-table th{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding-top:0;font-size:.6875rem;font-weight:500}.cidr-table .subnet-cell{color:var(--text-strong);font-weight:500}.cidr-table tbody tr:hover td{background:var(--bg-subtle)}.cidr-table .btn-cell{white-space:nowrap;width:1.75rem;padding-left:.25rem;padding-right:.25rem}.join-span-cell{vertical-align:middle;border-bottom:none}.btn-join-span{border-radius:var(--radius-sm);border:1px solid var(--accent-muted);width:1.375rem;height:100%;min-height:2.6rem;color:var(--accent);cursor:pointer;background:0 0;justify-content:center;align-items:center;padding:0;font-size:.875rem;transition:color .1s,background .1s,border-color .1s;display:flex}.btn-join-span:hover{background:var(--accent-muted);border-color:var(--accent)}.btn-sm{border-radius:var(--radius-sm);border:1px solid var(--border);width:1.375rem;height:1.375rem;color:var(--muted);cursor:pointer;background:0 0;justify-content:center;align-items:center;padding:0;font-size:.8125rem;line-height:1;transition:color .1s,background .1s,border-color .1s;display:inline-flex}.btn-sm:hover{color:var(--text);background:var(--bg-subtle);border-color:var(--border-strong)}.btn-join{color:var(--accent);border-color:var(--accent-muted)}.btn-join:hover{background:var(--accent-muted);border-color:var(--accent);color:var(--accent)}.btn-placeholder{width:1.375rem;height:1.375rem;display:inline-block}.cidr-message{min-height:1.25rem;margin-top:var(--space-2);font-size:.75rem}.cidr-message.error{color:var(--error)}.cidr-message.success{color:var(--success)}.token-row{align-items:flex-start;gap:var(--space-2);margin-top:var(--space-1);display:flex}.token-row textarea{flex:1;width:auto;min-width:0}.result-actions{align-items:flex-start;gap:var(--space-2);margin-top:var(--space-3);display:flex}.result-actions .result-box{flex:1;min-width:0;margin:0}.shortcuts-overlay{z-index:999;-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;background:#00000080;justify-content:center;align-items:center;transition:opacity .14s,visibility .14s;display:flex;position:fixed;inset:0}.shortcuts-overlay[aria-hidden=false]{opacity:1;visibility:visible}.shortcuts-box{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);width:90vw;min-width:260px;max-width:340px;transition:transform .14s;overflow:hidden;transform:scale(.96)translateY(-6px);box-shadow:0 24px 64px #00000073,0 0 0 1px #ffffff0a}.shortcuts-overlay[aria-hidden=false] .shortcuts-box{transform:scale(1)translateY(0)}.shortcuts-hd{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;display:flex}.shortcuts-title{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.6875rem;font-weight:600}.shortcuts-title:before{content:"// ";color:var(--accent)}button.shortcuts-close{color:var(--muted);border-radius:var(--radius-sm);background:0 0;border:none;width:20px;height:20px;padding:0;font-size:.75rem;line-height:1}button.shortcuts-close:hover{color:var(--text);background:var(--bg-subtle)}.shortcuts-bd{padding:var(--space-3) var(--space-4) var(--space-4);gap:var(--space-4);flex-direction:column;display:flex}.shortcuts-section-title{color:var(--accent);margin-bottom:var(--space-2);letter-spacing:.02em;font-size:.6875rem;font-weight:500}.shortcuts-section-title:before{content:"// "}.shortcut-row{justify-content:space-between;align-items:center;gap:var(--space-4);padding:.15rem 0;display:flex}.shortcut-keys{flex-shrink:0;align-items:center;gap:2px;display:flex}.shortcut-desc{color:var(--text);font-size:.75rem}.palette-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;background:#0000008c;justify-content:center;align-items:flex-start;padding-top:20vh;transition:opacity .12s,visibility .12s;display:flex;position:fixed;inset:0}.palette-overlay[aria-hidden=false]{opacity:1;visibility:visible}.palette-box{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-lg);width:min(480px,90vw);transition:transform .12s;overflow:hidden;transform:scale(.97)translateY(-8px);box-shadow:0 32px 80px #00000080,0 0 0 1px #ffffff0a}.palette-overlay[aria-hidden=false] .palette-box{transform:scale(1)translateY(0)}.palette-input-wrap{align-items:center;gap:var(--space-3);padding:0 var(--space-4);border-bottom:1px solid var(--border);height:44px;display:flex}.palette-icon{color:var(--muted);flex-shrink:0}.palette-input{color:var(--text-strong);font-family:var(--font);background:0 0;border:none;border-radius:0;outline:none;flex:1;width:auto;min-width:0;height:auto;padding:0;font-size:.8125rem}.palette-input::placeholder{color:var(--muted)}kbd.palette-esc-hint{font-family:var(--font);color:var(--text);background:var(--bg-subtle);border:1px solid var(--border-strong);border-radius:var(--radius-sm);flex-shrink:0;padding:.1em 5px;font-size:.6875rem}.palette-list{padding:var(--space-2) 0;max-height:280px;margin:0;list-style:none;overflow-y:auto}.palette-item{align-items:baseline;gap:var(--space-3);padding:.45rem var(--space-4);cursor:pointer;transition:background 80ms;display:flex}.palette-item:hover,.palette-item--active{background:var(--surface-hover)}.palette-item--active{background:var(--accent-subtle)}.palette-item-label{color:var(--text-strong);flex-shrink:0;min-width:60px;font-size:.8125rem;font-weight:500}.palette-item--active .palette-item-label{color:var(--accent)}.palette-item-desc{color:var(--muted);flex:1;font-size:.75rem}.palette-item-current{text-transform:uppercase;letter-spacing:.06em;color:var(--accent);background:var(--accent-subtle);border:1px solid var(--accent-muted);border-radius:var(--radius-sm);flex-shrink:0;padding:1px 5px;font-size:.625rem}.palette-empty{padding:var(--space-4);text-align:center;color:var(--muted);font-size:.75rem;list-style:none}.site-footer{padding:var(--space-4) var(--space-5);border-top:1px solid var(--border);text-align:center;color:var(--muted);margin-top:auto;font-size:.75rem}.site-footer a{color:var(--accent);text-decoration:none}.site-footer a:hover{text-decoration:underline}