:root {
  --paper: #eee8f7;
  --paper-deep: #d9c9ed;
  --ink: #261b35;
  --muted: #675a78;
  --orange: #000;
  --red: #7136cf;
  --salmon: #d2b5ed;
  --wood: #1b1029;
  --wood-light: #48256e;
  --line: #6b4a88;
  --chrome-purple: #1c0d2b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 280px; padding: 142px 0 86px; background: var(--paper); color: var(--ink); font-family: "DM Sans", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.page { width: min(1440px, 100%); min-height: max(0px, calc(100vh - 228px)); margin: auto; border: 5px solid var(--orange); border-top-width: 8px; border-bottom-width: 7px; display: flex; flex-direction: column; }
header { position: fixed; z-index: 20; top: 0; left: 50%; width: min(1440px, 100%); transform: translateX(-50%); border: 5px solid var(--orange); border-top-width: 8px; background: var(--chrome-purple) !important; color: #dec9df; box-shadow: 0 7px 18px rgba(18, 8, 30, .32); }
.masthead { height: 57px; display: flex; align-items: center; padding: 0 5.5%; border-bottom: 4px solid #000; }
.logo { display: inline-flex; align-items: center; gap: 15px; font-family: Oswald, sans-serif; font-size: 22px; font-weight: 500; letter-spacing: .04em; white-space: nowrap; }
.logo-wordmark { display: block; height: 23px; width: auto; }
.logo-emblem { width: 46px; height: 46px; display: grid; place-items: center; color: #dec9df; font-size: 33px; filter: grayscale(1); }
.logo-emblem svg { width: 46px; height: 46px; }
.header-tools { min-height: 77px; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 11px 6.6%; }
.main-nav { display: flex; align-items: center; gap: clamp(18px, 4vw, 54px); white-space: nowrap; }
.category-menu { position: relative; }
.nav-item { display: inline-flex; align-items: center; gap: 9px; border: 0; padding: 4px 0; background: transparent; color: #dec9df; font-size: 23px; font-weight: 500; }
.nav-item:hover, .nav-item:focus-visible { color: #efd9e8; }
.nav-icon { width: 34px; height: 34px; border: 2px solid currentColor; border-radius: 50%; display: inline-grid; place-items: center; font-size: 19px; line-height: 1; }
.category-options { position: absolute; z-index: 4; top: calc(100% + 12px); left: 0; display: none; min-width: 250px; overflow: hidden; border: 1px solid #76549b; border-radius: 9px; background: #321c49; box-shadow: 0 12px 28px rgba(31, 16, 48, .3); }
.category-menu.open .category-options { display: grid; }
.category-options button { border: 0; border-bottom: 1px solid #53366f; padding: 12px 15px; background: transparent; color: #f6f0ff; text-align: left; font-size: 13px; transition: background-color .15s ease, color .15s ease; }
.category-options button:last-child { border-bottom: 0; }
.category-options button:hover, .category-options button:focus-visible { background: #7136cf; color: #fff; outline: 0; }
.contact-main { position: relative; isolation: isolate; flex: 1; display: grid; place-items: center; overflow: hidden; padding: 34px 24px; background-color: #352317; background-image: linear-gradient(90deg, rgba(24,13,7,.38), rgba(69,43,25,.14) 18%, rgba(24,13,7,.4) 50%, rgba(69,43,25,.14) 82%, rgba(24,13,7,.38)), repeating-linear-gradient(90deg, transparent 0 8%, rgba(0,0,0,.24) 8.3% 9.2%, transparent 9.5% 16%), repeating-linear-gradient(0deg, #28180f 0 9px, #775338 10px 14px, #432a19 16px 95px, #896445 97px 102px, #24160e 105px 114px); }
.contact-main::before, .contact-main::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.contact-main::before { background: url("https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&fit=crop&w=1800&q=85") center 48% / cover no-repeat; opacity: .3; filter: grayscale(.65) sepia(.55); mix-blend-mode: screen; }
.contact-main::after { background: linear-gradient(90deg, rgba(24,13,7,.24), rgba(24,13,7,.05) 50%, rgba(24,13,7,.24)), linear-gradient(0deg, rgba(24,13,7,.16), transparent 36%, rgba(24,13,7,.14)); }
.contact-panel { position: relative; z-index: 1; width: min(100%, 940px); display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden; border: 1px solid rgba(107,74,136,.22); border-radius: 16px; background: #fff; box-shadow: 0 20px 55px rgba(42,23,62,.15); }
.contact-intro { position: relative; overflow: hidden; padding: 38px 34px; background: linear-gradient(145deg, #28153f, #462269); color: white; }
.contact-kicker { color: #d5b9fb; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.contact-intro h1 { margin: 12px 0 10px; font: 600 clamp(36px, 4vw, 49px)/1 Oswald, sans-serif; letter-spacing: -.02em; }
.contact-intro > p { max-width: 340px; margin: 0 0 27px; color: #e1d5ee; font-size: 13px; line-height: 1.75; }
.contact-detail { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.contact-detail-icon { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid rgba(219,194,249,.45); border-radius: 50%; color: #d9c0fb; font-size: 17px; }
.contact-detail small, .contact-detail strong, .contact-detail a { display: block; }
.contact-detail small { margin-bottom: 4px; color: #c5b2d8; font-size: 10px; }
.contact-detail a, .contact-detail strong { color: #fff; font-size: 12px; font-weight: 600; }
.contact-code { position: absolute; right: 21px; bottom: 15px; color: rgba(217,192,251,.13); font: 600 19px Oswald, sans-serif; }
.contact-form { display: grid; grid-template-columns: 1fr; align-content: center; gap: 9px; padding: 34px 38px; }
.contact-conditional { display: grid; grid-template-columns: 1fr; gap: 9px; padding: 12px; border: 1px solid #e5d9ef; border-radius: 8px; background: #f8f4fc; }
.contact-conditional[hidden] { display: none; }
.contact-form label { margin-top: 7px; color: #392a4a; font-size: 11px; font-weight: 700; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 1px solid #ddd1e8; border-radius: 7px; padding: 11px 12px; outline: 0; background: #fcfaff; color: var(--ink); font-size: 12px; }
.contact-form textarea { resize: vertical; min-height: 105px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: #9863d2; box-shadow: 0 0 0 3px rgba(162,76,240,.12); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #988ca4; }
.contact-form input.is-valid { border-color: #5b9a70; }
.contact-form input.is-invalid { border-color: #d45a62; }
.email-feedback { margin: -3px 0 0; color: #82768f; font-size: 10px; }
.email-feedback.is-invalid { color: #b42331; }
.contact-submit { display: inline-flex; align-items: center; justify-content: center; gap: 14px; margin-top: 7px; border: 0; border-radius: 7px; padding: 13px 16px; background: #7136cf; color: #fff; font-size: 12px; font-weight: 700; transition: background-color .15s ease, transform .15s ease; }
.contact-submit:hover, .contact-submit:focus-visible { background: #512394; transform: translateY(-1px); }
.contact-note { margin: 0; color: #82768f; font-size: 10px; text-align: center; }
.mission-main { position: relative; isolation: isolate; flex: 1; display: grid; place-items: center; overflow: hidden; padding: 42px 24px; background-color: #352317; background-image: linear-gradient(90deg, rgba(24,13,7,.38), rgba(69,43,25,.14) 18%, rgba(24,13,7,.4) 50%, rgba(69,43,25,.14) 82%, rgba(24,13,7,.38)), repeating-linear-gradient(90deg, transparent 0 8%, rgba(0,0,0,.24) 8.3% 9.2%, transparent 9.5% 16%), repeating-linear-gradient(0deg, #28180f 0 9px, #775338 10px 14px, #432a19 16px 95px, #896445 97px 102px, #24160e 105px 114px); }
.mission-main::before, .mission-main::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.mission-main::before { background: url("https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&fit=crop&w=1800&q=85") center 48% / cover no-repeat; opacity: .3; filter: grayscale(.65) sepia(.55); mix-blend-mode: screen; }
.mission-main::after { background: linear-gradient(90deg, rgba(24,13,7,.24), rgba(24,13,7,.05) 50%, rgba(24,13,7,.24)), linear-gradient(0deg, rgba(24,13,7,.16), transparent 36%, rgba(24,13,7,.14)); }
.mission-content { width: min(100%, 1050px); padding: clamp(25px, 5vw, 54px); border: 1px solid rgba(207,174,245,.32); border-radius: 16px; background: rgba(42,23,62,.9); color: white; box-shadow: 0 20px 55px rgba(10,4,18,.32); }
.mission-kicker { color: #d6baff; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.mission-content h1 { max-width: 820px; margin: 13px 0 16px; font: 600 clamp(34px, 5vw, 58px)/1.08 Oswald, sans-serif; }
.mission-content h1 em { color: #c59aff; font-style: normal; }
.mission-content > p { max-width: 830px; color: #e0d4ef; font-size: 14px; line-height: 1.8; }
.mission-content > .mission-lead { color: #fff; font-size: clamp(16px, 2vw, 20px); line-height: 1.6; }
.mission-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin: 27px 0; }
.mission-pillar { padding: 17px; border: 1px solid rgba(207,174,245,.24); border-radius: 10px; background: rgba(26,13,40,.6); }
.mission-pillar > span { color: #c59aff; font: 600 12px Oswald, sans-serif; }
.mission-pillar h2 { margin: 8px 0 7px; font: 500 17px Oswald, sans-serif; }
.mission-pillar p { margin: 0; color: #d3c5e1; font-size: 11px; line-height: 1.65; }
.mission-link { display: inline-flex; align-items: center; gap: 12px; border-radius: 22px; padding: 12px 18px; background: #7136cf; color: white; font-size: 12px; font-weight: 700; transition: background-color .15s ease, transform .15s ease; }
.mission-link:hover, .mission-link:focus-visible { background: #512394; transform: translateY(-1px); }
.vision-main { position: relative; isolation: isolate; display: grid; place-items: center; overflow: hidden; padding: 34px 24px; background-color: #352317; background-image: linear-gradient(90deg, rgba(24,13,7,.38), rgba(69,43,25,.14) 18%, rgba(24,13,7,.4) 50%, rgba(69,43,25,.14) 82%, rgba(24,13,7,.38)), repeating-linear-gradient(90deg, transparent 0 8%, rgba(0,0,0,.24) 8.3% 9.2%, transparent 9.5% 16%), repeating-linear-gradient(0deg, #28180f 0 9px, #775338 10px 14px, #432a19 16px 95px, #896445 97px 102px, #24160e 105px 114px); }
.vision-main::before, .vision-main::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.vision-main::before { background: url("https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&fit=crop&w=1800&q=85") center 48% / cover no-repeat; opacity: .3; filter: grayscale(.65) sepia(.55); mix-blend-mode: screen; }
.vision-main::after { background: linear-gradient(90deg, rgba(24,13,7,.24), rgba(24,13,7,.05) 50%, rgba(24,13,7,.24)), linear-gradient(0deg, rgba(24,13,7,.16), transparent 36%, rgba(24,13,7,.14)); }
.vision-content { width: min(100%, 1050px); padding: clamp(25px, 4vw, 42px); border: 1px solid rgba(207,174,245,.32); border-radius: 16px; background: rgba(42,23,62,.92); color: white; box-shadow: 0 20px 55px rgba(10,4,18,.32); }
.vision-content h1 { margin: 9px 0 12px; font: 600 clamp(32px, 4vw, 46px)/1.08 Oswald, sans-serif; }
.vision-content h1 em { color: #c59aff; font-style: normal; }
.vision-lead { max-width: 900px; margin: 0 0 10px; color: #fff; font-size: clamp(15px, 1.8vw, 19px); line-height: 1.55; }
.vision-content > p:not(.vision-lead) { max-width: 900px; margin: 0; color: #e0d4ef; font-size: 12px; line-height: 1.7; }
.vision-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.vision-card { padding: 18px; border: 1px solid rgba(207,174,245,.26); border-radius: 11px; background: rgba(26,13,40,.65); }
.vision-label { color: #d6baff; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.vision-card h2 { margin: 7px 0 8px; font: 500 21px Oswald, sans-serif; }
.vision-card p { margin: 0; color: #ded2eb; font-size: 11px; line-height: 1.65; }
.vision-card h3 { margin: 15px 0 7px; color: #d6baff; font: 600 12px "DM Sans", sans-serif; }
.vision-card ul { display: grid; gap: 6px; margin: 0; padding-left: 17px; color: #eee7f7; font-size: 11px; line-height: 1.5; }
.vision-card li::marker { color: #c59aff; }
@media (min-width: 681px) and (max-height: 900px) {
  .mission-main { padding-block: 16px; }
  .mission-content { padding: 24px 38px; }
  .mission-content h1 { max-width: 760px; margin: 8px 0 10px; font-size: clamp(34px, 3.5vw, 44px); }
  .mission-content > p { font-size: 12px; line-height: 1.55; }
  .mission-content > .mission-lead { margin-bottom: 10px; font-size: 16px; }
  .mission-pillars { gap: 10px; margin: 16px 0; }
  .mission-pillar { padding: 12px; }
  .mission-pillar h2 { margin: 5px 0; font-size: 15px; }
  .mission-pillar p { font-size: 10px; line-height: 1.45; }
  .mission-link { padding-block: 10px; }
}
@media (max-width: 680px) {
  .vision-main { place-items: start center; padding: 18px 12px; }
  .vision-content { padding: 23px 18px; border-radius: 12px; }
  .vision-content h1 { font-size: 34px; }
  .vision-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 17px; }
  .vision-card { padding: 15px; }
}
.search { flex: 1 1 350px; max-width: 500px; height: 46px; display: flex; align-items: center; border-radius: 28px; background: #493653; overflow: hidden; }
.search input { min-width: 0; width: 100%; height: 100%; border: 0; outline: 0; padding: 0 0 0 27px; background: transparent; color: #f3e8f1; font-size: 20px; }
.search input::placeholder { color: #cbb5ce; opacity: 1; }
.search button { width: 62px; height: 100%; display: grid; place-items: center; border: 0; background: transparent; color: #dec9df; font-size: 27px; }
.search button:hover { color: var(--red); }
.cart-button { position: relative; display: inline-flex; align-items: center; gap: 11px; border: 0; padding: 4px 0; background: transparent; color: #dec9df; font-size: 21px; white-space: nowrap; }
.cart-count { min-width: 12px; }
.mobile-toggle { display: none; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; background: transparent; color: var(--ink); font-size: 20px; }
.category-options [data-category="all"] { color: #5926a6; font-weight: 700; }
main { flex: 1; display: flex; flex-direction: column; }
.shelf { position: relative; flex: 1; min-height: 440px; display: block; padding: 24px 7.7%; }
/* The brown library: behind the books, the Shop catalog, Write, Tools, Code and Make */
.shelf, .catalog-main, .notebook-main, .toolroll-main, .code-main, .make-main { background-color: #352317; background-image: linear-gradient(90deg, rgba(24,13,7,.38), rgba(69,43,25,.14) 18%, rgba(24,13,7,.4) 50%, rgba(69,43,25,.14) 82%, rgba(24,13,7,.38)), repeating-linear-gradient(90deg, transparent 0 8%, rgba(0,0,0,.24) 8.3% 9.2%, transparent 9.5% 16%), repeating-linear-gradient(0deg, #28180f 0 9px, #775338 10px 14px, #432a19 16px 95px, #896445 97px 102px, #24160e 105px 114px); }
.shelf::before, .shelf::after, .catalog-main::before, .notebook-main::before, .toolroll-main::before, .code-main::before, .make-main::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.shelf::before, .catalog-main::before, .notebook-main::before, .toolroll-main::before, .code-main::before, .make-main::before { background: url("https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&fit=crop&w=1800&q=85") center 48%/cover; opacity: .3; filter: grayscale(.65) sepia(.55); mix-blend-mode: screen; }
.shelf::after { background: linear-gradient(90deg, rgba(24,13,7,.24), rgba(24,13,7,.05) 50%, rgba(24,13,7,.24)), linear-gradient(0deg, rgba(24,13,7,.16), transparent 36%, rgba(24,13,7,.14)); }
.book-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 5.4%; }
.book-card { min-width: 0; height: 232px; perspective: 1200px; outline: none; }
.book-card:focus-visible { border-radius: 11px; box-shadow: 0 0 0 3px #d4b7f5; }
.book-card[hidden] { display: none; }
.book-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .72s cubic-bezier(.2,.72,.25,1); }
.book-card:hover .book-card-inner, .book-card:focus .book-card-inner, .book-card.is-flipped .book-card-inner { transform: rotateY(180deg); }
.book-face { position: absolute; inset: 0; display: grid; overflow: hidden; border: 1px solid rgba(197,158,245,.4); border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: linear-gradient(140deg, rgba(78,45,103,.97), rgba(38,27,50,.98)); box-shadow: 0 9px 18px rgba(0,0,0,.3); color: #fff; }
.book-front { grid-template-columns: minmax(110px, 34%) minmax(0, 1fr); gap: 15px; padding: 8px; background: linear-gradient(115deg, #34203f, #634377 62%, #402651); }
.book-back { grid-template-columns: minmax(0, 1fr) 145px; gap: 18px; padding: 18px 20px; transform: rotateY(180deg); }
.front-copy, .book-back-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.front-category, .back-category { color: #d4b4f4; font-size: 9px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.front-copy h2, .book-back-copy h2 { margin: 8px 0; font: 600 clamp(16px, 1.5vw, 20px)/1.2 Oswald, sans-serif; }
.front-author { color: #e0d4e9; font-size: 10px; line-height: 1.4; }
.flip-hint { margin-top: 14px; color: #c7a5e0; font-size: 10px; }
.flip-toggle { display: none; }
.book-back-copy .book-author { color: #e0d4e9; }
.book-description { margin: 10px 0 0; color: #efe8f4; font-size: 11px; line-height: 1.65; }
.book-back .book-actions { align-self: center; justify-content: center; gap: 12px; }
.book-back .price { color: #fff; font-size: 26px; }
.book-back .action { min-height: 42px; font-size: 13px; }
.book-back .flip-back { display: inline-flex; width: 100%; min-height: 28px; justify-content: center; border: 0; background: transparent; color: #e4d3f1; font-size: 10px; }
.book-back .flip-back:hover { color: #fff; }
.cover { position: relative; width: 100%; height: 188px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 9px; color: white; box-shadow: 2px 4px 8px rgba(0,0,0,.4); isolation: isolate; }
.book-front .cover { width: 100%; height: 100%; min-width: 0; min-height: 0; aspect-ratio: auto; justify-self: stretch; border-radius: 4px; }
.cover::before, .cover::after { content: ""; position: absolute; z-index: -1; inset: 0; }
.cover::after { inset: 0 auto 0 0; width: 9px; background: linear-gradient(90deg, rgba(0,0,0,.58), rgba(255,255,255,.1), transparent); }
.cover-title { font: 700 clamp(12px, 1.3vw, 19px)/1.06 Oswald, sans-serif; text-transform: uppercase; text-shadow: 0 1px 3px #000; }
.cover-subtitle { margin-top: 6px; font-size: clamp(7px, .75vw, 10px); line-height: 1.25; text-shadow: 0 1px 2px #000; }
.cover-publisher { align-self: flex-end; font-size: 7px; letter-spacing: .12em; text-shadow: 0 1px 2px #000; }
.cover-one::before { background: radial-gradient(ellipse at 57% 78%, #8d54e8 0 10%, transparent 11%), linear-gradient(150deg, #0b1012 0 36%, #efedf5 37% 67%, #060909 68%); }
.cover-one .cover-title { color: #fff; }
.cover-two::before { background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(192,127,255,.42) 8px, transparent 10px), linear-gradient(120deg, #10071d, #54268c 38%, #080510); }
.cover-three::before { background: linear-gradient(155deg, #fff 0 64%, #ebeff4 65% 70%, #cae0ed 71%); }
.cover-three .cover-title, .cover-three .cover-subtitle { color: #7136cf; text-shadow: none; }
.cover-four::before { background: radial-gradient(ellipse at 50% 70%, #cd91fa, transparent 28%), linear-gradient(140deg, #8246c7, #3c225e 53%, #1b102b); }
.book-info { height: 100%; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 3px; }
.book-title { margin: 0 0 8px; font: 500 12px/1.35 "DM Sans", sans-serif; }
.book-author { margin: 0; font-size: 10px; line-height: 1.5; }
.book-author span { text-decoration: underline; text-underline-offset: 2px; }
.book-actions { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; }
.price { align-self: flex-start; white-space: nowrap; font-size: clamp(20px, 2.4vw, 30px); font-weight: 400; letter-spacing: -.06em; }
.action { width: 100%; min-height: 49px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 0; border-radius: 22px; padding: 8px 9px; color: #fff; font-size: clamp(13px, 1.5vw, 18px); font-weight: 500; white-space: nowrap; transition: transform .18s, filter .18s; }
.action:hover { filter: brightness(1.1); transform: translateY(-2px); }
.read-button { background: #d52327; }
.add-button { background: #ff762c; font-weight: 700; }
.add-button span { font-size: 22px; line-height: .7; }
.empty-state { display: none; position: relative; z-index: 1; padding: 90px 20px; color: white; text-align: center; font-size: 20px; }
.footer { position: fixed; z-index: 20; right: max(0px, calc((100vw - 1440px) / 2)); bottom: 0; left: max(0px, calc((100vw - 1440px) / 2)); min-height: 93px; display: grid; grid-template-columns: 1fr 1fr 1.5fr 1.7fr; align-items: center; gap: 15px; padding: 14px 6.8%; border: 5px solid var(--orange); border-bottom-width: 7px; background: var(--chrome-purple) !important; color: #dec9df; box-shadow: 0 -7px 18px rgba(18, 8, 30, .32); }
.footer-group { display: flex; align-items: center; gap: 15px; color: #dec9df; }
.footer-group:hover, .footer-group:focus-visible, .socials a:hover, .socials a:focus-visible { color: #efd9e8; }
.footer-label { font-size: 14px; }
.footer-icon { width: 34px; height: 34px; display: inline-grid; place-items: center; border: 2px solid #a88caf; border-radius: 50%; color: #dec9df; font-size: 17px; font-weight: 700; }
.socials { display: flex; justify-content: center; gap: 8px; }
.socials a { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid #a88caf; border-radius: 50%; color: #dec9df; font-weight: 700; font-size: 16px; }
.copyright { justify-self: end; color: #dec9df; font-size: 11px; text-align: right; }
.toast { position: fixed; z-index: 5; right: 18px; bottom: 18px; padding: 13px 17px; border: 1px solid #bd8ee8; border-radius: 8px; background: #321c49; color: white; box-shadow: 0 8px 28px #0005; opacity: 0; transform: translateY(10px); transition: .2s ease; pointer-events: none; }
.toast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 960px) {
  .header-tools { gap: 15px; padding-inline: 4%; }
  .nav-item { font-size: 18px; }
  .logo-wordmark { height: 18px; }
  .main-nav { gap: 18px; }
  .search { max-width: 390px; }
  .cart-button { font-size: 17px; }
  .shelf { padding-inline: 4%; }
  .book-grid { gap: 13px; }
  .book-card { height: 245px; }
  .book-back { grid-template-columns: minmax(0, 1fr) 126px; gap: 12px; padding: 14px; }
  .action { min-height: 43px; }
}
@media (max-width: 680px) {
  body { padding-top: 174px; padding-bottom: 57px; }
  .page { min-height: max(0px, calc(100vh - 231px)); border-width: 4px; border-top-width: 6px; }
  header { border-width: 4px; border-top-width: 6px; }
  .masthead { height: 54px; padding-inline: 14px; }
  .logo { gap: 8px; font-size: 19px; }
  .logo-emblem, .logo-emblem svg { width: 39px; height: 39px; }
  .header-tools { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 11px 13px; }
  .mobile-toggle { display: inline-block; border-color: #795b8c; color: #dec9df; }
  .main-nav { display: none; grid-column: 1 / -1; flex-direction: column; align-items: stretch; gap: 2px; padding: 7px 8px; border: 1px solid #795b8c; border-radius: 7px; background: #352047; }
  .main-nav.open { display: flex; }
  .contact-main { place-items: start center; padding: 18px 12px; }
  .mission-main { place-items: start center; padding: 18px 12px; }
  .mission-content { padding: 23px 18px; border-radius: 12px; }
  .mission-content h1 { font-size: 35px; }
  .mission-content > p { font-size: 12px; }
  .mission-content > .mission-lead { font-size: 15px; }
  .mission-pillars { grid-template-columns: 1fr; gap: 9px; margin: 19px 0; }
  .mission-pillar { padding: 13px; }
  .contact-panel { grid-template-columns: 1fr; border-radius: 12px; }
  .contact-intro { padding: 25px 22px; }
  .contact-intro h1 { font-size: 36px; }
  .contact-intro > p { margin-bottom: 18px; }
  .contact-detail { margin-top: 12px; }
  .contact-code { right: 16px; bottom: 10px; font-size: 15px; }
  .contact-form { gap: 7px; padding: 20px 22px 23px; }
  .category-menu { width: 100%; }
  .category-options { position: static; width: 100%; margin: 5px 0 2px; box-shadow: none; }
  .category-menu.open .category-options { display: grid; }
  .nav-item { font-size: 16px; padding: 7px 2px; }
  .logo-wordmark { height: 16px; }
  .nav-icon { width: 28px; height: 28px; font-size: 15px; }
  .search { grid-column: 1 / 3; grid-row: 2; max-width: none; height: 40px; }
  .search input { padding-left: 15px; font-size: 16px; }
  .search button { width: 48px; font-size: 23px; }
  .cart-button { grid-column: 3; grid-row: 2; font-size: 0; gap: 0; }
  .cart-button .nav-icon { font-size: 16px; }
  .cart-count { position: absolute; top: -6px; right: -8px; min-width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: white; font-size: 10px; }
  .shelf { min-height: 0; display: block; padding: 12px 12px 18px; }
  .book-grid { grid-template-columns: 1fr; gap: 12px; }
  .book-card { height: 218px; min-height: 0; }
  .book-front { grid-template-columns: minmax(96px, 42%) minmax(0, 1fr); gap: 11px; padding: 7px; }
  .book-back { grid-template-columns: minmax(0, 1fr) 116px; gap: 10px; padding: 13px; }
  .book-front .cover { padding: 10px 7px; }
  .cover-title { font-size: 15px; }
  .cover-subtitle { font-size: 8px; }
  .front-copy h2, .book-back-copy h2 { font-size: 16px; }
  .front-author { font-size: 9px; }
  .book-description { font-size: 10px; line-height: 1.5; }
  .book-back .book-actions { gap: 8px; }
  .book-back .price { font-size: 22px; }
  .book-back .action { min-height: 36px; font-size: 12px; }
  .book-back .add-button span { font-size: 17px; }
  .flip-hint { display: none; }
  .book-front .flip-toggle { display: inline-flex; align-items: center; align-self: flex-start; margin-top: 10px; border: 1px solid rgba(220,192,244,.45); border-radius: 16px; padding: 6px 10px; background: rgba(20,9,31,.3); color: #f4e8ff; font-size: 10px; }
  .book-front .flip-toggle:hover, .book-front .flip-toggle:focus-visible { background: rgba(125,76,164,.8); }
  .book-back .flip-back { min-height: 24px; }
  .add-button span { font-size: 19px; }
  .footer { min-height: 64px; grid-template-columns: 1fr; gap: 0; padding: 10px 13px; border-width: 4px; border-bottom-width: 5px; }
  .footer-group, .copyright { display: none; }
  .socials { grid-column: 1; grid-row: 1; justify-content: center; }
  .socials a { width: 30px; height: 30px; font-size: 14px; }
}
@media (max-width: 390px) {
  .book-card { height: 210px; }
  .book-back { grid-template-columns: minmax(0, 1fr) 106px; gap: 7px; padding: 10px; }
  .book-back .price { font-size: 20px; }
  .book-back .action { min-height: 34px; padding-inline: 4px; font-size: 11px; }
  .front-copy h2, .book-back-copy h2 { font-size: 14px; }
}
@media (hover: none) {
  .book-card:hover .book-card-inner { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Books / 3D workspace slider */
.slider { position: relative; flex: 1; display: flex; overflow: hidden; transition: height .45s ease; }
.slider-track { flex: 1; display: flex; align-items: stretch; transition: transform .55s cubic-bezier(.65, 0, .35, 1); }
.slider.on-books .slider-track { transform: translateX(-100%); }
.slide { flex: 0 0 100%; min-width: 0; }
.slider.instant, .slider.instant .slider-track { transition: none; }
.shelf.emerge { animation: emerge-from-screen .6s ease-out; }
.flash-overlay { position: absolute; z-index: 7; inset: 0; background: #fff; pointer-events: none; animation: flash-fade .8s ease-out forwards; }
@keyframes flash-fade { to { opacity: 0; } }
@keyframes emerge-from-screen { from { opacity: 0; transform: scale(.94); filter: brightness(.35); } }
.slide-arrow { position: absolute; z-index: 6; top: 50%; width: 54px; height: 54px; display: grid; place-items: center; padding: 0 0 4px; border: 2px solid #d4b4f4; border-radius: 50%; background: rgba(28, 13, 43, .82); color: #f4e8ff; font-size: 38px; line-height: 1; box-shadow: 0 8px 22px rgba(18, 8, 30, .45); transform: translateY(-50%); transition: background-color .15s ease, transform .15s ease; }
.slide-arrow:hover, .slide-arrow:focus-visible { background: var(--red); outline: 0; transform: translateY(-50%) scale(1.08); }
.slide-arrow[hidden] { display: none; }
.slide-next { right: 18px; }
.slide-prev { left: 18px; }
.workspace { position: relative; min-height: 480px; overflow: hidden; }
/* Lights off (the desk lamp, theme.js): dark mode. Every library background goes dark; the 3D
   desk dims itself. Some pages darken an overlay above the photo; Shop and Write use theirs for
   the fade-in, so they get an inset shadow and the photo is turned almost off instead. */
:is(.shelf, .contact-main, .mission-main, .vision-main)::after { transition: background-color .7s ease; }
html.lights-off :is(.shelf, .contact-main, .mission-main, .vision-main)::after { background-color: rgba(4, 2, 8, .9); }
.catalog-main, .notebook-main, .toolroll-main, .code-main, .make-main { transition: box-shadow .7s ease; }
:is(.catalog-main, .notebook-main, .toolroll-main, .code-main, .make-main)::before { transition: opacity .7s ease; }
html.lights-off :is(.catalog-main, .notebook-main, .toolroll-main, .code-main, .make-main) { box-shadow: inset 0 0 0 100vmax rgba(4, 2, 8, .9); }
html.lights-off :is(.catalog-main, .notebook-main, .toolroll-main, .code-main, .make-main)::before { opacity: .03; }
.workspace-canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.workspace-canvas:active { cursor: grabbing; }
/* Login terminal: covers the desk once the camera has zoomed into the CRT, styled to match it */
.slider.logging-in .slide-arrow { display: none; }
.login-terminal { position: absolute; z-index: 5; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; overflow: auto; padding: 24px 16px; background: radial-gradient(ellipse at 50% 50%, #1d0d30 0%, #07030c 75%); color: #f4e8ff; font-family: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace; font-size: 16px; opacity: 0; transition: opacity .25s ease; }
.login-terminal.visible { opacity: 1; }
.login-terminal[hidden] { display: none; }
.login-terminal::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 2px, transparent 2px 4px); pointer-events: none; }
.term-window { position: relative; z-index: 1; width: min(620px, 100%); }
.login-terminal.shake .term-window { animation: term-shake .45s ease; }
@keyframes term-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-10px); } 40%, 60% { transform: translateX(10px); } }
.term-banner { margin: 0 0 10px; color: #c9a7ff; font: inherit; font-size: clamp(9px, 1.9vw, 16px); line-height: 1.15; text-shadow: 0 0 8px rgba(201,167,255,.45); }
.term-line { margin: 0 0 4px; color: #c9a7ff; }
.term-rule { margin: 0; overflow: hidden; color: #6b4a88; white-space: nowrap; }
.term-text { margin: 4px 0 0; color: #d9c6ec; }
.term-email { color: #7dffa8; }
.term-form { display: grid; gap: 12px; margin-top: 14px; }
.term-field { display: flex; align-items: center; gap: 6px; }
.term-key { color: #7dffa8; white-space: pre; }
.term-bracket { color: #c9a7ff; }
.term-field input { flex: 1; min-width: 0; border: 0; border-bottom: 1px dashed #6b4a88; padding: 4px 2px; background: transparent; color: #f4e8ff; font: inherit; caret-color: #7dffa8; outline: 0; }
.term-field input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.term-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.term-captcha:not(:empty), .pf-captcha:not(:empty) { margin: 10px 0; }
.term-field input::-webkit-inner-spin-button, .term-field input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.term-field input:focus { border-bottom-color: #c9a7ff; background: rgba(113,54,207,.2); }
.term-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 4px; }
.term-button { border: 0; padding: 4px 6px; background: transparent; color: #c9a7ff; font: inherit; font-weight: 700; }
.term-button:hover, .term-button:focus-visible { background: var(--red); color: #fff; outline: 0; }
.term-button:disabled, .term-field input:disabled { opacity: .55; cursor: wait; }
.term-status { min-height: 1.4em; margin: 2px 0 0; color: #7dffa8; }
.term-status.error { color: #ff7a9a; }
.term-hint { margin: 18px 0 0; color: #8f7aa8; font-size: 13px; }
@media (max-width: 680px) {
  .login-terminal { font-size: 14px; padding: 16px 12px; }
}
.workspace-tip { position: absolute; z-index: 2; padding: 6px 12px; border-radius: 16px; background: var(--red); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 6px 18px rgba(113, 54, 207, .45); transform: translate(-50%, calc(-100% - 14px)); pointer-events: none; }
.workspace-tip[hidden] { display: none; }
.workspace-fallback { position: absolute; z-index: 1; inset: auto 0 40px; color: #f4e8ff; text-align: center; }
@media (max-width: 680px) {
  .slide-arrow { display: none; }
  .slider-track { align-items: flex-start; }
  .workspace { height: max(420px, calc(100svh - 245px)); min-height: 0; }
  .slider:not(.on-books) { background: #352317; }
      }
@media (prefers-reduced-motion: reduce) {
  .slider, .slider-track { transition: none; }
}

/* Shop: a black-and-white merchandise catalog, matching the catalog on the 3D desk */
.catalog-main { position: relative; flex: 1; padding: 34px 6% 40px; }
.catalog-main::after { content: ""; position: absolute; z-index: 2; inset: 0; background: #f7f7f4; pointer-events: none; animation: catalog-arrive .7s ease-out forwards; }
@keyframes catalog-arrive { to { opacity: 0; visibility: hidden; } }
.catalog-sheet { position: relative; z-index: 1; max-width: 1080px; margin: auto; padding: 0 0 26px; border: 6px solid #111; border-right-width: 0; background: #f7f7f4; color: #111; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
/* The rolled-up right edge */
.catalog-sheet::after { content: ""; position: absolute; top: -6px; right: -22px; bottom: -6px; width: 26px; border-radius: 13px; background: linear-gradient(90deg, #9d9d98 0%, #f3f3ef 35%, #d8d8d2 60%, #8b8b86 100%); box-shadow: -4px 0 8px rgba(0,0,0,.25); }
.catalog-masthead { padding: 18px 24px 14px; background: #111; color: #f7f7f4; text-align: center; }
.catalog-brand { margin: 0; font-family: Oswald, Impact, sans-serif; font-size: clamp(30px, 5vw, 50px); font-weight: 700; letter-spacing: .06em; line-height: 1; }
.catalog-sections { margin: 8px 0 0; font-size: 13px; letter-spacing: .14em; }
.catalog-heading { padding: 22px 24px 8px; text-align: center; }
.catalog-heading h1 { margin: 0; font-family: Oswald, Impact, sans-serif; font-size: clamp(56px, 10vw, 104px); font-weight: 700; letter-spacing: .02em; line-height: .95; }
.catalog-tagline { margin: 6px 0 0; font-family: Georgia, serif; font-size: 20px; font-style: italic; }
.catalog-volume { display: inline-block; margin: 14px 0 0; padding: 4px 12px; border: 2px solid #111; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 22px; padding: 22px 28px 0; }
.catalog-item { display: flex; flex-direction: column; min-width: 0; border: 2px solid #111; background: #fff; transition: box-shadow .15s ease, transform .15s ease; }
.catalog-item:hover { box-shadow: 6px 6px 0 #111; transform: translate(-2px, -2px); }
.catalog-art { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-bottom: 2px solid #111; background: radial-gradient(#111 1px, transparent 1.4px) 0 0 / 8px 8px, #fff; }
.catalog-art img { width: 100%; height: 100%; object-fit: cover; background: #fff; transition: transform .3s ease; }
.catalog-item:hover .catalog-art img { transform: scale(1.04); }
.catalog-art svg { width: 82%; height: 82%; padding: 4px; background: #fff; fill: none; stroke: #111; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.catalog-info { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 14px 16px 16px; }
.catalog-no { font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.catalog-info h3 { margin: 2px 0 6px; font-family: Oswald, Impact, sans-serif; font-size: 24px; font-weight: 600; line-height: 1.05; text-transform: uppercase; }
.catalog-info p { display: -webkit-box; margin: 0 0 12px; overflow: hidden; color: #333; font-size: 13px; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.catalog-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 2px dashed #111; }
.catalog-price { font-family: Oswald, Impact, sans-serif; font-size: 26px; font-weight: 700; }
.catalog-add { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; padding: 0 16px; border: 2px solid #111; background: #111; color: #f7f7f4; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transition: background-color .15s ease, color .15s ease; }
.catalog-add:hover, .catalog-add:focus-visible { background: #f7f7f4; color: #111; outline: 0; }
.catalog-add:active { transform: translateY(1px); }
.catalog-add:disabled { border-style: dashed; background: #f7f7f4; color: #777; cursor: not-allowed; }
.catalog-add:disabled:active { transform: none; }
.catalog-link { color: inherit; text-decoration: none; }
.catalog-link:hover, .catalog-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; outline: 0; }
.catalog-item.is-linked { box-shadow: 6px 6px 0 #111; outline: 3px solid #111; outline-offset: 3px; }
.catalog-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.catalog-actions .catalog-to-cart { background: #f7f7f4; color: #111; }
.catalog-actions .catalog-to-cart:hover, .catalog-actions .catalog-to-cart:focus-visible { background: #111; color: #f7f7f4; }
.catalog-categories { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 18px 28px 0; }
.catalog-categories a { padding: 6px 12px; border: 2px solid #111; color: #111; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.catalog-categories a span { font-weight: 500; text-transform: none; }
.catalog-categories a:hover, .catalog-categories a:focus-visible { background: #111; color: #f7f7f4; outline: 0; }
.catalog-category { scroll-margin-top: 16px; padding-top: 26px; }
.catalog-category-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 28px; padding-bottom: 6px; border-bottom: 4px solid #111; }
.catalog-category-head h2 { margin: 0; font-family: Oswald, Impact, sans-serif; font-size: clamp(26px, 4vw, 36px); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.catalog-category-price { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.catalog-category .catalog-grid { padding-top: 18px; }
.catalog-options { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 12px; }
.catalog-option { display: grid; flex: 1 1 90px; gap: 3px; min-width: 0; }
.catalog-option > span, .cart-country > span { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.catalog-option select { width: 100%; }
.catalog-option select, .cart-country select { max-width: 100%; min-height: 32px; padding: 0 8px; border: 2px solid #111; border-radius: 0; background: #fff; color: #111; font: inherit; font-size: 13px; font-weight: 700; }
.catalog-option select:focus-visible, .cart-country select:focus-visible { outline: 3px solid #111; outline-offset: 2px; }

/* The shop's cart: a black-and-white panel like the catalog */
.cart-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 6px solid #111; background: #f7f7f4; color: #111; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.cart-dialog::backdrop { background: rgba(10, 6, 4, .6); }
.cart-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #111; color: #f7f7f4; }
.cart-head h2 { margin: 0; font-family: Oswald, Impact, sans-serif; font-size: 26px; letter-spacing: .04em; text-transform: uppercase; }
.cart-close { border: 0; background: transparent; color: inherit; font-size: 20px; cursor: pointer; }
.cart-empty { margin: 0; padding: 28px 16px; text-align: center; }
.cart-lines { margin: 0; padding: 0 16px; list-style: none; }
.cart-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 2px dashed #111; }
.cart-thumb { aspect-ratio: 1; border: 2px solid #111; background: #fff; }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-info { display: grid; gap: 2px; min-width: 0; font-size: 13px; }
.cart-line-info strong { overflow-wrap: anywhere; font-size: 14px; }
.cart-qty { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.cart-qty button { min-width: 30px; height: 30px; border: 2px solid #111; background: #fff; color: #111; font-weight: 700; cursor: pointer; }
.cart-qty button:disabled { opacity: .4; cursor: not-allowed; }
.cart-qty .cart-remove { padding: 0 8px; border-style: dashed; font-size: 12px; text-transform: uppercase; }
.cart-line-price { font-family: Oswald, Impact, sans-serif; font-size: 18px; font-weight: 700; }
.cart-total { display: flex; justify-content: space-between; padding: 14px 16px 6px; font-family: Oswald, Impact, sans-serif; font-size: 22px; }
.cart-country { display: grid; gap: 3px; padding: 6px 16px 0; }
.cart-note, .cart-status { margin: 10px 16px 0; font-size: 12px; line-height: 1.45; }
.cart-terms { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin: 12px 16px 0; padding: 10px 12px; border: 2px solid #111; background: #fff; font-size: 12px; line-height: 1.45; cursor: pointer; }
.cart-terms input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #111; }
.cart-status:empty { display: none; }
.cart-status.is-error { color: #a1121b; font-weight: 700; }
.cart-checkout { justify-content: center; width: calc(100% - 32px); margin: 14px 16px 16px; }
.catalog-footnote { margin: 24px 28px 0; padding: 14px 0 70px; border-top: 2px solid #111; background: radial-gradient(#111 2px, transparent 2.6px) 0 calc(100% - 6px) / 16px 16px repeat-x; text-align: center; font-size: 12px; letter-spacing: .06em; }
.catalog-footnote p { margin: 0; }
@media (max-width: 680px) {
  .catalog-main { padding: 18px 26px 24px 12px; }
  .catalog-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 14px; padding: 16px 14px 0; }
  .catalog-info { padding: 10px 10px 12px; }
  .catalog-info h2 { font-size: 18px; }
  .catalog-price { font-size: 20px; }
  .catalog-buy .catalog-add { flex: 1; justify-content: center; padding: 0 10px; font-size: 12px; }
  .catalog-footnote { margin: 20px 14px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-main::after { animation: none; display: none; }
  .catalog-item, .catalog-art img { transition: none; }
  .catalog-item:hover { transform: none; }
  .catalog-item:hover .catalog-art img { transform: none; }
}

/* Write: a notebook page like the paper on the desk, with the chosen topic circled on top */
.notebook-main { position: relative; flex: 1; padding: 34px 6% 40px; }
.notebook-main::after { content: ""; position: absolute; z-index: 2; inset: 0; background: #fbf8f2; pointer-events: none; animation: catalog-arrive .7s ease-out forwards; }
.notebook-sheet { --rule: 36px; position: relative; z-index: 1; max-width: 820px; min-height: 900px; margin: auto; padding: calc(var(--rule) * 1.5) 7% calc(var(--rule) * 4) 108px; background-color: #fbf8f2; background-image: linear-gradient(90deg, transparent 76px, #e8a2a2 76px 78px, transparent 78px), repeating-linear-gradient(180deg, transparent 0 calc(var(--rule) - 2px), #b9cbe8 calc(var(--rule) - 2px) var(--rule)); color: #2a2350; font-family: Caveat, "Segoe Print", cursive; font-size: 24px; line-height: var(--rule); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
/* Coffee: a ring off the top-right corner, a faint one bottom-left, and a dried spill */
.notebook-sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22160%22%20height%3D%22160%22%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2280%22%20r%3D%2270%22%20fill%3D%22none%22%20stroke%3D%22%237a4e26%22%20stroke-opacity%3D%22.45%22%20stroke-width%3D%225%22%20stroke-dasharray%3D%22180%206%20120%2010%20300%22/%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2280%22%20r%3D%2262%22%20fill%3D%22none%22%20stroke%3D%22%2396643a%22%20stroke-opacity%3D%22.2%22%20stroke-width%3D%221.5%22/%3E%3C/svg%3E") calc(100% + 40px) -16px / 160px no-repeat,
  url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22140%22%20height%3D%22140%22%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%2270%22%20r%3D%2260%22%20fill%3D%22none%22%20stroke%3D%22%237a4e26%22%20stroke-opacity%3D%22.28%22%20stroke-width%3D%224%22%20stroke-dasharray%3D%22200%2012%20160%22/%3E%3C/svg%3E") 80px calc(100% - 20px) / 140px no-repeat,
  url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22180%22%20height%3D%22120%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23b07c46%22%20stop-opacity%3D%22.14%22/%3E%3Cstop%20offset%3D%22.78%22%20stop-color%3D%22%23a06c3a%22%20stop-opacity%3D%22.2%22/%3E%3Cstop%20offset%3D%22.95%22%20stop-color%3D%22%23784c24%22%20stop-opacity%3D%22.34%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23784c24%22%20stop-opacity%3D%220%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse%20cx%3D%2290%22%20cy%3D%2260%22%20rx%3D%2286%22%20ry%3D%2256%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2218%22%20r%3D%224%22%20fill%3D%22%2382542a%22%20fill-opacity%3D%22.3%22/%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%2212%22%20r%3D%223%22%20fill%3D%22%2382542a%22%20fill-opacity%3D%22.25%22/%3E%3C/svg%3E") 42% calc(100% + 30px) / 180px no-repeat; }
.notebook-tabs { position: absolute; top: 18px; right: 7%; display: flex; gap: 18px; font-size: 22px; }
.notebook-tabs a { color: #6b6080; text-decoration: none; }
.notebook-tabs a:hover, .notebook-tabs a:focus-visible { color: #7136cf; outline: 0; }
.notebook-tabs a[aria-current="page"] { color: #7136cf; text-decoration: underline wavy #7136cf 1px; text-underline-offset: 6px; }
.notebook-topic { margin: var(--rule) 0 0; font-size: 72px; font-weight: 700; line-height: calc(var(--rule) * 3); text-align: center; }
.notebook-topic span { display: inline-block; padding: 0 34px; border: 4px solid #5b2bb0; border-radius: 50%; color: #7136cf; line-height: calc(var(--rule) * 2); transform: rotate(-2deg); }
.notebook-intro { margin: var(--rule) 0 0; text-align: center; }
.notebook-courses { margin: var(--rule) 0 0; padding: 0; list-style: none; }
.notebook-course { display: flex; align-items: flex-start; gap: 16px; margin-bottom: var(--rule); }
.notebook-course > div { flex: 1; min-width: 0; }
.notebook-course h2 { position: relative; margin: 0; font-size: 34px; font-weight: 700; line-height: var(--rule); }
.notebook-course h2::before { content: "\2610"; position: absolute; left: -34px; font-size: 24px; color: #6b6080; }
.notebook-course p { margin: 0; }
.notebook-meta { color: #6b6080; font-size: 20px; }
.notebook-start { flex: none; margin-top: 2px; padding: 0 12px; border: 2px solid #2a2350; border-radius: 18px 14px 20px 12px; background: transparent; color: #2a2350; font: 700 24px/32px Caveat, "Segoe Print", cursive; transform: rotate(-1.5deg); }
.notebook-start:hover, .notebook-start:focus-visible { border-color: #7136cf; background: #7136cf; color: #fff; outline: 0; }
.notebook-subhead { margin: var(--rule) 0 0; font-size: 40px; font-weight: 700; line-height: calc(var(--rule) * 2); text-decoration: underline wavy #7136cf 2px; text-underline-offset: 8px; }
.notebook-practice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 60px; margin: 0; padding: 0; list-style: none; }
.notebook-practice li { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: var(--rule); }
.notebook-practice li::before { content: "\2610"; position: absolute; left: -28px; font-size: 20px; color: #6b6080; }
.notebook-try { flex: none; padding: 0 4px; border: 0; background: transparent; color: #6b6080; font: 700 20px/var(--rule) Caveat, "Segoe Print", cursive; }
.notebook-try:hover, .notebook-try:focus-visible { color: #7136cf; outline: 0; text-decoration: underline; }
.notebook-back { display: block; margin-top: var(--rule); color: #6b6080; text-align: center; text-decoration: none; }
.notebook-back:hover, .notebook-back:focus-visible { color: #7136cf; outline: 0; }
.notebook-monkey { position: absolute; right: 5%; bottom: 22px; width: 120px; color: #2a2350; }
@media (max-width: 680px) {
  .notebook-main { padding: 18px 12px 24px; }
  .notebook-sheet { --rule: 32px; min-height: 0; padding: calc(var(--rule) * 2) 18px calc(var(--rule) * 4) 64px; background-image: linear-gradient(90deg, transparent 44px, #e8a2a2 44px 46px, transparent 46px), repeating-linear-gradient(180deg, transparent 0 calc(var(--rule) - 2px), #b9cbe8 calc(var(--rule) - 2px) var(--rule)); font-size: 21px; }
  .notebook-tabs { right: 18px; left: 64px; justify-content: flex-end; }
  .notebook-topic { font-size: 54px; }
  .notebook-course { flex-direction: column; gap: 0; }
  .notebook-course h2 { font-size: 28px; }
  .notebook-course h2::before { left: -28px; font-size: 20px; }
  .notebook-monkey { width: 90px; }
  .notebook-practice { grid-template-columns: 1fr; }
  .notebook-subhead { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .notebook-main::after { animation: none; display: none; }
}

/* Break: back button while the kit and padlock are held up */
.break-back { position: absolute; z-index: 4; left: 50%; bottom: 22px; padding: 10px 18px; border: 2px solid #d4b4f4; border-radius: 22px; background: rgba(28, 13, 43, .85); color: #f4e8ff; font-weight: 600; transform: translateX(-50%); }
.break-back:hover, .break-back:focus-visible { background: var(--red); outline: 0; }
.break-back[hidden] { display: none; }

/* Lock picking mini game, over the desk: Fallout-style, a brass lock under a green terminal HUD */
.lock-game { --hud: #7dffa8; position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; overflow: auto; padding: 16px; background: radial-gradient(ellipse at 50% 45%, rgba(26, 22, 16, .97), rgba(4, 4, 3, .99)); color: var(--hud); font-family: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace; opacity: 0; transition: opacity .2s ease; }
.lock-game::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 4px); pointer-events: none; }
.lock-game.visible { opacity: 1; }
.lock-game[hidden] { display: none; }
.lg-panel { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(560px, 100%); height: 100%; max-height: 820px; min-height: 0; text-align: center; }
.lg-hud { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-bottom: 8px; border-bottom: 2px solid rgba(125, 255, 168, .4); text-shadow: 0 0 8px rgba(125, 255, 168, .5); }
.lg-title { margin: 0; font: inherit; font-size: 24px; font-weight: 700; letter-spacing: .2em; }
.lg-level { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .12em; }
.lg-level select { padding: 4px 6px; border: 1px solid var(--hud); background: #0b140d; color: var(--hud); font: inherit; }
.lg-stage { position: relative; flex: 1; min-height: 200px; margin-top: 8px; touch-action: none; cursor: crosshair; }
.lg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.lg-stage.is-3d .lg-canvas { display: block; }
.lg-stage.is-3d .lg-lock { display: none; }
.lg-lock { display: block; width: auto; height: 100%; max-width: 100%; margin: 0 auto; }
.lg-wrench { fill: none; stroke: #8c9298; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.lg-grip { fill: #111; stroke: #000; stroke-width: 1.5; }
.lg-shaft, .lg-tip { fill: none; stroke: #e6e9ed; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.lg-lock.open .lg-cylinder circle { stroke: var(--hud); }
.lg-status { min-height: 1.5em; margin: 8px 0 6px; font-size: 16px; font-weight: 700; text-shadow: 0 0 8px rgba(125, 255, 168, .5); }
.lg-status[data-tone="bad"] { color: #ff9a6a; text-shadow: 0 0 8px rgba(255, 154, 106, .5); }
.lg-strain { width: min(260px, 80%); height: 8px; margin: 0 auto 12px; border: 1px solid var(--hud); }
.lg-strain span { display: block; height: 100%; background: var(--hud); }
.lg-strain[data-low="true"] { border-color: #ff9a6a; }
.lg-strain[data-low="true"] span { background: #ff9a6a; }
.lg-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.lg-pickchoice { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border: 1px solid rgba(125, 255, 168, .45); background: #07110a; color: var(--hud); font: inherit; font-size: 12px; }
.lg-pickchoice svg { width: 26px; height: 32px; fill: none; stroke: #e6e9ed; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lg-pickchoice[aria-checked="true"] { border-color: var(--hud); background: rgba(125, 255, 168, .16); box-shadow: 0 0 10px rgba(125, 255, 168, .35); }
.lg-pickchoice:hover:not(:disabled), .lg-pickchoice:focus-visible { background: rgba(125, 255, 168, .12); outline: 0; }
.lg-pickchoice:disabled { opacity: .35; cursor: not-allowed; }
.lg-pickname { font-weight: 700; }
.lg-picknote { color: #a9d9b6; font-size: 10px; }
.lg-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lg-button { min-height: 44px; padding: 0 18px; border: 2px solid var(--hud); background: rgba(125, 255, 168, .14); color: var(--hud); font: inherit; font-weight: 700; letter-spacing: .06em; user-select: none; -webkit-user-select: none; touch-action: none; }
.lg-button:hover, .lg-button:focus-visible, .lg-button.active { background: var(--hud); color: #04130a; outline: 0; }
.lg-button.lg-quiet { border-color: rgba(125, 255, 168, .5); background: transparent; }
.lg-button[hidden] { display: none; }
.lg-keys { margin: 12px 0 0; color: #a9d9b6; font-size: 11px; }
.lg-keys-touch { display: none; }
@media (pointer: coarse) {
  .lg-keys-mouse { display: none; }
  .lg-keys-touch { display: block; }
}
.lg-rule { margin: 4px 0 0; color: #a9d9b6; font-size: 11px; font-style: italic; }
/* Phones: the game takes the whole screen, with the lock filling the space left by the controls */
@media (max-width: 680px) {
  .lock-game { position: fixed; z-index: 40; inset: 0; place-items: stretch; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .lg-panel { width: 100%; max-height: none; }
  .lg-hud { padding-bottom: 6px; }
  .lg-title { font-size: 18px; }
  .lg-level { font-size: 11px; }
  .lg-stage { min-height: 180px; margin-top: 4px; }
  .lg-status { margin: 6px 0 4px; font-size: 14px; }
  .lg-strain { margin-bottom: 8px; }
  .lg-picks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
  .lg-pickchoice { padding: 6px 2px; font-size: 11px; }
  .lg-pickchoice svg { width: 18px; height: 24px; }
  .lg-picknote { display: none; }
  .lg-actions { gap: 8px; }
  .lg-turn { flex: 1 1 100%; min-height: 58px; font-size: 18px; }
  .lg-keys { margin-top: 8px; }
  .lg-rule { display: none; }
}

/* Tools (Break): a black leather tool roll like the kit on the desk */
.toolroll-main { position: relative; flex: 1; padding: 34px 6% 40px; }
.toolroll { position: relative; z-index: 1; max-width: 1000px; margin: auto; padding: 30px 34px 34px 64px; border-radius: 14px; background: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.5px) 0 0 / 5px 5px, linear-gradient(160deg, #222 0%, #141414 55%, #1c1c1c 100%); color: #ececec; box-shadow: 0 18px 40px rgba(0,0,0,.5), inset 0 0 0 10px #1a1a1a, inset 0 0 0 12px rgba(255,255,255,.08); }
/* the purple zip down the left edge */
.toolroll::before { content: ""; position: absolute; top: 18px; bottom: 18px; left: 26px; width: 10px; border-radius: 5px; background: repeating-linear-gradient(180deg, #8a4ff0 0 4px, #4d2392 4px 7px); }
.toolroll-head { text-align: center; }
.toolroll-head p { margin: 0; color: #c9a7ff; font-size: 13px; font-weight: 700; letter-spacing: .18em; }
.toolroll-head h1 { margin: 4px 0 0; font-family: Oswald, sans-serif; font-size: clamp(44px, 7vw, 72px); font-weight: 600; letter-spacing: .04em; line-height: 1; }
.toolroll-head .toolroll-sub { margin-top: 8px; color: #bdbdbd; font-size: 15px; font-weight: 400; letter-spacing: 0; }
.toolroll-motto { margin-top: 10px !important; color: #c9a7ff !important; font-family: Oswald, sans-serif; font-size: clamp(22px, 3.4vw, 30px) !important; font-weight: 500 !important; letter-spacing: .08em !important; }
.toolroll-section { margin-top: 30px; }
.toolroll-section h2, .toolroll-heading { margin: 30px 0 12px; padding-bottom: 6px; border-bottom: 1px dashed rgba(201,167,255,.45); color: #f4e8ff; font-family: Oswald, sans-serif; font-size: 26px; font-weight: 500; letter-spacing: .03em; }
.toolroll-section h2 { margin-top: 0; }
.toolroll-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.toolroll-facts p { margin: 0; padding: 14px 16px; border-radius: 10px; background: #0f0f0f; box-shadow: inset 0 2px 6px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.06); color: #cfcfcf; font-size: 14px; line-height: 1.55; }
.toolroll-facts strong { display: block; margin-bottom: 4px; color: #c9a7ff; font-size: 15px; }
.toolroll-states { margin-top: 14px; padding: 16px; border: 1px solid rgba(201,167,255,.35); border-radius: 10px; }
.toolroll-states-intro { margin: 0 0 12px; color: #e6dcf2; font-size: 14px; line-height: 1.55; }
.toolroll-states dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; margin: 0; }
.toolroll-states dl div { padding: 10px 12px; border-radius: 8px; background: #0f0f0f; }
.toolroll-states dt { color: #f4e8ff; font-weight: 700; }
.toolroll-states dd { margin: 2px 0 0; color: #a993c2; font-size: 13px; }
.toolroll-note { margin: 24px 0 0; padding: 12px 14px; border-left: 3px solid #c9a7ff; color: #bdbdbd; font-size: 13px; font-style: italic; line-height: 1.5; }
.toolroll-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.toolroll-rules li { padding: 12px 16px; border: 1px dashed rgba(201,167,255,.55); border-radius: 10px; color: #e6dcf2; font-size: 14px; }
.toolroll-rules strong { color: #c9a7ff; }
.toolroll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; margin-top: 22px; }
.toolroll-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 10px; background: #0f0f0f; box-shadow: inset 0 2px 6px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.06); }
.toolroll-item svg { width: 96px; height: 96px; fill: none; stroke: #d5d9de; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.toolroll-item svg .grip { stroke: #000; fill: #2b2b2b; stroke-width: 1; }
.toolroll-item h2 { margin: 2px 0 4px; font-family: Oswald, sans-serif; font-size: 22px; font-weight: 500; }
.toolroll-item p { margin: 0; color: #bdbdbd; font-size: 13px; line-height: 1.5; }
.toolroll-item .toolroll-use { display: inline-block; margin-top: 8px; color: #c9a7ff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.toolroll-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.toolroll-actions a { min-height: 44px; display: inline-grid; place-items: center; padding: 0 20px; border: 2px solid #c9a7ff; border-radius: 22px; color: #f4e8ff; font-weight: 700; text-decoration: none; }
.toolroll-actions a.primary { background: var(--red); }
.toolroll-actions a:hover, .toolroll-actions a:focus-visible { background: #8a4ff0; outline: 0; }
@media (max-width: 680px) {
  .toolroll-main { padding: 18px 12px 24px; }
  .toolroll { padding: 24px 16px 26px 44px; }
  .toolroll::before { left: 16px; }
  .toolroll-rules { grid-template-columns: 1fr; }
  .toolroll-item { grid-template-columns: 72px minmax(0, 1fr); }
  .toolroll-item svg { width: 72px; height: 72px; }
}

/* Code: the course list and the course template (code.html). An old desktop in the site's
   purples: bevelled windows with title bars, a green-on-black console, an IM-style duck chat
   and a guestbook. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.code-main { --win: #d9c9ed; --win-light: #f6f0ff; --win-mid: #a58cc4; --win-dark: #48256e; position: relative; flex: 1; padding: 26px clamp(10px, 2.4vw, 30px) 40px; color: #1c0d2b; font: 14px/1.5 Verdana, Tahoma, "DejaVu Sans", sans-serif; }
.code-main > :not(dialog) { position: relative; z-index: 1; }
.code-main [hidden] { display: none !important; }
.code-loading { color: #7dffa8; font-family: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace; }
.code-blink { animation: code-blink 1s steps(1) infinite; }
@keyframes code-blink { 50% { opacity: 0; } }

.win { padding: 3px; border: 0; background: var(--win); color: #1c0d2b; box-shadow: inset -1px -1px #12081d, inset 1px 1px var(--win-light), inset -2px -2px var(--win-dark), inset 2px 2px #fff; }
.win-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 3px 4px 3px 7px; background: linear-gradient(90deg, #2a1240, #7136cf); color: #fff; font: 700 13px/1.4 Verdana, Tahoma, sans-serif; letter-spacing: .02em; }
.win-title > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-buttons { display: flex; flex: none; gap: 2px; }
.win-buttons i, .win-buttons button { width: 18px; height: 16px; display: grid; place-items: center; padding: 0; border: 0; background: var(--win); color: #1c0d2b; font: 700 11px/1 Verdana, sans-serif; font-style: normal; box-shadow: inset -1px -1px #12081d, inset 1px 1px #fff, inset -2px -2px var(--win-mid); }
.win-body { padding: 12px; }
.sunken { background: #fff; box-shadow: inset 1px 1px var(--win-dark), inset -1px -1px #fff, inset 2px 2px #12081d, inset -2px -2px var(--win-light); }
.btn95 { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 4px 12px; border: 0; background: var(--win); color: #1c0d2b; font: 13px Verdana, Tahoma, sans-serif; text-decoration: none; box-shadow: inset -1px -1px #12081d, inset 1px 1px #fff, inset -2px -2px var(--win-mid), inset 2px 2px var(--win-light); }
.btn95:hover { background: #e6dbf4; }
.btn95:focus-visible { outline: 1px dotted #1c0d2b; outline-offset: -5px; }
.btn95:active:not(:disabled) { box-shadow: inset 1px 1px #12081d, inset -1px -1px #fff, inset 2px 2px var(--win-mid); }
.btn95:disabled { color: #8e7aa6; text-shadow: 1px 1px #fff; cursor: default; }
.code-construction { height: 18px; margin: 0 0 12px; background: repeating-linear-gradient(45deg, #ffd400 0 12px, #1c0d2b 12px 24px); }

/* Course list */
.code-catalog, .code-gate, .code-soon { max-width: 760px; margin: 0 auto; }
.code-catalog-intro { margin: 0 0 12px; }
.code-course-list { display: grid; gap: 6px; margin: 0; padding: 6px; list-style: none; background: #fff; box-shadow: inset 1px 1px var(--win-dark), inset 2px 2px #12081d; }
.code-course a { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; color: #1c0d2b; }
.code-course a:hover, .code-course a:focus-visible { background: #7136cf; color: #fff; outline: 1px dotted #fff; outline-offset: -3px; }
.code-course-icon { height: 46px; display: grid; place-items: center; background: #12081d; color: #7dffa8; font: 700 12px ui-monospace, "DejaVu Sans Mono", Menlo, monospace; box-shadow: inset -2px -2px var(--win-dark), inset 2px 2px var(--win-mid); }
.code-course-text strong { display: block; font-size: 15px; }
.code-course-text small { display: block; color: inherit; opacity: .8; font-size: 12px; }
.code-course-meta { font-size: 12px; white-space: nowrap; }
.code-course.is-soon .code-course-meta { padding: 2px 6px; background: repeating-linear-gradient(45deg, #ffd400 0 6px, #ffe866 6px 12px); color: #1c0d2b; font-weight: 700; }
.code-statusbar { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 0; padding: 2px 6px; font-size: 11px; box-shadow: inset 1px 1px var(--win-mid), inset -1px -1px #fff; }
.code-gate .win-body, .code-soon .win-body { text-align: center; }
.code-gate-icon { margin: 4px 0; font-size: 34px; }
.code-gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* The course template */
.code-desk { display: grid; grid-template-columns: 250px minmax(0, 1fr) 330px; grid-template-areas: "syllabus lesson duck" "syllabus guestbook duck"; align-items: start; gap: 14px; max-width: 1500px; margin: 0 auto; }
.code-syllabus { grid-area: syllabus; position: sticky; top: 150px; }
.code-lesson { grid-area: lesson; scroll-margin-top: 150px; }
.code-duck { grid-area: duck; position: sticky; top: 150px; }
.code-guestbook { grid-area: guestbook; }

.code-all-courses { font-size: 12px; text-decoration: underline; }
.code-course-name { margin: 8px 0 6px; font: 600 22px/1.1 Oswald, sans-serif; }
.code-counter { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 11px; }
.code-counter-digits { padding: 1px 5px; background: #12081d; color: #7dffa8; font: 700 15px ui-monospace, "DejaVu Sans Mono", Menlo, monospace; letter-spacing: .12em; box-shadow: inset 1px 1px var(--win-dark), inset -1px -1px #fff; }
.code-lessons { max-height: calc(100vh - 330px); min-height: 200px; overflow: auto; margin: 0; padding: 3px; list-style: none; background: #fff; font: 12px/1.35 ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace; box-shadow: inset 1px 1px var(--win-dark), inset 2px 2px #12081d; }
.code-lessons button { width: 100%; display: grid; grid-template-columns: 3ch 2.5ch minmax(0, 1fr); gap: 6px; padding: 4px; border: 0; background: transparent; color: #1c0d2b; font: inherit; text-align: left; }
.code-lessons button:hover { background: #eee8f7; }
.code-lessons button:focus-visible { outline: 1px dotted #1c0d2b; outline-offset: -2px; }
.code-lessons button[aria-current] { background: #7136cf; color: #fff; }
.code-num { color: #7a6a8e; }
.code-lessons button[aria-current] .code-num { color: #e6d6ff; }
.code-milestone { margin: 6px 0; padding: 2px; background: #1c0d2b; color: #ffd84a; font-weight: 700; text-align: center; letter-spacing: .08em; }

.code-lesson-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.code-lesson-kicker { margin: 0; color: #5e4a78; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.code-lesson-title { margin: 2px 0 4px; font: 600 clamp(26px, 3vw, 36px)/1.1 Oswald, sans-serif; }
.code-lesson-summary { margin: 0; color: #3b2a50; }
.code-book { flex: none; width: 64px; height: 64px; display: grid; place-items: center; align-content: center; gap: 0; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--win) 60%); color: #1c0d2b; font: 700 10px Verdana, sans-serif; text-transform: uppercase; box-shadow: inset -2px -2px var(--win-dark), inset 2px 2px #fff, 0 0 0 2px #12081d; }
.code-book svg { width: 30px; height: 30px; fill: #ffd84a; stroke: #1c0d2b; stroke-width: 1.8; stroke-linejoin: round; }
.code-book:hover { background: radial-gradient(circle at 35% 30%, #fff, #e8d8ff 60%); }
.code-book:active { box-shadow: inset 2px 2px var(--win-dark), inset -2px -2px #fff, 0 0 0 2px #12081d; }
.code-book:focus-visible { outline: 2px dotted #7136cf; outline-offset: 3px; }

.code-exercise { margin-bottom: 12px; padding: 10px 12px; }
.code-exercise h3 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.code-exercise-prompt { margin: 0; }
.code-new { padding: 0 4px; background: #e0115f; color: #fff; font-size: 11px; animation: code-blink 1.2s steps(1) infinite; }
.code-main code { padding: 0 3px; background: #eee8f7; font: .92em ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace; }
.code-expected { margin-top: 8px; font-size: 12px; }
.code-expected summary { cursor: pointer; color: #5e4a78; }
.code-expected pre { margin: 6px 0 0; padding: 6px 8px; overflow: auto; background: #12081d; color: #d9c6ec; font: 12px/1.4 ui-monospace, "DejaVu Sans Mono", Menlo, monospace; }
.code-hint { margin: 8px 0 0; padding: 6px 8px; background: #fff8c4; border: 1px dashed #b39a00; font-size: 13px; }

.code-ide { padding: 3px; background: var(--win); box-shadow: inset 1px 1px var(--win-mid), inset -1px -1px #fff; }
.code-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px; }
.code-filename { margin-right: auto; padding: 3px 10px; background: #12081d; color: #c9a7ff; font: 12px ui-monospace, "DejaVu Sans Mono", Menlo, monospace; }
.code-editor { display: grid; grid-template-columns: auto minmax(0, 1fr); height: 380px; background: #12081d; box-shadow: inset 2px 2px #000, inset -1px -1px var(--win-mid); }
.code-gutter, .code-source { margin: 0; padding: 10px 8px; font: 14px/1.5 ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace; tab-size: 4; }
.code-gutter { min-width: 3.5ch; overflow: hidden; border-right: 1px solid #3b2156; color: #6b4a88; text-align: right; user-select: none; }
.code-source { width: 100%; height: 100%; resize: none; overflow: auto; border: 0; outline: 0; background: transparent; color: #f4e8ff; caret-color: #7dffa8; white-space: pre; }
.code-source::selection { background: #7136cf; }
.code-stdin-label { display: block; padding: 6px 4px 0; font-size: 12px; font-weight: 700; }
.code-stdin-label small { font-weight: 400; color: #5e4a78; }
.code-stdin { display: block; width: 100%; margin-top: 3px; padding: 6px 8px; border: 0; resize: vertical; background: #fff; color: #1c0d2b; font: 13px/1.4 ui-monospace, "DejaVu Sans Mono", Menlo, monospace; box-shadow: inset 1px 1px var(--win-dark), inset 2px 2px #12081d; }
.code-console { position: relative; min-height: 120px; max-height: 300px; overflow: auto; margin: 6px 0 0; padding: 10px; background: #050208; color: #7dffa8; font: 13px/1.45 ui-monospace, "DejaVu Sans Mono", Menlo, monospace; white-space: pre-wrap; word-break: break-word; box-shadow: inset 2px 2px #000, inset -1px -1px var(--win-mid); }
.code-console.is-pass { color: #b8ffcf; text-shadow: 0 0 6px #7dffa8aa; }
.code-console.is-fail { color: #ffb3c2; }
.code-lesson-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.code-next { margin-left: auto; font-weight: 700; }

.code-duck-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; }
.code-duck-head p { margin: 0; }
.code-duck-icon { flex: none; width: 52px; }
.code-duck-mode { margin: 0 0 8px; padding: 4px 6px; background: #fff8c4; border: 1px dashed #b39a00; font-size: 11px; }
.code-duck-log { height: min(52vh, 460px); overflow: auto; margin: 0 0 8px; padding: 8px; list-style: none; background: #fff; font-size: 13px; box-shadow: inset 1px 1px var(--win-dark), inset 2px 2px #12081d; }
.code-duck-log li { margin-bottom: 8px; overflow-wrap: anywhere; }
.code-duck-log b { color: #0000c8; }
.code-duck-log .is-duck b { color: #c80000; }
.code-duck-log .is-thinking span { animation: code-blink 1s steps(1) infinite; }
.code-duck-form, .code-comment-form { display: grid; gap: 6px; }
.code-duck-form textarea, .code-comment-form textarea { width: 100%; padding: 6px 8px; border: 0; resize: vertical; background: #fff; color: #1c0d2b; font: 13px/1.4 Verdana, Tahoma, sans-serif; box-shadow: inset 1px 1px var(--win-dark), inset 2px 2px #12081d; }
.code-duck-form button, .code-comment-form button { justify-self: end; }
.code-comment-form label { font-weight: 700; font-size: 13px; }

.code-guestbook-note { margin: 0 0 8px; font-size: 11px; color: #5e4a78; }
.code-comments { margin: 0 0 12px; padding: 0; list-style: none; }
.code-comments li { padding: 8px 2px; border-bottom: 2px dotted var(--win-mid); }
.code-comment-meta { display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; font-size: 11px; }
.code-comment-meta b { color: #7136cf; font-size: 13px; }
.code-comment-meta time { color: #5e4a78; }
.code-comment-body { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.code-comment-delete { margin-left: auto; padding: 0; border: 0; background: none; color: #5e4a78; font-size: 11px; text-decoration: underline; }
.code-comment-empty { color: #5e4a78; font-style: italic; }

.code-reading { width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 40px); padding: 3px; }
.code-reading::backdrop { background: rgba(12, 5, 20, .7); }
.code-reading .win-body { display: flex; flex-direction: column; max-height: calc(100vh - 80px); }
.code-tabs { display: flex; gap: 2px; padding-left: 4px; }
.code-tabs button { position: relative; top: 2px; padding: 4px 14px; border: 0; background: var(--win); font: 13px Verdana, Tahoma, sans-serif; box-shadow: inset 1px 1px #fff, inset -1px 0 #12081d; }
.code-tabs button[aria-selected="true"] { z-index: 1; top: 0; padding-bottom: 6px; font-weight: 700; }
.code-reading-text, .code-reading-video { overflow: auto; padding: 14px 18px; font-size: 14px; line-height: 1.65; }
.code-reading-text pre { overflow: auto; padding: 10px 12px; background: #12081d; color: #f4e8ff; font: 13px/1.5 ui-monospace, "DejaVu Sans Mono", Menlo, monospace; }
.code-reading-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }


@media (max-width: 1240px) {
  .code-desk { grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "syllabus lesson" "syllabus duck" "syllabus guestbook"; }
  .code-duck { position: static; }
  .code-duck-log { height: 280px; }
}
@media (max-width: 820px) {
  .code-desk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lesson" "duck" "syllabus" "guestbook"; }
  .code-syllabus { position: static; }
  .code-lessons { max-height: 320px; }
  .code-editor { height: 300px; }
  .code-course a { grid-template-columns: 46px minmax(0, 1fr); }
  .code-course-meta { grid-column: 2; }
}
@media (max-width: 680px) {
  .code-main { padding: 14px 8px 28px; }
  .win-body { padding: 8px; }
  .code-lesson-head { gap: 10px; }
  .code-book { width: 54px; height: 54px; }
  .code-lesson-nav .btn95 { flex: 1 1 45%; }
  .code-next { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .code-blink, .code-new, .code-duck-log .is-thinking span { animation: none; }
}

/* Write: course symbols on the Write page, and the course template (write-course.html) */
.notebook-course h2.has-symbol::before { content: none; }
.notebook-symbol { display: inline-block; min-width: 1.6em; margin-left: -6px; padding: 0 6px; border: 2px solid #7136cf; border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%; color: #7136cf; font: 700 22px/28px Caveat, "Segoe Print", "DejaVu Sans", cursive; text-align: center; vertical-align: 3px; transform: rotate(-4deg); }

.wc-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 860px) 330px; justify-content: center; align-items: start; gap: 28px; }
.wc-layout[hidden], .wc-gate[hidden] { display: none; }
.wc-sheet { max-width: none; margin: 0; }
.wc-gate-actions { margin: var(--rule) 0 0; text-align: center; }
.wc-crumb { position: absolute; top: 18px; right: 7%; color: #6b6080; font-size: 22px; }
.wc-crumb:hover, .wc-crumb:focus-visible { color: #7136cf; outline: 0; }
.wc-title { font-size: 50px; }
.wc-title span { padding: 0 30px; }
.wc-title b, .wc-title i { font-style: normal; font-weight: 700; }
.wc-title b { margin-right: 6px; font-family: Caveat, "DejaVu Sans", cursive; }
.wc-meta { margin: 0; color: #6b6080; text-align: center; }
.wc-overview p, .wc-theory p { margin: 0 0 var(--rule); }
.wc-overview ol, .wc-theory ol { margin: 0 0 var(--rule); padding-left: 1.3em; }
.wc-sheet pre { margin: 0 0 var(--rule); padding: 12px 16px; overflow-x: auto; background: #fffdf2; border: 1px solid #e6dcc0; color: #2a2350; font: 17px/1.5 ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace; box-shadow: 0 3px 8px rgba(42, 35, 80, .08); }
.wc-sheet code { padding: 0 3px; background: #efe9ff; font: .72em ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace; }
.wc-contents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; margin: 0; padding: 0; list-style: none; }
.wc-contents button { width: 100%; display: flex; align-items: baseline; gap: 6px; padding: 0; border: 0; background: transparent; color: #2a2350; font: 500 23px/var(--rule) Caveat, "Segoe Print", cursive; text-align: left; }
.wc-contents button:hover, .wc-contents button:focus-visible { color: #7136cf; outline: 0; }
.wc-contents button[aria-current] { color: #7136cf; font-weight: 700; text-decoration: underline wavy #7136cf 1px; text-underline-offset: 6px; }
.wc-box { flex: none; width: 1.1em; color: #6b6080; }
.wc-num { flex: none; color: #6b6080; }

.wc-lesson { margin-top: calc(var(--rule) * 2); scroll-margin-top: 150px; }
.wc-kicker { margin: 0; color: #6b6080; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; }
.wc-lesson-title { margin: 0; font-size: 46px; font-weight: 700; line-height: calc(var(--rule) * 1.5); }
.wc-summary { margin: 0 0 var(--rule); color: #4b3f66; }
.wc-head { display: inline-block; margin: 0 0 4px; padding: 0 6px; background: linear-gradient(transparent 55%, rgba(255, 216, 74, .65) 55% 90%, transparent 90%); color: #2a2350; font-size: 32px; font-weight: 700; line-height: var(--rule); transform: rotate(-1deg); }
.wc-sheet .wc-example { position: relative; margin: 6px 0 calc(var(--rule) * 1.2); background: #fff6b3; border: 0; box-shadow: 0 6px 14px rgba(42, 35, 80, .14); transform: rotate(-.5deg); }
.wc-example::before { content: ""; position: absolute; top: -10px; left: 40%; width: 90px; height: 22px; background: rgba(214, 205, 180, .7); transform: rotate(-3deg); }

.wc-problem-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; }
.wc-problem-tabs button { min-width: 38px; padding: 0 8px; border: 2px solid #6b6080; border-radius: 50%; background: transparent; color: #6b6080; font: 700 20px/30px Caveat, "Segoe Print", cursive; }
.wc-problem-tabs button[aria-current] { border-color: #7136cf; background: #7136cf; color: #fff; }
.wc-problem-tabs button:focus-visible { outline: 2px dotted #7136cf; outline-offset: 2px; }
.wc-prompt { margin: 0 0 12px; font-size: 27px; font-weight: 700; }
.wc-new { display: inline-block; color: #e0115f; transform: rotate(-6deg); }
.wc-new[hidden] { display: none; }
.wc-scratch { margin: 0 0 14px; border: 1px solid #c9d6ea; background-color: #fdfcf7; background-image: linear-gradient(#dfe7f4 1px, transparent 1px), linear-gradient(90deg, #dfe7f4 1px, transparent 1px); background-size: 20px 20px; box-shadow: 0 4px 10px rgba(42, 35, 80, .08); }
.wc-scratch-tools { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; padding: 2px 12px; border-bottom: 1px dashed #c9d6ea; background: rgba(251, 248, 242, .9); color: #6b6080; font-size: 20px; }
.wc-scratch-tools span { margin-right: auto; }
.wc-scratch-tools button { padding: 0; border: 0; background: transparent; color: #6b6080; font: 700 20px/32px Caveat, "Segoe Print", cursive; }
.wc-scratch-tools button[aria-pressed="true"] { color: #7136cf; text-decoration: underline; }
.wc-scratch-tools button:focus-visible { outline: 2px dotted #7136cf; }
.wc-canvas { display: block; width: 100%; height: 260px; touch-action: none; cursor: crosshair; }
.wc-answer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; }
.wc-answer label { font-size: 28px; font-weight: 700; }
.wc-answer input { width: min(260px, 100%); padding: 0 4px; border: 0; border-bottom: 2px solid #2a2350; background: transparent; color: #2a2350; font: 700 28px/var(--rule) Caveat, "Segoe Print", cursive; outline: 0; }
.wc-answer input:focus { border-bottom-color: #7136cf; }
.wc-feedback { min-height: var(--rule); margin: 4px 0 0; font-weight: 700; }
.wc-feedback.is-right { color: #217a3c; }
.wc-feedback.is-wrong { color: #b3261e; }
.wc-hint { margin: 0; color: #6b6080; }

/* The coffee stain: a ring left by a mug, with "another one" and "next lesson" inside it */
.wc-coffee { width: min(100%, 390px); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; margin: calc(var(--rule) * .5) auto 0; padding: 60px; border-radius: 50%; text-align: center; background:
  radial-gradient(circle at 50% 50%, transparent 0 60%, rgba(122, 78, 38, .42) 63%, rgba(150, 102, 58, .22) 66%, transparent 69%),
  radial-gradient(circle at 56% 46%, transparent 0 63%, rgba(122, 78, 38, .2) 65%, transparent 67.5%),
  radial-gradient(circle at 50% 50%, rgba(176, 124, 70, .13) 0 62%, transparent 63%); }
.wc-coffee-text { margin: 0; font-size: 24px; line-height: 1.2; }
.wc-coffee-actions { display: flex; flex-direction: column; gap: 10px; }
.wc-coffee .notebook-start:disabled { opacity: .45; cursor: default; }
.wc-coffee .notebook-start:disabled:hover { border-color: #2a2350; background: transparent; color: #2a2350; }

.wc-notes { margin-top: calc(var(--rule) * 2); }
.wc-notes-note { margin: 0; color: #6b6080; font-size: 20px; }
.wc-comments { margin: 0 0 var(--rule); padding: 0; list-style: none; }
.wc-comments li { padding: 6px 0; border-bottom: 1px dashed #b9cbe8; }
.wc-comment-meta { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 20px; color: #6b6080; }
.wc-comment-meta b { color: #7136cf; font-size: 24px; }
.wc-comment-meta .notebook-try { margin-left: auto; }
.wc-comment-body { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.wc-comment-empty { color: #6b6080; }
.wc-comment-form, .wc-monkey-form { display: grid; gap: 8px; }
.wc-comment-form label { font-weight: 700; }
.wc-comment-form textarea, .wc-monkey-form textarea { width: 100%; padding: 6px 10px; border: 2px solid #2a2350; border-radius: 14px 10px 16px 8px; background: transparent; color: #2a2350; font: 500 22px/1.3 Caveat, "Segoe Print", cursive; resize: vertical; }
.wc-comment-form textarea:focus, .wc-monkey-form textarea:focus { border-color: #7136cf; outline: 0; }
.wc-comment-form .notebook-start, .wc-monkey-form .notebook-start { justify-self: end; }

/* Ook's sticky note */
.wc-monkey { position: sticky; top: 150px; padding: 16px 18px 20px; background: #fff3a8; color: #2a2350; font: 500 21px/1.3 Caveat, "Segoe Print", cursive; box-shadow: 0 10px 24px rgba(0, 0, 0, .28); transform: rotate(.8deg); }
.wc-monkey-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.wc-monkey-face { flex: none; width: 74px; color: #2a2350; }
.wc-monkey-face svg { display: block; width: 100%; }
.wc-monkey-head h2 { margin: 0; font-size: 34px; line-height: 1; }
.wc-monkey-head p { margin: 2px 0 0; font-size: 19px; }
.wc-monkey-mode { margin: 0 0 8px; padding: 2px 6px; border: 1px dashed #b39a00; font-size: 17px; }
.wc-monkey-mode[hidden] { display: none; }
.wc-monkey-log { height: clamp(160px, calc(100vh - 620px), 420px); overflow: auto; margin: 0 0 10px; padding: 8px 10px; list-style: none; background: rgba(255, 255, 255, .5); border: 1px dashed #c9a800; }
.wc-monkey-log li { margin-bottom: 8px; overflow-wrap: anywhere; }
.wc-monkey-log b { color: #7136cf; }
.wc-monkey-log .is-monkey b { color: #8a3b12; }
.wc-monkey-log .is-thinking span { color: #8a7a4a; }
.wc-monkey-log code { padding: 0 3px; background: rgba(255, 255, 255, .7); font: .8em ui-monospace, "DejaVu Sans Mono", Menlo, monospace; }

@media (max-width: 1180px) {
  .wc-layout { grid-template-columns: minmax(0, 860px); }
  .wc-monkey { position: static; width: min(100%, 860px); margin: 0 auto; transform: none; }
  .wc-monkey-log { height: 300px; }
}
@media (max-width: 680px) {
  .wc-title { font-size: 34px; }
  .wc-title span { padding: 0 16px; }
  .wc-crumb { right: 18px; }
  .wc-contents { grid-template-columns: minmax(0, 1fr); }
  .wc-lesson-title { font-size: 36px; }
  .wc-coffee { width: min(100%, 320px); padding: 44px; }
  .wc-canvas { height: 220px; }
  .notebook-symbol { font-size: 19px; line-height: 24px; }
}

/* Make: hardware courses (make.html). Each course is a green circuit board: solder mask,
   faint copper traces, mounting holes, white silkscreen and gold pads for buttons. Lessons with
   numbers have a math sheet tucked behind the board, pulled out by its tab. */
.make-main { --mask: #0d5e3a; --mask-dark: #083d26; --copper: #d4a72c; --silk: #f4f4ea; position: relative; flex: 1; overflow-x: clip; /* the math paper peeks out past the board */ padding: 30px clamp(10px, 3vw, 40px) 46px; }
.make-main > :not(template) { position: relative; z-index: 1; }
.make-main [hidden] { display: none !important; }
.mk-loading { color: #7dffa8; font-family: ui-monospace, "DejaVu Sans Mono", Menlo, monospace; }

.mk-board { position: relative; padding: 30px 34px; border-radius: 12px; background-color: var(--mask); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23d4a72c%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M0%2040h70l20%2020h60l20-20h70%22%2F%3E%3Cpath%20d%3D%22M30%200v90l20%2020v130%22%2F%3E%3Cpath%20d%3D%22M200%20240v-70l-20-20h-60%22%2F%3E%3Cpath%20d%3D%22M0%20190h40l20-20h20%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22%23d4a72c%22%20fill-opacity%3D%22.16%22%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%2260%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%22110%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%22150%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%22170%22%20r%3D%224%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .06), transparent 60%); color: #e6f2e9; font: 16px/1.65 "DM Sans", sans-serif; box-shadow: 0 16px 34px rgba(0, 0, 0, .5), inset 0 0 0 2px #0a4a2e; }
/* Mounting holes in the corners */
.mk-board::before { content: ""; position: absolute; inset: 6px; pointer-events: none; background:
  radial-gradient(circle at 9px 9px, #140f06 0 3.5px, var(--copper) 4px 7px, transparent 7.5px),
  radial-gradient(circle at calc(100% - 9px) 9px, #140f06 0 3.5px, var(--copper) 4px 7px, transparent 7.5px),
  radial-gradient(circle at 9px calc(100% - 9px), #140f06 0 3.5px, var(--copper) 4px 7px, transparent 7.5px),
  radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #140f06 0 3.5px, var(--copper) 4px 7px, transparent 7.5px); }
.mk-silk { margin: 0; color: var(--silk); font: 600 15px/1.4 ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.mk-silk-small { font-size: 12px; letter-spacing: .16em; opacity: .85; }
.mk-board a { color: #ffe08a; }
.mk-board code { padding: 0 4px; border: 1px solid rgba(212, 167, 44, .55); border-radius: 3px; background: rgba(212, 167, 44, .16); color: #ffe08a; font: .9em ui-monospace, "DejaVu Sans Mono", Menlo, monospace; }
.mk-board pre { overflow-x: auto; padding: 12px 14px; border: 1px solid rgba(212, 167, 44, .4); border-radius: 6px; background: var(--mask-dark); color: #eaf4ec; font: 14px/1.5 ui-monospace, "DejaVu Sans Mono", Menlo, monospace; }
.mk-board ol { padding-left: 1.4em; }
.mk-board ol li::marker { color: var(--copper); font-weight: 700; }
.mk-pad { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 16px; border: 0; border-radius: 6px; background: linear-gradient(#e8c463, #c49a22); color: #2a1d00; font: 700 13px ui-monospace, "DejaVu Sans Mono", Menlo, monospace; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; box-shadow: inset 0 -2px rgba(0, 0, 0, .25), 0 0 0 3px var(--mask-dark); }
.mk-board a.mk-pad { color: #2a1d00; }
.mk-pad:hover:not(:disabled) { background: linear-gradient(#f3d27a, #d4a72c); }
.mk-pad:focus-visible { outline: 2px solid var(--silk); outline-offset: 3px; }
.mk-pad:disabled { opacity: .4; cursor: default; }
.mk-pad-plain { background: linear-gradient(#ededed, #b5b5b5); color: #1d1d1d; }
.mk-pad-plain:hover:not(:disabled) { background: linear-gradient(#fafafa, #c8c8c8); }
.mk-pad[aria-pressed="true"] { background: linear-gradient(#7dffa8, #2fbf63); color: #04260f; box-shadow: inset 0 -2px rgba(0, 0, 0, .2), 0 0 0 3px var(--mask-dark), 0 0 14px rgba(57, 255, 122, .6); }

/* Course list */
.mk-catalog, .mk-gate, .mk-soon { max-width: 880px; margin: 0 auto; }
.mk-catalog-title { margin: 6px 0 4px; font: 600 clamp(28px, 4vw, 40px)/1.1 Oswald, sans-serif; letter-spacing: .04em; }
.mk-catalog-intro { margin: 0 0 18px; max-width: 640px; }
.mk-course-list { margin: 0; padding: 0; list-style: none; }
.mk-course-row a { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 10px; border-bottom: 1px dashed rgba(212, 167, 44, .4); color: inherit; text-decoration: none; }
.mk-course-row a:hover, .mk-course-row a:focus-visible { background: rgba(255, 255, 255, .07); outline: 1px dashed var(--copper); outline-offset: -2px; }
.mk-board-icon { display: block; width: 100%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); }
.mk-row-text strong { display: block; color: var(--silk); font: 600 21px/1.2 Oswald, sans-serif; letter-spacing: .03em; }
.mk-row-text small { display: block; margin-top: 2px; font-size: 14px; opacity: .85; }
.mk-row-meta { color: #ffe08a; font: 12px ui-monospace, "DejaVu Sans Mono", Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.mk-course-row.is-soon .mk-row-icon { opacity: .55; filter: grayscale(.4); }
.mk-course-row.is-soon .mk-row-meta { padding: 2px 8px; border: 1px dashed rgba(255, 224, 138, .6); }
.mk-gate-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* The course template */
.mk-course { display: grid; grid-template-columns: 270px minmax(0, 1fr); align-items: start; gap: 24px; max-width: 1280px; margin: 0 auto; }
.mk-bom { position: sticky; top: 150px; padding: 22px 18px; }
.mk-back { font-size: 13px; }
.mk-bom h2 { margin-top: 12px; }
.mk-count { margin: 2px 0 10px; color: #ffe08a; font: 13px ui-monospace, "DejaVu Sans Mono", Menlo, monospace; }
.mk-lessons { max-height: calc(100vh - 360px); min-height: 180px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.mk-board .mk-lessons { padding-left: 0; }
.mk-lessons button { width: 100%; display: grid; grid-template-columns: 14px 28px minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 6px; border: 0; border-radius: 4px; background: transparent; color: #e6f2e9; font: 14px/1.3 "DM Sans", sans-serif; text-align: left; }
.mk-lessons button:hover { background: rgba(255, 255, 255, .07); }
.mk-lessons button:focus-visible { outline: 1px dashed var(--copper); outline-offset: -1px; }
.mk-lessons button[aria-current] { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 700; }
.mk-ref { color: var(--silk); font: 12px ui-monospace, "DejaVu Sans Mono", Menlo, monospace; opacity: .8; }
.mk-led { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .4); }
.mk-led.is-off { background: #1d3527; }
.mk-led.is-started { background: #ffb300; box-shadow: 0 0 8px rgba(255, 179, 0, .7); }
.mk-led.is-done { background: #39ff7a; box-shadow: 0 0 9px rgba(57, 255, 122, .85); }

.mk-stack { position: relative; scroll-margin-top: 150px; }
.mk-stack.has-math { margin-top: 44px; }
.mk-lesson { z-index: 2; }
.mk-lesson-head { display: flex; align-items: flex-start; gap: 18px; }
.mk-head-icon { flex: none; width: 84px; padding-top: 4px; }
.mk-kicker { margin: 6px 0 0; color: #ffe08a; font: 12px ui-monospace, "DejaVu Sans Mono", Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; }
.mk-lesson-title { margin: 2px 0 4px; color: var(--silk); font: 600 clamp(28px, 3.4vw, 40px)/1.1 Oswald, sans-serif; letter-spacing: .02em; }
.mk-summary { margin: 0; opacity: .9; }
.mk-switch { display: inline-flex; align-items: center; gap: 4px; margin: 20px 0 12px; padding: 4px; border-radius: 8px; background: #151515; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6); }
.mk-switch .mk-silk { padding: 0 8px 0 6px; color: #9a9a9a; }
.mk-switch button { min-width: 78px; padding: 6px 12px; border: 0; border-radius: 5px; background: transparent; color: #9a9a9a; font: 700 13px ui-monospace, "DejaVu Sans Mono", Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.mk-switch button[aria-checked="true"] { background: linear-gradient(#f2f2f2, #b9b9b9); color: #111; box-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
.mk-switch button:focus-visible { outline: 2px solid var(--copper); outline-offset: 1px; }
.mk-tutorial p { margin: 0 0 14px; }
.mk-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 6px; }
.mk-scope { position: relative; height: 190px; margin-bottom: 12px; border: 6px solid #2b2b2b; border-radius: 10px; background-color: #06140b; background-image: linear-gradient(rgba(109, 255, 155, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(109, 255, 155, .12) 1px, transparent 1px); background-size: 100% 25%, 10% 100%; }
.mk-scope span { position: absolute; top: 50%; left: 4%; right: 4%; height: 2px; background: #6dff9b; box-shadow: 0 0 8px #6dff9b; }
.mk-lesson-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 22px 0 6px; }
.mk-next { margin-left: auto; }

.mk-notes { margin-top: 26px; padding-top: 18px; border-top: 1px dashed rgba(212, 167, 44, .45); }
.mk-notes-note { margin: 4px 0 8px; font-size: 13px; opacity: .8; }
.mk-comments { margin: 0 0 14px; padding: 0; list-style: none; }
.mk-board .mk-comments { padding-left: 0; }
.mk-comments li { padding: 8px 0; border-bottom: 1px dashed rgba(255, 255, 255, .15); }
.mk-comment-meta { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 12px; opacity: .85; }
.mk-comment-meta b { color: #ffe08a; font-size: 14px; }
.mk-comment-delete { margin-left: auto; padding: 0; border: 0; background: none; color: #ffe08a; font: 12px ui-monospace, monospace; text-decoration: underline; }
.mk-comment-body { margin: 2px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.mk-comment-empty { opacity: .75; font-style: italic; }
.mk-comment-form { display: grid; gap: 8px; }
.mk-comment-form label { font-weight: 600; }
.mk-comment-form textarea { width: 100%; padding: 8px 10px; border: 1px solid rgba(212, 167, 44, .55); border-radius: 6px; background: var(--mask-dark); color: #eaf4ec; font: 15px/1.4 "DM Sans", sans-serif; resize: vertical; }
.mk-comment-form textarea:focus { outline: 2px solid var(--copper); outline-offset: 1px; }
.mk-comment-form .mk-pad { justify-self: end; }

/* The math sheet: lined paper behind the board. Closed, only its edge and tab show; open,
   it comes to the front and the board slips behind it. */
.mk-paper { position: absolute; inset: 0; z-index: 1; border-radius: 3px; background-color: #fbf8f2; background-image: repeating-linear-gradient(180deg, transparent 0 33px, #b9cbe8 33px 34px); color: #2a2350; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); transform: translate(24px, -18px) rotate(1.4deg); }
.mk-paper-body { height: 100%; overflow: hidden; padding: 30px 34px 34px; font: 500 23px/34px Caveat, "Segoe Print", cursive; }
.mk-paper-tab { position: absolute; top: -40px; right: 46px; z-index: 1; padding: 4px 22px 10px; border: 0; border-radius: 10px 10px 0 0; background: #fbf8f2; color: #7136cf; font: 700 24px/1 Caveat, "Segoe Print", cursive; box-shadow: 0 -4px 10px rgba(0, 0, 0, .18); }
.mk-paper-tab:hover, .mk-paper-tab:focus-visible { color: #4b1f99; outline: 2px dotted #7136cf; outline-offset: -4px; }
.mk-stack.math-open .mk-paper { position: relative; inset: auto; z-index: 3; transform: rotate(-.3deg); animation: mk-pull-out .35s ease-out; }
.mk-stack.math-open .mk-paper-body { height: auto; overflow: visible; }
.mk-stack.math-open .mk-lesson { position: absolute; inset: 0; z-index: 1; overflow: hidden; transform: translate(-20px, 16px) rotate(-1.2deg); }
@keyframes mk-pull-out { from { transform: translate(24px, -18px) rotate(1.4deg); } }
.mk-paper-title { margin: 0; color: #7136cf; font-size: 46px; font-weight: 700; line-height: 68px; text-decoration: underline wavy #7136cf 2px; text-underline-offset: 8px; }
.mk-math-text p { margin: 0 0 34px; }
.mk-paper pre { margin: 0 0 34px; padding: 10px 14px; overflow-x: auto; background: #fff6b3; color: #2a2350; font: 16px/1.5 ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace; box-shadow: 0 4px 10px rgba(42, 35, 80, .12); }
.mk-paper code { padding: 0 3px; background: #efe9ff; font: .7em ui-monospace, "DejaVu Sans Mono", Menlo, monospace; }
.mk-paper-head { display: inline-block; margin: 0; padding: 0 6px; background: linear-gradient(transparent 55%, rgba(255, 216, 74, .65) 55% 90%, transparent 90%); font-size: 30px; font-weight: 700; line-height: 34px; }
.mk-problem-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.mk-problem-tabs button { min-width: 38px; padding: 0 8px; border: 2px solid #6b6080; border-radius: 50%; background: transparent; color: #6b6080; font: 700 20px/30px Caveat, "Segoe Print", cursive; }
.mk-problem-tabs button[aria-current] { border-color: #7136cf; background: #7136cf; color: #fff; }
.mk-problem-tabs button:focus-visible { outline: 2px dotted #7136cf; outline-offset: 2px; }
.mk-prompt { margin: 0 0 8px; font-size: 26px; font-weight: 700; }
.mk-new { display: inline-block; color: #e0115f; transform: rotate(-6deg); }
.mk-answer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.mk-answer label { font-size: 27px; font-weight: 700; }
.mk-answer input { width: min(220px, 100%); padding: 0 4px; border: 0; border-bottom: 2px solid #2a2350; background: transparent; color: #2a2350; font: 700 27px/34px Caveat, "Segoe Print", cursive; outline: 0; }
.mk-answer input:focus { border-bottom-color: #7136cf; }
.mk-unit { margin-left: -8px; font-size: 26px; font-weight: 700; }
.mk-feedback { min-height: 34px; margin: 0; font-weight: 700; }
.mk-feedback.is-right { color: #217a3c; }
.mk-feedback.is-wrong { color: #b3261e; }
.mk-hint { margin: 0; color: #6b6080; }

/* Bodge, on a scrap of brown kraft paper */
.mk-helper { margin-top: 24px; padding: 14px 16px 16px; border-radius: 4px; background: #e9d3ad; color: #3a2414; box-shadow: 0 6px 14px rgba(58, 36, 20, .25); transform: rotate(-.6deg); font-size: 21px; line-height: 1.3; }
.mk-helper-head { display: flex; align-items: center; gap: 12px; }
.mk-bodge-slot { flex: none; width: 76px; }
.mk-bodge-face { display: block; width: 100%; }
.mk-helper-head h3 { margin: 0; font-size: 32px; line-height: 1; }
.mk-helper-head p { margin: 2px 0 0; font-size: 19px; }
.mk-helper-mode { margin: 8px 0; padding: 2px 6px; border: 1px dashed #8a6a3a; font-size: 17px; }
.mk-helper-log { height: 230px; overflow: auto; margin: 8px 0 10px; padding: 8px 10px; list-style: none; background: rgba(255, 255, 255, .45); border: 1px dashed #a2804c; }
.mk-helper-log li { margin-bottom: 8px; overflow-wrap: anywhere; }
.mk-helper-log b { color: #7136cf; }
.mk-helper-log .is-helper b { color: #7b4a2a; }
.mk-helper-log .is-thinking span { color: #8a6a3a; }
.mk-helper-form { display: grid; gap: 8px; }
.mk-helper-form textarea { width: 100%; padding: 6px 10px; border: 2px solid #3a2414; border-radius: 12px 8px 14px 8px; background: rgba(255, 255, 255, .35); color: #3a2414; font: 500 21px/1.3 Caveat, "Segoe Print", cursive; resize: vertical; }
.mk-helper-form textarea:focus { border-color: #7136cf; outline: 0; }
.mk-helper-form .notebook-start { justify-self: end; }

@media (max-width: 960px) {
  .mk-course { grid-template-columns: minmax(0, 1fr); }
  .mk-bom { position: static; }
  .mk-lessons { max-height: 300px; }
}
@media (max-width: 680px) {
  .make-main { padding: 18px 8px 30px; }
  .mk-board { padding: 24px 18px; }
  .mk-lesson-head { gap: 12px; }
  .mk-head-icon { width: 56px; }
  .mk-course-row a { grid-template-columns: 54px minmax(0, 1fr); }
  .mk-row-meta { grid-column: 2; }
  .mk-paper { transform: translate(10px, -14px) rotate(1deg); }
  .mk-paper-body { padding: 24px 18px 26px; }
  .mk-paper-tab { right: 22px; }
  .mk-stack.math-open .mk-lesson { transform: translate(-8px, 10px) rotate(-1deg); }
  .mk-next { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-stack.math-open .mk-paper { animation: none; }
}

/* Badges: round icons earned from progress (profile-data.js), used as avatars in the header,
   the profile popup and on comments. --badge is set per badge. */
.badge-icon { --badge: #6b4a88; display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .45), transparent 55%), var(--badge); color: #fff; font: 700 1em/1 "DejaVu Sans", "Segoe UI Symbol", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 0 0 3px var(--badge); vertical-align: middle; }
.badge-sm { width: 22px; height: 22px; font-size: 12px; }
.badge-md { width: 44px; height: 44px; font-size: 20px; }
.badge-lg { width: 76px; height: 76px; font-size: 34px; }
.badge-initial { --badge: #48256e; font-family: Oswald, sans-serif; }
.badge-icon svg, .nav-icon svg { display: block; width: 74%; height: auto; }
.nav-icon.has-badge { border-color: var(--badge); background: var(--badge); color: #fff; font-size: 15px; }

/* The profile popup: a retro window in the site's purples */
.pf { width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 0; background: #d9c9ed; color: #1c0d2b; font: 14px/1.5 Verdana, Tahoma, "DejaVu Sans", sans-serif; box-shadow: inset -2px -2px #48256e, inset 2px 2px #fff, 0 24px 60px rgba(0, 0, 0, .55); overflow: auto; }
.pf::backdrop { background: rgba(12, 5, 20, .7); }
.pf-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 3px 3px 0; padding: 4px 4px 4px 10px; background: linear-gradient(90deg, #2a1240, #7136cf); color: #fff; }
.pf-bar h2 { margin: 0; overflow: hidden; font: 700 13px Verdana, Tahoma, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.pf-close { width: 22px; height: 20px; padding: 0; border: 0; background: #d9c9ed; color: #1c0d2b; font: 700 13px/1 Verdana, sans-serif; box-shadow: inset -1px -1px #12081d, inset 1px 1px #fff; }
.pf-head { display: flex; align-items: center; gap: 16px; padding: 16px 18px 12px; }
.pf-who { flex: 1; min-width: 0; display: grid; }
.pf-name { overflow: hidden; font: 600 24px/1.1 Oswald, sans-serif; text-overflow: ellipsis; }
.pf-email, .pf-tally { overflow: hidden; color: #4b3f66; font-size: 12px; text-overflow: ellipsis; }
.pf-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 2px solid #48256e; }
.pf-tabs button { position: relative; top: 2px; padding: 6px 14px; border: 0; border-bottom: 2px solid #48256e; background: #cbb7e3; color: #1c0d2b; font: 13px Verdana, Tahoma, sans-serif; box-shadow: inset 1px 1px #fff; }
.pf-tabs button[aria-selected="true"] { border-bottom-color: #f6f0ff; background: #f6f0ff; font-weight: 700; }
.pf-tabs button:focus-visible, .pf-button:focus-visible, .pf-avatar-choice:focus-visible { outline: 2px dotted #7136cf; outline-offset: 2px; }
.pf-body { padding: 16px 18px 20px; background: #f6f0ff; }
.pf-body [hidden] { display: none; }
.pf-form { display: grid; gap: 6px; }
.pf-form + .pf-form { margin-top: 22px; padding-top: 18px; border-top: 1px dashed #a58cc4; }
.pf-form h3 { margin: 0 0 4px; font: 600 18px Oswald, sans-serif; }
.pf-form label, .pf-avatars legend { font-weight: 700; font-size: 12px; }
.pf-form small { font-weight: 400; color: #5e4a78; }
.pf-form input { padding: 7px 9px; border: 0; background: #fff; color: #1c0d2b; font: 14px Verdana, Tahoma, sans-serif; box-shadow: inset 1px 1px #48256e, inset 2px 2px #12081d; }
.pf-form input:focus { outline: 2px solid #7136cf; outline-offset: 1px; }
.pf-form input:disabled { background: #e6dcf0; color: #7a6a8e; }
.pf-button { justify-self: start; display: inline-flex; align-items: center; padding: 6px 14px; border: 0; background: #d9c9ed; color: #1c0d2b; font: 13px Verdana, Tahoma, sans-serif; text-decoration: none; box-shadow: inset -1px -1px #12081d, inset 1px 1px #fff, inset -2px -2px #a58cc4; cursor: pointer; }
.pf-button:active:not(:disabled) { box-shadow: inset 1px 1px #12081d, inset -1px -1px #fff; }
.pf-button:disabled { color: #8e7aa6; cursor: default; }
.pf-primary { background: #7136cf; color: #fff; box-shadow: inset -1px -1px #2a1240, inset 1px 1px #b896ee; }
.pf-status { min-height: 1.4em; margin: 2px 0 0; font-size: 12px; }
.pf-status.is-ok { color: #1f7a3c; }
.pf-status.is-error { color: #b3261e; }
.pf-note { margin: 0 0 12px; padding: 6px 8px; background: #fff8c4; border: 1px dashed #b39a00; font-size: 12px; list-style: none; }
.pf-avatars { margin: 10px 0 6px; padding: 8px 10px 10px; border: 1px solid #a58cc4; }
.pf-avatar-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-avatar-choice { padding: 4px; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; }
.pf-avatar-choice[aria-pressed="true"] { border-color: #7136cf; background: #e6d6ff; }
.pf-badges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.pf-badges li { display: flex; align-items: center; gap: 10px; padding: 8px; background: #fff; box-shadow: inset 1px 1px #a58cc4; }
.pf-badges li div { display: grid; font-size: 12px; }
.pf-badges strong { font-size: 13px; }
.pf-badges .is-locked .badge-icon { filter: grayscale(1); opacity: .35; }
.pf-badges .is-locked { color: #7a6a8e; }
.pf-courses { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pf-courses li:not(.pf-note) { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px; background: #fff; box-shadow: inset 1px 1px #a58cc4; }
.pf-tag { padding: 2px 0; color: #fff; font: 700 11px Verdana, sans-serif; text-align: center; letter-spacing: .06em; text-transform: uppercase; }
.pf-tag[data-category="code"] { background: #1c0d2b; }
.pf-tag[data-category="write"] { background: #5b2bb0; }
.pf-tag[data-category="make"] { background: #0d5e3a; }
.pf-course { display: grid; gap: 3px; min-width: 0; }
.pf-course strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-course small { color: #4b3f66; }
.pf-meter { height: 8px; background: #e6dcf0; box-shadow: inset 1px 1px #a58cc4; }
.pf-meter span { display: block; height: 100%; background: linear-gradient(90deg, #7136cf, #b896ee); }
.code-comment-meta .badge-icon, .wc-comment-meta .badge-icon, .mk-comment-meta .badge-icon { align-self: center; }
@media (max-width: 560px) {
  .pf-head { flex-wrap: wrap; gap: 12px; }
  .pf-tabs { overflow-x: auto; padding: 0 6px; }
  .pf-tabs button { padding: 6px 10px; }
  .pf-badges { grid-template-columns: minmax(0, 1fr); }
  .pf-courses li:not(.pf-note) { grid-template-columns: minmax(0, 1fr) auto; }
  .pf-tag { grid-column: 1 / -1; justify-self: start; padding: 2px 8px; }
}