:root{--background:#f6f7ed;--foreground:#172a20;--primary:#174e31;--primary-foreground:#fff;--secondary:#f5d639;--border:#cbd7c8}
*{box-sizing:border-box}body{margin:0;background:var(--background);color:var(--foreground);font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}.page{min-height:100svh;overflow:hidden;position:relative}.page:before{content:"";position:absolute;right:-20vw;top:9rem;width:58vw;height:58vw;max-width:800px;max-height:800px;border:clamp(40px,6vw,90px) solid #e3ebd9;border-radius:50%;pointer-events:none}header,footer{position:relative;max-width:1440px;margin:auto;padding:26px clamp(22px,5vw,76px);display:flex;justify-content:space-between;align-items:center}header{border-bottom:1px solid #cbd7c8}.logo{text-decoration:none;color:#174e31;font-weight:900;font-size:2.8rem;letter-spacing:-.1em;line-height:1;padding-right:.1em}.logo span{color:#e5c927}header small{font-weight:700;color:#52715a;letter-spacing:.15em}article{position:relative;max-width:1440px;margin:auto;padding:clamp(55px,8vw,110px) clamp(22px,9vw,130px) 90px}.eyebrow{display:flex;align-items:center;gap:14px;font-weight:800;letter-spacing:.17em;color:#547b5d;font-size:.78rem}.eyebrow b{width:32px;height:3px;background:#e5c927}h1{font-size:clamp(4rem,10vw,9.5rem);letter-spacing:-.085em;line-height:.91;font-weight:900;margin:26px 0 24px}h1 em{font-style:normal;color:#287a46}.eyes{display:inline-block;font-size:clamp(2rem,4vw,4rem);vertical-align:top;letter-spacing:0;transform:rotate(-12deg);margin:.05em 0 0 .3em}.intro{font-size:clamp(1.5rem,2.6vw,2.4rem);margin:0 0 42px}.copy{font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.6;max-width:680px}.copy p{margin:0 0 24px}.slogan{display:inline-block;background:#f5d639;padding:19px 24px 22px;margin:5px 0 34px;transform:rotate(-1.5deg);box-shadow:7px 7px 0 #174e31;font-weight:900;font-size:clamp(1.4rem,3vw,2.7rem);letter-spacing:-.05em}.slogan span{color:#287a46}.signup{margin-top:85px;max-width:900px;background:#174e31;color:white;padding:clamp(26px,4.5vw,56px);display:grid;grid-template-columns:.9fr 1.1fr;gap:42px;box-shadow:12px 12px 0 #dce7ce}.signup h2{margin:0 0 16px;font-size:clamp(1.8rem,3vw,2.8rem);letter-spacing:-.055em;line-height:1.05}.signup p{line-height:1.5;margin:0}.fields{display:grid;grid-template-columns:1fr 1.2fr;gap:14px}.fields label{font-size:.9rem;font-weight:700}.fields label span{font-weight:400;opacity:.8}.fields input{display:block;width:100%;min-width:0;margin-top:9px;height:49px;border:0;padding:0 13px;color:#172a20;background:white}.consent{display:flex;align-items:flex-start;gap:11px;margin:18px 0;font-size:.85rem;line-height:1.4;cursor:pointer}.consent input{width:18px;height:18px;flex:none;margin:0;accent-color:#f5d639}.signup button{background:#f5d639;border:0;padding:15px 20px;color:#143c25;font-weight:800;cursor:pointer}.signup button:hover{background:#ffe762}.signup button:disabled{opacity:.7}.signup .privacy{font-size:.76rem;opacity:.85;margin-top:17px}.signup .error{color:#ffe58b;margin-top:12px}.success{align-self:center;background:#f5d639;color:#143c25;padding:22px;font-weight:800}.honeypot{position:absolute;left:-10000px;opacity:0}input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #e5c927;outline-offset:2px}footer{border-top:1px solid #cbd7c8;color:#42624a;font-size:.83rem;gap:15px}@media(max-width:720px){header small{text-align:right;font-size:.65rem}article{padding-top:70px}.page:before{right:-45vw;top:8rem;width:100vw;height:100vw}.signup{grid-template-columns:1fr;gap:25px;margin-top:65px}.fields{grid-template-columns:1fr}footer{font-size:.75rem}}

:root{--background:#121c18;--foreground:#eff4e9;--primary:#174e31;--primary-foreground:#fff;--border:#354a3e}
body{background:#121c18;color:#eff4e9}.page{background:radial-gradient(circle at 78% 26%,#203b2a 0,#121c18 48%)}.page:before{border-color:#294832;opacity:.42;top:20rem}header{border-color:#344c3d}.logo{color:#f4f6ed}header small{color:#9fba9d}.editor{max-width:850px;margin:-30px 0 58px;border:1px solid #3a5644;background:#17231d;box-shadow:15px 15px 0 #0c1510;transform:rotate(-1deg);overflow:hidden}.editor-bar{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid #38513d;background:#22342a;color:#bac9b5;font:12px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace}.lights{display:flex;gap:6px}.lights i{display:block;width:9px;height:9px;border-radius:50%;background:#e4c736}.lights i:nth-child(2){background:#699c67}.lights i:nth-child(3){background:#60776a}.editor-state{color:#b9d89a}.code{padding:23px 20px 25px;color:#d6e0d1;font:clamp(12px,1.25vw,16px)/1.85 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap;overflow:hidden}.code .num{display:inline-block;width:38px;color:#698274;user-select:none}.code .purple{color:#c5aee5}.code .yellow{color:#f5d639}.code .green{color:#8ac59d}.code .muted{color:#8eaa92}.cursor{color:#f5d639;animation:blink 1s step-end infinite}@keyframes blink{50%{opacity:0}}@media(prefers-reduced-motion:reduce){.cursor{animation:none}}.eyebrow{color:#aad3aa}h1 em{color:#8fd195}.copy{color:#e0ebde}.slogan{color:#183c28}.signup{border:1px solid #62866a;background:#204f35;box-shadow:12px 12px 0 #0d2518}.signup .privacy{color:#d9e8d5}footer{border-color:#344c3d;color:#a4bea7}@media(max-width:720px){.editor{margin:-35px 0 55px;transform:rotate(-.5deg)}.editor-bar{font-size:10px;gap:8px}.editor-state{display:none}.code{padding:16px 12px}.code .num{width:27px}.page:before{top:22rem}}

.preview-shell{position:relative;margin:0 0 30px;max-width:980px;border:2px dashed #90aa86;background:#edf2e9;color:#24392a;box-shadow:10px 10px 0 #0b1510}.preview-toolbar{display:flex;justify-content:space-between;gap:16px;padding:10px 17px;border-bottom:2px dashed #90aa86;background:#dce8d7;color:#3e6948;font:12px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.02em}.preview-toolbar span:last-child{color:#58705b}.preview-body{padding:clamp(22px,5vw,48px);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.dev-note,.end-note{color:#66896c;font-size:.82rem;line-height:1.5}.dev-note{margin-bottom:33px}.end-note{margin-top:40px;border-top:2px dashed #c7d6c2;padding-top:22px}.preview-body .eyebrow{font-size:.75rem;letter-spacing:.06em;color:#5f805e}.preview-body h1{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;max-width:690px;font-size:clamp(2.35rem,5vw,5rem);line-height:1.13;letter-spacing:-.065em;font-weight:700;margin:21px 0 24px}.preview-body h1 em{color:#245f37;background:#f9e491;padding:0 .08em;border-bottom:3px dashed #4d7950}.preview-body h1 .eyes{font-size:clamp(1.6rem,2.8vw,2.7rem);transform:none;margin-left:.28em}.preview-body .intro{font-size:1.2rem;margin-bottom:34px;font-weight:600}.preview-body .copy{font-size:1rem;line-height:1.65;color:#273c2b;max-width:680px}.preview-body .copy p{margin-bottom:21px}.preview-body .slogan{display:inline-block;font-size:clamp(1.1rem,2.1vw,1.8rem);letter-spacing:-.05em;transform:none;box-shadow:none;border:2px dashed #567c56;background:#f7df58;padding:12px 14px;margin:0 0 28px;font-weight:700}.preview-body .signup{display:block;max-width:720px;margin-top:53px;padding:25px;border:2px dashed #6d936d;background:transparent;color:#24392a;box-shadow:none}.preview-body .signup:before{content:'// formulier: klaar voor gebruik';display:block;color:#66896c;font-size:.8rem;margin-bottom:16px}.preview-body .signup h2{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:1.5rem;line-height:1.25;letter-spacing:-.05em;margin-bottom:10px}.preview-body .signup>div>p{font-size:.95rem}.preview-body form{margin-top:23px}.preview-body .fields input{border:1px solid #7f9b7a;border-radius:0;background:#f8faf5;color:#24392a}.preview-body .consent input{accent-color:#286b42}.preview-body button{border:1px solid #245b38;background:#d7e7d2;color:#234d30;font-size:.95rem;padding:12px 17px}.preview-body button:hover{background:#c7debF}.preview-body .privacy{color:#5c715c}.preview-body .error{color:#a12525}.preview-body .success{background:#d7e7d2;color:#234d30;border:1px dashed #245b38;margin-top:22px}footer{margin-top:30px}@media(max-width:720px){.preview-toolbar{font-size:.65rem}.preview-toolbar span:last-child{display:none}.preview-body{padding:20px}.preview-body .signup{padding:17px}.preview-body .fields{grid-template-columns:1fr}}
.countdown{max-width:680px;margin:-5px 0 38px;border:2px dashed #88a882;background:#dfeadd;padding:16px 18px;color:#284932}.countdown-heading{display:flex;justify-content:space-between;gap:18px;color:#4c7653;font:700 .75rem/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.02em}.countdown-units{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}.time-unit{min-width:0;border:1px dashed #95b393;background:#f3f7ef;text-align:center;padding:13px 5px 11px}.time-unit strong{display:block;font:700 clamp(1.6rem,3vw,2.8rem)/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:-.06em;color:#255b37;font-variant-numeric:tabular-nums}.time-unit span{display:block;margin-top:8px;font-size:.76rem;color:#557359}.countdown-done{font-size:.9rem;margin:16px 0 0;color:#255b37;font-weight:700}@media(max-width:500px){.countdown{padding:13px}.countdown-heading{font-size:.63rem;flex-wrap:wrap;gap:3px}.countdown-units{gap:5px}.time-unit{padding:11px 2px}.time-unit strong{font-size:1.6rem}.time-unit span{font-size:.65rem}}