/* Shared styles for tutorial pages (Tutorial 1, 2, ...) */
:root { --red: #C71B00; --dark: #8C1515; --ink: #222; --mute: #666; --line: #e3e3e3; --soft: #fbf3f1; --soft2: #f6f6f6; }
body { color: var(--ink); }
a { color: #1f5fa8; }
code { color: #8C1515; background: #f7f2f1; }
/* hero */
.hero { background: linear-gradient(135deg, #3b3b3b 0%, #5a2a22 100%); color: #fff; padding: 34px 0 30px; margin-bottom: 0; }
.hero h1 { color: #fff; font-weight: 400; font-size: 34px; margin: 6px 0 8px; text-align: left; }
.hero .crumb { font-size: 14px; opacity: .85; }
.hero .crumb a { color: #ffd9d2; }
.hero p.lead { color: #f1f1f1; font-size: 17px; max-width: 820px; margin-bottom: 14px; }
.badge-row span { display: inline-block; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
	border-radius: 14px; padding: 3px 11px; margin: 3px 6px 3px 0; font-size: 13px; }
.hero .btn { margin: 10px 8px 0 0; }
.btn-colab { background: #f9ab00; border-color: #e09a00; color: #222; font-weight: 500; }
.btn-colab:hover, .btn-colab:focus { background: #e09a00; color: #222; }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }
.btn-ghost:hover { background: rgba(255,255,255,.15); color: #fff; }
/* layout */
.page { padding-top: 26px; }
.toc { position: sticky; top: 16px; font-size: 14px; border-left: 3px solid var(--line); padding-left: 12px; margin-top: 8px; }
.toc .toc-title { font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); font-size: 12px; margin-bottom: 6px; }
.toc a { display: block; color: #444; padding: 3px 0; text-decoration: none; }
.toc a.sub { padding-left: 12px; color: #777; font-size: 13px; }
.toc a.active { color: var(--red); font-weight: 500; }
section { padding-top: 6px; margin-bottom: 30px; }
h2.sec { font-size: 26px; font-weight: 400; border-bottom: 2px solid var(--red); padding-bottom: 6px; margin-top: 10px; }
h2.sec .num { color: var(--red); margin-right: 8px; }
h3 { font-size: 20px; font-weight: 400; margin-top: 26px; color: #333; }
h4 { font-size: 16px; font-weight: 500; margin-top: 18px; }
.muted { color: var(--mute); }
/* cards and callouts */
.card { border: 1px solid var(--line); border-radius: 8px; padding: 16px 20px; background: #fff; margin: 14px 0; }
.grid { display: flex; flex-wrap: wrap; gap: 14px; }
.grid > .card { flex: 1 1 260px; margin: 0; }
.grid > .card, .side > div, .col-md-9 { min-width: 0; }
.grid.two > .card { flex-basis: 380px; }
.card .kv > div { flex-basis: 90px; padding: 8px 10px; }
.card .kv b { font-size: 19px; }
p code, li code, td code { word-break: break-word; white-space: normal; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.card h4 { margin-top: 0; }
.callout { border-left: 4px solid var(--red); background: var(--soft); padding: 12px 16px; border-radius: 4px; margin: 14px 0; }
.callout.info { border-color: #1f5fa8; background: #f1f6fc; }
.callout.warn { border-color: #d48a00; background: #fff8ea; }
.callout b.t { display: block; margin-bottom: 3px; }
.checklist { list-style: none; padding-left: 0; }
.checklist li { padding: 4px 0 4px 28px; position: relative; }
.checklist li:before { content: "\2713"; color: var(--red); font-weight: 700; position: absolute; left: 4px; }
/* steps */
.steps { counter-reset: st; list-style: none; padding-left: 0; }
.steps > li { counter-increment: st; position: relative; padding: 4px 0 10px 42px; }
.steps > li:before { content: counter(st); position: absolute; left: 0; top: 2px; width: 28px; height: 28px; border-radius: 50%;
	background: var(--red); color: #fff; text-align: center; line-height: 28px; font-weight: 500; font-size: 14px; }
/* tables */
.tblwrap { width: 100%; overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; margin: 10px 0 6px; font-size: 15px; }
table.tbl th { background: var(--soft2); font-weight: 500; text-align: left; }
table.tbl th, table.tbl td { border-bottom: 1px solid var(--line); padding: 7px 10px; vertical-align: top; }
table.tbl td.num, table.tbl th.num { text-align: right; white-space: nowrap; }
/* code */
.code { background: #fafafa; border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; overflow-x: auto; font-size: 13.5px; margin: 10px 0; }
.code pre { margin: 0; background: none; border: 0; padding: 0; font-size: 13.5px; line-height: 1.5; }
.code .cap { font-size: 12px; color: var(--mute); margin-bottom: 4px; font-family: 'Roboto', sans-serif; }
.side { display: flex; gap: 14px; flex-wrap: wrap; }
.side > div { flex: 1 1 300px; min-width: 0; }
.out { background: #222; color: #e8e8e8; border-radius: 6px; padding: 8px 14px; font-family: Menlo, Consolas, monospace; font-size: 13px; white-space: pre; overflow-x: auto; margin: 8px 0; }
/* figures */
figure { margin: 14px 0; text-align: center; }
figure svg, figure img { max-width: 100%; height: auto; }
figure img { border: 1px solid #eee; border-radius: 4px; }
figcaption { font-size: 14px; color: var(--mute); margin-top: 4px; }
.eq { overflow-x: auto; padding: 4px 0; }
/* notebook cards */
.nbcard { border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: 8px; padding: 16px 20px; margin: 16px 0; background: #fff; }
.nbcard h3 { margin-top: 0; }
.tag { display: inline-block; background: #f2f2f2; border-radius: 3px; padding: 1px 7px; margin: 2px 3px 2px 0; font-size: 12.5px; color: #444; }
.btn-row .btn { margin: 4px 8px 4px 0; }
.toggle { background: var(--soft2); color: #333; cursor: pointer; padding: 10px 14px; width: 100%; border: 1px solid var(--line);
	text-align: left; font-size: 15px; margin-top: 10px; border-radius: 4px; font-weight: 500; }
.toggle:hover { background: #ececec; }
.panel-body2 { display: none; padding: 10px 2px 2px; }
.nb-frame { width: 100%; height: 760px; border: 1px solid var(--line); border-radius: 4px; }
/* quiz */
details.q { border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; margin: 8px 0; background: #fff; }
details.q summary { cursor: pointer; font-weight: 500; }
details.q[open] summary { color: var(--red); margin-bottom: 6px; }
.ex { border: 1px dashed #d9b8b1; border-radius: 6px; padding: 10px 14px; margin: 10px 0; background: #fffdfc; }
.ex .lvl { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--red); font-weight: 500; }
.footer2 { border-top: 1px solid var(--line); margin-top: 30px; padding: 16px 0 40px; color: var(--mute); font-size: 14px; }
@media (max-width: 991px) { .toc { display: none; } .hero h1 { font-size: 28px; } }
/* pygments */
pre { line-height: 125%; }
td.linenos .normal { color: #666666; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: #666666; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.hl .hll { background-color: #ffffcc }
.hl { background: #f0f0f0; }
.hl .c { color: #60a0b0; font-style: italic } /* Comment */
.hl .err { border: 1px solid #FF0000 } /* Error */
.hl .k { color: #007020; font-weight: bold } /* Keyword */
.hl .o { color: #666666 } /* Operator */
.hl .ch { color: #60a0b0; font-style: italic } /* Comment.Hashbang */
.hl .cm { color: #60a0b0; font-style: italic } /* Comment.Multiline */
.hl .cp { color: #007020 } /* Comment.Preproc */
.hl .cpf { color: #60a0b0; font-style: italic } /* Comment.PreprocFile */
.hl .c1 { color: #60a0b0; font-style: italic } /* Comment.Single */
.hl .cs { color: #60a0b0; background-color: #fff0f0 } /* Comment.Special */
.hl .gd { color: #A00000 } /* Generic.Deleted */
.hl .ge { font-style: italic } /* Generic.Emph */
.hl .gr { color: #FF0000 } /* Generic.Error */
.hl .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.hl .gi { color: #00A000 } /* Generic.Inserted */
.hl .go { color: #888888 } /* Generic.Output */
.hl .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
.hl .gs { font-weight: bold } /* Generic.Strong */
.hl .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.hl .gt { color: #0044DD } /* Generic.Traceback */
.hl .kc { color: #007020; font-weight: bold } /* Keyword.Constant */
.hl .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */
.hl .kn { color: #007020; font-weight: bold } /* Keyword.Namespace */
.hl .kp { color: #007020 } /* Keyword.Pseudo */
.hl .kr { color: #007020; font-weight: bold } /* Keyword.Reserved */
.hl .kt { color: #902000 } /* Keyword.Type */
.hl .m { color: #40a070 } /* Literal.Number */
.hl .s { color: #4070a0 } /* Literal.String */
.hl .na { color: #4070a0 } /* Name.Attribute */
.hl .nb { color: #007020 } /* Name.Builtin */
.hl .nc { color: #0e84b5; font-weight: bold } /* Name.Class */
.hl .no { color: #60add5 } /* Name.Constant */
.hl .nd { color: #555555; font-weight: bold } /* Name.Decorator */
.hl .ni { color: #d55537; font-weight: bold } /* Name.Entity */
.hl .ne { color: #007020 } /* Name.Exception */
.hl .nf { color: #06287e } /* Name.Function */
.hl .nl { color: #002070; font-weight: bold } /* Name.Label */
.hl .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
.hl .nt { color: #062873; font-weight: bold } /* Name.Tag */
.hl .nv { color: #bb60d5 } /* Name.Variable */
.hl .ow { color: #007020; font-weight: bold } /* Operator.Word */
.hl .w { color: #bbbbbb } /* Text.Whitespace */
.hl .mb { color: #40a070 } /* Literal.Number.Bin */
.hl .mf { color: #40a070 } /* Literal.Number.Float */
.hl .mh { color: #40a070 } /* Literal.Number.Hex */
.hl .mi { color: #40a070 } /* Literal.Number.Integer */
.hl .mo { color: #40a070 } /* Literal.Number.Oct */
.hl .sa { color: #4070a0 } /* Literal.String.Affix */
.hl .sb { color: #4070a0 } /* Literal.String.Backtick */
.hl .sc { color: #4070a0 } /* Literal.String.Char */
.hl .dl { color: #4070a0 } /* Literal.String.Delimiter */
.hl .sd { color: #4070a0; font-style: italic } /* Literal.String.Doc */
.hl .s2 { color: #4070a0 } /* Literal.String.Double */
.hl .se { color: #4070a0; font-weight: bold } /* Literal.String.Escape */
.hl .sh { color: #4070a0 } /* Literal.String.Heredoc */
.hl .si { color: #70a0d0; font-style: italic } /* Literal.String.Interpol */
.hl .sx { color: #c65d09 } /* Literal.String.Other */
.hl .sr { color: #235388 } /* Literal.String.Regex */
.hl .s1 { color: #4070a0 } /* Literal.String.Single */
.hl .ss { color: #517918 } /* Literal.String.Symbol */
.hl .bp { color: #007020 } /* Name.Builtin.Pseudo */
.hl .fm { color: #06287e } /* Name.Function.Magic */
.hl .vc { color: #bb60d5 } /* Name.Variable.Class */
.hl .vg { color: #bb60d5 } /* Name.Variable.Global */
.hl .vi { color: #bb60d5 } /* Name.Variable.Instance */
.hl .vm { color: #bb60d5 } /* Name.Variable.Magic */
.hl .il { color: #40a070 } /* Literal.Number.Integer.Long */

/* additions for multi-notebook tutorials */
.gallery { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.gallery a { flex: 1 1 250px; max-width: 32%; min-width: 220px; text-decoration: none; color: #555; font-size: 13px; text-align: center; }
.gallery img { width: 100%; border: 1px solid var(--line); border-radius: 4px; transition: box-shadow .15s; }
.gallery a:hover img { box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.pdf-frame { width: 100%; height: 620px; border: 1px solid var(--line); border-radius: 4px; }
.res td.ok { background: #eaf5ea; color: #1f6b2a; font-weight: 500; text-align: center; }
.res td.bad { background: #fbeaea; color: #a32020; text-align: center; }
.res td.none { background: #f4f4f4; color: #777; text-align: center; }
.kv { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.kv > div { flex: 1 1 150px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: #fff; }
.kv b { display: block; font-size: 22px; font-weight: 500; color: var(--red); }
.kv span { font-size: 13px; color: var(--mute); }
.btn-kaggle { background: #20beff; border-color: #14a8e6; color: #fff; font-weight: 500; }
.btn-kaggle:hover, .btn-kaggle:focus { background: #14a8e6; color: #fff; }
@media (max-width: 767px) { .gallery a { max-width: 100%; } }