body.lab-refined{--ref-pink:#ff93e4;--ref-blue:#68a3df;background:#101720;color:#f5f7ff}
.lab-refined p{color:#d4dbe5}
.lab-refined .lab-wrap{width:min(1240px,calc(100% - 48px))}
html:has(.lab-refined){scroll-padding-top:112px}
.lab-refined .lab-button{border-radius:5px;padding:14px 22px;min-height:48px;font-size:15px;line-height:1.4;text-align:center;gap:18px;box-shadow:0 4px 10px #0003;transition:background-color .2s,border-color .2s,color .2s}
.lab-refined .lab-button-primary{background:#f5f7ff;border-color:#f5f7ff;color:#172236;min-width:177px}
.lab-refined .lab-button-primary:hover{background:#ffc6ef;border-color:#ffc6ef}
.lab-refined .lab-button-secondary{background:#ffffff09;border-color:#c9d4e061;color:#f5f7ff}
.lab-refined .lab-button-secondary:hover{background:#ffffff16;border-color:#efc3e5}
.lab-refined .lab-text-link{font-size:14px}
.lab-refined .lab-actions{justify-content:center;gap:28px}
.lab-refined .lab-header{padding-block:24px}
.ref-header-shell{position:sticky;top:0;z-index:30;background:#101720f5;backdrop-filter:blur(14px);box-shadow:0 1px #ffffff0a}
.ref-header{position:relative}
.ref-brand{flex-shrink:0}
.ref-brand img{width:182px;height:auto}
.ref-header .lab-button{min-width:0;padding:10px 17px;min-height:42px;font-size:13px}
.ref-header .lab-product-nav{gap:29px;font-size:14px;font-weight:500}
.ref-header .lab-menu-toggle{font-weight:500}
@media(min-width:768px) and (max-width:1023px){.ref-header .lab-product-nav{gap:18px}}
.ref-page{overflow:clip}
.ref-opening{position:relative;padding:55px 0 75px;background:radial-gradient(ellipse at 72% 32%,#644e6461,transparent 56%),linear-gradient(160deg,#242a3c,#253c51);isolation:isolate}
.ref-opening:before{content:"";position:absolute;inset:-105px 0 0;background:radial-gradient(ellipse at 70% 0,#6f45612b,transparent 60%);z-index:-1;pointer-events:none}
.ref-hero{display:grid;gap:36px;text-align:left;align-items:center}
.ref-hero-message{position:relative;z-index:1}
.ref-hero-audience{font-size:18px;line-height:1.55;max-width:39ch;margin:0 0 26px!important;color:#c9d1df!important}
.ref-hero-video video{display:block;width:100%;height:auto;border-radius:16px}
.ref-hero h1{max-width:11ch;margin:0;font-size:clamp(44px,7vw,70px);font-weight:400;line-height:1.08;letter-spacing:-.045em;text-wrap:initial}
/* Extend the gradient paint area below the baseline without moving the following content. */
.ref-hero h1 span{display:block;padding-bottom:.16em;margin-bottom:-.16em;background:linear-gradient(110deg,#8fb7e2 12%,#bd9ed5 49%,#ff93e4 87%);background-clip:text;-webkit-background-clip:text;color:transparent;font-weight:500}
.ref-hero-copy{max-width:480px;margin:32px 0 0!important;font-size:18px;line-height:1.75}
.ref-hero .lab-actions{justify-content:flex-start;gap:26px;margin-top:34px}
.ref-hero-scene{position:relative;width:100%;max-width:610px;aspect-ratio:1.03;margin-inline:auto;isolation:isolate}
.ref-hero-character{position:absolute;right:-5%;bottom:0;width:auto;height:100%;max-width:80%;object-fit:contain;z-index:1;filter:drop-shadow(0 20px 25px #07152633)}
.ref-hero-lesson{position:absolute;left:0;top:7%;width:44%;margin:0;padding:20px 15px 15px;background:#ece9dd;border-radius:12px;box-shadow:0 28px 60px #09122266;transform:rotate(-6deg);overflow:hidden}
.ref-hero-lesson figcaption{color:#263844;font-size:clamp(16px,2vw,25px);line-height:1.15;letter-spacing:-.025em;font-weight:500;margin:0 5px 18px;max-width:10ch}
.ref-hero-lesson svg{display:block;width:100%;height:auto;aspect-ratio:131/240;border-radius:5px;overflow:hidden}
@media(min-width:768px){.ref-opening{padding:65px 0 85px}.ref-hero{grid-template-columns:1.08fr 1fr;gap:24px;min-height:540px}.ref-hero h1{font-size:clamp(48px,5.2vw,70px);max-width:12ch}.ref-hero-scene{width:112%;margin-left:-5%}.ref-hero-lesson{padding:16px 12px 12px}.ref-hero-lesson figcaption{font-size:21px}}
@media(min-width:1024px){.ref-opening{padding:70px 0 100px}.ref-hero{gap:65px;min-height:610px}.ref-hero h1{font-size:clamp(60px,5.05vw,74px)}.ref-hero-scene{width:108%;margin-left:-5%}.ref-hero-lesson{padding:24px 18px 18px}.ref-hero-lesson figcaption{font-size:26px}}
.ref-evidence{position:relative;padding:145px 0 140px;background:radial-gradient(ellipse at 5% 80%,#1c2c3e 0,transparent 60%),#101720}
.ref-section-heading{text-align:center;max-width:760px;margin:0 auto}
.ref-section-heading h2{font-size:clamp(36px,4vw,58px);line-height:1.13;font-weight:400;max-width:730px;margin:0 auto 32px;letter-spacing:-.035em}
.ref-section-heading>p:last-of-type{font-size:18px;line-height:1.7;max-width:640px;margin-inline:auto}
.ref-evidence .ref-section-heading{text-align:left;max-width:none;margin:0}
.ref-evidence .ref-section-heading h2{max-width:none;margin-inline:0;text-wrap:initial}
.ref-project-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px;margin:52px 0 28px;scroll-margin-top:25px}
.ref-project-nav a{position:relative;display:flex;align-items:flex-start;min-width:0;min-height:90px;padding:0 0 22px;color:#c5cfdd;font-size:clamp(18px,5vw,22px);font-weight:500;line-height:1.25;letter-spacing:-.025em;text-align:left;text-wrap:balance;text-decoration:none;border-radius:0;border:0;border-bottom:2px solid #a9bcd12e;transition:color .2s,border-color .2s}
.ref-project-nav a:hover{color:#fff;border-bottom-color:#c3b0d68c}
.ref-project-nav a[aria-selected=true]{color:#fff}
.ref-project-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:#e3b8e5;transform:scaleX(0);transform-origin:left;pointer-events:none}
.ref-project-nav a[aria-selected=true]::after{transform:scaleX(1)}
.ref-project-nav.is-autoplay a[aria-selected=true]::after{transform:scaleX(var(--ref-client-progress,0))}
@media(min-width:768px){.ref-project-nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:76px;margin-bottom:32px}.ref-project-nav a{font-size:clamp(20px,2.15vw,29px);min-height:116px;padding-bottom:27px}}
.ref-projects{display:grid;gap:36px}
.ref-projects.is-enhanced{gap:0;isolation:isolate}
.ref-projects.is-enhanced>.ref-case{grid-area:1/1;min-width:0}
/* Hidden cards still reserve their height; visibility/inert keep them inactive. */
.ref-projects.is-enhanced>.ref-case[hidden]{display:grid;visibility:hidden;pointer-events:none}
/* Only clip during the slide; the resting panel keeps its shadow and focus outline. */
.ref-projects.is-switching{position:relative;overflow:hidden;border-radius:25px}
.ref-case{display:grid;grid-template-columns:1.05fr 1fr;grid-template-rows:1fr auto;min-height:620px;overflow:hidden;border-radius:25px;background:linear-gradient(135deg,#243447d9,#161f2fe8);border:1px solid #d6dfff15;box-shadow:0 20px 60px #00000020;scroll-margin-top:24px}
.ref-case[hidden]{display:none}
.ref-case-visual{grid-column:1;grid-row:1/-1;position:relative;margin:0;min-width:0;background:#1c394d}
.ref-case-visual>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.ref-case-rai .ref-case-visual img{object-position:60% center}
.ref-case-science .ref-case-visual img{object-position:50% center}
.ref-case-plus .ref-case-visual{background:#285b70}
.ref-case-plus .ref-case-visual img{object-fit:cover;object-position:center}
.ref-case-visual:after{content:"";position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#071421d1);pointer-events:none}
.ref-case-copy{grid-column:2;grid-row:1;padding:42px 44px 20px;align-self:center;min-width:0}
.ref-case-copy h3{font-size:clamp(29px,2.7vw,39px);line-height:1.15;font-weight:500;margin:0 0 28px;max-width:21ch}
.ref-case-copy>p{font-size:16px;line-height:1.75}
.ref-result{margin-top:30px;padding-left:18px;border-left:2px solid #b5a1d4}
.ref-result strong{display:block;color:#e3c0e3;font-size:22px;font-weight:500;line-height:1.3;letter-spacing:-.015em}
.ref-result p{font-size:13px;line-height:1.65;margin-top:10px}
.ref-case-footer{grid-column:1/-1;grid-row:2;position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 28px 28px}
.ref-case-name{color:#fff!important;font-size:17px;font-weight:500;line-height:1.4}
.ref-case-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:14px;margin:0}
.ref-case-actions .lab-button{min-width:0}
.ref-award-badge{position:absolute;top:20px;right:20px;z-index:1;width:140px;aspect-ratio:1;display:grid;place-items:center;color:#372a18;text-align:center;line-height:1.2}
.ref-award-seal{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ref-award-label{position:relative;display:grid;justify-items:center;gap:8px}
.ref-award-label strong{max-width:8ch;font-size:17px;font-weight:500}
.ref-award-label>span{font-size:13px;letter-spacing:.08em}
.ref-case-quote{margin:24px 0 0;padding:22px 0 0;border-top:1px solid #cbd8ed1f}
.ref-case-quote>p{font-size:17px;line-height:1.6;color:#edf0f8}
.ref-case-quote footer{display:flex;flex-wrap:wrap;gap:3px 10px;margin-top:14px;font-size:12px;line-height:1.5;color:#bbc8d9}
.ref-case-quote footer strong{font-weight:500;color:#e5eaf3}
.ref-approach{padding:145px 0;background:radial-gradient(ellipse at 95% 0,#67415f88,transparent 64%),linear-gradient(145deg,#333e58,#253d51);position:relative}
.ref-process{display:grid;grid-template-columns:1fr 1fr;gap:120px;align-items:start}
.ref-process-intro{position:sticky;top:112px;align-self:start}
.ref-process-image{display:block;width:100%;height:auto;margin-top:58px;object-fit:contain}
.ref-process-intro h2{font-size:clamp(38px,4vw,56px);font-weight:400;line-height:1.13;letter-spacing:-.035em;margin-top:0;max-width:none;text-wrap:initial}
.ref-process-intro h2 span{display:block;text-wrap:balance}
.ref-series-copy{font-size:18px;line-height:1.7;margin-top:30px!important;max-width:35ch}
.ref-process-cast{position:relative;aspect-ratio:1.25;margin-top:38px;isolation:isolate}
.ref-cast-chibi{position:absolute;left:0;bottom:0;width:auto;height:100%;max-width:64%;object-fit:contain;z-index:1;filter:drop-shadow(0 16px 18px #14243740)}
.ref-cast-pako{position:absolute;right:0;bottom:3%;width:51%;height:auto;margin:0;filter:drop-shadow(0 12px 18px #14243740)}
.ref-process-help{font-size:15px;line-height:1.75;margin-top:46px!important;padding-top:28px;border-top:1px solid #c5d1e32e;max-width:47ch}
.ref-process-help a{color:inherit;text-decoration-color:#c6acd2}
.ref-process-help>span{display:block;font-weight:500;margin-bottom:6px}
.ref-process-help a{display:block;margin-top:8px}
.ref-steps{list-style:none;margin:0;padding:0;counter-reset:steps}
.ref-steps li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:28px;padding:0 0 64px}
.ref-steps li:before{content:"";position:absolute;left:21px;top:49px;bottom:7px;width:1px;background:linear-gradient(#b5bfd244,#b5bfd20d)}
.ref-steps li:last-child{padding-bottom:0}
.ref-steps li:last-child:before{display:none}
.ref-step-number{width:44px;height:44px;border-radius:50%;background:#17243b75;color:#b7cbe4;display:grid;place-items:center;font-size:13px;font-weight:500;box-shadow:inset 0 0 0 1px #b6c9e52b}
.ref-steps h3{font-size:24px;line-height:1.2;font-weight:500;margin:7px 0 15px;letter-spacing:-.025em}
.ref-steps p{font-size:16px;line-height:1.75}
.ref-offer{padding-top:145px}
.ref-offer h2{max-width:760px}
.ref-demo-brief{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;max-width:1000px;list-style:none;margin:58px auto 0;padding:0;text-align:left}
.ref-demo-brief li{display:flex;align-items:center;min-height:96px;font-size:clamp(22px,2.2vw,28px);font-weight:400;line-height:1.3;letter-spacing:-.02em;text-wrap:balance}
.ref-demo-brief li+li{padding-left:36px;border-left:1px solid #b9c7dd38}
.ref-offer>.lab-actions{margin-top:44px}
.ref-offer-panel{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px;max-width:1000px;margin:72px auto 0;padding:55px 65px;background:radial-gradient(ellipse at top left,#6944644d,transparent 70%),linear-gradient(130deg,#253246,#182534);border-radius:24px;box-shadow:inset 0 1px #ffffff12}
.ref-offer .ref-price{font-size:84px;line-height:1.1;color:#f4f5ff;font-weight:400;letter-spacing:-.05em;margin:0}
.ref-price span{font-size:17px;letter-spacing:0;color:#c4ccda;margin-left:12px;white-space:nowrap}
.ref-trial>p{font-size:23px;line-height:1.4;font-weight:400;color:#f0e7f4;max-width:22ch}
.ref-trial .lab-text-link{margin-top:20px;font-size:14px}
.ref-offer-details>p{font-size:19px;line-height:1.65;color:#edf0f8}
.ref-offer-details>p+p{font-size:15px;color:#c7d0dd;margin-top:18px}
.ref-offer-links{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:28px}
.ref-offer-links .lab-button{min-width:0}
.ref-offer-terms{text-align:center;max-width:820px;margin:19px auto 0!important;font-size:11px;line-height:1.7;color:#a7b5c7!important}
.lab-refined .lab-footer{margin-top:95px;padding-block:32px;font-size:11px;border-top-color:#ffffff0c}
.lab-refined .lab-footer .lab-brand img{width:162px;height:auto}
.ref-attribution{display:flex;align-items:center;gap:12px;font-size:14px}
.ref-attribution img{width:94px;height:auto}

@media(max-width:1023px){.ref-process{gap:55px}.ref-case-copy{padding:32px 28px 16px}.ref-case-actions .lab-button{font-size:14px;padding:12px 16px}}
@media(max-width:767px){
 html:has(.lab-refined){scroll-padding-top:104px}
 .lab-refined .lab-wrap{width:calc(100% - 40px)}
 .lab-refined .lab-header{padding-block:19px}.ref-brand img{width:162px}.ref-header .lab-product-nav{gap:17px}.ref-header .lab-product-nav .lab-button{padding:10px 13px;font-size:13px}
 .ref-hero h1{font-size:clamp(45px,11.8vw,68px);line-height:1.08;max-width:12ch}.ref-hero h1 span{margin-top:3px}
 .ref-hero-copy{font-size:17px;margin-top:28px!important;max-width:450px}
 .ref-hero-audience{font-size:17px}
 .ref-hero .lab-actions{gap:14px;margin-top:28px}.ref-hero .lab-button{min-width:0;padding:13px 18px;font-size:14px}
 .ref-hero-scene{max-width:480px;margin-top:18px}.ref-hero-character{right:-3%}.ref-hero-lesson{left:2%;top:8%;width:43%;padding:16px 12px 12px}.ref-hero-lesson figcaption{font-size:20px;margin-bottom:14px}
 .ref-evidence{padding:86px 0}.ref-section-heading h2{font-size:37px;max-width:15ch;margin-top:0}.ref-section-heading>p:last-of-type{font-size:16px;line-height:1.75}
 .ref-case{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;min-height:0;border-radius:18px}.ref-case-visual{grid-row:1;aspect-ratio:1.22}
 .ref-case-copy{grid-column:1;grid-row:2;align-self:start}
 .ref-case-footer{grid-column:1;grid-row:3;gap:12px;padding:22px 20px}
 .ref-case-name{font-size:14px}
 .ref-case-actions{max-width:72%;gap:10px}
 .ref-case-actions .lab-button{font-size:13px;padding:11px 12px}
 .ref-award-badge{top:12px;right:12px;width:112px}
 .ref-award-label{gap:5px}
 .ref-award-label strong{font-size:14px}
 .ref-award-label>span{font-size:11px}
 .ref-projects.is-switching{border-radius:18px}
 .ref-case-quote>p{font-size:16px}.ref-case-quote footer{display:grid;gap:4px}
 .ref-case-copy{padding:30px 24px 12px}.ref-case-copy h3{font-size:30px;margin-top:0;max-width:21ch}.ref-case-copy>p{font-size:15px}.ref-result{margin-top:25px;padding-left:15px}.ref-result strong{font-size:21px}.ref-result p{font-size:12px}
 .ref-approach{padding:88px 0}.ref-process{grid-template-columns:1fr;gap:62px}.ref-process-intro{position:static}.ref-process-image{width:min(100%,480px);margin:42px auto 0}.ref-process-intro h2{font-size:40px;max-width:16ch;margin-top:0}
 .ref-series-copy{font-size:17px}.ref-process-cast{max-width:480px;margin-inline:auto}.ref-offer-details{padding-top:28px;border-top:1px solid #ffffff16}
 .ref-steps li{gap:22px;padding-bottom:48px;grid-template-columns:37px 1fr}.ref-step-number{width:37px;height:37px;font-size:11px}.ref-steps li:before{left:18px;top:43px;bottom:7px}.ref-steps h3{font-size:23px;margin-top:4px;margin-bottom:13px}.ref-steps p{font-size:15px}
 .ref-offer{padding-top:88px}.ref-demo-brief{grid-template-columns:1fr;gap:24px;margin-top:38px;max-width:420px}.ref-demo-brief li{font-size:24px;min-height:0;padding-left:20px;border-left:1px solid #b9c7dd38}.ref-demo-brief li+li{padding-left:20px}.ref-offer>.lab-actions{margin-top:38px}
 .ref-offer-panel{grid-template-columns:1fr;gap:30px;padding:36px 29px;margin-top:48px;border-radius:18px}.ref-offer .ref-price{font-size:70px}.ref-price span{font-size:16px}.ref-trial{padding-top:28px;border-top:1px solid #ffffff16}.ref-trial>p{font-size:23px}.ref-trial .lab-text-link{margin-top:17px}.ref-offer-terms{font-size:10px;margin-top:17px!important}
 .lab-refined .lab-footer{margin-top:57px}
}
@media(prefers-reduced-motion:reduce){.ref-project-nav a,.ref-feature-nav a{transition:none}.ref-process-intro{position:static}}

/* The app section gives the screen room; its navigation carries the explanation. */
.ref-studio{padding:95px 0 110px;background:radial-gradient(ellipse at 80% 65%,#4f3c5c40,transparent 62%),#131b28}
.ref-studio h2{font-weight:400;font-size:clamp(40px,4.2vw,60px);letter-spacing:-.04em;margin:0 0 48px}
.ref-studio h2:has(+.ref-studio-intro){margin-bottom:24px}
.ref-studio-intro{font-size:20px;line-height:1.65;max-width:57ch;margin-bottom:54px!important}
.ref-studio-layout{display:grid;gap:38px;align-items:start}
.ref-feature-nav{display:flex;flex-wrap:wrap;gap:8px}
.ref-feature-nav a{position:relative;display:grid;grid-template-columns:1fr auto;align-content:start;gap:0 12px;text-decoration:none;color:#b5c1d2;border:1px solid #bccce329;border-radius:6px;padding:12px 14px;font-size:14px;font-weight:500;transition:color .2s,background .2s}
.ref-feature-nav a:hover{color:#fff;background:#ffffff06}
.ref-feature-arrow,.ref-feature-summary{display:none}
.ref-feature-nav a[aria-selected=true]{color:#f6f4ff;background:#3c40598c;border-color:#d9b6dd65}
.ref-feature-panel{margin-bottom:50px;scroll-margin-top:35px;min-width:0}
.ref-feature-panel[hidden]{display:none}
.ref-feature-panel:last-child{margin-bottom:0}
.ref-feature-fallback-title{font-size:24px!important;margin-bottom:20px!important}
.ref-studio-enhanced .ref-feature-fallback-title{display:none}
.ref-feature-stage{position:relative;display:grid;place-items:center;aspect-ratio:1.18;padding:14px;border:1px solid #c2cbdf22;border-radius:16px;background:linear-gradient(145deg,#25394a70,#29213677);box-shadow:0 35px 65px #070d182e;overflow:hidden}
.ref-screen{display:block;width:100%;height:100%;max-height:100%;overflow:hidden;border-radius:8px}
.ref-app-preview{width:100%;min-height:0;box-shadow:0 24px 36px #04081240;border-radius:10px}
.ref-character-library{max-width:590px;background:#0c1721;padding:14px;border:1px solid #b8cce328}
.ref-library-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;color:#f5f7ff;font-size:18px;font-weight:500}
.ref-library-header button{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 11px;border:1px solid #91b9ce66;border-radius:5px;background:#243d4c;color:#f5f7ff;font-size:13px;line-height:1.3;white-space:nowrap}
.ref-library-header button[hidden]{display:none}
.ref-library-header button:hover{background:#355467}
.ref-feature-description{font-size:16px;line-height:1.7;margin-top:24px!important;max-width:40ch}
.ref-screen-expand{position:absolute;right:23px;bottom:23px;display:grid;place-items:center;width:42px;height:42px;background:#172536ed;border:1px solid #b8cce347;color:#fff;border-radius:8px;box-shadow:0 3px 14px #0004}
.ref-screen-expand[hidden]{display:none}
.ref-screen-expand:hover{background:#3b4260}
.ref-world-sketch{position:relative;display:grid;grid-template-columns:.9fr 1fr;align-items:center;gap:12px;width:100%;height:100%;margin:0;padding:14px 6px 28px;background:radial-gradient(ellipse at 20% 70%,#6b626854,transparent 70%)}
.ref-world-portrait{align-self:center}
.ref-world-portrait img{width:125%;height:auto;max-width:none;margin:0 -12.5%}
.ref-world-rules>p{font-size:16px;font-weight:500;color:#f5f7ff;margin:0 0 18px}
.ref-world-rules dl{margin:0;display:grid;gap:18px}
.ref-world-rules dt{color:#c4aacf;font-size:11px;font-weight:500;margin-bottom:4px}
.ref-world-rules dd{margin:0;font-size:12px;line-height:1.5;color:#ecedf3}
.ref-world-sketch figcaption{position:absolute;bottom:0;right:0;font-size:10px;color:#acb7c8}
.ref-screen-dialog{padding:20px;width:min(96vw,1390px);max-width:none;max-height:94dvh;border:1px solid #8494ac66;border-radius:16px;background:#111c2b;color:#f5f7ff;box-shadow:0 35px 90px #0008;overflow:auto}
.ref-screen-dialog{height:min(94vh,1050px)}
.ref-screen-dialog::backdrop{background:#060b14df;backdrop-filter:blur(6px)}
.ref-screen-dialog[open]{display:flex;flex-direction:column}
.ref-screen-dialog-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 0 18px}
.ref-screen-dialog-header h2{font-size:22px;margin:0}
.ref-screen-dialog-header button{background:none;color:#fff;border:1px solid #a4b4cc55;border-radius:5px;padding:9px 13px;font-size:14px;white-space:nowrap}
.ref-screen-dialog-header button span{margin-left:15px}
.ref-screen-dialog-content{min-height:0;flex:1}
.ref-screen-dialog-content .ref-screen{width:100%;height:100%;object-fit:contain;border-radius:8px}
@media(min-width:768px){
 .ref-studio{padding:140px 0 150px}.ref-studio h2{margin-bottom:65px}
 .ref-studio-layout{grid-template-columns:245px minmax(0,1fr);gap:45px;align-items:start}
 .ref-feature-nav{display:grid;gap:0;padding-top:12px}
 .ref-feature-nav a{font-size:20px;padding:23px 0;border:0;border-bottom:1px solid #bccce31a;border-radius:0;background:none!important;color:#a7b5c8}
 .ref-feature-nav a:first-child{padding-top:0}
 .ref-feature-nav a[aria-selected=true]{color:#f2e6f4;border-color:#bccce31a}
 .ref-feature-arrow{display:block;font-size:20px;opacity:0;color:#d7b3df}
 .ref-feature-nav a[aria-selected=true] .ref-feature-arrow{opacity:1}
 .ref-feature-summary{display:block;grid-column:1/-1;font-size:15px;font-weight:400;line-height:1.75;margin-top:16px!important;max-width:28ch}
 .ref-studio-enhanced .ref-feature-nav a:not([aria-selected=true]) .ref-feature-summary{display:none}
 .ref-feature-stage{aspect-ratio:1.12;padding:24px;border-radius:22px}
 .ref-app-preview{transform:perspective(1400px) rotateY(-7deg) rotateX(3deg) rotateZ(-.6deg) scale(.96);transform-origin:center}
 .ref-feature-panel{margin-bottom:65px}
 .ref-studio-enhanced .ref-feature-description{display:none}
 .ref-world-sketch{padding:25px 10px 38px;gap:22px}
 .ref-world-rules>p{font-size:22px;margin-bottom:28px}.ref-world-rules dl{gap:24px}.ref-world-rules dt{font-size:13px}.ref-world-rules dd{font-size:16px}.ref-world-sketch figcaption{font-size:12px}
}
@media(min-width:1024px){.ref-studio-layout{grid-template-columns:270px minmax(0,1fr);gap:70px}.ref-feature-stage{aspect-ratio:1.3;padding:28px}.ref-feature-nav a{font-size:23px;padding-block:26px}.ref-feature-summary{font-size:16px}.ref-world-sketch{padding:40px 24px;gap:40px}}
@media(max-width:767px){.ref-character-library{padding:10px}.ref-library-header{gap:8px;flex-wrap:wrap;font-size:16px}.ref-library-header button{font-size:12px}}
.ref-feature-stage-characters{aspect-ratio:auto}
@media(max-width:767px){
 .ref-feature-stage-world{aspect-ratio:auto}
 .ref-world-sketch{grid-template-columns:1fr;gap:22px;height:auto;padding:12px 6px 32px}
 .ref-world-portrait{width:100%;max-width:300px;margin-inline:auto}
 .ref-world-portrait img{width:100%;max-width:100%;margin:0}
 .ref-world-rules>p{font-size:20px}
 .ref-world-rules dd{font-size:14px}
}