:root { --blue: #2878ed; --deep: #1c4596; --purple: #7654d8; --yellow: #ffd65a; --ink: #20284a; --muted: #63708d; --bg: #f4f7ff; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Hiragino Kaku Gothic ProN', 'BIZ UDPGothic', 'Yu Gothic UI', 'Meiryo', sans-serif; }
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 10px clamp(18px, 5vw, 70px); background: #fff; box-shadow: 0 2px 12px rgba(40, 64, 124, .08); }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }.logo-mark { width: 48px; height: 48px; }.brand-text { display: flex; flex-direction: column; }.brand-org { color: #5c6580; font-size: 12px; font-weight: 700; letter-spacing: .05em; }.logo { color: var(--blue); font-size: 27px; font-weight: 800; letter-spacing: .8px; line-height: 1; }.base-link { color: #596783; font-size: 13px; font-weight: 700; text-decoration: none; }.base-link:hover { color: var(--blue); }
.hero { position: relative; display: flex; align-items: center; justify-content: space-between; max-width: 1140px; min-height: 360px; margin: 32px auto 0; padding: 48px clamp(28px, 7vw, 82px); overflow: hidden; border-radius: 28px; background: linear-gradient(130deg, #2c82f5 0%, #5b69df 53%, #8357d9 100%); color: #fff; box-shadow: 0 18px 34px rgba(60, 74, 175, .24); }.hero::after { position: absolute; right: -70px; bottom: -115px; width: 390px; height: 390px; border: 38px solid rgba(255,255,255,.1); border-radius: 50%; content: ''; }.hero-copy { position: relative; z-index: 1; }.eyebrow { margin: 0 0 8px; font-size: 14px; font-weight: 800; letter-spacing: .08em; }.hero h1 { margin: 0; font-size: clamp(38px, 5vw, 64px); letter-spacing: .03em; line-height: 1.17; }.hero h1 em { color: var(--yellow); font-style: normal; }.hero-text { margin: 16px 0 18px; font-size: 16px; font-weight: 600; line-height: 1.75; }.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; }.hero-badges span { border: 1px solid rgba(255,255,255,.5); border-radius: 99px; background: rgba(255,255,255,.14); padding: 6px 10px; font-size: 12px; font-weight: 700; }.hero-characters { position: relative; z-index: 1; width: 280px; height: 250px; flex: 0 0 280px; }.mascot { position: absolute; display: grid; width: 120px; height: 120px; place-items: center; border: 7px solid #fff; border-radius: 28px; box-shadow: 0 10px 0 rgba(23, 42, 116, .18); font-family: Consolas, monospace; font-size: 31px; font-weight: 800; transform: rotate(-8deg); }.mascot-code { top: 48px; left: 5px; background: #70e2b2; color: #184c61; }.mascot-terminal { right: 5px; bottom: 27px; background: #20283d; color: #ffe26d; transform: rotate(8deg); }.spark { position: absolute; color: var(--yellow); font-size: 27px; }.spark-a { top: 18px; left: 132px; }.spark-b { right: 25px; top: 67px; color: #fff; font-size: 19px; }.hero-star { position: absolute; color: rgba(255,255,255,.55); }.star-one { top: 23px; right: 37%; font-size: 27px; }.star-two { bottom: 22px; left: 43%; font-size: 17px; }.hero-orbit { position: absolute; top: 27px; right: 9%; color: rgba(255,255,255,.4); font-size: 12px; }
.labs, .coming, .steps { max-width: 1140px; margin: 56px auto; padding: 0 10px; }.section-heading { margin-bottom: 18px; text-align: center; }.section-heading p { margin: 0 0 3px; color: var(--purple); font-size: 13px; font-weight: 800; }.section-heading h2, .steps h2 { margin: 0; font-size: 28px; }.lab-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }.lab-card { position: relative; display: flex; min-height: 235px; flex-direction: column; padding: 27px; overflow: hidden; border-radius: 22px; color: #fff; text-decoration: none; transition: transform .18s, box-shadow .18s; }.lab-card:hover { box-shadow: 0 12px 25px rgba(45, 73, 150, .2); transform: translateY(-5px); }.python-card { background: linear-gradient(135deg, #1794ed, #3474e9); }.linux-card { background: linear-gradient(135deg, #2a354f, #4d3d7f); }.card-icon { width: 54px; height: 54px; border-radius: 16px; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 30px; }.card-copy { position: relative; z-index: 1; }.card-label { display: block; margin-top: 14px; font-size: 13px; font-weight: 700; opacity: .9; }.card-copy h3 { margin: 3px 0 8px; font-size: 27px; }.card-copy p { max-width: 340px; margin: 0; font-size: 14px; line-height: 1.65; }.card-go { position: absolute; right: 26px; bottom: 22px; border-radius: 99px; background: #fff; color: var(--deep); padding: 8px 13px; font-size: 13px; font-weight: 800; }.linux-card .card-go { color: #463474; }
.coming { padding-top: 5px; }.coming-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.coming article { position: relative; min-height: 165px; padding: 22px; border: 1px solid #dce4f3; border-radius: 18px; background: #fff; }.coming article > span { font-size: 30px; }.coming h3 { margin: 9px 0 3px; font-size: 17px; }.coming p { margin: 0; color: var(--muted); font-size: 13px; }.coming small { position: absolute; right: 15px; bottom: 14px; color: var(--purple); font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.steps { padding: 32px 34px; border-radius: 22px; background: #e9efff; text-align: center; }.steps ol { display: flex; justify-content: center; gap: 42px; margin: 25px 0 0; padding: 0; list-style: none; }.steps li { display: flex; align-items: center; gap: 12px; text-align: left; }.steps li > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; }.steps b { font-size: 16px; }.steps p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }.site-footer { padding: 20px; color: #778; font-size: 12px; text-align: center; }.site-footer a { color: inherit; text-decoration: none; }.site-footer a:hover { color: var(--blue); text-decoration: underline; }
@media (max-width: 800px) { .site-header { padding: 9px 15px; }.base-link { display: none; }.hero { min-height: 0; margin: 16px 12px 0; padding: 36px 28px 46px; }.hero-characters { display: none; }.hero h1 { font-size: 42px; }.hero-text { font-size: 14px; }.labs, .coming, .steps { margin: 38px 12px; padding: 0; }.lab-grid, .coming-grid { grid-template-columns: 1fr; }.lab-card { min-height: 215px; }.steps { padding: 27px 18px; }.steps h2 { font-size: 23px; }.steps ol { align-items: flex-start; flex-direction: column; gap: 16px; margin-left: 15%; }.section-heading h2 { font-size: 24px; } }