/* Pothelia · Apothelic reference system. See docs/DESIGN_SYSTEM.md. */
:root {
  --bg:#EFEDE3; --paper:#F5F3EB; --ink:#302F2C;
  --soft:#68665E; --faint:#6D6A60; --line:rgba(48,47,44,.18);
  --control:#898578; --tint:#E6E3D8; --accent:#806224;
  --success:#58664D; --warning:#8A632A; --error:#994E3C; --info:#596A6B;
  --sans:'Manrope',system-ui,-apple-system,sans-serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --brand:'Plus Jakarta Sans',system-ui,sans-serif;
  --type-display:64px; --type-title:48px; --type-section:32px; --type-subtitle:24px;
  --type-body:15px; --type-caption:12px; --type-input:16px;
  --radius:12px; --wrap:1240px;
  --motion-fast:180ms; --motion-base:260ms; --motion-slow:420ms;
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.4,0,1,1);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:var(--type-body)/1.55 var(--sans); -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; color:inherit; }
button,a,input,textarea { touch-action:manipulation; }
button { cursor:pointer; background:none; border:0; padding:0; }
button:disabled { cursor:default; opacity:.5; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,p,dl,dd { margin:0; }
h1,h2,h3 { font-family:var(--serif); font-weight:500; text-wrap:balance; font-synthesis:none; }
p { text-wrap:pretty; }
.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
::selection { background:#D9CDAE; color:var(--ink); }
input:autofill { background-color:var(--tint); color:var(--ink); }
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus {
 -webkit-text-fill-color:var(--ink); caret-color:var(--ink);
 -webkit-box-shadow:0 0 0 1000px var(--tint) inset;
 box-shadow:0 0 0 1000px var(--tint) inset;
}
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip { position:fixed; top:-100px; left:16px; z-index:100; background:var(--ink); color:var(--bg); padding:12px; }
.skip:focus { top:10px; }
.initial { min-height:100vh; display:grid; align-content:center; justify-content:center; gap:20px; text-align:center; font:700 var(--type-subtitle) var(--brand); letter-spacing:.02em; }
.initial span { font:var(--type-body) var(--sans); letter-spacing:0; }
.brand { font:700 var(--type-subtitle)/1 var(--brand); letter-spacing:.02em; }
.brand { display:inline-flex; align-items:center; min-height:44px; flex-shrink:0; }
.kicker { font:500 var(--type-caption)/1.5 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--soft); }
.muted { color:var(--soft); }
.tiny { font-size:var(--type-caption); }
.text-link { display:inline-flex; gap:10px; align-items:center; min-height:36px; font-size:var(--type-body); text-decoration:none; text-underline-offset:4px; text-decoration-thickness:1px; }
.text-link:hover,a:hover:not(.brand,.card-open,.account-link) { text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.primary { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:48px; padding:13px 22px; background:var(--ink); color:var(--bg); border:1px solid var(--ink); border-radius:8px; font-size:var(--type-body); font-weight:600; }
.primary:hover { opacity:.88; text-decoration:none!important; }
.primary:active { transform:scale(.985); }
.secondary { min-height:44px; padding:10px 18px; border:1px solid var(--control); border-radius:8px; }
.icon-button { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:8px; }
.icon-button:hover { background:var(--tint); }
/* Original login composition: dark star panel and open, underlined form. */
.login-layout { display:grid; grid-template-columns:1.15fr 1fr; align-items:start; min-height:100dvh; }
.login-story { margin:12px; height:calc(100dvh - 24px); min-height:540px; border-radius:var(--radius); padding:88px 40px; background:var(--ink); color:var(--bg); position:relative; overflow:hidden; display:grid; place-items:center; isolation:isolate; }
.constellation { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; z-index:-1; }
.login-story .brand { position:absolute; top:26px; left:40px; }
.story-center { text-align:center; width:100%; }
.story-center h2 { font:500 var(--type-display)/1.04 var(--serif); letter-spacing:-.01em; max-width:11em; margin:auto; }
.story-center h2 em,.page-title em { font-weight:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.14em; }
.story-center p { font:500 var(--type-subtitle)/1.35 var(--serif); color:#D6D3C7; max-width:24em; margin:22px auto 0; }
.story-footer { position:absolute; bottom:24px; left:40px; font-size:var(--type-caption); color:#C3C0B5; }
.login-side { display:flex; padding:clamp(32px,6dvh,72px) 56px 32px; }
.login-form { width:100%; max-width:400px; margin:0 auto; }
.login-form h1 { font:600 var(--type-title)/1.05 var(--serif); letter-spacing:-.01em; }
.login-form>p:first-of-type { margin-top:10px; font-size:var(--type-body); color:var(--soft); }
.login-form form { margin-top:34px; display:grid; gap:22px; }
.field label { display:block; margin-bottom:2px; color:var(--soft); font-size:var(--type-caption); font-weight:500; }
.field input { width:100%; border:0; border-bottom:1px solid var(--control); border-radius:0; background:transparent; padding:11px 0; min-height:46px; font-size:var(--type-body); line-height:1.4; }
.field input:focus { border-color:var(--ink); box-shadow:0 1px 0 var(--ink); }
.password-wrap { position:relative; }
.password-wrap input { padding-right:85px; }
.password-wrap button { position:absolute; right:0; bottom:6px; min-height:36px; padding:4px 0 4px 12px; font-size:var(--type-caption); color:var(--soft); }
.login-options { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:var(--type-body); }
.login-options label { display:inline-flex; align-items:center; gap:10px; min-height:36px; }
.login-options input,.qr-check input { appearance:none; margin:0; width:20px; height:20px; border:1px solid var(--control); border-radius:6px; display:grid; place-content:center; }
.login-options input:checked,.qr-check input:checked { background:var(--ink); border-color:var(--ink); }
.login-options input::after,.qr-check input::after { content:''; width:10px; height:6px; border-left:2px solid var(--bg); border-bottom:2px solid var(--bg); opacity:0; transform:translateY(-1px) rotate(-45deg) scale(0); transition:transform 220ms var(--ease),opacity var(--motion-fast) ease; }
.login-options input:checked::after,.qr-check input:checked::after { opacity:1; transform:translateY(-1px) rotate(-45deg) scale(1); }
.login-options a { text-decoration:underline; text-underline-offset:4px; min-height:36px; display:flex; align-items:center; }
.login-form .primary { width:100%; border-radius:12px; padding:16px; font-size:var(--type-body); }
.login-error { color:var(--error); font-size:var(--type-body); min-height:1.5em; }
.login-error:empty { margin-top:-12px; }
.login-help { margin-top:30px; padding-top:18px; border-top:1px solid var(--line); color:var(--faint); font-size:var(--type-caption); }
.demo-details { margin-top:18px; color:var(--soft); font-size:var(--type-caption); }
.demo-details summary { cursor:pointer; min-height:36px; }
.demo-account-label { display:block; margin:12px 0 6px; font-size:var(--type-caption); }
#demo-account { width:100%; }
.demo-button { display:block; padding:14px 0; font-size:var(--type-body); }
.http-note { margin-top:12px; color:var(--soft); font-size:var(--type-caption); }
/* Apothelic-style horizontal header; course contents have their own local navigation. */
.shell { min-height:100vh; }
.site-header { position:sticky; top:0; z-index:30; background:rgba(239,237,227,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.header-inner { min-height:72px; max-width:var(--wrap); padding:0 24px; margin:auto; display:flex; align-items:center; gap:36px; }
.sidebar { margin-left:auto; }
.nav { display:flex; align-items:center; gap:24px; }
.nav a { position:relative; display:flex; align-items:center; min-height:44px; font-size:var(--type-body); color:var(--soft); white-space:nowrap; }
.nav a:after { content:''; position:absolute; bottom:5px; left:0; width:100%; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.nav a.active { color:var(--ink); }
.nav a.active:after,.nav a:hover:after { transform:scaleX(1); }
.nav a:hover { text-decoration:none!important; }
.header-account { display:flex; align-items:center; gap:4px; }
.account-link { display:flex; align-items:center; gap:10px; min-height:44px; }
.avatar { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--line); border-radius:50%; font-size:var(--type-caption); }
.account-name { font-size:var(--type-caption); max-width:120px; }
.mobile-menu,.menu-overlay { display:none; }
.main { max-width:var(--wrap); padding:44px 24px 28px; margin:auto; }
.main:focus { outline:none; }
.page-eyebrow { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.date-label { font-size:var(--type-caption); color:var(--soft); }
.page-title { font:500 var(--type-title)/1.05 var(--serif); letter-spacing:-.015em; }
.page-description { font-size:var(--type-body); color:var(--soft); margin-top:16px; max-width:48em; }
.welcome { padding:10px 0 40px; }
.dashboard-layout { display:grid; grid-template-columns:1.1fr 1fr; gap:40px; }
.hero-study { background:var(--ink); color:var(--bg); border-radius:var(--radius); padding:36px; display:flex; flex-direction:column; min-width:0; }
.hero-study .kicker { color:#C3C0B5; }
.hero-study h2 { font:500 var(--type-title)/1.05 var(--serif); letter-spacing:-.01em; margin:20px 0 16px; }
.hero-study p { font-size:var(--type-body); color:#D6D3C7; max-width:30em; }
.study-stats { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px; padding-top:20px; border-top:1px solid rgba(239,237,227,.2); }
.study-stats dt { font-size:var(--type-caption); color:#C3C0B5; margin-bottom:6px; }
.study-stats dd { font-size:var(--type-body); }
.hero-link { display:inline-flex; align-self:flex-start; align-items:center; min-height:44px; font-size:var(--type-body); margin-top:22px; }
.rail-title { font:500 var(--type-section)/1.15 var(--serif); margin-bottom:14px; }
.event-item { display:flex; gap:22px; padding:24px 0; border-bottom:1px solid var(--line); }
.event-date { width:48px; flex-shrink:0; text-align:center; }
.event-date strong { display:block; font:500 var(--type-section)/1 var(--serif); }
.event-date span { font-size:var(--type-caption); color:var(--soft); }
.event-item h3 { font:500 var(--type-subtitle)/1.18 var(--serif); }
.event-item p { font-size:var(--type-caption); color:var(--soft); margin:8px 0; }
.event-badge { color:var(--accent); font-size:var(--type-caption); }
.rail-link { display:inline-flex; min-height:44px; align-items:center; font-size:var(--type-body); margin-top:12px; }
.overview-courses { margin-top:72px; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin:0 0 28px; }
.section-heading h2 { font:500 var(--type-section)/1.15 var(--serif); }
.section-heading a { min-height:44px; display:flex; align-items:center; gap:10px; font-size:var(--type-body); }
/* Focus cards: neutral figures, with all editorial text outside the panel. */
.course-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.course-card { position:relative; min-width:0; display:flex; flex-direction:column; }
.course-visual { aspect-ratio:4/3; background:rgba(48,47,44,.045); border-radius:var(--radius); position:relative; overflow:hidden; display:grid; place-items:center; }
.course-code { position:absolute; top:18px; left:20px; right:66px; color:var(--soft); font-size:var(--type-caption); letter-spacing:.04em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.art { display:grid; place-items:center; width:68%; }
.art svg { display:block; width:100%; height:auto; }
.course-card .favorite { position:absolute; top:8px; right:8px; z-index:3; color:var(--soft); }
.favorite.selected { color:var(--accent); }
.favorite.selected svg { fill:var(--accent); }
.course-body { padding:20px 0 0; flex:1; display:flex; flex-direction:column; }
.course-body h3 { font:500 var(--type-subtitle)/1.18 var(--serif); }
.course-card:hover h3 { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.course-teacher { color:var(--soft); font-size:var(--type-body); margin:12px 0 20px; }
.course-progress { display:flex; justify-content:space-between; gap:14px; font-size:var(--type-caption); color:var(--soft); margin-top:auto; }
.progress-track { display:block; appearance:none; height:2px; width:100%; border:0; background:var(--tint); margin-top:10px; }
.progress-track.progress-unavailable { background:repeating-linear-gradient(90deg,var(--line) 0 4px,transparent 4px 8px); }
progress::-webkit-progress-bar { background:var(--tint); }
progress::-webkit-progress-value { background:var(--accent); }
progress::-moz-progress-bar { background:var(--accent); }
.card-open { position:absolute; inset:0; z-index:1; border-radius:var(--radius); }
.card-open:focus-visible { outline-offset:6px; }
.filters { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; margin:36px 0 20px; border-bottom:1px solid var(--line); padding-bottom:16px; }
.tabs { display:flex; align-items:center; gap:24px; }
.tab { min-height:44px; font-size:var(--type-body); color:var(--soft); border-bottom:1px solid transparent; }
.tab.active { color:var(--ink); border-color:var(--accent); }
.search { display:flex; align-items:center; gap:8px; min-width:0; }
.search .icon { width:18px; height:18px; color:var(--soft); }
.search input { width:190px; min-width:0; background:transparent; border:0; padding:10px 4px; min-height:44px; font-size:var(--type-body); }
input::placeholder,textarea::placeholder { color:var(--soft); opacity:1; }
.filter-select { padding:10px; border:1px solid var(--control); border-radius:6px; background:var(--bg); min-height:44px; font-size:var(--type-body); max-width:240px; }
.grid-status { color:var(--soft); font-size:var(--type-caption); margin-bottom:24px; }
#course-results { row-gap:48px; }
.empty { padding:28px; color:var(--soft); font-size:var(--type-body); line-height:1.7; border:1px solid var(--line); border-radius:var(--radius); }
.course-grid>.empty { grid-column:1/-1; }
.error-box { padding:24px; border:1px solid var(--error); border-radius:var(--radius); color:var(--error); font-size:var(--type-body); }
.error-box>p { margin:0; line-height:1.6; }
.error-actions { display:flex; align-items:center; flex-wrap:wrap; column-gap:24px; row-gap:8px; margin-top:14px; color:var(--ink); }
.error-actions>.text-link { min-height:44px; }
.loading { padding:24px 0; color:var(--soft); font-size:var(--type-body); }
.back-link { display:inline-flex; align-items:center; min-height:44px; font-size:var(--type-body); color:var(--soft); margin-bottom:24px; }
.course-header { display:grid; grid-template-columns:1fr 210px; gap:40px; padding-bottom:32px; border-bottom:1px solid var(--line); }
.course-header h1 { font:500 var(--type-title)/1.08 var(--serif); margin:16px 0; max-width:20em; }
.course-header p { max-width:40em; color:var(--soft); font-size:var(--type-body); }
.course-header>.art { width:100%; align-self:center; }
.course-meta { display:flex; flex-wrap:wrap; gap:24px; margin-top:24px; font-size:var(--type-caption); color:var(--soft); }
.course-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:48px; margin-top:36px; }
.section-nav { position:sticky; top:104px; align-self:start; }
.section-nav .kicker { margin-bottom:12px; }
.section-nav a[data-section] { width:100%; text-align:left; min-height:44px; padding:12px 14px; margin-bottom:4px; font-size:var(--type-body); color:var(--soft); border-left:1px solid transparent; }
.section-nav a[data-section].active { color:var(--ink); background:rgba(48,47,44,.045); border-color:var(--accent); }
.section-nav .support { display:inline-flex; min-height:44px; align-items:center; font-size:var(--type-caption); color:var(--soft); margin-top:20px; }
.materials-head h2 { font:500 var(--type-section)/1.1 var(--serif); }
.materials-head p { font-size:var(--type-body); color:var(--soft); margin:12px 0 24px; }
.materials-head p:empty { margin:16px 0; }
.material-row { display:flex; align-items:center; gap:20px; padding:24px 0; border-top:1px solid var(--line); }
.material-icon { width:44px; height:48px; display:grid; place-items:center; flex-shrink:0; background:rgba(48,47,44,.045); border-radius:6px; }
.material-row>div:nth-child(2) { min-width:0; }
.material-name { font:500 var(--type-subtitle)/1.2 var(--serif); text-align:left; min-height:44px; overflow-wrap:anywhere; }
.material-name:hover { text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.material-row p { font-size:var(--type-caption); color:var(--soft); margin-top:4px; }
.completed { margin-left:auto; color:var(--success); display:flex; align-items:center; gap:6px; font-size:var(--type-caption); flex-shrink:0; }
.completed .icon { width:16px; }
.material-files { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.material-files a { font-size:var(--type-caption); text-decoration:underline; text-underline-offset:4px; overflow-wrap:anywhere; }
.calendar-page { display:grid; grid-template-columns:1.1fr 1fr; gap:48px; margin-top:36px; }
.mini-calendar { border:1px solid var(--line); border-radius:var(--radius); padding:28px; align-self:start; }
.calendar-month { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; font-size:var(--type-body); text-transform:capitalize; }
.calendar-month button { min-width:44px; min-height:44px; font-size:var(--type-subtitle); }
.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:12px 4px; text-align:center; font-size:var(--type-body); }
.dayname { color:var(--soft); font-size:var(--type-caption); }
.calendar-day { min-height:40px; display:flex; align-items:center; justify-content:center; position:relative; }
.calendar-day.today { width:40px; height:40px; margin:auto; border-radius:50%; background:var(--ink); color:var(--bg); }
.calendar-day.event:after { content:''; position:absolute; width:4px; height:4px; border-radius:50%; background:var(--accent); bottom:2px; }
.calendar-day.today.event:after { background:var(--bg); }
.calendar-day.empty { padding:0; border:0; opacity:0; }
.grades-table { width:100%; border-collapse:collapse; margin-top:36px; font-size:var(--type-body); }
.grades-table th { text-align:left; font-weight:500; font-size:var(--type-caption); letter-spacing:.04em; text-transform:uppercase; padding:14px 16px; color:var(--soft); border-bottom:1px solid var(--line); }
.grades-table td { padding:24px 16px; border-bottom:1px solid var(--line); }
.grades-table td:first-child { width:65%; font:500 var(--type-subtitle)/1.2 var(--serif); }
.grade { font:500 var(--type-section) var(--serif); white-space:nowrap; }
/* Chat uses the same paper, hairlines and typography; crypto behavior is independent. */
.crypto-tools { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:28px; font-size:var(--type-caption); color:var(--soft); }
.crypto-tools>span { margin-right:auto; }
.crypto-tools button { font-size:var(--type-caption); }
.chat-layout { display:grid; grid-template-columns:280px minmax(0,1fr); margin-top:20px; border:1px solid var(--line); border-radius:var(--radius); min-height:550px; overflow:hidden; }
.chat-rooms-panel { min-width:0; border-right:1px solid var(--line); }
.people-search { padding:12px 16px; gap:6px; border-bottom:1px solid var(--line); }
.people-search input { width:100%; font-size:var(--type-body); }
.people-search button { width:36px; min-height:44px; font-size:var(--type-subtitle); flex-shrink:0; }
.chat-rooms { padding:8px; }
.chat-room { width:100%; text-align:left; padding:16px 12px; margin-bottom:4px; border-radius:6px; font-size:var(--type-body); }
.chat-room.active { background:var(--tint); }
.chat-room small { display:block; font-size:var(--type-caption); color:var(--soft); margin-top:6px; }
.chat-rooms .empty { font-size:var(--type-body); padding:16px; }
.chat-conversation { background:var(--paper); display:flex; flex-direction:column; min-width:0; }
.chat-conversation>.empty { margin:auto; border:0; max-width:34em; }
.chat-heading { padding:20px 24px; border-bottom:1px solid var(--line); font:500 var(--type-subtitle)/1.15 var(--serif); }
.chat-heading small { display:block; margin-top:8px; font:var(--type-caption)/1.5 var(--sans); color:var(--soft); }
.crypto-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 24px; border-bottom:1px solid var(--line); color:var(--soft); font-size:var(--type-caption); }
.crypto-bar .text-link { font-size:var(--type-caption); flex-shrink:0; }
.messages { height:330px; overflow-y:auto; padding:24px; display:flex; flex-direction:column; gap:20px; }
.message { max-width:85%; align-self:flex-start; }
.message.own { align-self:flex-end; }
.message-meta { color:var(--soft); font-size:var(--type-caption); margin-bottom:6px; }
.bubble { background:var(--tint); padding:12px 16px; border-radius:8px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:var(--type-body); }
.own .bubble { background:var(--ink); color:var(--bg); }
.delivery-status { color:var(--soft); font-size:var(--type-caption); margin-top:6px; text-align:right; }
.delivery-status .text-link { font-size:var(--type-caption); }
.chat-form { display:flex; align-items:flex-end; gap:16px; padding:16px 24px; border-top:1px solid var(--line); margin-top:auto; }
.chat-form textarea { flex:1; min-width:0; min-height:48px; max-height:160px; background:transparent; border:0; resize:vertical; padding:12px 0; font-size:var(--type-body); }
.chat-form .primary { gap:12px; }
.chat-footnote { padding:0 24px 16px; color:var(--soft); font-size:var(--type-caption); }
.crypto-error { color:var(--error); font-size:var(--type-body); margin-top:16px; }
.safety-code { font:var(--type-body)/1.8 ui-monospace,monospace; letter-spacing:1px; padding:20px; background:var(--tint); margin:20px 0; overflow-wrap:anywhere; }
#crypto-dialog>p { margin-bottom:20px; }
.integrity-error .bubble { color:var(--error); background:var(--tint); border:1px solid var(--error); }
.settings-panel { margin-top:36px; max-width:760px; }
.settings-panel h2 { font:500 var(--type-section)/1.15 var(--serif); margin:32px 0 14px; padding-top:28px; border-top:1px solid var(--line); }
.settings-panel h2:first-child { margin-top:0; }
.settings-panel p { font-size:var(--type-body); color:var(--soft); margin:12px 0; }
.settings-panel a { margin-top:24px; }
dialog { max-width:800px; width:calc(100% - 32px); max-height:86vh; padding:48px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); color:var(--ink); }
dialog::backdrop { background:rgba(48,47,44,.55); }
.reader-close { position:absolute; top:12px; right:12px; font-size:var(--type-subtitle); }
dialog h2 { font:500 var(--type-section)/1.1 var(--serif); margin:12px 0 24px; }
.reader-text { font-size:var(--type-body); white-space:pre-wrap; line-height:1.8; margin-bottom:28px; }
#toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%,12px); background:var(--ink); color:var(--bg); padding:14px 22px; border-radius:8px; font-size:var(--type-body); opacity:0; pointer-events:none; z-index:100; transition:.2s; max-width:90vw; }
#toast.show { opacity:1; transform:translate(-50%,0); }
@media(max-width:1100px) {
 .header-inner { gap:24px; } .nav { gap:18px; } .account-name { display:none; }
 .course-grid { gap:28px; } .dashboard-layout { gap:32px; }
 .hero-study { padding:28px; } .hero-study h2 { font-size:var(--type-section); }
 .login-side { padding:40px; }
}
@media(max-width:899px) {
 .login-layout { grid-template-columns:1fr; }
 .login-story { height:400px; min-height:400px; padding:100px 24px 76px; }
 .login-story .brand { left:28px; top:20px; }
 .story-center h2 { font-size:var(--type-title); }
 .story-center p { font-size:var(--type-subtitle); max-width:22em; }
 .story-footer { left:28px; bottom:20px; }
 .login-side { padding:44px 24px 56px; }
 .course-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .dashboard-layout { grid-template-columns:1fr 1fr; gap:28px; }
 .hero-study h2 { font-size:var(--type-section); }
 .study-stats { grid-template-columns:1fr; gap:16px; }
 .event-item { gap:12px; } .event-item h3 { font-size:var(--type-subtitle); }
 .course-layout { grid-template-columns:185px minmax(0,1fr); gap:28px; }
 .course-header { grid-template-columns:1fr 140px; gap:24px; }
 .calendar-page { gap:28px; }
 .chat-layout { grid-template-columns:230px minmax(0,1fr); }
}
@media(max-width:860px) {
 .header-inner { min-height:64px; padding:0 16px; gap:12px; justify-content:space-between; }
 .header-account { margin-left:auto; } .account-link { display:none; } .brand { font-size:var(--type-subtitle); }
 .mobile-menu { display:inline-flex; }
 .sidebar { position:fixed; left:0; right:0; top:64px; background:var(--bg); padding:20px 24px 28px; transform:translateY(-12px); opacity:0; visibility:hidden; border-bottom:1px solid var(--line); z-index:31; transition:opacity var(--motion-base) ease,transform var(--motion-slow) var(--ease),visibility 0s var(--motion-base); }
 .nav { display:grid; gap:4px; } .nav a { font-size:var(--type-body); min-height:48px; width:max-content; }
 .shell.menu-open .sidebar { transform:none; opacity:1; visibility:visible; transition-delay:0s; }
 .menu-overlay { display:block; position:fixed; inset:64px 0 0; background:rgba(48,47,44,.45); z-index:29; opacity:0; visibility:hidden; pointer-events:none; transition:opacity var(--motion-base) ease,visibility 0s var(--motion-base); }
 .shell.menu-open .menu-overlay { opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
 .main { padding:32px 16px 24px; }
 .page-title { font-size:var(--type-title); } .page-eyebrow { margin-bottom:16px; } .date-label { display:none; }
 .page-description { font-size:var(--type-body); }
 .welcome { padding:0 0 28px; }
 .dashboard-layout { grid-template-columns:1fr; gap:32px; }
 .hero-study { padding:28px 24px; } .hero-study h2 { font-size:var(--type-section); }
 .study-stats { grid-template-columns:1fr 1fr; gap:16px; }
 .overview-courses { margin-top:48px; }
 .section-heading { margin-bottom:24px; gap:16px; } .section-heading h2 { font-size:var(--type-section); } .section-heading a { font-size:var(--type-body); }
 .course-grid { grid-template-columns:1fr; gap:36px; }
 .course-body h3 { font-size:var(--type-subtitle); } .course-code { font-size:var(--type-caption); }
 .course-teacher { margin-bottom:16px; }

 .filters { margin-top:28px; gap:12px; } .tabs { gap:20px; width:100%; }
 .search { flex:1; border-bottom:1px solid var(--control); } .search input { width:100%; }
 .filter-select { max-width:48%; font-size:var(--type-caption); }
 .course-header { grid-template-columns:1fr; } .course-header>.art { display:none; }
 .course-header h1 { font-size:var(--type-section); } .course-meta { gap:12px 20px; }
 .course-layout { display:block; margin-top:28px; }
 .section-nav { position:static; display:flex; gap:16px; overflow:auto; margin-bottom:28px; padding-bottom:8px; }
 .section-nav .kicker,.section-nav .support { display:none; }
 .section-nav a[data-section] { flex-shrink:0; width:auto; max-width:240px; border-left:0; border-bottom:1px solid transparent; padding:10px 12px; margin:0; }
 .section-nav a[data-section].active { border-color:var(--accent); }
 .materials-head h2 { font-size:var(--type-section); }
 .material-row { gap:14px; padding:20px 0; } .material-name { font-size:var(--type-subtitle); }
 .completed span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } .material-icon { width:36px; }
 .calendar-page { grid-template-columns:1fr; gap:36px; } .mini-calendar { padding:20px 16px; } .calendar-grid { gap:8px 2px; }
 .grades-table th,.grades-table td { padding:18px 8px; } .grades-table th:nth-child(2),.grades-table td:nth-child(2) { display:none; }
 .grades-table td:first-child { font-size:var(--type-subtitle); } .grade { font-size:var(--type-subtitle); }
 .chat-layout { display:block; min-height:540px; }
 .chat-rooms-panel { border-right:0; border-bottom:1px solid var(--line); }
 .people-search { padding:10px 16px; border-bottom:1px solid var(--line); }
 .chat-rooms { display:flex; gap:6px; overflow-x:auto; }
 .chat-room { flex-shrink:0; width:180px; margin:0; padding:12px; font-size:var(--type-body); }
 .chat-room span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .chat-heading { padding:18px 16px; font-size:var(--type-subtitle); }
 .crypto-tools { gap:12px 20px; } .crypto-tools>span { width:100%; }
 .crypto-bar { padding:10px 16px; gap:12px; }
 .messages { height:350px; padding:20px 16px; } .message { max-width:92%; }
 .chat-form { padding:12px 16px; gap:12px; } .chat-form .primary { min-width:48px; padding:12px; } .chat-form .primary span { display:none; }
 .chat-footnote { padding:0 16px 14px; }
 dialog { padding:48px 24px 28px; } dialog h2 { font-size:var(--type-section); } .safety-code { font-size:var(--type-body); }
 .login-story { height:380px; min-height:380px; margin:10px; } .story-center h2 { font-size:var(--type-title); }
 .story-center p { font-size:var(--type-subtitle); } .story-footer { font-size:var(--type-caption); }
 .login-form h1 { font-size:var(--type-title); } .login-options { font-size:var(--type-caption); }
}
/* Motion follows the original references: restrained fades, 5–12px travel, drawn lines. */
a,button,.field label,.login-options label { transition:color var(--motion-fast) ease; }
.primary { transition:opacity var(--motion-fast) ease,transform 150ms var(--ease),background-color var(--motion-fast) ease; }
.icon-button { transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease; }
.favorite .icon { transition:fill 220ms ease,stroke 220ms ease,transform 220ms var(--ease); }
.favorite.selected .icon { transform:scale(1.08); }
.login-options input,.qr-check input { cursor:pointer; flex-shrink:0; transition:background-color 200ms ease,border-color 200ms ease; }
.login-options label { cursor:pointer; color:var(--soft); }
.login-options label:hover,.login-options label:focus-within { color:var(--ink); }
.login-options label:hover input { border-color:var(--ink); }
/* Line-based controls have their own focus indicator, including when reached with Tab. */
.field input:not([type=file]),.search input,.chat-form textarea { outline:none; appearance:none; transition:border-color 250ms ease,box-shadow 250ms ease; }
.field input:not([type=file]):focus-visible,.search input:focus-visible,.chat-form textarea:focus-visible { outline:none; }
.field input:hover { border-color:var(--soft); }
.field input:focus,.field input:focus-visible { border-color:var(--ink); box-shadow:0 1px 0 var(--ink); }
.field:focus-within label { color:var(--ink); }
.field input[aria-invalid=true] { border-color:var(--error); box-shadow:0 1px 0 var(--error); }
/* Retain the autofill surface when focus rules add the bottom indicator. */
.field input:is(:autofill,:-webkit-autofill) {
 -webkit-text-fill-color:var(--ink); caret-color:var(--ink);
 -webkit-box-shadow:0 0 0 1000px var(--tint) inset;
 box-shadow:0 0 0 1000px var(--tint) inset;
 transition:border-color 250ms ease;
}
.field input:is(:autofill,:-webkit-autofill):is(:focus,:focus-visible,:active) {
 -webkit-box-shadow:0 0 0 1000px var(--tint) inset,0 1px 0 var(--ink);
 box-shadow:0 0 0 1000px var(--tint) inset,0 1px 0 var(--ink);
}
.field input:is(:autofill,:-webkit-autofill)[aria-invalid=true] {
 -webkit-box-shadow:0 0 0 1000px var(--tint) inset,0 1px 0 var(--error);
 box-shadow:0 0 0 1000px var(--tint) inset,0 1px 0 var(--error);
}
.search { border-bottom:1px solid var(--control); transition:border-color 250ms ease,box-shadow 250ms ease; }
.search:focus-within { border-bottom-color:var(--ink); box-shadow:0 1px 0 var(--ink); }
.chat-form textarea:focus { box-shadow:0 1px 0 var(--ink); }
.filter-select { transition:border-color 250ms ease,box-shadow 250ms ease; }
.filter-select:focus-visible { outline:none; border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.password-wrap button:hover { color:var(--ink); }
.password-wrap button:focus-visible { outline:none; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px; }
.nav a:focus-visible { outline:none; color:var(--ink); }
.nav a:focus-visible:after { transform:scaleX(1); height:2px; }
.nav a:after { transition:transform 350ms var(--ease); }
.tab { transition:color var(--motion-fast) ease,border-color var(--motion-base) ease; }
.section-nav a[data-section],.chat-room { transition:background-color var(--motion-base) ease,color var(--motion-fast) ease,border-color var(--motion-base) ease; }
.text-link,.login-alternative,.hero-link,.rail-link,.back-link,.section-heading a,.demo-button,.material-files a,.section-nav .support { text-decoration:none; text-underline-offset:6px; text-decoration-thickness:1px; padding-bottom:6px; background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat; transition:background-size 350ms var(--ease),color var(--motion-fast) ease; }
.text-link:hover,.login-alternative:hover,.hero-link:hover,.rail-link:hover,.back-link:hover,.section-heading a:hover,.demo-button:hover,.material-files a:hover,.section-nav .support:hover,
.text-link:focus-visible,.login-alternative:focus-visible,.hero-link:focus-visible,.rail-link:focus-visible,.back-link:focus-visible,.section-heading a:focus-visible { background-size:100% 1px; text-decoration:none!important; }
.login-story .brand { animation:soft-in 500ms var(--ease) both; }
.story-center { animation:soft-in 600ms 60ms var(--ease) both; }
.story-footer { animation:soft-in 550ms 120ms var(--ease) both; }
.login-form { animation:soft-in 550ms 80ms var(--ease) both; }
.constellation .tw { animation:twinkle 6s ease-in-out infinite; }
.constellation .tw.b { animation-delay:-3s; }
.demo-details summary { display:flex; align-items:center; gap:8px; list-style:none; }
.demo-details summary::-webkit-details-marker { display:none; }
.demo-details summary::before { content:'›'; font-size:var(--type-subtitle); line-height:1; display:inline-block; transition:transform var(--motion-base) var(--ease); }
.demo-details.disclosure-open summary::before { transform:rotate(90deg); }
.demo-content { overflow:hidden; padding:0 4px; margin:0 -4px; }
.login-error:not(:empty),.error-box { animation:soft-in var(--motion-base) var(--ease) both; }
.menu-glyph { display:block; width:20px; height:16px; position:relative; }
.menu-glyph i { position:absolute; left:0; width:20px; height:1.5px; background:currentColor; top:4px; transition:top var(--motion-base) var(--ease),transform var(--motion-base) var(--ease); }
.menu-glyph i:last-child { top:11px; }
.menu-open .menu-glyph i { top:7.5px; transform:rotate(45deg); }
.menu-open .menu-glyph i:last-child { transform:rotate(-45deg); }
dialog[open]:not([data-closing]) { animation:dialog-in var(--motion-base) var(--ease) both; }
dialog[open]::backdrop { animation:backdrop-in var(--motion-fast) ease both; }
dialog[data-closing]::backdrop { animation:backdrop-out 160ms ease both; }
#toast { transition:opacity var(--motion-base) ease,transform var(--motion-base) var(--ease); }
@keyframes soft-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes dialog-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes backdrop-out { from { opacity:1; } to { opacity:0; } }
@keyframes twinkle { 0%,100% { opacity:1; } 50% { opacity:.35; } }
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

/* Focused tools fill the viewport; only their working regions scroll. */
.viewport-body { overflow:hidden; }
.viewport-page { height:100dvh; min-height:0; display:flex; flex-direction:column; }
.viewport-page .site-header { flex:none; }
.viewport-page .main { width:100%; flex:1; min-height:0; margin:0 auto; display:flex; flex-direction:column; padding-top:28px; padding-bottom:24px; overflow:hidden; }
.viewport-page .page-title { font-size:var(--type-section); flex:none; }
.viewport-page .page-description { display:none; }
.chat-page-heading { display:flex; justify-content:space-between; gap:20px; align-items:center; flex:none; }
.key-menu { position:relative; font-size:var(--type-caption); color:var(--soft); }
.key-menu summary { cursor:pointer; min-height:44px; display:flex; align-items:center; }
.key-menu>div { position:absolute; z-index:5; right:0; top:44px; width:190px; padding:16px 20px; background:var(--paper); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(48,47,44,.07); animation:soft-in 200ms var(--ease); }
.key-menu button { display:block; width:100%; text-align:left; margin:2px 0; }
.chat-key-error:empty { display:none; }
.chat-key-error { color:var(--error); font-size:var(--type-caption); flex:none; }
.viewport-page .chat-layout { flex:1; min-height:0; margin-top:20px; }
.chat-rooms-panel { display:flex; flex-direction:column; min-height:0; }
.chat-rooms { overflow:auto; min-height:0; overscroll-behavior:contain; }
.chat-conversation { min-height:0; }
.chat-heading,.crypto-bar,.chat-form { flex:none; }
.viewport-page .messages { height:auto; flex:1; min-height:0; overscroll-behavior:contain; }
.viewport-page .calendar-page { flex:1; min-height:0; margin-top:24px; overflow:auto; overscroll-behavior:contain; }
.calendar-events { display:flex; flex-direction:column; min-height:0; }
.calendar-event-list { overflow:auto; min-height:0; overscroll-behavior:contain; }
.material-page { max-width:840px; margin:0 auto; }
.material-page h1 { font:500 var(--type-title)/1.08 var(--serif); margin:12px 0 32px; }
.material-course,.files-owner { color:var(--soft); font-size:var(--type-body); }
.rich-content { font-size:var(--type-body); line-height:1.85; overflow-wrap:anywhere; }
.rich-content p,.rich-content ul,.rich-content ol,.rich-content blockquote,.rich-content pre { margin:0 0 20px; }
.rich-content li { padding-left:6px; margin-bottom:10px; }
.rich-content h1,.rich-content h2,.rich-content h3 { font-size:var(--type-section); margin:28px 0 16px; }
.rich-content a { text-decoration:underline; text-underline-offset:4px; }
.rich-content pre { padding:20px; background:var(--tint); overflow:auto; }
.rich-content table { border-collapse:collapse; display:block; overflow:auto; max-width:100%; }
.rich-content td,.rich-content th { border:1px solid var(--line); padding:10px; }
.file-list,.selected-files { list-style:none; padding:0; margin:24px 0; }
.file-list li { display:flex; align-items:center; gap:20px; justify-content:space-between; border-top:1px solid var(--line); padding:16px 0; font-size:var(--type-body); }
.file-list a,.folder-link { overflow-wrap:anywhere; text-align:left; min-height:32px; display:inline-flex; align-items:center; }
.file-list span { color:var(--soft); font-size:var(--type-caption); white-space:nowrap; }
.assignment-answer { margin-top:40px; padding-top:28px; border-top:1px solid var(--line); }
.assignment-answer .section-heading { margin-bottom:20px; }
.answer-status { display:flex; gap:28px 40px; flex-wrap:wrap; margin-bottom:24px; font-size:var(--type-body); }
.assignment-feedback { padding:24px; margin:24px 0; background:var(--tint); border-radius:var(--radius); }
.assignment-feedback h3 { font-size:var(--type-subtitle); margin-bottom:16px; }
.feedback-date { color:var(--soft); font-size:var(--type-caption); margin:-8px 0 16px; }
.assignment-feedback .rich-content:last-child p:last-child { margin-bottom:0; }
.answer-comments { margin:24px 0; }
.answer-comments summary { display:flex; align-items:center; justify-content:space-between; cursor:pointer; min-height:44px; list-style:none; font-size:var(--type-body); }
.answer-comments summary::-webkit-details-marker { display:none; }
.answer-comments summary .icon { transition:transform 350ms var(--ease); }
.answer-comments.disclosure-open summary .icon { transform:rotate(180deg); }
.answer-comments-body { overflow:hidden; }
.comment-actions { display:flex; justify-content:flex-end; }
.answer-comment { padding:20px 0; border-top:1px solid var(--line); }
.comment-author { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:12px; font-size:var(--type-body); }
.comment-author time { color:var(--soft); font-size:var(--type-caption); }
.answer-comment .rich-content p:last-child { margin-bottom:0; }
.answer-status dt { color:var(--soft); font-size:var(--type-caption); margin-bottom:6px; }
.upload-form { border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin-top:24px; }
.file-picker { position:relative; display:inline-flex; align-items:center; min-height:44px; border:1px solid var(--control); padding:8px 18px; border-radius:8px; cursor:pointer; font-size:var(--type-body); transition:border-color 200ms ease,background-color 200ms ease; }
.file-picker:hover { background:var(--tint); }
.file-picker:focus-within { outline:2px solid var(--accent); outline-offset:3px; }
.file-picker input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.selected-files:empty { display:none; }
.selected-files li { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:var(--type-body); border-bottom:1px solid var(--line); padding:8px 0; }
.selected-files span { overflow-wrap:anywhere; }
.selected-files small { color:var(--soft); margin-left:8px; }
.selected-files button { min-width:44px; min-height:44px; font-size:var(--type-subtitle); }
.upload-status,.upload-note { font-size:var(--type-caption); color:var(--soft); }
.upload-status:empty { display:none; }
.upload-status:not(:empty) { display:block; margin-top:16px; }
.upload-error { color:var(--error); font-size:var(--type-body); margin-top:12px; }
.upload-error:empty { display:none; }
.upload-note { margin-top:14px; }
.submit-answer { margin-top:28px; }
.submit-answer label { display:flex; gap:10px; margin:16px 0; font-size:var(--type-body); }
.source-link { margin-top:28px; color:var(--soft); }
.personal-files { width:100%; max-width:none; margin:36px 0 0; }
.files-owner { margin-top:12px; }
.account-profile { display:flex; align-items:center; gap:20px; margin-top:32px; }
.account-profile .avatar { width:64px; height:64px; font-size:var(--type-subtitle); }
.account-profile h2 { font-size:var(--type-section); }
.account-profile>div { min-width:0; }
.account-profile h2 { overflow-wrap:anywhere; }
.account-profile p { font-size:var(--type-body); color:var(--soft); margin-top:4px; }
.account-sessions { margin-left:auto; flex-shrink:0; }
.sessions-panel { margin-top:32px; }
.session-row { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px 0; border-bottom:1px solid var(--line); }
.session-row h3 { display:flex; gap:16px; align-items:center; flex-wrap:wrap; font:500 var(--type-body)/1.4 var(--sans); }
.session-row p { margin-top:6px; color:var(--soft); font-size:var(--type-caption); }
.session-row .secondary { flex-shrink:0; font-size:var(--type-body); }
.session-current { font:500 var(--type-caption)/1.4 var(--sans); color:var(--success); }
.embedded-files { margin:40px 0 0; }
.file-quota { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; font-size:var(--type-body); }
.file-quota span { color:var(--soft); font-size:var(--type-caption); }
.file-search { margin-top:28px; width:100%; border-bottom:1px solid var(--control); }
.file-search input { width:100%; min-width:0; }
.file-count { font-size:var(--type-caption); color:var(--soft); margin-top:16px; min-height:20px; }
.personal-file-list { padding:0; margin:16px 0 0; list-style:none; }
.personal-file-list a,.personal-file-list .folder-link { display:flex; gap:12px; align-items:center; min-width:0; flex:1; }
.personal-file-list .file-name { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.personal-file-list a>.icon:last-child { margin-left:auto; }
.personal-file-list li>span { flex-shrink:0; white-space:nowrap; color:var(--soft); font-size:var(--type-caption); }
.folder-link { display:flex; gap:12px; align-items:center; }
.files-toggle,.selected-toggle { margin-top:16px; }
.upload-dropzone { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.upload-dropzone>.primary { margin-left:auto; min-height:44px; padding:8px 18px; font-size:var(--type-body); }
.drop-hint { font-size:var(--type-caption); color:var(--soft); }
.upload-form { transition:background-color 250ms ease,border-color 250ms ease; }
.upload-form.drag-over { background:var(--tint); border-color:var(--accent); }
@media(max-width:700px) {
 .upload-dropzone { gap:12px; flex-wrap:nowrap; }
 .upload-dropzone .drop-hint { display:none; }
 .upload-dropzone .file-picker,.upload-dropzone>.primary { padding:8px 12px; white-space:nowrap; }
 .account-profile { flex-wrap:wrap; }
 .account-sessions { margin:0; }
 .session-row { align-items:start; flex-direction:column; gap:16px; }
 .session-row h3 { gap:8px; }
}
.calendar-detail { margin-top:28px; max-width:760px; }
.calendar-detail p { margin:20px 0; }
[hidden] { display:none!important; }
@media(max-width:860px) {
 .viewport-page .main { padding:20px 16px 16px; }
 .viewport-page .page-title { font-size:var(--type-section); }
 .viewport-page .chat-layout { display:flex; flex-direction:column; }
 .viewport-page .chat-rooms-panel { flex:none; }
 .viewport-page .chat-rooms { max-height:94px; }
 .viewport-page .chat-conversation { flex:1; }
 .viewport-page .chat-heading { padding:12px 16px; font-size:var(--type-subtitle); }
 .viewport-page .crypto-bar { padding:6px 16px; }
 .viewport-page .calendar-page { grid-template-columns:1fr; gap:24px; }
 .calendar-event-list { overflow:visible; }
 .upload-form { padding:20px; }
 .assignment-answer .section-heading { align-items:start; flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) { .key-menu>div { animation:none; } }
/* Lucide: one grid, stroke and optical size throughout application controls. */
.icon { stroke-width:1.65; }
.file-list a,.file-picker { gap:10px; }
.file-list a .icon { width:16px; height:16px; }
.selected-files button { display:grid; place-items:center; }
.calendar-month button { display:inline-grid; place-items:center; }
.native-select { display:none!important; }
.custom-select { position:relative; min-width:0; max-width:240px; width:max-content; }
.select-trigger { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:44px; padding:10px 14px; border:1px solid var(--control); border-radius:8px; font-size:var(--type-body); transition:background-color 220ms ease,border-color 250ms ease; }
.select-trigger>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.select-trigger>.icon { width:16px; height:16px; transition:transform 320ms var(--ease); }
.select-trigger:hover { background:rgba(48,47,44,.035); }
.select-trigger:focus-visible { outline:none; border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.select-open .select-trigger>.icon { transform:rotate(180deg); }
.select-options { position:absolute; right:0; top:calc(100% + 6px); min-width:100%; width:max-content; max-width:min(300px,calc(100vw - 32px)); max-height:min(300px,45dvh); overflow:auto; overscroll-behavior:contain; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:6px; box-shadow:0 12px 32px rgba(48,47,44,.09); z-index:20; }
.select-options[hidden] { display:none; }
.select-up .select-options { top:auto; bottom:calc(100% + 6px); }
.select-options button { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; padding:10px 12px; width:100%; border-radius:6px; text-align:left; font-size:var(--type-body); transition:background-color 180ms ease; }
.select-options button>span { max-width:24em; }
.select-options button>.icon { width:15px; height:15px; opacity:0; color:var(--accent); }
.select-options button[aria-selected=true]>.icon { opacity:1; }
.select-options button:hover,.select-options button.highlighted { background:var(--tint); }
.custom-select:has(#demo-account) { width:100%; max-width:none; margin-bottom:4px; }
.custom-select:has(#demo-account) .select-options { left:0; right:0; width:100%; max-width:none; }
.mobile-actions { display:none; }
html { scroll-behavior:smooth; scroll-padding-top:88px; }
html.lenis,html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto!important; }
.lenis.lenis-stopped { overflow:hidden; }
.lenis.lenis-smooth iframe { pointer-events:none; }
.menu-lock { overflow:hidden; }
.scroll-enter { opacity:0; transform:translateY(18px); transition:opacity 420ms ease,transform 420ms var(--ease); }
.scroll-enter.in-view { opacity:1; transform:none; }
@media(max-width:860px) {
 .filters .custom-select { max-width:52%; flex-shrink:0; }
 .filters .select-trigger { font-size:var(--type-caption); padding:10px 12px; gap:8px; }
 .shell.menu-open .site-header { background:var(--bg); }
 .site-header { z-index:40; }
 .header-inner { position:relative; z-index:42; background:var(--bg); }
 .header-account #logout { display:none; }
 .sidebar { inset:0; top:0; height:100dvh; padding:calc(64px + 8px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:0; background:var(--bg); transform:none; opacity:1; clip-path:inset(0 0 100% 0); overflow-y:auto; overscroll-behavior:contain; border:0; z-index:41; visibility:hidden; transition:clip-path 420ms cubic-bezier(.7,0,.2,1),visibility 0s 420ms; }
 .shell.menu-open .sidebar { clip-path:inset(0); visibility:visible; transition:clip-path 420ms cubic-bezier(.7,0,.2,1),visibility 0s; }
 .nav { display:flex; flex-direction:column; align-items:stretch; gap:0; }
 .nav a { width:100%; min-height:70px; padding:20px 0; border-bottom:1px solid var(--line); font:500 var(--type-section)/1.15 var(--sans); letter-spacing:-.025em; color:var(--ink); opacity:0; transform:translateY(16px); transition:opacity 350ms ease,transform 350ms var(--ease),color 220ms ease; }
 .nav a:after { display:none; }
 .nav a.active { color:var(--accent); }
 .nav a:focus-visible { background:var(--tint); border-radius:4px; }
 .shell.menu-open .nav a { opacity:1; transform:none; transition:opacity 420ms ease,transform 420ms var(--ease),color 220ms ease; transition-delay:60ms; }
 .shell.menu-open .nav a:nth-child(2) { transition-delay:95ms; }
 .shell.menu-open .nav a:nth-child(3) { transition-delay:130ms; }
 .shell.menu-open .nav a:nth-child(4) { transition-delay:165ms; }
 .shell.menu-open .nav a:nth-child(5) { transition-delay:200ms; }
 .shell.menu-open .nav a:nth-child(6) { transition-delay:235ms; }
 .mobile-actions { display:grid; gap:12px; margin-top:auto; padding-top:28px; opacity:0; transform:translateY(16px); transition:opacity 350ms ease,transform 350ms var(--ease); }
 .mobile-actions .primary,.mobile-actions .secondary { width:100%; text-align:center; min-height:50px; font-size:var(--type-body); border-radius:10px; }
 .shell.menu-open .mobile-actions { opacity:1; transform:none; transition:opacity 600ms 560ms ease,transform 700ms 560ms var(--ease); }
 .shell.menu-open .menu-overlay { display:none; }
 .menu-glyph i { width:22px; transition:top 500ms cubic-bezier(.7,0,.2,1),transform 500ms cubic-bezier(.7,0,.2,1); }
 .menu-glyph i:last-child { width:16px; transition:top 500ms cubic-bezier(.7,0,.2,1),transform 500ms cubic-bezier(.7,0,.2,1),width 500ms cubic-bezier(.7,0,.2,1); }
 .menu-open .menu-glyph i:last-child { width:22px; }
 .viewport-body .sidebar { min-height:0; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 .scroll-enter { opacity:1; transform:none; }
 .shell.menu-open .nav a,.shell.menu-open .mobile-actions { transition:none; }
}
@media(max-width:860px) {
 .header-inner>.brand,.header-account { position:relative; z-index:42; }
 .menu-glyph { width:24px; height:24px; }
 .menu-glyph .icon { position:absolute; inset:0; width:24px; height:24px; transition:opacity 350ms ease,transform 500ms cubic-bezier(.7,0,.2,1); }
 .menu-glyph .icon:last-child { opacity:0; transform:rotate(-45deg) scale(.8); }
 .menu-open .menu-glyph .icon:first-child { opacity:0; transform:rotate(45deg) scale(.8); }
 .menu-open .menu-glyph .icon:last-child { opacity:1; transform:none; }
}
@media(max-width:860px) {
 .header-inner { border-bottom:1px solid var(--line); }
 .mobile-menu:hover { background:none; }
}
@media(max-width:860px) {
 .mobile-menu:focus-visible { outline:none; background:var(--tint); box-shadow:inset 0 0 0 1px var(--control); }
}
/* Device login follows the same paper, rules and typography as the form. */
.login-stage { position:relative; margin-top:34px; }
.login-stage-changing { overflow:hidden; }
.login-panel { width:100%; }
.login-stage form { margin-top:0; }
.login-alternative { display:flex; justify-content:center; align-items:center; width:fit-content; min-height:44px; margin:6px auto 0; font-size:var(--type-body); color:var(--soft); }
.login-alternative:hover,.login-alternative:focus-visible { color:var(--ink); }
.qr-panel { margin-top:0; }
.qr-panel>p:first-child { color:var(--soft); font-size:var(--type-body); }
.qr-image { position:relative; margin:20px auto 12px; width:min(clamp(192px,28dvh,224px),100%); aspect-ratio:1; background:var(--paper); border-radius:4px; }
.qr-image:empty::after { content:''; position:absolute; inset:calc(50% - 12px); border:1px solid var(--line); border-top-color:var(--soft); border-radius:50%; animation:qr-loading 1.4s linear infinite; }
.qr-unavailable .qr-image:empty::after { display:none; }
.qr-panel .qr-code { min-height:42px; opacity:0; transition:opacity 420ms var(--ease); }
.qr-panel.qr-ready .qr-code { opacity:1; }
.qr-panel .qr-status { min-height:44px; }
.qr-image svg { animation:soft-in 420ms var(--ease) both; }
@keyframes qr-loading { to { transform:rotate(360deg); } }
.qr-image svg { display:block; width:100%; height:auto; background:var(--paper); fill:var(--ink); shape-rendering:crispEdges; }
.qr-code { text-align:center; font:500 var(--type-section)/1.3 var(--sans); letter-spacing:.12em; margin:8px 0; font-variant-numeric:tabular-nums; }
.qr-status { font-size:var(--type-body); color:var(--soft); text-align:center; }
.qr-renew-slot { min-height:36px; display:grid; justify-items:center; }
.qr-renew { display:flex; margin:0 auto; }
.qr-local-note,.qr-signin-note { color:var(--soft); font-size:var(--type-caption); margin-top:20px; }
.qr-confirm { max-width:640px; margin:32px 0 0; }
.qr-confirm h2 { font-size:var(--type-section); }
.qr-confirm p { margin-top:16px; }
.qr-origin { color:var(--soft); overflow-wrap:anywhere; }
.qr-confirm>.qr-code { text-align:left; font-size:var(--type-section); margin:28px 0; }
.qr-check { display:flex; gap:12px; align-items:center; font-size:var(--type-body); }
.qr-check input { accent-color:var(--ink); width:20px; height:20px; flex-shrink:0; }
.qr-confirm-actions { display:flex; gap:16px; flex-wrap:wrap; margin-top:28px; }

/* Shared type roles and interaction geometry. No page-specific font sizes. */
.field input,.search input,.chat-form textarea { font-size:var(--type-input); }
.field label,.password-wrap button,.course-teacher,.material-course,.event-item p { font-size:var(--type-body); }
.page-title,.login-form h1,.course-header h1,.material-page h1 { font-size:var(--type-title); line-height:1.08; }
.story-center h2 { font-size:var(--type-display); }
.hero-study h2 { font-size:var(--type-title); margin-top:0; }
.section-heading h2,.materials-head h2,.rail-title,.account-profile h2,dialog h2 { font-size:var(--type-section); line-height:1.15; }
.course-body h3,.material-name,.event-item h3,.assignment-feedback h3,.chat-heading { font-size:var(--type-subtitle); line-height:1.25; }
.tiny,.course-code,.course-progress,.grid-status,.grade-empty,.delivery-status,.upload-note,.feedback-date { font-size:var(--type-caption); }
.rich-content { font-size:var(--type-body); line-height:1.85; }
.rich-content h1,.rich-content h2 { font-size:var(--type-section); }
.rich-content h3 { font-size:var(--type-subtitle); }
.text-link,.back-link,.hero-link,.rail-link,.section-heading a { min-height:44px; gap:8px; font-size:var(--type-body); }
.primary { gap:8px; }
.grid-status { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; margin-bottom:16px; }
.filters .search { flex:1; max-width:320px; }
.filters .search input { width:100%; }
.filters .select-trigger { font-size:var(--type-body); }
.route-pending { opacity:.55; transition:opacity var(--motion-fast) ease; }
.main:not(.route-pending) { opacity:1; }
.section-nav a[data-section] { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:var(--type-body); }
.section-nav a[data-section]:hover { text-decoration:none!important; background:var(--tint); }
.material-name { display:inline-flex; align-items:center; }
.material-breadcrumbs .back-link { gap:8px; }
.material-summary { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; padding:16px 0; margin:-12px 0 28px; border-block:1px solid var(--line); font-size:var(--type-body); color:var(--soft); }
.material-summary .text-link { margin-left:auto; color:var(--ink); }
.assignment-answer { scroll-margin-top:96px; }
.assignment-answer:focus { outline:none; }
.file-list a,.folder-link { flex:1; min-width:0; gap:12px; min-height:44px; }
.file-list .file-name,.selected-files .file-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:var(--type-body); color:var(--ink); }
.file-list li>span,.selected-files small,.selected-files button { flex-shrink:0; }
.selected-files small { color:var(--soft); font-size:var(--type-caption); }
.selected-files .file-name { display:block; }
.upload-check { margin-top:12px; }
.upload-status:not(:empty) { display:block; padding-top:12px; }
.upload-error:empty { display:none; }
.error-box h2 { font-size:var(--type-section); margin-bottom:12px; }
.calendar-month h2 { font-family:var(--sans); font-size:var(--type-subtitle); font-weight:500; }
.month-controls { display:flex; flex-shrink:0; }
.calendar-day { min-height:44px; width:100%; border-radius:8px; transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease; }
.calendar-day.today { width:100%; height:auto; margin:0; border-radius:8px; background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--control); }
.calendar-day.selected { background:var(--ink); color:var(--bg); }
.calendar-day:hover:not(.selected) { background:var(--tint); }
.calendar-day.today.event:after { background:var(--accent); }
.calendar-day.selected.event:after { background:var(--bg); }
.calendar-tools { display:flex; justify-content:space-between; gap:16px; margin-top:16px; }
.event-item>div { flex:1; min-width:0; }
.event-item>.icon { margin-left:auto; }
.event-date { flex-shrink:0; }
.event-badge { font-variant-numeric:tabular-nums; }
.calendar-scope { margin-top:16px; }
.calendar-events .section-heading { margin-bottom:16px; }
.calendar-events .section-heading h2 { font-size:var(--type-subtitle); }
.chat-heading { display:flex; align-items:center; gap:12px; }
.chat-back { display:none; }
.chat-key-error { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:12px 16px; margin-top:12px; background:var(--tint); border-radius:8px; font-size:var(--type-body); }
.chat-key-error .text-link { color:var(--ink); flex-shrink:0; }
.viewport-body:has(.chat-layout) .viewport-page { height:var(--chat-viewport,100dvh); }
.chat-form textarea { max-height:120px; overflow-y:auto; resize:none; }
.chat-rooms-panel,.chat-conversation { overflow:hidden; }
.submit-answer input[type=checkbox] { accent-color:var(--ink); width:20px; height:20px; flex-shrink:0; }
[hidden] { display:none!important; }
@media(max-width:700px) {
 :root { --type-display:48px; --type-title:40px; }
 .story-center h2 { font-size:var(--type-display); }
 .hero-study h2 { font-size:var(--type-section); }
 .viewport-page .page-title { font-size:var(--type-section); }
 .course-grid { gap:40px; }
 .course-body { padding-top:20px; }
 .course-body h3 { font-size:var(--type-subtitle); }
 .course-teacher { margin:12px 0 20px; }
 .section-nav a[data-section] { flex-shrink:0; width:auto; border-left:0; border-bottom:1px solid transparent; white-space:nowrap; }
 .section-nav a[data-section].active { border-bottom-color:var(--accent); }
 .material-summary { gap:8px 16px; }
 .material-summary .text-link { margin-left:0; }
 .file-list li { gap:12px; }
 .calendar-grid { gap:8px 4px; }
 .mini-calendar { padding:16px; }
 .calendar-month h2 { font-size:var(--type-subtitle); }
 .viewport-page .chat-layout { display:flex; margin-top:12px; }
 .viewport-page .chat-rooms-panel { flex:1; border:0; min-height:0; }
 .viewport-page .chat-rooms { flex:1; max-height:none; display:block; overflow-y:auto; padding:8px; }
 .viewport-page .chat-room { width:100%; margin-bottom:4px; }
 .viewport-page .chat-conversation { display:none; }
 .viewport-page .has-conversation .chat-rooms-panel { display:none; }
 .viewport-page .has-conversation .chat-conversation { display:flex; flex:1; }
 .chat-back { display:inline-flex; }
 .chat-heading { padding:8px 12px!important; }
 .crypto-bar { padding:8px 16px; gap:12px; flex-wrap:wrap; }
 .chat-page-heading { gap:12px; }
 .key-menu { font-size:var(--type-caption); }
 .chat-key-error { max-height:150px; overflow:auto; }
 .filters .search { max-width:none; }
}

.messages>.empty { border:0; text-align:center; margin:auto; }
.upload-status { overflow-wrap:anywhere; }

.calendar-month { text-transform:none; }
.calendar-month h2::first-letter { text-transform:uppercase; }
/* Keep the star-panel text away from its fixed brand and footer on narrow phones. */
.login-story { grid-template-rows:minmax(0,1fr); }
.login-options { font-size:var(--type-body); column-gap:8px; }
@media(max-width:360px) {
 .login-story { height:420px; min-height:420px; }
 .filters .search { flex-basis:100%; order:2; }
 .filters .custom-select { width:100%; max-width:none; order:3; }
 .filters .select-options { left:0; right:0; width:100%; max-width:none; }
}