:root{color-scheme:light dark;--page-bg:#eef2ff;--surface:rgba(255, 255, 255, 0.96);--surface-2:#f8fafc;--text:#111827;--muted:#64748b;--border:rgba(15, 23, 42, 0.12);--primary:#4f46e5;--primary-hover:#4338ca;--shadow:0 24px 80px rgba(15, 23, 42, 0.28);--radius:22px;--modal-duration:240ms}@media (prefers-color-scheme:dark){:root{--page-bg:#090f1d;--surface:rgba(15, 23, 42, 0.96);--surface-2:#111827;--text:#f8fafc;--muted:#94a3b8;--border:rgba(255, 255, 255, 0.12);--shadow:0 24px 90px rgba(0, 0, 0, 0.58)}}*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--page-bg);color:var(--text)}body{min-height:100vh;margin:0;background:radial-gradient(circle at 10% 10%,rgb(99 102 241 / .22),transparent 34rem),radial-gradient(circle at 90% 90%,rgb(14 165 233 / .18),transparent 30rem),var(--page-bg)}body:has(dialog:modal[open]){overflow:hidden}button{font:inherit}button,[role="button"]{-webkit-tap-highlight-color:#fff0}.page{width:min(1120px, calc(100% - 32px));margin:0 auto;padding:54px 0 80px}.hero{padding:clamp(24px, 5vw, 54px);border:1px solid var(--border);border-radius:30px;background:color-mix(in srgb,var(--surface) 88%,transparent);box-shadow:0 18px 60px rgb(15 23 42 / .12);backdrop-filter:blur(18px)}.eyebrow{margin:0 0 10px;color:var(--primary);font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}h1,h2,p{margin-top:0}h1{max-width:780px;margin-bottom:14px;font-size:clamp(2rem, 6vw, 4.7rem);line-height:.98;letter-spacing:-.055em}.lead{max-width:760px;margin-bottom:30px;color:var(--muted);font-size:1.05rem;line-height:1.75}.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:24px}.demo-card{padding:22px;border:1px solid var(--border);border-radius:20px;background:color-mix(in srgb,var(--surface) 82%,transparent)}.demo-card h2{margin-bottom:8px;font-size:1.05rem}.demo-card p{min-height:48px;margin-bottom:16px;color:var(--muted);line-height:1.55}.button-row{display:flex;flex-wrap:wrap;gap:10px}.btn{display:inline-flex;min-height:42px;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border:1px solid #fff0;border-radius:12px;cursor:pointer;color:var(--text);font-weight:750;text-decoration:none;transition:transform 150ms ease,background-color 150ms ease,border-color 150ms ease,box-shadow 150ms ease}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0) scale(.98)}.btn:focus-visible,.modal__close:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 35%,transparent);outline-offset:3px}.btn--primary{color:#fff;background:var(--primary);box-shadow:0 10px 24px color-mix(in srgb,var(--primary) 28%,transparent)}.btn--primary:hover{background:var(--primary-hover)}.btn--secondary{border-color:var(--border);background:var(--surface-2)}.btn--danger{color:#fff;background:#dc2626}.btn--success{color:#fff;background:#059669}.btn--ghost{border-color:var(--border);background:#fff0}dialog.modal{--accent:var(--primary);--accent-soft:color-mix(in srgb, var(--accent) 13%, transparent);inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:20px;border:none;background:#fff0;color:var(--text);place-items:center;overflow:hidden;display:none}dialog:modal{opacity:0;transition:opacity var(--modal-duration) ease,display var(--modal-duration) allow-discrete,overlay var(--modal-duration) allow-discrete}dialog:modal[open]{display:grid;opacity:1}dialog:modal::backdrop{background:rgb(2 6 23 / .68);backdrop-filter:blur(9px) saturate(115%);opacity:0;transition:opacity var(--modal-duration) ease,backdrop-filter var(--modal-duration) ease,display var(--modal-duration) allow-discrete,overlay var(--modal-duration) allow-discrete}dialog:modal[open]::backdrop{opacity:1}@starting-style{dialog:modal[open]{opacity:0}dialog:modal[open]::backdrop{opacity:0;backdrop-filter:blur(0)}dialog:modal[open] .modal__window{transform:translateY(22px) scale(.96);filter:blur(3px)}}.modal__window{position:relative;z-index:1;width:min(100%, 620px);max-height:min(86vh, 860px);overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);transform:translateY(0) scale(1);filter:blur(0);transition:transform var(--modal-duration) cubic-bezier(.22,1,.36,1),filter var(--modal-duration) ease}dialog:modal:not([open]) .modal__window{transform:translateY(22px) scale(.96);filter:blur(3px)}.modal--top{align-items:start;padding-top:clamp(20px, 8vh, 90px)}.modal--bottom{align-items:end;padding:0}.modal--bottom .modal__window{width:min(100%, 760px);border-radius:24px 24px 0 0}dialog:modal.modal--bottom:not([open]) .modal__window{transform:translateY(100%)}@starting-style{dialog:modal.modal--bottom[open] .modal__window{transform:translateY(100%)}}.modal__header{display:flex;align-items:flex-start;gap:14px;padding:22px 22px 14px}.modal__heading{min-width:0;flex:1}.modal__eyebrow{margin:0 0 5px;color:var(--accent);font-size:.72rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.modal__title{margin:0;font-size:clamp(1.2rem, 3vw, 1.55rem);line-height:1.25;letter-spacing:-.025em}.modal__close{display:inline-grid;width:40px;height:40px;flex:0 0 auto;place-items:center;padding:0;border:1px solid var(--border);border-radius:12px;cursor:pointer;color:var(--muted);background:var(--surface-2);font-size:1.35rem;line-height:1;transition:150ms ease}.modal__close:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 35%,var(--border));transform:rotate(4deg) scale(1.04)}.modal__body{max-height:calc(86vh - 170px);overflow:auto;padding:8px 22px 22px;color:var(--muted);line-height:1.7;overscroll-behavior:contain}.modal__body>:last-child{margin-bottom:0}.modal__footer{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;padding:16px 22px 22px;border-top:1px solid var(--border);background:color-mix(in srgb,var(--surface-2) 72%,transparent)}.modal__status-icon{display:grid;width:54px;height:54px;flex:0 0 54px;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:18px;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:0 8px 24px -4px color-mix(in srgb,var(--accent) 25%,transparent),inset 0 0 20px color-mix(in srgb,var(--accent) 15%,transparent);animation:icon-pop 520ms cubic-bezier(.2,1.6,.35,1) both}.modal__status-icon svg{width:26px;height:26px}.modal__details{margin-top:16px;padding:14px 16px;border:1px dashed color-mix(in srgb,var(--accent) 35%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text)}.modal__progress{position:absolute;right:0;bottom:0;left:0;height:4px;overflow:hidden;background:color-mix(in srgb,var(--accent) 12%,transparent)}.modal__progress::after{content:"";display:block;width:100%;height:100%;transform-origin:left;background:var(--accent);animation:modal-progress var(--auto-close,3000ms) linear forwards}.modal--sm .modal__window{width:min(100%, 420px)}.modal--md .modal__window{width:min(100%, 620px)}.modal--lg .modal__window{width:min(100%, 860px)}.modal--xl .modal__window{width:min(100%, 1100px)}.modal--full{padding:12px}.modal--full .modal__window{width:100%;height:calc(100vh - 24px);max-height:none}.modal--full .modal__body{max-height:calc(100vh - 194px)}.modal--success{--accent:#10b981}.modal--warning{--accent:#f59e0b}.modal--error{--accent:#ef4444}.modal--info{--accent:#06b6d4}.modal--loading{--accent:#8b5cf6}.modal--success .modal__window,.modal--warning .modal__window,.modal--error .modal__window,.modal--info .modal__window,.modal--loading .modal__window{border-top:4px solid var(--accent);background-image:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--accent) 14%,transparent) 0%,transparent 70%)}.modal--success .btn--primary{background:#10b981;box-shadow:0 10px 24px color-mix(in srgb,#10b981 30%,transparent)}.modal--success .btn--primary:hover{background:#059669}.modal--warning .btn--primary{background:#f59e0b;box-shadow:0 10px 24px color-mix(in srgb,#f59e0b 30%,transparent)}.modal--warning .btn--primary:hover{background:#d97706}.modal--error .btn--primary{background:#ef4444;box-shadow:0 10px 24px color-mix(in srgb,#ef4444 30%,transparent)}.modal--error .btn--primary:hover{background:#dc2626}.modal--info .btn--primary{background:#06b6d4;box-shadow:0 10px 24px color-mix(in srgb,#06b6d4 30%,transparent)}.modal--info .btn--primary:hover{background:#0284c7}.modal--warning .modal__status-icon{animation:icon-pop 520ms cubic-bezier(.2,1.6,.35,1) both,warning-pulse 1.8s ease-in-out 600ms infinite}.modal--error .modal__window.is-shaking{animation:modal-shake 420ms ease both}.modal--loading .modal__status-icon{border-radius:50%}.modal--loading .modal__status-icon svg{animation:spinner 900ms linear infinite}.code-box{margin:18px 0 0;padding:14px;overflow:auto;border:1px solid var(--border);border-radius:14px;color:var(--text);background:var(--surface-2);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88rem;white-space:pre-wrap}@keyframes icon-pop{0%{transform:scale(.45) rotate(-18deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}@keyframes warning-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 26%,transparent)}50%{box-shadow:0 0 0 12px #fff0}}@keyframes modal-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-11px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(3px)}}@keyframes spinner{to{transform:rotate(360deg)}}@keyframes modal-progress{from{transform:scaleX(1)}to{transform:scaleX(0)}}@media (max-width:560px){.page{width:min(100% - 20px, 1120px);padding-top:24px}dialog.modal{padding:10px}.modal__header{padding:18px 16px 12px}.modal__body{padding:6px 16px 18px}.modal__footer{padding:14px 16px 16px}.modal__footer .btn{flex:1 1 130px}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}