:root{
  --paper:#F4F0E6; --paper-2:#EFE9DB; --ink:#1B1815; --ink-soft:#4A443C;
  --ink-faint:#8C8475; --rule:#D8D0BE; --seal:#CE3B1B; --seal-deep:#A02C12;
  --valid:#1F6B4F; --valid-soft:#2E8765; --gold:#9A7B2E; --shadow:rgba(27,24,21,.12);
  --maxw:1080px; --pad:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");opacity:.045;mix-blend-mode:multiply}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);position:relative;z-index:1;width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--seal);color:var(--paper)}
.serif{font-family:"Fraunces",Georgia,serif}
.mono{font-family:"IBM Plex Mono",monospace}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:400;line-height:1.1;letter-spacing:-.01em}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--seal);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--seal);flex:none}
header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{display:flex;align-items:baseline;gap:8px;font-size:20px}
.brand-sub{font-size:10px;letter-spacing:.28em;color:var(--seal)}
.userbox{display:flex;align-items:center;gap:12px;color:var(--ink-soft)}
.lang{display:inline-flex;border:1px solid var(--rule);border-radius:3px;overflow:hidden}
.lang button{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;padding:5px 9px;background:var(--paper);border:none;cursor:pointer;color:var(--ink-faint)}
.lang button.on{background:var(--ink);color:var(--paper)}
main{flex:1;padding:36px 0 60px}
footer{padding:18px var(--pad);border-top:1px solid var(--rule);color:var(--ink-faint);font-size:11px}
.btn-ghost{font-size:13.5px;font-weight:600;border:1px solid var(--rule);padding:7px 14px;border-radius:3px;background:var(--paper-2)}
.btn-ghost:hover{border-color:var(--ink-soft)}
/* login */
.login-card{max-width:520px;margin:8vh auto 0;background:var(--paper-2);border:1px solid var(--rule);padding:42px 38px;box-shadow:0 18px 50px var(--shadow)}
.sso-stack{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.sso-btn{display:flex;align-items:center;justify-content:center;gap:11px;border:1px solid var(--ink);background:var(--paper);padding:12px 18px;font-weight:600;font-size:15px;border-radius:3px;transition:transform .15s ease, box-shadow .15s ease}
.sso-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px var(--shadow)}
/* catalog */
.grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:760px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
.course-card{display:flex;flex-direction:column;gap:10px;background:var(--paper-2);border:1px solid var(--rule);padding:26px 24px;transition:transform .15s ease, box-shadow .15s ease}
.course-card:hover{transform:translateY(-2px);box-shadow:0 12px 32px var(--shadow)}
.course-card h2{font-size:21px}
.course-card p{color:var(--ink-soft);font-size:14.5px;flex:1}
.card-foot{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--ink-faint);margin-top:6px}
.stamp{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--rule);padding:3px 9px;border-radius:2px;color:var(--ink-soft)}
.stamp.ok{border-color:var(--valid);color:var(--valid)}
.stamp.new{border-color:var(--seal);color:var(--seal)}
/* player */
.player{width:100%;height:min(78vh,860px);border:1px solid var(--rule);background:#fff;box-shadow:0 14px 40px var(--shadow)}
/* admin */
table.admin{width:100%;border-collapse:collapse;font-size:14px;background:var(--paper-2);border:1px solid var(--rule)}
table.admin th{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-align:left;color:var(--ink-faint);border-bottom:1px solid var(--rule);padding:10px 12px}
table.admin td{padding:9px 12px;border-bottom:1px solid var(--rule)}