/* Shared visual language, three distinct editorial scenes. */
.content-hero-designed{isolation:isolate;padding:31px 0 0;background:#fcfdff;border-bottom:1px solid #e8eafa}
.content-hero-wash{position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 35% 70% at 26% 5%,#b5d9ff70,transparent 80%),radial-gradient(ellipse 40% 80% at 68% 10%,#d6bfff66,transparent 80%),radial-gradient(ellipse 30% 50% at 92% 90%,#b3f2ec40,transparent 80%),linear-gradient(180deg,#f6f5ff80,#fff 90%)}
.content-hero-designed>.content-wrap{position:relative;z-index:2;text-align:center}
.content-hero-designed .content-crumb{text-align:left;margin-bottom:25px;font-size:12px}
.content-hero-designed .content-eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:11px;letter-spacing:1.8px;font-weight:650;color:#7155cb}
.content-hero-designed .content-eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:#9474e6;box-shadow:0 0 0 4px #9474e611}
.content-hero-designed h1{max-width:1000px;margin:18px auto 16px;font-size:clamp(32px,3.6vw,49px);font-weight:720;letter-spacing:-1.2px;line-height:1.35;color:#17263c;text-wrap:balance}
.content-hero-designed p{margin-inline:auto;max-width:760px;font-size:15px;line-height:1.85;color:#60738b;text-wrap:balance}
.content-hero-designed .content-search{position:relative;max-width:460px;margin:26px auto 0;padding:11px 16px;border:1px solid #dedcef;border-radius:12px;box-shadow:0 7px 25px #6f61b008,inset 0 1px #fff;background:#ffffffed;text-align:left;transition:border-color .2s,box-shadow .2s}
.content-hero-designed .content-search:focus-within{border-color:#a394e9;box-shadow:0 0 0 4px #8e75d90c,0 8px 25px #6f61b00c}
.content-hero-designed .content-search>span{font-size:23px;line-height:1;color:#9299b4}
.content-hero-designed .content-search button{border-left:1px solid #eeeaf7;padding-left:15px;font-size:13px}
.content-hero-art{--art-accent:#8870dc;--art-tint:#f0eaff;position:relative;width:min(970px,calc(100% - 48px));height:245px;margin:15px auto 0;perspective:1100px;isolation:isolate;pointer-events:none;user-select:none}
.hero-art-tutorials{--art-accent:#427fd2;--art-tint:#e8f3ff}
.hero-art-updates{--art-accent:#20a7ae;--art-tint:#e3f8f4}
.art-aura{position:absolute;left:8%;right:8%;bottom:-65px;height:230px;background:radial-gradient(ellipse,#c9d3ff61,transparent 70%);filter:blur(10px);z-index:-1}
.art-orbit{position:absolute;border-radius:50%;border:1px solid #c2c9ed70;z-index:-1}
.art-orbit-one{width:600px;height:260px;left:calc(50% - 300px);top:10px;transform:rotate(-12deg)}
.art-orbit-two{width:760px;height:360px;left:calc(50% - 380px);top:30px;transform:rotate(13deg);border-style:dashed;border-color:#dce1f080}
.art-window{position:absolute;top:35px;left:50%;width:650px;height:264px;transform:translateX(-50%) rotateX(9deg);background:linear-gradient(145deg,#ffffffed,#f5f9ffed);border:1px solid #fff;border-radius:17px;box-shadow:0 0 0 1px #dce3f3a6,0 18px 60px #546f9b16,inset 0 1px #fff;overflow:hidden}
.art-window-bar{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;border-bottom:1px solid #e7ebf6;background:#ffffffc4;color:#8d97b0;font:500 9px/1 var(--font-body);letter-spacing:1px}
.art-window-dots{display:flex;gap:4px;align-items:center;width:39px}.art-window-dots i{width:5px;height:5px;border-radius:50%;background:#e1dfef}.art-window-dots i:nth-child(2){background:#d6dff0}.art-window-dots i:nth-child(3){background:#d4e8e7}
.art-window-status{width:39px;height:4px;background:#e9edf7;border-radius:3px}
.art-canvas{position:relative;height:230px;background-image:radial-gradient(#d6dfef80 .7px,transparent .7px);background-size:15px 15px}
.art-line{display:block;height:4px;width:100%;margin-top:9px;background:#e8ecf5;border-radius:4px}.art-line.short{width:62%}
.art-emblem{position:absolute;z-index:3;left:calc(50% - 367px);top:77px;width:67px;height:67px;border-radius:19px;display:grid;place-items:center;background:linear-gradient(140deg,#fff,#edf4ff);border:1px solid #fff;box-shadow:0 0 0 1px #e0e4f4,0 13px 35px #6f8ab224;color:var(--art-accent);transform:rotate(-12deg)}
.art-emblem svg{width:33px;height:33px}
.art-spark{position:absolute;top:47px;right:93px;font-size:35px;font-weight:300;color:#a89ce1;animation:art-spark-glow 6s ease-in-out infinite}
.art-dot{position:absolute;border-radius:50%;z-index:2;box-shadow:inset 0 1px 3px #fff}
.art-dot-one{width:16px;height:16px;top:175px;left:53px;background:linear-gradient(135deg,#d9edff,#a2c4fb)}
.art-dot-two{width:9px;height:9px;top:53px;right:195px;background:linear-gradient(135deg,#d6caff,#a18ae9)}
.art-dot-three{width:12px;height:12px;top:200px;right:36px;background:linear-gradient(135deg,#baf9e7,#8fe0da)}
.art-paper{position:absolute;border:1px solid #e6e5f2;border-radius:11px;background:#fff;box-shadow:0 10px 25px #6c77a00c;overflow:hidden}
.art-paper-back{width:194px;height:196px;left:115px;top:29px;transform:rotate(-12deg);padding:30px 19px;background:linear-gradient(145deg,#faf8ff,#e9e3ff)}
.art-paper-back .art-line{background:#dcd6ef;margin-top:13px}
.art-paper-front{width:259px;height:195px;left:215px;top:22px;transform:rotate(5deg);display:grid;grid-template-columns:88px minmax(0,1fr)}
.art-paper-cover{position:relative;overflow:hidden;background:linear-gradient(150deg,#a3cbff,#c2bdff 60%,#dcdbff)}
.art-paper-cover:before{content:"";position:absolute;top:28px;left:21px;width:75px;height:75px;border:14px solid #fff9;border-radius:50%;transform:rotateX(40deg) rotate(-30deg)}
.art-paper-cover i{position:absolute;border-radius:30px;width:85px;height:22px;transform:rotate(-34deg);background:#fff7;left:-21px;bottom:24px}.art-paper-cover i:nth-child(2){left:31px;bottom:50px;background:#c7fbeb99}.art-paper-cover i:nth-child(3){left:28px;bottom:3px;background:#c2b1ff88}
.art-paper-body{padding:20px 14px;min-width:0}.art-mini-tag{display:inline-block;max-width:100%;font-size:8px;line-height:1.5;color:#8872c5;background:#f1edfb;padding:3px 7px;border-radius:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.art-paper-body strong{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.8;margin:10px 0 13px;color:#41536f}
.art-note{position:absolute;right:30px;top:105px;width:171px;height:67px;padding:13px;display:flex;align-items:center;gap:10px;border:1px solid #fff;border-radius:11px;background:#ffffffed;box-shadow:0 8px 30px #667daa18;transform:rotate(-5deg)}
.art-note-icon{color:#9a83d8;background:#f4efff;border-radius:9px;width:32px;height:37px;display:grid;place-items:center;flex-shrink:0}.art-note-icon svg{width:24px;height:24px}.art-note>div{flex:1}.art-note .art-line{height:3px;margin:5px 0}.art-note-check{font:600 11px var(--font-body);color:#6abca7;background:#e9f9f3;border-radius:50%;width:19px;height:19px;display:grid;place-items:center;flex-shrink:0}
.art-path-line{position:absolute;top:97px;left:71px;right:71px;border-top:1px dashed #b6cde7}
.art-guide{position:absolute;top:28px;width:164px;height:181px;border:1px solid #e3eaf5;border-radius:12px;background:#fff;padding:15px 18px;box-shadow:0 10px 22px #5c71930b;overflow:hidden}
.art-guide-one{left:57px;transform:rotate(-7deg)}.art-guide-two{left:243px;top:17px;transform:rotate(3deg);border-color:#dbd8f0;box-shadow:0 12px 30px #8a7abe14}.art-guide-three{left:431px;transform:rotate(8deg)}
.art-step{font:500 9px/1 var(--font-body);color:#a1acc1;position:absolute;right:14px;top:16px;letter-spacing:1px}.art-guide-icon{display:grid;place-items:center;color:#729bd3;background:#edf5ff;width:37px;height:37px;border-radius:10px;margin:4px 0 16px}.art-guide-icon svg{width:23px;height:23px}.art-guide-two .art-guide-icon{background:#f0ebff;color:#9b83d7}.art-guide-three .art-guide-icon{background:#e9f9f3;color:#5ab4a0}.art-guide strong{display:block;font-size:12px;line-height:1.6;color:#536784;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:12px}.art-guide .art-line{height:3px}
.art-release-track{position:absolute;left:73px;top:32px;bottom:10px;width:1px;background:#e2e6f2}.art-release-track>i{position:absolute;left:-4px;top:15px;width:9px;height:9px;border:2px solid #fff;background:#9edbd1;border-radius:50%;box-shadow:0 0 0 1px #c7e8e1}.art-release-track>i:nth-child(2){top:83px;background:#b2b4eb;box-shadow:0 0 0 1px #dadaf1}.art-release-track>i:nth-child(3){top:151px;background:#b3c9e8;box-shadow:0 0 0 1px #dce7f3}.art-release-track>span{position:absolute;left:14px;top:17px;width:30px;height:3px;background:#dde5ef;border-radius:2px}
.art-release{position:absolute;background:#fff;border:1px solid #e5e9f3;border-radius:12px;box-shadow:0 12px 30px #607b9b0d}
.art-release-back{left:235px;top:35px;width:265px;height:175px;transform:rotate(9deg);background:linear-gradient(140deg,#f1f7ff,#e6f7f2);padding:24px}.art-release-back .art-line{background:#d9e5ec}
.art-release-main{left:143px;top:18px;width:322px;height:204px;transform:rotate(-3deg);padding:18px 22px}
.art-release-heading{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid #eef0f7}.art-release-heading img{width:36px;height:36px;object-fit:contain}.art-release-heading>span{font:600 12px/1.4 var(--font-body);color:#41536d}.art-release-heading small{display:block;font:400 8px/1.5 var(--font-body);color:#9aa8bb;margin-top:3px;letter-spacing:.4px}.art-release-heading>b{margin-left:auto;width:24px;height:24px;display:grid;place-items:center;border-radius:8px;background:#eaf8f3;font-size:13px;color:#68b8a8;font-weight:500}
.art-release-item{display:flex;gap:10px;align-items:flex-start;margin-top:15px}.art-release-dot{width:5px;height:5px;border-radius:50%;background:#9c92d3;margin-top:3px}.art-release-item>span{flex:1}.art-release-item .art-line{margin:2px 0 7px;height:3px;width:88%}.art-release-item .art-line.short{width:55%}.art-release-item>b{font-size:9px;color:#91bfb2;font-weight:400}.art-release-spark{position:absolute;right:78px;top:65px;font-size:31px;color:#a4dcd0}
.content-hero-designed:after{content:"";position:absolute;left:0;right:0;bottom:0;height:53px;background:linear-gradient(180deg,#fff0,#fff);pointer-events:none;z-index:4}
.content-hero-detail .content-hero-wash{opacity:.5}
@keyframes art-ambient-float{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes art-spark-glow{0%,100%{opacity:.45;scale:.9}50%{opacity:1;scale:1.08}}
.art-emblem{animation:art-ambient-float 9s ease-in-out -2s infinite}.art-note{animation:art-ambient-float 11s ease-in-out -5s infinite}.art-dot-one,.art-dot-three{animation:art-ambient-float 8s ease-in-out -3s infinite}.art-guide-two,.art-release-main{animation:art-ambient-float 10s ease-in-out -4s infinite}
.content-hero-designed>.content-wrap{animation:content-enter .65s ease both}.content-hero-art{animation:content-enter .85s cubic-bezier(.22,1,.36,1) .12s both}
@media(prefers-reduced-motion:reduce){.content-hero-designed>.content-wrap,.content-hero-art,.art-emblem,.art-note,.art-dot,.art-guide-two,.art-release-main,.art-spark{animation:none}}
/* A compact introduction: copy on the left, artwork on the right, search below. */
.content-hero-designed{padding:22px 0 25px}
.content-hero-designed>.content-wrap{text-align:left}
.content-hero-designed .content-crumb{margin-bottom:8px}
.content-hero-designed .content-hero-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:34px;align-items:center}
.content-hero-copy{min-width:0}
.content-hero-designed h1{margin:13px 0 14px;font-size:clamp(29px,2.9vw,38px);max-width:600px;letter-spacing:-.8px;line-height:1.4;text-wrap:balance}
.content-hero-designed p{margin:0;max-width:590px;font-size:14px;line-height:1.9;text-wrap:pretty}
.content-hero-visual{position:relative;height:215px;min-width:0;overflow:hidden;animation:content-enter .8s cubic-bezier(.22,1,.36,1) .1s both}
.content-hero-visual .content-hero-art{position:absolute;width:850px;height:330px;left:50%;top:50%;margin:0;transform:translate(-50%,-50%) scale(.64);transform-origin:center;animation:none}
.content-hero-designed .content-search{max-width:460px;margin:16px auto 0;z-index:5}
.content-hero-designed:after{height:22px;z-index:1}
@media(min-width:1500px){.content-hero-designed .content-hero-row{gap:50px}.content-hero-visual{height:225px}}
@media(max-width:1000px){
  .content-hero-designed .content-hero-row{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px}
  .content-hero-designed h1{font-size:32px}
  .content-hero-designed p{font-size:13px}
  .content-hero-visual{height:200px}
  .content-hero-visual .content-hero-art{transform:translate(-50%,-50%) scale(.54)}
}
@media(max-width:740px){
  .content-hero-designed{padding:20px 0 23px}
  .content-hero-designed .content-crumb{font-size:11px;margin-bottom:22px}
  .content-hero-designed .content-hero-row{grid-template-columns:minmax(0,1fr);gap:0}
  .content-hero-designed .content-hero-copy{text-align:center}
  .content-hero-designed .content-eyebrow{font-size:10px;letter-spacing:1px}
  .content-hero-designed h1{margin:13px auto 12px;max-width:560px;font-size:30px;letter-spacing:-.5px}
  .content-hero-designed p{margin-inline:auto;max-width:540px;font-size:13px;line-height:1.85}
  .content-hero-visual{height:145px;margin-top:10px}
  .content-hero-visual .content-hero-art{transform:translate(-50%,-50%) scale(.45)}
  .content-hero-designed .content-search{margin-top:12px;max-width:400px;padding:9px 13px;border-radius:10px}
  .content-hero-designed .content-search input,.content-hero-designed .content-search button{font-size:12px}
}
@media(max-width:360px){.content-hero-designed h1{font-size:27px}.content-hero-visual{height:130px}.content-hero-visual .content-hero-art{transform:translate(-50%,-50%) scale(.39)}}
@media(prefers-reduced-motion:reduce){.content-hero-visual{animation:none}}
/* Let the introduction and content share one continuous, fading backdrop. */
.content-hero-designed{padding-bottom:20px;background:#fff;border-bottom:0}
.content-hero-designed .content-hero-wash{
  background:radial-gradient(ellipse 46% 90% at 22% 0,#bfddff66,transparent 78%),radial-gradient(ellipse 42% 95% at 70% 0,#d5c5ff66,transparent 80%),radial-gradient(ellipse 28% 65% at 96% 28%,#c0f4ed3d,transparent 85%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 38%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 38%,transparent 100%);
}
.content-hero-designed:after{height:96px;background:linear-gradient(180deg,#fff0,#ffffffb3 65%,#fff);z-index:1}
.content-hero-designed .content-search{
  margin:4px auto 0;max-width:460px;min-height:46px;padding:5px 6px 5px 16px;
  background:#ffffff70;border:1px solid #c4cee04d;border-radius:999px;box-shadow:none;
  transition:background .2s,border-color .2s,box-shadow .2s;
}
.content-hero-designed .content-search:hover{background:#ffffffa6;border-color:#b7c1dc80}
.content-hero-designed .content-search:focus-within{background:#ffffffeb;border-color:#a797df;box-shadow:0 0 0 3px #8e75d90a}
.content-hero-designed .content-search>span{font-size:22px;color:#8c97af}
.content-hero-designed .content-search input{font-size:13px;min-width:0}
.content-hero-designed .content-search input::placeholder{color:#8491a8}
.content-hero-designed .content-search button{border-left:0;padding:8px 18px;border-radius:999px;background:#eeeaff8c;color:#7058c0;font-size:12px;line-height:18px;transition:background .2s,color .2s}
.content-hero-designed .content-search button:hover{background:#e7e1ff;color:#5e46b0}
.content-hero-designed+.content-layout{padding-top:26px}
@media(max-width:740px){
  .content-hero-designed{padding-bottom:17px}
  .content-hero-designed .content-search{margin-top:4px;max-width:400px;min-height:42px;padding:4px 5px 4px 13px}
  .content-hero-designed .content-search input{font-size:12px}
  .content-hero-designed .content-search button{padding:7px 15px}
  .content-hero-designed+.content-layout{padding-top:20px}
}
/* Narrow the illustrated browser frames without distorting their contents. */
.content-hero-visual .art-window{width:560px}
.content-hero-visual .art-paper-back{left:70px}
.content-hero-visual .art-paper-front{left:155px}
.content-hero-visual .art-note{right:24px}
.content-hero-visual .art-guide{width:148px;padding-inline:15px}
.content-hero-visual .art-guide-one{left:32px}
.content-hero-visual .art-guide-two{left:206px}
.content-hero-visual .art-guide-three{left:380px}
.content-hero-visual .art-path-line{left:54px;right:54px}
.content-hero-visual .art-release-track{left:50px}
.content-hero-visual .art-release-main{left:100px}
.content-hero-visual .art-release-back{left:198px}
.content-hero-visual .art-release-spark{right:48px}
.content-hero-visual .art-orbit-one{width:540px;left:calc(50% - 270px)}
.content-hero-visual .art-orbit-two{width:650px;height:340px;left:calc(50% - 325px)}
.content-hero-visual .art-emblem{left:calc(50% - 321px)}
.content-hero-visual .art-spark{right:138px}
/* Align search with the copy and give the scene room to fade without clipping. */
.content-main-designed{background:linear-gradient(180deg,#f7f9ff 0,#fafbff 180px,#fff 430px)}
.content-hero-designed{background:transparent;overflow:visible;padding-bottom:28px}
.content-hero-designed .content-hero-row{min-height:250px}
.content-hero-designed .content-hero-copy{text-align:left;position:relative;z-index:2}
.content-hero-designed .content-hero-copy .content-search{width:100%;max-width:460px;margin:22px 0 0}
.content-hero-visual{height:250px;overflow:visible}
.content-hero-visual .content-hero-art{
  height:360px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 84%,transparent 100%);
}
.content-hero-designed:after{height:85px;background:linear-gradient(180deg,#fff0,#ffffff45);z-index:1}
@media(max-width:1000px){.content-hero-designed .content-hero-row{min-height:230px}.content-hero-visual{height:225px}}
@media(max-width:740px){
  .content-main-designed{background:linear-gradient(180deg,#f7f9ff 0,#fafbff 240px,#fff 510px)}
  .content-hero-designed{padding-bottom:20px}
  .content-hero-designed .content-hero-row{min-height:0}
  .content-hero-designed h1{margin-left:0;margin-right:0}
  .content-hero-designed p{margin-inline:0}
  .content-hero-designed .content-hero-copy .content-search{max-width:460px;margin:19px 0 0}
  .content-hero-visual{height:170px;margin-top:17px}
}
@media(max-width:360px){.content-hero-visual{height:150px}}
/* A quiet content-width divider, independent of the continuous backdrop. */
.content-hero-designed+.content-layout{position:relative}
.content-hero-designed+.content-layout:before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#cbd4e45c 12%,#bfcbe080 50%,#cbd4e45c 88%,transparent);
}
/* Taller illustration frames with balanced space above and below the scene. */
.content-hero-visual .art-window{top:50px;height:320px}
.content-hero-visual .art-canvas{top:28px}
.content-hero-visual .content-hero-art{
  height:420px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 90%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 90%,transparent 100%);
}
/* Use a centered vector icon rather than a font glyph with an uneven baseline. */
.content-hero-designed .content-search{align-items:center}
.content-hero-designed .content-search>.content-search-icon{display:flex;align-items:center;justify-content:center;flex:0 0 18px;width:18px;height:18px;font-size:0;line-height:0}
.content-search-icon svg{display:block;width:18px;height:18px;flex-shrink:0}
.content-hero-designed .content-search input{height:34px;min-height:34px;padding:0;line-height:normal;box-sizing:border-box}
.content-hero-designed .content-search button{display:inline-flex;align-items:center;justify-content:center;height:34px;padding-block:0}
@media(max-width:740px){.content-hero-designed .content-search input,.content-hero-designed .content-search button{height:32px;min-height:32px}}