/* Unified teaching website: shared theme + scoped page layouts */

:root{
  --bg:#120f1d; --bg-2:#181326; --panel:#1d172c; --panel-2:#261d39;
  --pink:#f06faf; --pink-soft:#ffb4d6; --violet:#a87cff; --violet-2:#7656d6;
  --text:#f7f1fb; --muted:#c9bbd3; --line:rgba(240,111,175,.22);
  --cyan:#7dd6c5; --purple:#a87cff; --border:rgba(240,111,175,.22); --radius:18px; --mint:#7dd6c5; --danger:#ff7c9e; --shadow:0 18px 50px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); background:
  radial-gradient(circle at 15% -10%, rgba(240,111,175,.18), transparent 34%),
  radial-gradient(circle at 90% 0%, rgba(168,124,255,.16), transparent 32%),
  linear-gradient(180deg,var(--bg),#0e0b17 100%);
  font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,-apple-system,sans-serif;
  line-height:1.75;
}
a{color:var(--pink-soft); text-decoration:none; text-underline-offset:4px; transition:.18s ease}
a:hover{color:#fff; text-shadow:0 0 16px rgba(240,111,175,.65)}
img{max-width:100%; height:auto}
hr{border:0;border-top:1px solid var(--line)}
pre,code{font-family:"Cascadia Code","Consolas",monospace}
pre{
  overflow:auto; background:#0d0a14; color:#f8eefe;
  border:1px solid rgba(168,124,255,.25); border-radius:14px;
  padding:16px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)
}
code{color:#ffbce0}
table{border-color:rgba(240,111,175,.2)}
th{background:rgba(168,124,255,.16);color:#fff}
td,th{border-color:rgba(240,111,175,.18)}
input,select,textarea,button{font:inherit}
::selection{background:rgba(240,111,175,.45);color:#fff}


body.legacy-page>table{background:rgba(29,23,44,.72);border-radius:18px}
.redWord{color:#ff8eb4}

.course-utility-nav{
  position:sticky; top:0; z-index:9999; display:flex; gap:8px; align-items:center;
  padding:10px clamp(12px,3vw,34px); background:rgba(18,15,29,.88);
  border-bottom:1px solid var(--line); backdrop-filter:blur(14px);
}
.course-utility-nav a{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px;
  color:var(--muted); border:1px solid rgba(168,124,255,.18); background:rgba(255,255,255,.02)
}
.course-utility-nav a.active{color:#fff;background:linear-gradient(135deg,rgba(240,111,175,.3),rgba(168,124,255,.3));border-color:rgba(240,111,175,.5)}
.course-utility-nav .spacer{flex:1}
.course-utility-nav .pair-label{color:var(--muted);font-size:.88rem}
@media(max-width:720px){.course-utility-nav{overflow-x:auto;white-space:nowrap}.course-utility-nav .pair-label{display:none}}

/* ccfWeb.css layout */
:where(body.legacy-page) tr, :where(body.legacy-page) td, :where(body.legacy-page) th{
	font-family: Arial,sans-serif;
	color:inherit;
	line-height: 1.5;	
	margin: 0px;
	padding: 10px;
	font-size: 24px;
	border:2px solid var(--line);
	padding:10px;
}
:where(body.legacy-page) wr{color:var(--danger);}
:where(body.legacy-page) wb{color:#a9c7ff;}
:where(body.legacy-page) wdg{color:#7dd6c5}
:where(body.legacy-page) wg{color:#7dd6c5}
:where(body.legacy-page) wp{color:#d7baff}
:where(body.legacy-page) wo{color:#F09109}
:where(body.legacy-page) a:link, :where(body.legacy-page) a:visited{
	color: #005FA9;
	text-decoration: none;
}
:where(body.legacy-page) a:hover{
	text-decoration: underline;
}
:where(body.legacy-page) header{
         color: white;
         position: fixed;
         text-align: center;
         width: 100%;
         top: 1px;
         left: 1px;
         height: 60px;
         background-color: #999900;
         font-size: 36px;
         font-weight: bold;
       }
:where(body.legacy-page) btnyb{
    padding: 10px 20px;
    background-color: #000000;
    color: #ffff00;
    border: none;
    border-radius: 10px;
	cursor:default;
    text-align: center;
}
:where(body.legacy-page) .t-box{
	font-family: 標楷體;
	text-shadow: 
		-1px 1px 0 blue,  
		1px 1px 0 blue;   
}
:where(body.legacy-page) pfont{
	font-size: 24px;
	color:#d7baff;
	font-weight: bold;
	}
:where(body.legacy-page) .btnFont{
		font-size: 24px;
		border: 2px;
		border-color: #000000;
		width: 120px;
		height: 40px;
		background-color: #F09109;
		text-align: center;
		text-valign: middle;
		line-height: 25px;
	}
:where(body.legacy-page) .btn_pFont{
		font-size: 24px;
		border: 2px;
		border-color: #000000;
		width: 120px;
		height: 40px;
		background-color:#d7baff;
		border-radius:10px;
		text-align: center;
		text-valign: middle;
		line-height: 25px;
		color: yellow;
	}
:where(body.legacy-page) .btn_pFont1{
		font-size: 24px;
		border: 2px;
		border-color: #000000;
		background-color:#FB7610;
		color: blue;
	}
:where(body.legacy-page) .varAliT{
	vertical-align:top;
}
:where(body.legacy-page) pName{
	text-decoration:underline;
}

/* Scienceinlife.css layout */
:where(body.science-page) *{ box-sizing: border-box; }
:where(body.science-page) a{ color: var(--cyan); text-decoration: none; }
:where(body.science-page) a:hover, :where(body.science-page) a:focus-visible{ color: #86f8ff; text-decoration: underline; text-underline-offset: 3px; }
:where(body.science-page) a:focus-visible, :where(body.science-page) button:focus-visible{ outline: 3px solid rgba(0, 240, 255, 0.55); outline-offset: 3px; }
:where(body.science-page) .container{ width: min(1380px, calc(100% - 32px)); margin: 0 auto; }
:where(body.science-page) .header{ padding: 48px 0 28px; text-align: center; }
:where(body.science-page) .header-content{
    padding: 28px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(21, 25, 50, 0.78), rgba(10, 14, 39, 0.86));
    box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.06);
}
:where(body.science-page) .title{ margin: 0; line-height: 1.15; }
:where(body.science-page) .title-main{
    display: block;
    font-size: clamp(2.1rem, 5vw, 3.65rem);
    font-weight: 800;
    letter-spacing: .08em;
    background: linear-gradient(90deg, var(--cyan), var(--purple), var(--pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
:where(body.science-page) .title-sub{
    display: block;
    margin-top: 12px;
    color: var(--muted);
    font-size: clamp(.96rem, 2vw, 1.2rem);
    font-weight: 400;
    letter-spacing: .12em;
}
:where(body.science-page) .page-nav{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 18px 0 0;
}
:where(body.science-page) .nav-link, :where(body.science-page) .external-link{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border: 1px solid rgba(0, 240, 255, .28);
    border-radius: 999px;
    background: rgba(0, 240, 255, .07);
    color: #d9fbff;
    line-height: 1.4;
}
:where(body.science-page) .nav-link:hover, :where(body.science-page) .external-link:hover{ background: rgba(0, 240, 255, .13); text-decoration: none; }
:where(body.science-page) .main-content{ padding: 6px 0 54px; }
:where(body.science-page) .panel, :where(body.science-page) .table-wrapper, :where(body.science-page) .content-card{
    margin-bottom: 22px;
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--panel), var(--panel-2));
    box-shadow: var(--shadow);
}
:where(body.science-page) .panel > :first-child, :where(body.science-page) .content-card > :first-child{ margin-top: 0; }
:where(body.science-page) .panel > :last-child, :where(body.science-page) .content-card > :last-child{ margin-bottom: 0; }
:where(body.science-page) h2, :where(body.science-page) h3{ color: #f8fbff; line-height: 1.35; }
:where(body.science-page) h2{ margin: 0 0 18px; font-size: 1.55rem; }
:where(body.science-page) h3{ margin: 26px 0 10px; font-size: 1.16rem; color: #d5c8ff; }
:where(body.science-page) p{ margin: 0 0 14px; }
:where(body.science-page) ul, :where(body.science-page) ol{ margin-top: 8px; padding-left: 1.5em; }
:where(body.science-page) li + li{ margin-top: 6px; }
:where(body.science-page) hr{ border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 24px 0; }
:where(body.science-page) .lead{ font-size: 1.08rem; color: #e8ecff; }
:where(body.science-page) .muted, :where(body.science-page) .note{ color: var(--muted); }
:where(body.science-page) .note-box{
    margin: 18px 0;
    padding: 14px 16px;
    border-left: 4px solid var(--purple);
    border-radius: 10px;
    background: rgba(157, 108, 255, .08);
    color: #e8e0ff;
}
:where(body.science-page) .table-wrapper{ overflow-x: auto; }
:where(body.science-page) .course-table, :where(body.science-page) .info-table{
    width: 100%;
    border-collapse: collapse;
    min-width: 680px;
}
:where(body.science-page) .course-table th, :where(body.science-page) .course-table td, :where(body.science-page) .info-table th, :where(body.science-page) .info-table td{
    padding: 15px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    vertical-align: top;
}
:where(body.science-page) .course-table th, :where(body.science-page) .info-table th{
    background: linear-gradient(135deg, rgba(102,126,234,.72), rgba(118,75,162,.72));
    text-align: center;
    font-weight: 700;
}
:where(body.science-page) .course-table tbody tr:hover, :where(body.science-page) .info-table tbody tr:hover{ background: rgba(255,255,255,.025); }
:where(body.science-page) .col-date{ width: 110px; }
:where(body.science-page) .col-note{ width: 100px; }
:where(body.science-page) .date, :where(body.science-page) .note{ text-align: center; }
:where(body.science-page) .date{ color: var(--cyan); font-weight: 700; }
:where(body.science-page) .content-section{ margin: 10px 0; }
:where(body.science-page) .label{ display: block; margin-bottom: 6px; color: #cbbcff; font-weight: 700; }
:where(body.science-page) .link-list, :where(body.science-page) .sub-links{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
:where(body.science-page) .resource-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}
:where(body.science-page) .resource-card{
    padding: 16px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
}
:where(body.science-page) .resource-card h3{ margin-top: 0; }
:where(body.science-page) .lesson-table{ width: 100%; border-collapse: separate; border-spacing: 0 14px; }
:where(body.science-page) .lesson-table td{
    padding: 18px;
    background: rgba(255,255,255,.035);
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
:where(body.science-page) .lesson-table td:first-child{
    width: 145px;
    color: var(--cyan);
    font-weight: 700;
    text-align: center;
    border-left: 1px solid rgba(255,255,255,.08);
    border-radius: 12px 0 0 12px;
}
:where(body.science-page) .lesson-table td:last-child{
    border-right: 1px solid rgba(255,255,255,.08);
    border-radius: 0 12px 12px 0;
}
:where(body.science-page) .media-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
:where(body.science-page) figure{ margin: 0; }
:where(body.science-page) figure img, :where(body.science-page) .responsive-image{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: #060817;
}
:where(body.science-page) figcaption{ margin-top: 8px; text-align: center; color: var(--muted); font-size: .94rem; }
:where(body.science-page) .portrait{ max-width: 340px; margin: 0 auto; }
:where(body.science-page) video{ display: block; width: min(100%, 760px); height: auto; margin: 12px auto 0; border-radius: 12px; background: #000; }
:where(body.science-page) .inline-icon{ width: 42px; height: 42px; object-fit: contain; vertical-align: middle; border: 0; border-radius: 8px; }
:where(body.science-page) .footer{
    margin-top: 8px;
    padding: 26px 0 36px;
    border-top: 1px solid rgba(255,255,255,.1);
    text-align: center;
    color: var(--muted);
    font-size: .92rem;
}
:where(body.science-page) .back-to-top{
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 10;
    display: none;
    padding: 9px 12px;
    border: 1px solid rgba(0,240,255,.34);
    border-radius: 10px;
    color: var(--text);
    background: rgba(16,22,47,.94);
    cursor: pointer;
}
:where(body.science-page) .back-to-top.show{ display: block; }
@media (max-width: 760px){:where(body.science-page) .container{ width: min(100% - 20px, 1380px); }
:where(body.science-page) .header{ padding-top: 18px; }
:where(body.science-page) .header-content{ padding: 22px 16px; }
:where(body.science-page) .table-wrapper, :where(body.science-page) .panel, :where(body.science-page) .content-card{ padding: 15px; border-radius: 14px; }
:where(body.science-page) .media-grid{ grid-template-columns: 1fr; }
:where(body.science-page) .lesson-table, :where(body.science-page) .lesson-table tbody, :where(body.science-page) .lesson-table tr, :where(body.science-page) .lesson-table td{ display: block; width: 100%; }
:where(body.science-page) .lesson-table{ border-spacing: 0; }
:where(body.science-page) .lesson-table tr{ margin-bottom: 14px; }
:where(body.science-page) .lesson-table td:first-child, :where(body.science-page) .lesson-table td:last-child{ border: 1px solid rgba(255,255,255,.08); border-radius: 10px; }
:where(body.science-page) .lesson-table td:first-child{ margin-bottom: 6px; }
:where(body.science-page) .course-table, :where(body.science-page) .info-table{ min-width: 620px; }
}
@media (prefers-reduced-motion: reduce){}

/* op.css layout */
:where(body.op-page) header{border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(38,29,57,.86),rgba(18,15,29,.72))}
:where(body.op-page) .header-inner{max-width:1500px;margin:0 auto;padding:28px clamp(18px,4vw,54px)}
:where(body.op-page) .brand{display:flex;gap:18px;align-items:flex-start}
:where(body.op-page) .brand-logo{flex:0 0 auto;min-width:62px;height:62px;display:grid;place-items:center;border-radius:18px;font-weight:900;font-size:1.25rem;color:#fff;background:linear-gradient(135deg,var(--pink),var(--violet));box-shadow:0 12px 30px rgba(240,111,175,.22)}
:where(body.op-page) .brand-text-block{min-width:0;flex:1}
:where(body.op-page) .brand-text-title{font-size:clamp(1.65rem,3.3vw,2.75rem);font-weight:900;letter-spacing:.03em;color:#fff}
:where(body.op-page) .brand-text-sub{color:var(--muted);margin-top:3px}
:where(body.op-page) .top-nav{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
:where(body.op-page) .top-nav a{padding:7px 11px;border-radius:10px;background:rgba(168,124,255,.08);border:1px solid rgba(168,124,255,.16);font-size:.93rem}
:where(body.op-page) .layout{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:minmax(230px,300px) minmax(0,1fr);gap:26px;padding:28px clamp(18px,4vw,54px) 70px}
:where(body.op-page) .side-panel{display:flex;flex-direction:column;gap:16px;align-self:start;position:sticky;top:70px}
:where(body.op-page) .panel, :where(body.op-page) .card{background:linear-gradient(180deg,rgba(38,29,57,.92),rgba(29,23,44,.92));border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
:where(body.op-page) .panel{padding:18px}
:where(body.op-page) .panel-title{font-weight:900;color:var(--pink-soft);font-size:1.05rem;margin-bottom:10px}
:where(body.op-page) .toc{list-style:none;padding:0;margin:0}
:where(body.op-page) .toc li{margin:5px 0}
:where(body.op-page) .toc a{display:flex;gap:9px;align-items:flex-start;padding:8px 9px;border-radius:10px;color:var(--muted)}
:where(body.op-page) .toc a:hover{background:rgba(240,111,175,.08);color:#fff}
:where(body.op-page) .toc span{color:var(--pink);font-weight:800;font-size:.82rem;min-width:22px}
:where(body.op-page) .badge-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
:where(body.op-page) .badge{font-size:.78rem;padding:4px 9px;border-radius:999px;color:#eadcff;background:rgba(168,124,255,.1);border:1px solid rgba(168,124,255,.22)}
:where(body.op-page) .tip-box{color:var(--muted);font-size:.94rem}
:where(body.op-page) .tip-strong{color:var(--pink-soft);font-weight:800}
:where(body.op-page) .layout>section{min-width:0;display:flex;flex-direction:column;gap:20px}
:where(body.op-page) .card{padding:clamp(20px,3vw,34px);overflow:hidden}
:where(body.op-page) .card-title{font-size:clamp(1.25rem,2vw,1.75rem);font-weight:900;color:#fff;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
:where(body.op-page) .card-title-tag{font-size:.75rem;font-weight:700;color:#ffd4e8;padding:4px 9px;border-radius:999px;background:rgba(240,111,175,.12);border:1px solid rgba(240,111,175,.25)}
:where(body.op-page) .card-subtitle{color:var(--muted)}
:where(body.op-page) .table-wrap{overflow-x:auto;border-radius:14px;border:1px solid rgba(168,124,255,.18);margin:14px 0}
:where(body.op-page) .table-wrap table, :where(body.op-page) .card>table{width:100%;border-collapse:collapse;background:rgba(10,8,17,.25)}
:where(body.op-page) th, :where(body.op-page) td{padding:10px 12px;border:1px solid rgba(240,111,175,.16);vertical-align:top}
:where(body.op-page) .tdT{text-align:left;vertical-align:top}
:where(body.op-page) .tdCenter{text-align:center}
:where(body.op-page) .tdPad10{padding:10px}
:where(body.op-page) .w80{width:80px}
:where(body.op-page) .w200{width:200px}
:where(body.op-page) .w300{width:300px}
:where(body.op-page) .w400{width:400px}
:where(body.op-page) .w800{width:800px}
:where(body.op-page) .ulM, :where(body.op-page) .squareLi, :where(body.op-page) .starLi, :where(body.op-page) .squLi{padding-left:1.4rem}
:where(body.op-page) .flowContainer, :where(body.op-page) .bmi-flow, :where(body.op-page) .bmi-layout{position:relative;max-width:760px;margin:18px auto;padding:18px;min-height:160px;border-radius:18px;background:rgba(13,10,20,.68);border:1px dashed rgba(168,124,255,.3)}
:where(body.op-page) .processBlock, :where(body.op-page) .IOBlock, :where(body.op-page) .bmi-node, :where(body.op-page) .bmi-proc, :where(body.op-page) .bmi-io{display:inline-flex;align-items:center;justify-content:center;min-width:120px;min-height:48px;padding:9px 14px;margin:8px;background:linear-gradient(135deg,rgba(240,111,175,.16),rgba(168,124,255,.12));border:1px solid rgba(240,111,175,.38);border-radius:12px;color:#fff;text-align:center}
:where(body.op-page) .conditionDiamond, :where(body.op-page) .fc-decision{display:inline-grid;place-items:center;min-width:116px;min-height:76px;padding:12px 20px;margin:14px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:rgba(168,124,255,.22);color:#fff}
:where(body.op-page) .arrow-left, :where(body.op-page) .arrow-right, :where(body.op-page) .vertical, :where(body.op-page) .horizontal, :where(body.op-page) .lineStatus{color:var(--pink-soft)}
:where(body.op-page) .coord-plane{position:relative;min-height:310px;border-radius:16px;background:linear-gradient(rgba(168,124,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(168,124,255,.06) 1px,transparent 1px);background-size:25px 25px;border:1px solid rgba(168,124,255,.2)}
:where(body.op-page) .circle-outer, :where(body.op-page) .circle-inner{border-radius:50%;border:2px solid var(--pink);position:absolute}
:where(body.op-page) .label, :where(body.op-page) .tick-x, :where(body.op-page) .tick-y{color:var(--muted)}
:where(body.op-page) latex{color:#ffe1ef;font-family:Georgia,serif}
:where(body.op-page) footer{max-width:1500px;margin:0 auto;padding:20px 54px;color:var(--muted)}
@media(max-width:920px){:where(body.op-page) .layout{grid-template-columns:1fr}
:where(body.op-page) .side-panel{position:static}
:where(body.op-page) .brand-logo{min-width:52px;height:52px}
:where(body.op-page) .card{padding:20px}
}

/* flowchart.css layout */
:where(body.flow-page) .wrap{max-width:1200px;margin:28px auto;padding:0 20px}
:where(body.flow-page) .card{background:linear-gradient(180deg,rgba(38,29,57,.92),rgba(29,23,44,.92));border:1px solid var(--line);border-radius:18px;padding:22px;margin:18px 0}
:where(body.flow-page) .shape{display:inline-grid;place-items:center;min-width:160px;min-height:64px;margin:10px;padding:10px 18px;color:#fff;border:2px solid rgba(240,111,175,.52);background:rgba(240,111,175,.08)}
:where(body.flow-page) .terminator{border-radius:999px}
:where(body.flow-page) .process{border-radius:8px}
:where(body.flow-page) .decision{transform:rotate(45deg);width:100px;height:100px;min-width:0}
:where(body.flow-page) .decision>*{transform:rotate(-45deg)}
:where(body.flow-page) .io{transform:skew(-12deg);border-radius:8px}
:where(body.flow-page) .io>*{transform:skew(12deg)}
:where(body.flow-page) .line-demo{height:2px;background:linear-gradient(90deg,var(--pink),var(--violet));margin:24px 0}
:where(body.flow-page) .desc, :where(body.flow-page) .hint{color:var(--muted)}
:where(body.flow-page) .annotation{color:var(--pink-soft)}
:where(body.flow-page) .annot-wrap, :where(body.flow-page) .decision-wrap{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
:where(body.flow-page) .arrow{color:var(--pink);font-size:1.4rem}
:where(body.flow-page) .r, :where(body.flow-page) .t{color:var(--muted)}

/* home.css layout */
:where(body.home-page) .home-shell{max-width:1420px;margin:0 auto;padding:28px clamp(16px,4vw,56px) 72px}
:where(body.home-page) .hero{position:relative;overflow:hidden;padding:clamp(26px,5vw,58px);border:1px solid var(--line);border-radius:28px;background:linear-gradient(135deg,rgba(240,111,175,.15),rgba(168,124,255,.13) 52%,rgba(38,29,57,.8));box-shadow:var(--shadow)}
:where(body.home-page) .hero:after{content:"";position:absolute;width:320px;height:320px;right:-80px;top:-130px;border-radius:50%;background:radial-gradient(circle,rgba(240,111,175,.28),transparent 68%)}
:where(body.home-page) .eyebrow{color:var(--pink);font-weight:900;letter-spacing:.16em;font-size:.78rem}
:where(body.home-page) .hero h1{margin:.25rem 0 0;font-size:clamp(2rem,5vw,4rem);line-height:1.12}
:where(body.home-page) .hero p{max-width:760px;color:var(--muted);font-size:1.06rem}
:where(body.home-page) .hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
:where(body.home-page) .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:12px;background:linear-gradient(135deg,rgba(240,111,175,.2),rgba(168,124,255,.18));border:1px solid rgba(240,111,175,.3);color:#fff}
:where(body.home-page) .btn.subtle{background:rgba(255,255,255,.025);color:var(--muted)}
:where(body.home-page) .section-title{display:flex;align-items:end;justify-content:space-between;gap:14px;margin:40px 0 14px}
:where(body.home-page) .section-title h2{margin:0;font-size:clamp(1.35rem,2.5vw,2rem)}
:where(body.home-page) .section-title p{margin:0;color:var(--muted)}
:where(body.home-page) .quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
:where(body.home-page) .quick-card{min-height:200px;padding:20px;border-radius:22px;background:linear-gradient(180deg,rgba(38,29,57,.92),rgba(29,23,44,.9));border:1px solid var(--line);box-shadow:var(--shadow)}
:where(body.home-page) .quick-card h3{margin:0 0 8px}
:where(body.home-page) .quick-card p{color:var(--muted)}
:where(body.home-page) .qr-pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
:where(body.home-page) .qr-box{text-align:center}
:where(body.home-page) .qr-box img{width:min(150px,100%);border-radius:14px;border:1px solid rgba(240,111,175,.22)}
:where(body.home-page) .os-mark img{width:70px}
:where(body.home-page) .class-name{font-weight:900;color:var(--pink-soft);margin-top:8px}
:where(body.home-page) .link-list{display:flex;flex-direction:column;gap:8px}
:where(body.home-page) .link-list a{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.025);border:1px solid rgba(168,124,255,.12)}
:where(body.home-page) .schedule-wrap{overflow:hidden;border:1px solid var(--line);border-radius:24px;background:rgba(29,23,44,.86);box-shadow:var(--shadow)}
:where(body.home-page) .schedule{width:100%;border-collapse:collapse}
:where(body.home-page) .schedule th{position:sticky;top:0;z-index:2;padding:14px 16px;text-align:left;background:#251b38;color:#fff}
:where(body.home-page) .schedule td{padding:15px 16px;border-top:1px solid rgba(240,111,175,.12);vertical-align:top}
:where(body.home-page) .schedule .week{width:90px;color:#ffb4d6;font-weight:900;font-size:1.05rem}
:where(body.home-page) .schedule .content{width:62%}
:where(body.home-page) .schedule .note{color:var(--muted)}
:where(body.home-page) .schedule tr:hover td{background:rgba(240,111,175,.035)}
:where(body.home-page) .schedule a{display:inline-block;margin:2px 0}
:where(body.home-page) .empty{color:var(--muted);font-style:italic}
:where(body.home-page) .small-note{font-size:.88rem;color:var(--muted)}
:where(body.home-page) .site-footer{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
@media(max-width:960px){:where(body.home-page) .quick-grid{grid-template-columns:1fr}
:where(body.home-page) .schedule, :where(body.home-page) .schedule tbody, :where(body.home-page) .schedule tr, :where(body.home-page) .schedule td{display:block}
:where(body.home-page) .schedule thead{display:none}
:where(body.home-page) .schedule tr{padding:16px;border-top:1px solid var(--line)}
:where(body.home-page) .schedule td{border:0;padding:4px 0}
:where(body.home-page) .schedule .week{width:auto;font-size:1.15rem}
:where(body.home-page) .schedule .content:before{content:"內容";display:block;color:var(--violet);font-size:.78rem;font-weight:900;letter-spacing:.1em;margin-top:8px}
:where(body.home-page) .schedule .note:before{content:"備註";display:block;color:var(--violet);font-size:.78rem;font-weight:900;letter-spacing:.1em;margin-top:12px}
:where(body.home-page) .qr-pair{grid-template-columns:1fr 1fr}
:where(body.home-page) .os-mark{display:none}
}

/* Readability and common controls */
body { min-height:100vh; }
:where(td,th) { color:inherit; }
a:visited { color:var(--pink-soft); }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {outline:2px solid var(--mint);outline-offset:3px;}
:where(input,select,textarea,button) {color:var(--text);background-color:var(--panel-2);border:1px solid var(--muted);border-radius:5px;accent-color:var(--pink);}
textarea {max-width:100%;}
input[type="range"],input[type="checkbox"],input[type="radio"],input[type="image"] {background:transparent;}
input::placeholder,textarea::placeholder {color:var(--muted);opacity:1;}
body.legacy-page {font-size:24px;line-height:1.75;}
body.legacy-page > table {width:calc(100% - 32px);margin:24px auto;border:1px solid var(--line);}
body.legacy-page > table > tbody > tr > td {border:0;}
body.legacy-page tr {color:inherit;}
body.legacy-page .btnFont,body.legacy-page .btn_pFont1 {color:#1d172c;}
body.legacy-page pfont {color:#d7baff;}
body.legacy-page header {background:var(--panel-2);}
@media(max-width:720px){body.legacy-page{font-size:18px;}body.legacy-page td,body.legacy-page th{font-size:18px;padding:8px;}body.home-page .schedule .content{width:auto;}body.home-page .schedule td{overflow-wrap:anywhere;}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}a{transition:none;}}

/* Css-a.html page-specific layout */
body.page-css-a td.aa{
		text-align:center;
	}
body.page-css-a tfont{
		font-size: 24px;
   		color:#599a59;
   		font-weight: bold;
	}
body.page-css-a .sTd{
		font-size: 18px;
	}
body.page-css-a fc{
		color:#d5722c;
	}
body.page-css-a fr{
		color:#ff4747;
	}
body.page-css-a fp{
		color:#b973b9;
	}

/* osHw-10.html page-specific layout */
body.page-oshw-10 pre::before{content: "";}

/* dm2.html page-specific layout */
body.page-dm2{
    --unit: 10px;          
}
body.page-dm2 .coord-wrapper{
    padding: 20px;
    border: 2px solid #94a3b8;
    display: inline-block;
}
body.page-dm2 .coord-plane{
    position: relative;
    width: calc(32 * var(--unit));
    height: calc(32 * var(--unit));
    overflow: hidden;
}
body.page-dm2 .axis-x, body.page-dm2 .axis-y{
    position: absolute;
    background: #666666;
}
body.page-dm2 .axis-x{
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    transform: translateY(-1px);
}
body.page-dm2 .axis-y{
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-1px);
}
body.page-dm2 .tick-x, body.page-dm2 .tick-y{
    position: absolute;
    background: #aaaaaa;
}
body.page-dm2 .tick-x{
    width: 1px;
    top: 50%;
    transform: translate(-0.5px, -50%);
}
body.page-dm2 .tick-y{
    height: 1px;
    left: 50%;
    transform: translate(-50%, -0.5px);
}
body.page-dm2 .tick-x.major{ height: 7px; }
body.page-dm2 .tick-x.minor{ height: 4px; }
body.page-dm2 .tick-y.major{ width: 7px; }
body.page-dm2 .tick-y.minor{ width: 4px; }
body.page-dm2 .tick-x{
    left: calc(50% + var(--pos) * var(--unit));
}
body.page-dm2 .tick-y{
    top: calc(50% - var(--pos) * var(--unit));
}
body.page-dm2 .circle-outer{
    opacity: 0.5;
    position: absolute;
    width: calc(20 * var(--unit));    
    height: calc(20 * var(--unit));
    border-radius: 50%;
    border: 2px solid blue;       
    background: rgba(168, 85, 247, 0.5); 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
body.page-dm2 .circle-inner{
    opacity: 0.5;
    position: absolute;
    width: calc(6 * var(--unit));     
    height: calc(6 * var(--unit));
    border-radius: 50%;
    border: 2px solid red;       
    background: #facc15;             
    background: rgba(255, 204, 21, 0.5); 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
body.page-dm2 .circle-outer, body.page-dm2 .circle-inner{
    z-index: 1;
}
body.page-dm2 .axis-x, body.page-dm2 .axis-y, body.page-dm2 .tick-x, body.page-dm2 .tick-y{
    z-index: 2;
}
body.page-dm2 .label{
    position: absolute;
    z-index: 3;  
    color:#16a34a;  
    font-family: "Times New Roman", "Noto Serif TC", serif;
    font-weight: 700;
    transform: translate(-50%, -50%);
}
body.page-dm2 .label-pos{
    top:  calc(50% - var(--y) * var(--unit));
    left: calc(50% + var(--x) * var(--unit));
}
body.page-dm2 .label-center{ font-size: 28px; }
body.page-dm2 .label-B{ font-size: 26px; }
body.page-dm2 .label-C{ font-size: 30px; }

/* algorithm.html page-specific layout */
body.page-algorithm .alg-toggle{
    cursor: pointer;
    display: inline-block;
    padding: 4px 10px;
    margin-right: 8px;
    font-size: 13px;
    border-radius: 999px;
    border: 1px solid rgba(148,163,184,.5);
    color:#e2e8f0;
    background: rgba(15,23,42,.9);
}
body.page-algorithm .alg-toggle:hover{
    border-color: #4fd1c5;
    color:#4fd1c5;
}
body.page-algorithm .alg-block{
    display: none;
    margin-top: 8px;
}

/* length.html page-specific layout */
body.page-length .s1{
		font-size:10px;
		text-align:center;
		background-color:#f8f8dc;
		vertical-align:top;
		color:black;
		padding:0 0 0 0;
		border:0 0 0 0;
		margin:0 0 0 0;
	}
body.page-length span{
		text-align:center;
		width:100px;
		background-color:darkgreen;
		vertical-align:bottom;
		color:yellow;
		padding:0 0 0 0;
		border:0 0 0 0;
		margin:0 0 0 0;
		ertical-align:bottom;
	}
body.page-length span>span{
		background-color:darkred;
	}
body.page-length span>span>span{
		background-color:darkblue;
	}
body.page-length span>span>span>span{
		background-color:darkcyan;
	}
body.page-length span>span>span>span>span{
		background-color:darkmagenta;
	}

/* divTypesetting.html page-specific layout */
body.page-divtypesetting *{ box-sizing: border-box; }
body.page-divtypesetting{ margin: 0; padding: 20px;    }
body.page-divtypesetting .layout{ width: 100%; max-width: 960px; margin: 0 auto; }
body.page-divtypesetting .header, body.page-divtypesetting .footer{ padding: 24px; background:var(--panel-2); color:var(--text); text-align: center; }
body.page-divtypesetting .sidebar{ padding: 24px; background:var(--panel-2); vertical-align: top; }
body.page-divtypesetting .content{ padding: 0; background:var(--panel-2); vertical-align: top; }
body.page-divtypesetting .sidebar a{ display: block; margin-bottom: 16px; padding: 12px; background: transparent; color:var(--text); border-radius: 8px; text-decoration: none; transition: background-color 0.2s, color 0.2s; }
body.page-divtypesetting .sidebar a:hover, body.page-divtypesetting .sidebar a:focus-visible{ background:var(--panel-2); color:var(--text); }
body.page-divtypesetting iframe{ display: block; width: 100%; height: 460px; border: none; }
body.page-divtypesetting .middle{ display: flex; }
body.page-divtypesetting .sidebar{ width: 25%; }
body.page-divtypesetting .content{ width: 75%; min-width: 0; }
@media (max-width: 600px){body.page-divtypesetting .middle{ flex-direction: column; }
body.page-divtypesetting .sidebar, body.page-divtypesetting .content{ width: 100%; }
}

/* Css-select.html page-specific layout */
body.page-css-select td.aa{
		text-align:center;
	}
body.page-css-select tfont{
		font-size: 24px;
   		color:#599a59;
   		font-weight: bold;
	}

/* cc4.html page-specific layout */
body.page-cc4 .supb{
      display: inline-grid;
      font-size: 0.6em;
      vertical-align: middle;
    }
body.page-cc4 .supb sup, body.page-cc4 .supb sub{
        font-size: inherit;
    }

/* flowchart.html page-specific layout */
body.page-flowchart .flow-list{
    list-style: none;
    padding-left: 0;
}
body.page-flowchart .flow-item{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 14px;
}
body.page-flowchart .diamond{
    width: 18px;
    height: 18px;
    animation: rotateSVG 2s linear infinite;
}
@keyframes rotateSVG{body.page-flowchart 0%{ transform: rotate(0deg); }
body.page-flowchart 100%{ transform: rotate(360deg); }
}
body.page-flowchart .flow-note{
    font-size: 13px;
    color:#94a3b8;
    margin-top: 8px;
}

/* Css-style.html page-specific layout */
body.page-css-style td.aa{
text-align:center;
}

/* Css-container.html page-specific layout */
body.page-css-container td.aa{
		text-align:center;
	}
body.page-css-container tfont{
		font-size: 24px;
   		color:#599a59;
   		font-weight: bold;
	}

/* dm3.html page-specific layout */
body.page-dm3{
    --unit: 10px;          
}

/* tabTypesetting.html page-specific layout */
body.page-tabtypesetting *{ box-sizing: border-box; }
body.page-tabtypesetting{ margin: 0; padding: 20px;    }
body.page-tabtypesetting .layout{ width: 100%; max-width: 960px; margin: 0 auto; }
body.page-tabtypesetting .header, body.page-tabtypesetting .footer{ padding: 24px; background:var(--panel-2); color:var(--text); text-align: center; }
body.page-tabtypesetting .sidebar{ padding: 24px; background:var(--panel-2); vertical-align: top; }
body.page-tabtypesetting .content{ padding: 0; background:var(--panel-2); vertical-align: top; }
body.page-tabtypesetting .sidebar a{ display: block; margin-bottom: 16px; padding: 12px; background: transparent; color:var(--text); border-radius: 8px; text-decoration: none; transition: background-color 0.2s, color 0.2s; }
body.page-tabtypesetting .sidebar a:hover, body.page-tabtypesetting .sidebar a:focus-visible{ background:var(--panel-2); color:var(--text); }
body.page-tabtypesetting iframe{ display: block; width: 100%; height: 460px; border: none; }
body.page-tabtypesetting table.layout{ border-collapse: collapse; table-layout: fixed; }

/* Shared readability for legacy custom tags and modern lesson layouts. */
:where(wr,fr){color:#ff8eb4} :where(wb){color:#a9c7ff} :where(wdg,wg,tfont){color:#7dd6c5} :where(wp,fp,pfont,ptfont){color:#d7baff} :where(wo,fc){color:#ffc27d}
body.flow-page{font-size:20px} body.flow-page td,body.flow-page th{padding:10px;color:inherit;}
body.op-page>header{position:static;height:auto;}
body.layout-page{padding:20px;}
body.layout-page .sidebar a{color:var(--pink-soft);}
body.layout-page .sidebar a:hover{background:#443058;color:#fff;}
body.layout-page .header,body.layout-page .footer{background:linear-gradient(135deg,#382344,#261d39);}
body.layout-page .sidebar{background:var(--panel-2);}
body.layout-page .content{background:var(--panel);}
body.page-length .s1{background:var(--panel-2);color:var(--text);}
body.page-dm2 .label{color:#86efac;}
body.page-dm2 .axis-x,body.page-dm2 .axis-y{background:#c9bbd3;}
body.legacy-page :where(table){border-color:var(--line);}
body.legacy-page :where(td,th){overflow-wrap:break-word;}
:where(pre,textarea){max-width:100%;}
body.legacy-page input,body.legacy-page button,body.legacy-page select{max-width:100%;}

/* Week 06 JavaScript lessons: scoped to new teaching pages. */
body.js-course{font-size:18px;line-height:1.8;}
.js-course .js-shell{max-width:1100px;margin:0 auto;padding:24px clamp(16px,4vw,40px) 60px;}
.js-course .js-nav,.js-course .js-sequence{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin:0 0 22px;}
.js-course .js-nav a,.js-course .js-sequence a{padding:6px 12px;border:1px solid var(--line);border-radius:10px;}
.js-course .js-hero{padding:30px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(135deg,#382344,#261d39);margin-bottom:24px;}
.js-course h1{font-size:clamp(1.6rem,4vw,2.5rem);line-height:1.35;margin:8px 0;}
.js-course h2{color:var(--pink-soft);font-size:1.35rem;margin:0 0 14px;}
.js-course .js-eyebrow{font-size:.8rem;letter-spacing:.15em;color:var(--mint);}
.js-course .js-card{padding:24px;margin:18px 0;border:1px solid var(--line);border-radius:18px;background:var(--panel);min-width:0;overflow-x:auto;}
.js-course p{margin:10px 0;}.js-course li{margin:8px 0;}
.js-course pre{font-size:16px;line-height:1.65;white-space:pre;tab-size:2;}
.js-course pre code{color:#f7f1fb;}.js-course code{overflow-wrap:anywhere;}
.js-course .js-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:end;}
.js-course label{display:inline-flex;flex-direction:column;gap:4px;margin:6px;}
.js-course button{padding:9px 16px;color:var(--text);background:#443058;border:1px solid var(--pink);cursor:pointer;}
.js-course button:hover{background:#624477;}.js-course input{padding:7px;max-width:100%;width:180px;}
.js-course .js-result{padding:12px 16px;border-left:3px solid var(--mint);background:#161122;color:#e7fff7;}
.js-course details{margin:14px 0;}.js-course summary{cursor:pointer;color:var(--mint);font-weight:700;}
.js-course .js-table{width:100%;border-collapse:collapse;font-size:1rem;}
.js-course .js-table th,.js-course .js-table td{padding:10px;border:1px solid var(--line);text-align:left;vertical-align:top;}
.js-course dt{font-weight:700;color:var(--pink-soft);}.js-course dd{margin:2px 0 16px;}
.js-course .js-muted,.js-course .js-footer{color:var(--muted);font-size:.9rem;}
.js-course canvas{display:block;width:100%;height:auto;background:#100d19;border:1px solid var(--line);margin-top:14px;}
@media(max-width:600px){.js-course .js-card,.js-course .js-hero{padding:16px;}.js-course .js-table{font-size:.9rem;}.js-course pre{font-size:14px;}}