/* Layout and states for /create-code; shared tokens and controls: viziona.css. */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:600;src:url(/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2')}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.code-page{overflow-x:visible}
html[lang="ar"] .code-page{font-family:'IBM Plex Sans Arabic','Inter',sans-serif}
.code-skip{position:absolute;inset-inline-start:16px;top:-80px;z-index:60;background:var(--brand);color:var(--on-brand);padding:12px;border-radius:var(--r)}
.code-skip:focus{top:12px}
.code-page .wrap{max-width:1180px}
.code-nav{display:flex;align-items:center;gap:22px;color:var(--text2);font-size:14px}
.code-nav>a:hover{color:var(--text)}
.code-language{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border2);border-radius:999px;padding:8px 12px;min-height:44px;max-width:145px}
.code-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:80px;align-items:start;padding-top:76px;padding-bottom:80px}
.code-intro{padding-top:12px}
.code-kicker{font-size:13px;font-weight:600;color:var(--brand-bright);margin-bottom:22px;letter-spacing:.04em}
.code-intro h1{font-size:clamp(42px,4.7vw,62px);font-weight:750;letter-spacing:-.045em;line-height:1.04;white-space:pre-line;max-width:13ch;margin-bottom:24px}
.code-lead{font-size:17px;color:var(--text2);max-width:38ch;line-height:1.7}
.code-steps{list-style:none;margin:38px 0 30px}
.code-steps li{display:flex;gap:18px;align-items:start;margin:0 0 24px}
.code-steps li>span{font:500 13px ui-monospace,monospace;color:var(--brand);padding-top:3px}
.code-steps h2{font-size:16px;font-weight:600;margin-bottom:5px}
.code-steps p{font-size:14px;color:var(--text2);line-height:1.65;max-width:38ch}
.code-disclaimer{font-size:12px;color:var(--muted);max-width:48ch;line-height:1.7;padding-top:20px;border-top:1px solid var(--border2)}
.code-card{padding:30px;box-shadow:0 24px 70px rgba(0,0,0,.5);min-width:0}
.code-card>h2{font-size:20px;line-height:1.3;font-weight:650;letter-spacing:-.025em}
.code-caption{font-size:13px;color:var(--text2);margin:8px 0 22px;line-height:1.6}
.code-notice{font-size:13px;line-height:1.6;color:var(--text2);margin:18px 0}
.code-notice[data-tone="error"],.code-feedback[data-tone="error"],.code-field-error{color:#FFB3B7}
.code-card fieldset{border:0;min-width:0;padding:0;margin:0}
.code-kind{position:relative;margin:24px 0;gap:0;border-color:var(--border2)}
.code-kind .tab{position:relative;display:flex;align-items:center;justify-content:center;font:inherit;font-size:14px;min-height:44px;cursor:pointer}
.code-kind input{position:absolute;opacity:0;width:1px;height:1px}
.code-kind .tab:has(input:checked){background:var(--brand);color:var(--on-brand);font-weight:650}
.code-kind .tab:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:3px}
.code-secret{display:flex;align-items:center;border:1px solid var(--border2);border-radius:13px;background:var(--surface);min-width:0}
.code-secret:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.code-secret input{border:0;min-width:0;flex:1;background:transparent}
.code-secret input:focus{box-shadow:none}
.code-reveal{flex:none;font:inherit;font-size:12px;font-weight:600;color:var(--text2);padding:10px;margin-inline-end:4px;background:transparent;border:0;cursor:pointer;min-height:44px}
.code-reveal:hover{color:var(--text)}
.code-help,.code-field-error{font-size:12px;line-height:1.6;margin-top:7px}
.code-help{color:var(--muted)}
.code-field-error{margin-bottom:4px}
.code-page input[aria-invalid="true"]{border-color:#FFB3B7}
.code-secret:has(input[aria-invalid="true"]){border-color:#FFB3B7}
.code-verification{min-height:65px;margin-top:20px;max-width:100%}
.code-feedback{font-size:13px;color:var(--text2);line-height:1.65;min-height:22px;margin:12px 0}
.code-card .btn{border-radius:13px;min-height:48px;white-space:normal;text-align:center;line-height:1.25;box-shadow:none}
.code-privacy{font-size:11.5px;color:var(--muted);line-height:1.7;margin-top:15px}
.code-privacy a{color:var(--text2);text-decoration:underline;text-underline-offset:3px}
.code-result-heading{color:var(--brand-bright);font-size:14px;font-weight:600;margin-top:30px}
#code-result{scroll-margin-top:90px}
.code-output{display:block;color:var(--text);font:600 clamp(26px,5vw,36px)/1.4 ui-monospace,monospace;letter-spacing:.12em;margin:16px 0 8px;overflow-wrap:anywhere;user-select:all}
.code-result-note{font-size:13px;color:var(--text2);line-height:1.7;margin:18px 0}
.code-result-note:first-of-type{color:var(--brand-bright)}
.code-page .minifoot{padding:24px 0}
@media(max-width:980px){.code-layout{gap:40px;grid-template-columns:minmax(0,1fr) minmax(0,420px)}}
@media(max-width:800px){.code-layout{display:flex;flex-direction:column;gap:32px;padding-top:32px}.code-intro{width:100%}.code-intro h1{font-size:42px;max-width:none}.code-lead{max-width:55ch}.code-steps{display:none}.code-card{width:100%;max-width:500px;align-self:center}.code-disclaimer{margin-top:20px;max-width:60ch}}
@media(max-width:480px){.code-page .wrap{padding-left:18px;padding-right:18px}.code-nav{gap:12px;min-width:0}.code-nav>a{display:none}.code-language{max-width:128px}.code-page .brand{gap:8px}.code-page .brand-mark{width:30px;height:30px}.code-page .brand-word{height:16px}.code-card{padding:24px 20px}.code-intro h1{font-size:38px}.code-intro .code-lead{font-size:15px}.code-layout{padding-bottom:40px}.code-output{letter-spacing:.08em}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.code-page *{transition:none!important;animation:none!important}}