/* 0.18 — underlines & notes scene, and the small-details tiles. Scene driven by immersive.js via --b --u1..3 --n --nb and data-step. */
@font-face{font-family:MarginNote;src:url('assets/note.woff2') format('woff2');font-display:swap}
.ink-story{--v:#c0533d;--o:#ad7f2c;--t:#2d7868;--d:#3b5893;--k:#3a3e39;--note:MarginNote,'Kaiti TC','STKaiti','KaiTi',var(--serif);
  position:relative;height:330vh;margin-top:130px;--b:0;--u1:0;--u2:0;--u3:0;--n:0;--nb:0;
  background:radial-gradient(60% 50% at 78% 18%,#f0dcae55,transparent 70%),linear-gradient(#efece2,#e8e4d7)}
.ink-stage{position:sticky;top:0;height:100vh;height:100dvh;display:grid;grid-template-columns:minmax(300px,.82fr) 1.18fr;align-items:center;gap:clamp(30px,5vw,96px)}
.ink-kicker{font-size:13px;letter-spacing:.3em;color:var(--v);margin-bottom:18px}
.ink-copy h2{margin-bottom:22px}
.ink-intro{color:var(--muted);font-size:17px;max-width:30em;margin-bottom:38px}
.ink-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:s}
.ink-steps li{position:relative;counter-increment:s;padding:14px 0 14px 54px;opacity:.36;transition:opacity .5s}
.ink-steps li:before{content:'0' counter(s);position:absolute;left:0;top:14px;font:13px/1.9 var(--sans);letter-spacing:.12em;color:var(--muted)}
.ink-steps li:after{content:'';position:absolute;left:30px;top:27px;width:14px;height:2px;background:var(--v);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.ink-steps b{display:block;font:450 22px/1.5 var(--serif);letter-spacing:.02em}
.ink-steps span{display:block;font-size:15px;color:var(--muted);margin-top:2px}
.ink-story[data-step="1"] .ink-steps li:nth-child(1),.ink-story[data-step="2"] .ink-steps li:nth-child(2),.ink-story[data-step="3"] .ink-steps li:nth-child(3){opacity:1}
.ink-story[data-step="1"] .ink-steps li:nth-child(1):after,.ink-story[data-step="2"] .ink-steps li:nth-child(2):after,.ink-story[data-step="3"] .ink-steps li:nth-child(3):after{transform:none}

.ink-desk{position:relative;justify-self:start;width:min(520px,76%)}
.ink-page{position:relative;background:#fcf9ef;color:#354337;padding:clamp(28px,4vw,48px) clamp(26px,4vw,52px) clamp(34px,4.6vw,56px);border-radius:3px 6px 6px 3px;
  font:clamp(16px,1.35vw,19px)/2.05 var(--serif);letter-spacing:.06em;box-shadow:0 40px 70px -40px #33402f88,0 2px 6px #0000000d;
  transform:scale(calc(1 - var(--nb)*.05)) translateX(calc(var(--nb)*-7%));opacity:calc(1 - var(--nb)*.5);transform-origin:30% 50%}
.ink-page:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#0000000f,transparent 6%);pointer-events:none}
.ink-page-top{display:flex;justify-content:space-between;gap:16px;font:12px var(--sans);letter-spacing:.18em;color:#8c948a;margin-bottom:22px}
.ink-page p{margin:0 0 1em}.ink-page p:last-child{margin:0}
.mark{position:relative;--c:var(--v);--u:0;--w:transparent;padding-bottom:.12em;
  background:linear-gradient(var(--c),var(--c)) 0 100%/calc(var(--u)*100%) .11em no-repeat,linear-gradient(var(--w),var(--w))}
.m1{--u:var(--u1)}
.m2{--c:var(--t);--u:var(--u2);--w:rgba(45,120,104,calc(var(--n)*.12))}
.m3{--c:var(--d);--u:var(--u3)}
.ink-bar{position:absolute;right:6%;top:calc(clamp(28px,4vw,48px) - 4px);z-index:1;display:flex;align-items:center;gap:7px;padding:7px 8px 7px 10px;border-radius:999px;white-space:nowrap;
  background:#fffdf8;box-shadow:0 14px 30px -14px #3b46387a,0 0 0 1px #3b46380f;font:12px/1 var(--sans);letter-spacing:.04em;text-indent:0;
  opacity:var(--b);transform:translateY(calc((1 - var(--b))*8px));pointer-events:none}
.ink-bar i{width:17px;height:17px;border-radius:50%;background:var(--c)}
.ink-bar .v{--c:var(--v);box-shadow:0 0 0 2px #fffdf8,0 0 0 3.5px var(--v)}.ink-bar .o{--c:var(--o)}.ink-bar .t{--c:var(--t)}.ink-bar .d{--c:var(--d)}.ink-bar .k{--c:var(--k)}
.ink-bar em{font-style:normal;padding:7px 11px;border-radius:999px;border:1px solid #3540361f;color:#354337}
.ink-bar em:first-of-type{margin-left:4px;background:#2c3a31;color:#fbf8ef;border-color:transparent}

.ink-note{position:absolute;left:calc(100% - 36px);top:40%;width:min(232px,48%);padding:16px 18px 18px 20px;border-radius:4px 14px 14px 4px;
  background:repeating-linear-gradient(transparent 0 calc(1.8em - 1px),#2d786814 calc(1.8em - 1px) 1.8em) 0 14px/100% calc(100% - 28px) no-repeat,#fffdf6;
  border-left:3px solid var(--t);box-shadow:0 26px 50px -26px #2f3c3480;color:#34443d;font:19px/1.8 var(--note);
  opacity:calc(var(--n)*(1 - var(--nb)));transform:translateY(calc((1 - var(--n))*18px)) rotate(calc(-2.5deg + var(--n)*1deg))}
.ink-notebook{position:absolute;top:-6%;right:-22%;width:min(400px,86%);padding:22px 22px 14px;border-radius:24px;background:#fbf8f0;color:#2f3b33;
  box-shadow:0 50px 90px -40px #2c3a3199,0 0 0 1px #2c3a310d;opacity:var(--nb);transform:translateY(calc((1 - var(--nb))*60px)) scale(calc(.94 + var(--nb)*.06));transform-origin:50% 100%}
.inb-head{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding-bottom:14px;border-bottom:1px solid #2f3b331a}
.inb-head img{width:40px;height:58px;object-fit:cover;border-radius:2px 4px 4px 2px;box-shadow:0 6px 12px -6px #0006}
.inb-head b{display:block;font:450 18px/1.4 var(--serif);letter-spacing:.06em}
.inb-head small{font-size:12px;color:var(--muted)}
.inb-export{font-size:12px;padding:7px 12px;border-radius:999px;border:1px solid #2f3b3326;white-space:nowrap}
.inb-chapter{display:flex;align-items:center;gap:12px;margin:14px 0 6px;font-size:11px;letter-spacing:.2em;color:var(--muted)}
.inb-chapter:before,.inb-chapter:after{content:'';flex:1;height:1px;background:#2f3b331a}
.ink-notebook blockquote{margin:0;padding:10px 0 10px 14px;border-left:3px solid var(--c);font:15px/1.8 var(--serif);letter-spacing:.04em}
.ink-notebook blockquote+blockquote{border-top:0;margin-top:2px}
.ink-notebook .v{--c:var(--v)}.ink-notebook .t{--c:var(--t)}.ink-notebook .d{--c:var(--d)}
.ink-notebook em{display:block;margin-top:6px;font:17px/1.7 var(--note);font-style:normal;color:#3d4d45}

/* small details */
.new-features{padding-top:140px}
.new-features>h2{margin-bottom:50px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)}
.tile{background:var(--surface);border-radius:28px;padding:20px 20px 28px;display:flex;flex-direction:column}
.tile h3{font:450 23px/1.4 var(--serif);margin:0 6px 8px;letter-spacing:.02em}
.tile>p{margin:0 6px;color:var(--muted);font-size:15px;line-height:1.75}
.mini{position:relative;height:210px;margin-bottom:24px;border-radius:18px;background:#fcf9ef;overflow:hidden;color:#354337}
.mini-vertical>div{writing-mode:vertical-rl;height:100%;padding:22px 24px;font:15px/2.1 var(--serif);letter-spacing:.1em}
.mini-vertical{display:flex;justify-content:center}
.mini-vertical h4{margin:0 0 0 .8em;font:500 18px/2 var(--serif);letter-spacing:.3em}
.mini-vertical p{margin:0}
.mini-dict{display:flex;flex-direction:column;justify-content:center;padding:0 22px}
.dict-line{font:17px/2 var(--serif);letter-spacing:.08em}
.dict-line mark{background:#c9d6c1;color:inherit;border-radius:2px;padding:1px 0}
.dict-pop{position:relative;margin-top:14px;padding:12px 14px 13px;border-radius:14px;background:#fff;box-shadow:0 18px 34px -18px #2d3a3170,0 0 0 1px #2d3a310d}
.dict-pop:before{content:'';position:absolute;top:-6px;left:58px;width:12px;height:12px;background:#fff;transform:rotate(45deg);box-shadow:-1px -1px 0 #2d3a310d}
.dict-word{display:flex;align-items:baseline;gap:10px}
.dict-word b{font:500 18px var(--serif)}.dict-word small{font-size:12px;color:var(--muted)}
.dict-pop p{margin:4px 0 0;font-size:13px;line-height:1.6;color:#4d574f}
.mini-night .sky,.mini-night .night-page{position:absolute;inset:0;padding:30px 28px;
  background:repeating-linear-gradient(transparent 0 15px,#354337 15px 18px,transparent 18px 32px) 28px 48px/calc(100% - 56px) calc(100% - 78px) no-repeat,#fcf9ef}
.mini-night .night-page{background:repeating-linear-gradient(transparent 0 15px,#c9d0c3 15px 18px,transparent 18px 32px) 28px 48px/calc(100% - 56px) calc(100% - 78px) no-repeat,#242725;
  clip-path:polygon(62% 0,100% 0,100% 100%,38% 100%);animation:dusk 7s ease-in-out infinite alternate}
.mini-night .sky:before,.mini-night .night-page:before{content:'';position:absolute;top:16px;width:16px;height:16px;border-radius:50%}
.mini-night .sky:before{left:18px;background:#e5b45f;box-shadow:0 0 0 5px #e5b45f22}
.mini-night .night-page:before{right:18px;background:transparent;box-shadow:inset -5px -3px 0 #e8dfc6}
.mini-night .sky{opacity:.9}
@keyframes dusk{from{clip-path:polygon(78% 0,100% 0,100% 100%,54% 100%)}to{clip-path:polygon(40% 0,100% 0,100% 100%,16% 100%)}}
.mini-curl{background:#e9e5d8}
.curl-page{position:absolute;inset:18px 22px;border-radius:2px 5px 5px 2px;background:repeating-linear-gradient(transparent 0 13px,#3543372b 13px 15px,transparent 15px 27px) 22px 26px/calc(100% - 44px) calc(100% - 52px) no-repeat,#fcf9ef;
  box-shadow:0 18px 30px -20px #0006;--s:58px;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--s)),calc(100% - var(--s)) 100%,0 100%);animation:curl 4.5s ease-in-out infinite alternate}
.curl-page:after{content:'';position:absolute;right:0;bottom:0;width:var(--s);height:var(--s);
  background:linear-gradient(315deg,transparent 50%,#e3dccb 50%,#fffaf0 64%,#d8d0bc 100%);box-shadow:-6px -6px 14px -6px #0004;border-radius:0 0 0 6px}
@property --s{syntax:'<length>';inherits:true;initial-value:58px}
@keyframes curl{from{--s:28px}to{--s:86px}}

:lang(en) .ink-page,:lang(en) .ink-notebook blockquote,:lang(en) .ink-steps b{letter-spacing:.01em}
:lang(en) .ink-page{line-height:1.85}
@media(max-width:1100px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){
  .ink-story{height:300vh;margin-top:90px}
  .ink-stage{grid-template-columns:1fr;align-items:start;gap:0;padding-top:clamp(78px,11vh,96px);padding-bottom:clamp(18px,4vh,40px)}
  .ink-stage{grid-template-rows:auto auto 1fr auto}
  .ink-copy{display:contents}
  .ink-kicker{grid-row:1;margin-bottom:8px;font-size:12px}
  .ink-copy h2{grid-row:2;font-size:clamp(28px,7.4vw,40px);margin-bottom:0}
  .ink-intro{display:none}
  .ink-steps{grid-row:4;position:relative;height:84px;gap:0}
  .ink-steps li{position:absolute;inset:0;padding:6px 0 0 44px;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s}
  .ink-steps li:before{top:6px}.ink-steps li:after{display:none}
  .ink-story[data-step="1"] .ink-steps li:nth-child(1),.ink-story[data-step="2"] .ink-steps li:nth-child(2),.ink-story[data-step="3"] .ink-steps li:nth-child(3){transform:none}
  .ink-steps b{font-size:19px}.ink-steps span{font-size:14px}
  .ink-desk{grid-row:3;align-self:center;justify-self:center;width:100%;margin-top:clamp(28px,5vh,60px)}
  .ink-page{font-size:clamp(14px,2vh,17px);line-height:1.95;padding:24px 22px 30px}
  .ink-page-top{margin-bottom:14px;font-size:11px}
  .ink-bar{top:16px;right:4%;gap:5px;padding:6px 6px 6px 8px;font-size:11px}.ink-bar i{width:15px;height:15px}.ink-bar em{padding:6px 9px}
  .ink-note{left:auto;right:-3%;top:auto;bottom:4%;width:64%;font-size:16px;padding:12px 14px 14px 16px}
  .ink-notebook{top:-3%;right:-2%;left:6%;width:auto;padding:18px 18px 10px}
  .ink-notebook blockquote{font-size:14px}
}
@media(max-width:600px){.tiles{grid-template-columns:1fr}.mini{height:190px}.new-features{padding-top:100px}.new-features>h2{margin-bottom:34px}}
@media(prefers-reduced-motion:reduce){
  .ink-story{height:auto;--u1:1;--u2:1;--u3:1;--n:1;--nb:0;padding-block:70px}
  .ink-stage{position:relative;height:auto;row-gap:50px}
  .ink-steps li{opacity:1}.ink-steps li:after{transform:none}
  .ink-notebook{display:none}
  .mini-night .night-page,.curl-page{animation:none}
}
@media(prefers-reduced-motion:reduce) and (max-width:860px){.ink-steps{height:auto;display:grid;gap:14px}.ink-steps li{position:relative;opacity:1;transform:none}.ink-desk{margin-bottom:24px}}
/* longer English tab labels must not push the page sideways on small phones */
@media(max-width:420px){.feature-tabs button{padding:10px 8px;font-size:13px;white-space:normal;line-height:1.3;min-width:0}}
@media(max-width:360px){.nav-actions{gap:6px}.nav-download{padding-inline:11px!important;font-size:12.5px!important}.brand svg{width:32px}.brand span{font-size:23px}}