:root{--brand-1:oklch(72% 0.16 265);--brand-2:oklch(65% 0.22 295);--brand-3:oklch(75% 0.15 195);--accent:var(--brand-1);--bg:oklch(16% 0.03 265);--bg-2:oklch(20% 0.035 275);--surface:oklch(23% 0.035 270/.72);--surface-solid:oklch(24% 0.035 270);--surface-2:oklch(28% 0.04 270);--line:oklch(100% 0 0/.09);--line-strong:oklch(100% 0 0/.16);--text:oklch(96% 0.01 270);--muted:oklch(78% 0.03 270);--faint:oklch(64% 0.03 270);--ok:oklch(75% 0.17 155);--warn:oklch(80% 0.15 85);--bad:oklch(68% 0.19 25);--radius:20px;--radius-sm:12px;--shadow:0 20px 50px -12px oklch(0% 0 0/.5);--glow:0 0 80px -20px oklch(65% 0.22 295/.55);--font-display:"Space Grotesk","Inter",system-ui,sans-serif;--font-body:"Inter",system-ui,-apple-system,sans-serif;--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--ease:cubic-bezier(0.16,1,0.3,1);--t-fast:160ms;--t-med:280ms}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:var(--font-body);font-size:16px;line-height:1.7;color:var(--text);background:var(--bg);min-height:100dvh;-webkit-font-smoothing:antialiased;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(42rem 42rem at 12% -8%,oklch(60% .18 265/.16),transparent 60%),radial-gradient(38rem 38rem at 95% 4%,oklch(60% .2 300/.13),transparent 55%),radial-gradient(50rem 30rem at 50% 115%,oklch(60% .14 210/.1),transparent 60%),linear-gradient(180deg,var(--bg),var(--bg-2))}@media (prefers-reduced-motion:no-preference){body:before{animation:ambient 26s var(--ease) infinite alternate}@keyframes ambient{0%{transform:translateZ(0) scale(1)}to{transform:translate3d(0,-2.5%,0) scale(1.05)}}}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}::selection{background:oklch(65% .22 295/.4)}.brand-name,.hero-title,h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.12;text-wrap:balance}:focus-visible{outline:2px solid var(--brand-1);outline-offset:3px;border-radius:6px}.page{max-width:1320px;margin:0 auto;padding:20px 28px 64px;position:relative;z-index:1}@media (min-width:1600px){.page{max-width:1460px}}.header,.topbar{justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 16px;position:-webkit-sticky;position:sticky;top:12px;z-index:50;border:1px solid var(--line);border-radius:999px;background:oklch(20% .03 270/.6);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 8px 32px -12px oklch(0 0 0/.45)}.brand,.header,.topbar{display:flex;align-items:center}.brand{gap:13px;min-width:0}.logo{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:19px;font-weight:800;background:linear-gradient(135deg,var(--brand-1),var(--brand-2));box-shadow:0 6px 24px -6px oklch(65% .22 295/.6);flex:0 0 auto}.brand h1,.brand-name,.brand-text h1{margin:0;font-size:21px;font-weight:700}.brand p,.brand-text p{margin:2px 0 0;color:var(--faint);font-size:12.5px}.header-nav,.nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.nav a,.nav-link{padding:9px 15px;border-radius:999px;color:var(--muted);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:7px;min-height:40px;border:1px solid transparent;cursor:pointer;transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}.nav a:hover,.nav-link:hover{color:var(--text);background:oklch(100% 0 0/.06);border-color:var(--line);transform:translateY(-1px)}.nav a i,.nav-link i{font-size:13px;opacity:.85}.breadcrumbs{margin:22px 4px 0;color:var(--faint);font-size:13.5px}.breadcrumbs a{color:var(--muted);transition:color var(--t-fast)}.breadcrumbs a:hover{color:var(--text)}.breadcrumbs span{margin:0 7px;opacity:.5}.article,.card,.contact-box,.content-card,.example-card,.faq-card,.faq-section,.hero-card,.notice-card,.seo-card,.seo-section,.sidebar-card,.steps-card,.tool-card,.tool-section{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow);padding:26px;position:relative}.card,.content-card,.content-main>.card,.content-main>article,.content-main>section,.page>.faq-section,.page>.seo-section,.page>article,.page>section,.sidebar-card,.tool-card{margin-top:20px}.page>.article,.page>.article~.card{max-width:860px;margin-left:auto;margin-right:auto}.article:before,.hero-card:before,.tool-card:before{content:"";position:absolute;inset:0 0 auto 0;height:1px;border-radius:inherit;background:linear-gradient(90deg,transparent,oklch(72% .16 265/.7),oklch(65% .22 295/.7),transparent);pointer-events:none}.example-card,.faq-card,.notice-card,.seo-card,.sidebar-card,.steps-card{transition:transform var(--t-med) var(--ease),border-color var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)}.faq-card:hover,.seo-card:hover,.sidebar-card:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow),var(--glow)}.content-grid,.dual-grid,.hero{display:grid;grid-gap:18px;gap:18px}.hero{grid-template-columns:1.2fr .8fr;margin-top:22px}.hero:has(>.hero-card:only-child){grid-template-columns:1fr}.hero>.hero-card:only-child{background:oklch(20% .03 270/.55)}.hero>.hero-card:only-child h1{font-size:clamp(34px,6vw,62px)}.hero>.hero-card:only-child .byline,.hero>.hero-card:only-child>p{max-width:62ch}.content-grid{grid-template-columns:1fr 320px;margin-top:20px}.dual-grid{grid-template-columns:1fr 1fr;margin-top:18px}.main-grid,.top-grid{display:grid;grid-gap:18px;gap:18px}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;border:1px solid oklch(72% .16 265/.35);background:oklch(72% .16 265/.1);color:var(--brand-1);font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}.hero-card h1,h1{font-size:clamp(30px,4.6vw,46px);margin:0 0 12px}.hero-card h2,.hero-title{font-size:clamp(28px,4vw,40px);margin:0 0 12px}.article h1,.hero-card h1,.hero-card h2,.tool-head h1{background:linear-gradient(92deg,var(--text) 30%,oklch(85% .09 280) 60%,var(--brand-1));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.article li,.article p,.card li,.card p,.content-card li,.content-card p,.faq-answer,.faq-card p,.hero-card p,.hub-intro,.hub-section li,.hub-section p,.notice-card li,.notice-card p,.seo-card li,.seo-card p,.seo-section p,.sidebar-card li,.sidebar-card p,.steps-card li,.steps-card p,.tool-head p{color:var(--muted);line-height:1.8}.hero-points{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.cat-chip,.flag-chip,.point{padding:9px 14px;border-radius:999px;background:oklch(100% 0 0/.05);border:1px solid var(--line);color:var(--muted);font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:7px;transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}a.cat-chip:hover,a.point:hover{color:var(--text);border-color:var(--brand-1);transform:translateY(-1px)}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 4px}.article h2,.card h2,.content-card h2,.faq-card h2,.faq-section h2,.hub-section h2,.notice-card h2,.seo-card h2,.seo-section h2,.sidebar-card h2,.steps-card h2{font-size:24px;margin:4px 0 14px;color:var(--text)}.article h2,.card h2{margin-top:26px}.article h3,.card h3,.faq-item h3,.faq-question,.hub-section h3,.seo-card h3,.sidebar-card h3,.sidebar-card h4{font-size:17.5px;margin:18px 0 8px;color:var(--text)}h3.sub{color:var(--brand-1)}.byline,.meta{margin:14px 0 22px;color:var(--faint);font-size:13px;font-weight:600}.byline a,.meta a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;-webkit-text-decoration-color:oklch(72% .16 265/.5);text-decoration-color:oklch(72% .16 265/.5)}.byline a:hover,.meta a:hover{color:var(--text)}.byline span{margin:0 7px;opacity:.45}.controls,.field{display:grid;grid-gap:14px;gap:14px}.controls{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:4px 0 14px;align-items:start}.field label,.label,label.label{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-bottom:7px;display:inline-block}input:not([type]),input[type=email],input[type=number],input[type=password],input[type=text],input[type=url],select,textarea{width:100%;background:oklch(14% .025 268/.8);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font-mono);font-size:14px;line-height:1.65;padding:13px 15px;min-height:46px;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}textarea{min-height:210px;resize:vertical}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand-1);box-shadow:0 0 0 3px oklch(72% .16 265/.22)}input::placeholder,textarea::placeholder{color:var(--faint)}.check,.checkbox-wrap{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:14.5px}input[type=checkbox],input[type=range]{accent-color:var(--brand-2);width:auto;min-height:0}.btn-row,.btns,.viewer-actions,.viewer-toolbar{display:flex;gap:11px;flex-wrap:wrap;margin-top:16px}.btn,.copy-btn,.file-btn,.viewer-btn,button{font-family:var(--font-body);font-size:14.5px;font-weight:650;color:var(--text);background:oklch(100% 0 0/.06);border:1px solid var(--line-strong);border-radius:999px;padding:12px 22px;min-height:46px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;touch-action:manipulation;transition:transform var(--t-fast) var(--ease),background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}.btn:hover,button:hover{background:oklch(100% 0 0/.1);border-color:oklch(100% 0 0/.25);transform:translateY(-1px)}.btn:active,button:active{transform:scale(.97)}button:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-primary,.btn-primary-link,.btn-row button:first-child,.btn.btn-primary,.btns button:first-child,button.primary{background:linear-gradient(135deg,var(--brand-1),var(--brand-2));border-color:transparent;color:#fff;box-shadow:0 10px 30px -10px oklch(65% .22 295/.65)}.btn-row button:first-child:hover,.btns button:first-child:hover,button.primary:hover{box-shadow:0 14px 36px -10px oklch(65% .22 295/.8);filter:brightness(1.07)}.status{margin-top:16px;padding:13px 17px;border-radius:var(--radius-sm);border:1px solid var(--line);background:oklch(100% 0 0/.04);color:var(--muted);font-size:14px;font-weight:600}.status.ok,.status.success{border-color:oklch(75% .17 155/.5);color:var(--ok);background:oklch(75% .17 155/.08)}.status.bad,.status.error{border-color:oklch(68% .19 25/.5);color:var(--bad);background:oklch(68% .19 25/.08)}.status.warn,.status.warning{border-color:oklch(80% .15 85/.5);color:var(--warn);background:oklch(80% .15 85/.08)}code{font-size:.88em;padding:2px 7px;border-radius:7px;background:oklch(72% .16 265/.13);border:1px solid oklch(72% .16 265/.18);color:oklch(87% .07 275);word-break:break-word}code,pre{font-family:var(--font-mono)}pre{background:oklch(13% .02 268);border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px;overflow:auto;line-height:1.7;font-size:13.5px;color:oklch(90% .03 270)}pre code{background:none;border:none;padding:0;color:inherit}.example-box,.preview-box,.result-box,.viewer-shell{background:oklch(13% .02 268);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;overflow:auto}.faq-item{padding:18px;border:1px solid var(--line);border-radius:var(--radius-sm);background:oklch(100% 0 0/.028);margin-bottom:12px;transition:border-color var(--t-fast) var(--ease)}.faq-item:hover{border-color:var(--line-strong)}.faq-item h3,.faq-item h4,.faq-question{margin:0 0 8px}.faq-answer,.faq-item p{margin:0;font-size:15px}.tool-links{display:grid;grid-gap:10px;gap:10px;margin-top:12px}.tool-link{display:flex;align-items:center;gap:11px;padding:13px 16px;border-radius:var(--radius-sm);border:1px solid var(--line);background:oklch(100% 0 0/.035);color:var(--text);font-weight:600;font-size:14.5px;cursor:pointer;transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}.tool-link:hover{transform:translateX(4px);border-color:var(--brand-1);background:oklch(72% .16 265/.09)}.tool-link i{color:var(--brand-1);width:18px;text-align:center}.grid,.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-gap:14px;gap:14px;margin-top:18px}.grid:has(.field),.grid:has(>div>select),.grid:has(textarea){grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:start}.grid .field,.grid>div{min-width:0}.grid .card,.grid>a,.item,.tool-grid>a{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:20px;transition:transform var(--t-med) var(--ease),border-color var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)}.grid>a:hover,.tool-grid>a:hover{transform:translateY(-4px);border-color:oklch(72% .16 265/.5);box-shadow:var(--shadow),var(--glow)}.grid>.card{margin-top:0;display:flex;flex-direction:column;transition:transform var(--t-med) var(--ease),border-color var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease)}.grid>.card:hover{transform:translateY(-4px);border-color:oklch(72% .16 265/.5);box-shadow:var(--shadow),var(--glow)}.grid>.card .btn{margin-top:auto;align-self:flex-start}.grid>.card .meta{margin-bottom:10px}.grid>.card h3{margin-top:0;margin-bottom:8px}.grid>.card p{margin:0 0 16px}.tool-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:17px;color:var(--brand-1);background:oklch(72% .16 265/.12);border:1px solid oklch(72% .16 265/.25);margin-bottom:12px}.grid h3,.tool-grid h3{margin:4px 0 6px;font-size:16.5px}.grid p,.tool-grid p{margin:0;color:var(--faint);font-size:13.5px;line-height:1.55}.hub-section{margin-top:22px;padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hub-section h2 a{transition:color var(--t-fast)}.hub-section h2 a:hover{color:var(--brand-1)}.cat-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.tool-card-head{padding:8px 4px 0}table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14.5px}td,th{border:1px solid var(--line);padding:11px 13px;text-align:left;color:var(--muted)}th{color:var(--text);background:oklch(100% 0 0/.045);font-family:var(--font-display);font-size:13.5px;letter-spacing:.02em}td code{color:oklch(85% .12 85);background:oklch(85% .12 85/.08);border-color:oklch(85% .12 85/.15)}.author-box{display:flex;gap:18px;align-items:flex-start;padding:20px;margin:6px 0 22px;border:1px solid var(--line);border-radius:var(--radius-sm);background:oklch(100% 0 0/.035)}.author-avatar{flex:0 0 auto;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-size:24px;letter-spacing:.02em;color:#fff;background:linear-gradient(135deg,var(--brand-1),var(--brand-2));box-shadow:0 8px 24px -8px oklch(65% .22 295/.6);object-fit:cover}.author-avatar,.author-name{font-family:var(--font-display);font-weight:700}.author-name{font-size:19px;color:var(--text)}.author-role{color:var(--brand-1);font-size:13px;font-weight:600;margin-top:2px}.author-bio{margin:10px 0 12px;font-size:14.5px}.author-links{display:flex;flex-wrap:wrap;gap:8px}.author-links a{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:oklch(100% 0 0/.04);color:var(--muted);font-size:13px;font-weight:600;text-decoration:none;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}.author-links a:hover{color:var(--text);border-color:var(--brand-1);transform:translateY(-1px)}.author-links i{color:var(--brand-1);font-size:13px}@media (max-width:560px){.author-box{flex-direction:column;gap:14px}}.footer,footer{margin-top:44px;padding:26px 8px 6px;color:var(--faint);font-size:13.5px;text-align:center;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;align-items:center}.footer div a,footer a{margin:0 9px;color:var(--muted);transition:color var(--t-fast)}.footer div a:hover,footer a:hover{color:var(--text)}@media (prefers-reduced-motion:no-preference){.tz-reveal{opacity:0;transform:translateY(22px)}.tz-reveal.tz-in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--tz-delay,0s)}}.tz-hero3d{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55}@media (max-width:1024px){.content-grid,.hero{grid-template-columns:1fr}}@media (max-width:768px){.page{padding:14px 14px 48px}.controls,.dual-grid{grid-template-columns:1fr}.header,.topbar{border-radius:var(--radius);position:static}.article,.card,.faq-card,.hero-card,.hub-section,.seo-card,.sidebar-card,.tool-card{padding:20px}}