﻿/* One visual story, with no dashboard controls or long copy. */
.neo-document-preview{padding:32px;display:flex;flex-direction:column;gap:16px;container-type:inline-size;background:#080808;color:#fff}
.neo-document-preview header{position:relative;flex-shrink:0}
.neo-document-preview h3{margin:0;text-align:center;font-size:32px;line-height:1.08;letter-spacing:-.04em;font-weight:600}
.document-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.document-playback{position:absolute;right:-22px;top:-22px;width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:#aaa;border-radius:50%;cursor:pointer;padding:14px}
.document-playback[hidden]{display:none}.document-playback:hover{color:white}.document-playback:focus-visible{outline:2px solid #8cbbfa;outline-offset:2px}.document-playback svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.document-panel-stack{position:relative;flex:1;min-height:0}
.document-example-panel{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:27px}
.document-example-panel.is-active{display:flex;animation:document-enter .45s cubic-bezier(.2,.8,.2,1) both}
.document-sheet{position:relative;width:154px;height:184px;padding:26px 23px;border-radius:12px;background:linear-gradient(145deg,#fff,#dce1e7);box-shadow:0 0 70px #b9d4f015,0 20px 45px #0008;transform:rotate(-7deg);transition:transform .6s}
.document-sheet:before{content:'';position:absolute;inset:8px -8px -8px 8px;border:1px solid #ffffff24;border-radius:12px;z-index:-1;background:#ffffff08}
.document-sheet-fold{position:absolute;right:0;top:0;width:31px;height:31px;background:linear-gradient(45deg,#c8ced6 50%,#080808 51%);border-bottom-left-radius:7px}
.document-sheet-icon{width:27px;height:27px;fill:none;stroke:#657080;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:18px}
.document-sheet-lines{display:grid;gap:9px}.document-sheet-lines i{height:5px;border-radius:5px;background:#b9c2cf;transform-origin:left}.document-sheet-lines i:nth-child(2){width:85%}.document-sheet-lines i:nth-child(3){width:94%}.document-sheet-lines i:nth-child(4){width:60%}
.document-scan{position:absolute;left:8px;right:8px;top:38px;height:2px;background:#1979ed;box-shadow:0 0 14px #1979ed;animation:document-scan 3.5s ease-in-out infinite}
.document-summary-panel .document-sheet{transform:rotate(0deg)}.document-summary-panel .document-sheet-lines i{background:#5789c7;animation:document-line .6s ease-out both}.document-summary-panel .document-sheet-lines i:nth-child(2){animation-delay:.2s}.document-summary-panel .document-sheet-lines i:nth-child(3){animation-delay:.4s}.document-summary-panel .document-sheet-lines i:nth-child(4){animation-delay:.6s}
.document-action-panel .document-sheet{transform:rotate(6deg)}
.document-seal{position:absolute;right:-20px;bottom:12px;width:57px;height:57px;display:grid;place-items:center;border-radius:50%;background:#1979ed;color:#fff;box-shadow:0 8px 25px #0005;border:4px solid #080808}
.document-seal svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.document-action-panel .document-seal{background:#fff;color:#171717}
.document-status{font-size:17px;line-height:1.3;color:#e6e6e6;letter-spacing:-.02em}
.document-views{display:flex;justify-content:center;gap:7px;margin:0;padding:0;flex-shrink:0}
.document-views>span{height:3px;width:22px;border-radius:3px;background:#353535;overflow:hidden}
.document-views>span.is-active{width:38px}.document-views>span.is-active::after{content:'';display:block;height:100%;background:#dce9fa;transform-origin:left;animation:document-progress 2.8s linear both}
.neo-document-preview footer{margin:0;font-size:11px;line-height:1.4;color:#999;text-align:center;flex-shrink:0}
.neo-document-preview:not([data-playing='true']) *,.neo-document-preview:not([data-playing='true']) *::after{animation-play-state:paused!important}
@keyframes document-enter{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes document-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes document-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes document-scan{0%,100%{top:40px;opacity:0}15%,80%{opacity:1}90%{top:158px;opacity:0}}
@media(max-width:520px){.neo-document-preview{padding:28px;gap:15px}.neo-document-preview h3{font-size:31px}}
@container(max-width:260px){.neo-document-preview h3{font-size:28px}.document-sheet{width:140px;height:172px;padding:24px 21px}.document-status{font-size:15px}}
@media(prefers-reduced-motion:reduce){.neo-document-preview *,.neo-document-preview *::after{animation:none!important;transition:none!important}.document-scan{display:none}}
