/* Foldinto first entry / v5 (was Afterclip v4.2) — scoped approved prototype styles. */

#ac-onboarding .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#ac-onboarding .eyebrow{font-family:var(--latin);font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin:0 0 22px;display:flex;gap:14px}
#ac-onboarding .eyebrow b{font-weight:400;color:var(--ink)}
#ac-onboarding .chrome{position:fixed;top:0;right:0;left:0;height:72px;display:flex;align-items:center;justify-content:flex-end;gap:30px;padding:0 44px;z-index:40;pointer-events:none;transition:opacity .5s var(--ease)}
#ac-onboarding .chrome>*{pointer-events:auto}
#ac-onboarding .lang{display:flex;gap:16px}
#ac-onboarding .lang button{font-family:var(--latin);font-weight:400;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding:6px 0;transition:color .25s,opacity .4s}
#ac-onboarding .lang button:hover,#ac-onboarding .lang button[aria-pressed="true"]{color:var(--ink)}
#ac-onboarding #ac-intro{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;transition:opacity .7s var(--ease),transform .9s var(--ease)}
#ac-onboarding #ac-intro::-webkit-scrollbar{display:none}
#ac-onboarding #ac-intro.leaving{opacity:0;transform:translateY(-24px);pointer-events:none}
#ac-onboarding section{position:relative}
#ac-onboarding .s-mark{position:fixed;inset:0;display:grid;place-items:center;pointer-events:none;z-index:3}
#ac-onboarding .s-mark .mark{transform-origin:0 0;transition:transform 1.05s cubic-bezier(.55,0,.2,1)}
#ac-onboarding .s-mark.docked .mark{transform:translate(var(--dx,0),var(--dy,0)) scale(var(--ds,1))}
#ac-onboarding .s-mark.instant .mark{transition:none}
/* v5 opening: one flat grey with heavy grain, a stream of mottos folds into the Foldinto mark */
#ac-onboarding .aura{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;background:#E5E4E1;transition:opacity 1.2s var(--ease)}
#ac-onboarding .aura::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 95% at 50% 46%,rgba(255,255,255,.45),rgba(255,255,255,0) 52%,rgba(42,41,37,.09) 100%)}
#ac-onboarding .aura::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.62;mix-blend-mode:multiply}
#ac-onboarding .aura.in{opacity:1}
#ac-onboarding .aura.dim{opacity:0;transition:opacity 2.2s var(--ease)}
#ac-onboarding .stream{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;transition:opacity .45s var(--ease)}
#ac-onboarding .stream.out{opacity:0}
#ac-onboarding .s-mark.instant .fword{transition:none!important}
#ac-onboarding .mark{width:max-content}
#ac-onboarding .lockup{display:flex;align-items:center;margin:0;font-family:var(--latin);font-weight:400;font-size:clamp(44px,5.4vw,74px);line-height:1;color:var(--ink)}
#ac-onboarding .fmark{width:1.3em;height:1.3em;flex:none;overflow:visible;opacity:0;transition:opacity .35s var(--ease)}
#ac-onboarding .mark.shown .fmark{opacity:1}
#ac-onboarding .fmark .page{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linejoin:round}
#ac-onboarding .fmark .flap{fill:currentColor;stroke:currentColor;stroke-width:2.1;stroke-linejoin:round}
#ac-onboarding .fword{display:inline-block;overflow:hidden;white-space:nowrap;max-width:0;opacity:0;margin-left:0;letter-spacing:-.02em;padding-bottom:.08em;transition:max-width 1.1s cubic-bezier(.65,0,.35,1),margin-left 1.1s cubic-bezier(.65,0,.35,1),opacity .8s var(--ease) .25s}
#ac-onboarding .fword b{font-weight:500}
#ac-onboarding .fword span{font-weight:300}
#ac-onboarding .mark.word .fword{opacity:1;margin-left:.36em}
#ac-onboarding .s-letter{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:124px 24px 64px}
#ac-onboarding .stack{display:grid;place-items:center;width:100%}
#ac-onboarding .stack>*{grid-area:1/1}
#ac-onboarding .letter-col{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:min(420px,100%)}
#ac-onboarding .peel{position:relative;width:100%;opacity:0;transform:translateY(72vh) rotate(-.5deg);transition:opacity .6s var(--ease) .3s,transform 1.3s cubic-bezier(.22,.8,.24,1) .3s;filter:drop-shadow(0 1px 1px rgba(42,41,37,.07)) drop-shadow(0 12px 14px rgba(42,41,37,.09)) drop-shadow(0 30px 30px rgba(42,41,37,.11))}
#ac-onboarding .peel.in{opacity:1;transform:rotate(-.5deg)}
#ac-onboarding .peel.gone{opacity:0;transform:translate(-36px,-52px) rotate(-3.5deg);transition:opacity .5s var(--ease),transform .9s var(--ease)!important}
#ac-onboarding .letter{position:relative;display:flex;flex-direction:column;min-height:min(calc(100svh - 260px),700px);background:var(--grain-soft),linear-gradient(172deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%,rgba(42,41,37,.03)),var(--paper-letter);background-blend-mode:multiply,normal,normal;padding:44px 40px 40px;border-radius:1px;color:#2B2A26}
#ac-onboarding .clip{position:absolute;left:50%;top:-22px;width:24px;height:52px;margin-left:-12px;background:url("assets/onboarding/paperclip-display.png") center/contain no-repeat;filter:drop-shadow(0 1px .5px rgba(42,41,37,.25)) drop-shadow(1px 3px 3px rgba(42,41,37,.14));pointer-events:none;z-index:4}
#ac-onboarding .peel>.clip{opacity:0;transform:translateY(-10px);transition:opacity .45s var(--ease) .4s,transform .6s var(--ease-out) .4s}
#ac-onboarding .peel.in>.clip{opacity:1;transform:none}
#ac-onboarding .peel.peeling>.clip{opacity:0;transform:translate(-8px,-14px) rotate(-14deg);transition:opacity .3s var(--ease) .18s,transform .55s var(--ease) .05s}
#ac-onboarding .letter p{margin:0;opacity:0;transform:translateY(4px);transition:opacity .8s var(--ease),transform .9s var(--ease-out)}
#ac-onboarding .letter p.in{opacity:1;transform:none}
#ac-onboarding .l-top p{font-family:var(--sans);font-weight:400;font-size:13px;line-height:1.9;text-indent:1.6em;text-wrap:pretty}
html[lang="en"] #ac-onboarding .l-top p{font-size:13.5px;line-height:1.72;letter-spacing:.005em}
html[lang="zh-CN"] #ac-onboarding .l-top p,html[lang="zh-CN"] #ac-onboarding .l-coda{font-weight:400;letter-spacing:.02em}
#ac-onboarding .l-top p+p{margin-top:.85em}
#ac-onboarding .l-top p:first-child{text-indent:0}
#ac-onboarding .l-space{flex:1;min-height:60px}
#ac-onboarding .l-foot{padding-right:56px}
#ac-onboarding .l-no{display:flex;gap:16px;font-family:var(--latin);font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px!important}
#ac-onboarding .l-no span:first-child{min-width:16px}
#ac-onboarding .l-no span:last-child{text-wrap:balance;line-height:1.7}
#ac-onboarding .l-coda{font-weight:400;font-size:12px;line-height:1.8;color:#3E3C37;text-indent:1.6em;text-wrap:balance}
#ac-onboarding .flap{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
#ac-onboarding .corner{position:absolute;right:0;bottom:0;width:84px;height:84px;cursor:grab;touch-action:none;z-index:5}
#ac-onboarding .corner:active{cursor:grabbing}
#ac-onboarding .corner:focus-visible{outline:1px solid var(--ink-3);outline-offset:-10px}
#ac-onboarding .peel-hint{margin-top:36px;font-family:var(--latin);font-weight:400;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;gap:12px;padding:8px 4px;opacity:0;transform:translateY(4px);transition:opacity .7s var(--ease),transform .9s var(--ease-out),color .25s}
html[lang="zh-CN"] #ac-onboarding .peel-hint{font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.14em}
#ac-onboarding .peel-hint.in{opacity:1;transform:none}
#ac-onboarding .peel-hint:hover{color:var(--ink)}
#ac-onboarding .peel-hint svg{width:10px;height:10px;transition:transform .35s var(--ease)}
#ac-onboarding .peel-hint:hover svg{transform:translate(-2px,-2px)}
#ac-onboarding .letter-col.done{pointer-events:none}
#ac-onboarding .auth{position:relative;z-index:1;width:min(340px,100%);opacity:0;transform:translateY(10px) scale(.985);transition:opacity .8s var(--ease),transform 1.1s var(--ease-out)}
#ac-onboarding .auth.in{opacity:1;transform:none}
#ac-onboarding .step{display:none}
#ac-onboarding .step.active{display:block;animation:ac-stepIn .55s var(--ease-out) both}
@keyframes ac-stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#ac-onboarding .auth h1{font-family:var(--sans);font-weight:500;font-size:30px;line-height:1.25;letter-spacing:-.01em;margin:0;text-wrap:balance}
html[lang="zh-CN"] #ac-onboarding .auth h1{font-size:26px;letter-spacing:.02em;line-height:1.4}
#ac-onboarding .auth .sub{font-size:13px;line-height:1.75;color:var(--ink-3);margin:12px 0 36px;overflow-wrap:anywhere}
#ac-onboarding .auth .sub b{font-weight:400;color:var(--ink-2)}
#ac-onboarding .btn{position:relative;width:100%;height:52px;border-radius:18px;font-size:13.5px;font-weight:400;letter-spacing:.01em;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .18s var(--ease),background-color .2s,box-shadow .2s,opacity .2s}
#ac-onboarding .btn:active{transform:scale(.99)}
#ac-onboarding .btn+.btn{margin-top:10px}
#ac-onboarding .btn svg{width:17px;height:17px;flex:none}
#ac-onboarding .btn-apple{background:#1F1E1B;color:#F6F5F1}
#ac-onboarding .btn-apple:hover{background:#000}
#ac-onboarding .btn-google{background:rgba(250,249,246,.75);color:#2A2925;box-shadow:inset 0 0 0 1px var(--line-2)}
#ac-onboarding .btn-google:hover{background:#FAF9F6;box-shadow:inset 0 0 0 1px var(--ink-4)}
#ac-onboarding .btn-primary{background:var(--ink);color:#F6F5F1;margin-top:12px}
#ac-onboarding .btn-primary:hover{background:#151412}
#ac-onboarding .btn[aria-busy="true"]{pointer-events:none}
#ac-onboarding .btn[aria-busy="true"]>*{opacity:0}
#ac-onboarding .btn[aria-busy="true"]::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:1px solid currentColor;border-right-color:transparent;animation:ac-spin .7s linear infinite;opacity:.75}
@keyframes ac-spin{to{transform:rotate(360deg)}}
#ac-onboarding .or{margin:22px 0;text-align:center;font-family:var(--latin);font-weight:400;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4)}
html[lang="zh-CN"] #ac-onboarding .or{font-family:var(--sans);font-size:12px;letter-spacing:.2em}
#ac-onboarding .field{position:relative}
#ac-onboarding .input{width:100%;height:52px;border:0;border-radius:18px;background:rgba(250,249,246,.55);box-shadow:inset 0 0 0 1px var(--line-2);padding:0 16px;font-size:14px;font-weight:400;outline:none;transition:box-shadow .2s,background .2s}
#ac-onboarding .input::placeholder{color:var(--ink-4);font-weight:400}
#ac-onboarding .input:hover{box-shadow:inset 0 0 0 1px var(--ink-4)}
#ac-onboarding .input:focus{background:rgba(250,249,246,.85);box-shadow:inset 0 0 0 1px var(--ink)}
#ac-onboarding .input[aria-invalid="true"]{box-shadow:inset 0 0 0 1px var(--accent)}
#ac-onboarding .field .reveal{position:absolute;right:8px;top:8px;width:36px;height:36px;display:grid;place-items:center;color:var(--ink-3);border-radius:12px;transition:color .2s,background .2s}
#ac-onboarding .field .reveal svg{width:18px;height:18px;display:block}
#ac-onboarding .field .reveal:hover{color:var(--ink);background:rgba(42,41,37,.05)}
#ac-onboarding .field.has-reveal .input{padding-right:52px}
#ac-onboarding .hint{font-size:12px;line-height:1.6;color:var(--ink-3);margin:10px 2px 0;min-height:20px;transition:color .2s}
#ac-onboarding .hint.ok{color:var(--ink-2)}
#ac-onboarding .hint.bad{color:var(--accent)}
#ac-onboarding .error{font-size:12px;line-height:1.6;color:var(--accent);margin:10px 2px 0;min-height:20px}
#ac-onboarding .error:empty{min-height:0;margin:0}
#ac-onboarding .terms{font-size:11.5px;line-height:1.75;color:var(--ink-3);margin:30px 0 0;text-align:center}
#ac-onboarding .terms a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
#ac-onboarding .terms a:hover{color:var(--ink)}
#ac-onboarding .back{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3);margin:0 0 26px;padding:4px 0;transition:color .2s}
#ac-onboarding .back:hover{color:var(--ink)}
#ac-onboarding .back svg{width:13px;height:13px}
#ac-onboarding .row-between{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
#ac-onboarding .text-btn{font-size:12.5px;color:var(--ink-3);padding:4px 0;transition:color .2s}
#ac-onboarding .text-btn:hover{color:var(--ink)}
#ac-onboarding .text-btn:disabled{color:var(--ink-4);cursor:default}
#ac-onboarding .code{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
#ac-onboarding .code input{width:100%;height:58px;border:0;border-radius:18px;background:rgba(250,249,246,.55);box-shadow:inset 0 0 0 1px var(--line-2);text-align:center;font-family:var(--latin);font-weight:400;font-size:24px;outline:none;caret-color:var(--ink);transition:box-shadow .2s,transform .2s}
#ac-onboarding .code input:focus{box-shadow:inset 0 0 0 1px var(--ink);background:rgba(250,249,246,.85)}
#ac-onboarding .code input.filled{box-shadow:inset 0 0 0 1px var(--ink-3)}
#ac-onboarding .code.bad input{box-shadow:inset 0 0 0 1px var(--accent)}
#ac-onboarding .code.bad{animation:ac-shake .42s var(--ease)}
#ac-onboarding .code.checking input{opacity:.5}
@keyframes ac-shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@media (max-width:700px){
#ac-onboarding .chrome{height:60px;padding:0 20px;gap:22px}
#ac-onboarding .s-letter{padding:96px 20px 48px}
#ac-onboarding .letter{padding:36px 26px 30px;min-height:min(calc(100svh - 220px),620px)}
#ac-onboarding .corner{width:72px;height:72px}
#ac-onboarding .peel-hint{margin-top:30px}
#ac-onboarding .auth h1{font-size:26px}
#ac-onboarding .code{gap:6px}
#ac-onboarding .code input{height:52px;font-size:21px}
#ac-onboarding .input{font-size:16px}

}

/* Isolated product overlay; dimensions/easing above are copied from approved v4.2. */
#ac-onboarding{position:fixed;inset:0;z-index:2000;margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden;font-feature-settings:"kern"}
#ac-onboarding,#ac-onboarding *{box-sizing:border-box}
#ac-onboarding button,#ac-onboarding input{font:inherit;color:inherit}
#ac-onboarding button{background:none;border:0;padding:0;cursor:pointer}
#ac-onboarding a{color:inherit}
#ac-onboarding [hidden]{display:none!important}
#ac-onboarding::after{content:"";position:fixed;inset:0;background:var(--grain);opacity:.16;mix-blend-mode:multiply;pointer-events:none;z-index:0}
#ac-onboarding :focus-visible{outline:1px solid var(--ink);outline-offset:3px}
#ac-onboarding #ac-intro{max-width:none;width:auto;margin:0;padding:0}
#ac-onboarding #ac-intro{z-index:1}
#ac-onboarding .chrome{z-index:40}
#ac-onboarding .ac-guest{position:fixed;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);padding:8px 12px;font-size:11px;line-height:1.6;color:var(--ink-3);z-index:42;white-space:nowrap}
#ac-onboarding .ac-guest:hover{color:var(--ink)}
#ac-onboarding .btn{font-size:13.5px}
#ac-onboarding .btn-primary{background:var(--ink);color:#F6F5F1}
#ac-onboarding .btn-apple{background:#1F1E1B;color:#F6F5F1}
#ac-onboarding .btn-google{background:rgba(250,249,246,.75);color:var(--ink)}
#ac-onboarding .input{font-size:14px}
#ac-onboarding .code input{font-size:24px}
#ac-onboarding button:disabled{cursor:default}
#ac-onboarding .btn:disabled{opacity:.55}
#ac-onboarding .corner:disabled{pointer-events:none}
#ac-onboarding .peel-hint:disabled{pointer-events:none}
#ac-onboarding .ac-service-error{font-size:12px;line-height:1.7;color:var(--accent);margin:12px 0 0;white-space:normal;overflow-wrap:anywhere}
#ac-onboarding .ac-service-error:empty{display:none}
#ac-onboarding.ac-leaving{opacity:0;transform:translateY(-24px);transition:opacity .7s var(--ease),transform .9s var(--ease);pointer-events:none}
@media(max-width:700px){#ac-onboarding .input{font-size:16px}#ac-onboarding .code input{font-size:21px}}
@media(prefers-reduced-motion:reduce){#ac-onboarding *,#ac-onboarding *::before,#ac-onboarding *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;transition-delay:0s!important}#ac-onboarding.ac-leaving{transition:none}}

#ac-onboarding{font-size:16px;line-height:normal;outline:none}
#ac-onboarding .input:focus-visible,#ac-onboarding .code input:focus-visible{outline:none}

/* 2026-11-01 two pixel notes replace the single letter (实验/像素便签信demo.html): same peel, life on top, work beneath. */
#ac-onboarding .notes{display:grid;width:100%}
#ac-onboarding .notes>.peel{grid-area:1/1;display:flex}
#ac-onboarding #ac-peel{z-index:2}
#ac-onboarding #ac-peel2{z-index:1}
#ac-onboarding .peel-2.in{transform:rotate(2.6deg) translate(16px,12px)}
#ac-onboarding .peel-2.in.active{transform:rotate(-.3deg);transition:transform .9s var(--ease-out)}
#ac-onboarding .peel-2.in.active.gone{transform:translate(-36px,-52px) rotate(-3.5deg)}
#ac-onboarding .peel-2.in:not(.active)>.clip{opacity:0;transform:translateY(-10px)}
#ac-onboarding .letter{flex:1;min-height:0;background:#F3F1EC;padding:30px 30px 34px}
#ac-onboarding .pix{margin:4px 0 24px}
#ac-onboarding .pix canvas{display:block;width:100%;image-rendering:pixelated;image-rendering:crisp-edges}
#ac-onboarding .l-title{font-family:var(--sans);font-weight:500;font-size:15px;letter-spacing:.04em;margin-bottom:12px!important}
html[lang="en"] #ac-onboarding .l-title{letter-spacing:0}
#ac-onboarding .l-top p,#ac-onboarding .l-top p:first-child{text-indent:0}
#ac-onboarding .l-top p+p{margin-top:.7em}
#ac-onboarding .l-space{min-height:28px}
#ac-onboarding .l-coda{text-indent:0;padding-right:56px;text-wrap:pretty;white-space:pre-line}
#ac-onboarding .l-en{font-family:var(--latin);font-size:12.5px;letter-spacing:.01em}
@media (max-width:700px){
#ac-onboarding .letter{padding:26px 22px 30px;min-height:0}
#ac-onboarding .peel-2.in{transform:rotate(2deg) translate(6px,12px)}
}

/* Pages: account service is not connected. */
#ac-onboarding .auth{display:none!important}
#ac-onboarding .ac-guest{font-size:15px;font-weight:550;background:#252420;color:#f3f1ec;border-radius:18px;padding:13px 22px;bottom:max(32px,env(safe-area-inset-bottom))}
#ac-onboarding .ac-guest:hover{color:white}
#ac-onboarding .ac-guest::after{content:'内容只保存在这个浏览器里';display:block;font-size:11px;font-weight:400;opacity:.8}
html[lang=en] #ac-onboarding .ac-guest::after{content:'Your content stays in this browser only'}