@font-face{font-family:Cairo;src:url('/holding/assets/fonts/cairo-arabic-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Cairo;src:url('/holding/assets/fonts/cairo-arabic-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Cairo;src:url('/holding/assets/fonts/cairo-arabic-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Urbanist;src:url('/holding/assets/fonts/urbanist-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Urbanist;src:url('/holding/assets/fonts/urbanist-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Urbanist;src:url('/holding/assets/fonts/urbanist-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Quicksand;src:url('/holding/assets/fonts/quicksand-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:NotoHebrew;src:url('/holding/assets/fonts/noto-sans-hebrew-hebrew-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:NotoHebrew;src:url('/holding/assets/fonts/noto-sans-hebrew-hebrew-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:NotoHebrew;src:url('/holding/assets/fonts/noto-sans-hebrew-hebrew-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@property --rim-angle { syntax:'<angle>'; initial-value:0deg; inherits:false }
@property --theme-night { syntax:'<number>'; initial-value:1; inherits:true }
@property --ground { syntax:'<color>'; initial-value:#111111; inherits:true }
@property --ink { syntax:'<color>'; initial-value:#f4f0e8; inherits:true }
@property --secondary { syntax:'<color>'; initial-value:#c9c2b7; inherits:true }
@property --faint { syntax:'<color>'; initial-value:#b6afa5; inherits:true }
@property --field { syntax:'<color>'; initial-value:#20201e; inherits:true }
@property --line { syntax:'<color>'; initial-value:#666157; inherits:true }
@property --accent { syntax:'<color>'; initial-value:#c49a4a; inherits:true }
@property --halo { syntax:'<color>'; initial-value:#dfbd7d; inherits:true }
:root { --theme-night:1; --composer-rim-width:1px; color-scheme:dark; --ground:#111111; --ink:#f4f0e8; --secondary:#c9c2b7; --faint:#b6afa5; --field:#20201e; --line:#666157; --accent:#c49a4a; --halo:#dfbd7d; --radius-sm:10px; --radius:14px; --radius-frame:23px; font-family:Urbanist,Arial,sans-serif; font-synthesis:none }
:root[data-theme=light] { --theme-night:0; --composer-rim-width:2px; color-scheme:light; --ground:#f4f0e8; --ink:#111111; --secondary:#4b4742; --faint:#605b54; --field:#f9f6f0; --line:#999184; --accent:#6b1825; --halo:#983e4e }
/* Interpolate surfaces in sRGB, but switch text at their luminance crossover.
   Separate field/ground thresholds keep small text legible without a grey-text midpoint. */
:root.theme-changing { --ground:color-mix(in srgb,#111111 calc(var(--theme-night) * 100%),#f4f0e8); --field:color-mix(in srgb,#20201e calc(var(--theme-night) * 100%),#f9f6f0); --theme-ink-switch:clamp(0,calc((var(--theme-night) - .55) * 100000),1); --theme-field-switch:clamp(0,calc((var(--theme-night) - .60) * 100000),1); --ink:color-mix(in srgb,#fff calc(var(--theme-ink-switch) * 100%),#000); --secondary:var(--ink); --faint:var(--ink); transition-property:--theme-night,--line,--accent,--halo; transition-duration:480ms; transition-timing-function:cubic-bezier(.4,0,.2,1) }
:root.theme-changing :is(.composer-shell,.attachment,dialog) { --ink:color-mix(in srgb,#fff calc(var(--theme-field-switch) * 100%),#000); --secondary:var(--ink); --faint:var(--ink); color:var(--ink) }
:root.theme-changing .send { transition:none }
* { box-sizing:border-box }
html,body { margin:0; inline-size:100%; block-size:100%; overflow:hidden }
body { color:var(--ink); background:var(--ground); min-inline-size:280px }
button,textarea,select { font:inherit }
button,select,a,textarea { -webkit-tap-highlight-color:transparent }
button,select { touch-action:manipulation }
button { color:inherit; cursor:pointer }
button,textarea,select { border:0 }
button:disabled { cursor:default }
svg { inline-size:24px; block-size:24px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; flex:none }
a { color:inherit }
button:focus-visible,a:focus-visible { outline:2px solid var(--accent); outline-offset:3px }
.sr-only { position:absolute; inline-size:1px; block-size:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
[hidden] { display:none!important }
/* One 1536×1024 coordinate system keeps the portrait, masked gaze and original apron mark registered. */
.workshop { --scene-width:144dvh; --scene-left:max(0px,calc((100vw - 1560px)/2)); --scene-anchor-x:.5; --scene-top:50%; --scene-shift-y:-50%; --apron-x:18.03%; --apron-y:62.1%; --apron-width:13.02%; --apron-rotation:0deg; --eye-mask:linear-gradient(transparent,transparent); --tracking-mask:linear-gradient(transparent,transparent); --hand-mask:linear-gradient(transparent,transparent); --hand-clear-mask:linear-gradient(transparent,transparent); position:fixed; inset:0; z-index:-1; overflow:hidden; background-color:var(--ground); pointer-events:none }
.workshop-scene,.workshop-emission { position:absolute; width:var(--scene-width); aspect-ratio:3/2; left:var(--scene-left); top:var(--scene-top); transform:translateY(var(--scene-shift-y)); pointer-events:none }
.workshop-base,.workshop-pose,.workshop-gaze,.workshop-blink,.workshop-cleanplate,.workshop-hand { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:fill; opacity:0; pointer-events:none; user-select:none }
.workshop-base.is-loaded { opacity:1 }
.workshop-pose-group { position:absolute; inset:0; display:none; pointer-events:none }
.workshop-pose-group[data-writing-pose=ltr] { --hand-origin:12.369792% 86.621094%; --hand-mask:var(--ltr-hand-mask); --hand-clear-mask:var(--ltr-clear-mask) }
.workshop-pose-group[data-writing-pose=rtl] { --hand-origin:23.242188% 88.085938%; --hand-mask:var(--rtl-hand-mask); --hand-clear-mask:var(--rtl-clear-mask) }
:root[dir=ltr] .workshop-pose-group[data-writing-pose=ltr],:root[dir=rtl] .workshop-pose-group[data-writing-pose=rtl] { display:block }
.workshop-pose-group.pose-ready .workshop-pose { opacity:1 }
.workshop-gaze-mask,.workshop-writing { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity 140ms ease-out }
.workshop-gaze-mask,.workshop-blink,.workshop-cleanplate,.workshop-hand { mask-size:100% 100%; -webkit-mask-size:100% 100%; mask-position:center; -webkit-mask-position:center; mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; mask-mode:alpha }
.workshop-gaze-mask { mask-image:var(--tracking-mask); -webkit-mask-image:var(--tracking-mask) }
.workshop-gaze { opacity:1; transform:translate(var(--gaze-x,0%),var(--gaze-y,0%)) }
.workshop.gaze-ready[data-gaze-active=true] .workshop-gaze-mask { opacity:1 }
.workshop-blink { mask-image:var(--eye-mask); -webkit-mask-image:var(--eye-mask); transition:opacity 55ms ease-in-out }
.workshop.blink-ready.blinking .workshop-blink { opacity:1 }
.workshop-cleanplate { opacity:1; mask-image:var(--hand-clear-mask); -webkit-mask-image:var(--hand-clear-mask) }
.workshop-hand { opacity:1; mask-image:var(--hand-mask); -webkit-mask-image:var(--hand-mask); transform-origin:var(--hand-origin,13.997396% 85.9375%); transform:translate(var(--hand-x,0%),var(--hand-y,0%)) rotate(var(--hand-rotation,0deg)) }
.workshop.writing-ready.writing .workshop-writing { opacity:1 }
@media(min-width:901px) {
  .workshop-scene,.workshop-emission { mask-image:linear-gradient(90deg,transparent,#000 4%,#000 76%,transparent),linear-gradient(180deg,transparent,#000 3%,#000 97%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 76%,transparent),linear-gradient(180deg,transparent,#000 3%,#000 97%,transparent); mask-composite:intersect; -webkit-mask-composite:source-in }
}
/* Apron x/y are the original wordmark's top-left corner, expressed in source-image percentages. */
.workshop-apron { position:absolute; display:block; left:var(--apron-x); top:var(--apron-y); width:var(--apron-width); height:auto; transform:rotate(var(--apron-rotation)); transform-origin:center; opacity:0; pointer-events:none; user-select:none }
.workshop-base.is-loaded:not([data-fallback]) ~ .workshop-apron.is-loaded { opacity:1 }
/* Lights are registered to the original1536x1024 photograph, so every crop keeps them attached.
   Glass, metal and the daylight scene remain in the original image; only emitted light changes. */
.workshop-lighting,.workshop-lamp,.workshop-led,.workshop-lamp-source,.workshop-led-source { position:absolute; inset:0; pointer-events:none }
.workshop-lighting,.workshop-emission { opacity:0 }
.workshop:has(.workshop-base.is-loaded:not([data-fallback])) .workshop-emission { opacity:1 }
.workshop-base.is-loaded:not([data-fallback]) ~ .workshop-lighting { opacity:1 }
.workshop-lamp,.workshop-led,.workshop-lamp-source,.workshop-led-source { opacity:var(--theme-night); mix-blend-mode:screen }
.workshop-lighting i,.workshop-emission i { position:absolute; display:block; pointer-events:none }
/* Emissive surfaces sit over the readability veil; ambient spill remains in the photo. */
.workshop-emission .lamp-core { opacity:.82 }
.workshop-emission .lamp-bloom { opacity:.65 }
.workshop-emission .lamp-rim { opacity:.6 }
.workshop-emission .led-core { opacity:.78 }
.workshop-emission .led-bloom { opacity:.7 }
.lamp-core { left:34.05%; top:6.65%; width:2.47%; height:5.96%; background:radial-gradient(ellipse at 50% 39%,#fff9df 0%,#ffe7aee8 24%,#ffc2669c 48%,#f0a24200 74%); filter:blur(.6px) }
.lamp-rim { left:30.45%; top:6.45%; width:9.85%; height:2.15%; background:radial-gradient(ellipse,#ffd58b66, #e7a44822 48%,transparent 72%) }
.lamp-bloom { left:30.08%; top:1.56%; width:10.42%; height:16.6%; background:radial-gradient(ellipse,#ffd38948 0%,#edab4930 23%,#d98b2914 49%,transparent 72%) }
.lamp-spill { left:23.7%; top:7.42%; width:23.18%; height:39.06%; background:radial-gradient(ellipse at 50% 12%,#f5c47a24 0%,#e6a34819 30%,#e6a34808 55%,transparent 73%) }
.workshop-led-rest,.led-core,.led-bloom { left:55.08%; top:4.64%; width:10.03%; height:.88%; transform:rotate(-20deg); transform-origin:left center; border-radius:var(--radius) }
.workshop-led-rest { opacity:calc(1 - var(--theme-night)); background:linear-gradient(90deg,#9b9d95,#c4c4b8 45%,#a2a49b); filter:blur(.6px) }
.led-core { background:linear-gradient(90deg,#fff5d5d9,#fffbe6f2,#fff3c9d9); filter:blur(.55px) }
.led-bloom { height:1.5%; top:4.32%; background:#ffdf9c88; filter:blur(5px) }
.led-spill { left:40%; top:0; width:34%; height:45%; background:radial-gradient(ellipse at 60% 8%,#f5dcaa20,#f5dcaa12 37%,transparent 72%) }
/* One interpolated veil preserves its coverage throughout the change. */
.workshop-veil { --veil-weight:calc(var(--theme-night) * 100%); position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(90deg,color-mix(in srgb,#1111112e var(--veil-weight),#f4f0e808) 0%,color-mix(in srgb,#11111147 var(--veil-weight),#f4f0e818) calc(30% - var(--theme-night) * 4%),color-mix(in srgb,#111111e8 var(--veil-weight),#f4f0e8f2) 57%,color-mix(in srgb,#111 var(--veil-weight),#f4f0e8) 83%) }
.page { block-size:100svh; block-size:var(--viewport-height,100dvh); display:flex; flex-direction:column; padding-inline:max(36px,calc((100vw - 1560px)/2)); isolation:isolate }
/* Keep Carbon header marks legible without washing out the portrait below. */
@media(min-width:901px) {
  .workshop-veil::before { content:''; position:absolute; inset:0; opacity:calc(1 - var(--theme-night)); background:linear-gradient(180deg,#f4f0e8e6 0px,#f4f0e8e6 64px,#f4f0e800 152px) }
}
.masthead { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:24px; flex:none }
.logo { position:relative; inline-size:190px; aspect-ratio:627/198; display:block; flex-shrink:0 }
.logo img { position:absolute; inset:0; inline-size:100%; block-size:auto }
.logo-dark { opacity:var(--theme-night) }
.logo-light { opacity:calc(1 - var(--theme-night)) }
.header-actions { display:flex; align-items:center; gap:8px }
.language-button,.theme-button { background:transparent; min-block-size:44px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--radius); corner-shape:squircle; padding:8px 10px }
.language-button { font-size:15px; font-weight:600 }
.language-button svg { inline-size:20px; block-size:20px }
.theme-button { position:relative; inline-size:44px; padding:10px }
.theme-button svg { position:absolute; inline-size:21px; block-size:21px }
.language-button:hover,.theme-button:hover { background:color-mix(in srgb,var(--ink) 8%,transparent) }
.sun-icon { opacity:var(--theme-night) }
.moon-icon { opacity:calc(1 - var(--theme-night)) }
.stage { flex:1; min-block-size:0; display:grid; direction:ltr; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); align-items:center; padding-block:24px; gap:24px }
.content { grid-column:2; inline-size:100%; max-inline-size:720px; max-block-size:100%; min-block-size:0; justify-self:end; display:flex; flex-direction:column; gap:36px }
.welcome { min-block-size:0; overflow:auto; scrollbar-width:thin; padding-block:2px 6px }
.status { font-size:clamp(17px,1.5vw,22px); line-height:1.65; font-weight:600; color:var(--secondary); margin:0 0 18px; max-inline-size:42ch; text-wrap:pretty }
h1 { font-family:Quicksand,Urbanist,sans-serif; font-size:clamp(36px,4vw,58px); line-height:1.13; letter-spacing:-.035em; font-weight:700; margin:0 0 22px; text-wrap:balance; max-inline-size:20ch }
.lead { font-size:clamp(18px,1.65vw,23px); line-height:1.6; margin:0; max-inline-size:42ch; color:var(--secondary); text-wrap:pretty }
.conversation { flex:none; min-inline-size:0 }
.identity { display:flex; align-items:center; gap:12px; margin-block-end:16px }
.avatar { inline-size:48px; block-size:48px; border-radius:50%; object-fit:cover; flex:none }
.identity h2 { font-size:19px; font-weight:700; line-height:1.4; margin:0 0 2px }
.identity p { font-size:15px; line-height:1.4; color:var(--secondary); margin:0 }
.composer-shell { position:relative; isolation:isolate; border:var(--composer-rim-width) solid transparent; border-radius:var(--radius-frame); corner-shape:squircle; background:linear-gradient(var(--field),var(--field)) padding-box,conic-gradient(from var(--rim-angle),var(--line) 0deg,var(--line) calc(200deg + var(--theme-night) * 40deg),var(--halo) calc(260deg + var(--theme-night) * 32deg),color-mix(in srgb,var(--ink) calc(var(--theme-night) * 100%),#6b1825) calc(300deg + var(--theme-night) * 20deg),var(--line) 350deg) border-box; animation:rim-travel 3s linear infinite }
.composer-shell:focus-within { --line:color-mix(in srgb,var(--accent) 65%,var(--field)) }
.composer-inner { position:relative; display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:end; gap:4px; padding:calc(4px - var(--composer-rim-width)); min-block-size:calc(52px - var(--composer-rim-width) * 2); border-radius:inherit; corner-shape:inherit; background:transparent }
.composer-inner:has(.send:not([hidden])) { grid-template-columns:44px minmax(0,1fr) 44px 44px }
.icon-button { inline-size:44px; block-size:44px; min-inline-size:44px; display:grid; place-items:center; border-radius:var(--radius); corner-shape:squircle; padding:0; background:transparent; align-self:flex-end }
.photo { color:var(--secondary) }
.photo svg,.send svg { inline-size:20px; block-size:20px }
.photo:hover { background:color-mix(in srgb,var(--ink) 7%,transparent); color:var(--ink) }
.send { color:var(--secondary); background:transparent; transition:background .15s,color .15s }
.send:disabled { color:color-mix(in srgb,var(--ink) 48%,var(--field)) }
.send:not(:disabled):hover { background:color-mix(in srgb,var(--ink) 7%,transparent); color:var(--ink) }
textarea { grid-column:2; grid-row:1; background:transparent; color:var(--ink); font-size:16px; line-height:1.5; min-inline-size:0; inline-size:100%; block-size:44px; max-block-size:110px; padding:10px 4px; resize:none; outline:none; overflow-x:hidden; overflow-y:hidden; align-self:end; border-radius:0 }
textarea:placeholder-shown { white-space:nowrap; text-overflow:ellipsis }
textarea::placeholder { color:var(--faint); opacity:1 }
.reassurance { font-size:14px; color:var(--secondary); line-height:1.6; margin:14px 4px 0; text-wrap:pretty }
.file-error { font-size:14px; color:var(--ink); line-height:1.5; margin-block:8px 0 }
.attachment { display:flex; align-items:center; gap:10px; margin-block-end:10px; max-inline-size:100%; background:var(--field); border:1px solid var(--line); border-radius:var(--radius); padding:4px }
.attachment>img { inline-size:40px; block-size:40px; object-fit:cover; border-radius:var(--radius-sm) }
.attachment>span { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 }
.attachment>button { display:grid; place-items:center; background:transparent; min-inline-size:44px; block-size:44px; border-radius:var(--radius) }
footer { flex:none; display:flex; justify-content:flex-end; direction:ltr; padding-block:12px max(20px,env(safe-area-inset-bottom)) }
.social-links { display:flex; align-items:center; justify-content:center; gap:14px; inline-size:54% }
.social-links a,.social-links button { display:grid; place-items:center; inline-size:44px; block-size:44px; padding:10px; color:var(--secondary); background:transparent; text-decoration:none; border-radius:var(--radius) }
.social-links a:hover,.social-links button:hover { color:var(--ink); background:color-mix(in srgb,var(--ink) 7%,transparent) }
.social-links svg { inline-size:21px; block-size:21px }
dialog { color:var(--ink); background:var(--field); border:1px solid color-mix(in srgb,var(--ink) 14%,transparent); border-radius:var(--radius-frame); corner-shape:squircle; max-inline-size:420px; inline-size:calc(100% - 32px); max-block-size:calc(100dvh - 32px); padding:24px; line-height:1.6; box-shadow:0 20px 90px #0005 }
dialog::backdrop { background:#0006; backdrop-filter:blur(5px) }
dialog h2 { font-size:20px; line-height:1.4; margin:0 }
dialog p { font-size:17px; color:var(--secondary); margin:16px 0 24px }
dialog button { border-radius:var(--radius); min-block-size:44px; padding:8px 16px; font-weight:600 }
#preview-dialog>button { color:var(--ground); background:var(--ink) }
.dialog-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-block-end:16px }
.dialog-close { display:grid; place-items:center; inline-size:44px; block-size:44px; padding:10px; background:transparent; flex:none }
.dialog-close:hover { background:color-mix(in srgb,var(--ink) 8%,transparent) }
.language-options { display:grid; gap:6px }
.language-options button { display:flex; align-items:center; justify-content:space-between; gap:16px; inline-size:100%; min-block-size:54px; color:var(--secondary); background:transparent; text-align:start; padding:12px 16px; font-size:18px; font-weight:500 }
.language-options button:hover { background:color-mix(in srgb,var(--ink) 5%,transparent) }
.language-options button[aria-pressed=true] { background:color-mix(in srgb,var(--accent) 13%,var(--field)); color:var(--ink) }
.language-options button svg { inline-size:20px; block-size:20px; visibility:hidden; color:var(--accent) }
.language-options button[aria-pressed=true] svg { visibility:visible }
.contact-list { display:grid; gap:12px; list-style:none; padding:0; margin:0 }
.contact-row { display:grid; gap:12px; padding:16px; background:color-mix(in srgb,var(--ink) 5%,var(--field)); border-radius:var(--radius) }
.contact-number { font-family:Urbanist,Arial,sans-serif; font-size:20px; font-weight:600; direction:ltr; text-align:start; margin:0 }
.contact-actions { display:flex; gap:8px }
.contact-actions a { flex:1; display:flex; justify-content:center; align-items:center; gap:8px; min-block-size:44px; border-radius:var(--radius); color:var(--ink); background:color-mix(in srgb,var(--ink) 8%,var(--field)); text-decoration:none; font-size:15px }
.contact-actions svg { inline-size:18px; block-size:18px }
:lang(ar) { font-family:Cairo,Urbanist,sans-serif }
:lang(ar) h1 { font-family:Cairo,Urbanist,sans-serif; line-height:1.42; letter-spacing:0; font-size:clamp(36px,3.7vw,56px); max-inline-size:21ch }
:lang(ar) .lead { line-height:1.75 }
:lang(he) { font-family:NotoHebrew,Arial,sans-serif }
:lang(he) h1 { font-family:NotoHebrew,Arial,sans-serif; line-height:1.25; font-size:clamp(35px,3.6vw,52px); letter-spacing:-.025em }
:lang(ru) { font-family:'Segoe UI',Arial,sans-serif }
:lang(ru) h1 { font-family:'Segoe UI',Arial,sans-serif; line-height:1.2; font-size:clamp(34px,3.4vw,50px); letter-spacing:-.025em }
:lang(ru) .lead { font-size:clamp(17px,1.5vw,21px) }
.status,h1,.lead,.identity p,.reassurance,dialog { overflow-wrap:anywhere }
@keyframes rim-travel { to { --rim-angle:360deg } }
@media(min-width:1600px) { .stage { grid-template-columns:minmax(0,1fr) minmax(0,1fr) } .content { justify-self:center } }
@media(max-width:900px) and (min-width:701px) { .page { padding-inline:28px } .stage { grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr) } .workshop { --scene-width:max(100vw,150dvh); --scene-anchor-x:.36; --scene-left:calc((100vw - var(--scene-width)) * var(--scene-anchor-x)) } }
@media(max-width:700px) {
  .page { padding-inline:20px }
  .masthead { padding-block:max(14px,env(safe-area-inset-top)) 12px; gap:12px }
  .logo { inline-size:148px }
  .header-actions { gap:2px }
  .language-button { font-size:14px; gap:6px; padding-inline:6px }
  .language-button svg { inline-size:18px; block-size:18px }
  .stage { display:flex; flex-direction:column; align-items:stretch; padding-block:clamp(14px,3.5dvh,30px) 0; gap:0 }
  .content { flex:1; block-size:100%; max-inline-size:none; gap:20px }
  .status { font-size:15px; line-height:1.6; margin-block-end:12px; max-inline-size:30ch }
  h1 { font-size:clamp(30px,9.2vw,40px); line-height:1.16; margin-block-end:16px; max-inline-size:18ch }
  .lead { font-size:17px; line-height:1.55; max-inline-size:31ch }
  :lang(ar) h1 { font-size:clamp(30px,9vw,39px); line-height:1.4; max-inline-size:18ch }
  :lang(ar) .lead { font-size:17px; line-height:1.65 }
  :lang(he) h1 { font-size:clamp(29px,8.5vw,37px); line-height:1.25 }
  :lang(ru) h1 { font-size:clamp(28px,8.2vw,35px); line-height:1.2 }
  :lang(ru) .lead { font-size:16px; line-height:1.6 }
  .conversation { margin-block-start:auto }
  .identity { gap:10px; margin-block-end:12px }
  .avatar { inline-size:40px; block-size:40px }
  .identity h2 { font-size:17px }
  .identity p { font-size:13px }
  .composer-inner { gap:4px }
  :root[data-theme=light] .lead { color:var(--ink) }
  textarea { font-size:16px; padding:10px 4px; line-height:1.5; max-block-size:92px }
  .reassurance { font-size:12px; line-height:1.65; margin-block-start:10px }
  footer { justify-content:center; padding-block:10px max(12px,env(safe-area-inset-bottom)) }
  .social-links { inline-size:auto; gap:16px }
  .workshop { --scene-width:150dvh; --scene-anchor-x:.24; --scene-left:calc((100vw - var(--scene-width)) * var(--scene-anchor-x)) }
  .workshop-veil { background-image:linear-gradient(180deg,color-mix(in srgb,#111b var(--veil-weight),#f4f0e8b3) 0%,color-mix(in srgb,#111b var(--veil-weight),#f4f0e899) calc(28% + var(--theme-night) * 2%),color-mix(in srgb,#1114 var(--veil-weight),#f4f0e814) calc(51% - var(--theme-night) * 1%),color-mix(in srgb,#1119 var(--veil-weight),#f4f0e88c) calc(72% - var(--theme-night) * 2%),color-mix(in srgb,#111 var(--veil-weight),#f4f0e8) 94%),linear-gradient(90deg,color-mix(in srgb,#1112 var(--veil-weight),#f4f0e800),color-mix(in srgb,#1116 var(--veil-weight),#f4f0e814) 40%,color-mix(in srgb,#111e var(--veil-weight),#f4f0e8cc) 100%) }
  :root[dir=ltr] .workshop { --scene-width:108dvh; --scene-anchor-x:.26; --scene-top:100%; --scene-shift-y:-100% }
  :root[dir=ltr] :is(.workshop-scene,.workshop-emission) { mask-image:linear-gradient(180deg,transparent,#000 6%); -webkit-mask-image:linear-gradient(180deg,transparent,#000 6%) }
  #language-dialog,#contact-dialog { margin:auto 12px max(12px,env(safe-area-inset-bottom)); inline-size:calc(100% - 24px); max-inline-size:none; padding:20px }
}
@media(max-width:380px) {
  .page { padding-inline:16px }
  .logo { inline-size:132px }
  .language-button { font-size:13px; gap:5px; padding-inline:4px }
  .language-button svg { inline-size:17px; block-size:17px }
  .theme-button { inline-size:44px }
  .header-actions { gap:0 }
  .lead,:lang(ar) .lead,:lang(he) .lead { font-size:16px }
}
@media(max-height:680px) and (max-width:700px) {
  .masthead { padding-block:10px 6px }
  .stage { padding-block-start:14px }
  .status { font-size:14px; line-height:1.5; margin-block-end:8px }
  .welcome h1 { margin-block-end:10px }
  .lead,:lang(ar) .lead,:lang(he) .lead,:lang(ru) .lead { font-size:15px; line-height:1.55 }
  .identity { margin-block-end:9px }
  .reassurance { margin-block-start:8px }
  footer { padding-block:6px max(6px,env(safe-area-inset-bottom)) }
}
@media(max-height:590px) and (max-width:700px) {
  .content { gap:14px }
  .welcome h1 { font-size:28px; line-height:1.25 }
  :lang(ar) .welcome h1 { line-height:1.38 }
  .status { font-size:13px }
  .lead,:lang(ar) .lead,:lang(he) .lead,:lang(ru) .lead { font-size:14px }
  .identity p { font-size:12px }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important }
  .composer-shell { background:linear-gradient(var(--field),var(--field)) padding-box,linear-gradient(120deg,var(--line),var(--halo),var(--line)) border-box }
  .workshop-gaze-mask,.workshop-blink,.workshop-writing { display:none!important }
}
.connect-link { display:inline-flex; align-items:center; justify-content:center; min-block-size:44px; padding:8px 18px; border-radius:var(--radius); color:var(--ground); background:var(--ink); text-decoration:none; margin-inline-end:8px; margin-block-end:8px; font-weight:600 }
#preview-dialog>button { background:transparent; color:var(--ink) }
.chat-dialog { inline-size:min(960px,calc(100% - 40px)); max-inline-size:960px; block-size:min(860px,calc(100dvh - 40px)); max-block-size:calc(100dvh - 40px); padding:0; overflow:hidden }
.chat-dialog[open] { display:flex; flex-direction:column }
.chat-header { display:flex; flex:none; align-items:center; justify-content:space-between; gap:16px; padding:10px 18px; border-block-end:1px solid color-mix(in srgb,var(--ink) 10%,transparent) }
.chat-person { display:flex; align-items:center; gap:10px }
.chat-person img { border-radius:50%; inline-size:36px; block-size:36px }
.chat-person h2 { font-size:18px }
.chat-person>div { min-inline-size:0 }
#chat-activity { margin:0; font-size:12px; line-height:1.4; color:var(--secondary); max-inline-size:32ch; text-wrap:pretty }
#chat-loading { padding:24px }
#chat-frame { inline-size:100%; flex:1; min-block-size:0; border:0; background:var(--ground) }
@media(min-width:1100px) {
  .chat-dialog { inline-size:min(860px,52vw); margin:auto max(24px,calc((100vw - 1560px)/2)) auto auto }
  .chat-dialog::backdrop { background:#0002; backdrop-filter:none }
  :root[data-theme=light] .chat-dialog::backdrop { background:#11111110 }
}
@media(max-width:700px) {
  .chat-dialog { inline-size:100%; max-inline-size:100%; block-size:100dvh; max-block-size:100dvh; margin:0; border:0; border-radius:0 }
  .chat-header { padding-block:max(8px,env(safe-area-inset-top)) 8px }
}

.account-button { --account-icon-green:#25d366; --account-icon-glow-low:rgb(37 211 102 / .14); --account-icon-glow-high:rgb(37 211 102 / .38); position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none; inline-size:44px; block-size:44px; min-inline-size:44px; min-block-size:44px; max-inline-size:44px; padding:0; margin:0; color:var(--secondary); background:transparent; border:0; border-radius:var(--radius); box-shadow:none }
:root[data-theme=light] .account-button { --account-icon-green:#128c4e; --account-icon-glow-low:rgb(18 140 78 / .10); --account-icon-glow-high:rgb(18 140 78 / .24) }
.account-button>svg { inline-size:22px; block-size:22px; filter:none }
.account-button:hover { color:var(--ink); background:transparent }
.account-button:focus:not(:focus-visible) { outline:none }
.account-button[data-account-status="signed-in"],.account-button[data-account-status="signed-in"]:hover{color:var(--account-icon-green)}
.account-button[data-account-status="signed-in"]>svg{filter:drop-shadow(0 0 3px var(--account-icon-glow-low))}
.account-button[data-account-status="checking"]>svg{opacity:.7}
.account-session-check{display:none;position:absolute;inset-inline-end:4px;bottom:5px;width:12px;height:12px;place-items:center;background:var(--field);border:1px solid var(--field);border-radius:var(--radius-sm);pointer-events:none}
.account-session-check svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.account-button[data-account-status="signed-in"] .account-session-check{display:grid}
.composer-toolbar { display:contents }
.composer-toolbar .photo { grid-column:1; grid-row:1 }
.composer-toolbar .account-button { grid-column:3; grid-row:1 }
.composer-toolbar .send { grid-column:4; grid-row:1; margin:0 }
.conversation>.identity { gap:8px; margin-block-end:10px }
.conversation>.identity .avatar { inline-size:32px; block-size:32px }
.conversation>.identity>div { display:flex; align-items:baseline; flex-wrap:wrap; gap:3px 8px }
.conversation>.identity h2 { margin:0; font-size:16px }
.conversation>.identity p { font-size:12px }
.account-dialog[open] { display:flex; flex-direction:column }
.account-dialog .dialog-header { flex:none; margin-block-end:14px }
.account-copy { min-block-size:0; padding-block-end:4px; overflow:auto; scrollbar-width:thin }
.account-dialog p { font-size:15px; line-height:1.6; margin:0 0 12px }
.account-dialog .account-benefit { color:var(--ink); font-weight:600 }
.account-dialog .account-optional { margin-block-end:0 }
.account-session-row { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-block-end:12px }
.account-dialog .account-session-row p { flex:1; min-inline-size:0; margin:0; color:var(--ink); font-weight:600 }
#account-session-retry { flex:none; min-inline-size:44px; min-block-size:44px; padding:8px 12px; color:var(--ink); background:transparent; border:1px solid var(--line) }
#account-session-retry[aria-disabled=true] { opacity:.65 }
.account-dialog .account-session-note { margin-block:12px 0; font-size:13px; color:var(--secondary) }
.account-actions { flex:none; margin-block-start:20px }
.account-link { display:flex; align-items:center; justify-content:center; min-block-size:44px; padding:10px 14px; border-radius:var(--radius); corner-shape:squircle; background:var(--ink); color:var(--ground); font-size:15px; font-weight:600; line-height:1.5; text-align:center; text-decoration:none }
.account-link:hover { background:color-mix(in srgb,var(--ink) 88%,var(--ground)) }
.account-dialog .account-new-tab { font-size:13px; line-height:1.5; margin:10px 0 0 }
@media(max-width:700px) {
  .conversation>.identity { margin-block-end:8px }
  .conversation>.identity .avatar { inline-size:28px; block-size:28px }
  .account-dialog { margin:auto 12px max(12px,env(safe-area-inset-bottom)); inline-size:calc(100% - 24px); max-inline-size:none; padding:20px }
}
@media(max-height:590px) and (max-width:700px) {
  .content { gap:10px }
  .conversation>.identity { margin-block-end:6px }
  .conversation>.identity .avatar { inline-size:24px; block-size:24px }
}