/* Native choices, material feedback and occasional motion in the existing chrome world. */
.creation-experience{--motion-out:var(--ease,cubic-bezier(.23,1,.32,1));--motion-cycle:cubic-bezier(.77,0,.175,1)}
.creation-experience .forge{background:linear-gradient(145deg,#fff 20%,#f2f4f8 100%);box-shadow:0 12px 35px #24304a0a,inset 0 1px #fff}
.creation-experience .flow-steps{gap:8px;padding:6px;background:#e9edf3;border:1px solid #c8cfdb;border-radius:13px 5px 13px 5px;isolation:isolate}
.creation-experience .flow-steps li{flex:1;min-width:0;border:0}
.creation-experience .flow-steps button{width:100%;min-height:48px;border:0;border-radius:9px 3px 9px 3px;background:transparent;color:#566173;transition:background-color 160ms ease,color 160ms ease,box-shadow 160ms ease}
.creation-experience .flow-steps [aria-current=step]{background:#fff;color:#262a36;box-shadow:0 2px 7px #25314b12,inset 0 1px #fff}
.creation-experience .flow-steps i{font-style:normal;display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid #bfc7d4;border-radius:50%;font-size:11px;margin-right:6px}
.creation-experience .flow-steps [aria-current=step] i{background:#ded8ed;border-color:#9e90b5;color:#3e3156}
.creation-experience .material-paths{margin:24px 0 26px}
.creation-experience .material-paths h4{font:600 14px var(--body);margin:0 0 12px}
.material-path-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.material-path{position:relative;text-align:left;display:flex;flex-direction:column;gap:8px;border:1px solid #bdc7d5;border-radius:14px 5px 14px 5px;padding:16px 13px;background:linear-gradient(140deg,#fff,#e6ebf2 65%,#fff);color:#2b3444;min-height:132px;cursor:pointer;box-shadow:inset 0 1px #fff,0 3px 6px #1b2b4610;transition:transform 140ms var(--motion-out),border-color 160ms ease,box-shadow 160ms ease}
.material-path svg{width:28px;height:28px;margin-bottom:5px;color:#635776}
.material-path strong{font:600 12px var(--body);line-height:1.45}
.material-path span{font:11px/1.5 var(--body);color:#58667a}
.material-path[aria-pressed=true]{border-color:#88779f;background:linear-gradient(135deg,#faf8ff,#e2ddec);box-shadow:inset 0 0 0 1px #b6a9ca,0 3px 7px #36204c12}
.creation-experience .material-paths>.note{font-size:11px;line-height:1.6;margin-top:12px}
.creation-experience .visual-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;margin:12px 0 20px}
.creation-experience .visual-choices .chip{display:flex;align-items:center;gap:12px;min-height:86px;width:100%;padding:13px;text-align:left;border-radius:12px 4px 12px 4px;border:1px solid #bec6d4;color:#303744;background:linear-gradient(135deg,#fff,#e8edf4 62%,#fff);box-shadow:inset 0 1px #fff,0 3px 7px #192b4410;transition:transform 140ms var(--motion-out),border-color 160ms ease,box-shadow 160ms ease}
.creation-experience .visual-choices .chip[aria-pressed=true]{border-color:#8c78a5;background:linear-gradient(135deg,#f9f7ff,#e0daec);box-shadow:inset 0 0 0 1px #b5a8c8,0 4px 10px #36204c13}
.choice-art{flex:none;display:grid;place-items:center;width:35px;height:42px;border:1px solid #c3c9d4;border-radius:8px 2px 8px 2px;background:#ffffffab;box-shadow:0 3px 5px #26364f0b}
.choice-art svg{width:23px;height:23px;color:#625278}
.choice-copy{display:grid;gap:5px;flex:1;min-width:0}
.choice-copy strong{font:600 12px/1.45 var(--body)}
.choice-copy small{font:10px/1.55 var(--body);color:#5b6574}
.choice-check{width:18px;height:18px;flex:none;opacity:0;transform:scale(.8);transition:opacity 140ms ease,transform 140ms var(--motion-out);color:#51415f}
.chip[aria-pressed=true] .choice-check{opacity:1;transform:scale(1)}
.creation-experience .ws-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.creation-experience .type-choice{display:flex;align-items:flex-start;gap:10px;margin:0;padding:14px;border:1px solid #c6cddb;border-radius:10px 4px 10px 4px;background:#fafbfe;cursor:pointer;transition:border-color 160ms ease,background-color 160ms ease}
.type-choice input{accent-color:#7c6798;width:17px;height:17px;flex:none;margin:2px 0 0}
.type-choice>span{display:grid;gap:6px;min-width:0}
.type-choice strong{font:600 12px/1.5 var(--body)}
.type-choice small{font:10px/1.5 var(--body);color:#596576}
.creation-experience .type-choice:has(input:checked){background:#ece7f4;border-color:#a495b9}
.creation-experience .recipe-choice{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.recipe-choice svg{width:19px;height:19px}
.creation-experience .studio-guide{background:linear-gradient(120deg,#f9f7fd,#e9e4f1 60%,#fcfbff)}
.creation-experience .studio-preview{border-radius:20px 6px 20px 6px;box-shadow:0 12px 30px #20304d0b,inset 0 1px #fff}
.creation-working-scene{margin:26px 0 8px;padding:28px 20px 24px;border:1px solid #c8c4d4;border-radius:20px 6px 20px 6px;background:radial-gradient(ellipse at 50% 30%,#e3deed,transparent 65%),#f5f4f9;text-align:center;overflow:hidden}
.creation-working-scene[hidden]{display:none!important}
.creation-working-scene h3{font:600 20px/1.4 var(--display);margin:12px 0 8px}
.creation-working-scene p{font:12px/1.7 var(--body);color:#596374;margin:0 auto;max-width:38ch}
.working-art{height:134px;width:210px;position:relative;margin:0 auto;isolation:isolate}
.working-tile{position:absolute;left:66px;top:25px;width:76px;height:88px;border:1px solid #adb5c5;border-radius:14px 4px 14px 4px;background:linear-gradient(130deg,#fff 15%,#cdd4e0 45%,#fff 68%,#d9deea);box-shadow:0 10px 14px #27345018,inset 0 1px #fff;display:grid;place-items:center;animation:tile-float 2400ms var(--motion-cycle) infinite}
.working-tile svg{width:36px;height:36px;color:#66557e}
.tile-two{transform:translate(25px,8px) rotate(12deg);z-index:-1;animation-name:tile-two;animation-delay:-800ms}
.tile-three{transform:translate(-25px,8px) rotate(-12deg);z-index:-2;animation-name:tile-three;animation-delay:-1600ms}
.working-orbit{position:absolute;inset:17px 5px;border:1px solid #c5bbd4;border-radius:50%;transform:rotate(-18deg)}
.working-spark{position:absolute;right:10px;top:8px;width:27px;height:27px;color:#8a75a6;animation:spark-turn 3000ms linear infinite}
.working-spark svg{width:100%;height:100%}
.motion-pause{border:0;border-bottom:1px solid #9c90ad;background:none;color:#554765;font:11px var(--body);padding:8px 2px;margin-top:12px;cursor:pointer}
.is-paused .working-art *{animation-play-state:paused}
@keyframes tile-float{0%,100%{transform:translateY(3px) rotate(-3deg)}50%{transform:translateY(-6px) rotate(3deg)}}
@keyframes tile-two{0%,100%{transform:translate(23px,9px) rotate(10deg)}50%{transform:translate(29px,1px) rotate(15deg)}}
@keyframes tile-three{0%,100%{transform:translate(-23px,9px) rotate(-10deg)}50%{transform:translate(-29px,1px) rotate(-15deg)}}
@keyframes spark-turn{to{transform:rotate(360deg)}}
.study-live-card{width:100%;aspect-ratio:1.45;display:flex;flex-direction:column;justify-content:space-between;gap:20px;text-align:left;padding:28px;margin:22px 0;border:1px solid #b4bbcb;border-radius:24px 6px 24px 6px;background:linear-gradient(135deg,#fff 0%,#f6f4fa 68%,#d8ddea);box-shadow:0 10px 20px #24334d12,inset 0 1px #fff;cursor:pointer;color:#2b3040}
.study-live-card span{font:11px var(--body);color:#665978}
.study-live-card strong{font:600 24px/1.4 var(--display);overflow-wrap:anywhere}
.study-live-card small{font:11px var(--body);color:#606d7e}
.study-live-card:disabled{cursor:default;opacity:1}
.study-preview-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;font:11px var(--body)}
.creation-experience.creation-pointer :is(.material-path,.visual-choices .chip,.recipe-choice,.study-live-card):active{transform:scale(.975)}
.creation-experience button:focus-visible{outline:3px solid #8e75ab;outline-offset:3px}
@media(hover:hover) and (pointer:fine){.creation-experience :is(.material-path,.visual-choices .chip):hover{transform:translateY(-2px);border-color:#91859e;box-shadow:0 6px 13px #27324a15,inset 0 1px #fff}}
@media(max-width:760px){.creation-experience .material-path-grid{gap:7px}.material-path{padding:13px 9px;min-height:133px}.material-path strong{font-size:11px}.material-path span{font-size:10px}.creation-experience .visual-choices{gap:8px}.creation-experience .visual-choices .chip{padding:11px 9px;gap:8px;min-height:105px;flex-wrap:wrap}.choice-art{width:28px;height:32px}.choice-art svg{width:20px;height:20px}.choice-check{width:14px;height:14px}.choice-copy{min-width:70px}.choice-copy strong{font-size:11px}.choice-copy small{font-size:10px}.study-live-card strong{font-size:22px}.creation-working-scene{padding:20px 12px}.creation-working-scene h3{font-size:18px}}
@media(prefers-reduced-motion:reduce){.creation-experience :is(.material-path,.visual-choices .chip,.choice-check,.recipe-choice,.study-live-card){transition:opacity 120ms ease,border-color 120ms ease;transform:none!important}.working-art *{animation:none!important}.motion-pause{display:none}}
.creation-experience .custom-count-options{margin:-6px 0 20px;display:flex;gap:8px;flex-wrap:wrap}
.creation-experience .custom-count-options[hidden]{display:none!important}
.creation-experience .custom-count-options .chip{min-width:48px;min-height:40px}
/* Visual choices need the full form measure, rather than the old compact three-column grid. */
.creation-experience #homeExamSettings>.ws-settings{display:block}
.creation-experience #homeExamSettings>.ws-settings>.ws-field{display:block;margin:0 0 24px}
.creation-experience #homeExamSettings>.ws-settings>.ws-field>span{display:block;margin-bottom:10px}
.creation-experience #aiOptions>.two:has(#cardCountField){display:block}
.creation-experience .visual-choices .choice-copy{min-width:0;overflow-wrap:anywhere}
@media(min-width:1000px){.creation-experience #homeExamSettings .visual-choices[aria-label=Difficulty]{grid-template-columns:repeat(3,minmax(0,1fr))}.creation-experience #homeExamSettings .visual-choices[aria-label=Difficulty] .chip{gap:8px;flex-wrap:wrap}.creation-experience #homeExamSettings .visual-choices[aria-label=Difficulty] .choice-copy{min-width:80px}}