:root{--bg:#f7f8fb;--panel:#fff;--panel-muted:#f0f4f8;--text:#18212f;--muted:#617086;--border:#d9e0ea;--primary:#0f766e;--primary-dark:#115e59;--danger:#b42318;--success:#067647;--code:#101828;--shadow:0 12px 32px #10182814}*{box-sizing:border-box}html{min-height:100%}body{background:var(--bg);min-height:100%;color:var(--text);letter-spacing:0;margin:0;font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{border:0}textarea,input{border:1px solid var(--border);width:100%;color:var(--text);background:#fff;border-radius:8px;outline:none}textarea:focus,input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #0f766e1f}.site-shell{flex-direction:column;min-height:100vh;display:flex}.topbar{z-index:20;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);background:#f7f8fbeb;position:sticky;top:0}.topbar-inner{justify-content:space-between;align-items:center;gap:20px;max-width:1180px;margin:0 auto;padding:14px 20px;display:flex}.brand{align-items:center;gap:12px;font-weight:700;display:flex}.brand-mark{background:#fff url(/icons/dev-atlas-mark.svg) 50%/100% 100% no-repeat;border:1px solid #0f766e29;border-radius:10px;flex:0 0 46px;place-items:center;width:46px;height:46px;display:grid;overflow:hidden;box-shadow:0 6px 18px #0f766e1f}.nav-links{color:var(--muted);align-items:center;gap:8px;font-size:14px;display:flex}.nav-links a{border-radius:8px;padding:8px 10px}.nav-links a:hover{color:var(--text);background:var(--panel-muted)}.main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:32px 20px 56px}.footer{border-top:1px solid var(--border);color:var(--muted);font-size:14px}.footer-inner{flex-wrap:wrap;justify-content:space-between;gap:20px;max-width:1180px;margin:0 auto;padding:22px 20px;display:flex}.footer a{color:var(--primary-dark);font-weight:700}.footer a:hover{text-decoration:underline}.footer-links{flex-wrap:wrap;gap:14px;display:flex}.page-header{gap:10px;margin-bottom:24px;display:grid}.eyebrow{color:var(--primary-dark);text-transform:uppercase;font-size:13px;font-weight:700}h1,h2,h3,p{margin:0}h1{max-width:760px;font-size:40px;line-height:1.1}h2{font-size:22px;line-height:1.25}h3{font-size:17px}.lede{max-width:760px;color:var(--muted);font-size:17px;line-height:1.7}.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px;display:grid}.tool-grid.compact{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:0}.tool-card{border:1px solid var(--border);background:var(--panel);min-height:170px;box-shadow:var(--shadow);border-radius:8px;align-content:start;gap:12px;padding:18px;display:grid}.tool-card:hover{border-color:#0f766e73}.tool-card p,.tool-note,.field-note{color:var(--muted);line-height:1.55}.tool-tag{width:fit-content;color:var(--primary-dark);background:#0f766e1a;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:700}.tool-workspace{gap:18px;display:grid}.tool-panel{border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);border-radius:8px;overflow:hidden}.tool-panel-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding:16px;display:flex}.tool-panel-body{gap:16px;padding:16px;display:grid}.split-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.field{gap:8px;display:grid}.field label,.output-label{font-size:14px;font-weight:700}.textarea{resize:vertical;min-height:330px;padding:12px;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:13px;line-height:1.55}.textarea.small{min-height:190px}.output-box{border:1px solid var(--border);min-height:330px;max-height:520px;color:var(--code);white-space:pre-wrap;overflow-wrap:anywhere;background:#fbfcfe;border-radius:8px;padding:12px;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:13px;line-height:1.55;overflow:auto}.output-box.small{min-height:190px}.toolbar{flex-wrap:wrap;gap:8px;display:flex}.button{background:var(--primary);color:#fff;cursor:pointer;border-radius:8px;min-height:38px;padding:9px 12px;font-size:14px;font-weight:700}.button:hover{background:var(--primary-dark)}.button.secondary{background:var(--panel-muted);color:var(--text)}.button.secondary:hover{background:#e4eaf2}.button.danger{color:var(--danger);background:#fff1f0}.button.danger:hover{background:#ffe2df}.status{border:1px solid var(--border);min-height:40px;color:var(--muted);background:#fff;border-radius:8px;padding:10px 12px;line-height:1.45}.status.error{color:var(--danger);background:#fff6f5;border-color:#b423183d}.status.success{color:var(--success);background:#f0fff8;border-color:#0676473d}.result-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.kv-grid{gap:10px;display:grid}.kv-row{border:1px solid var(--border);background:#fbfcfe;border-radius:8px;grid-template-columns:140px minmax(0,1fr);gap:12px;padding:12px;display:grid}.kv-row span{color:var(--muted)}.kv-row strong{overflow-wrap:anywhere}.input-row{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;display:grid}.text-input{min-height:42px;padding:10px 12px}.select-input{border:1px solid var(--border);width:100%;min-height:42px;color:var(--text);background:#fff;border-radius:8px;outline:none;padding:10px 12px}.select-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #0f766e1f}.ad-placeholder{border:1px dashed var(--border);min-height:86px;color:var(--muted);background:#ffffff8c;border-radius:8px;place-items:center;font-size:13px;display:grid}.content-page{max-width:960px}.content-panel{border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);border-radius:8px;gap:24px;padding:24px;display:grid}.content-panel section{gap:10px;display:grid}.content-panel p,.section-heading p,.info-card p{color:var(--muted);line-height:1.7}.inline-button{align-items:center;width:fit-content;display:inline-flex}.info-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}.info-card{border:1px solid var(--border);background:#fbfcfe;border-radius:8px;gap:8px;padding:16px;display:grid}.directory-sections{align-items:start;gap:30px;display:grid}.directory-section{gap:14px;padding-bottom:4px;display:grid}.section-heading{gap:6px;display:grid}.color-swatch{border:1px solid var(--border);border-radius:8px;min-height:120px;box-shadow:inset 0 0 0 1px #ffffff8c}.legal-page{max-width:860px}.legal-updated{color:var(--muted);font-size:14px}.legal-content{border:1px solid var(--border);background:var(--panel);box-shadow:var(--shadow);border-radius:8px;gap:24px;padding:24px;display:grid}.legal-content section{gap:10px;display:grid}.legal-content p{color:var(--muted);line-height:1.7}@media (max-width:820px){h1{font-size:30px}.topbar-inner{flex-direction:column;align-items:flex-start}.brand-mark{flex-basis:50px;width:50px;height:50px}.nav-links{width:100%;padding-bottom:2px;overflow-x:auto}.tool-grid,.split-grid,.result-grid,.info-grid,.directory-sections,.input-row,.kv-row{grid-template-columns:1fr}}