/* M (Xenia, 2026-11-10, from Emet's trust read on Adam's word; facts from Felix, M's lead).
   M's own look: M by night, true black and lavender, light type, and one glowing line.
   What M is on the left; on the right, a question arriving on the lock screen, answered with a tap,
   the answer travelling back along the line. Without JS or with reduced motion, the answered state shows. */
#m-drawer{padding:16px 24px 18px}

.m-card{--bg:#050507;--glow:#1d1a2e;--lav:#c8c4f0;--fg:#f1eff8;--soft:#a6a3b6;--hair:#ffffff1c;--note:#1c1b22;--edge:#77757f;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:44px;padding:34px 36px 30px;border-radius:14px;
  color:var(--fg);background:radial-gradient(110% 120% at 85% 8%,var(--glow) 0%,var(--bg) 60%);box-shadow:0 18px 44px #0f171c2e}
.m-card p{margin:0}
.m-copy{display:flex;flex-direction:column;gap:14px;min-width:0}

/* the wordmark: M over its line, as on the app's icon */
.m-brand{display:flex;align-items:flex-end;gap:14px;max-width:520px}
.m-word{position:relative;font:300 34px/1 var(--sans);padding-bottom:9px}
.m-word:after{content:'';position:absolute;left:0;right:-6px;bottom:0;height:1.5px;border-radius:2px;background:linear-gradient(90deg,var(--lav),color-mix(in srgb,var(--lav) 55%,transparent))}
.m-word:before{content:'';position:absolute;left:-1px;bottom:-2px;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px color-mix(in srgb,var(--lav) 80%,transparent)}
.m-name{font-size:14px;letter-spacing:.02em;color:var(--soft);padding-bottom:9px}

.m-head{font:300 clamp(30px,2.8vw,40px)/1.1 var(--sans);letter-spacing:-.02em;margin:10px 0 2px}

/* the headline turns through M's features every 3 seconds (Adam, 2026-11-10). All lines share one grid cell,
   so the card keeps the height of the longest; screen readers get the first line only, from .m-vh. */
.m-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.m-rot{display:grid}
.m-rot>span{grid-area:1/1;align-self:start;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.m-rot>span.is-on{opacity:1;transform:none;pointer-events:auto}
.m-rot-pause{margin-left:auto;align-self:center;width:30px;height:30px;display:inline-grid;place-items:center;padding:0;border-radius:50%;border:1px solid var(--hair);background:transparent;color:var(--soft);cursor:pointer;transition:color .2s,border-color .2s}
.m-rot-pause:hover{color:var(--fg);border-color:#ffffff40}
.m-rot-pause:focus-visible{outline:2px solid var(--lav);outline-offset:3px}
.m-rot-pause svg{width:12px;height:12px}
.m-rot-pause .i-pause{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.m-rot-pause .i-play{fill:currentColor;display:none}
.m-rot-pause[aria-pressed="true"] .i-pause{display:none}
.m-rot-pause[aria-pressed="true"] .i-play{display:inline}
.m-sub{font:300 22px/1.35 var(--sans);letter-spacing:-.01em;color:var(--fg);margin-top:2px!important}
.m-text{font-size:17px;line-height:1.6;opacity:.86;max-width:520px}
.m-status{margin-top:auto;padding-top:18px;border-top:1px solid var(--hair);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.m-status-main{font-size:15px}
.m-status-sub{font-size:13px;color:var(--soft);margin-top:3px!important}
.m-cta{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.m-go{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 24px;border-radius:23px;background:var(--lav);color:#16151c;font-size:15px;font-weight:600;letter-spacing:.01em;text-decoration:none;white-space:nowrap;transition:filter .2s}
.m-go:hover{opacity:1;filter:brightness(1.06)}
.m-go:focus-visible,.m-small:focus-visible{outline:2px solid var(--lav);outline-offset:4px}
.m-small{font-size:13px;color:var(--fg);opacity:.8;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--lav) 60%,transparent);text-underline-offset:.25em;white-space:nowrap}
.m-small:hover{opacity:1}

/* the scene: a lock screen at night */
.m-scene{align-self:center;display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:26px 22px 16px;border-radius:24px;background:#000;border:1px solid #ffffff1f;box-shadow:0 14px 34px #00000080,inset 0 1px 0 #ffffff14;min-width:0}
.m-time{font:200 64px/1 var(--sans);letter-spacing:-.01em;text-align:center;color:#f4f3f8;font-variant-numeric:tabular-nums}
.m-note{padding:14px 15px 15px;border-radius:20px;background:var(--note);border:1px solid #ffffff12}
.m-note-top{display:flex;align-items:baseline;gap:10px;font-size:13px}
.m-mini{font:300 18px/1 var(--sans);color:var(--lav);border-bottom:1.5px solid var(--lav);padding-bottom:2px}
.m-agent{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;letter-spacing:.06em;color:var(--lav)}
.m-kind{margin-left:auto;color:var(--soft)}
.m-q{font-size:19px;line-height:1.3;margin:8px 0 12px!important;color:var(--fg)}
.m-answers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.m-answers li{display:flex;align-items:center;justify-content:center;min-height:38px;padding:0 10px;border-radius:19px;border:1px solid var(--edge);color:var(--lav);font-size:14.5px;text-align:center}
.m-answers li.is-picked{background:var(--lav);border-color:var(--lav);color:#16151c}
.m-sent{display:flex;flex-direction:column;align-items:stretch;gap:9px;font-size:14px;color:#a9c0ab;padding:0 4px}
.m-line{position:relative;display:block;height:1.5px;border-radius:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--lav) 40%,transparent),var(--lav))}
.m-line:after{content:'';position:absolute;right:-2px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#fff;box-shadow:0 0 7px 2px color-mix(in srgb,var(--lav) 80%,transparent)}
.m-sent-text{display:block}
/* three scenes in one cell: the tallest sets the height, one shows at a time */
.m-slides{display:grid}
.m-slide{grid-area:1/1;display:flex;flex-direction:column;gap:16px;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.m-slide.is-on{opacity:1;visibility:visible;transition:opacity .6s ease}
.m-slide-cap{gap:0}
/* the horizon: the next thing, then the day as one line */
.m-hz-now{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:8px 0 10px!important}
.m-hz-what{font-size:22px;font-weight:300;color:var(--fg)}
.m-hz-when{font-size:14px;color:var(--fg)}
.m-hz{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.m-hz:before{content:'';position:absolute;left:0;right:0;top:27px;height:1px;background:#ffffff40}
.m-hz:after{content:'';position:absolute;left:-1px;top:25px;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px color-mix(in srgb,var(--lav) 70%,transparent)}
.m-hz li{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12.5px;color:var(--soft);position:relative}
.m-hz b{font-weight:400;font-variant-numeric:tabular-nums}
.m-hz i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--soft);background:var(--note);position:relative;z-index:1}
.m-hz li.is-next{color:var(--fg)}
.m-hz li.is-next i{background:var(--lav);border-color:var(--lav)}
.m-answers-3{grid-template-columns:repeat(3,1fr)}
/* the morning paper */
.m-paper-line{margin:12px 0 14px}
.m-paper-line:after{right:auto;left:-2px}
.m-paper{display:flex;align-items:center;justify-content:space-between;gap:14px}
.m-paper-head{font-size:22px;font-weight:300;line-height:1.2;color:var(--fg)}
.m-read{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 22px;border-radius:20px;background:var(--lav);color:#16151c;font-size:15px}
.m-scene-note{font-size:12px;color:var(--soft);opacity:.85;text-align:center}

/* the play: runs once each time the drawer opens (js/page.js adds .play) */
.m-scene.play .is-on .m-note{animation:m-arrive .55s cubic-bezier(.2,.7,.2,1) .25s both}
.m-scene.play .is-on .m-answers li.is-picked{animation:m-tap 2.1s ease-out both}
.m-scene.play .is-on .m-line{transform-origin:left;animation:m-draw .9s cubic-bezier(.4,0,.2,1) 2.15s both}
.m-scene.play .is-on .m-sent-text{animation:m-fade .4s ease-out 2.9s both}
.m-scene.play .is-on .m-paper-line{animation-delay:.7s}
.m-scene.play .is-on.m-slide-cap .m-sent-text,.m-scene.play .is-on .m-slide-cap .m-sent-text{animation-delay:1.1s}
@keyframes m-arrive{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes m-tap{0%,72%{background:transparent;border-color:var(--edge);color:var(--lav);transform:none}80%{transform:scale(.95)}88%,100%{background:var(--lav);border-color:var(--lav);color:#16151c;transform:none}}
@keyframes m-draw{from{transform:scaleX(0)}to{transform:none}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.m-scene.play *{animation:none!important}.m-rot>span,.m-slide{transition:none}}

@media(max-width:1100px){
 .m-card{gap:28px;padding:28px 26px 24px}
 .m-text{font-size:16px}
}
@media(max-width:800px){
 .m-card{grid-template-columns:minmax(0,1fr)}
 .m-copy{display:contents}
 .m-scene{order:2}
 .m-status{order:3}
}
@media(max-width:600px){
 #m-drawer{padding:10px}
 .m-card{padding:22px 18px;gap:18px;border-radius:12px}
 .m-head{font-size:28px}
 .m-sub{font-size:19px}
 .m-scene{padding:20px 14px 12px;border-radius:20px}
 .m-time{font-size:52px}
 .m-q{font-size:17px}
 .m-status{flex-direction:column;align-items:stretch}
 .m-cta{align-items:stretch;text-align:center}
 .m-go{justify-content:center}
}