@charset "UTF-8";

/* 下層ページの共通構成と、用途ごとのレイアウト。 */
.subpage { --accent: #075dcc; --tint: #edf3fd; }
.theme-game { --accent: #6850bc; --tint: #f2effa; }
.theme-design { --accent: #316b53; --tint: #eef5f0; }
.subpage select { font: inherit; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; font-size: 14px; line-height: 1.7; padding-block: 17px; color: var(--muted); }
.breadcrumb a:hover { color: var(--blue); text-decoration: underline; }
.breadcrumb > span[aria-hidden] { color: #a0a4ab; }
.page-hero { padding-block: 58px 70px; }
.page-hero h1, .course-hero h1 { font-size: clamp(42px, 5.1vw, 70px); line-height: 1.23; letter-spacing: -.065em; }
.page-hero h1 > span { color: var(--accent); }
.page-lead { font-size: 20px; line-height: 1.9; color: #5f6570; margin-top: 27px; }
.reading-width { max-width: 750px; }
.section-intro { color: var(--muted); margin-top: 23px; font-size: 18px; line-height: 1.9; }
.hero-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.centered-hero { text-align: center; background: var(--paper); }
.centered-hero .page-lead { margin-inline: auto; }
.centered-hero .button { margin-top: 28px; }
.soft-section { background: var(--paper); }
.dark-section { background: #111216; color: #f5f5f7; }
.dark-section .eyebrow, .dark-section p { color: #aab3c4; }
.editorial-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 90px; }
.large-copy { font-size: 20px; color: #5b616d; }
.large-copy p + p { margin-top: 25px; }
.inline-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 23px; margin-top: 28px; }
.next-step { text-align: center; background: #edf3fd; }
.next-step h2 { margin-bottom: 21px; }
.next-step p:not(.eyebrow) { color: #5e6b82; }
.next-step .section-note { margin-top: 30px; }
.spaced-link { margin-top: 28px; }
.wide-photo { margin-top: 52px; }
.wide-photo img { width: 100%; aspect-ratio: 2.25; object-fit: cover; border-radius: 24px; }
.wide-photo figcaption, .campus-story figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; }
.outline-word { font-size: clamp(30px, 4.8vw, 65px); line-height: 1.02; font-weight: 700; letter-spacing: -.05em; color: #8996b0; }
.about-hero { padding-bottom: 0; }
.method-layout { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 80px; margin-top: 55px; }
.method-orbit { height: 330px; max-width: 380px; position: relative; border: 1px solid #555d7b; border-radius: 50%; margin: 20px; }
.method-orbit span { position: absolute; display: grid; place-items: center; padding: 19px 25px; border: 1px solid #727aaa; border-radius: 14px; font-size: 22px; font-weight: 600; background: #202333; color: #c2ccff; }
.method-orbit span:nth-child(1) { top: -24px; left: 34%; }
.method-orbit span:nth-child(2) { bottom: 35px; right: -23px; }
.method-orbit span:nth-child(3) { bottom: 35px; left: -23px; }
.method-orbit b { position: absolute; inset: 30px; display: grid; place-items: center; color: #859aff; font-size: 126px; font-weight: 400; }
.numbered-list { list-style: none; padding: 0; margin: 0; }
.numbered-list li { display: grid; grid-template-columns: 34px 1fr; gap: 24px; padding-block: 25px; border-top: 1px solid var(--line); }
.numbered-list li > span { font-size: 14px; color: var(--accent); padding-top: 3px; }
.numbered-list h3 { font-size: 23px; margin-bottom: 12px; }
.numbered-list p { color: var(--muted); }
.dark-section .numbered-list li { border-color: #41434b; }
.dark-section .numbered-list li > span { color: #9aafff; }
.dark-section .numbered-list p { color: #aab3c4; }
.collaboration-map { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: center; background: var(--paper); padding: 45px 25px; border-radius: 24px; text-align: center; }
.map-symbol { display: inline-block; color: var(--blue); font-size: 50px; font-weight: 500; margin-bottom: 13px; }
.collaboration-map > div:nth-of-type(2) .map-symbol { color: #7660b5; }
.collaboration-map > div:nth-of-type(3) .map-symbol { color: #377853; }
.collaboration-map h3 { font-size: 21px; margin-bottom: 8px; }
.collaboration-map p, .map-plus { color: #656c7a; }
.map-plus { font-size: 24px; }
.center-copy { text-align: center; max-width: 800px; margin: 35px auto 0; font-size: 18px; color: #656c7a; }
.centered-link { display: flex; justify-content: center; width: fit-content; margin: 25px auto 0; }
.support-list article { padding-block: 25px; border-top: 1px solid var(--line); }
.support-list article:first-child { padding-top: 0; border-top: 0; }
.support-list h3 { font-size: 23px; margin-bottom: 13px; }
.support-list p { color: var(--muted); }
.field-orbits { display: flex; gap: 22px; justify-content: center; margin: 48px 0 0; }
.field-orbits span { width: 94px; height: 94px; border-radius: 27px; display: grid; place-items: center; color: #2462b3; background: #e0eafd; box-shadow: 0 12px 18px #254e9120; font-size: 40px; transform: rotate(-8deg); }
.field-orbits span:nth-child(2) { color: #7964b9; background: #eae5f6; transform: translateY(12px) rotate(5deg); }
.field-orbits span:nth-child(3) { color: #40785b; background: #e0ece3; transform: rotate(9deg); }
.catalog-grid .course-copy > p:last-child { min-height: 58px; }
.catalog-grid .course-bottom > a { padding-block: 10px; }
.table-scroll { max-width: 100%; overflow-x: auto; margin-top: 38px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.comparison-table { border-collapse: collapse; width: 100%; min-width: 760px; text-align: left; }
.comparison-table caption { text-align: left; padding: 20px 25px; font-size: 16px; font-weight: 600; }
.comparison-table th, .comparison-table td { padding: 23px 25px; border-top: 1px solid #e2e5eb; font-size: 16px; vertical-align: top; }
.comparison-table thead { background: #eaf0fb; }
.comparison-table tbody th { width: 21%; }
.comparison-table td { color: #5d6470; }
.comparison-table a { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.foundation-list { margin-top: 40px; }
.foundation-list article { display: grid; grid-template-columns: 60px 1fr 1.6fr; gap: 20px; border-top: 1px solid var(--line); padding-block: 26px; align-items: baseline; }
.foundation-list article > span { color: var(--blue); font-size: 14px; }
.foundation-list h3 { font-size: 24px; }
.foundation-list p { color: var(--muted); }
.faq-list details { padding-block: 9px 19px; }
.faq-list summary { padding-bottom: 0; font-size: 18px; font-weight: 600; line-height: 1.7; }
.faq-list details > p { padding: 20px 0 3px; color: #5d6470; }
.faq-list p a { color: var(--blue); text-decoration: underline; }
.course-hero { padding: 42px 0 48px; background: var(--tint); }
.course-hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 50px; align-items: center; }
.course-name { font-size: 18px; font-weight: 600; color: var(--accent); margin: 10px 0 20px; }
.course-hero h1 { font-size: clamp(40px, 4.45vw, 61px); line-height: 1.3; }
.course-hero .page-lead { font-size: 18px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 9px; margin: 25px 0; }
.tag-list span { font-size: 14px; background: #ffffffb8; color: #5b6371; padding: 5px 13px; border-radius: 30px; }
.course-hero-art { border-radius: 30px; overflow: hidden; background: #ffffff73; }
.course-hero-art .course-art { height: 430px; margin-top: 0; }
.course-hero-art .code-window { width: 92%; transform: perspective(800px) rotateY(-10deg) rotateZ(-4deg); }
.course-hero-art .code-orb { right: 34px; bottom: 35px; width: 90px; height: 90px; font-size: 34px; line-height: 90px; border-radius: 25px; }
.course-hero-art .game-sphere { width: 200px; height: 200px; left: calc(50% - 100px); top: 105px; }
.course-hero-art .orbital { width: 320px; height: 190px; top: 106px; left: calc(50% - 160px); }
.course-hero-art .orbital-two { width: 295px; height: 175px; left: calc(50% - 147px); }
.course-hero-art .spark-one { top: 60px; right: 45px; }
.course-hero-art .spark-two { bottom: 75px; }
.course-hero-art .game-floor { bottom: 68px; }
.course-hero-art .design-board { top: 98px; transform: rotate(-7deg) scale(1.36); }
.course-hero-art .color-swatches { left: 35px; bottom: 50px; transform: rotate(6deg) scale(1.2); }
.course-hero-art .design-cursor { right: 40px; bottom: 60px; font-size: 67px; }
.subject-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 45px 70px; }
.subject-grid article { padding: 0 0 12px; }
.subject-number { color: var(--accent); font-size: 14px; }
.subject-grid h3 { font-size: 28px; margin: 16px 0 18px; }
.subject-grid p { color: var(--muted); line-height: 1.9; }
.phase-list { margin: 40px 0 0; padding: 0; list-style: none; }
.phase-list li { background: white; border-radius: 18px; margin-bottom: 16px; padding-inline: 28px; display: grid; grid-template-columns: 85px 1.5fr 1fr; align-items: start; gap: 35px; padding-block: 29px; border: 1px solid #e5e9f1; }
.phase-number { font-size: 40px; line-height: 1.4; font-weight: 600; color: #9aa9c1; letter-spacing: -.04em; }
.phase-list h3 { font-size: 24px; margin-bottom: 13px; }
.phase-list p { color: var(--muted); }
.phase-project { border-left: 1px solid var(--line); padding-left: 25px; }
.phase-project > span { font-size: 14px; color: var(--accent); }
.phase-project > p { margin-top: 9px; }
.course-demo-section { border-bottom: 1px solid #e8e9ec; }
.mini-demo { display: grid; grid-template-columns: 1fr 1fr; border-radius: 25px; margin-top: 40px; overflow: hidden; }
.demo-editor { padding: 40px; background: #142030; color: #f0f6ff; }
.demo-editor label { display: block; font-weight: 600; margin-bottom: 14px; }
.demo-editor input { width: 100%; background: #293b50; border: 1px solid #8092ad; border-radius: 9px; color: white; padding: 13px; }
.help-text { color: #666e7c; font-size: 14px; margin-top: 12px; line-height: 1.8; }
.demo-editor .help-text { color: #b0c1d6; }
.sample-code { font-family: monospace; color: #d0e4ff; font-size: 20px; margin: 30px 0; }
.sample-code span { color: #90c5ff; }
.demo-output { display: flex; flex-direction: column; justify-content: center; padding: 40px; background: #edf3fd; }
.demo-output output { display: block; font-size: 40px; color: #1954a4; line-height: 1.4; font-weight: 650; overflow-wrap: anywhere; }
.demo-output > p { color: #697b93; margin-top: 23px; }
.material-playground { background: #f2effa; }
.material-stage { position: relative; height: 390px; display: grid; place-items: center; background: #eae5f5; --material-hue: 255; --light: 1; }
.material-sphere { width: 210px; height: 210px; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #faf6ff 0%, hsl(var(--material-hue) 70% 70%) 15%, hsl(var(--material-hue) 62% 43%) 49%, hsl(var(--material-hue) 50% 12%) 89%); box-shadow: inset -10px -10px 25px #0004; filter: brightness(var(--light)); }
.material-shadow { position: absolute; left: 27%; right: 27%; bottom: 65px; background: #534c7538; height: 17px; filter: blur(13px); border-radius: 50%; }
.material-controls { padding: 45px 35px; align-self: center; }
.choice-row { display: flex; flex-wrap: wrap; gap: 14px 20px; }
.choice-row label { font-size: 16px; display: flex; align-items: center; gap: 5px; cursor: pointer; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--accent); width: 18px; height: 18px; flex-shrink: 0; }
.range-label { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; margin-top: 28px; }
input[type="range"] { width: 100%; margin: 20px 0 5px; accent-color: var(--accent); }
.material-status { font-size: 14px; margin-top: 20px; color: #645779; }
.palette-playground { background: #f5f5f7; align-items: stretch; padding: 38px; gap: 40px; }
.palette-controls { align-self: center; }
.palette-controls h3 { font-size: 24px; }
.palette-buttons { display: flex; flex-direction: column; gap: 10px; margin-block: 22px; }
.palette-buttons button { text-align: left; background: white; border: 1px solid #d5d9dd; border-radius: 10px; padding: 13px 16px; color: #4d5763; font-size: 16px; }
.palette-buttons button[aria-pressed="true"] { border-color: var(--accent); background: #e7f0ea; color: #285d44; }
.palette-preview { --preview-bg: #edf2e8; --preview-ink: #274c3c; --preview-flower: #b3793b; background: var(--preview-bg); color: var(--preview-ink); border-radius: 14px; padding: 28px; position: relative; overflow: hidden; min-height: 345px; box-shadow: 0 15px 30px #2c4d3620; }
.palette-preview[data-palette="ocean"] { --preview-bg: #e7f0fa; --preview-ink: #224776; --preview-flower: #5376ae; }
.palette-preview[data-palette="clay"] { --preview-bg: #f8e9df; --preview-ink: #783c2e; --preview-flower: #ba7250; }
.preview-brand { font-size: 24px; font-weight: 700; }
.preview-flower { position: absolute; right: 25px; top: 10px; color: var(--preview-flower); font-size: 86px; line-height: 1.3; }
.palette-preview h3 { font-size: 35px; margin-top: 42px; }
.palette-preview > p { margin-top: 20px; font-size: 16px; max-width: 280px; }
.preview-label { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; border-top: 1px solid currentColor; padding-top: 16px; margin-top: 27px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.callout, .demo-callout { background: #edf3fd; padding: 21px 25px; border-radius: 14px; font-size: 16px; line-height: 1.85; margin-top: 30px; color: #536780; }
.role-list { margin-top: 38px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.role-list article { border-top: 2px solid var(--accent); padding-top: 23px; }
.role-list h3 { font-size: 24px; margin-bottom: 17px; }
.role-list p { color: var(--muted); }
.course-end { text-align: center; background: var(--tint); }
.related-links { display: flex; justify-content: center; gap: 30px; margin-top: 55px; }
.related-links a { text-align: left; border-top: 1px solid #bac6d3; padding-top: 15px; color: #3c485d; font-size: 18px; flex: 1; max-width: 360px; }
.related-links span { display: block; font-size: 14px; letter-spacing: .06em; margin-bottom: 8px; color: #6a7485; }
.related-links b { margin-left: 12px; }
.project-page-hero { background: #edf0f5; }
.project-index > span { font-size: 80px; line-height: 1; color: #8392ae; font-weight: 600; letter-spacing: -.06em; }
.project-index > p { font-size: 14px; letter-spacing: .06em; margin-top: 15px; color: #677385; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.filter-bar button { border: 1px solid #dbdfe5; background: white; padding: 9px 21px; border-radius: 30px; color: #565f6d; font-size: 16px; }
.filter-bar button[aria-pressed="true"] { color: white; background: #242a35; border-color: #242a35; }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 30px; }
.work-card { border-radius: 24px; overflow: hidden; background: var(--paper); scroll-margin-top: 100px; }
.work-visual { height: 330px; position: relative; overflow: hidden; }
.work-copy { padding: 28px; }
.work-copy .eyebrow { margin-bottom: 12px; }
.work-copy h3 { font-size: 29px; margin-bottom: 12px; }
.work-copy p { color: #686f7a; }
.work-copy details { margin-top: 20px; }
.work-copy details > p { margin-top: 20px; }
.work-copy details > a { margin-top: 20px; }
.mellow-art { background: #e7eddf; color: #355341; padding: 32px; }
.mellow-art > span { font-size: 24px; font-weight: 700; }
.mellow-art > b { position: absolute; right: 35px; bottom: 15px; font-size: 175px; line-height: 1; font-weight: 400; color: #b77d41; }
.mellow-art > p { font-size: 48px; font-weight: 650; line-height: 1.1; letter-spacing: -.05em; margin-top: 36px; position: relative; }
.path-art { background: #192939; }
.path-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.path-grid { position: absolute; inset: 0; background-image: linear-gradient(#a7c5e015 1px,transparent 1px),linear-gradient(90deg,#a7c5e015 1px,transparent 1px); background-size: 35px 35px; }
.path-art > span { position: absolute; top: 25px; left: 25px; font-size: 20px; color: #c3dcf5; letter-spacing: .1em; }
.process-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; list-style: none; padding: 0; margin: 45px 0 0; }
.process-strip li { border-top: 1px solid #626b7c; padding-top: 25px; }
.process-strip span { font-size: 14px; color: #a4b8e4; }
.process-strip h3 { font-size: 23px; margin: 24px 0 17px; }
.campus-page-hero { padding-bottom: 0; }
.campus-page-hero .wide-photo { margin-inline: 24px; }
.campus-page-hero figcaption { padding-inline: 10px; }
.space-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 65px; }
.space-map { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: 11px; border: 1px solid #d3dce6; background: #f4f6f9; padding: 18px; border-radius: 24px; min-height: 390px; }
.space-map > div { border-radius: 13px; padding: 24px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.space-map strong { font-size: 25px; font-weight: 600; margin: 14px 0; letter-spacing: -.03em; }
.space-map span { font-size: 14px; }
.map-studio { grid-row: 1/3; background: #d8e4fa; color: #365889; }
.map-lab { background: #e4ddf2; color: #5e4a84; }
.map-commons { background: #e0eadf; color: #4d6f50; }
.day-timeline { list-style: none; padding: 0; margin: 0; }
.day-timeline li { display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding-bottom: 31px; position: relative; }
.day-timeline li::before { content: ''; width: 1px; background: #c6d1e2; position: absolute; left: 85px; top: 12px; bottom: 0; }
.day-timeline time { font-size: 22px; color: var(--blue); line-height: 1.3; }
.day-timeline div > span { font-size: 14px; color: #788295; }
.day-timeline h3 { font-size: 24px; margin: 9px 0 11px; }
.day-timeline p { color: var(--muted); }
.campus-story { display: grid; grid-template-columns: 1.2fr 1fr; gap: 70px; align-items: center; }
.campus-story img { width: 100%; aspect-ratio: 1.05; object-fit: cover; object-position: 65%; border-radius: 24px; }
.campus-story .page-lead { font-size: 18px; }
.campus-story .text-link { margin-top: 24px; }
.visit-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 40px; }
.visit-points article { border-top: 1px solid var(--line); padding-top: 24px; }
.visit-points span { font-size: 14px; color: var(--blue); }
.visit-points h3 { font-size: 25px; margin: 14px 0 17px; }
.visit-points p { color: var(--muted); }
.open-hero { background: #eef3ff; }
.open-symbol { font-size: clamp(54px, 8vw, 106px); font-weight: 700; line-height: 1.03; letter-spacing: -.055em; margin-top: 65px; color: #4075dd; }
.open-symbol > span { color: #979fee; }
.open-hero .section-note { margin-top: 38px; }
.program-list article { display: grid; grid-template-columns: 260px 1fr auto; gap: 35px; padding-block: 33px; border-top: 1px solid var(--line); align-items: center; }
.program-icon { width: 86px; height: 86px; display: grid; place-items: center; border-radius: 24px; font-size: 35px; }
.code-icon { background: #e3ecfb; color: #386ec4; }
.game-icon { background: #eee9f8; color: #7d63b6; }
.design-icon { background: #e3eee6; color: #417054; }
.program-list h3 { font-size: 25px; margin-bottom: 14px; }
.program-list p:not(.eyebrow) { max-width: 650px; color: var(--muted); }
.program-list .eyebrow { margin-bottom: 10px; }
.schedule-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 35px; list-style: none; padding: 0; margin: 40px 0 0; }
.schedule-strip li { border-top: 2px solid #8cabdd; padding-top: 23px; }
.schedule-strip span { font-size: 22px; color: #3769b9; }
.schedule-strip h3 { font-size: 24px; margin: 20px 0 14px; }
.schedule-strip p { color: var(--muted); }
.plan-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 70px; align-items: start; }
.plan-layout .demo-callout { max-width: 430px; }
.plan-form { background: var(--paper); border-radius: 24px; padding: 34px; }
.plan-form > label { display: block; font-weight: 600; margin-bottom: 12px; }
.plan-form label > span, .plan-form legend > span { font-size: 14px; font-weight: 400; color: #637086; margin-left: 6px; }
.plan-form select { width: 100%; background: white; border: 1px solid #a6b2c3; padding: 13px 35px 13px 13px; border-radius: 9px; color: #3e4a5e; font-size: 16px; }
.plan-form fieldset { margin-block: 25px; }
.plan-form legend { font-size: 16px; margin-bottom: 13px; }
.plan-form .button { width: 100%; margin-top: 5px; }
.plain-button { background: transparent; border: 0; color: var(--blue); text-decoration: underline; text-underline-offset: 4px; padding: 12px 0; font-size: 16px; }
.plan-result { border: 1px solid #bdcfe9; background: #edf4ff; border-radius: 24px; padding: 31px; margin-top: 24px; }
.plan-result h3 { font-size: 26px; }
.plan-result dl { margin: 24px 0; }
.plan-result dl > div { padding-block: 15px; border-top: 1px solid #c6d7ee; }
.plan-result dt { font-size: 14px; font-weight: 600; color: #5c708f; margin-bottom: 6px; }
.plan-result dd { margin: 0; font-size: 16px; color: #3c506e; }
.admissions-hero { background: var(--paper); }
.admissions-hero .demo-callout { max-width: 730px; background: #e7ecf5; }
.admissions-hero .text-link { margin-top: 27px; }
.admissions-steps .text-link { margin-top: 15px; }
.checklist-layout { display: grid; grid-template-columns: .9fr 1.2fr; gap: 75px; }
.preparation-list label { display: flex; gap: 17px; padding: 25px 0; border-top: 1px solid #d7dce4; cursor: pointer; }
.preparation-list input { margin-top: 7px; }
.preparation-list strong { font-size: 18px; font-weight: 600; }
.preparation-list label > span > span { display: block; color: var(--muted); margin-top: 9px; }
.preparation-list input:checked + span strong { color: #075dcc; }
.check-progress { margin-top: 30px; }
.check-progress output { display: block; color: var(--blue); font-size: 22px; margin-bottom: 16px; }
.check-progress progress { width: 210px; max-width: 100%; height: 9px; border: 0; border-radius: 10px; overflow: hidden; }
.check-progress progress::-webkit-progress-bar { background: #dfe6f2; }
.check-progress progress::-webkit-progress-value { background: #075dcc; }
.cost-table { margin-top: 38px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cost-table > div { display: grid; grid-template-columns: 65px 1fr; gap: 12px 22px; background: var(--paper); border-radius: 22px; padding: 28px; }
.cost-table h3 { font-size: 22px; }
.cost-table p { color: var(--muted); }

@media (max-width: 1050px) {
  .editorial-split, .plan-layout, .checklist-layout { gap: 40px; }
  .course-hero-grid { gap: 25px; }
  .course-hero h1 { font-size: 43px; }
  .course-hero-art .course-art { height: 400px; }
  .method-layout { gap: 38px; }
  .method-orbit { height: 280px; margin-inline: 25px; }
  .space-layout, .campus-story { gap: 35px; }
  .space-map { padding: 12px; }
  .space-map > div { padding: 16px; }
  .space-map strong { font-size: 22px; }
  .program-list article { grid-template-columns: 230px 1fr; gap: 25px; }
  .program-list .text-link { grid-column: 2; }
  .program-icon { width: 74px; height: 74px; }
  .process-strip { grid-template-columns: repeat(2,1fr); gap: 35px; }
  .palette-playground { padding: 25px; gap: 25px; }
  .palette-preview { padding: 23px; }
}
@media (max-width: 800px) {
  .page-hero { padding-top: 38px; }
  .page-hero h1 { font-size: 52px; }
  .page-lead, .large-copy { font-size: 18px; }
  .editorial-split, .plan-layout, .checklist-layout, .space-layout, .campus-story { grid-template-columns: 1fr; }
  .outline-word { font-size: 35px; }
  .course-hero-grid { grid-template-columns: 1fr 1fr; }
  .course-hero h1 { font-size: 37px; }
  .course-hero-art .course-art { height: 345px; }
  .course-hero-art .game-sphere { width: 170px; height: 170px; left: calc(50% - 85px); top: 86px; }
  .course-hero-art .orbital { width: 270px; height: 155px; left: calc(50% - 135px); top: 87px; }
  .course-hero-art .orbital-two { width: 250px; left: calc(50% - 125px); }
  .course-hero-art .design-board { top: 70px; transform: rotate(-7deg) scale(1.1); }
  .course-hero-art .color-swatches { left: 15px; bottom: 22px; }
  .course-hero-art .design-cursor { right: 16px; bottom: 35px; }
  .method-layout { grid-template-columns: minmax(0, 1fr); gap: 45px; }
  .method-orbit { width: calc(100% - 50px); height: 295px; justify-self: center; max-width: 330px; }
  .foundation-list article { grid-template-columns: 35px 1fr; gap: 13px 20px; }
  .foundation-list p { grid-column: 2; }
  .subject-grid { gap: 30px; }
  .phase-list li { grid-template-columns: 55px 1fr; gap: 18px; }
  .phase-project { grid-column: 2; border-left: 0; padding-left: 0; }
  .mini-demo { grid-template-columns: 1fr; }
  .demo-output { min-height: 240px; }
  .material-stage { height: 330px; }
  .palette-playground { padding: 32px; }
  .palette-preview { max-width: 480px; width: 100%; justify-self: center; }
  .role-list { gap: 20px; }
  .role-list h3 { font-size: 21px; }
  .collaboration-map { gap: 10px; padding: 33px 18px; }
  .collaboration-map h3 { font-size: 18px; }
  .project-index > span { font-size: 55px; }
  .work-visual { height: 290px; }
  .work-copy { padding: 23px; }
  .mellow-art { padding: 23px; }
  .mellow-art > p { font-size: 38px; }
  .mellow-art > b { font-size: 130px; right: 15px; bottom: 17px; }
  .space-map { min-height: 320px; }
  .space-map > div { padding: 25px; }
  .space-map strong { font-size: 30px; }
  .campus-story img { aspect-ratio: 1.65; }
  .schedule-strip { gap: 25px; }
  .visit-points { gap: 23px; }
  .plan-form { padding: 31px; }
}
@media (max-width: 620px) {
  .breadcrumb { padding-block: 15px; font-size: 14px; gap: 7px; }
  .page-hero { padding-block: 34px 48px; }
  .page-hero h1 { font-size: clamp(35px, 9.5vw, 49px); line-height: 1.35; }
  .page-lead { font-size: 17px; margin-top: 22px; }
  .page-lead br { display: none; }
  .hero-bottom { flex-direction: column; align-items: flex-start; gap: 30px; }
  .outline-word { display: none; }
  .section-intro { font-size: 16px; }
  .wide-photo { margin-top: 31px; }
  .wide-photo img { aspect-ratio: 1.22; border-radius: 18px; object-position: 61%; }
  .about-hero { padding-bottom: 0; }
  .editorial-split { gap: 28px; }
  .large-copy { font-size: 18px; }
  .method-layout { margin-top: 35px; }
  .method-orbit { height: 260px; }
  .method-orbit span { font-size: 18px; padding: 15px 19px; }
  .method-orbit span:nth-child(1) { left: 29%; }
  .numbered-list li { grid-template-columns: 24px 1fr; gap: 16px; }
  .numbered-list h3 { font-size: 21px; }
  .collaboration-map { grid-template-columns: 1fr; gap: 14px; }
  .collaboration-map > div { display: grid; grid-template-columns: 55px 1fr; text-align: left; column-gap: 20px; }
  .map-symbol { grid-row: 1/3; align-self: center; margin: 0; font-size: 39px; }
  .collaboration-map h3 { font-size: 20px; margin-bottom: 0; }
  .map-plus { font-size: 22px; }
  .center-copy { font-size: 16px; }
  .center-copy br { display: none; }
  .field-orbits { margin-top: 33px; gap: 16px; }
  .field-orbits span { width: 75px; height: 75px; font-size: 34px; border-radius: 21px; }
  .catalog-grid .course-copy > p:last-child { min-height: 0; }
  .foundation-list h3 { font-size: 23px; }
  .faq-list summary { font-size: 17px; }
  .course-hero { padding-top: 30px; }
  .course-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .course-hero h1 { font-size: clamp(34px, 9.4vw, 48px); }
  .course-hero .page-lead { font-size: 17px; }
  .course-name { font-size: 16px; margin-bottom: 15px; }
  .course-hero-art .course-art { height: 320px; }
  .course-hero-art .code-orb { width: 66px; height: 66px; line-height: 66px; font-size: 27px; bottom: 21px; }
  .course-hero-art .design-board { top: 58px; }
  .subject-grid { grid-template-columns: 1fr; gap: 29px; }
  .subject-grid h3 { font-size: 26px; margin: 11px 0 15px; }
  .phase-list { margin-top: 30px; }
  .phase-list li { grid-template-columns: 40px 1fr; gap: 16px; }
  .phase-number { font-size: 30px; }
  .phase-list h3 { font-size: 22px; }
  .mini-demo { margin-top: 29px; border-radius: 18px; }
  .demo-editor, .demo-output { padding: 25px; }
  .demo-output output { font-size: 31px; }
  .sample-code { font-size: 18px; }
  .material-controls { padding: 28px 24px; }
  .material-stage { height: 300px; }
  .material-sphere { width: 180px; height: 180px; }
  .material-shadow { bottom: 43px; }
  .choice-row { gap: 14px; }
  .palette-playground { padding: 23px; gap: 27px; }
  .palette-controls h3 { font-size: 22px; }
  .palette-buttons button { padding: 12px; font-size: 15px; }
  .palette-preview { padding: 23px; }
  .palette-preview h3 { font-size: 32px; }
  .preview-flower { font-size: 70px; right: 18px; top: 15px; }
  .role-list { grid-template-columns: 1fr; gap: 28px; }
  .role-list h3 { font-size: 23px; }
  .related-links { flex-direction: column; gap: 23px; margin-top: 38px; }
  .related-links a { width: 100%; max-width: none; font-size: 18px; }
  .inline-actions { flex-direction: column; gap: 20px; }
  .next-step h2 { font-size: 29px; }
  .project-index { display: none; }
  .filter-bar { gap: 8px; }
  .filter-bar button { padding: 9px 15px; font-size: 14px; }
  .work-grid { grid-template-columns: 1fr; gap: 25px; }
  .work-visual { height: 300px; }
  .mellow-art > p { font-size: 41px; }
  .process-strip { grid-template-columns: 1fr; margin-top: 35px; gap: 26px; }
  .process-strip h3 { margin-block: 15px; }
  .campus-page-hero { padding-bottom: 0; }
  .campus-page-hero .wide-photo { margin-inline: 12px; }
  .campus-page-hero .wide-photo img { aspect-ratio: 1.04; object-position: 55%; }
  .space-map { padding: 11px; min-height: 310px; grid-template-columns: 1fr 1fr; gap: 8px; }
  .space-map > div { padding: 15px 12px; }
  .space-map strong { font-size: 21px; }
  .space-map span { font-size: 14px; }
  .space-layout { gap: 28px; }
  .day-timeline li { grid-template-columns: 67px 1fr; gap: 20px; }
  .day-timeline li::before { left: 69px; }
  .day-timeline time { font-size: 20px; }
  .day-timeline h3 { font-size: 21px; }
  .campus-story img { aspect-ratio: 1.15; }
  .visit-points, .schedule-strip { grid-template-columns: 1fr; gap: 28px; }
  .visit-points h3, .schedule-strip h3 { font-size: 24px; }
  .open-symbol { font-size: 56px; margin-top: 40px; }
  .program-list article { grid-template-columns: 1fr; gap: 22px; }
  .program-list .text-link { grid-column: 1; }
  .program-icon { width: 65px; height: 65px; border-radius: 18px; font-size: 28px; }
  .program-list h3 { font-size: 24px; }
  .schedule-strip { gap: 32px; }
  .plan-layout { gap: 31px; }
  .plan-form, .plan-result { padding: 25px; border-radius: 19px; }
  .plan-form select { padding-left: 10px; font-size: 16px; }
  .plan-form .choice-row { flex-direction: column; align-items: flex-start; }
  .plan-form .button { font-size: 15px; padding-inline: 12px; }
  .callout, .demo-callout { font-size: 16px; padding: 20px; }
  .checklist-layout { gap: 31px; }
  .preparation-list label { gap: 13px; }
  .preparation-list strong { font-size: 17px; }
  .cost-table { grid-template-columns: 1fr; }
  .cost-table > div { grid-template-columns: 1fr; gap: 12px; padding: 25px; }
  .phase-list li { padding-inline: 20px; }
}
@media (max-width: 360px) {
  .page-hero h1 { font-size: 33px; }
  .course-hero h1 { font-size: 32px; }
  .space-map strong { font-size: 18px; }
  .space-map > div { padding-inline: 10px; }
  .palette-playground { padding: 18px; }
  .palette-preview { padding: 20px; }
  .plan-form, .plan-result { padding: 21px; }
  .next-step h2 { font-size: 27px; }
}