:root{--bg:#fafafa;--surface:#fff;--text:#1a1a1a;--secondary:#525252;--muted:#737373;--border:#e5e5e5;--light:#f0f0f0;--accent:#2563eb;--accent-soft:#eff6ff;--radius:12px;--shadow:0 4px 16px rgba(0,0,0,.06);--transition:all .25s cubic-bezier(.4,0,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}body{font-family:Inter,"Noto Sans SC",-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);line-height:1.7}a{color:inherit}.site-header{position:sticky;top:0;z-index:20;background:rgba(250,250,250,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--light)}.nav-container{max-width:1100px;height:64px;margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:1.15rem;font-weight:700;letter-spacing:-.02em}.logo-avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:14px}.desktop-nav{display:flex;gap:32px}.desktop-nav a{position:relative;text-decoration:none;color:var(--secondary);font-size:.9rem;font-weight:500;padding:4px 0}.desktop-nav a:hover,.desktop-nav a[aria-current=page]{color:var(--text)}.desktop-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;background:var(--text);transition:right .25s}.desktop-nav a:hover:after,.desktop-nav a[aria-current=page]:after{right:0}.mobile-menu-btn{display:none;border:0;background:none;padding:4px}.mobile-menu-btn span{display:block;width:22px;height:2px;background:var(--text);margin:5px;border-radius:2px}.mobile-nav{display:none}
.page-hero{max-width:1100px;margin:auto;padding:42px 24px 30px}.eyebrow{font-size:.7rem;line-height:1.2;font-weight:700;letter-spacing:.14em;color:var(--accent)}.page-hero h1{font-size:2.25rem;line-height:1.2;letter-spacing:-.04em;margin:7px 0 6px}.page-hero>p:not(.eyebrow){color:var(--secondary);font-size:.96rem}.search-box{margin-top:20px;max-width:600px;height:46px;padding:0 14px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 1px 2px rgba(0,0,0,.03);transition:var(--transition)}.search-box:focus-within{border-color:#a3a3a3;box-shadow:0 0 0 3px rgba(37,99,235,.08)}.search-box>span:first-child{font-size:1.35rem;color:var(--muted);transform:rotate(-20deg)}.search-box input{width:100%;border:0;outline:0;background:none;font:inherit;color:var(--text)}.search-box kbd{border:1px solid var(--border);border-radius:5px;background:#f5f5f5;color:var(--muted);padding:0 7px;font:12px/22px inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page-layout{max-width:1100px;margin:auto;padding:0 24px 70px;display:grid;grid-template-columns:96px minmax(0,1fr) 268px;gap:24px;align-items:start}.category-nav{position:sticky;top:88px;display:flex;flex-direction:column;gap:4px;padding-top:2px}.category-nav span{padding:0 10px 8px;color:#a3a3a3;font-size:.68rem;font-weight:700;letter-spacing:.12em}.category-nav a{position:relative;text-decoration:none;font-size:.84rem;color:var(--secondary);padding:7px 10px;border-radius:7px;transition:var(--transition)}.category-nav a:before{content:"";position:absolute;left:0;top:50%;width:2px;height:0;border-radius:2px;background:var(--accent);transform:translateY(-50%);transition:height .2s}.category-nav a:hover{color:var(--accent);background:var(--accent-soft)}.category-nav a:hover:before{height:16px}.resource-section{scroll-margin-top:88px;margin-bottom:16px;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.04)}.section-heading{display:flex;align-items:center;gap:11px;margin-bottom:15px}.section-heading h2{font-size:1.05rem;line-height:1.35;letter-spacing:-.02em}.section-heading p{font-size:.75rem;color:var(--muted)}.section-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;font-size:.86rem;font-weight:700}.blue{background:#dbeafe;color:#2563eb}.amber{background:#fef3c7;color:#d97706}.violet{background:#f3e8ff;color:#7c3aed}.green{background:#dcfce7;color:#16a34a}.cyan{background:#cffafe;color:#0891b2}.rose{background:#ffe4e6;color:#e11d48}.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.resource-card{min-width:0;position:relative;display:flex;flex-direction:column;padding:15px 40px 15px 16px;text-decoration:none;background:#f9fafc;border:1px solid var(--border);border-radius:var(--radius);transition:var(--transition)}.resource-card:hover{transform:translateY(-2px);border-color:#d4d4d4;box-shadow:var(--shadow);background:var(--surface)}.resource-card strong{font-size:.9rem;font-weight:600;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.resource-card span{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.resource-card b{position:absolute;right:15px;top:14px;color:#a3a3a3;font-weight:400;transition:var(--transition)}.resource-card:hover b{color:var(--accent);transform:translate(2px,-2px)}.resource-card[hidden],.resource-section[hidden]{display:none}.empty-state{padding:36px;text-align:center;border:1px dashed var(--border);border-radius:var(--radius);color:var(--muted);background:#fff;margin-bottom:30px}
.tool-panel{position:sticky;top:88px;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.05)}.tool-panel-heading{display:flex;justify-content:space-between;align-items:end;padding-bottom:15px;border-bottom:1px solid var(--light)}.tool-panel-heading h2{font-size:1.1rem;margin-top:5px}.tool-panel-heading>span{font-size:.7rem;color:#15803d;background:#dcfce7;border-radius:999px;padding:3px 8px}.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:15px}.tool-grid button{min-height:94px;border:0;border-radius:10px;background:#f7f7f8;color:var(--secondary);font:500 .78rem inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;cursor:pointer;transition:var(--transition)}.tool-grid button:hover{background:var(--accent-soft);color:var(--accent);transform:translateY(-1px)}.tool-grid i{font-style:normal;font-size:1.25rem;font-weight:700;color:#4f8dde}.privacy-note{font-size:.7rem;color:var(--muted);line-height:1.5;margin-top:15px}.footer-inner{max-width:1100px;margin:auto;padding:38px 24px;display:flex;justify-content:space-between;gap:18px;border-top:1px solid var(--light);color:var(--muted);font-size:.82rem}.footer-inner div{display:flex;gap:20px}.footer-inner a{text-decoration:none}.footer-inner a:hover{color:var(--text)}
dialog{width:min(620px,calc(100% - 32px));max-height:calc(100vh - 48px);margin:auto;padding:0;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 24px 80px rgba(0,0,0,.2);color:var(--text)}dialog::backdrop{background:rgba(17,24,39,.36);backdrop-filter:blur(3px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 17px;border-bottom:1px solid var(--light)}.dialog-header h2{font-size:1.2rem;margin-top:5px}.close-dialog{width:34px;height:34px;border:0;border-radius:50%;background:#f4f4f5;color:var(--secondary);font-size:1.4rem;cursor:pointer}#dialogContent{padding:22px 24px 26px}.field{display:grid;gap:7px;margin-bottom:14px}.field label{font-size:.8rem;font-weight:600}.field textarea,.field input,.field select{width:100%;border:1px solid var(--border);border-radius:9px;background:#fafafa;color:var(--text);padding:10px 12px;font:14px/1.5 inherit;outline:0}.field textarea{min-height:150px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.field input:focus,.field textarea:focus,.field select:focus{border-color:#93c5fd;box-shadow:0 0 0 3px var(--accent-soft)}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.action-row{display:flex;gap:9px;flex-wrap:wrap}.action-btn{border:0;border-radius:8px;padding:9px 14px;background:var(--text);color:#fff;font:600 .82rem inherit;cursor:pointer}.action-btn.secondary{background:#f3f4f6;color:var(--secondary)}.result-box{margin-top:12px;padding:12px;border-radius:9px;background:#f5f5f5;color:var(--secondary);font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.color-preview{height:74px;border-radius:10px;border:1px solid var(--border);margin-bottom:12px}.match{background:#fef3c7;border-radius:2px}.error{color:#dc2626}.success{color:#15803d}
@media(max-width:950px){.page-layout{grid-template-columns:82px minmax(0,1fr)}.tool-panel{position:static;grid-column:2;grid-row:1;order:-1}.resource-content{grid-column:2}.category-nav{grid-column:1;grid-row:1 / span 2}.tool-grid{grid-template-columns:repeat(3,1fr)}.tool-grid button{min-height:82px}}@media(max-width:640px){.nav-container{height:56px;padding:0 20px}.desktop-nav{display:none}.mobile-menu-btn{display:block}.mobile-nav.open{display:flex;position:absolute;top:56px;left:0;right:0;flex-direction:column;padding:10px 20px 16px;background:rgba(250,250,250,.98);border-bottom:1px solid var(--border)}.mobile-nav a{padding:10px 0;text-decoration:none;color:var(--secondary);font-size:.9rem;border-bottom:1px solid var(--light)}.page-hero{padding:34px 20px 24px}.page-hero h1{font-size:1.85rem}.page-layout{grid-template-columns:1fr;padding:0 20px 50px}.category-nav{position:static;grid-column:1;grid-row:auto;flex-direction:row;overflow-x:auto;padding-bottom:4px}.category-nav span{display:none}.category-nav a{white-space:nowrap;border:1px solid var(--border);border-radius:999px;padding:6px 12px;background:var(--surface)}.category-nav a:before{display:none}.tool-panel,.resource-content{grid-column:1;grid-row:auto}.tool-panel{order:0}.resource-content{order:1}.resource-section{padding:16px}.card-grid{grid-template-columns:1fr}.tool-grid{grid-template-columns:repeat(2,1fr)}.footer-inner{padding:30px 20px;flex-direction:column;text-align:center}.footer-inner div{justify-content:center}.field-row{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}