/* ちょっと学ぶプログラミング shared visual identity. Rail colors retain their learning meanings. */
:root{--bg:#edf2f7;--panel:#fbfdff;--code:#f0f4fa;--ink:#142953;--ink2:#4d6081;--ink3:#68758b;--line:#dce4ef;--type:#425d80;--type-soft:#e8f1fc;--sans:'Hiragino Kaku Gothic ProN','Hiragino Sans','Noto Sans JP',Meiryo,sans-serif}
body{font-family:var(--sans)}
#app>header{background:#fbfdff}
.bar span{background:#366fc4}
.pane,.snippet{border:1px solid #dce4ef}
.pane .file{border-bottom-color:#dce4ef}
.lesson-overview summary{color:#294e83}
a:focus-visible,button:focus-visible{outline:3px solid #2466ce;outline-offset:3px}
.ippo-home{display:inline-flex;align-items:center;gap:8px;color:#142953;font:bold 16px/1.5 var(--sans);text-decoration:none;margin-bottom:17px}
.ippo-home:before{content:'';width:8px;height:8px;border-radius:50%;background:#f4777b;box-shadow:10px -4px #4285f4,10px 6px #80d5c9;margin-right:11px}
.wrap>.top{background:var(--panel);padding:20px 22px 22px;border-bottom:1px solid var(--line)}
.wrap>.top h1{color:#142953;font-size:23px;letter-spacing:-.025em;border-left:5px solid var(--course-accent,#3178c6);padding-left:12px;line-height:1.45}
.wrap>.top p{color:#344764;font-size:14px;line-height:1.8;margin-top:10px}
.wrap>.top .ippo-home{margin-bottom:14px}
.course-notes{margin-bottom:18px;color:#344764;font-size:13px}
.course-notes summary{cursor:pointer;color:#344764}
.course-notes p{margin-top:8px;line-height:1.8}
.item{border:1px solid transparent}
.item:hover{background:var(--course-tint,#f0f4fa);border-color:#dce4ef}
.no{background:var(--course-tint,#f0f4fa);color:#294e83}
.sec h2{color:#294e83}

/* The header mark is the shared ちょっと学ぶプログラミング logo. */
.ippo-home:before{content:none}
.ippo-home .mark{width:25px;height:29px;position:relative;display:inline-block;flex-shrink:0}
.ippo-home .mark:before{content:"";position:absolute;left:6px;top:10px;width:16px;height:1px;background:#142953;transform:rotate(-35deg)}
.ippo-home .mark i{position:absolute;width:10px;height:10px;border-radius:50%;background:#fa767a;top:10px;left:0}
.ippo-home .mark i:nth-child(2){background:#4285f4;top:0;left:15px}
.ippo-home .mark i:nth-child(3){background:#7ad3c7;top:19px;left:16px}

/* Lesson links share the homepage Base / Think card treatment. */
.list .item{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid #cedbed;border-radius:8px;padding:14px 12px;margin-bottom:10px;color:#142953}
.list .item:hover{background:#f8fbff;border-color:#2466ce}
.list .item .no{background:transparent;color:#2466ce;border-radius:0;margin-top:0;font-weight:500}
.list .item .body .t{color:#142953;font-weight:700}
.list .item .body .s{color:#4d6081;margin-top:4px}
.list .item:after{content:'→';flex:0 0 auto;color:#2466ce;font-size:21px;line-height:1;margin-left:auto}
.list .item .meta{margin-top:0;font-family:var(--sans);font-size:11px}
.list .item .meta:empty{display:none}
.list .item.done .no,.list .item.done .meta{color:#1b6e52}

/* Supplied brand artwork; text alongside provides the accessible site name. */
.site-logo{display:block;width:48px;height:48px;object-fit:contain;flex:0 0 48px}

.ippo-home{max-width:100%;font-size:16px;line-height:1.6}