:root {
  --ink:#1d1d23;
  --muted:#66666f;
  --blue:#2463eb;
  --blue-hover:#174dc1;
  --purple:#7651d8;
  --paper:#fff;
  --soft:#f5f5f7;
  --line:#dcdce2;
  --radius:26px;
  --page-width:1120px;
  --header-height:76px;
  --space:120px;
  color-scheme:light;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:anywhere;
}
body:has(dialog[open]) {
  overflow:hidden;
}
button,input,select {
  font:inherit;
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
  color:inherit;
}
a {
  color:inherit;
  text-decoration:none;
}
button:disabled {
  cursor:not-allowed;
  opacity:.55;
}
img,svg {
  display:block;
  max-width:100%;
}
img {
  height:auto;
}
p,h1,h2,h3,figure {
  margin:0;
}
h1,h2,h3 {
  text-wrap:balance;
  font-weight:750;
  line-height:1.3;
  letter-spacing:-.045em;
  overflow-wrap:normal;
}
h2 {
  font-size:clamp(34px,3.7vw,52px);
}
h3 {
  font-size:25px;
}
button {
  border:0;
}
[hidden] {
  display:none!important;
}
:focus-visible {
  outline:3px solid #1b62e6;
  outline-offset:5px;
}
.mobile-only {
  display:none;
}
.container {
  width:min(var(--page-width),calc(100% - 96px));
  margin-inline:auto;
}
.section-space {
  padding-block:var(--space);
}
.eyebrow {
  font-size:14px;
  font-weight:650;
  letter-spacing:.12em;
  line-height:1.5;
  margin-bottom:22px;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  min-height:50px;
  padding:11px 24px;
  background:var(--blue);
  color:#fff;
  border-radius:100px;
  line-height:1.5;
  font-size:16px;
  font-weight:500;
  transition:background .2s,transform .2s;
}
.button:hover {
  background:var(--blue-hover);
  transform:translateY(-2px);
}
.button span[aria-hidden] {
  font-size:21px;
  line-height:1;
}
.button-small {
  min-height:38px;
  padding:8px 18px;
  font-size:14px;
  gap:16px;
}
.button-wide {
  width:100%;
}
.text-link {
  color:#195bce;
  display:inline-flex;
  align-items:center;
  gap:13px;
  font-size:16px;
  line-height:1.6;
  padding-block:10px;
}
.text-link span {
  font-size:25px;
  line-height:1;
}
.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}
.skip-link {
  position:fixed;
  top:8px;
  left:8px;
  background:#fff;
  padding:12px;
  z-index:100;
  transform:translateY(-150%);
}
.skip-link:focus {
  transform:none;
}
.demo-banner {
  padding:7px 24px;
  text-align:center;
  background:#ececf0;
  color:#60606a;
  font-size:14px;
  line-height:1.5;
}
.site-header {
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(255,255,255,.91);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(220,220,226,.7);
}
.header-inner {
  height:var(--header-height);
  width:min(1224px,calc(100% - 72px));
  margin:auto;
  display:flex;
  align-items:center;
  gap:32px;
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  line-height:1.3;
}
.brand-symbol {
  flex-shrink:0;
}
.brand-word {
  font-size:25px;
  font-weight:780;
  letter-spacing:.03em;
  display:flex;
  align-items:center;
  gap:18px;
}
.brand-school {
  font-size:14px;
  font-weight:550;
  letter-spacing:0;
}
.desktop-nav {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:28px;
  font-size:14px;
}
.desktop-nav a {
  padding-block:10px;
  color:#44444c;
}
.desktop-nav a:hover {
  color:var(--blue);
}
.header-cta {
  flex-shrink:0;
}
.menu-toggle {
  display:none;
  background:transparent;
  width:44px;
  height:44px;
  position:relative;
  flex-shrink:0;
  padding:12px;
}
.menu-toggle span {
  position:absolute;
  left:12px;
  right:12px;
  height:1.5px;
  background:var(--ink);
  top:17px;
  transition:transform .2s;
}
.menu-toggle span+span {
  top:25px;
}
.menu-toggle[aria-expanded=true] span:first-child {
  transform:translateY(4px) rotate(45deg);
}
.menu-toggle[aria-expanded=true] span:last-child {
  transform:translateY(-4px) rotate(-45deg);
}
.mobile-nav {
  padding:4px 24px 24px;
  max-height:calc(100dvh - 80px);
  overflow-y:auto;
  border-top:1px solid var(--line);
}
.mobile-nav a {
  display:flex;
  justify-content:space-between;
  padding:17px 4px;
  border-bottom:1px solid var(--line);
  font-weight:600;
  font-size:18px;
}
.hero {
  background:var(--soft);
  padding:55px 0 28px;
  overflow:hidden;
}
.hero-copy {
  text-align:center;
  position:relative;
  z-index:1;
  padding-inline:20px;
}
.hero-eyebrow {
  font-size:15px;
  letter-spacing:.15em;
  color:#51515b;
  margin-bottom:23px;
}
.hero-eyebrow span {
  margin-left:8px;
  color:var(--purple);
}
.hero h1 {
  font-size:clamp(52px,6.1vw,84px);
  line-height:1.17;
  letter-spacing:-.065em;
}
.gradient-text {
  background:linear-gradient(105deg,#1d65cf 0%,#6a4bd5 65%,#9561c0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-description {
  font-size:20px;
  line-height:1.7;
  font-weight:550;
  margin-top:25px;
  letter-spacing:.01em;
}
.hero-actions {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  margin-top:24px;
}
.hero-visual {
  max-width:850px;
  margin:10px auto 34px;
  position:relative;
}
.hero-visual img {
  width:100%;
  mix-blend-mode:multiply;
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent 0%,#000 9%,#000 87%,transparent 100%);
  mask-composite:intersect;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent 0%,#000 9%,#000 87%,transparent 100%);
  -webkit-mask-composite:source-in;
}
.sample-note {
  font-size:14px;
  color:#73737b;
  text-align:center;
  margin-top:18px;
}
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:50px;
}
.section-intro {
  font-size:17px;
  line-height:1.85;
  color:var(--muted);
  padding-bottom:5px;
  max-width:380px;
}
.programs {
  background:#fff;
}
.course-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.course-card {
  background:var(--soft);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.course-art {
  height:300px;
  position:relative;
  overflow:hidden;
  margin:8px 8px 0;
  border-radius:20px;
}
.course-body {
  padding:28px 28px 30px;
  display:flex;
  flex:1;
  flex-direction:column;
}
.course-category {
  font-size:14px;
  letter-spacing:.075em;
  font-weight:650;
  margin-bottom:13px;
  color:#666473;
}
.course-body h3 {
  font-size:29px;
  line-height:1.45;
  margin-bottom:18px;
}
.course-body>p:not(.course-category) {
  font-size:16px;
  color:var(--muted);
  line-height:1.9;
}
.course-outcome {
  display:grid;
  grid-template-columns:5em 1fr;
  gap:7px 8px;
  font-size:14px;
  line-height:1.7;
  border-top:1px solid var(--line);
  padding-top:18px;
  margin:24px 0;
}
.course-outcome dt {
  color:var(--muted);
}
.course-outcome dd {
  margin:0;
  font-weight:550;
}
.course-link {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  color:#1d5dca;
  font-size:14px;
  font-weight:550;
  margin-top:auto;
  padding:8px 0;
}
.course-link span {
  font-size:22px;
}
.course-link:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}
.course-footnote {
  font-size:14px;
  color:var(--muted);
  margin-top:25px;
  text-align:center;
}
.art-caption {
  position:absolute;
  right:16px;
  bottom:12px;
  font-size:14px;
  color:#585367;
  z-index:3;
}
.art-ai {
  background:radial-gradient(ellipse at 60% 25%,#e6d6ff,transparent 70%),linear-gradient(150deg,#eae6fa,#e0ebfa);
}
.ai-orb {
  position:absolute;
  right:31px;
  top:18px;
  width:104px;
  height:104px;
  border-radius:30%;
  transform:rotate(15deg);
  background:radial-gradient(circle at 25% 20%,#fbfaff 0%,#cac0ff 35%,#8368e7 75%,#5638b5);
  box-shadow:inset -5px -8px 20px #7455c7,0 20px 35px #9882c54d;
  display:grid;
  place-items:center;
}
.ai-orb span {
  font-size:60px;
  color:#fff8;
  transform:rotate(-15deg);
}
.chat-bubble {
  position:absolute;
  font-size:15px;
  line-height:1.8;
  border-radius:17px;
  box-shadow:0 10px 30px #63618c14;
}
.chat-question {
  top:126px;
  right:25px;
  background:#fff9;
  padding:11px 17px;
  border-bottom-right-radius:4px;
}
.chat-answer {
  left:23px;
  bottom:36px;
  background:#fff;
  padding:17px 21px;
  display:flex;
  gap:12px;
  border-bottom-left-radius:4px;
}
.tiny-spark {
  color:var(--purple);
  font-size:25px;
}
.chat-tags {
  display:flex;
  gap:7px;
  margin-top:8px;
}
.chat-tags span {
  background:#f0ecfa;
  color:#756389;
  padding:2px 9px;
  border-radius:5px;
  font-size:14px;
}
.art-game {
  background:linear-gradient(165deg,#b6c9f7 0%,#d7d9fd 52%,#e2d9f7 100%);
  perspective:700px;
}
.game-grid {
  position:absolute;
  inset:55% -40% -30%;
  background-image:linear-gradient(#ffffff70 1px,transparent 1px),linear-gradient(90deg,#ffffff70 1px,transparent 1px);
  background-size:32px 32px;
  transform:rotateX(58deg) rotateZ(-20deg);
}
.game-sun {
  position:absolute;
  right:40px;
  top:24px;
  width:65px;
  height:65px;
  border-radius:50%;
  background:linear-gradient(140deg,#f8faff,#b0baf2);
  box-shadow:inset -8px -8px 15px #a0a8dc50;
}
.game-platform {
  position:absolute;
  height:43px;
  background:linear-gradient(120deg,#ddfdfa,#8abfc7);
  transform:skewY(-18deg);
  box-shadow:7px 13px 0 #9f9bd2,8px 20px 25px #766bab50;
  border-radius:5px;
}
.platform-one {
  width:95px;
  left:24px;
  bottom:64px;
}
.platform-two {
  width:80px;
  left:127px;
  bottom:105px;
}
.platform-three {
  width:106px;
  right:26px;
  top:103px;
}
.game-arch {
  position:absolute;
  top:44px;
  right:53px;
  width:59px;
  height:89px;
  border:13px solid #e2ccff;
  border-bottom:0;
  border-radius:45px 45px 0 0;
  transform:skewY(-18deg);
  box-shadow:9px -1px 0 #a487d9,inset 6px 1px 0 #b298e0;
  filter:drop-shadow(0 0 13px #f2e5ff);
}
.game-ball {
  position:absolute;
  left:58px;
  bottom:98px;
  width:38px;
  height:38px;
  background:radial-gradient(circle at 32% 23%,#ffe4b5,#f2a047 60%,#c16c32);
  border-radius:50%;
  box-shadow:3px 9px 13px #96648a66;
}
.game-label {
  position:absolute;
  left:20px;
  top:21px;
  font-size:14px;
  font-weight:600;
  max-width:140px;
  line-height:1.6;
  color:#444b73;
}
.art-web {
  background:linear-gradient(145deg,#f7d9c5,#eeded1 46%,#ddd2ee);
}
.mini-browser {
  position:absolute;
  left:30px;
  right:14px;
  top:34px;
  bottom:32px;
  transform:rotate(-6deg);
  border:5px solid #fff;
  border-radius:12px;
  overflow:hidden;
  background:white;
  box-shadow:0 20px 25px #6c537530;
}
.browser-chrome {
  height:30px;
  display:flex;
  align-items:center;
  padding:0 8px;
  gap:4px;
}
.browser-chrome i {
  width:5px;
  height:5px;
  background:#d0cbd5;
  border-radius:50%;
}
.browser-chrome span {
  font-size:14px;
  margin-left:10px;
  color:#74707b;
  white-space:nowrap;
}
.mini-website {
  height:calc(100% - 30px);
  padding:16px;
  background:#c4b5fd;
  position:relative;
  overflow:hidden;
}
.mini-site-label {
  font-size:14px;
  position:relative;
  z-index:1;
  font-weight:550;
}
.mini-website strong {
  font-size:35px;
  line-height:1.03;
  letter-spacing:-.055em;
  position:relative;
  z-index:1;
  display:block;
  margin-top:14px;
}
.design-sun {
  position:absolute;
  right:-20px;
  top:25px;
  width:140px;
  height:140px;
  background:#f8ec8c;
  border-radius:50%;
}
.mini-site-footer {
  font-size:14px;
  position:relative;
  z-index:1;
  display:block;
  margin-top:20px;
}
.playground {
  background:#17171c;
  color:#f5f5f7;
}
.playground .eyebrow {
  color:#b6a4e9;
}
.playground-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:50px;
}
.playground h2 {
  font-size:46px;
}
.playground h2 span {
  color:#b6b5c4;
}
.playground-heading p {
  color:#bcbcc8;
  font-size:16px;
  line-height:1.9;
}
.live-workspace {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  border:1px solid #44444f;
  border-radius:var(--radius);
  overflow:hidden;
  min-height:365px;
}
.editor-panel {
  background:#222229;
  padding:28px 30px;
  display:flex;
  flex-direction:column;
  min-width:0;
}
.window-label {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  color:#d9d8e1;
}
.status-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#aa97e4;
}
.editor-note {
  font-size:14px;
  color:#bab7c9;
  margin-left:auto;
}
.code-sample {
  padding:35px 0 28px;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:19px;
  line-height:2.05;
  white-space:nowrap;
  color:#d6d1ea;
}
.code-comment {
  font-size:14px;
  color:#9693a5;
}
.code-selector {
  color:#b9a4ff;
}
.code-indent {
  padding-left:1.4em;
}
#color-code {
  color:#acdab9;
}
.color-controls {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:auto;
}
.color-button {
  font-size:14px;
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid #55535f;
  color:#c7c4d3;
  border-radius:30px;
  padding:8px 11px;
  background:transparent;
  line-height:1.5;
}
.color-button>span {
  width:14px;
  height:14px;
  background:var(--swatch);
  border-radius:50%;
  flex-shrink:0;
}
.color-button.is-selected {
  background:#3c374d;
  border-color:#b7a0ef;
  color:#fff;
}
.color-button:hover {
  background:#423e50;
}
.preview-panel {
  background:#c4b5fd;
  color:#282039;
  padding:25px 32px;
  display:flex;
  flex-direction:column;
  transition:background .35s;
}
.preview-header {
  display:flex;
  justify-content:space-between;
  font-size:14px;
  font-weight:600;
  letter-spacing:.05em;
}
.preview-header>span:last-child {
  font-size:23px;
}
.preview-design {
  display:flex;
  flex-direction:row-reverse;
  align-items:center;
  gap:22px;
  justify-content:space-between;
  flex:1;
  margin-block:20px;
}
.preview-design strong {
  font-size:58px;
  line-height:.98;
  letter-spacing:-.065em;
}
.preview-flower {
  font-size:145px;
  color:#fbec98;
  line-height:1;
}
.preview-panel>p {
  font-size:15px;
}
.playground-note {
  text-align:center;
  color:#b5b3c1;
  font-size:14px;
  margin-top:22px;
  min-height:26px;
}
.campus .section-intro {
  max-width:390px;
}
.campus-figure img {
  width:100%;
  aspect-ratio:2.2;
  object-fit:cover;
  object-position:center 25%;
  border-radius:var(--radius);
}
.campus-figure figcaption {
  font-size:14px;
  color:var(--muted);
  text-align:right;
  margin-top:12px;
}
.support-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:48px;
  margin-top:48px;
}
.support-number {
  color:#6f6a84;
  font-size:14px;
  letter-spacing:.07em;
  display:block;
  margin-bottom:10px;
}
.support-grid h3 {
  font-size:23px;
  margin-bottom:15px;
  letter-spacing:-.035em;
}
.support-grid p {
  font-size:16px;
  color:var(--muted);
  line-height:1.9;
}
.day {
  background:var(--soft);
}
.day-pills {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:26px 0 18px;
}
.day-pills span {
  background:#e8e8ee;
  border-radius:100px;
  padding:6px 13px;
  font-size:14px;
  line-height:1.6;
}
.timeline {
  margin:0;
  padding:0;
  list-style:none;
}
.timeline li {
  display:grid;
  grid-template-columns:65px 1fr;
  gap:30px;
  position:relative;
  padding-bottom:35px;
}
.timeline li:last-child {
  padding-bottom:0;
}
.timeline li::before {
  position:absolute;
  content:"";
  left:76px;
  top:18px;
  width:1px;
  height:100%;
  background:#cccbd5;
}
.timeline li:last-child::before {
  display:none;
}
.timeline li::after {
  position:absolute;
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  left:72px;
  top:14px;
  background:#a4a1af;
  box-shadow:0 0 0 5px var(--soft);
}
.timeline time {
  font-size:17px;
  font-weight:550;
  line-height:2;
}
.timeline-duration {
  font-size:14px;
  letter-spacing:.035em;
  color:var(--muted);
}
.timeline h3 {
  font-size:23px;
  line-height:1.5;
  margin:5px 0 9px;
}
.timeline p {
  color:var(--muted);
  font-size:16px;
  line-height:1.8;
}
.timeline-highlight time,.timeline-highlight .timeline-duration {
  color:var(--blue);
}
.timeline .timeline-highlight::after {
  background:var(--blue);
}
.faq-grid {
  display:grid;
  grid-template-columns:1fr 1.45fr;
  gap:65px;
}
.faq h2 {
  font-size:42px;
}
.faq-list {
  border-top:1px solid var(--line);
}
.faq details {
  border-bottom:1px solid var(--line);
}
.faq summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:23px 0;
  font-size:17px;
  line-height:1.65;
  cursor:pointer;
  font-weight:550;
}
.faq summary::-webkit-details-marker {
  display:none;
}
.faq summary>span {
  font-size:27px;
  color:#767381;
  font-weight:300;
  line-height:1;
  flex-shrink:0;
  transition:transform .2s;
}
.faq details[open] summary>span {
  transform:rotate(45deg);
}
.faq-answer {
  padding:0 30px 25px 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.9;
}
.dates {
  background:radial-gradient(ellipse at 15% 20%,#e8e9fc80,transparent 50%),radial-gradient(ellipse at 85% 80%,#e9e2f990,transparent 50%),var(--soft);
}
.dates-heading {
  text-align:center;
}
.dates-heading h2 {
  font-size:58px;
  line-height:1.3;
}
.dates-heading>p:not(.eyebrow) {
  margin-top:24px;
  font-size:18px;
  color:var(--muted);
}
.demo-chip {
  font-size:14px;
  color:#686073;
  background:#e9e5f180;
  border:1px solid #d9d4e2;
  border-radius:100px;
  display:inline-block;
  padding:5px 15px;
  margin-top:22px;
  line-height:1.6;
}
.selected-course {
  text-align:center;
  font-size:15px;
  min-height:29px;
  margin:35px 0 17px;
  color:#645575;
}
.date-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.date-card {
  background:#fff;
  border-radius:24px;
  border:1px solid #e0dfe7;
  padding:25px 30px 0;
  text-align:left;
  transition:transform .2s,border-color .2s,box-shadow .2s;
  display:flex;
  flex-direction:column;
}
.date-card:hover {
  transform:translateY(-5px);
  border-color:#899ef5;
  box-shadow:0 16px 32px #4c428a10;
}
.date-year {
  font-size:14px;
  letter-spacing:.07em;
  color:var(--muted);
}
.date-number {
  font-size:68px;
  font-weight:600;
  letter-spacing:-.055em;
  line-height:1.3;
  margin-top:10px;
  white-space:nowrap;
}
.date-dot {
  color:#aaa4c2;
}
.date-day {
  font-size:17px;
  font-weight:450;
  letter-spacing:0;
  margin-left:12px;
}
.date-hours {
  font-size:16px;
  color:var(--muted);
  margin-top:5px;
  margin-bottom:27px;
}
.date-action {
  border-top:1px solid #e3e2eb;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  color:#1959cb;
  padding:16px 0;
  font-size:16px;
  width:100%;
  margin-top:auto;
}
.date-action span {
  font-size:23px;
  line-height:1;
}
.event-info {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
  padding:35px 0 27px;
  margin-top:20px;
  border-bottom:1px solid #d9d6e3;
}
.event-info>div>span {
  font-size:14px;
  color:var(--muted);
  display:block;
  margin-bottom:8px;
}
.event-info p {
  font-size:16px;
  line-height:1.8;
}
.booking-notice {
  font-size:14px;
  color:var(--muted);
  text-align:center;
  margin-top:26px;
  line-height:1.85;
}
.footer {
  padding:45px 0 30px;
  background:#fff;
}
.footer-main {
  display:flex;
  align-items:center;
  gap:36px;
  padding-bottom:28px;
  border-bottom:1px solid var(--line);
}
.footer-brand .brand-word {
  font-size:23px;
  display:block;
}
.footer-brand .brand-school {
  display:block;
  font-size:14px;
  margin-top:4px;
}
.footer-main>p {
  font-size:16px;
  color:var(--muted);
}
.back-top {
  margin-left:auto;
  display:flex;
  gap:15px;
  align-items:center;
  font-size:14px;
  color:var(--muted);
}
.back-top span {
  font-size:22px;
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:25px;
  padding-top:24px;
  color:#75757e;
  font-size:14px;
  line-height:1.75;
}
dialog {
  width:min(590px,calc(100% - 32px));
  max-height:calc(100dvh - 48px);
  padding:0;
  border:0;
  border-radius:28px;
  color:var(--ink);
  box-shadow:0 24px 100px #17142645;
  overscroll-behavior:contain;
}
dialog::backdrop {
  background:#19172585;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.dialog-inner {
  padding:42px;
  position:relative;
}
.dialog-close {
  position:absolute;
  right:17px;
  top:17px;
  width:36px;
  height:36px;
  border-radius:50%;
  background:#f0eff3;
  color:#56535f;
  font-size:27px;
  display:grid;
  place-items:center;
  line-height:1;
}
.dialog-inner .eyebrow {
  font-size:14px;
  color:var(--purple);
  margin-bottom:12px;
}
.dialog-inner h2 {
  font-size:29px;
  line-height:1.45;
  padding-right:12px;
}
.dialog-notice {
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  margin-top:14px;
  margin-bottom:24px;
}
.field-hint {
  font-size:14px;
  color:var(--muted);
  margin-top:9px;
}
.field-label,fieldset legend {
  display:block;
  font-size:16px;
  font-weight:650;
  margin-bottom:9px;
}
select {
  width:100%;
  border:1px solid #b8b5c2;
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  padding:12px 35px 12px 12px;
  font-size:16px;
  min-height:50px;
}
fieldset {
  border:0;
  padding:0;
  margin:24px 0;
}
.radio-option {
  display:flex;
  gap:12px;
  align-items:center;
  border:1px solid #d6d3df;
  padding:12px 15px;
  border-radius:13px;
  margin-top:9px;
  cursor:pointer;
  font-size:16px;
  line-height:1.5;
}
.radio-option:has(input:checked) {
  border-color:var(--blue);
  background:#f0f4ff;
  box-shadow:0 0 0 1px var(--blue);
}
.radio-option input {
  width:18px;
  height:18px;
  flex-shrink:0;
  accent-color:var(--blue);
  margin:0;
}
.radio-option small {
  display:block;
  color:var(--muted);
  font-size:14px;
  margin-top:4px;
}
#booking-fields>.button {
  margin-top:28px;
}
.booking-summary {
  margin:0 0 24px;
}
.booking-summary>div {
  border-top:1px solid var(--line);
  padding:14px 0;
}
.booking-summary dt {
  font-size:14px;
  color:var(--muted);
  margin-bottom:3px;
}
.booking-summary dd {
  font-size:16px;
  margin:0;
  line-height:1.75;
}
.review-note {
  font-size:14px;
  color:var(--muted);
  margin-bottom:22px;
}
.text-button {
  background:none;
  color:#215aca;
  display:block;
  margin:15px auto 0;
  padding:10px;
  font-size:16px;
}
.complete-symbol {
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  font-size:34px;
  border-radius:50%;
  color:var(--blue);
  background:#eef2ff;
  margin:24px auto;
}
#booking-complete {
  text-align:center;
}
.complete-message {
  font-size:20px;
  font-weight:650;
  margin-bottom:15px;
}
#booking-complete>p:not(.complete-message) {
  font-size:16px;
  color:var(--muted);
  line-height:1.9;
}
.complete-hint {
  margin:22px 0 28px;
}
@media(min-width:1600px) {
  .hero {
    padding-top:65px;
  }
}
@media(max-width:1150px) {
  .header-inner {
    gap:23px;
    width:calc(100% - 48px);
  }
  .brand-school {
    display:none;
  }
  .desktop-nav {
    gap:22px;
  }
  .course-body {
    padding:24px 22px;
  }
  .course-body h3 {
    font-size:27px;
  }
  .course-art {
    height:285px;
  }
  .chat-answer {
    left:13px;
    padding:14px;
  }
  .chat-question {
    right:15px;
  }
  .mini-browser {
    left:18px;
  }
  .mini-website strong {
    font-size:32px;
  }
  .mini-website {
    padding:14px 10px;
  }
  .mini-site-footer {
    font-size:14px;
  }
  .editor-note {
    display:none;
  }
  .code-sample {
    font-size:17px;
  }
  .preview-design strong {
    font-size:50px;
  }
  .preview-flower {
    font-size:105px;
  }
  .date-card {
    padding:24px 23px 0;
  }
  .date-number {
    font-size:60px;
  }
  .support-grid {
    gap:32px;
  }
  .playground h2 {
    font-size:40px;
  }
  .footer-main {
    gap:25px;
  }
}
@media(max-width:900px) {
  :root {
    --space:88px;
  }
  .container {
    width:calc(100% - 56px);
  }
  .header-inner {
    gap:20px;
  }
  .brand-word {
    font-size:23px;
  }
  .desktop-nav {
    gap:18px;
  }
  .hero {
    padding-top:46px;
  }
  .hero-visual {
    max-width:760px;
  }
  .section-heading {
    gap:24px;
  }
  .section-intro {
    font-size:16px;
  }
  .course-grid {
    grid-template-columns:1fr;
  }
  .course-card {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:0;
  }
  .course-art {
    height:auto;
    min-height:360px;
    margin:10px;
    border-radius:19px;
    align-self:stretch;
  }
  .course-body {
    padding:28px;
  }
  .course-body h3 {
    font-size:30px;
  }
  .course-outcome {
    margin:18px 0;
  }
  .art-ai .chat-question {
    top:46%;
  }
  .art-ai .chat-answer {
    bottom:18%;
  }
  .ai-orb {
    top:15%;
    right:20%;
  }
  .mini-browser {
    top:16%;
    bottom:16%;
    left:10%;
    right:8%;
  }
  .mini-website {
    padding:20px;
  }
  .mini-website strong {
    font-size:38px;
  }
  .mini-site-footer {
    margin-top:30px;
  }
  .game-platform {
    height:50px;
  }
  .platform-one {
    bottom:26%;
  }
  .platform-two {
    bottom:39%;
    left:40%;
  }
  .platform-three {
    top:27%;
  }
  .game-arch {
    top:13%;
  }
  .game-ball {
    bottom:calc(26% + 33px);
  }
  .game-label {
    top:6%;
  }
  .live-workspace {
    grid-template-columns:1fr 1fr;
  }
  .editor-panel {
    padding:24px 20px;
  }
  .code-sample {
    font-size:16px;
  }
  .preview-panel {
    padding:24px;
  }
  .preview-design {
    gap:3px;
  }
  .preview-design strong {
    font-size:42px;
  }
  .preview-flower {
    font-size:90px;
  }
  .playground-heading {
    align-items:flex-start;
  }
  .playground h2 {
    font-size:36px;
  }
  .playground-heading p {
    max-width:290px;
  }
  .support-grid {
    gap:25px;
  }
  .support-grid h3 {
    font-size:20px;
  }
  .faq-grid {
    grid-template-columns:1fr;
    gap:34px;
  }
  .faq h2 br {
    display:none;
  }
  .faq h2 {
    font-size:39px;
  }
  .date-grid {
    gap:15px;
  }
  .date-card {
    padding:22px 19px 0;
  }
  .date-number {
    font-size:47px;
  }
  .date-day {
    font-size:15px;
    margin-left:7px;
  }
  .date-action {
    font-size:14px;
  }
  .dates-heading h2 {
    font-size:50px;
  }
  .event-info {
    gap:20px;
  }
  .event-info p {
    font-size:15px;
  }
  .footer-main>p {
    display:none;
  }
  .footer-bottom {
    flex-direction:column;
    gap:8px;
  }
}
@media(max-width:700px) {
  :root {
    --header-height:66px;
    --space:72px;
  }
  .container {
    width:calc(100% - 40px);
  }
  .demo-banner {
    padding:7px 20px;
    font-size:14px;
  }
  .header-inner {
    width:calc(100% - 32px);
    gap:10px;
  }
  .brand-word {
    font-size:24px;
  }
  .brand-symbol {
    width:23px;
    height:26px;
  }
  .brand {
    gap:9px;
  }
  .desktop-nav {
    display:none;
  }
  .header-cta {
    margin-left:auto;
    min-height:36px;
    padding:8px 13px;
    gap:10px;
  }
  .menu-toggle:not([hidden]) {
    display:block;
  }
  .hero {
    padding-top:37px;
    padding-bottom:25px;
  }
  .hero-eyebrow {
    font-size:14px;
    letter-spacing:.08em;
    margin-bottom:22px;
  }
  .hero-eyebrow span {
    margin-left:3px;
  }
  .hero h1 {
    font-size:59px;
    line-height:1.2;
  }
  .hero-description {
    font-size:18px;
    line-height:1.8;
    margin-top:22px;
  }
  .hero-actions {
    flex-direction:column;
    gap:4px;
    margin-top:22px;
  }
  .hero-actions .button {
    gap:26px;
  }
  .hero-actions .text-link {
    font-size:15px;
    margin-top:4px;
  }
  .hero-visual {
    width:100%;
    margin-top:9px;
    margin-bottom:29px;
  }
  .hero-visual img {
    width:116%;
    max-width:none;
    margin-left:-8%;
  }
  .sample-note {
    font-size:14px;
    text-align:left;
    padding-inline:4px;
    line-height:1.8;
  }
  .eyebrow {
    margin-bottom:18px;
    font-size:14px;
  }
  .section-heading {
    display:block;
    margin-bottom:30px;
  }
  h2 {
    font-size:35px;
    line-height:1.45;
  }
  .section-intro {
    margin-top:21px;
    font-size:16px;
    line-height:1.9;
  }
  .desktop-only {
    display:none;
  }
  .course-grid {
    gap:23px;
  }
  .course-card {
    display:flex;
    border-radius:23px;
  }
  .course-art {
    min-height:0;
    height:290px;
    margin:9px 9px 0;
    align-self:auto;
  }
  .course-body {
    padding:25px 25px 28px;
  }
  .course-body h3 {
    font-size:29px;
    line-height:1.45;
  }
  .course-body>p:not(.course-category) {
    font-size:16px;
  }
  .course-category {
    font-size:14px;
    margin-bottom:12px;
  }
  .course-outcome {
    margin-block:22px;
  }
  .course-link {
    font-size:15px;
  }
  .course-footnote {
    text-align:left;
    font-size:14px;
    margin-top:22px;
  }
  .ai-orb {
    top:22px;
    right:45px;
  }
  .art-ai .chat-question {
    top:123px;
  }
  .art-ai .chat-answer {
    bottom:31px;
    left:30px;
    padding:17px 21px;
  }
  .mini-browser {
    top:30px;
    bottom:30px;
    left:28px;
    right:22px;
  }
  .mini-website {
    padding:16px;
  }
  .mini-website strong {
    font-size:36px;
  }
  .mini-site-footer {
    margin-top:20px;
  }
  .platform-one {
    bottom:64px;
  }
  .platform-two {
    bottom:108px;
    left:42%;
  }
  .platform-three {
    top:99px;
  }
  .game-arch {
    top:34px;
  }
  .game-ball {
    bottom:100px;
  }
  .playground-heading {
    display:block;
    margin-bottom:30px;
  }
  .playground h2 {
    font-size:32px;
    line-height:1.5;
  }
  .playground-heading p {
    max-width:none;
    margin-top:20px;
    font-size:16px;
  }
  .live-workspace {
    grid-template-columns:1fr;
    border-radius:22px;
  }
  .editor-panel {
    padding:22px;
  }
  .editor-note {
    display:inline;
    margin-left:auto;
    font-size:14px;
  }
  .code-sample {
    font-size:18px;
    padding-block:26px;
    line-height:2;
  }
  .code-comment {
    font-size:14px;
  }
  .color-controls {
    gap:7px;
  }
  .color-button {
    padding:8px 10px;
    font-size:14px;
  }
  .preview-panel {
    min-height:315px;
    padding:25px;
  }
  .preview-design strong {
    font-size:61px;
  }
  .preview-flower {
    font-size:124px;
  }
  .preview-design {
    gap:14px;
  }
  .playground-note {
    text-align:left;
    font-size:14px;
    margin-top:18px;
  }
  .campus-figure {
    margin-inline:-20px;
  }
  .campus-figure img {
    border-radius:0;
    aspect-ratio:1.15;
    object-position:58% 50%;
  }
  .campus-figure figcaption {
    margin:13px 20px 0;
    text-align:left;
    line-height:1.7;
  }
  .support-grid {
    grid-template-columns:1fr;
    gap:25px;
    margin-top:34px;
  }
  .support-grid>div {
    padding-top:23px;
    border-top:1px solid var(--line);
    position:relative;
    padding-left:35px;
  }
  .support-grid>div:first-child {
    border:0;
    padding-top:0;
  }
  .support-number {
    position:absolute;
    left:0;
    top:25px;
    font-size:14px;
  }
  .support-grid>div:first-child .support-number {
    top:3px;
  }
  .support-grid h3 {
    font-size:23px;
    margin-bottom:12px;
  }
  .support-grid p {
    font-size:16px;
  }
  .day-pills {
    margin-top:23px;
  }
  .timeline li {
    grid-template-columns:57px 1fr;
    gap:28px;
    padding-bottom:31px;
  }
  .timeline li::before {
    left:64px;
  }
  .timeline li::after {
    left:60px;
  }
  .timeline h3 {
    font-size:22px;
  }
  .timeline time {
    font-size:16px;
  }
  .timeline-duration {
    font-size:14px;
  }
  .timeline p {
    font-size:16px;
  }
  .faq-grid {
    gap:28px;
  }
  .faq h2 {
    font-size:35px;
  }
  .faq h2 br {
    display:block;
  }
  .faq summary {
    font-size:16px;
    padding-block:20px;
    gap:20px;
  }
  .faq-answer {
    padding-right:5px;
    font-size:16px;
  }
  .dates-heading h2 {
    font-size:39px;
    line-height:1.45;
  }
  .dates-heading>p:not(.eyebrow) {
    font-size:16px;
    margin-top:21px;
  }
  .demo-chip {
    border-radius:12px;
    font-size:14px;
    padding:8px 13px;
    max-width:100%;
    margin-top:21px;
  }
  .selected-course {
    font-size:14px;
    margin-top:30px;
  }
  .date-grid {
    grid-template-columns:1fr;
    gap:14px;
  }
  .date-card {
    padding:20px 23px 0;
    border-radius:21px;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:baseline;
    column-gap:18px;
  }
  .date-year {
    grid-column:1/-1;
    font-size:14px;
  }
  .date-number {
    font-size:58px;
    margin-top:7px;
  }
  .date-day {
    font-size:16px;
    margin-left:10px;
  }
  .date-hours {
    font-size:15px;
    margin:0 0 0 auto;
    white-space:nowrap;
  }
  .date-action {
    grid-column:1/-1;
    padding:13px 0;
    margin-top:15px;
    font-size:16px;
  }
  .event-info {
    grid-template-columns:1fr;
    gap:20px;
    margin-top:8px;
    padding:26px 0;
  }
  .event-info>div {
    display:grid;
    grid-template-columns:100px 1fr;
    gap:15px;
  }
  .event-info>div>span {
    font-size:14px;
    line-height:1.8;
  }
  .event-info p {
    font-size:16px;
  }
  .booking-notice {
    text-align:left;
    font-size:14px;
    line-height:1.9;
  }
  .booking-notice br {
    display:none;
  }
  .footer {
    padding:32px 0 27px;
  }
  .footer-main {
    gap:18px;
    flex-wrap:wrap;
  }
  .footer-brand .brand-word {
    font-size:22px;
  }
  .footer-brand .brand-school {
    font-size:14px;
  }
  .back-top {
    font-size:14px;
    gap:9px;
  }
  .footer-bottom {
    font-size:14px;
    line-height:1.9;
    padding-top:20px;
    gap:10px;
  }
  .dialog-inner {
    padding:35px 23px 27px;
  }
  .dialog-inner h2 {
    font-size:25px;
    padding-right:7px;
  }
  .dialog-inner .eyebrow {
    padding-right:25px;
  }
  .dialog-close {
    top:11px;
    right:11px;
  }
  .radio-option {
    padding:12px;
  }
  .dialog-notice {
    margin-top:13px;
  }
  dialog {
    width:calc(100% - 24px);
    max-height:calc(100dvh - 28px);
    border-radius:22px;
  }
  .complete-message {
    font-size:19px;
  }
}
@media(max-width:374px) {
  .container {
    width:calc(100% - 32px);
  }
  .header-inner {
    width:calc(100% - 24px);
    gap:6px;
  }
  .brand-word {
    font-size:22px;
  }
  .brand {
    gap:7px;
  }
  .header-cta {
    gap:7px;
    padding:8px 11px;
  }
  .hero h1 {
    font-size:52px;
  }
  .hero-copy {
    padding-inline:16px;
  }
  .hero-description {
    font-size:17px;
  }
  .sample-note {
    padding:0;
  }
  h2 {
    font-size:31px;
  }
  .course-body {
    padding:25px 21px;
  }
  .course-body h3 {
    font-size:28px;
  }
  .course-art {
    height:270px;
  }
  .chat-answer {
    font-size:14px;
  }
  .art-ai .chat-answer {
    left:16px;
    padding:15px;
  }
  .chat-question {
    font-size:14px;
  }
  .mini-browser {
    left:17px;
    right:12px;
  }
  .mini-website strong {
    font-size:33px;
  }
  .editor-panel {
    padding:20px 17px;
  }
  .editor-note {
    display:none;
  }
  .code-sample {
    font-size:16px;
  }
  .color-controls {
    gap:7px;
  }
  .color-button {
    padding:8px 9px;
  }
  .preview-panel {
    padding:23px;
  }
  .preview-design strong {
    font-size:52px;
  }
  .preview-flower {
    font-size:96px;
  }
  .playground h2 {
    font-size:29px;
  }
  .playground-heading p {
    font-size:16px;
  }
  .campus-figure {
    margin-inline:-16px;
  }
  .campus-figure figcaption {
    margin-inline:16px;
  }
  .faq h2 {
    font-size:32px;
  }
  .timeline h3 {
    font-size:20px;
  }
  .dates-heading h2 {
    font-size:34px;
  }
  .date-card {
    padding:20px 18px 0;
    column-gap:10px;
  }
  .date-number {
    font-size:49px;
  }
  .date-day {
    margin-left:6px;
    font-size:14px;
  }
  .date-hours {
    font-size:14px;
  }
  .event-info>div {
    grid-template-columns:1fr;
    gap:0;
  }
  .back-top {
    margin-left:0;
  }
  .dialog-inner {
    padding:37px 18px 25px;
  }
  .dialog-inner h2 {
    font-size:23px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
  }
  .button:hover,.date-card:hover {
    transform:none;
  }
}
/* ヒーローの主役を最初の画面で見せ、会話見本の重なりを防ぐ。 */
@media(min-width:701px) {
  .hero {
    padding-top:43px;
  }
  .hero h1 {
    font-size:clamp(49px,5.5vw,78px);
  }
  .hero h1 br {
    display:none;
  }
  .hero-eyebrow {
    margin-bottom:20px;
  }
  .hero-description {
    font-size:18px;
    margin-top:20px;
  }
  .hero-description br {
    display:none;
  }
  .hero-actions {
    margin-top:21px;
  }
  .hero-visual {
    max-width:790px;
    margin-top:11px;
  }
}
.chat-question {
  top:95px;
}
.chat-answer {
  bottom:26px;
}
@media(min-width:701px) and (max-width:900px) {
  .art-ai .chat-question {
    top:116px;
  }
  .art-ai .chat-answer {
    bottom:18%;
  }
}
@media(max-width:700px) {
  .art-ai .chat-question {
    top:88px;
  }
  .art-ai .chat-answer {
    bottom:24px;
  }
}
@media(max-width:374px) {
  .art-ai .chat-question {
    top:78px;
  }
  .art-ai .chat-answer {
    bottom:24px;
  }
}
@media(max-width:700px) {
  .mobile-only {
    display:block;
  }
}

/* 体験の過程を作例で見せ、後半は写真を軸に構成する。 */
.section-note {
  margin-top:28px;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
}
.learning {
  background:var(--soft);
}
.learning-heading {
  text-align:center;
}
.learning-heading .section-intro {
  max-width:720px;
  margin:26px auto 0;
}
.learning-steps {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;
  list-style:none;
  padding:0;
  margin:52px 0 0;
}
.lesson-scene {
  position:relative;
  height:225px;
  overflow:hidden;
  isolation:isolate;
  border-radius:18px;
  background:linear-gradient(160deg,#fefefe,#e4e3ee);
  border:1px solid #dedde8;
  margin-bottom:25px;
}
.scene-tag {
  position:absolute;
  z-index:2;
  top:18px;
  left:20px;
  font-size:14px;
  color:#635c75;
}
.scene-grid {
  position:absolute;
  inset:42% -25% -30%;
  transform:perspective(180px) rotateX(32deg) rotateZ(-8deg);
  background-image:linear-gradient(#c5bfda66 1px,transparent 1px),linear-gradient(90deg,#c5bfda66 1px,transparent 1px);
  background-size:30px 30px;
  opacity:.6;
}
.scene-step {
  position:absolute;
  top:62%;
  height:23px;
  width:27%;
  border-radius:7px;
  background:linear-gradient(#d9d3e8 55%,#b9adc9 55%);
  box-shadow:0 12px 12px #6b5e7820;
  transform:skewY(-9deg);
}
.step-start {
  left:8%;
}
.step-middle {
  left:37%;
  top:56%;
  width:29%;
}
.step-end {
  left:65%;
  top:49%;
}
.scene-template .step-middle {
  opacity:0;
}
.scene-ball {
  position:absolute;
  width:30px;
  height:30px;
  left:19%;
  top:46%;
  border-radius:50%;
  background:radial-gradient(circle at 30% 25%,#ffe7cc,#df8764 65%,#ab5744);
  box-shadow:4px 8px 9px #7b483d25;
}
.scene-goal {
  position:absolute;
  width:22px;
  height:38px;
  top:29%;
  left:82%;
  border-left:2px solid #9b8eb8;
}
.scene-goal::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:20px;
  height:15px;
  background:#bca8e1;
  clip-path:polygon(0 0,100% 50%,0 100%);
}
.scene-editing .step-middle {
  background:linear-gradient(#a7e4d2 55%,#69ac98 55%);
  outline:2px dashed #448d78;
  outline-offset:5px;
}
.scene-cursor {
  display:none;
}
.scene-editing .scene-cursor {
  display:block;
  position:absolute;
  width:25px;
  height:33px;
  left:60%;
  top:65%;
  background:#4e4565;
  clip-path:polygon(0 0,100% 70%,59% 70%,43% 100%);
  transform:rotate(-14deg);
}
.scene-finished {
  background:linear-gradient(150deg,#f0eafd,#e4eef0);
}
.scene-finished .scene-step {
  background:linear-gradient(#c7b5f0 55%,#9984c9 55%);
}
.scene-finished .step-middle {
  background:linear-gradient(#b4e9d9 55%,#7fb5a5 55%);
}
.scene-finished .scene-ball {
  left:72%;
  top:33%;
}
.scene-finished .scene-goal::after {
  background:#8360c6;
}
.learning-time {
  display:flex;
  align-items:baseline;
  gap:8px;
  color:#68539b;
  margin-bottom:13px;
}
.learning-time strong {
  font-size:38px;
  font-weight:550;
  line-height:1;
  letter-spacing:-.05em;
}
.learning-time span {
  font-size:14px;
  letter-spacing:.07em;
}
.learning-steps h3 {
  font-size:24px;
  margin-bottom:14px;
}
.learning-steps p {
  color:var(--muted);
  font-size:16px;
  line-height:1.9;
}
.learning-output {
  display:block;
  font-size:14px;
  color:#655277;
  margin-top:18px;
}
.learning .section-note {
  text-align:center;
  margin-top:40px;
}
.pathways {
  background:#18191e;
  color:#f5f5f7;
}
.pathways .eyebrow {
  color:#b5a3e3;
}
.pathways .section-intro {
  color:#bebcc8;
}
.studio-figure img {
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center 48%;
  border-radius:var(--radius);
}
.studio-figure figcaption {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:15px;
  padding:21px 0 0;
}
.studio-figure figcaption strong {
  font-size:20px;
  font-weight:550;
}
.studio-figure figcaption span {
  font-size:14px;
  color:#b3b0c0;
}
.career-options {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:38px;
  margin-top:56px;
}
.career-options article {
  border-top:1px solid #494750;
  padding-top:23px;
}
.pathway-index {
  display:block;
  font-size:14px;
  letter-spacing:.08em;
  color:#b6a2e4;
  margin-bottom:13px;
}
.career-options h3 {
  font-size:25px;
  margin-bottom:15px;
}
.career-options p {
  font-size:16px;
  color:#bdbbc6;
  line-height:1.8;
  min-height:3.6em;
}
.career-fields {
  font-size:18px;
  font-weight:550;
  line-height:1.7;
  margin-top:25px;
}
.career-fields span {
  display:block;
  font-size:14px;
  font-weight:400;
  color:#bdbbc6;
  margin-top:5px;
}
.pathways .section-note {
  color:#aaa7b7;
  margin-top:37px;
}
.day {
  background:#fff;
}
.day-summary>p {
  color:var(--muted);
  font-size:17px;
  line-height:1.9;
}
.day-summary .day-pills {
  margin:18px 0 0;
}
.day-experience {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start;
}
.tour-figure {
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  min-height:720px;
  background:#e7e5df;
}
.tour-figure img {
  width:100%;
  height:720px;
  object-fit:cover;
  object-position:48% center;
}
.tour-figure figcaption {
  position:absolute;
  inset:auto 0 0;
  padding:90px 32px 28px;
  color:#fff;
  background:linear-gradient(transparent,#171a22e8);
}
.tour-figure figcaption span {
  font-size:14px;
  letter-spacing:.06em;
}
.tour-figure figcaption strong {
  display:block;
  font-size:25px;
  line-height:1.6;
  letter-spacing:-.03em;
  margin-top:12px;
}
.tour-figure figcaption small {
  display:block;
  font-size:14px;
  color:#dad8df;
  margin-top:18px;
}
.day-schedule {
  padding-top:9px;
}
.day .timeline li::after {
  box-shadow:0 0 0 5px #fff;
}
.day-schedule>.text-link {
  margin:28px 0 0 95px;
}
.parents {
  background:#f5f3ef;
}
.family-heading {
  text-align:center;
}
.family-heading>p:not(.eyebrow) {
  font-size:18px;
  line-height:1.9;
  color:var(--muted);
  margin-top:26px;
}
.family-photo {
  margin-top:45px;
}
.family-photo img {
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:center 35%;
  border-radius:var(--radius);
}
.family-photo figcaption {
  text-align:right;
  color:var(--muted);
  font-size:14px;
  margin-top:13px;
}
.family-topics {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px;
  margin:45px 0 0;
}
.family-topics dt {
  font-size:23px;
  font-weight:650;
  margin-bottom:14px;
}
.family-topics dt span {
  font-size:14px;
  color:#8b7464;
  vertical-align:middle;
  margin-right:8px;
}
.family-topics dd {
  font-size:16px;
  color:var(--muted);
  line-height:1.9;
  margin:0;
}
.family-action {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  border-top:1px solid #dcd6ce;
  padding-top:32px;
  margin-top:40px;
}
.family-action p {
  font-size:14px;
  color:var(--muted);
}
.family-action>div>span {
  font-size:16px;
  display:block;
  margin-top:4px;
}
.family-action .button {
  flex-shrink:0;
}
.parents-caption {
  font-size:14px;
  color:var(--muted);
  text-align:right;
  margin-top:12px;
}
.prepare {
  background:#202331;
  color:#f5f5f7;
}
.prepare .eyebrow {
  color:#bbb5df;
}
.prepare-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
}
.prepare-heading>p {
  font-size:17px;
  color:#c3c3d0;
  line-height:1.9;
}
.essentials-figure {
  max-width:1000px;
  margin:48px auto 0;
}
.essentials-labels {
  display:grid;
  grid-template-columns:1fr 1fr;
  text-align:center;
  gap:28px;
}
.essentials-labels>span {
  font-size:14px;
  letter-spacing:.1em;
  color:#b9b5cf;
}
.essentials-labels strong {
  display:block;
  font-size:23px;
  letter-spacing:-.025em;
  font-weight:550;
  color:#f5f5f7;
  margin-top:8px;
}
.essentials-figure img {
  width:100%;
  aspect-ratio:2/1;
  object-fit:cover;
  object-position:center 55%;
  border-radius:20px;
  margin-top:24px;
}
.essentials-figure figcaption {
  text-align:center;
  font-size:14px;
  color:#b9b5cc;
  margin-top:14px;
}
.preparation-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px;
  margin-top:48px;
}
.preparation-list>div {
  border-top:1px solid #515566;
  padding-top:24px;
}
.preparation-label {
  color:#b9b5cc;
  font-size:14px;
}
.preparation-list h3 {
  font-size:25px;
  margin:13px 0 17px;
}
.preparation-list p {
  color:#c3c3d0;
  font-size:16px;
  line-height:1.9;
}
.arrival-strip {
  display:flex;
  align-items:center;
  gap:28px;
  background:#2e3244;
  border-radius:18px;
  padding:25px 30px;
  margin-top:43px;
}
.arrival-strip>span {
  font-size:14px;
  color:#c3c3d0;
}
.arrival-strip strong {
  font-size:27px;
  font-weight:550;
  letter-spacing:-.03em;
  white-space:nowrap;
}
.arrival-strip p {
  font-size:16px;
  line-height:1.8;
  margin-left:auto;
  color:#d3d1e0;
}
.prepare-note {
  color:#b9b5cc;
  font-size:14px;
  margin-top:21px;
}
@media(max-width:1000px) {
  .day-experience {
    gap:36px;
  }
  .tour-figure,.tour-figure img {
    min-height:770px;
    height:770px;
  }
  .tour-figure figcaption {
    padding:100px 24px 24px;
  }
  .tour-figure figcaption strong {
    font-size:23px;
  }
  .career-options {
    gap:26px;
  }
  .career-options h3 {
    font-size:23px;
  }
  .family-topics {
    gap:25px;
  }
  .family-topics dt {
    font-size:21px;
  }
  .family-action {
    align-items:flex-start;
    flex-direction:column;
    gap:22px;
  }
  .parents-caption {
    text-align:left;
  }
}
@media(max-width:900px) {
  .learning-steps {
    gap:22px;
  }
  .learning-steps h3 {
    font-size:21px;
  }
  .lesson-scene {
    height:200px;
  }
  .scene-tag {
    left:14px;
  }
  .day-experience {
    grid-template-columns:1fr;
    gap:40px;
  }
  .tour-figure,.tour-figure img {
    min-height:0;
    height:530px;
  }
  .tour-figure img {
    object-position:center 18%;
  }
  .tour-figure figcaption {
    padding:100px 32px 28px;
  }
  .day-schedule {
    padding-top:0;
  }
  .day-schedule>.text-link {
    margin-top:24px;
  }
  .prepare-heading {
    display:block;
  }
  .prepare-heading>p {
    margin-top:22px;
  }
  .preparation-list {
    gap:25px;
  }
  .preparation-list h3 {
    font-size:22px;
  }
  .arrival-strip {
    flex-wrap:wrap;
    gap:10px 24px;
  }
  .arrival-strip p {
    width:100%;
    margin-left:0;
  }
}
@media(max-width:700px) {
  .learning-heading {
    text-align:left;
  }
  .learning-heading .section-intro {
    margin-top:22px;
  }
  .learning-steps {
    grid-template-columns:1fr;
    gap:38px;
    margin-top:32px;
  }
  .lesson-scene {
    height:220px;
    margin-bottom:21px;
  }
  .scene-tag {
    left:20px;
  }
  .learning-time {
    margin-bottom:12px;
  }
  .learning-time strong {
    font-size:34px;
  }
  .learning-steps h3 {
    font-size:25px;
  }
  .learning-output {
    margin-top:13px;
  }
  .learning .section-note {
    text-align:left;
    margin-top:28px;
  }
  .studio-figure img {
    aspect-ratio:3/2;
    border-radius:18px;
  }
  .studio-figure figcaption {
    display:block;
    padding-top:17px;
  }
  .studio-figure figcaption strong {
    font-size:17px;
  }
  .studio-figure figcaption span {
    display:block;
    margin-top:6px;
  }
  .career-options {
    grid-template-columns:1fr;
    gap:28px;
    margin-top:32px;
  }
  .career-options article {
    padding-top:23px;
  }
  .pathway-index {
    margin-bottom:10px;
  }
  .career-options h3 {
    font-size:25px;
    margin-bottom:12px;
  }
  .career-options p {
    min-height:0;
  }
  .career-fields {
    margin-top:17px;
  }
  .pathways .section-note {
    margin-top:28px;
  }
  .day-summary>p {
    font-size:16px;
  }
  .day-experience {
    gap:35px;
  }
  .tour-figure,.tour-figure img {
    height:auto;
    min-height:0;
  }
  .tour-figure img {
    aspect-ratio:4/5;
    object-position:center;
  }
  .tour-figure figcaption {
    padding:70px 23px 21px;
  }
  .tour-figure figcaption strong {
    font-size:23px;
    line-height:1.5;
    margin-top:7px;
  }
  .tour-figure figcaption small {
    margin-top:13px;
  }
  .day-schedule>.text-link {
    margin-left:82px;
  }
  .family-heading {
    text-align:left;
  }
  .family-heading>p:not(.eyebrow) {
    font-size:16px;
    margin-top:22px;
  }
  .family-heading>p br {
    display:none;
  }
  .family-photo {
    margin-top:30px;
  }
  .family-photo img {
    aspect-ratio:3/2;
    border-radius:18px;
  }
  .family-photo figcaption {
    text-align:left;
    font-size:14px;
  }
  .family-topics {
    grid-template-columns:1fr;
    gap:26px;
    margin-top:30px;
  }
  .family-topics dt {
    font-size:23px;
    margin-bottom:11px;
  }
  .family-action {
    margin-top:30px;
    padding-top:25px;
    gap:22px;
  }
  .family-action .button {
    width:100%;
  }
  .parents-caption {
    margin-top:14px;
  }
  .prepare-heading>p {
    font-size:16px;
  }
  .essentials-figure {
    margin-top:32px;
  }
  .essentials-labels {
    gap:12px;
  }
  .essentials-labels>span {
    font-size:14px;
    letter-spacing:.045em;
  }
  .essentials-labels strong {
    font-size:17px;
    margin-top:7px;
  }
  .essentials-figure img {
    aspect-ratio:3/2;
    margin-top:18px;
    border-radius:14px;
  }
  .essentials-figure figcaption {
    text-align:left;
    margin-top:13px;
  }
  .preparation-list {
    grid-template-columns:1fr;
    gap:24px;
    margin-top:32px;
  }
  .preparation-list>div {
    padding-top:21px;
  }
  .preparation-list h3 {
    font-size:25px;
    margin:9px 0 12px;
  }
  .arrival-strip {
    padding:22px;
    margin-top:32px;
    gap:9px;
  }
  .arrival-strip>span {
    width:100%;
  }
  .arrival-strip strong {
    font-size:29px;
  }
  .arrival-strip p {
    margin-top:8px;
  }
}