/* The look of the pages that are not the tutor itself: the first page, signing
   in, the agreement, and the administrator's pages. Dark, like the desk's own
   screen, with the tutor's light as the one thing that moves. No type, picture
   or script is fetched from anywhere but here. */

:root {
  --bg: #0c0f13; --panel: #151a21; --raised: #1b212a; --line: #262d38; --line-strong: #394353;
  --text: #ece8e1; --soft: #b9bfc9; --dim: #838d9b;
  --accent: #6aa9ff; --accent-ink: #07121f;
  --green: #2fbf6b; --amber: #d0a23f; --blue: #3f7fd0;
  --warn: #f0b354; --bad: #ff8f80;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.6 var(--sans);
       -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: #9cc6ff; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0 0 14px; text-wrap: pretty; }
.dim { color: var(--dim); }
.small { font-size: 14px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* -- the name, top left */
.top { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.name { display: inline-flex; align-items: center; gap: 11px; color: var(--text); text-decoration: none;
        font: 500 20px/1 var(--serif); letter-spacing: .01em; }
.name:hover { color: var(--text); }
.name i { width: 13px; height: 13px; border-radius: 50%; background: var(--green);
          box-shadow: 0 0 14px rgba(47, 191, 107, .7); }

.top-right { display: inline-flex; align-items: center; gap: 16px; }
.top-right a:not(.button) { font-size: 14px; color: var(--dim); }

/* -- buttons */
.button { display: inline-block; font: 600 16px/1 var(--sans); padding: 13px 24px; border-radius: 10px;
          border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
          text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.button:hover { background: #8bbcff; border-color: #8bbcff; color: var(--accent-ink); }
.button:active { transform: translateY(1px); }
.button:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; }
.button.quiet { background: transparent; color: var(--text); border-color: var(--line-strong); font-weight: 500; }
.button.quiet:hover { background: var(--raised); border-color: #56627a; color: var(--text); }
.button.small { font-size: 14px; padding: 9px 14px; border-radius: 8px; }
.button.danger { background: transparent; color: var(--bad); border-color: #6b3a35; font-weight: 500; }
.button.danger:hover { background: #2a1613; }

/* -- the first page */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding: 56px 0 84px; }
.hero h1 { font-size: clamp(38px, 5.4vw, 62px); letter-spacing: -.01em; }
.hero .lead { font-size: 20px; color: var(--soft); margin: 22px 0 30px; max-width: 30em; }
.hero .by { margin: 16px 0 0; }
.kicker { font: 600 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
          margin-bottom: 18px; }

/* The screen as the student sees it: dark, one light, a little picture of the page. */
.screen { position: relative; aspect-ratio: 16 / 10.4; border-radius: 16px; background: #000;
          border: 1px solid #222832; box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 7px #11151b;
          display: flex; align-items: center; justify-content: center; overflow: hidden; }
.screen .light { width: 21%; aspect-ratio: 1; border-radius: 50%; border: 3px solid #2a2a2a;
                 animation: light 18s ease-in-out infinite; }
.screen .sheet { position: absolute; top: 6%; right: 5%; width: 22%; aspect-ratio: 4 / 3; border-radius: 5px;
                 border: 1px solid #333; background: #cfc9bb; overflow: hidden; opacity: .92; }
.screen .sheet::before { content: ""; position: absolute; inset: 9% 12% 9% 9%; background: #f6f3ea;
                         transform: rotate(-2deg); box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
                         background-image: repeating-linear-gradient(#f6f3ea 0 7px, #b8c4d6 7px 8px); }
.screen .sheet::after { content: ""; position: absolute; right: 6%; bottom: -14%; width: 9%; height: 70%;
                        background: #e0b64c; border-radius: 2px; transform: rotate(28deg); }
.screen .says { position: absolute; left: 0; right: 0; bottom: 8%; height: 1.5em; text-align: center;
                font-size: 13.5px; color: #6f7883; }
.screen .says span { position: absolute; left: 0; right: 0; opacity: 0; animation: 18s ease-in-out infinite; }
.screen .says .s1 { animation-name: say1; } .screen .says .s2 { animation-name: say2; }
.screen .says .s3 { animation-name: say3; } .screen .says .s4 { animation-name: say4; }
@keyframes light {
  0%, 16%   { background: transparent; border-color: #2a2a2a; box-shadow: none; }
  21%, 42%  { background: var(--green); border-color: var(--green); box-shadow: 0 0 70px rgba(47, 191, 107, .85); }
  47%       { background: transparent; border-color: #b98a2f; box-shadow: none; }
  52%       { background: #5a4417; border-color: #b98a2f; box-shadow: none; }
  57%       { background: transparent; border-color: #b98a2f; box-shadow: none; }
  62%       { background: #5a4417; border-color: #b98a2f; box-shadow: none; }
  68%, 94%  { background: #1d3f6e; border-color: var(--blue); box-shadow: 0 0 50px rgba(63, 127, 208, .35); }
  100%      { background: transparent; border-color: #2a2a2a; box-shadow: none; }
}
@keyframes say1 { 0%, 15% { opacity: 1; } 19%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes say2 { 0%, 19% { opacity: 0; } 22%, 41% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes say3 { 0%, 45% { opacity: 0; } 48%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes say4 { 0%, 66% { opacity: 0; } 69%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .screen .light { animation: none; background: var(--green); border-color: var(--green);
                   box-shadow: 0 0 70px rgba(47, 191, 107, .85); }
  .screen .says span { animation: none; }
  .screen .says .s2 { opacity: 1; }
}

.band { border-top: 1px solid var(--line); padding: 76px 0; }
.band h2 { font-size: clamp(28px, 3.4vw, 38px); margin-bottom: 12px; }
.band .about { color: var(--soft); max-width: 40em; margin-bottom: 40px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; }
.steps > div { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 24px 22px 12px;
               counter-increment: step; }
.steps > div::before { content: counter(step); display: block; font: 500 15px/30px var(--serif); width: 32px;
                       height: 32px; text-align: center; border-radius: 50%; border: 1px solid var(--line-strong);
                       color: var(--soft); margin-bottom: 18px; }
.steps h3, .rules h3 { font: 600 17px/1.3 var(--sans); margin-bottom: 8px; }
.steps p, .rules p { color: var(--soft); font-size: 15.5px; }
.rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 56px; }
.rules > div { border-top: 1px solid var(--line); padding: 22px 0 8px; }
.needs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.needs li { border: 1px solid var(--line-strong); border-radius: 99px; padding: 7px 16px; font-size: 15px;
            color: var(--soft); }
.testing { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 40px 44px;
           display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; }
.testing h2 { font-size: 30px; }
.testing p { color: var(--soft); margin: 12px 0 0; max-width: 42em; }
.foot { border-top: 1px solid var(--line); padding: 28px 0 44px; color: var(--dim); font-size: 14px;
        display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* -- signing in, the agreement, and a plain message: one card in the middle */
.middle { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
          padding: 40px 20px;
          background: radial-gradient(60% 50% at 50% 0%, rgba(47, 191, 107, .07), transparent 70%) no-repeat; }
.card { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px;
        padding: 38px 38px 30px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.card .lamp { width: 46px; height: 46px; border-radius: 50%; background: var(--green); margin: 0 auto 22px;
              box-shadow: 0 0 34px rgba(47, 191, 107, .7); }
.card h1 { font-size: 30px; text-align: center; }
.card .under { text-align: center; color: var(--dim); font-size: 15px; margin: 8px 0 26px; }
label { display: block; font-size: 14px; color: var(--soft); margin: 0 0 6px; }
input[type=text], input[type=password], input[type=email] {
  width: 100%; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; }
input::placeholder { color: #5d6673; }
.card .button { width: 100%; text-align: center; margin-top: 4px; }
.trouble { border: 1px solid #6b5426; background: #241c0d; color: var(--warn); border-radius: 10px;
           padding: 11px 14px; font-size: 15px; margin: 0 0 20px; }
.done { border: 1px solid #2c5a41; background: #0f2219; color: #8fe0b0; border-radius: 10px;
        padding: 11px 14px; font-size: 15px; margin: 0 0 20px; }
.trouble:empty, .done:empty { display: none; }
.notice { border: 1px solid var(--line-strong); background: var(--raised); color: var(--soft); border-radius: 10px;
          padding: 11px 14px; font-size: 15px; margin: 0 0 20px; }
.notice b { color: var(--text); }
.card.wide { max-width: 520px; }
.card.wide p { color: var(--soft); font-size: 16px; }
.card .lamp.amber { background: var(--amber); box-shadow: 0 0 34px rgba(208, 162, 63, .6); }
.card .address { font: 600 19px/1.4 var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--line-strong);
                 border-radius: 10px; padding: 12px 16px; text-align: center; word-break: break-all; user-select: all; }
.below { text-align: center; color: var(--dim); font-size: 14px; margin: 22px 0 0; }

/* The agreement: a window over the page, which is dimmed until the terms are agreed to. */
.over { position: fixed; inset: 0; background: rgba(4, 6, 9, .82); backdrop-filter: blur(3px);
        display: flex; align-items: center; justify-content: center; padding: 20px; }
.window { width: 100%; max-width: 720px; max-height: calc(100vh - 40px); display: flex; flex-direction: column;
          background: var(--panel); border: 1px solid var(--line-strong); border-radius: 18px;
          box-shadow: 0 40px 120px rgba(0, 0, 0, .7); overflow: hidden; }
.terms { overflow-y: auto; padding: 34px 40px 10px; }
.terms h2, .terms h3 { font-size: 30px; margin: 0 0 18px; }
.terms h4 { font: 600 17px/1.3 var(--sans); margin: 26px 0 8px; }
.terms p, .terms li { color: var(--soft); font-size: 16px; }
.terms p b, .terms li b { color: var(--text); }
.terms ul { margin: 0 0 14px; padding-left: 22px; }
.terms li { margin-bottom: 6px; }
.terms > p:first-of-type { border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 16px;
                           background: var(--raised); }
.agree { border-top: 1px solid var(--line); padding: 22px 40px 26px; background: var(--raised); }
.agree .tick { display: flex; gap: 12px; align-items: flex-start; color: var(--text); font-size: 16px;
               margin: 0 0 18px; cursor: pointer; }
.agree .tick input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--accent); flex: none; }
.agree .row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.agree .row a { color: var(--dim); font-size: 15px; }
.behind { filter: blur(2px); opacity: .5; pointer-events: none; user-select: none; }

/* -- the administrator's pages */
.admin { max-width: 1080px; margin: 0 auto; padding: 0 24px 80px; font-size: 16px; }
.admin h1 { font-size: 34px; margin: 18px 0 22px; }
.admin h2 { font: 600 18px/1.3 var(--sans); margin: 0 0 14px; }
.admin section { background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
                 padding: 22px 24px; margin-top: 18px; overflow-x: auto; }
.admin table { width: 100%; border-collapse: collapse; font-size: 15px; }
.admin th { text-align: left; font-weight: 500; color: var(--dim); font-size: 13.5px; padding: 0 14px 10px 0;
            border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin tr:last-child td { border-bottom: 0; }
.admin td a { text-decoration: none; }
.admin ul { margin: 0; padding-left: 20px; color: var(--soft); font-size: 15px; }
.admin .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 16px; }
.admin .fields input { margin-bottom: 14px; }
.admin form.line { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin: 0 0 18px; }
.admin form.line > div { flex: 1 1 220px; }
.admin form.line input { margin-bottom: 0; }
.admin dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 22px; margin: 0; font-size: 15px; }
.admin dt { color: var(--dim); }
.admin dd { margin: 0; }
.admin pre { white-space: pre-wrap; word-break: break-word; font: 13.5px/1.55 ui-monospace, Menlo, Consolas, monospace;
             color: var(--soft); margin: 0; }
.admin details summary { cursor: pointer; color: var(--soft); }
.admin details[open] summary { margin-bottom: 14px; }
.admin .note h2 { font: 500 26px/1.2 var(--serif); margin-bottom: 14px; }
.admin .note h3, .admin .note h4 { font: 600 16px/1.3 var(--sans); margin: 18px 0 6px; }
.admin .note p, .admin .note li { color: var(--soft); }
.admin .note b { color: var(--text); }
.admin .note ul { margin: 0 0 14px; }
.tag { display: inline-block; border: 1px solid var(--line-strong); border-radius: 99px; padding: 1px 10px;
       font-size: 12.5px; color: var(--soft); margin-left: 8px; }
.missing { color: var(--warn); }
.crumbs { font-size: 14px; color: var(--dim); margin-top: 6px; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 44px; padding: 28px 0 60px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .rules { grid-template-columns: 1fr; }
  .testing { grid-template-columns: 1fr; padding: 32px 28px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .steps { grid-template-columns: 1fr; }
  .band { padding: 56px 0; }
  .card { padding: 30px 24px 24px; }
  .terms { padding: 26px 22px 6px; }
  .agree { padding: 18px 22px 22px; }
}