.demo-root{--surface-deeper:oklch(0.915 0.022 85);--surface-sunk:oklch(0.945 0.018 85);--surface-base:oklch(0.97 0.015 85);--surface-raised:oklch(0.99 0.005 85);--ink:oklch(0.22 0.040 75);--ink-mid:oklch(0.38 0.030 75);--ink-soft:oklch(0.48 0.028 75);--ink-faint:oklch(0.72 0.020 80);--rule:oklch(0.88 0.020 85);--rule-strong:oklch(0.78 0.025 80);--teal:oklch(0.38 0.10 200);--teal-soft:oklch(0.92 0.035 200);--teal-deep:oklch(0.26 0.09 205);--amber:oklch(0.76 0.16 75);--amber-soft:oklch(0.94 0.05 80);--amber-deep:oklch(0.55 0.16 68);--leaf:oklch(0.55 0.14 145);--leaf-soft:oklch(0.93 0.05 140);--coral:oklch(0.65 0.15 30);--coral-soft:oklch(0.93 0.04 30);--shadow-1:0 1px 2px rgba(46,37,25,0.06),0 1px 0 rgba(46,37,25,0.03);--shadow-2:0 4px 18px rgba(46,37,25,0.08),0 1px 0 rgba(46,37,25,0.04);--shadow-3:0 14px 44px rgba(46,37,25,0.14),0 1px 0 rgba(46,37,25,0.04);--radius-chip:6px;--radius-el:10px;--radius-card:14px;--radius-overlay:16px;--radius-full:9999px;--ease-c:cubic-bezier(0.2,0.7,0.3,1);--f-display:"Newsreader",Georgia,serif;--f-body:"Geist",system-ui,sans-serif;--f-mono:"JetBrains Mono","Courier New",monospace;font-family:var(--f-body);background-color:var(--surface-sunk);background-image:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(46,37,25,.022) 0,rgba(46,37,25,.022) 9px),repeating-linear-gradient(-45deg,transparent,transparent 8px,rgba(46,37,25,.022) 0,rgba(46,37,25,.022) 9px);color:var(--ink);min-height:100dvh}.demo-root *,.demo-root :after,.demo-root :before{box-sizing:border-box;margin:0;padding:0}.demo-root:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch' seed='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");opacity:.006}.demo-root .nav{position:sticky;top:0;z-index:200;height:56px;display:flex;align-items:center;padding:0 20px;background:oklch(.97 .015 85/.92);border-bottom:1px solid var(--rule);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%)}.demo-root .nav-inner{width:100%;max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.demo-root .nav-brand{display:flex;align-items:center;gap:9px;text-decoration:none}.demo-root .nav-icon{width:30px;height:23px;flex-shrink:0}.demo-root .nav-wordmark{font-family:var(--f-display);font-size:15px;color:var(--ink)}.demo-root .nav-wordmark em{font-style:italic;color:var(--ink-soft);font-size:13px}.demo-root .nav-back{display:inline-flex;align-items:center;font-family:var(--f-body);font-size:12px;font-weight:500;color:var(--ink-mid);letter-spacing:.01em;text-decoration:none;padding:7px 16px;border-radius:var(--radius-full);border:1px solid var(--rule);background:var(--surface-raised);transition:color .14s,border-color .14s,background .14s,box-shadow .14s,transform .14s var(--ease-c)}.demo-root .nav-back:hover{color:var(--teal-deep);border-color:var(--rule-strong);background:var(--surface-base);box-shadow:var(--shadow-1);transform:translateY(-1px)}.demo-root .nav-back:focus-visible{outline:3px solid var(--amber);outline-offset:2px}.demo-root .page{position:relative;z-index:1;min-height:calc(100dvh - 56px);display:flex;align-items:flex-start;justify-content:center;padding:48px 20px 80px}@media (max-width:480px){.demo-root .page{padding:28px 16px 60px}}.demo-root .form-card{width:100%;max-width:520px;background:var(--surface-raised);border:1px solid var(--rule);border-radius:var(--radius-overlay);box-shadow:var(--shadow-3);overflow:hidden;position:relative}.demo-root .form-card:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch' seed='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");opacity:.006;border-radius:inherit}.demo-root .card-header{position:relative;z-index:1;background:var(--surface-deeper);border-bottom:1px solid var(--rule);padding:24px 28px 20px}@media (max-width:480px){.demo-root .card-header{padding:20px 20px 16px}}.demo-root .card-eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:10px;color:var(--teal);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}.demo-root .card-eyebrow:before{content:"";display:block;width:18px;height:1px;background:var(--teal);opacity:.5}.demo-root .card-heading{font-family:var(--f-display);font-size:clamp(24px,5.5vw,32px);font-weight:400;line-height:1.1;letter-spacing:-.015em;color:var(--ink);transition:opacity .28s var(--ease-c)}.demo-root .card-heading em{font-style:italic;color:var(--amber-deep)}.demo-root .step-indicator{position:relative;z-index:1;display:flex;align-items:center;padding:20px 28px;border-bottom:1px solid var(--rule);gap:0}@media (max-width:480px){.demo-root .step-indicator{padding:16px 20px}}.demo-root .step-item{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;flex:0 0 auto}.demo-root .step-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:11px;font-weight:500;border:1.5px solid var(--rule-strong);background:var(--surface-sunk);color:var(--ink-soft);transition:all .24s var(--ease-c)}.demo-root .step-item.active .step-dot{background:var(--amber);color:#fff;border-color:var(--amber-deep);box-shadow:0 0 0 3px oklch(.76 .16 75/.18)}.demo-root .step-item.done .step-dot{background:var(--teal);color:#fff;border-color:var(--teal-deep)}.demo-root .step-label{font-family:var(--f-mono);font-size:9px;color:var(--ink-faint);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transition:color .24s}.demo-root .step-item.active .step-label{color:var(--amber-deep)}.demo-root .step-item.done .step-label{color:var(--teal-deep)}.demo-root .step-connector{flex:1;height:1.5px;background:var(--rule);align-self:center;margin:0 4px 17px;position:relative;overflow:hidden}.demo-root .step-connector-fill{position:absolute;top:0;left:0;height:100%;background:var(--teal);width:0;transition:width .36s var(--ease-c)}.demo-root .form-body{position:relative;z-index:1;padding:28px;overflow:hidden}@media (max-width:480px){.demo-root .form-body{padding:20px}}.demo-root .step-panel{display:none}.demo-root .step-panel.active{display:block;animation:demo-panelIn .3s var(--ease-c) both}.demo-root .step-panel.going-back.active{animation:demo-panelInBack .3s var(--ease-c) both}@keyframes demo-panelIn{0%{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}@keyframes demo-panelInBack{0%{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}.demo-root .field-group{margin-bottom:20px}.demo-root .field-group:last-child{margin-bottom:0}.demo-root .field-label{display:block;font-family:var(--f-mono);font-size:10px;font-weight:500;color:var(--ink-soft);letter-spacing:.09em;text-transform:uppercase;margin-bottom:8px}.demo-root .field-optional{font-size:9px;color:var(--ink-faint);letter-spacing:.04em;text-transform:lowercase;font-weight:400;margin-left:5px;font-style:italic}.demo-root .field-input{width:100%;height:44px;padding:0 14px;background:var(--surface-sunk);border:1px solid var(--rule-strong);border-radius:var(--radius-el);font-family:var(--f-body);font-size:15px;color:var(--ink);outline:none;transition:border-color .14s,box-shadow .14s;-webkit-appearance:none}.demo-root .field-input::placeholder{color:var(--ink-faint)}.demo-root .field-input:focus{border-color:var(--amber);box-shadow:0 0 0 3px oklch(.76 .16 75/.14)}.demo-root .field-input.has-error{border-color:var(--coral);box-shadow:0 0 0 3px oklch(.65 .15 30/.12)}.demo-root .field-error{display:none;font-family:var(--f-mono);font-size:10px;color:var(--coral);margin-top:5px;letter-spacing:.03em}.demo-root .field-error.show{display:block}.demo-root .pill-group{display:flex;gap:8px;flex-wrap:wrap}.demo-root .pill-group.has-error .pill-label span{border-color:var(--coral)}.demo-root .pill-label{cursor:pointer}.demo-root .pill-label input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.demo-root .pill-label span{display:block;padding:9px 18px;border-radius:var(--radius-full);border:1px solid var(--rule-strong);background:var(--surface-sunk);font-family:var(--f-body);font-size:14px;color:var(--ink-soft);transition:all .16s var(--ease-c);white-space:nowrap;user-select:none}.demo-root .pill-label:hover span{border-color:var(--rule-strong);color:var(--ink)}.demo-root .pill-label:has(input:checked) span{background:var(--amber-soft);color:var(--amber-deep);border-color:oklch(.76 .16 75/.32);font-weight:500}.demo-root .form-actions{position:relative;z-index:1;display:flex;gap:10px;align-items:center;padding:20px 28px 28px;border-top:1px solid var(--rule)}@media (max-width:480px){.demo-root .form-actions{padding:16px 20px 24px}}.demo-root .btn-back{height:44px;padding:0 18px;background:var(--surface-raised);color:var(--ink-mid);border:1px solid var(--rule-strong);border-radius:var(--radius-el);font-family:var(--f-body);font-size:14px;font-weight:500;cursor:pointer;box-shadow:var(--shadow-1);transition:color .14s,border-color .14s,transform .14s var(--ease-c),box-shadow .2s ease-out}.demo-root .btn-back:hover{color:var(--ink);border-color:var(--ink-faint);transform:translateY(-2px);box-shadow:var(--shadow-2)}.demo-root .btn-back:focus-visible,.demo-root .btn-continue:focus-visible{outline:3px solid var(--amber);outline-offset:2px}.demo-root .btn-continue{flex:1;height:44px;background:linear-gradient(160deg,#f5b830,#e8a010 40%,#c88008);color:#fff8e8;border:none;border-radius:var(--radius-el);font-family:var(--f-body);font-size:15px;font-weight:500;cursor:pointer;position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,248,200,.4),0 0 0 1px rgba(160,90,5,.4),0 0 18px 3px rgba(220,140,8,.22),0 3px 10px rgba(46,37,25,.3);transition:transform .16s var(--ease-c),box-shadow .18s ease-out}.demo-root .btn-continue:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(108deg,transparent 32%,rgba(255,255,255,.2) 50%,transparent 68%);transform:translateX(-120%);transition:transform .42s var(--ease-c)}.demo-root .btn-continue:hover:before{transform:translateX(120%)}.demo-root .btn-continue:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,248,200,.4),0 0 0 1px rgba(160,90,5,.4),0 0 28px 6px rgba(220,140,8,.32),0 5px 14px rgba(46,37,25,.36)}.demo-root .btn-continue:active{transform:none}.demo-root .btn-continue:disabled{opacity:.6;cursor:not-allowed;transform:none}.demo-root .submit-error-msg{font-family:var(--f-mono);font-size:11px;color:var(--coral);letter-spacing:.03em;margin-top:14px;text-align:center}.demo-root .success-panel{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 28px 52px;position:relative;z-index:1;gap:0;animation:demo-panelIn .4s var(--ease-c) both}.demo-root .success-icon{width:64px;height:64px;border-radius:50%;background:var(--leaf-soft);border:1.5px solid oklch(.55 .14 145/.25);display:flex;align-items:center;justify-content:center;margin-bottom:20px;animation:demo-iconPop .5s cubic-bezier(.17,.89,.32,1.28) .2s both}@keyframes demo-iconPop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.demo-root .success-icon svg{width:28px;height:28px}.demo-root .success-title{font-family:var(--f-display);font-size:24px;font-weight:400;color:var(--ink);margin-bottom:10px;letter-spacing:-.01em}.demo-root .success-title em{font-style:italic;color:var(--leaf)}.demo-root .success-sub{font-size:15px;color:var(--ink-soft);line-height:1.6;max-width:360px;margin-bottom:28px}.demo-root .success-sub strong{color:var(--ink);font-weight:500}.demo-root .success-back{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:11px;color:var(--teal);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:8px 0;transition:gap .2s var(--ease-c)}.demo-root .success-back:hover{gap:12px}.demo-root .success-divider{width:80px;height:1px;background:linear-gradient(90deg,transparent,oklch(.76 .16 75/.25),transparent);margin:24px auto}.demo-root .success-email-note{font-family:var(--f-mono);font-size:10px;color:var(--ink-faint);letter-spacing:.06em}.demo-root .field-select{width:100%;height:44px;background:var(--surface-sunk);border:1px solid var(--rule-strong);border-radius:var(--radius-el);font-family:var(--f-body);font-size:15px;color:var(--ink);outline:none;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='oklch(0.48 0.028 75)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding:0 36px 0 14px;transition:border-color .14s,box-shadow .14s}.demo-root .field-select:focus{border-color:var(--amber);box-shadow:0 0 0 3px oklch(.76 .16 75/.14)}