/* MOCI page layer — "the writing desk". Loaded only by /projects/moyiceye; every rule is scoped to .mk-moci.
   Warmth comes from the neutrals (paper, ink, a red pen), depth from paper-like surfaces and soft warm shadows
   instead of outlines, a serif voice, and calm motion on one curve. */

/* ---- tokens: warmer paper, softer ink ---- */
html[data-theme="light"] .mk-moci{--bg:#f6f0e4;--bg2:#efe7d7;--bg3:#e6dcc8;--fg:#1b3349;--fg2:#4e5a62;--fg3:#857f73;--line:#e1d6c2;
  --sigtx:#c4513c;--paper:#fdfaf3;--wm-shadow:60,42,22;--wm-ease:cubic-bezier(.16,1,.3,1)}
html[data-theme="dark"] .mk-moci{--bg:#101b24;--bg2:#15222c;--bg3:#1c2c38;--fg:#f2eadb;--fg2:#bdbfba;--fg3:#8d918d;--line:#22313c;
  --sigtx:#ef8f74;--paper:#efe7d7;--wm-shadow:0,0,0;--wm-ease:cubic-bezier(.16,1,.3,1)}
/* a low desk lamp: one warm pool of light behind the hero in dark mode */
html[data-theme="dark"] .mk-moci .mo-hero,html[data-theme="dark"] .mk-moci .mo-m:first-child{background:radial-gradient(70% 90% at 72% 30%,rgba(239,190,132,.075),transparent 70%)}
.mk-moci .mo-sec{border-top-color:color-mix(in srgb,var(--line) 75%,transparent)}

/* ---- typography: a quieter, more literary serif voice ---- */
.mk-moci .mo-h1{font-weight:470;letter-spacing:-.025em;font-optical-sizing:auto}
.mk-moci .mo-h1 em{position:relative;font-weight:420;white-space:nowrap}
.mk-moci .mo-h1.zh em{white-space:normal}
.mk-moci .mo-h2{font-weight:470;letter-spacing:-.02em;font-optical-sizing:auto}
.mk-moci .mo-shot h4,.mk-moci .ledger h4{font-weight:560;letter-spacing:-.01em}
.mk-moci .mo-lede,.mk-moci .mo-p,.mk-moci .mo-shot p{font-variant-numeric:oldstyle-nums proportional-nums;text-wrap:pretty;hanging-punctuation:first}
.mk-moci .mo-p{max-width:60ch}
.mk-moci .mo-lede{margin-top:38px}
.mk-moci .mo-p.zh{max-width:31em}
/* labels: red-pen small capitals instead of spaced-out uppercase */
.mk-moci .mo-shot .n{font:600 15px/1 "Source Serif 4","Noto Serif SC",serif;letter-spacing:.09em;font-variant-caps:all-small-caps;text-transform:lowercase}
.mk-moci .mo-shot .n .zh{text-transform:none;letter-spacing:.2em}
.mk-moci .mo-cap{font:italic 400 13.5px/1.4 "Source Serif 4",serif;letter-spacing:0;color:var(--fg3)}
.mk-moci .mo-stat{font-size:16.5px}

/* ---- surfaces: sheets of paper with soft warm shadows, not outlined boxes ---- */
.mk-moci .mo-shot .scr,.mk-moci .mo-res{box-shadow:0 1px 2px rgba(var(--wm-shadow),.06),0 3px 8px rgba(var(--wm-shadow),.06),0 26px 50px -26px rgba(var(--wm-shadow),.42)}
.mk-moci .ledger>div,.mk-moci .nb{box-shadow:0 1px 2px rgba(var(--wm-shadow),.06),0 4px 12px rgba(var(--wm-shadow),.07),0 30px 60px -30px rgba(var(--wm-shadow),.4)}
.mk-moci .ledger>div:first-child{transform:rotate(-.35deg)}
.mk-moci .ledger>div:last-child{transform:rotate(.3deg)}
html[data-theme="dark"] .mk-moci .mo-shot .scr,html[data-theme="dark"] .mk-moci .mo-res,html[data-theme="dark"] .mk-moci .ledger>div,html[data-theme="dark"] .mk-moci .nb{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 2px 6px rgba(0,0,0,.35),0 30px 60px -28px rgba(0,0,0,.7)}
.mk-moci .keys span{border:0;background:color-mix(in srgb,var(--fg) 5%,transparent)}
.mk-moci .keys kbd{border-color:color-mix(in srgb,var(--fg) 18%,transparent);background:var(--paper);color:var(--paper-fg,#17344b)}
.mk-moci .ipad{box-shadow:0 2px 6px rgba(var(--wm-shadow),.12),0 40px 80px -30px rgba(var(--wm-shadow),.5),0 0 0 1px rgba(0,0,0,.2)}

/* ---- interactions ---- */
/* primary: ink button; hover deepens and lifts its shadow, press presses in */
.mk-moci .btn-p{border-radius:12px;transition:transform .22s var(--wm-ease),box-shadow .25s var(--wm-ease),background-color .2s,filter .2s}
@media (hover:hover){.mk-moci .btn-p:hover{filter:none;box-shadow:0 10px 24px -12px rgba(var(--wm-shadow),.55),0 2px 4px rgba(var(--wm-shadow),.12)}}
html[data-theme="dark"] .mk-moci .btn-p:hover{box-shadow:0 10px 26px -12px rgba(239,190,132,.35)}
.mk-moci .btn-p:active{transform:scale(.98);filter:brightness(.92);box-shadow:none}
/* text links: a faint rule that a red pen stroke draws over on hover */
.mk-moci .btn-t{border-bottom:0;padding-bottom:5px;color:var(--fg);
  background:linear-gradient(var(--sigtx),var(--sigtx)) 0 100%/0 1.6px no-repeat,linear-gradient(color-mix(in srgb,var(--fg) 22%,transparent),color-mix(in srgb,var(--fg) 22%,transparent)) 0 100%/100% 1px no-repeat;
  transition:background-size .45s var(--wm-ease),color .2s}
@media (hover:hover){.mk-moci .btn-t:hover{background-size:100% 1.6px,100% 1px;color:var(--fg)}.mk-moci .btn-t:hover .ic{transform:translateX(3px)}}
.mk-moci .btn-t .ic{transition:transform .3s var(--wm-ease)}
.mk-moci .btn-t:active{opacity:.6}
/* step tabs on phones: soft fills rather than outlines */
.mk-moci .chiprow button{border:0;background:color-mix(in srgb,var(--fg) 6%,transparent)}
.mk-moci .chiprow button[aria-selected="true"]{background:var(--fg);color:var(--bg)}
@media (hover:hover){.mk-moci .chiprow button:not([aria-selected="true"]):hover{background:color-mix(in srgb,var(--fg) 11%,transparent)}}
/* replay button on the iPad and the keyboard example */
.mk-moci .rp{transition:transform .2s var(--wm-ease),background-color .2s}
.mk-moci .rp:active{transform:scale(.95)}
.mk-moci .nb input{transition:border-color .25s}
/* focus: a three-layer ring in red pen — a gap, the ring, a soft glow */
.mk-moci a:focus-visible,.mk-moci button:focus-visible,.mk-moci input:focus-visible{outline:0;border-radius:10px;
  box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--sigtx),0 0 12px 2px color-mix(in srgb,var(--sigtx) 32%,transparent)}
.mk-moci .nb input:focus-visible{box-shadow:none}

/* ---- keyframes ---- */
@keyframes wmInk{from{opacity:0;filter:blur(7px);transform:translateY(6px)}to{opacity:1;filter:none;transform:none}}
@keyframes wmRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes wmPen{from{transform:scaleX(0) rotate(-1.2deg)}to{transform:scaleX(1) rotate(-1.2deg)}}
/* hero: the headline settles like ink, then lede, actions and the device follow */
html.hx-in .mk-moci .mo-hero .mo-lock,html.hx-in .mk-moci .mo-m:first-child .mo-lock{animation:wmRise .8s var(--wm-ease) .05s both}
html.hx-in .mk-moci .mo-h1{animation:wmInk 1.1s var(--wm-ease) .15s both}
html.hx-in .mk-moci .mo-lede{animation:wmRise .9s var(--wm-ease) .45s both}
html.hx-in .mk-moci .mo-acts,html.hx-in .mk-moci .mo-stat{animation:wmRise .9s var(--wm-ease) .58s both}
html.hx-in .mk-moci .mo-hero .ipad{animation:wmRise 1.2s var(--wm-ease) .3s both}
/* "from memory" / 默写: underlined by hand in red pen */
.mk-moci .mo-h1 em::after{content:"";position:absolute;left:-.04em;right:-.06em;bottom:.02em;height:.06em;border-radius:.05em;background:var(--sigtx);opacity:.45;transform-origin:left center;transform:rotate(-1.2deg)}
html.hx-in .mk-moci .mo-h1 em::after{animation:wmPen .7s cubic-bezier(.65,0,.35,1) 1.05s both}
/* sections, set by warm.js only once it can also reveal them: headings ink in, paper is laid down */
html.hx-wm .mk-moci .wm-ink{transition:opacity .9s var(--wm-ease),filter 1.1s var(--wm-ease),transform 1.1s var(--wm-ease)}
html.hx-wm .mk-moci .wm-ink:not(.in){opacity:0;filter:blur(7px);transform:translateY(8px)}
html.hx-wm .mk-moci .wm-sheet{transition:opacity .8s var(--wm-ease),transform 1.1s var(--wm-ease);transition-delay:var(--wd,0s)}
html.hx-wm .mk-moci .wm-sheet:not(.in){opacity:0;transform:translateY(22px) rotate(-1.1deg)}
html.hx-wm .mk-moci .ledger>div.wm-sheet:first-child.in{transform:rotate(-.35deg)}
html.hx-wm .mk-moci .ledger>div.wm-sheet:last-child.in{transform:rotate(.3deg)}
@media (prefers-reduced-motion:reduce){
  html.hx-in .mk-moci *{animation:none!important}
  .mk-moci .btn-t,.mk-moci .btn-p,.mk-moci .rp{transition:background-color .2s,color .2s,box-shadow .2s}
  .mk-moci .btn-p:active,.mk-moci .rp:active{transform:none}
}
@media (max-width:899px){
  .mk-moci .mo-shot .n{font-size:14px}
  .mk-moci .ledger>div:first-child,.mk-moci .ledger>div:last-child,html.hx-wm .mk-moci .ledger>div.wm-sheet.in{transform:none}
}

/* ---- one Chinese face: every Chinese line on this page uses the 墨忆词笺 wordmark's serif (Noto Serif SC) ---- */
.mk-moci main{--zh-song:"Noto Serif SC","Source Serif 4","Songti SC",STSong,serif;--zh-body:"Noto Serif SC","Source Serif 4","Songti SC",STSong,serif}
.mk-moci main .zh,.mk-moci main .zh *,.mk-moci main .pm-q b,.mk-moci main .nb .q{font-family:"Noto Serif SC","Source Serif 4","Songti SC",STSong,serif!important}
/* headings take the wordmark's weight; body text stays regular */
.mk-moci main .mo-h1.zh,.mk-moci main .mo-h1.zh em,.mk-moci main .mo-h2.zh,.mk-moci main h3.zh,.mk-moci main h4.zh,.mk-moci main .nb .q,.mk-moci main .pm-q b,.mk-moci main .mo-rail li b .zh,.mk-moci main .diff small .zh{font-weight:600!important}
.mk-moci main .mo-h1.zh,.mk-moci main .mo-h2.zh{letter-spacing:.02em}