/* Approved mode concept: original artwork, live accessible text and controls. */
body.mode-selection{background:#090a0f;background-image:radial-gradient(ellipse at 75% 43%,#16132238,transparent 60%)}
.mode-selection .flow-main{position:relative;width:100%;max-width:620px;padding:30px 15px max(32px,env(safe-area-inset-bottom));box-sizing:border-box}
.mode-selection .flow-header{justify-content:center;margin:0 0 40px;height:34px}
.mode-selection .flow-header b{font-size:25px;font-weight:600;letter-spacing:-1px;color:#f5f3fb}
.mode-selection .flow-header b span{color:#b49aef}
.mode-selection .flow-header>a,.mode-selection .flow-header>img{display:none}
.mode-selection #back{position:absolute;top:24px;left:15px;width:44px;height:44px;min-height:44px;padding:0;margin:0;border:0;background:none;box-shadow:none;font-size:39px;font-weight:200;line-height:1;color:#c4bed7;border-radius:12px}
.mode-selection #screen>div:first-child{margin:0 0 27px;text-align:center}
.mode-selection #screen h1{margin:0;font-size:clamp(27px,6.05vw,37px);letter-spacing:-.8px;line-height:1.2;font-weight:600;color:#f5f4fb}
.mode-card{position:relative;display:block;width:100%;aspect-ratio:948/495;isolation:isolate;overflow:hidden;padding:0;margin:0 0 14px;text-align:left;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:clamp(22px,4.6vw,32px);border:1px solid #bbb0e05e;background:radial-gradient(ellipse at 15% 0,#4d4d644a,transparent 64%),linear-gradient(125deg,#14141f,#101119 48%,#242436);box-shadow:inset 0 1px 1px #efeaff38,inset 0 -1px 1px #a99cd933,0 10px 28px #0002;transition:transform .2s ease,border-color .2s ease;container-type:inline-size;color:#f5f4fb}
.mode-card--idea{aspect-ratio:948/474}
.mode-card:active{transform:scale(.986);border-color:#d4c5ff9c}
.mode-card:focus-visible,.mode-selection #back:focus-visible{outline:2px solid #c1a4ff;outline-offset:4px}
.mode-card-art{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;clip-path:inset(0 0 0 42%);-webkit-mask-image:linear-gradient(to right,transparent 42%,#000 47%);mask-image:linear-gradient(to right,transparent 42%,#000 47%)}
.mode-card-art img{position:absolute;display:block;max-width:none;width:108.016878%;height:auto;left:-4.008439%;top:-75.555556%;user-select:none;-webkit-user-drag:none}
.mode-card--idea .mode-card-art img{top:-191.139241%}
.mode-card-copy{position:absolute;left:5.65%;top:23.8%;display:block;width:42%;pointer-events:none}
.mode-card-copy strong{display:block;font-size:clamp(23px,6cqw,36px);font-weight:650;letter-spacing:-.7px;line-height:1.14;white-space:nowrap}
.mode-card-description{display:block;margin-top:9%;font-size:clamp(12px,3.17cqw,19px);line-height:1.3;letter-spacing:-.2px;color:#afadbf;font-weight:400;white-space:nowrap}
.mode-card-arrow{position:absolute;left:5.65%;bottom:13.5%;display:block;width:8%;max-width:32px;color:#c5bedb;pointer-events:none}
.mode-card-arrow svg{display:block;width:100%;height:auto}
.mode-card--idea .mode-card-copy{top:25.8%}
@media(min-width:600px){.mode-selection .flow-main{padding-top:40px}.mode-selection #back{top:34px}.mode-selection .flow-header{margin-bottom:55px}.mode-selection #screen>div:first-child{margin-bottom:38px}}
@media(prefers-reduced-motion:reduce){.mode-card{transition:none}}

/* Keep staggered card travel within the page without horizontal scrolling. */
.new-page #screen{overflow-x:clip}
.new-page #screen[aria-busy=true] .mode-card{pointer-events:none;will-change:transform,opacity;transition:none}