/* Editorial document illustration. It depicts working materials, not an app. */
.material-preview{container-type:inline-size;isolation:isolate;min-width:0;width:100%;margin:0;position:relative}
.material-composition{position:relative;isolation:isolate;height:clamp(560px,125cqw,620px);width:100%;perspective:1400px}
.material-composition::before{content:"";position:absolute;inset:8% -5% 0;background:radial-gradient(ellipse at 50% 45%,#38648347 0%,#10263722 42%,transparent 70%);filter:blur(24px);z-index:-1;pointer-events:none}
.material-orbit{position:absolute;border:1px solid #91b9d116;border-radius:50%;pointer-events:none;z-index:-1}
.material-orbit-one{width:94%;height:73%;top:17%;left:2%;transform:rotate(-24deg)}
.material-orbit-two{width:78%;height:99%;top:0;left:9%;transform:rotate(34deg)}
.material-collection-label{position:absolute;top:0;left:7%;display:flex;align-items:center;gap:9px;color:#b8d2e3;font-size:10px;letter-spacing:.13em;text-transform:uppercase;line-height:1.4}
.material-collection-label svg{width:18px;height:18px;flex-shrink:0}
.material-sheet{position:absolute;padding:clamp(16px,4.5cqw,24px);border:1px solid #abc9dc36;border-radius:14px;box-shadow:0 22px 50px #0007,inset 0 1px 0 #d9ecf314;color:#dce8ef;backface-visibility:hidden;transform-origin:50% 70%;overflow:hidden}
.material-sheet::after{content:"";position:absolute;pointer-events:none;inset:0;background:linear-gradient(120deg,#d8f0ff06,transparent 37%);border-radius:inherit}
.material-sheet h3{font-size:clamp(17px,4.7cqw,23px);line-height:1.24;letter-spacing:-.04em;text-wrap:balance;margin:15px 0 19px;color:#edf3f5;font-weight:400}
.material-sheet-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#9fb7c8;font-size:8px;line-height:1.4;letter-spacing:.12em}
.material-file-mark{font-size:10px;letter-spacing:-.07em;color:#a8c7da;font-weight:600}
.material-sheet-plan{z-index:1;left:7%;top:8%;width:76%;background:linear-gradient(145deg,#1c3141,#101d29 80%);transform:rotate(-7deg) rotateY(5deg);animation:material-plan-drift 10s ease-in-out infinite}
.material-field{border-top:1px solid #a5c8de24;padding-top:12px}
.material-field>span,.material-plan-columns span{display:block;font-size:9px;line-height:1.4;color:#91acbf}
.material-field p{font-size:clamp(10px,2.6cqw,12px);line-height:1.65;margin-top:6px;color:#cad9e3}
.material-plan-columns{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:15px}
.material-plan-columns i{display:block;height:3px;border-radius:2px;width:95%;margin-top:8px;background:#9ebed52b}
.material-plan-columns i:last-child{width:64%;margin-top:5px;background:#9ebed51b}
.material-sequence{display:flex;gap:7px;align-items:center;font-size:8px;line-height:1.4;margin-top:21px;color:#7895aa}
.material-sequence b{font-weight:400;color:#bcd3e3}
.material-sequence i{height:1px;flex:1;min-width:8px;background:#99bcd236}
.material-sheet-evidence{z-index:2;right:8%;top:30%;width:68%;background:linear-gradient(145deg,#192c3a,#0b1721 85%);transform:rotate(7deg) rotateY(-5deg);animation:material-evidence-drift 11s ease-in-out infinite}
.material-sheet-evidence h3{font-size:clamp(16px,4.4cqw,21px);max-width:220px;margin-bottom:17px}
.material-table-head,.material-table-row{display:grid;grid-template-columns:.9fr 1fr;gap:12px;align-items:center}
.material-table-head{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:#83a3b9;padding-bottom:8px;border-bottom:1px solid #9cbed02b}
.material-table-row{padding-block:10px;border-bottom:1px solid #9cbed018;font-size:9px;color:#bed1df;line-height:1.4}
.material-table-row i{height:3px;width:90%;border-radius:2px;background:#a9c5d62c}
.material-table-row:nth-of-type(4) i{width:64%}
.material-evidence-link{display:flex;gap:7px;align-items:center;font-size:8px;color:#849fb3;margin-top:15px}
.material-evidence-link>span{width:4px;height:4px;border-radius:50%;background:#b5d2e5;box-shadow:0 0 12px #a8d5ef60}
.material-sheet-report{z-index:3;left:3%;top:52%;width:82%;background:linear-gradient(135deg,#243d4e 0%,#132533 42%,#0e1b28 100%);transform:rotate(-2deg) rotateY(2deg);border-color:#bdd9e958;box-shadow:0 30px 60px #0009,0 1px 0 #dff1fa24 inset;animation:material-report-drift 9s ease-in-out infinite}
.material-sheet-report h3{margin:14px 0 20px;font-size:clamp(18px,5cqw,24px)}
.material-report-structure{display:grid;gap:11px}
.material-report-structure>div{display:flex;align-items:center;gap:12px;line-height:1.4}
.material-report-structure span{font-size:8px;line-height:1;color:#7f9db2}
.material-report-structure strong{font-size:clamp(10px,2.65cqw,12px);font-weight:400;color:#d0e0eb}
.material-review-note{display:flex;align-items:flex-start;gap:10px;margin-top:21px;padding:13px 12px;border:1px solid #afcfe32b;border-radius:8px;background:#a6cee709}
.material-review-note svg{width:17px;height:17px;color:#a1c2d8;flex-shrink:0;margin-top:2px}
.material-review-note span{display:block;font-size:10px;color:#c4dbe9;line-height:1.4}
.material-review-note p{font-size:9px;line-height:1.5;color:#8faabd;margin-top:5px}
.material-side-label{position:absolute;right:0;bottom:6%;writing-mode:vertical-rl;font-size:8px;letter-spacing:.18em;line-height:1;color:#66859b}
.material-preview figcaption{max-width:380px;margin:16px auto 0;text-align:center;font-size:11px;line-height:1.7;color:#91a7b9;padding-inline:14px;text-wrap:pretty}
@keyframes material-plan-drift{0%,100%{transform:translateY(0) rotate(-7deg) rotateY(5deg)}50%{transform:translateY(-5px) rotate(-6deg) rotateY(5deg)}}
@keyframes material-evidence-drift{0%,100%{transform:translateY(0) rotate(7deg) rotateY(-5deg)}50%{transform:translateY(4px) rotate(6deg) rotateY(-5deg)}}
@keyframes material-report-drift{0%,100%{transform:translateY(0) rotate(-2deg) rotateY(2deg)}50%{transform:translateY(-4px) rotate(-1deg) rotateY(2deg)}}
@container(max-width:340px){.material-composition{height:540px}.material-sheet{padding:16px}.material-sheet-plan{left:8%;width:77%;top:9%}.material-sheet-evidence{right:8%;width:71%;top:32%}.material-sheet-report{left:3%;width:87%;top:54%}.material-sheet h3{margin-block:14px 16px}.material-plan-columns{gap:12px}.material-side-label{right:0;bottom:6%;font-size:7px}.material-collection-label{font-size:9px;left:6%;gap:8px}.material-sheet-meta{font-size:7px}.material-review-note{padding:10px 9px;gap:8px;margin-top:18px}.material-report-structure{gap:10px}.material-preview figcaption{font-size:10px}}
@media(prefers-reduced-motion:reduce){.material-sheet{animation:none}}
body.motion-paused .material-sheet{animation:none!important}
.material-review-note p>span{display:inline;font-size:inherit;line-height:inherit;color:inherit}
.material-review-note p>.typing-cursor{display:inline-block;height:10px;vertical-align:middle}