body { font-size: 17px; }
.scene { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-soft) transparent; }
.nav-item .nav-label { font-size: 14px; letter-spacing: 1px; }
.nav-item .nav-num { font-size: 12px; }
.scene-header { font-size: 15px; letter-spacing: 3px; }
.about-me-scene { gap: 28px; }
.about-profile-card { grid-template-columns: 200px minmax(0,1fr); gap: 44px; padding: 0 26px; margin: 18px 0 8px; }
.about-profile-info { padding: 0; }
.profile-photo-frame { width: 180px; max-width: 180px; border-radius: 26px; aspect-ratio: 3/4; box-shadow: 0 20px 70px #0002; }
.hero-eyebrow { font-size: 12px; letter-spacing: 3px; font-weight: 600; color: var(--accent); margin-bottom: 16px; }
.about-me-scene .home-name { font-size: clamp(42px,4.8vw,72px); line-height: 1.1; margin-bottom: 26px; }
.profile-details { font-size: 17px; line-height: 1.65; gap: 12px 30px; }
.profile-detail i { font-size: 16px; width: 20px; }
.about-section { position: relative; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 24px; padding: 28px 34px 32px; box-shadow: 0 16px 60px #00000008; }
.about-section::after { content: '“'; position: absolute; top: 10px; right: 24px; font: 100px/1 Georgia,serif; color: var(--accent); opacity: .1; pointer-events: none; }
.about-me-scene .about-text { font-size: 18px; line-height: 1.85; color: var(--text-secondary); }
.about-content { white-space: normal; }
.about-section .scene-header { margin-bottom: 18px; }
.cluster-title,.skill-cluster-title { font-size: 19px; }
.skill-pills>span { font-size: 14px; padding: 8px 12px; }
.project-summary { font-size: 17px; line-height: 1.8; white-space: pre-line; }
.project-tech span { font-size: 13px; }
.action-btn { font-size: 15px; }
.timeline-desc { font-size: 17px; line-height: 1.8; }
.timeline-company { font-size: 23px; }
.timeline-role,.timeline-time { font-size: 16px; }
.tl-title { font-size: 24px; }
.tl-sub,.tl-time { font-size: 16px; }
.tl-desc { font-size: 17px; line-height: 1.8; }
.lang-btn { font-size: 13px; }
.project-visual-label { font-size: 13px; }
.scene-footer { font-size: 14px; }
.edu-layout { width: 100%; margin: auto 0; }
.edu-layout>.edu-card { margin-bottom: 28px; }
.edu-title { font-size: 28px; }
.gpa-card { background: color-mix(in srgb,var(--accent) 5%,var(--bg-panel)); border-color: var(--border-soft); }
.gpa-value,.gpa-value.hl { background: none !important; color: var(--text-primary); }
.gpa-value.hl { color: var(--emerald); }
.gpa-label { font-size: 13px; }
.gpa-value small { font-size: 14px; }
.education-and-certificates { width: 100%; display: grid; gap: 30px; padding-bottom: 20px; }
.education-certificates { padding: 28px; border-radius: 22px; background: var(--surface); border: 1px solid var(--border-soft); }
.education-certificates h2 { display: flex; align-items: center; gap: 12px; font: 600 24px 'Space Grotesk',sans-serif; margin-bottom: 24px; }
.education-certificates h2 i { color: var(--accent); }
.education-certificates .cert-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.education-certificates .cert-item { font-size: 17px; padding: 20px; margin: 0; align-items: flex-start; }
.cert-meta { font-size: 14px; line-height: 1.7; }
.cert-empty { color: var(--text-muted); font-size: 16px; line-height: 1.7; }
.edu-school { font-size: 27px; }
.edu-major,.edu-time,.course-tags span { font-size: 16px; }
.cc-label { font-size: 13px; }
.cc-value { font-size: 17px; line-height: 1.65; white-space: pre-line; }
.contact-sub { font-size: 18px; }
@media(max-width:1000px) { .about-profile-card { grid-template-columns: 150px minmax(0,1fr); gap: 28px; } .profile-photo-frame { width: 140px; } }
@media(max-width:900px) { .scene { padding-top: 90px; } .about-profile-card { padding: 8px 0; } .about-section { padding: 24px; } .about-me-scene .about-text { font-size: 17px; } .profile-details { font-size: 16px; } .education-certificates .cert-list { grid-template-columns: 1fr; } .nav-item .nav-label { font-size: 12px; } }
@media(max-width:600px) { .about-profile-card { grid-template-columns: 1fr; gap: 24px; } .profile-photo-frame { width: 110px; aspect-ratio: 1; border-radius: 24px; } .profile-photo-frame span { display: none; } .profile-photo-frame i { font-size: 44px; } .hero-eyebrow { font-size: 10px; letter-spacing: 2px; } .about-me-scene .home-name { font-size: 40px; letter-spacing: -1.5px; } .profile-details { grid-template-columns: minmax(0,1fr); gap: 10px; } .about-section { padding: 23px; border-radius: 20px; } .about-me-scene .about-text { font-size: 17px; line-height: 1.8; } .education-certificates { padding: 20px; } .education-certificates h2 { font-size: 21px; } .edu-school { font-size: 23px; } }

/* Education and certificates share the row; GPA stays available in the editor. */
body:not(.visual-editor) .edu-layout .gpa-grid{display:none}
.education-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start;width:100%}
.education-records{display:grid;gap:22px;min-width:0}
.education-columns .edu-card{margin:0;padding:28px;min-width:0}
.education-columns .education-certificates{min-width:0}
.education-columns .cert-list{grid-template-columns:minmax(0,1fr)}
.education-columns .cert-item,.education-columns .edu-time{overflow-wrap:anywhere}
@media(max-width:900px){.education-columns{grid-template-columns:minmax(0,1fr);gap:24px}}

/* The left column scrolls independently; the graduation panel stays in place. */
.scene.education-scene{overflow:hidden}
.education-scene .edu-layout{display:flex;flex-direction:column;height:100%;max-height:540px;min-height:0;max-width:none;margin:auto 0}
.education-stage{grid-template-columns:minmax(0,2.2fr) minmax(220px,1fr);align-items:stretch;flex:1;min-height:0;gap:26px}
.education-content{min-height:0;min-width:0;overflow-y:auto;overflow-x:hidden;padding:0 12px 24px 0;scrollbar-width:thin;scrollbar-color:var(--border-soft) transparent}
.education-content:focus-visible{outline:1px solid var(--accent);outline-offset:4px;border-radius:12px}
.education-content .education-records{margin-bottom:24px}
.education-content .education-certificates{min-height:200px}
.education-content .cert-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.education-animation{position:relative;min-width:0;display:grid;place-items:center;overflow:hidden;align-self:stretch}
.graduation-player{width:100%;aspect-ratio:1;max-height:100%;pointer-events:none}
.graduation-player svg{display:block;width:100%;height:100%}
.graduation-status{position:absolute;color:var(--text-muted);font:9px monospace;letter-spacing:1px}
.education-animation.is-ready .graduation-status{display:none}
@media(max-width:1100px){.education-stage{grid-template-columns:minmax(0,1.8fr) minmax(160px,1fr);gap:16px}.education-content .cert-list{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.education-scene .edu-layout{max-height:none}.education-stage{grid-template-columns:minmax(0,1fr) 100px;gap:8px}.education-content{padding-right:6px}.education-content .edu-card,.education-content .education-certificates{padding:16px}.education-content .edu-title{font-size:19px}.education-content .edu-major,.education-content .edu-time{font-size:12px}.education-content .course-tags span{font-size:11px}.education-content .education-certificates h2{font-size:17px}.education-content .cert-empty{font-size:13px}.education-content .edu-head{gap:12px}.education-scene .scene-header{font-size:11px;letter-spacing:1.5px}}
/* Keep the two content panels readable within the independent scroll area. */
.education-scene .edu-layout{max-height:500px}
.education-content .edu-card{min-height:260px}
@media(max-width:600px){.education-scene .edu-layout{max-height:none}}

/* Contact: original Onboarding animation on the left, contact links as a list on the right. */
.scene.contact-scene{justify-content:flex-start}
.contact-scene .contact-layout{max-width:1120px;margin:auto}
.contact-scene .contact-headline{font-size:clamp(30px,3.4vw,48px);line-height:1.15;letter-spacing:-1.5px;margin-bottom:18px}
.contact-scene .contact-sub{max-width:820px;font-size:16px;margin-bottom:26px}
.contact-columns{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;align-items:center;text-align:left}
.contact-animation{min-height:300px}
.contact-player{aspect-ratio:450/380;max-width:450px}
.contact-list{list-style:none;display:grid;gap:10px;min-width:0;margin:0;padding:0}
.contact-list li{min-width:0}
.contact-list .contact-card{width:100%;padding:12px 18px;gap:16px;border-radius:14px}
.contact-list .contact-card:hover{transform:translateX(4px)}
.contact-list .contact-card>div:last-child{min-width:0}
.contact-list .cc-label{font-size:10px;margin-bottom:3px}
.contact-list .cc-value{font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.contact-scene .contact-cta{margin-top:26px}
.contact-scene .scene-footer{position:static;transform:none;margin:30px auto 0;white-space:normal;text-transform:none;letter-spacing:.4px;line-height:1.7}
@media(max-width:900px){.contact-columns{gap:24px}.contact-list .contact-card{padding:12px}.contact-list .cc-value{font-size:14px}}
@media(max-width:600px){.contact-columns{grid-template-columns:minmax(0,1fr);gap:18px}.contact-animation{min-height:0;height:200px}.contact-player{width:240px;max-height:200px}.contact-scene .contact-headline{font-size:30px}.contact-scene .contact-sub{font-size:15px;margin-bottom:12px}.contact-list .contact-card{padding:13px 16px}.contact-scene .scene-footer{font-size:10px;margin-top:24px}.contact-scene .contact-cta{font-size:13px;padding:14px 25px}}