.atelier.section{--atelier-blue:#3157ff;--atelier-dark:#171b1e;--atelier-line:#cbd0cb;padding-block:96px 72px;background:#f1f2ed;color:#171b1e;overflow:hidden}
.atelier-heading{display:grid;grid-template-columns:1.2fr .8fr;gap:8%;align-items:end;margin-bottom:40px}
.atelier-eyebrow{margin:0 0 16px;font:400 10px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#64706b}
.atelier-heading h2{max-width:730px;font:400 clamp(30px,3.1vw,49px)/1.18 var(--display);letter-spacing:-.045em;text-wrap:balance}
.atelier-intro{max-width:470px;margin:0 0 2px;color:#59635e;font:400 15px/1.8 var(--body)}
.atelier-grid{display:grid;grid-template-columns:1.19fr .88fr 1fr;gap:24px;align-items:start}
.atelier-study{min-width:0}
.atelier-study-motion{padding-top:86px}
.atelier-study-interface{padding-top:26px}
.atelier-type-art{height:408px;background:var(--atelier-blue);position:relative;isolation:isolate;overflow:hidden;color:#fff}
.atelier-type-grid{position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(100% - 1px),#dfe5ff21 1px),linear-gradient(0deg,transparent calc(100% - 1px),#dfe5ff21 1px);background-size:25% 100%,100% 68px;z-index:-1}
.atelier-type-top{position:absolute;inset:19px 19px auto;display:flex;justify-content:space-between;gap:10px;font:8px/1.5 var(--mono);letter-spacing:.04em;color:#dbe2ff;direction:ltr}
.atelier-type-axis{position:absolute;top:62px;left:14px;writing-mode:vertical-rl;font:8px/1.5 var(--mono);letter-spacing:.15em;color:#dbe2ff}
.atelier-letter-stage{position:absolute;inset:44px 22px 97px;display:grid;place-items:center;direction:ltr;isolation:isolate}
.atelier-letter-stage:before,.atelier-letter-stage:after{content:"";position:absolute;inset:auto -22px 25%;height:1px;background:#e5eaff8c;z-index:-1}
.atelier-letter-stage:after{bottom:78%;background:#e5eaff5c}
.atelier-letter-solid,.atelier-letter-outline{grid-area:1/1;font:400 clamp(94px,11.7vw,175px)/1 var(--display);letter-spacing:-.075em;display:block;animation:atelier-letter-shift 8s cubic-bezier(.45,0,.25,1) infinite alternate}
.atelier-letter-outline{color:transparent;-webkit-text-stroke:1px #c4d0ff70;transform:translate(13px,13px);animation:atelier-outline-shift 8s cubic-bezier(.45,0,.25,1) infinite alternate}
.atelier-type-notations{position:absolute;inset:auto 19px 91px;display:flex;justify-content:space-between;gap:5px;border-top:1px solid #dce3ff4d;padding-top:12px;font:8px/1.4 var(--mono);letter-spacing:.05em;color:#dee5ff}
.atelier-type-word{position:absolute;inset:auto auto -14px -6px;font:500 clamp(44px,5.7vw,86px)/1.15 var(--display);letter-spacing:-.055em;white-space:nowrap;color:#9fafff3d;transform:translateX(-3%);animation:atelier-word-drift 11s ease-in-out infinite alternate}
.atelier-caption{padding:23px 2px 0}
.atelier-caption .atelier-eyebrow{margin-bottom:9px;font-size:9px}
.atelier-caption h3{margin:0 0 11px;font:500 clamp(17px,1.38vw,22px)/1.45 var(--body);letter-spacing:-.025em;text-wrap:balance}
.atelier-caption>p:last-child{max-width:340px;margin:0;color:#657068;font:400 13px/1.8 var(--body)}
.atelier-motion-art{position:relative;height:304px;background:var(--atelier-dark);color:#f7f8f4;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:32px 20px;isolation:isolate}
.atelier-motion-rings{position:absolute;inset:0;display:grid;place-items:center;z-index:-1;transform:rotate(-28deg)}
.atelier-motion-rings span{position:absolute;width:86%;height:112px;border:1px solid #e8ecf22b;border-radius:50%;transition:transform .55s ease,border-color .55s ease}
.atelier-motion-rings span:nth-child(2){width:110%;height:154px;border-color:#e8ecf219}
.atelier-motion-rings span:nth-child(3){width:138%;height:205px;border-color:#e8ecf20c}
.atelier-motion-mark{position:absolute;top:17px;inset-inline-end:20px;font:300 30px/1 var(--body);color:#7186b6}
.atelier-demo-button{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:61px;padding:8px 9px 8px 20px;border:1px solid #fbfcf052;border-radius:60px;background:#f1f3e9;color:#1b211d;box-shadow:0 8px 35px #0003;text-decoration:none;font:600 clamp(11px,1vw,14px)/1.4 var(--body);transition:transform .4s cubic-bezier(.2,.8,.2,1),background .35s,box-shadow .35s;max-width:100%}
.atelier-button-arrow{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:var(--atelier-blue);color:white;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.atelier-button-arrow svg{width:20px;height:20px}
.atelier-demo-button:hover,.atelier-demo-button:focus-visible{transform:translateY(-7px) rotate(-2deg);background:#fff;box-shadow:0 15px 42px #0005}
.atelier-demo-button:hover .atelier-button-arrow,.atelier-demo-button:focus-visible .atelier-button-arrow{transform:rotate(45deg)}
.atelier-demo-button:focus-visible{outline:3px solid #93a6ff;outline-offset:7px}
.atelier-motion-art:has(.atelier-demo-button:hover) .atelier-motion-rings span,.atelier-motion-art:has(.atelier-demo-button:focus-visible) .atelier-motion-rings span{transform:scale(1.08);border-color:#6f8aff6e}
.atelier-motion-hint{position:absolute;inset:auto 20px 20px;margin:0;text-align:center;color:#a8b2ae;font:400 9px/1.65 var(--body);max-width:250px;margin-inline:auto}
.atelier-device-art{height:417px;padding:26px 20px 0;position:relative;background:#dfe3dc;isolation:isolate;overflow:hidden;display:flex;justify-content:center;align-items:flex-start}
.atelier-device-art:before{content:"";position:absolute;inset:23px;border:1px solid #b9c2b877;z-index:-1}
.atelier-device-art:after{content:"";position:absolute;left:50%;bottom:-50px;width:310px;height:150px;border-radius:50%;background:#3e5b6c14;filter:blur(20px);transform:translateX(-50%);z-index:-1}
.atelier-device{width:238px;flex:none;min-height:405px;border:6px solid #272e2b;border-radius:33px 33px 0 0;background:#fafbf7;position:relative;box-shadow:12px 22px 35px #2a382c23;overflow:hidden;padding:20px 13px 14px;transform:rotate(3deg);transform-origin:50% 70%;transition:transform .5s ease}
.atelier-device:focus-within{transform:rotate(0)}
.atelier-device-speaker{position:absolute;top:8px;left:50%;width:43px;height:4px;background:#323b36;border-radius:8px;transform:translateX(-50%)}
.atelier-app-header{display:flex;gap:7px;align-items:center;margin:8px 0 19px;font:600 9px/1.4 var(--body);letter-spacing:-.01em}
.atelier-app-logo{display:flex;align-items:center;gap:2px;width:17px;height:17px;flex:none;transform:rotate(-15deg)}
.atelier-app-logo i{display:block;width:4px;height:13px;border-radius:2px;background:var(--atelier-blue)}
.atelier-app-logo i:nth-child(2){height:18px}.atelier-app-logo i:nth-child(3){height:9px}
.atelier-app-menu{margin-inline-start:auto;letter-spacing:1px;font-size:15px;line-height:1}
.atelier-app{position:relative;min-height:294px}
.atelier-tab{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.atelier-app-tabs{display:flex;padding:3px;border-radius:7px;background:#e9ede5;gap:3px;margin-bottom:23px}
.atelier-app-tabs label{flex:1;text-align:center;border-radius:5px;padding:7px 5px;font:500 10px/1.4 var(--body);cursor:pointer;color:#687468;transition:background .2s,color .2s,box-shadow .2s}
.atelier-tab-pages:checked~.atelier-app-tabs label:first-child,.atelier-tab-tasks:checked~.atelier-app-tabs label:last-child{background:#fff;box-shadow:0 1px 4px #1c321411;color:#1c2d20}
.atelier-tab-pages:focus-visible~.atelier-app-tabs label:first-child,.atelier-tab-tasks:focus-visible~.atelier-app-tabs label:last-child{outline:2px solid var(--atelier-blue);outline-offset:2px}
.atelier-app-kicker{margin:0 0 8px;font:500 7px/1.5 var(--mono);letter-spacing:.035em;color:#6d796c}
.atelier-app-panel h4{margin:0 0 8px;font:500 16px/1.25 var(--body);letter-spacing:-.045em;color:#273328}
.atelier-app-note{margin:0 0 15px;max-width:170px;font:400 8px/1.65 var(--body);color:#778271}
.atelier-panel-tasks{display:none}
.atelier-tab-tasks:checked~.atelier-panel-tasks{display:block}
.atelier-tab-tasks:checked~.atelier-panel-pages{display:none}
.atelier-mini-page{height:116px;padding:11px;background:#e1e5f3;overflow:hidden}
.atelier-mini-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:17px}
.atelier-mini-top i{display:block;width:23px;height:4px;background:#284ba6;border-radius:3px}
.atelier-mini-top>span{height:3px;width:36px;background:repeating-linear-gradient(90deg,#657cb6 0 9px,transparent 9px 14px)}
.atelier-mini-composition{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}
.atelier-mini-composition>div i{display:block;background:#234997;height:5px;border-radius:1px;margin-bottom:4px}
.atelier-mini-composition>div i:nth-child(2){width:78%}.atelier-mini-composition>div i:nth-child(3){width:43%;height:3px;margin-top:7px;background:#889ec7}
.atelier-mini-composition>div b{display:block;width:23px;height:7px;border-radius:8px;margin-top:10px;background:#3157ff}
.atelier-mini-object{display:block;width:48px;height:51px;justify-self:center;border-radius:50% 50% 12% 12%;background:linear-gradient(135deg,#416de8,#27469a);transform:rotate(17deg);box-shadow:8px 6px 0 #aebfdf}
.atelier-mini-bottom{display:flex;gap:10px;margin-top:13px}.atelier-mini-bottom span{display:block;width:24%;height:3px;background:#acb9d5}
.atelier-app-page-meta{display:grid;gap:2px;margin-top:9px;font:400 8px/1.5 var(--body);color:#71806f}.atelier-app-page-meta strong{font-weight:500;color:#35482f}
.atelier-task-list{display:grid;margin-top:16px;border-top:1px solid #dce1d5}
.atelier-task-list label{display:flex;align-items:center;gap:9px;padding:15px 0;border-bottom:1px solid #dce1d5;font:400 10px/1.5 var(--body);cursor:pointer;color:#53624c}
.atelier-task-list input{width:15px;height:15px;flex:none;accent-color:var(--atelier-blue);margin:0}
.atelier-task-list input:checked+span{text-decoration:line-through;text-decoration-color:#a8b69f;color:#75836e}
.atelier-task-list input:focus-visible{outline:2px solid var(--atelier-blue);outline-offset:3px}
.atelier-app-footer{margin:15px 0 0;color:#7c8877;font:400 7px/1.5 var(--body);text-align:center}
.atelier-device-coordinate{position:absolute;inset:12px auto auto 12px;font:400 8px var(--mono);color:#7c887d;direction:ltr}
.atelier-interface-badge{position:absolute;top:10px;inset-inline-end:10px;z-index:2;padding:4px 7px;border:1px solid #cbd2c8;background:#eef1e8;color:#586851;font:500 8px/1.5 var(--body)}
.atelier-outcomes{list-style:none;padding:0;margin:58px 0 0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--atelier-line);gap:24px}
.atelier-outcomes li{min-width:0}
.atelier-outcomes a{display:flex;gap:10px;align-items:start;padding:23px 0 9px;text-decoration:none;color:#1c2821;min-height:105px}
.atelier-outcome-number{padding-top:2px;font:400 9px/1.5 var(--mono);color:#52745c;flex:none}
.atelier-outcomes strong{display:block;font:500 12px/1.6 var(--body);letter-spacing:-.01em;transition:color .2s}
.atelier-outcomes small{display:block;margin-top:5px;font:400 10px/1.6 var(--body);color:#758073}
.atelier-outcomes svg{width:14px;height:14px;flex:none;margin-inline-start:auto;margin-top:3px;color:#687d6b;transition:transform .2s}
.atelier-outcomes a:hover strong,.atelier-outcomes a:focus-visible strong{color:var(--atelier-blue)}
.atelier-outcomes a:hover svg,.atelier-outcomes a:focus-visible svg{transform:translate(2px,-2px)}
.atelier-outcomes a:focus-visible{outline:2px solid var(--atelier-blue);outline-offset:5px}
html[lang=he] .atelier-letter-stage{direction:rtl}html[lang=he] .atelier-letter-solid,html[lang=he] .atelier-letter-outline{letter-spacing:-.045em;font-size:190px}html[lang=he] .atelier-type-word{left:auto;right:12px;font-size:94px}html[lang=he] .atelier-demo-button{padding:8px 20px 8px 9px}html[lang=he] .atelier-caption h3{font-size:23px}html[lang=he] .atelier-app-panel h4{font-size:19px}
@keyframes atelier-letter-shift{0%,20%{transform:translate(-5px,3px);letter-spacing:-.085em}80%,100%{transform:translate(5px,-4px);letter-spacing:-.045em}}
@keyframes atelier-outline-shift{0%,20%{transform:translate(14px,14px);letter-spacing:-.085em}80%,100%{transform:translate(-6px,6px);letter-spacing:-.045em}}
@keyframes atelier-word-drift{from{transform:translateX(-3%)}to{transform:translateX(4%)}}
.atelier:not(.is-playing) *,.atelier:not(.is-playing) *:before,.atelier:not(.is-playing) *:after{animation-play-state:paused!important}
@media(min-width:1600px){.atelier-grid{gap:32px}.atelier-type-art{height:455px}.atelier-device-art{height:448px}.atelier-motion-art{height:331px}.atelier-device{width:253px}.atelier-app-header{font-size:10px}.atelier-app{min-height:315px}.atelier-app-panel h4{font-size:18px}.atelier-mini-page{height:133px}.atelier-mini-composition{margin-top:21px}.atelier-caption h3{font-size:23px}}
@media(max-width:1100px){.atelier-grid{gap:18px;grid-template-columns:1.1fr .88fr 1fr}.atelier-type-art{height:360px}.atelier-study-motion{padding-top:68px}.atelier-motion-art{height:283px;padding-inline:15px}.atelier-demo-button{gap:10px;padding-inline-start:13px;font-size:11px}.atelier-button-arrow{width:35px;height:35px}.atelier-device-art{height:385px;padding-inline:10px}.atelier-device{width:214px;padding-inline:11px}.atelier-type-notations{font-size:7px}.atelier-caption h3{font-size:17px}.atelier-outcomes{gap:18px}.atelier-outcomes a{gap:7px}.atelier-outcomes strong{font-size:11px}.atelier-outcomes small{font-size:9px}}
@media(max-width:850px){.atelier.section{padding-block:75px 55px}.atelier-heading{grid-template-columns:1fr;gap:20px;margin-bottom:32px}.atelier-heading h2{font-size:37px;max-width:680px}.atelier-intro{max-width:580px}.atelier-grid{grid-template-columns:1fr 1fr;gap:32px 22px}.atelier-study-type{grid-column:1/2}.atelier-study-motion{grid-column:2/3;padding-top:47px}.atelier-type-art{height:350px}.atelier-motion-art{height:280px}.atelier-letter-solid,.atelier-letter-outline{font-size:136px}.atelier-type-word{font-size:72px}.atelier-study-interface{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center;padding-top:0}.atelier-device-art{height:340px}.atelier-device{width:238px}.atelier-study-interface .atelier-caption{padding:0 12px 0 0}.atelier-caption h3{font-size:21px}.atelier-study-interface .atelier-caption>p:last-child{max-width:330px}.atelier-outcomes{grid-template-columns:1fr 1fr;gap:0 30px;margin-top:40px}.atelier-outcomes li:nth-child(n+3){border-top:1px solid var(--atelier-line)}.atelier-outcomes strong{font-size:13px}.atelier-outcomes small{font-size:11px}.atelier-outcomes a{gap:12px}.atelier-demo-button{font-size:13px;gap:14px}.atelier-button-arrow{width:40px;height:40px}}
@media(max-width:540px){.atelier.section{padding-block:62px 42px}.atelier-heading h2{font-size:30px;line-height:1.2}.atelier-intro{font-size:14px;line-height:1.75}.atelier-eyebrow{font-size:9px}.atelier-grid{display:block}.atelier-study{padding:0;margin:0 0 32px}.atelier-type-art{height:326px}.atelier-letter-solid,.atelier-letter-outline{font-size:144px}.atelier-type-word{font-size:76px}.atelier-caption{padding:18px 0 0}.atelier-caption h3{font-size:21px}.atelier-caption>p:last-child{max-width:100%;font-size:13px}.atelier-study-motion{width:88%;margin-inline-start:auto}.atelier-motion-art{height:264px}.atelier-demo-button{font-size:13px;gap:21px}.atelier-study-interface{display:block;width:94%;margin-inline-end:auto;margin-bottom:0}.atelier-device-art{height:345px}.atelier-study-interface .atelier-caption{padding:18px 0 0}.atelier-device{width:236px;transform:rotate(3deg)}.atelier-outcomes{gap:0 22px;margin-top:32px}.atelier-outcomes a{padding-block:19px;gap:8px;min-height:113px}.atelier-outcomes strong{font-size:11px;line-height:1.65}.atelier-outcomes small{font-size:9px}.atelier-outcomes svg{width:12px;height:12px}.atelier-outcome-number{font-size:8px}html[lang=he] .atelier-heading h2{font-size:37px}html[lang=he] .atelier-letter-solid,html[lang=he] .atelier-letter-outline{font-size:185px}html[lang=he] .atelier-outcomes strong{font-size:14px}html[lang=he] .atelier-outcomes small{font-size:11px}}
@media(prefers-reduced-motion:reduce){.atelier *,.atelier *:before,.atelier *:after{animation:none!important;transition:none!important}.atelier-demo-button:hover,.atelier-demo-button:focus-visible,.atelier-device,.atelier-device:focus-within{transform:none}.atelier-letter-solid{transform:none}.atelier-letter-outline{transform:translate(8px,8px)}}
html.reduce-motion .atelier *,html.reduce-motion .atelier *:before,html.reduce-motion .atelier *:after{animation:none!important;transition:none!important}html.reduce-motion .atelier-demo-button:hover,html.reduce-motion .atelier-demo-button:focus-visible,html.reduce-motion .atelier-device,html.reduce-motion .atelier-device:focus-within{transform:none}html.reduce-motion .atelier-letter-solid{transform:none}html.reduce-motion .atelier-letter-outline{transform:translate(8px,8px)}
