/* memento Team's answer pages: the grader's ink and amber, set for reading. */
@font-face{font-family:Fraunces;src:url(../fonts/fraunces-latin-full-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Plex;src:url(../fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-display:swap}
:root{--ink:#0e1116;--ink-2:#151a22;--line:#262c36;--text:#ece6d9;--dim:#a9a397;--amber:#ffb23f;--amber-ink:#2a1a00;--red:#ff6a55;--s0:#ffb23f;--s1:#6fd3e8;--green:#9be37a}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--text);font:16px/1.65 Plex,ui-monospace,monospace}
main{max-width:760px;margin:0 auto;padding:clamp(20px,5vw,64px)}
a{color:var(--amber)}
a:focus-visible,.buy:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.mark{font-family:Fraunces,serif;font-size:22px;color:var(--text);text-decoration:none;display:inline-block;padding:8px 0;min-height:44px}
.crumb{color:var(--dim);font-size:14px}
.crumb a{color:var(--dim);display:inline-block;padding:10px 2px}
h1{font-family:Fraunces,serif;font-weight:500;font-size:clamp(32px,5.6vw,54px);line-height:1.08;margin:28px 0 14px}
h2{font-family:Fraunces,serif;font-weight:500;font-size:clamp(24px,3.6vw,32px);line-height:1.2;margin:52px 0 12px}
h3{font-size:17px;margin:0 0 6px;color:var(--text)}
.byline{color:var(--dim);font-size:14px;margin:0 0 26px}
p.answer{font-size:18px;line-height:1.6;border-left:3px solid var(--amber);padding:2px 0 2px 18px;margin:0 0 8px}
code{font:14px/1.5 Plex,monospace;background:var(--ink-2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;overflow-wrap:anywhere}
pre{background:var(--ink-2);border:1px solid var(--line);border-radius:10px;padding:14px 16px;overflow-x:auto;font:14px/1.55 Plex,monospace;margin:14px 0}
pre code{background:none;border:0;padding:0;overflow-wrap:normal}
.lane{position:relative;height:70px;margin:30px 0 4px;overflow:hidden;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line)}
.lane .file{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:6px 12px;border:1px solid var(--line);border-radius:6px;background:var(--ink-2);font-size:14px;white-space:nowrap;z-index:1;animation:hit 7s ease-in-out infinite}
.lane .ses{position:absolute;top:50%;padding:5px 11px;border-radius:999px;color:var(--ink);font-size:13px;font-weight:600;white-space:nowrap}
.lane .sa{right:50%;background:var(--s0);animation:inA 7s ease-in-out infinite}
.lane .sb{left:50%;background:var(--s1);animation:inB 7s ease-in-out infinite}
@keyframes inA{0%,6%{transform:translate(-48vw,-50%)}40%,72%{transform:translate(-84px,-50%)}94%,100%{transform:translate(-48vw,-50%)}}
@keyframes inB{0%,14%{transform:translate(48vw,-50%)}42%,72%{transform:translate(84px,-50%)}94%,100%{transform:translate(48vw,-50%)}}
@keyframes hit{0%,38%{border-color:var(--line);color:var(--text)}44%,72%{border-color:var(--red);color:var(--red)}80%,100%{border-color:var(--line);color:var(--text)}}
.lane-note{color:var(--dim);font-size:13px;margin:0 0 30px}
ol.fixes{list-style:none;margin:0;padding:0;counter-reset:fix}
ol.fixes>li{counter-increment:fix;border-top:1px solid var(--line);padding:22px 0 8px;position:relative}
ol.fixes>li>h3::before{content:counter(fix) ". ";color:var(--amber);font-family:Fraunces,serif}
.fails{border:1px solid rgba(255,106,85,.4);border-radius:10px;padding:10px 14px;margin:12px 0 6px;font-size:15px}
.fails b{color:var(--red);font-weight:600}
.table{overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px}
th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
th{color:var(--dim);font-weight:400;font-size:13px;letter-spacing:.04em}
tr:last-child td{border-bottom:0}
td .yes{color:var(--green)}td .no{color:var(--red)}
.team{margin-top:52px;padding:22px clamp(16px,3vw,24px);background:var(--ink-2);border:1px solid var(--line);border-radius:14px}
.team p{margin:0 0 14px}
.buy{font:inherit;font-weight:600;min-height:44px;padding:10px 18px;border-radius:8px;background:var(--amber);color:var(--amber-ink);text-decoration:none;display:inline-flex;align-items:center}
.row{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.row a:not(.buy){display:inline-flex;align-items:center;min-height:44px}
.more{margin-top:44px;color:var(--dim);font-size:14px}
.more ul{padding-left:18px}
.more li{margin:4px 0}
.more a{display:inline-block;padding:6px 0}
ul.list{list-style:none;padding:0;margin:30px 0 0}
ul.list li{border-top:1px solid var(--line);padding:18px 0}
ul.list a{font-family:Fraunces,serif;font-size:clamp(21px,3vw,26px);line-height:1.25;text-decoration:none;display:block}
ul.list p{margin:8px 0 0;color:var(--dim);font-size:15px}
@media (prefers-reduced-motion:reduce){.lane .file,.lane .ses{animation:none}.lane .sa{transform:translate(-84px,-50%)}.lane .sb{transform:translate(84px,-50%)}.lane .file{border-color:var(--red);color:var(--red)}}
@media (max-width:560px){.lane .file{font-size:12px;padding:5px 8px}.lane .ses{font-size:11px;padding:4px 8px}@keyframes inA{0%,6%{transform:translate(-60vw,-50%)}40%,72%{transform:translate(-64px,-50%)}94%,100%{transform:translate(-60vw,-50%)}}@keyframes inB{0%,14%{transform:translate(60vw,-50%)}42%,72%{transform:translate(64px,-50%)}94%,100%{transform:translate(60vw,-50%)}}p.answer{font-size:17px}}