/* MN5 "what's new" explainer (homepage; content in website/_tools/explainer/): one stage that plays the change instead of describing it.
   The screen is drawn at a fixed 880×640 and scaled to fit, so every width shows the same picture. */
.xp{background:#eef3f8;padding:96px 0 84px;overflow:hidden}
.xp *{box-sizing:border-box}
.xp-head{text-align:center;max-width:760px;margin:0 auto 40px;padding:0 20px}
.xp-head .eyebrow{display:inline-flex;align-items:center;gap:10px}
.xp-head h2{font-size:clamp(28px,4.2vw,50px);line-height:1.18;letter-spacing:-.03em;margin:14px 0 16px;text-wrap:balance}
.xp-head p{font-size:18px;color:#56616d;margin:0}
.xp-tag{display:inline-block;padding:0 6px;border:1px solid #b9cbe0;border-radius:4px;font-size:10px;line-height:17px;letter-spacing:.06em;color:#315f9c;background:#fff;font-style:normal}

/* Device + scaled canvas */
.xp-stage{width:min(906px,calc(100% - 28px));margin:0 auto}
.xp-device{--s:1;position:relative;border-radius:calc(34px * var(--s) + 6px);background:#1c2026;padding:calc(13px * var(--s) + 3px);box-shadow:0 30px 70px #1d2e4426,0 4px 12px #1d2e4414}
.xp-fit{position:relative;width:100%;aspect-ratio:880/640;border-radius:calc(22px * var(--s) + 2px);overflow:hidden;background:#f3f6f2}
.xp-canvas{position:absolute;left:0;top:0;width:880px;height:640px;transform:scale(var(--s));transform-origin:0 0;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;color:#202832;display:grid;grid-template-columns:385px 495px}

/* Top capsule */
.xp-top{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:4px;padding:5px 8px;border-radius:22px;background:rgba(246,247,249,.9);border:1px solid #fff;box-shadow:0 2px 10px #0000000f;font-size:11.5px;white-space:nowrap}
.xp-top>span{padding:3px 10px;border-radius:14px;line-height:1.25}
.xp-top small{display:block;font-size:9px;color:#8a929c}
.xp-top .xp-tpl{position:relative;background:#fff;transition:background .3s,box-shadow .3s}
.xp-top .xp-tpl b{font-weight:600}
.xp-top .xp-tpl.is-pressed{background:#dfe8f4;box-shadow:0 0 0 3px #315f9c33}
.xp-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:160px;background:#fff;border-radius:12px;box-shadow:0 12px 28px #1f304529;padding:6px;opacity:0;transform:translateY(-4px);transition:.25s;pointer-events:none}
.xp-menu.is-open{opacity:1;transform:none}
.xp-menu i{display:block;font-style:normal;padding:7px 10px;border-radius:7px;font-size:12px}
.xp-menu i.is-on{background:#edf3fa;color:#315f9c;font-weight:600}
.xp-menu i:last-child{border-top:1px solid #eef0f3;margin-top:4px;padding-top:9px;color:#56616d}

/* Document */
.xp-doc{background:#fff;border-right:1px solid #e3e7ea;padding:70px 32px 90px}
.xp-doc h4{margin:0 0 16px;font-size:16px;color:#2b6cb0;font-family:"Songti SC","STSong",serif}
.xp-doc p{margin:0 0 14px;font-size:15px;line-height:2;color:#2c333b;font-family:"Songti SC","STSong",serif}
.xp-hl{background:linear-gradient(#fbe3a0,#fbe3a0) no-repeat 0 100%/0% 100%;transition:background-size .9s ease,filter .5s;border-radius:2px}
.xp-hl.is-on{background-size:100% 100%}
.xp-hl.is-covered{filter:blur(5px)}
.xp-hl.is-covered.is-revealed{filter:none}

/* Map */
.xp-map{position:relative;background:radial-gradient(#cfd8cf 1px,transparent 1.2px) 0 0/16px 16px,#f1f5f0}
.xp-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .6s}
.xp-links path{fill:none;stroke:#9fb399;stroke-width:1.6}
.xp-card{position:absolute;width:150px;background:#fff;border-radius:9px;box-shadow:0 1px 3px #0000001f;font-size:12px;overflow:hidden;transition:left .8s cubic-bezier(.3,.8,.3,1),top .8s cubic-bezier(.3,.8,.3,1),opacity .5s,transform .7s cubic-bezier(.3,.8,.3,1)}
.xp-card b{display:block;padding:8px 11px;background:#e1efd5;font-weight:600;color:#2c3a24}
.xp-card .xp-body{transition:filter .5s,opacity .5s}
.xp-card .xp-body span{display:block;padding:8px 11px;color:#56616d;line-height:1.55}
.xp-card .xp-body img{display:block;width:100%;height:76px;object-fit:cover}
.xp-card.root{width:120px}.xp-card.root b{background:#f8d5dc;color:#4a2a30}
.xp-card.new{opacity:0;transform:translateX(-90px) scale(.85)}
.xp-card.new.is-in{opacity:1;transform:none}
.xp-card.is-covered .xp-body{filter:blur(6px);opacity:.5}
.xp-card.is-covered.is-revealed .xp-body{filter:none;opacity:1}
.xp-ink{position:absolute;width:150px;pointer-events:none;clip-path:inset(0 100% 0 0);transition:clip-path 1.7s ease,left .8s cubic-bezier(.3,.8,.3,1),top .8s cubic-bezier(.3,.8,.3,1)}
.xp-ink.is-on{clip-path:inset(0 0 0 0)}
.xp-tap{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#315f9c2e;border:2px solid #315f9caa;opacity:0;pointer-events:none;z-index:9}
.xp-tap.is-on{animation:xp-tap .75s ease}
@keyframes xp-tap{0%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}

/* Practice template content */
.xp-practice{position:absolute;inset:0;display:grid;grid-template-columns:385px 495px;background:#f6f7f9;opacity:0;pointer-events:none;transition:opacity .5s;z-index:3}
.xp-practice.is-on{opacity:1}
.xp-q{background:#fff;padding:72px 32px;border-right:1px solid #e3e7ea}
.xp-q h5{margin:0 0 6px;font-size:12px;color:#8a929c;font-weight:500}
.xp-q h6{margin:0 0 18px;font-size:22px;font-weight:500}
.xp-q p{font-size:15px;line-height:2;margin:0;padding:12px 16px;border:1px solid #d7dde4;border-radius:8px;transition:background .6s,border-color .6s}
.xp-q p.is-picked{background:#fdf3d2;border-color:#9cc3a3}
.xp-sheet{padding:80px 34px}
.xp-card-sheet{background:#fff;border-radius:12px;box-shadow:0 2px 10px #0000001a;padding:18px 20px}
.xp-card-sheet h5{margin:0 0 4px;font-size:12px;color:#8a929c;font-weight:500}
.xp-card-sheet p{margin:0 0 12px;font-size:13px}
.xp-card-sheet img{display:block;width:100%;clip-path:inset(0 100% 0 0);transition:clip-path 2s ease}
.xp-practice.is-writing .xp-card-sheet img{clip-path:inset(0 0 0 0)}

/* Editor drawer */
.xp-editor{position:absolute;top:0;right:0;bottom:0;width:400px;background:#f7f8fa;border-left:1px solid #dfe3e8;z-index:6;transform:translateX(102%);transition:transform .6s cubic-bezier(.3,.8,.3,1);padding:66px 22px 20px;font-size:13px}
.xp-editor.is-open{transform:none}
.xp-editor h5{margin:0 0 4px;font-size:16px}
.xp-editor p{margin:0 0 16px;color:#8a929c;font-size:12px}
.xp-editor h6{margin:0 0 8px;font-size:11px;color:#8a929c;font-weight:500}
.xp-row{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:10px;padding:10px 12px;margin-bottom:8px;transition:box-shadow .3s}
.xp-row.is-focus{box-shadow:0 0 0 2px #315f9c55}
.xp-seg{display:flex;background:#eef0f3;border-radius:8px;padding:2px}
.xp-seg i{font-style:normal;font-size:11.5px;padding:3px 10px;border-radius:6px;color:#56616d;transition:.3s}
.xp-seg i.is-on{background:#fff;color:#202832;font-weight:600;box-shadow:0 1px 2px #0000001a}

/* Bottom bar: modes + tools — the protagonist */
.xp-bar{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:6px;padding:6px;border-radius:30px;background:rgba(230,232,235,.94);border:1px solid #ffffffcc;box-shadow:0 8px 26px #1d2e4426;white-space:nowrap;transition:transform .7s cubic-bezier(.3,.8,.3,1),opacity .5s}
.xp-modes{position:relative;display:flex;background:#d9dce0;border-radius:24px;padding:3px}
.xp-modes button{all:unset;position:relative;z-index:1;font-size:14px;padding:6px 14px;border-radius:20px;color:#5b6571;cursor:pointer;transition:color .3s}
.xp-modes button.is-on{color:#111;font-weight:600}
.xp-pill{position:absolute;top:3px;bottom:3px;left:3px;width:0;border-radius:20px;background:#fff;box-shadow:0 1px 3px #0000001f;transition:left .45s cubic-bezier(.3,.8,.3,1),width .45s cubic-bezier(.3,.8,.3,1)}
.xp-tools{display:flex;align-items:center;gap:2px;padding:0 6px 0 8px;border-left:1px solid #c6cbd1;transition:opacity .22s,transform .22s}
.xp-tools.is-swapping{opacity:0;transform:translateY(8px)}
.xp-tool{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#2a3038}
.xp-tool.is-active{background:#c9ced5}
.xp-tool svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.xp-tool.is-new{animation:xp-pop .7s ease;background:#dbe6f4;color:#315f9c}
.xp-chip{font-size:12px;padding:4px 9px;border-radius:12px;background:#fff;color:#315f9c;font-weight:600;margin:0 3px}
@keyframes xp-pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.18);opacity:1}100%{transform:none}}

/* Opening: the traditional interface, then everything folds into one bar */
.xp-classic{position:absolute;inset:0;z-index:8;background-color:#fff;background-position:center top;background-size:cover;background-repeat:no-repeat;transition:opacity .8s ease .2s,transform 1s cubic-bezier(.4,0,.2,1);transform-origin:50% 100%}
.xp-classic.is-folding{opacity:0;transform:scale(.96)}
.xp-classic.is-gone{opacity:0;visibility:hidden;transition:none}
.xp-classic::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 70%,#0000000d)}
.xp-hidden-bar .xp-bar{transform:translate(-50%,130%);opacity:0}

/* Caption, steps, controls */
.xp-caption{min-height:70px;text-align:center;margin:30px auto 0;max-width:680px;padding:0 16px}
.xp-caption strong{display:block;font-size:23px;letter-spacing:-.01em;color:#1f2731;transition:opacity .25s}
.xp-caption span{display:block;font-size:15px;color:#6a7581;margin-top:7px;transition:opacity .25s}
.xp-caption.is-fading strong,.xp-caption.is-fading span{opacity:0}
.xp-steps{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:22px;padding:0 12px}
.xp-steps button{all:unset;cursor:pointer;position:relative;overflow:hidden;font-size:13px;padding:7px 14px;border-radius:18px;background:#fff;color:#56616d;border:1px solid #d6dde6}
.xp-steps button:focus-visible{outline:2px solid #315f9c;outline-offset:2px}
.xp-steps button.is-on{color:#203a5c;border-color:#9fb6d2;font-weight:600}
.xp-steps button i{position:absolute;left:0;bottom:0;height:2px;width:0;background:#315f9c}
.xp-steps button.is-on i{animation:xp-progress var(--dur,3.6s) linear forwards}
.xp.is-paused .xp-steps button.is-on i{animation:none;width:100%;opacity:.35}
.xp-steps .xp-sep{width:1px;background:#cdd5df;margin:5px 3px}
@keyframes xp-progress{to{width:100%}}
.xp-controls{display:flex;justify-content:center;gap:20px;margin-top:14px;font-size:12.5px}
.xp-controls button{all:unset;cursor:pointer;color:#315f9c}
.xp-note{text-align:center;font-size:12px;color:#8a949f;margin:12px auto 0;max-width:640px;padding:0 16px}
.xp-proof{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 26px;margin-top:22px;font-size:14px}
.xp-proof a{color:#315f9c}
.xp-mobile-editor{display:none}

@media(max-width:700px){
  .xp{padding:60px 0 56px}
  .xp-head{margin-bottom:24px}.xp-head p{font-size:15px}
  .xp-bar{transform:translateX(-50%) scale(1.45);transform-origin:50% 100%;bottom:22px}
  .xp-hidden-bar .xp-bar{transform:translate(-50%,130%) scale(1.45)}
  .xp-caption{margin-top:22px;min-height:84px}.xp-caption strong{font-size:19px}.xp-caption span{font-size:14px}
  .xp-steps{gap:6px}.xp-steps button{font-size:12.5px;padding:6px 11px}.xp-steps .xp-sep{display:none}
  /* The editor is the evidence for customization. Keep its labels at reading size
     instead of shrinking them with the desktop canvas. Both views share content/state. */
  .xp[data-step="yours"] .xp-fit{display:none}
  .xp[data-step="yours"] .xp-mobile-editor{display:block;background:#f7f8fa;border-radius:18px;padding:20px 16px;color:#202832}
  .xp-mobile-heading small{display:block;font-size:12px;line-height:1.5;color:#315f9c}
  .xp-mobile-heading h3{font-size:22px;line-height:1.3;margin:8px 0}
  .xp-mobile-heading p{font-size:14px;line-height:1.6;color:#56616d;margin:0 0 20px}
  .xp-mobile-group{font-size:13px;font-weight:600;margin:0 0 10px;color:#56616d}
  .xp-mobile-editor .xp-row{display:block;padding:10px 12px;margin-bottom:10px;border:1px solid #e2e7ec}
  .xp-mobile-editor .xp-row>span:first-child{display:block;font-size:15px;font-weight:600;margin-bottom:8px}
  .xp-mobile-editor .xp-seg{display:grid;grid-template-columns:repeat(3,1fr)}
  .xp-mobile-editor .xp-seg i{text-align:center;font-size:13px;line-height:1.4;padding:6px 4px}
  .xp-mobile-result{border-top:1px solid #dce2e9;padding-top:16px;margin-top:18px}
  .xp-mobile-result>strong{display:block;font-size:13px;margin-bottom:10px;color:#56616d}
  .xp-mobile-result .xp-tools{justify-content:center;flex-wrap:wrap;gap:2px;border:0;padding:6px 2px;border-radius:22px;background:#e6e8eb}
  .xp-mobile-result .xp-tool{width:30px;height:32px;flex-shrink:0}
}
@media(prefers-reduced-motion:reduce){.xp *{transition:none!important;animation:none!important}}

/* Two close-ups under the stage: real captures, one line each */
.xp-more{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:min(1000px,calc(100% - 40px));margin:72px auto 0}
.xp-feature{display:flex;flex-direction:column;background:#fff;border:1px solid #dde5ee;border-radius:18px;padding:24px 26px 0;overflow:hidden;scroll-margin-top:100px}
.xp-feature-name{display:flex;align-items:center;gap:9px;margin:0;font-size:13px;color:#315f9c;font-weight:600}
.xp-feature h3{font-size:21px;letter-spacing:-.01em;margin:10px 0 6px}
.xp-feature>div>p:last-child{font-size:14px;color:#5b6571;margin:0;line-height:1.7}
.xp-feature>div{margin-bottom:20px}
.xp-feature figure{margin:auto -26px 0;height:200px;background:#f4f6f8;border-top:1px solid #e6ebf0;display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 18px}
.xp-feature figure img{display:block;max-width:100%;max-height:100%;border-radius:8px}
.xp-feature .xp-fullcard img{box-shadow:0 1px 4px #0000001a}
.xp-recall figure{gap:10px}
.xp-recall figure span{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;min-width:0;flex:1}
.xp-recall figure img{height:calc(100% - 22px);width:100%;object-fit:cover;object-position:50% 40%;border:1px solid #e1e6ec}
.xp-recall figure small{font-size:11.5px;color:#6a7581}
.xp-recall figure b{color:#9aa6b2;font-weight:400}
@media(max-width:700px){.xp-more{grid-template-columns:1fr;margin-top:48px;gap:16px}.xp-feature figure{height:180px}}
html[lang=en] .xp-doc h4,html[lang=en] .xp-doc p{font-family:"Times New Roman",Georgia,serif}html[lang=en] .xp-doc p{font-size:16px;line-height:1.8}

/* Homepage teaser cards link to the handwriting / recall pages */
a.xp-feature{color:inherit;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
a.xp-feature:hover{border-color:#d4d4d0;box-shadow:0 4px 20px rgba(0,0,0,.06);transform:translateY(-2px)}
.xp-more-link{display:inline-block;margin-top:12px;font-size:14px;font-weight:600;color:#2563eb}