:root{font-family:"Segoe UI",Inter,system-ui,sans-serif;color:#1e2d46;background:#f3f5fa;--muted:#66738a;--line:#e2e7f0;--action:#654bd7;--violet:#a78af5;--navy:#14233b;--radius:16px;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea,select{font:inherit}button,summary,select{cursor:pointer}button{border:0;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #ad92f4;outline-offset:3px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.masthead{height:76px;background:var(--navy);color:#f3f5ff;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #ffffff12}.brand{display:flex;gap:13px;align-items:center}.brand-sign{font:700 35px Georgia,serif;color:#c1aaff;line-height:1}.brand strong{font-size:14px;letter-spacing:1px}.brand strong span{font-weight:400;color:#aab8cf;margin-left:10px;letter-spacing:2px;font-size:11px}.header-meta{display:flex;align-items:center;gap:20px}.header-context{font-size:11px;color:#adbad1}.beta{display:flex;align-items:center;gap:7px;background:#ffffff0c;border:1px solid #ffffff1a;border-radius:20px;padding:7px 11px;font-size:10px;color:#d4def0}.beta:before{content:"";width:5px;height:5px;border-radius:50%;background:#bca5ff}main{display:grid;grid-template-columns:310px minmax(0,1fr);max-width:1880px;margin:auto}.brief{padding:34px 25px;background:radial-gradient(ellipse at 0 0,#7654b532,transparent 55%),linear-gradient(180deg,#14233b,#1d2b46);color:#f5f6ff;min-width:0}.eyebrow{font:600 10px/1.5 Consolas,monospace;letter-spacing:1.7px;color:#76819a}.brief-eyebrow{color:#b8a4ee;font-size:9px}h1{font-size:39px;line-height:1.13;letter-spacing:-1.7px;margin:20px 0 17px;font-weight:650}.intro{font-size:12px;line-height:1.9;color:#b3bfd4;margin:0 0 30px}label{font-size:11px;font-weight:600;display:block;margin-bottom:10px}textarea,input,select{color:#243750;background:white;border:1px solid #d7deeb;border-radius:9px}#prompt{width:100%;padding:15px;font-size:12px;line-height:1.85;resize:vertical;min-height:170px;background:#25344e;border:1px solid #4c5870;color:#edf1fb;box-shadow:0 4px 18px #07122512}#prompt::placeholder{color:#adbad1}details{margin:20px 0 16px;border:1px solid #ffffff20;border-radius:10px;padding:14px 12px;background:#ffffff04}summary{font-size:11px;font-weight:500;list-style:none;display:flex;align-items:center;gap:8px}summary:before{content:"+";font-size:17px;line-height:1;color:#c9b5ff}details[open] summary:before{content:"−"}summary span{font-weight:400;color:#aab7ce;font-size:9px;margin-left:auto}.connection-fields{display:grid;padding-top:17px;gap:8px}.connection-fields label{margin:5px 0 0}.connection-fields input,.connection-fields select{width:100%;padding:10px;font-size:12px;background:#25344e;color:#edf1fb;border-color:#526078}.connection-fields small,.cost-note{font-size:10px;line-height:1.7;color:#adbbd1}.quiet{background:none;color:#c5b4f0;font-size:11px;padding:7px 0;text-align:left}.primary{display:flex;justify-content:center;align-items:center;background:linear-gradient(115deg,#bda2ff,#d3c4ff);color:#201a3c;width:100%;min-height:46px;padding:13px;border-radius:10px;font-size:12px;font-weight:650;box-shadow:0 5px 15px #080f2218}.primary:hover{background:linear-gradient(115deg,#cebaff,#e0d6ff);box-shadow:0 7px 25px #b59bff30;transform:translateY(-2px)}.secondary{background:#fff;border:1px solid #dce2ec;border-radius:9px;padding:11px 14px;min-height:40px;font-size:11px;font-weight:600;color:#344560}.secondary:hover{background:#edf0f8;border-color:#c5cce0}.brief>.secondary{width:100%;margin-top:7px;background:transparent;color:#dce4f3;border:1px solid #69738a;font-weight:400}.brief>.secondary:hover{background:#ffffff0a;border-color:#b1a6d5}.cost-note{margin:11px 2px 15px;text-align:center;font-size:9px}.scope-note{margin-top:32px;padding-top:20px;border-top:1px solid #ffffff18}.scope-note strong{font-size:10px;color:#d2dcf0;font-weight:600}.scope-note p,#status{font-size:10px;line-height:1.8;color:#afbdd2}#status{margin-top:20px;color:#d6c6ff;overflow-wrap:anywhere}.workspace{min-width:0;padding:30px 28px 26px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:25px}h2{font-size:20px;font-weight:650;letter-spacing:-.65px;margin:8px 0 0}.tools{display:flex;gap:9px;align-items:center}.tools select{font-size:10px;padding:11px 28px 11px 12px;min-height:40px}.run-button{background:#23324b;color:#fff;border-color:#23324b;box-shadow:0 2px 3px #1c29400a}.run-button:hover{background:#344864;color:white;border-color:#344864}.viewport-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:18px}.pane{min-width:0;border:1px solid #dfe4ee;border-radius:var(--radius);overflow:hidden;background:white;box-shadow:0 7px 26px #223b5b09;position:relative;transition:border-color .25s,box-shadow .25s}.pane-head{display:flex;align-items:center;justify-content:space-between;padding:17px 17px 13px;gap:8px}.pane-head>div{display:flex;align-items:center;gap:10px}.language-mark{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;font-size:11px;font-weight:700}.language-mark.jfh{background:#f0eafb;color:#7953bc;font-family:Georgia,serif;font-size:24px}.language-mark.ts{background:#eaf0fc;color:#4773c5}h3{font-size:12px;margin:0;font-weight:650;letter-spacing:.1px}.compile-state{font-size:9px;color:var(--muted);padding:5px 7px;border-radius:6px;background:#f3f5f9}.compile-state[data-state=ok]{color:#387559;background:#edf6f0}.compile-state[data-state=error]{color:#9f4545;background:#fceeee}.tabs{display:flex;padding:0 13px 12px;gap:4px}.tabs button{background:none;font-size:11px;padding:9px 11px;min-height:36px;color:var(--muted);border-radius:7px}.tabs button.selected{color:#6948bd;background:#f1ecfa;font-weight:650}.tabs button:hover{background:#f6f3fb;color:#6948bd}.preview-bar{display:flex;align-items:center;justify-content:space-between;background:#f7f8fb;border-top:1px solid #edf0f5;border-bottom:1px solid #e8ecf3;padding:10px 14px;font-size:9px;color:#8490a3}.sandbox-label{font:8px Consolas,monospace;letter-spacing:.5px;color:#8a95a8}.canvas{height:510px;background:#edf0f5;display:flex;justify-content:center;position:relative;overflow:auto}.canvas iframe{height:100%;width:100%;border:0;flex-shrink:0;background:white}.canvas.mobile iframe{max-width:360px;box-shadow:0 0 12px #2032531c}.editor{width:100%;height:100%;resize:none;border:0;border-radius:0;background:#f9fafc;color:#334760;padding:19px;font:12px/1.8 Consolas,monospace;tab-size:2;white-space:pre;overflow:auto}.errors{position:absolute;inset:0;margin:0;padding:22px;background:#fff4f2;color:#9c3e37;white-space:pre-wrap;font:12px/1.7 Consolas,monospace;overflow:auto}.pane footer{padding:13px 15px;display:flex;justify-content:space-between;font:9px Consolas,monospace;color:#78869c;border-top:1px solid #edf0f5;background:#fff}.measurements{margin-top:25px;background:#fff;border:1px solid #e1e6ef;border-radius:var(--radius);padding:22px 23px 13px}.measure-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.measure-head h2{font-size:18px}.measure-head .eyebrow{font-size:9px;color:#9a88bc}.comparison-note{font-size:9px;color:#8690a2}.table-scroll{overflow:auto}#runs-panel{margin-top:18px}.runs-import{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 0;font-size:11px;color:var(--muted)}.runs-import input{max-width:100%;font-size:11px}.runs-actions{display:flex;gap:8px;justify-content:flex-end;margin-bottom:6px}.runs-actions .quiet{color:var(--action);border:1px solid var(--line);border-radius:8px;padding:6px 10px}#stats-table{margin-top:16px}table{width:100%;border-collapse:collapse;text-align:left;font-size:10px}th{font-weight:500;color:#7e899d;padding:11px 14px;border-bottom:1px solid #e7ebf2;background:#fafbfe}td{padding:12px 14px;border-bottom:1px solid #edf0f5;font-variant-numeric:tabular-nums}td:not(:first-child){font-family:Consolas,monospace}th:first-child{border-radius:7px 0 0 0}th:last-child{border-radius:0 7px 0 0}td.gain{color:#37765c}td.loss{color:#a15b50}.measurement-note{font-size:9px;color:#8290a5;line-height:1.8;margin-top:16px;max-width:850px}.verification{font-size:10px;line-height:1.8;color:#76839a;padding-top:5px}.verification span{margin-right:7px;color:#997ccf}.page-footer{display:flex;justify-content:space-between;gap:20px;padding:19px 30px;border-top:1px solid #e1e6ee;font-size:9px;line-height:1.7;color:#8b95a6;background:#f9fafc}@media(min-width:1600px){main{grid-template-columns:330px minmax(0,1fr)}.brief{padding:38px 29px}.workspace{padding:34px 34px}.canvas{height:560px}}@media(max-width:1200px){main{grid-template-columns:270px minmax(0,1fr)}.brief{padding:29px 21px}.workspace{padding:26px 19px}.toolbar{align-items:flex-start;flex-direction:column;gap:17px}.canvas{height:510px}.pane-head{padding:14px 11px 12px}.tabs{padding:0 7px 10px;gap:1px}.tabs button{padding:8px}.compile-state{font-size:8px}.comparison{gap:13px}.measurements{padding:20px 16px 12px}.comparison-note{display:none}}@media(max-width:900px){main{grid-template-columns:235px minmax(0,1fr)}.brief{padding:27px 17px}h1{font-size:31px}.workspace{padding:24px 15px}.pane-head{gap:4px}.pane-head>div{gap:6px}.compile-state{font-size:8px;padding:5px}.language-mark{width:26px;height:28px;border-radius:7px}.tabs{gap:0;padding-left:3px;padding-right:3px}.tabs button{padding:8px 6px;font-size:9px}.pane footer{padding:11px 9px;font-size:8px}.comparison{gap:11px}.header-context{display:none}h3{font-size:10px}}@media(max-width:760px){.masthead{padding:0 20px;height:67px}main{display:block}.brief{padding:28px 23px;background:#182740}.brief h1{font-size:34px;margin:16px 0 13px}.brief h1 br{display:none}.intro{margin-bottom:22px;max-width:470px}.scope-note{margin-top:23px}#prompt{min-height:150px}.workspace{padding:26px 17px}.toolbar{flex-direction:row;align-items:center;flex-wrap:wrap;gap:19px}h2{font-size:19px}.pane-head{padding:15px 12px;gap:8px}.pane-head>div{gap:9px}.language-mark{width:30px;height:30px}.compile-state{font-size:9px}.tabs{padding:0 9px 10px}.tabs button{font-size:10px;padding:8px 9px}h3{font-size:12px}.page-footer{padding:18px 22px;flex-direction:column;gap:6px}}@media(max-width:560px){.brand strong{font-size:12px}.brand strong span{font-size:9px;letter-spacing:1px;margin-left:5px}.brand{gap:9px}.beta{font-size:8px;padding:6px 8px}.masthead{padding:0 17px}.comparison{grid-template-columns:1fr;gap:17px}.workspace{padding:25px 12px}.canvas{height:480px}.tools{gap:7px}.tools select{padding-right:21px}.tools button{font-size:10px;padding:11px 12px}.toolbar{gap:18px;margin-bottom:20px}.measurements{padding:19px 13px 12px;margin-top:19px}.measure-head{margin-bottom:13px}table{min-width:400px}.pane-head{padding:16px}.tabs{padding-left:12px}.pane footer{font-size:9px;padding:12px 14px}.brief h1{font-size:33px;letter-spacing:-1.4px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Interaction language: useful motion, finite arrivals, no idle animation. */
button svg{width:17px;height:17px;flex-shrink:0;transition:transform .25s}
button:active:not(:disabled){transform:translateY(1px) scale(.98)}
.primary{gap:10px;min-height:50px;font-size:12px;position:relative;overflow:hidden}
.primary:after{content:"";position:absolute;inset:0;transform:translateX(-125%) skewX(-18deg);background:linear-gradient(90deg,transparent,#ffffff55,transparent);pointer-events:none}
.primary:hover:after{animation:button-sheen .65s ease-out}
.primary:hover>svg{transform:rotate(-12deg) scale(1.12)}
.primary .button-arrow{margin-left:auto;font-size:20px;line-height:1;transition:transform .25s}
.primary:hover .button-arrow{transform:translateX(4px)}
.primary>svg{margin-right:auto}
.run-button,.demo-button{display:flex;align-items:center;justify-content:center;gap:8px}
.run-button:hover>svg{transform:translateX(2px)}
.demo-button .demo-label{font:9px Consolas,monospace;border:1px solid #ffffff25;padding:4px 6px;border-radius:5px;margin-left:auto;color:#b5c5e3}
.demo-button{justify-content:flex-start;font-size:11px;min-height:44px}
.header-nav{display:flex;align-items:center;gap:6px;margin-left:35px;margin-right:auto;font-size:11px}
.header-nav a{padding:9px 13px;border-radius:8px;color:#9eadc8;transition:background .2s,color .2s}
.header-nav a:hover,.header-nav a.current{color:#eee9ff;background:#ffffff0b}
.header-nav a:focus-visible{outline:2px solid #bba5ff;outline-offset:2px}
h1 span{color:#cdbbff}
.brief-eyebrow{display:flex;align-items:center;gap:8px;letter-spacing:1.1px}
.live-dot{height:5px;width:5px;border-radius:50%;background:#bda4ff;box-shadow:0 0 0 4px #bda4ff12}
.language-pair{display:flex;align-items:center;gap:10px;margin:-10px 0 28px;font-size:10px;color:#c2cde0}
.language-pair>span{display:flex;align-items:center;gap:6px}
.language-pair b{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#c3a4ff18;color:#d2bdff;font:600 13px Georgia,serif}
.language-pair>span:last-child b{background:#85adff15;color:#a7c6ff;font:600 9px Consolas,monospace}
.language-pair i{font-style:normal;color:#66758f}
.prompt-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px}
.prompt-heading label{margin:0}
.prompt-heading>span{font-size:9px;color:#9facc4}
#prompt{border-radius:12px;transition:border-color .2s,box-shadow .2s}
#prompt:focus{border-color:#b89be7;box-shadow:0 0 0 4px #b99aff0d}
.pane:hover{border-color:#cfc4e8;box-shadow:0 9px 30px #223b5b0d}
.pane[data-language=jfh] .pane-head{background:linear-gradient(90deg,#faf7ff,#fff)}
.pane[data-language=typescript] .pane-head{background:linear-gradient(90deg,#f6f9ff,#fff)}
.tabs{border-bottom:1px solid #edf0f5}
.tabs button:hover{transform:translateY(-1px)}
.tabs button.selected{box-shadow:0 1px 3px #4f388a0a}
.preview-options{display:flex;align-items:center;gap:9px}
.icon-button{display:grid;place-items:center;border:1px solid #dfe4ee;border-radius:6px;color:#8190a9;background:#fff;width:26px;height:25px;padding:0}
.icon-button svg{width:12px;height:12px}
.icon-button:hover{color:#704cc4;border-color:#b7a2de;background:#f7f2ff;transform:scale(1.08)}
.preview-bar{padding:7px 12px}
.pane:fullscreen{display:flex;flex-direction:column;border-radius:0;background:white;border:0;max-width:none}
.pane:fullscreen .canvas{flex:1;height:auto;min-height:0}
.pane:fullscreen .preview-bar{padding:8px 16px}
.pane:fullscreen .pane-head{padding:14px 20px}
.pane:fullscreen .tabs{padding-bottom:8px}
.preview-loading{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;background:#f8f9fdf5;backdrop-filter:blur(5px);color:#7f8aa0;font-size:11px}
.preview-loading strong{font-size:14px;font-weight:600;color:#3b465d}
.loading-orbit{height:36px;width:36px;margin-bottom:6px;border:2px solid #e4ddf2;border-top-color:#9873e1;border-radius:50%;animation:orbit 1s linear infinite}
[data-busy=true] #generate:disabled{opacity:.8}
[data-busy=true] #generate>svg{animation:orbit 3s linear infinite}
.activity-status{padding-left:11px;border-left:2px solid #9c81d740}
.masthead{animation:arrive .5s ease-out both}
.brief>h1{animation:arrive .55s .05s both}
.brief>.intro,.brief>.language-pair{animation:arrive .55s .12s both}
.toolbar{animation:arrive .55s .12s both}
.pane[data-language=jfh]{animation:arrive .6s .18s both}
.pane[data-language=typescript]{animation:arrive .6s .28s both}
.measurements{animation:arrive .6s .36s both}
.editor:not([hidden]){animation:reveal .2s ease-out both}
.pane.preview-updated .canvas{animation:reveal .35s ease-out both}
@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes reveal{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes button-sheen{to{transform:translateX(125%) skewX(-18deg)}}
@media(max-width:1150px){.header-context{display:none}.header-nav{margin-left:25px}.prompt-heading>span{display:none}.demo-button .demo-label{font-size:8px;padding:4px}.demo-button{font-size:10px;gap:6px}}
@media(max-width:760px){.language-pair{margin-bottom:23px}.prompt-heading>span{display:block}.header-nav{margin-left:auto;margin-right:15px}.header-nav a{font-size:10px;padding:8px}.header-nav a:last-child{display:none}.demo-button{font-size:12px;gap:9px}.demo-button .demo-label{font-size:9px}.brief h1{font-size:38px;line-height:1.1;max-width:500px}.primary{font-size:13px}}
@media(max-width:560px){.header-nav{display:none}.header-meta{margin-left:auto}.brief h1{font-size:40px;max-width:330px}.brief h1 br{display:block}.brief{padding-top:30px}.language-pair{font-size:11px;gap:14px}.primary{min-height:52px}.tabs button{min-height:39px}.run-button{min-height:42px}.preview-options{gap:7px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}button:hover,button:active,.tabs button:hover{transform:none!important}}

.connection-fields select{min-width:0;text-overflow:ellipsis}.connection-fields select:disabled{opacity:.65;cursor:default}.page-footer{flex-wrap:wrap}.page-footer .partner{white-space:nowrap;color:#52617a}.page-footer .partner a{text-decoration:underline;text-underline-offset:3px}.page-footer .partner a:hover{color:var(--action)}

.connection-message{margin:4px 0 2px;padding:10px 11px;border:1px solid #80bca35c;border-radius:8px;background:#80bca312;color:#d0f1e0;font-size:11px;line-height:1.7;overflow-wrap:anywhere}.connection-message[data-state="error"]{color:#ffe0dc;background:#d86f611c;border-color:#f0a09573}.connection-message[data-state="warning"]{color:#ffe8b4;background:#e0ac4414;border-color:#dbba766b}
.pane footer .checks{color:#5b4aa0;cursor:help}.design-note{font-size:10px;line-height:1.8;color:#5d6a80;margin:14px 0 0;padding:10px 12px;background:#f6f4fc;border-radius:8px}.design-note:empty{display:none}