/* DevArea Tools — a small, editorial design system built for the work itself. */
:root{
  color-scheme:light;
  --ink:#171a1b;--ink-2:#242829;--ink-3:#33393a;--paper:#f2f0e9;--paper-2:#e8e5dc;--white:#fffefa;
  --muted:#6c716f;--muted-light:#a6aaa6;--line:#d5d3ca;--line-dark:#3c4242;
  --acid:#d7f77b;--acid-2:#b5df51;--clay:#e56e4f;--blue:#8db7dc;--lilac:#b5a4ed;
  --radius-sm:8px;--radius-md:14px;--radius-lg:22px;--radius-xl:30px;
  --shadow:0 18px 44px rgba(18,20,20,.08);--mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --wrap:1200px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}body.menu-open{overflow:hidden}img,svg{max-width:100%;display:block}a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}button,input,textarea,select{font:inherit}button,a,input,textarea,select{outline-offset:4px}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--clay)}::selection{background:var(--acid);color:var(--ink)}
.skip-link{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--acid);padding:10px 14px;border-radius:6px;font-weight:700}.skip-link:focus{top:12px}
.wrap{width:min(var(--wrap),calc(100% - 48px));margin-inline:auto}.narrow{width:min(820px,calc(100% - 48px));margin-inline:auto}.eyebrow{font:700 11px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;display:flex;align-items:center;gap:10px}.eyebrow:before{content:"";width:18px;height:2px;background:currentColor;display:inline-block}.eyebrow.light{color:var(--acid)}.muted{color:var(--muted)}.mono{font-family:var(--mono)}.small{font-size:13px}.section{padding:100px 0}.section.tight{padding:64px 0}.section.dark{background:var(--ink);color:var(--white)}.section.paper{background:var(--paper)}.section.white{background:var(--white)}.section-heading{display:grid;grid-template-columns:1fr .7fr;gap:70px;align-items:end;margin-bottom:40px}.section-heading h2{font-size:clamp(34px,4vw,58px);line-height:1.02;letter-spacing:-.065em;margin:16px 0 0;font-weight:760;max-width:690px}.section-heading>p{max-width:430px;color:var(--muted);margin:0 0 4px}.section.dark .section-heading>p{color:#adb1ad}.rule{height:1px;background:var(--line)}.dark .rule{background:var(--line-dark)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:46px;padding:12px 17px;border:1px solid transparent;border-radius:6px;text-decoration:none;font-size:13px;font-weight:750;letter-spacing:-.01em;transition:transform .18s ease,background .18s ease,border-color .18s ease;color:var(--ink)}.btn:hover{transform:translateY(-2px)}.btn-dark{background:var(--ink);color:var(--white)}.btn-dark:hover{background:#313637}.btn-acid{background:var(--acid);color:var(--ink)}.btn-acid:hover{background:#e5ff9a}.btn-outline{border-color:#686d6a;background:transparent;color:inherit}.btn-outline:hover{border-color:currentColor;background:rgba(255,255,255,.06)}.btn-clay{background:var(--clay);color:#1b1816}.btn-clay:hover{background:#f18b6f}.btn-light{background:var(--white);color:var(--ink)}.btn-small{min-height:36px;padding:8px 12px;font-size:12px}.text-link{display:inline-flex;gap:10px;align-items:center;font-size:13px;font-weight:760;text-decoration:none;border-bottom:1px solid currentColor;padding:0 0 5px}.text-link span{font-size:18px;line-height:1;transition:transform .18s}.text-link:hover span{transform:translate(3px,-2px)}
/* Header */
.site-header{height:78px;background:var(--ink);color:var(--white);position:relative;z-index:40;border-bottom:1px solid rgba(255,255,255,.12)}.site-header.light-header{background:var(--white);color:var(--ink);border-bottom:1px solid var(--line)}.nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:26px}.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;min-width:max-content}.brand-mark{width:36px;height:36px;display:grid;place-items:center;border:1px solid #727772;border-radius:9px;color:var(--acid);font:800 12px/1 var(--mono);letter-spacing:-.1em;background:rgba(215,247,123,.06)}.light-header .brand-mark{color:var(--ink);border-color:var(--line);background:var(--acid)}.brand-name{font-size:13px;font-weight:850;letter-spacing:.035em;line-height:1.1}.brand-name small{display:block;font:10px/1.5 var(--mono);color:#a6aba5;letter-spacing:.03em;margin-top:3px}.light-header .brand-name small{color:var(--muted)}.nav-links{display:flex;gap:27px;align-items:center;margin-left:auto}.nav-links a{font-size:12px;color:#c5c8c3;text-decoration:none;white-space:nowrap}.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--acid)}.light-header .nav-links a{color:#525957}.light-header .nav-links a:hover,.light-header .nav-links a[aria-current=page]{color:#222}.nav-actions{display:flex;align-items:center;gap:10px}.menu-toggle{display:none;width:42px;height:42px;border:1px solid #555b59;background:transparent;color:inherit;border-radius:7px;font-size:20px}
/* Homepage hero */
.home-hero{background:var(--ink);color:var(--white);position:relative;overflow:hidden;padding:84px 0 72px;isolation:isolate}.home-hero:after{content:"TOOLS";position:absolute;right:-3.5vw;bottom:-.45em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.065);font-size:clamp(180px,31vw,430px);font-weight:900;letter-spacing:-.11em;line-height:.9;z-index:-1;white-space:nowrap;pointer-events:none}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:62px;align-items:center}.hero-copy{position:relative;z-index:2}.hero-copy .eyebrow{color:var(--acid)}.hero-title{font-size:clamp(54px,7.1vw,100px);line-height:.9;letter-spacing:-.085em;font-weight:820;margin:28px 0 25px;max-width:740px}.hero-title .outline{color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.74)}.hero-title .acid{color:var(--acid)}.hero-lead{max-width:535px;color:#c1c6c0;font-size:17px;line-height:1.72;margin:0}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:29px}.hero-note{display:flex;align-items:center;gap:13px;margin-top:40px;color:#b2b7b0;font:11px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.05em}.hero-note .line{height:1px;width:42px;background:var(--acid)}
.hero-visual{min-height:410px;position:relative;display:flex;align-items:center;justify-content:center}.visual-frame{position:relative;width:min(100%,490px);aspect-ratio:1.09;background:#202424;border:1px solid #454b49;border-radius:16px;overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.25)}.visual-frame:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.05) 50%,transparent 50.2%),linear-gradient(transparent 49.8%,rgba(255,255,255,.05) 50%,transparent 50.2%);background-size:42px 42px;opacity:.55}.window-bar{height:43px;padding:0 15px;border-bottom:1px solid #424745;display:flex;align-items:center;gap:7px;position:relative;z-index:1}.window-dot{width:7px;height:7px;border-radius:50%;background:#686e6a}.window-label{margin-left:10px;font:10px/1 var(--mono);color:#a4aaa5;letter-spacing:.07em}.window-tag{margin-left:auto;font:10px var(--mono);color:var(--acid)}.visual-inner{padding:23px;position:relative;z-index:1}.visual-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:23px}.visual-heading span{font:10px var(--mono);color:#b4bbb4}.visual-heading strong{font-size:29px;letter-spacing:-.06em}.visual-codes{display:grid;gap:10px}.visual-code{display:grid;grid-template-columns:84px 1fr;align-items:center;gap:12px;padding:13px 14px;border:1px solid #3f4643;border-radius:8px;background:rgba(12,15,15,.54)}.visual-code .code-label{font:10px var(--mono);color:#aeb4ad}.code-chip{font:12px var(--mono);line-height:1.6;display:flex;flex-wrap:wrap;gap:5px;align-items:center}.seg{display:inline-block;padding:2px 6px;border-radius:3px;background:rgba(229,110,79,.16);color:#ffad94}.seg.lime{background:rgba(215,247,123,.13);color:var(--acid)}.seg.blue{background:rgba(141,183,220,.15);color:var(--blue)}.visual-foot{border-top:1px solid #414744;padding-top:13px;margin-top:20px;display:flex;align-items:center;justify-content:space-between;font:10px var(--mono);color:#a4aba4}.visual-foot strong{color:var(--acid);font-weight:500}.visual-sticker{position:absolute;right:-15px;bottom:18px;width:118px;height:118px;background:var(--acid);color:var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;transform:rotate(10deg);box-shadow:0 12px 24px rgba(0,0,0,.18)}.visual-sticker b{font-size:25px;letter-spacing:-.08em;line-height:1.1}.visual-sticker span{font:9px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.05em;margin-top:4px}
/* Editorial section and tool list */
.intro-strip{background:var(--acid);padding:20px 0;color:var(--ink)}.intro-strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}.intro-strip p{margin:0;font-size:13px;font-weight:750}.intro-strip .mono{font-size:10px;text-transform:uppercase;letter-spacing:.09em}.directory-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:32px}.directory-head h2{font-size:clamp(35px,5vw,65px);letter-spacing:-.075em;line-height:.95;margin:15px 0 0}.directory-head p{max-width:390px;color:var(--muted);margin:0}.tool-filter{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 20px;padding-bottom:16px;border-bottom:1px solid var(--line)}.filter-tabs{display:flex;flex-wrap:wrap;gap:8px}.filter-chip{background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 12px;font:11px var(--mono);color:var(--muted)}.filter-chip[aria-pressed=true]{background:var(--ink);color:var(--white);border-color:var(--ink)}.tool-search{width:min(285px,100%);padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--white);font-size:12px}.directory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.directory-card{display:grid;grid-template-columns:70px 1fr auto;gap:18px;align-items:start;background:var(--white);border:1px solid #d9d7cf;padding:24px;border-radius:10px;min-height:215px;text-decoration:none;transition:transform .18s,border-color .18s,box-shadow .18s}.directory-card:hover{transform:translateY(-3px);border-color:#8b8e85;box-shadow:var(--shadow)}.tool-icon{width:62px;height:62px;display:grid;place-items:center;background:var(--acid);color:var(--ink);border-radius:8px}.tool-icon.clay{background:#f6d1c5}.tool-icon.blue{background:#cfe1f0}.tool-icon svg{width:34px;height:34px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}.tool-index{font:10px var(--mono);color:#91958e;letter-spacing:.08em}.directory-card h3{font-size:25px;line-height:1.05;letter-spacing:-.055em;margin:15px 0 11px;max-width:370px}.directory-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.6;max-width:420px}.card-arrow{font-size:20px;margin-top:0;transition:transform .2s}.directory-card:hover .card-arrow{transform:translate(3px,-3px)}.directory-card[hidden]{display:none}.filter-empty{display:none;padding:25px;background:var(--white);border:1px dashed var(--line);color:var(--muted);font-size:14px}.filter-empty.show{display:block}
/* Purpose bands and guide cards */
.manifesto{display:grid;grid-template-columns:.65fr 1.35fr;gap:80px;align-items:start}.manifesto-side{position:sticky;top:115px}.manifesto-side h2{font-size:14px;line-height:1.3;margin:16px 0 0;font-weight:650}.manifesto-main h3{font-size:clamp(30px,4vw,52px);line-height:1.06;letter-spacing:-.065em;font-weight:720;margin:0 0 24px;max-width:780px}.manifesto-main p{max-width:690px;color:#c2c6c0;font-size:16px;line-height:1.85;margin:0 0 19px}.manifesto-points{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:39px;border-top:1px solid var(--line-dark)}.manifesto-point{padding:20px 18px 0 0}.manifesto-point+.manifesto-point{padding-left:18px;border-left:1px solid var(--line-dark)}.manifesto-point b{display:block;font:11px var(--mono);color:var(--acid);margin-bottom:11px}.manifesto-point strong{font-size:14px;display:block;margin-bottom:6px}.manifesto-point span{font-size:12px;line-height:1.6;color:#aeb3ad;display:block}.guide-list{border-top:1px solid var(--line)}.guide-row{display:grid;grid-template-columns:58px 150px 1fr 110px;gap:22px;align-items:center;padding:21px 0;border-bottom:1px solid var(--line);text-decoration:none}.guide-row:hover .guide-title{color:#646e2e}.guide-number{font:12px var(--mono);color:#9b9e94}.guide-category{font:10px var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}.guide-title{font-size:20px;font-weight:720;letter-spacing:-.04em;line-height:1.25;transition:color .18s}.guide-desc{display:block;font-size:12px;font-weight:450;letter-spacing:0;line-height:1.6;color:var(--muted);margin-top:5px;max-width:620px}.guide-meta{text-align:right;color:var(--muted);font:10px var(--mono)}.guide-row .guide-arrow{display:block;font:18px var(--sans);margin-top:7px}
.cta-panel{background:var(--acid);padding:42px;display:grid;grid-template-columns:1fr auto;gap:35px;align-items:center;border-radius:12px;color:var(--ink);position:relative;overflow:hidden}.cta-panel:after{content:"DA /";position:absolute;right:15%;bottom:-.38em;font-size:150px;line-height:1;font-weight:900;letter-spacing:-.1em;color:rgba(20,25,17,.07);pointer-events:none}.cta-panel>*{position:relative;z-index:1}.cta-panel h2{font-size:clamp(30px,4vw,49px);line-height:1;letter-spacing:-.07em;margin:14px 0 12px}.cta-panel p{max-width:600px;margin:0;color:#404936;font-size:14px}.cta-panel .eyebrow{color:#38422a}
/* Page headers */
.page-hero{padding:78px 0 62px;background:var(--ink);color:var(--white);position:relative;overflow:hidden}.page-hero .wrap{position:relative;z-index:1}.page-hero:after{position:absolute;right:-.05em;bottom:-.32em;font-weight:900;line-height:.8;letter-spacing:-.12em;font-size:clamp(155px,24vw,340px);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.09);white-space:nowrap;pointer-events:none}.page-hero.jwt:after{content:"JWT"}.page-hero.clamp:after{content:"CSS"}.page-hero.blog:after{content:"NOTES"}.page-hero h1{font-size:clamp(46px,7vw,86px);line-height:.94;letter-spacing:-.085em;font-weight:800;margin:23px 0 22px;max-width:890px}.page-hero .lead{font-size:17px;color:#c4c9c2;line-height:1.72;max-width:670px;margin:0}.page-meta{display:flex;gap:17px;flex-wrap:wrap;margin-top:25px;color:#a9afa8;font:10px var(--mono);text-transform:uppercase;letter-spacing:.06em}.page-meta span{display:flex;align-items:center;gap:8px}.page-meta span:before{content:"";width:4px;height:4px;background:var(--acid);display:inline-block;border-radius:50%}.split-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:55px;align-items:center}.hero-aside{border:1px solid #454b48;border-radius:12px;background:#1e2322;padding:24px;position:relative;z-index:1}.hero-aside .aside-label{font:10px var(--mono);color:var(--acid);text-transform:uppercase;letter-spacing:.1em}.hero-aside .code-large{font:clamp(22px,3vw,37px)/1.25 var(--mono);letter-spacing:-.07em;margin:22px 0 10px;overflow-wrap:anywhere}.hero-aside .aside-small{font-size:12px;color:#aeb4ad;max-width:360px}.code-band{display:flex;flex-wrap:wrap;gap:5px;margin-top:22px}.code-band span{padding:8px 10px;border-radius:3px;font:11px var(--mono);background:#303635;color:var(--white)}.code-band span:nth-child(1){background:rgba(229,110,79,.19);color:#ffae98}.code-band span:nth-child(2){background:rgba(215,247,123,.13);color:var(--acid)}.code-band span:nth-child(3){background:rgba(141,183,220,.18);color:var(--blue)}
/* Tool surfaces */
.tool-section{padding:70px 0;background:var(--paper)}.tool-shell{display:grid;grid-template-columns:.7fr 1.3fr;gap:28px;align-items:start}.tool-explainer{padding:17px 4px 0 0}.tool-explainer h2{font-size:clamp(30px,3.4vw,43px);line-height:1.03;letter-spacing:-.065em;margin:18px 0}.tool-explainer p{font-size:14px;color:var(--muted);line-height:1.8}.tool-list{padding:0;margin:26px 0 0;list-style:none;display:grid;gap:13px}.tool-list li{display:flex;gap:11px;align-items:start;font-size:12px;color:#4d5451}.tool-list li:before{content:"";width:14px;height:14px;border:1px solid #9aa08a;display:inline-grid;place-items:center;flex:0 0 14px;margin-top:3px;background:var(--acid);border-radius:3px;box-shadow:inset 0 0 0 3px var(--paper)}
.tool-workbench{background:var(--white);border:1px solid #d5d3ca;border-radius:12px;box-shadow:0 12px 45px rgba(20,25,20,.055);overflow:hidden;min-width:0}.workbench-top{padding:17px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px;background:#faf9f4}.workbench-top h3{font-size:14px;margin:0;letter-spacing:-.02em}.workbench-top span{font:10px var(--mono);color:#777d76}.privacy-note{display:flex;gap:9px;align-items:start;padding:13px 20px;background:#f0f4e8;border-bottom:1px solid #dbe3ca;color:#4d5f32;font-size:11px;line-height:1.5}.privacy-note b{font-weight:800}.workbench-body{padding:20px}.field-label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;font-weight:760;margin-bottom:9px}.field-hint{font:10px var(--mono);font-weight:450;color:var(--muted)}.code-input{width:100%;min-height:126px;resize:vertical;border:1px solid #cbc9c0;border-radius:7px;padding:14px;background:#f8f7f2;color:#222827;font:12px/1.65 var(--mono);overflow-wrap:anywhere}.code-input:focus{border-color:#8e9f66;outline:2px solid rgba(176,211,103,.35)}.field-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}.action-btn{padding:9px 12px;border-radius:5px;border:1px solid #cbc9c0;background:transparent;color:#353a37;font-size:11px;font-weight:750}.action-btn:hover{background:#f0efe7}.action-btn.primary{background:var(--ink);border-color:var(--ink);color:var(--white)}.action-btn.primary:hover{background:#303535}.action-btn.danger{color:#98513c}.tool-status{margin:15px 0 0;min-height:18px;font-size:12px;color:var(--muted)}.tool-status.error{color:#a33d27}.tool-status.success{color:#46612b}.tool-results{border-top:1px solid var(--line);margin-top:19px;padding-top:19px}.results-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:12px}.results-top h4{font-size:13px;margin:0}.result-tabs{display:flex;gap:4px;background:#eae8e0;padding:3px;border-radius:5px}.result-tab{font:10px var(--mono);padding:6px 8px;border:0;border-radius:3px;background:transparent;color:#5a605a}.result-tab[aria-selected=true]{background:var(--white);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}.jwt-results-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.result-panel{min-width:0;border:1px solid #d9d7cf;border-radius:7px;overflow:hidden;background:#f8f7f2}.result-panel.wide{grid-column:1/-1}.result-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid #dddacf;background:#eeece4}.result-panel-head strong{font:10px var(--mono);text-transform:uppercase;letter-spacing:.06em}.result-panel-head button{border:0;background:transparent;font:10px var(--mono);color:#687064}.result-panel pre{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;padding:13px;margin:0;font:11px/1.7 var(--mono);max-height:270px;overflow:auto;color:#343936}.result-panel .segment-value{padding:13px;font:10px/1.7 var(--mono);word-break:break-all;color:#666b64;max-height:130px;overflow:auto}.claim-wrap{overflow:auto;border:1px solid #d9d7cf;border-radius:7px;margin-top:14px}.claim-table{border-collapse:collapse;width:100%;min-width:450px;font-size:11px}.claim-table th,.claim-table td{text-align:left;padding:10px 12px;border-bottom:1px solid #e4e1d8;vertical-align:top}.claim-table th{background:#f0eee6;font:10px var(--mono);color:#656b64}.claim-table td:first-child{font-family:var(--mono);font-weight:700}.claim-table tr:last-child td{border-bottom:0}.status-pill{display:inline-flex;padding:3px 7px;border-radius:4px;background:#e7efda;color:#4c672d;font:10px var(--mono)}.status-pill.warn{background:#f6e3d8;color:#924b32}.status-pill.neutral{background:#e7e8e5;color:#535953}
/* CSS clamp controls */
.clamp-tool-section{padding:72px 0;background:#f5f1e8}.clamp-layout{display:grid;grid-template-columns:.92fr 1.08fr;gap:20px;align-items:start}.settings-panel,.output-panel{background:var(--white);border:1px solid #d9d5ca;border-radius:12px;overflow:hidden;min-width:0}.settings-header,.output-header{padding:18px 20px;background:#f9f7f1;border-bottom:1px solid #dfdcd2;display:flex;justify-content:space-between;align-items:center;gap:15px}.settings-header h2,.output-header h2{margin:0;font-size:14px;letter-spacing:-.02em}.settings-header span,.output-header span{font:10px var(--mono);color:#777d75}.settings-body{padding:20px}.preset-list{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:23px}.preset{border:1px solid #d5d3ca;background:transparent;border-radius:5px;padding:7px 9px;font:10px var(--mono);color:#575d56}.preset:hover,.preset[aria-pressed=true]{background:var(--acid);border-color:#a3bf65;color:var(--ink)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-field{min-width:0}.form-field label{display:block;font-size:11px;font-weight:780;margin-bottom:7px}.form-field input,.form-field select{width:100%;min-width:0;background:#fbfaf5;border:1px solid #d3d0c6;border-radius:5px;padding:10px 11px;font:12px var(--mono);color:var(--ink)}.form-field input:focus,.form-field select:focus{border-color:#94a85e}.field-unit-row{display:grid;grid-template-columns:1fr 82px;gap:7px}.form-divider{grid-column:1/-1;height:1px;background:#e2dfd7;margin:3px 0}.form-note{font-size:10px;color:var(--muted);line-height:1.5;margin:12px 0 0}.output-body{padding:20px}.output-code{background:#181c1c;color:#f3f3eb;border-radius:7px;padding:18px;position:relative;min-height:116px}.output-code .output-label{font:10px var(--mono);color:#9ea79e;display:block;margin-bottom:13px;text-transform:uppercase;letter-spacing:.08em}.output-code code{font:12px/1.8 var(--mono);color:var(--acid);white-space:pre-wrap;overflow-wrap:anywhere}.output-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.preview-stage{margin-top:20px;border:1px solid #e0ddd4;border-radius:7px;overflow:hidden}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;background:#f4f2ea;border-bottom:1px solid #e0ddd4}.preview-toolbar label{font:10px var(--mono);color:#656b64}.preview-width{font:10px var(--mono);color:#343a35;white-space:nowrap}.preview-toolbar input{width:100%;accent-color:#6b7f32}.preview-canvas{min-height:185px;background:#fffefa;padding:24px;overflow:hidden}.preview-object{width:100%;margin-inline:auto;padding:18px;background:#e8f0d5;border:1px solid #d1dfae;border-radius:8px;color:#22281b;transition:all .12s}.preview-object .preview-title{margin:0 0 8px;font-weight:790;line-height:1.06;letter-spacing:-.055em;overflow-wrap:anywhere}.preview-object .preview-copy{font-size:12px;line-height:1.6;margin:0;color:#525d45}.preview-object .preview-chip{display:inline-block;margin-top:13px;background:#22281b;color:#f9faef;border-radius:4px;padding:5px 7px;font:10px var(--mono)}.calculated-value{display:flex;justify-content:space-between;gap:16px;padding:13px 0 0;font-size:11px;color:var(--muted)}.calculated-value strong{font:12px var(--mono);color:var(--ink)}.tailwind-block{margin-top:18px;padding-top:16px;border-top:1px solid #e1ded5}.tailwind-block .field-label{margin-bottom:8px}.tailwind-output{font:10px/1.6 var(--mono);overflow-wrap:anywhere;color:#5d655b;background:#f5f3ec;border-radius:5px;padding:10px 12px}
/* Explainer, FAQ, prose */
.content-section{padding:82px 0;background:var(--white)}.content-grid{display:grid;grid-template-columns:.65fr 1.35fr;gap:80px}.content-aside{align-self:start;position:sticky;top:112px}.content-aside h2{font-size:28px;line-height:1.04;letter-spacing:-.06em;margin:17px 0}.content-aside p{font-size:13px;color:var(--muted);line-height:1.75}.content-main h2{font-size:clamp(27px,3.2vw,40px);line-height:1.08;letter-spacing:-.065em;margin:0 0 18px}.content-main h3{font-size:22px;line-height:1.15;letter-spacing:-.04em;margin:29px 0 10px}.content-main p{font-size:14px;line-height:1.9;color:#535954;margin:0 0 16px}.content-main ul,.content-main ol{padding-left:21px;color:#535954;font-size:14px;line-height:1.9}.content-main li{padding-left:3px;margin-bottom:5px}.content-main a{color:#3f5c29;text-decoration-thickness:1px}.answer-card{border-left:3px solid var(--acid-2);background:#f5f7ed;padding:16px 18px;margin:0 0 27px;color:#38452c;font-size:14px;line-height:1.8}.answer-card strong{display:block;margin-bottom:5px;font-size:10px;text-transform:uppercase;font-family:var(--mono);letter-spacing:.08em}.data-table-wrap{overflow-x:auto;margin:21px 0 27px}.data-table{border-collapse:collapse;width:100%;font-size:12px;line-height:1.6;min-width:470px}.data-table th,.data-table td{border:1px solid #e2dfd6;padding:11px 12px;text-align:left;vertical-align:top}.data-table th{font:10px var(--mono);text-transform:uppercase;letter-spacing:.04em;background:#f0eee6;color:#5a605a}.code-block{margin:20px 0 24px;background:#1b1f1f;color:#f3f3eb;border-radius:8px;overflow:hidden}.code-block .code-top{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid #3a403e;color:#adb6ab;font:10px var(--mono)}.code-block pre{margin:0;padding:17px;overflow:auto;font:12px/1.8 var(--mono);white-space:pre}.inline-code{font-family:var(--mono);font-size:.88em;background:#f0eee6;padding:2px 5px;border-radius:4px;color:#3b4434}.notice{border:1px solid #e5c9ba;background:#fbf1eb;padding:15px 16px;border-radius:7px;margin:23px 0;color:#734c3c;font-size:12px;line-height:1.75}.notice strong{display:block;color:#593322;margin-bottom:5px}.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line);padding:0}.faq-list summary{cursor:pointer;list-style:none;position:relative;padding:19px 35px 19px 0;font-size:14px;font-weight:750;letter-spacing:-.015em}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:"+";position:absolute;right:4px;top:16px;font-size:22px;font-weight:350;color:#777d73}.faq-list details[open] summary:after{content:"−"}.faq-list details p{color:var(--muted);font-size:13px;line-height:1.8;margin:0;padding:0 30px 20px 0;max-width:760px}.faq-wrap{padding:75px 0;background:var(--paper)}.faq-wrap .wrap{display:grid;grid-template-columns:.65fr 1.35fr;gap:75px}.faq-wrap h2{font-size:clamp(28px,3vw,42px);line-height:1.03;letter-spacing:-.06em;margin:15px 0}
/* Blog and article */
.blog-index{padding:58px 0 94px;background:var(--paper)}.blog-tools{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}.blog-filter{display:flex;gap:7px;flex-wrap:wrap}.blog-list{border-top:1px solid var(--line)}.blog-item{display:grid;grid-template-columns:66px 170px 1fr 120px;gap:20px;align-items:start;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none}.blog-item:hover .blog-item-title{color:#6c762e}.blog-item-number{font:11px var(--mono);color:#999e94;padding-top:4px}.blog-item-category{font:10px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding-top:5px}.blog-item-title{font-size:24px;line-height:1.12;letter-spacing:-.055em;font-weight:740;margin:0;transition:color .18s}.blog-item-desc{font-size:13px;line-height:1.65;color:var(--muted);font-weight:450;letter-spacing:0;display:block;margin-top:8px;max-width:680px}.blog-item-meta{font:10px var(--mono);color:var(--muted);text-align:right;padding-top:4px}.blog-item[hidden]{display:none}.article-hero{background:var(--paper);padding:62px 0 42px;border-bottom:1px solid var(--line)}.breadcrumbs{display:flex;gap:9px;align-items:center;flex-wrap:wrap;font:10px var(--mono);color:#7d8279;margin-bottom:24px}.breadcrumbs a{text-decoration:none}.breadcrumbs a:hover{color:var(--ink)}.article-kicker{font:10px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:#6d7c42;display:flex;align-items:center;gap:9px}.article-kicker:before{content:"";width:22px;height:2px;background:var(--acid-2)}.article-hero h1{font-size:clamp(40px,6.5vw,76px);line-height:.97;letter-spacing:-.08em;max-width:970px;margin:20px 0 18px}.article-dek{font-size:17px;line-height:1.65;color:#656b65;max-width:770px;margin:0}.article-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px;font:10px var(--mono);text-transform:uppercase;color:#8a8e85;letter-spacing:.05em}.article-layout{display:grid;grid-template-columns:190px minmax(0,790px);gap:65px;justify-content:center;padding:55px 24px 90px;background:var(--white)}.toc{align-self:start;position:sticky;top:105px}.toc h2{font:10px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:#858b80;margin:0 0 15px}.toc a{display:block;text-decoration:none;color:#687068;font-size:11px;line-height:1.5;padding:8px 0;border-bottom:1px solid #ebe9e1}.toc a:hover{color:#516626}.article-body{min-width:0}.article-body .answer-card{font-size:14px;margin-bottom:28px}.article-body h2{font-size:clamp(26px,3vw,36px);line-height:1.08;letter-spacing:-.055em;margin:45px 0 17px;scroll-margin-top:100px}.article-body h3{font-size:22px;line-height:1.2;letter-spacing:-.045em;margin:29px 0 10px;scroll-margin-top:100px}.article-body p{font-size:15px;line-height:1.9;color:#505752;margin:0 0 18px}.article-body li{font-size:14px;line-height:1.85;color:#505752;margin-bottom:7px}.article-body ul,.article-body ol{padding-left:22px;margin:12px 0 25px}.article-body blockquote{margin:23px 0;padding:16px 20px;border-left:3px solid var(--acid-2);background:#f5f6ed;color:#414b34}.article-body hr{border:0;border-top:1px solid var(--line);margin:40px 0}.article-sources{margin-top:45px;padding-top:24px;border-top:1px solid var(--line)}.article-sources h2{font-size:20px;margin:0 0 12px}.article-sources ul{padding-left:18px}.article-sources li,.article-sources a{font-size:12px}.related-guides{padding:66px 0;background:var(--paper)}.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.related-card{padding:20px;background:var(--white);border:1px solid var(--line);border-radius:8px;text-decoration:none}.related-card .eyebrow{color:#858b7f;font-size:9px}.related-card h3{font-size:20px;line-height:1.1;letter-spacing:-.05em;margin:15px 0 9px}.related-card p{font-size:12px;color:var(--muted);line-height:1.65;margin:0}.related-card .related-arrow{display:block;text-align:right;font-size:20px;margin-top:17px}
/* Company/legal pages */
.simple-page{padding:67px 0 90px;background:var(--white)}.simple-page h1{font-size:clamp(42px,6vw,68px);line-height:.98;letter-spacing:-.08em;margin:18px 0 20px}.simple-page .simple-lead{font-size:17px;line-height:1.7;color:var(--muted);max-width:760px}.simple-page .prose{max-width:800px;margin-top:40px}.simple-page .prose h2{font-size:25px;letter-spacing:-.05em;line-height:1.15;margin:34px 0 10px}.simple-page .prose p,.simple-page .prose li{font-size:14px;line-height:1.9;color:#505752}.simple-page .prose a{color:#4a632a}.contact-panel{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}.contact-method{padding:25px;background:var(--paper);border:1px solid var(--line);border-radius:9px}.contact-method small{font:10px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.contact-method h2{font-size:24px;line-height:1.1;letter-spacing:-.05em;margin:15px 0}.contact-method p{font-size:13px;color:var(--muted);line-height:1.7}.contact-method a{overflow-wrap:anywhere}
/* Footer */
.site-footer{background:#141717;color:var(--white);padding:56px 0 20px}.footer-top{display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:45px;padding-bottom:45px}.footer-brand p{font-size:12px;line-height:1.8;color:#abb1a9;max-width:270px;margin:20px 0 12px}.footer-brand .ecosystem-link{color:var(--acid);font-size:11px;text-decoration:none}.footer-col h2{font:10px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:#929990;margin:4px 0 18px}.footer-col a{display:block;font-size:12px;color:#c3c8c0;text-decoration:none;margin:11px 0;line-height:1.5}.footer-col a:hover{color:var(--acid)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-top:17px;border-top:1px solid #3a403e;font:10px var(--mono);color:#929990}.footer-bottom a{color:var(--acid);text-decoration:none}.footer-note{font:10px/1.7 var(--mono);color:#747d72;max-width:400px;text-align:right}.back-to-top{position:fixed;z-index:30;right:18px;bottom:18px;width:42px;height:42px;border:1px solid #515853;border-radius:6px;background:var(--ink);color:var(--acid);font-size:20px;opacity:0;visibility:hidden;transform:translateY(7px);transition:all .2s}.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
/* Responsive */
@media(max-width:1000px){.wrap{width:min(var(--wrap),calc(100% - 36px))}.nav-links{gap:16px}.nav-links a{font-size:11px}.nav-actions .btn{padding-inline:12px}.hero-grid{gap:35px}.hero-title{font-size:clamp(52px,7.4vw,76px)}.hero-visual{min-height:370px}.visual-sticker{right:-5px;width:93px;height:93px}.visual-sticker b{font-size:21px}.section-heading{gap:35px}.manifesto,.content-grid,.faq-wrap .wrap{gap:45px}.tool-shell{grid-template-columns:.65fr 1.35fr;gap:20px}.clamp-layout{grid-template-columns:.9fr 1.1fr;gap:12px}.settings-body,.output-body{padding:15px}.article-layout{grid-template-columns:160px minmax(0,720px);gap:35px}.footer-top{gap:26px}}
@media(max-width:760px){html{scroll-padding-top:78px}.wrap,.narrow{width:calc(100% - 34px)}.site-header{height:68px}.brand-mark{width:33px;height:33px}.menu-toggle{display:block;margin-left:auto}.nav-actions{display:none}.nav-links{display:none;position:absolute;top:67px;left:0;right:0;padding:20px 22px 24px;background:var(--ink);border-bottom:1px solid #3b4240;flex-direction:column;align-items:stretch;gap:0;margin:0}.light-header .nav-links{background:var(--white);border-color:var(--line)}.nav-links.open{display:flex}.nav-links a{font-size:14px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.1)}.light-header .nav-links a{border-color:var(--line)}.home-hero{padding:56px 0 45px}.hero-grid{grid-template-columns:1fr;gap:32px}.hero-title{font-size:clamp(49px,12.6vw,78px);margin:24px 0 20px}.hero-lead{font-size:15px}.hero-actions{margin-top:24px}.hero-visual{min-height:315px}.visual-frame{max-width:490px}.visual-inner{padding:17px}.visual-heading strong{font-size:24px}.visual-sticker{right:0;bottom:9px;width:78px;height:78px}.visual-sticker b{font-size:17px}.visual-sticker span{font-size:7px}.hero-note{margin-top:28px}.intro-strip{padding:14px 0}.intro-strip .wrap{align-items:start;flex-direction:column;gap:5px}.intro-strip p{font-size:12px}.section{padding:68px 0}.section.tight{padding:48px 0}.section-heading{grid-template-columns:1fr;gap:16px;margin-bottom:29px}.section-heading h2{font-size:clamp(33px,9vw,48px)}.directory-head{align-items:start;flex-direction:column;gap:16px}.directory-head h2{font-size:clamp(39px,10vw,55px)}.tool-filter{align-items:stretch;flex-direction:column}.tool-search{width:100%}.directory-grid{grid-template-columns:1fr}.directory-card{grid-template-columns:54px 1fr auto;gap:13px;min-height:0;padding:19px}.tool-icon{width:50px;height:50px}.tool-icon svg{width:28px;height:28px}.directory-card h3{font-size:21px;margin:12px 0 7px}.directory-card p{font-size:12px}.manifesto{grid-template-columns:1fr;gap:28px}.manifesto-side{position:static}.manifesto-main h3{font-size:clamp(31px,7.6vw,43px)}.manifesto-main p{font-size:14px}.manifesto-points{grid-template-columns:1fr;gap:0}.manifesto-point,.manifesto-point+.manifesto-point{padding:17px 0;border-left:0;border-bottom:1px solid var(--line-dark)}.manifesto-point:last-child{border-bottom:0}.guide-row{grid-template-columns:34px 1fr 30px;gap:12px;padding:18px 0}.guide-category{display:none}.guide-title{font-size:17px}.guide-desc{font-size:11px}.guide-meta{font-size:9px;grid-column:2;text-align:left}.guide-row .guide-arrow{display:inline;float:right;margin-left:5px}.cta-panel{padding:26px;grid-template-columns:1fr;gap:20px}.cta-panel:after{font-size:100px;right:-1%;bottom:-.4em}.cta-panel .btn{justify-self:start}.page-hero{padding:52px 0 40px}.page-hero h1{font-size:clamp(43px,11vw,65px);margin:21px 0 17px}.page-hero .lead{font-size:15px}.page-hero:after{font-size:45vw}.split-hero{grid-template-columns:1fr;gap:25px}.hero-aside{padding:19px}.tool-section,.clamp-tool-section{padding:45px 0}.tool-shell{grid-template-columns:1fr;gap:20px}.tool-explainer{padding:0}.tool-explainer h2{font-size:33px;margin:14px 0}.tool-explainer p{font-size:13px}.tool-list{grid-template-columns:1fr 1fr;gap:11px 18px;margin-top:17px}.tool-list li{font-size:11px}.workbench-top,.settings-header,.output-header{padding:13px 15px}.workbench-body{padding:14px}.code-input{min-height:110px;font-size:11px}.jwt-results-grid{grid-template-columns:1fr}.result-panel.wide{grid-column:auto}.result-panel pre{max-height:220px}.results-top{align-items:flex-start;flex-direction:column}.clamp-layout{grid-template-columns:1fr;gap:15px}.settings-body,.output-body{padding:15px}.preview-canvas{padding:14px;min-height:160px}.content-section,.faq-wrap{padding:55px 0}.content-grid,.faq-wrap .wrap{grid-template-columns:1fr;gap:25px}.content-aside{position:static}.content-aside h2{font-size:25px}.content-main h2{font-size:30px}.content-main h3{font-size:20px}.content-main p,.content-main ul,.content-main ol{font-size:13px}.faq-wrap h2{font-size:30px}.blog-index{padding:38px 0 64px}.blog-tools{align-items:stretch;flex-direction:column}.blog-item{grid-template-columns:29px 1fr 75px;gap:10px;padding:18px 0}.blog-item-category{display:none}.blog-item-title{font-size:19px}.blog-item-desc{font-size:12px}.blog-item-meta{font-size:9px;grid-column:2;text-align:left}.blog-item-number{grid-row:1/3}.article-hero{padding:40px 0 30px}.article-hero h1{font-size:clamp(37px,9.6vw,58px)}.article-dek{font-size:15px}.article-layout{display:flex;flex-direction:column;gap:28px;padding:32px 17px 60px}.toc{position:static;width:100%;background:#f5f3ec;border:1px solid var(--line);border-radius:7px;padding:14px}.toc h2{margin-bottom:7px}.toc a{display:inline-block;border:1px solid #dedbd1;border-radius:4px;background:var(--white);padding:6px 8px;margin:4px 3px 0 0;font-size:10px}.article-body h2{font-size:29px;margin-top:36px}.article-body h3{font-size:20px}.article-body p{font-size:14px}.article-body .code-block pre{font-size:11px;padding:13px}.related-guides{padding:48px 0}.related-grid{grid-template-columns:1fr}.related-card{padding:17px}.simple-page{padding:44px 0 60px}.simple-page h1{font-size:43px}.contact-panel{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr 1fr;gap:28px 20px}.footer-brand{grid-column:1/-1}.footer-bottom{align-items:flex-start;flex-direction:column;gap:9px}.footer-note{text-align:left}.section-heading>p{font-size:13px}.related-card h3{font-size:20px}}
@media(max-width:390px){.wrap,.narrow{width:calc(100% - 28px)}.brand-name{font-size:11px}.hero-title{font-size:46px}.hero-actions .btn{width:100%}.visual-code{grid-template-columns:62px 1fr;padding:10px}.code-chip{font-size:10px}.visual-foot{font-size:9px}.directory-card{grid-template-columns:45px 1fr 18px;padding:15px 12px;gap:10px}.tool-icon{width:42px;height:42px}.directory-card h3{font-size:19px}.form-grid{gap:11px}.field-unit-row{grid-template-columns:1fr 72px}.tool-list{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr}.footer-brand{grid-column:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}