.ct-section{--ct-accent:var(--accent);--ct-surface:var(--surface);--ct-soft:var(--soft);--ct-line:var(--line);--ct-ink:var(--text);--ct-muted:var(--muted);width:min(1344px,calc(100% - 96px));margin:90px auto;color:var(--ct-ink)}
.ct-source code[dir=rtl]{direction:rtl;unicode-bidi:isolate}.ct-source code[dir=rtl]>span{direction:rtl;unicode-bidi:isolate}
.ct-heading{display:grid;grid-template-columns:1.1fr 1fr;gap:90px;align-items:start;margin-bottom:42px}.ct-heading h2{font-size:clamp(35px,4vw,58px);font-weight:560;line-height:1.06;letter-spacing:-.05em;margin:0}.ct-heading p{max-width:460px;font-size:16px;line-height:1.8;color:var(--ct-muted);margin:4px 0 22px}.ct-heading a{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:550;text-decoration:none}.ct-heading a svg{width:19px;height:19px}
.ct-panel{position:relative;border-radius:24px;padding:30px 36px 40px;background:var(--ct-soft);overflow:hidden;isolation:isolate}.ct-shared{display:flex;align-items:center;gap:10px;justify-content:center;margin:0 0 28px;color:var(--ct-accent);font-size:12px}.ct-shared svg{width:25px;height:25px}.ct-shared bdi{color:var(--ct-muted);font:10px AtwMono,monospace;margin-inline-start:8px}.ct-devices{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr) minmax(0,.95fr);gap:22px;align-items:end;direction:ltr;perspective:1400px}
.ct-device{position:relative;min-width:0;transition:transform 500ms cubic-bezier(.4,0,.2,1);transform:translateY(7px)}.ct-device[data-active=true]{transform:translateY(-6px)}.ct-hardware{border:1px solid var(--ct-line);background:var(--ct-surface);box-shadow:0 12px 28px #0000000a;overflow:hidden;transition:border-color 200ms}.ct-device[data-active=true] .ct-hardware{border-color:color-mix(in srgb,var(--ct-accent) 60%,var(--ct-line));box-shadow:0 16px 34px #00000012,0 0 0 3px color-mix(in srgb,var(--ct-accent) 7%,transparent)}
.ct-desktop .ct-hardware{border-radius:11px 11px 5px 5px}.ct-base{display:block;height:9px;background:var(--ct-line);border-radius:0 0 60% 60%;margin-inline:-12px}.ct-phone .ct-hardware{border:6px solid var(--ct-line);border-radius:24px;padding-top:18px}.ct-phone .ct-hardware:before{content:'';position:absolute;width:34px;height:4px;border-radius:8px;background:var(--ct-line);top:13px;left:calc(50% - 17px)}.ct-tablet .ct-hardware{border:8px solid var(--ct-line);border-radius:20px;padding:10px 0}.ct-chrome{height:36px;padding:0 12px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--ct-line);font-size:10px;white-space:nowrap}.ct-chrome img{width:15px;height:15px}.ct-chrome-end{margin-left:auto;color:var(--ct-muted);letter-spacing:3px}.ct-browser-lock{font-size:14px;color:var(--ct-muted)}.ct-workspace{display:flex;min-height:258px}.ct-file-tree{width:116px;flex-shrink:0;padding:22px 8px;border-right:1px solid var(--ct-line);font:9px/2.7 AtwMono,monospace;color:var(--ct-muted)}.ct-file-tree strong{display:block;font:10px/2.7 inherit;color:var(--ct-ink);margin-bottom:8px}.ct-file-tree span{display:block;padding-left:5px}.ct-file-active{color:var(--ct-accent);background:color-mix(in srgb,var(--ct-accent) 7%,transparent);border-radius:4px}.ct-editor{display:flex;flex-direction:column;flex:1;min-width:0}.ct-editor>header{height:35px;display:flex;align-items:center;gap:9px;justify-content:space-between;padding:0 12px;border-bottom:1px solid var(--ct-line);font:9px AtwMono,monospace}.ct-editor>header>span{font:8px sans-serif;color:var(--ct-muted)}.ct-source{padding:23px 8px 28px 0;min-width:0}.ct-source>div{display:grid;grid-template-columns:27px minmax(0,1fr);min-height:25px;align-items:center;white-space:nowrap}.ct-source i{font:8px AtwMono,monospace;text-align:center;color:var(--ct-muted);font-style:normal;opacity:.6}.ct-source code{font:10px/25px AtwMono,'Plex Arabic',monospace;position:relative;min-width:0;color:var(--ct-accent)}.ct-source code[dir=rtl]{font:12px/25px 'Plex Arabic',sans-serif;color:var(--ct-ink);text-align:right;padding-right:7px}.ct-change code>span{display:inline-block;vertical-align:middle;clip-path:inset(0 100% 0 0);opacity:0;transition:clip-path 500ms ease,opacity 160ms}.ct-change code[dir=rtl]>span{clip-path:inset(0 0 0 100%)}
[data-revision="1"] .ct-desktop-edit code>span,[data-revision="2"] :is(.ct-desktop-edit,.ct-phone-edit) code>span,[data-revision="3"] .ct-change code>span{opacity:1;clip-path:inset(0)}.ct-caret{width:1.5px;height:14px;display:inline-block;vertical-align:middle;background:var(--ct-accent);opacity:0;margin-inline-start:2px}.ct-panel[data-active-device=desktop] .ct-desktop:not([data-revision="0"]) .ct-desktop-edit .ct-caret,.ct-panel[data-active-device=phone] .ct-phone[data-revision="2"] .ct-phone-edit .ct-caret,.ct-panel[data-active-device=tablet] .ct-tablet[data-revision="3"] .ct-tablet-edit .ct-caret{opacity:1}.ct-device[data-active=true] .ct-change:has(.ct-caret){background:color-mix(in srgb,var(--ct-accent) 3%,transparent)}.ct-editor>footer{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:8px;padding:8px 12px;margin-top:auto;border-top:1px solid var(--ct-line);color:var(--ct-muted)}.ct-state-pending{display:none}.ct-panel[data-syncing=true] .ct-state-pending{display:inline}.ct-panel[data-syncing=true] .ct-state-saved{display:none}.ct-state-saved{color:var(--ct-accent)}.ct-device-label{font-size:11px;color:var(--ct-muted);text-align:center;margin-top:18px}.ct-phone .ct-chrome{font-size:8px;padding-inline:7px;height:28px}.ct-phone .ct-chrome-end{display:none}.ct-phone .ct-workspace{min-height:285px}.ct-phone .ct-editor>header{padding-inline:6px;gap:5px;font-size:8px}.ct-phone .ct-editor>header>span{display:none}.ct-phone .ct-source{padding-top:28px;padding-right:4px}.ct-phone .ct-source>div{grid-template-columns:17px minmax(0,1fr);min-height:29px}.ct-phone .ct-source code{font-size:9px;line-height:29px}.ct-phone .ct-source i{font-size:6px}.ct-phone .ct-source code[dir=rtl]{font-size:9px}.ct-phone .ct-caret{height:10px}.ct-tablet .ct-workspace{min-height:220px}.ct-tablet .ct-source code{font-size:9px}.ct-tablet .ct-source code[dir=rtl]{font-size:11px}.ct-tablet .ct-chrome{font-size:9px}.ct-requirement{font-size:10px;color:var(--ct-muted);text-align:end;margin:16px 4px 0}
.ct-skin-a .ct-panel{background:linear-gradient(140deg,#f6eadf,#f6f2ec 70%);padding-top:45px}.ct-skin-a .ct-desktop{transform:rotate(-1deg)}.ct-skin-a .ct-device[data-active=true]{transform:translateY(-6px)}.ct-skin-b{--ct-surface:#211f25;--ct-soft:#19181c;--ct-line:#4b3d43;--ct-ink:#f7f0e9;--ct-muted:#b5a8b0;--ct-accent:#ffab90}.ct-skin-b .ct-heading{color:var(--text)}.ct-skin-b .ct-heading p,.ct-skin-b .ct-requirement{color:var(--muted)}.ct-skin-b .ct-panel{border:1px solid #56433e;border-radius:12px;background:radial-gradient(ellipse at 45% 0,#392724,#171619 65%)}.ct-skin-b .ct-devices{grid-template-columns:minmax(0,1.6fr) minmax(0,.5fr) minmax(0,.9fr)}.ct-skin-b .ct-device[data-active=true] .ct-hardware{box-shadow:0 0 35px #dc785b1c,0 18px 40px #0007}.ct-skin-c{--ct-accent:#94edcc;--ct-surface:#12313f;--ct-soft:#0b2432;--ct-line:#34515a;--ct-ink:#f3efe6;--ct-muted:#b2c6c6}.ct-skin-c .ct-heading{color:var(--text)}.ct-skin-c .ct-heading p,.ct-skin-c .ct-requirement{color:var(--muted)}.ct-skin-c .ct-panel{border-radius:18px;border:1px solid var(--ct-line);background:radial-gradient(ellipse at 50% 100%,#1a4248,var(--ct-soft) 75%)}.ct-skin-c .ct-hardware{box-shadow:0 12px 30px #0003;border-radius:8px}.ct-skin-c .ct-phone .ct-hardware,.ct-skin-c .ct-tablet .ct-hardware{border-radius:18px}.ct-skin-c .ct-shared{justify-content:start;padding-bottom:22px;border-bottom:1px solid var(--ct-line)}.ct-skin-d .ct-panel{background:#f5e4d6;border-radius:22px 6px 22px 6px}.ct-skin-d .ct-devices{grid-template-columns:minmax(0,1.4fr) minmax(0,.55fr) minmax(0,1fr);gap:28px}.ct-skin-d .ct-device[data-active=true] .ct-hardware{box-shadow:5px 7px 0 color-mix(in srgb,var(--ct-accent) 15%,transparent)}
html[data-theme=dark] .ct-skin-a .ct-panel{background:linear-gradient(140deg,#382a25,#2b2622 70%)}html[data-theme=dark] .ct-skin-d .ct-panel{background:#352a32}
@media(max-width:1100px){.ct-section{width:calc(100% - 64px)}.ct-heading{gap:45px}.ct-panel{padding-inline:24px}.ct-devices,.ct-skin-b .ct-devices,.ct-skin-d .ct-devices{gap:17px;grid-template-columns:minmax(0,1.4fr) minmax(0,.58fr) minmax(0,1fr)}.ct-file-tree{display:none}.ct-tablet .ct-source code{font-size:8px}.ct-tablet .ct-source code[dir=rtl]{font-size:10px}.ct-tablet .ct-editor>header>span{display:none}.ct-desktop .ct-source code{font-size:10px}.ct-phone .ct-source code{font-size:8px}}
@media(max-width:760px){.ct-section{width:calc(100% - 40px);margin-block:65px}.ct-heading{grid-template-columns:1fr;gap:20px;margin-bottom:28px}.ct-heading h2{font-size:39px}.ct-heading p{font-size:15px;line-height:1.7;margin-top:0}.ct-panel{padding:22px 17px 26px;border-radius:17px}.ct-shared{margin-bottom:22px;justify-content:start;font-size:10px}.ct-shared bdi{font-size:8px;margin-left:auto}.ct-devices,.ct-skin-b .ct-devices,.ct-skin-d .ct-devices{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:18px 15px;align-items:start}.ct-desktop{grid-column:1/3;width:100%}.ct-desktop .ct-workspace{min-height:230px}.ct-file-tree{display:block;width:105px;font-size:8px}.ct-desktop .ct-source{padding-block:12px}.ct-desktop .ct-source code{font-size:9px}.ct-desktop .ct-source code[dir=rtl]{font-size:11px}.ct-desktop .ct-source>div{min-height:23px}.ct-device-label{font-size:9px;margin-top:12px}.ct-phone .ct-hardware{border-width:4px;border-radius:19px;padding-top:14px}.ct-phone .ct-hardware:before{top:9px;width:28px;left:calc(50% - 14px)}.ct-phone .ct-chrome{font-size:7px;gap:4px;padding-inline:5px}.ct-phone .ct-browser-lock{font-size:10px}.ct-phone .ct-workspace{min-height:246px}.ct-phone .ct-source{padding-top:22px}.ct-phone .ct-source>div{grid-template-columns:14px minmax(0,1fr);min-height:25px}.ct-phone .ct-source code{font-size:8px;line-height:25px}.ct-phone .ct-source code[dir=rtl]{font-size:9px}.ct-phone .ct-editor>footer{padding-inline:6px;font-size:6px;gap:4px}.ct-tablet{margin-top:27px}.ct-tablet .ct-hardware{border-width:5px;border-radius:14px;padding-block:5px}.ct-tablet .ct-workspace{min-height:225px}.ct-tablet .ct-source{padding-top:18px;padding-right:3px}.ct-tablet .ct-source>div{grid-template-columns:18px minmax(0,1fr);min-height:25px}.ct-tablet .ct-source code{font-size:8px;line-height:25px}.ct-tablet .ct-source code[dir=rtl]{font-size:9px}.ct-tablet .ct-chrome{font-size:8px;padding-inline:7px;gap:5px}.ct-tablet .ct-chrome-end{display:none}.ct-tablet .ct-editor>footer{font-size:7px;padding-inline:7px}.ct-requirement{font-size:9px;line-height:1.6;max-width:260px;margin-inline-start:auto}.ct-skin-a .ct-panel{padding-top:25px}}
@media(max-width:390px){.ct-section{width:calc(100% - 32px)}.ct-heading h2{font-size:35px}.ct-panel{padding-inline:12px}.ct-devices,.ct-skin-b .ct-devices,.ct-skin-d .ct-devices{gap:18px 12px;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.ct-file-tree{display:none}.ct-phone .ct-source code{font-size:7.5px}.ct-phone .ct-source code[dir=rtl]{font-size:9px}.ct-tablet .ct-source code{font-size:8px}}
@media(prefers-reduced-motion:reduce){.ct-device{transform:none!important;filter:none}.ct-caret{display:none!important}}