/* Tactile objects, drawn in CSS in the studio palette. */
.desktop-folder, .desktop-window, .desk-note, .message-thread { font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; }
.desktop-folder { appearance:none; border:0; background:none; display:grid; justify-items:center; gap:8px; padding:20px 12px 12px; max-width:220px; cursor:pointer; text-align:center; }
.folder-shape { width:132px; height:99px; position:relative; perspective:500px; filter:drop-shadow(0 10px 8px #54243c25); }
.folder-shape::before { content:''; position:absolute; inset:6px 0 0; border-radius:7px; background:linear-gradient(#b26791,#873663); border:1px solid #80325c; box-shadow:inset 0 1px 1px #ffffff85; }
.folder-shape::after { content:''; position:absolute; top:0; left:0; width:55px; height:18px; border-radius:7px 10px 0 0; background:linear-gradient(#c286a9,#b26791); z-index:-1; border-top:1px solid #ffffff80; }
.folder-sheet { position:absolute; inset:15px 8px 5px; border-radius:3px; background:linear-gradient(#fffdfa,var(--cream)); transform:rotate(-4deg); box-shadow:0 -1px 2px #36172b25; }
.folder-front { position:absolute; inset:26px 0 0; border-radius:5px 5px 8px 8px; background:linear-gradient(175deg,#f4d3e5 0%,var(--blush) 14%,#ce8eb2 95%); border:1px solid #b7799c; box-shadow:inset 0 1px 1px #ffffffcc,inset 0 -2px 3px #88355d25; transform-origin:bottom; transition:transform .25s ease; }
.desktop-folder:hover .folder-front, .desktop-folder.is-open .folder-front { transform:rotateX(-28deg); }
.desktop-folder:active .folder-shape { transform:scale(.97); }
.folder-name { font-size:14px; font-weight:600; line-height:1.3; }
.folder-hint { font-size:11px; color:var(--ink-soft); }
.object-modal-open { overflow:hidden; }
.desktop-window { padding:0; border:1px solid #ffffffa0; border-radius:13px; width:min(740px,calc(100% - 28px)); max-height:85dvh; overflow:auto; color:var(--ink); background:#f8f5f0f5; box-shadow:0 35px 100px #24101c55,0 3px 12px #24101c30; }
.desktop-window[open] { animation:window-in .22s ease-out; }
.desktop-window::backdrop { background:#241d2438; backdrop-filter:blur(7px); }
.desktop-window__bar { display:grid; grid-template-columns:70px 1fr 70px; align-items:center; gap:8px; padding:14px; border-bottom:1px solid #bcb4ad70; background:linear-gradient(#f5f2f0,#e3dfdb); position:sticky; top:0; z-index:1; }
.desktop-window__title { font:600 13px/1.4 -apple-system,BlinkMacSystemFont,sans-serif; text-align:center; overflow-wrap:anywhere; }
.window-lights { display:flex; gap:7px; align-items:center; }
.window-close,.window-light { width:13px; height:13px; border-radius:50%; border:1px solid #bd4841; background:linear-gradient(#ff8076,#ee5b50); box-shadow:inset 0 1px 1px #ffffff70; }
.window-close { padding:0; cursor:pointer; font:13px/10px sans-serif; color:#68251e; min-width:13px; position:relative; }
.window-close::after { content:''; position:absolute; inset:-10px; }
.window-light--yellow { background:linear-gradient(#ffd778,#edba43); border-color:#cea039; }
.window-light--green { background:linear-gradient(#8bdc98,#5fbb72); border-color:#4aab60; }
.window-back { margin:12px 20px 0; background:none; border:0; color:var(--orchid); cursor:pointer; padding:8px; font-size:13px; }
.window-back[hidden] { display:none; }
.desktop-window__content { padding:28px; }
.file-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.desktop-file { border:1px solid transparent; background:none; border-radius:8px; padding:16px 6px; display:flex; flex-direction:column; align-items:center; gap:10px; cursor:pointer; min-width:0; }
.desktop-file:hover,.desktop-file:focus-visible { background:#a5437910; border-color:#a5437930; }
.file-icon { display:grid; place-items:end center; padding:15px 8px; width:68px; height:88px; background:repeating-linear-gradient(0deg,transparent 0 8px,#a5437910 8px 9px),linear-gradient(130deg,#fff,var(--cream)); border:1px solid #d7cdc7; border-radius:3px 16px 3px 3px; box-shadow:0 4px 5px #30132918,inset 0 1px white; color:var(--orchid); font-size:12px; font-weight:700; position:relative; }
.file-icon::after { content:''; position:absolute; right:0; top:0; width:17px; height:17px; border-radius:0 12px 0 3px; background:linear-gradient(45deg,#ccc1ba,#fff); box-shadow:-1px 1px 2px #30132920; }
.file-name { font-size:12px; overflow-wrap:anywhere; }
.file-description { font-size:11px; color:var(--ink-soft); }
.preview-paper { padding:clamp(20px,5vw,46px); background:var(--paper); border:1px solid #e5ddd3; box-shadow:0 4px 14px #30132912; }
.preview-kicker { font-size:10px; letter-spacing:.18em; color:var(--orchid); }
.preview-paper h3 { font-family:var(--font-display); font-size:clamp(24px,5vw,38px); line-height:1.15; margin-bottom:20px; }
.preview-paper p,.preview-paper li { font-size:15px; }
.preview-paper .link-arrow { margin-top:22px; }
.desk-note { align-self:start; min-width:0; background:linear-gradient(100deg,#fffdf0,#fff9df); border-radius:12px 12px 3px 3px; box-shadow:0 18px 35px #58243c18,0 2px 4px #58243c10; border:1px solid #e5d8a1; overflow:hidden; }
.desk-note__top { padding:13px 24px; background:linear-gradient(#ffe59b,#efd07b); border-bottom:1px solid #d5b35d; font-size:14px; font-weight:600; box-shadow:inset 0 1px #fff5cb; }
.desk-note__date { display:block; text-align:center; color:#766c50; font-size:11px; padding:17px 12px 4px; }
.desk-note .steps,.desk-note .next-steps { padding:0 24px 18px; }
.desk-note li.step,.desk-note .next-steps li { display:grid; grid-template-columns:26px minmax(0,1fr); gap:14px; padding:22px 0; border:0; border-bottom:1px solid #daceaa80; }
.desk-note li:last-child { border-bottom:0; }
.desk-note h3 { font:600 16px/1.4 -apple-system,BlinkMacSystemFont,sans-serif; }
.desk-note li p { font:14px/1.6 -apple-system,BlinkMacSystemFont,sans-serif; margin:8px 0 0; color:#5b5342; }
.note-check { width:23px; height:23px; border:1.5px solid #b59749; border-radius:50%; background:linear-gradient(#fffefa,#fff3cb); padding:0; cursor:pointer; margin-top:2px; position:relative; }
.note-check::before { content:''; position:absolute; inset:-9px; }
.note-check[aria-pressed=true] { background:#b38d32; box-shadow:inset 0 1px 2px #71581c30; }
.note-check[aria-pressed=true]::after { content:'✓'; color:white; font-size:15px; position:absolute; inset:0; line-height:21px; }
.is-checked h3 { text-decoration:line-through; text-decoration-color:#b59749; }
.message-thread { max-width:490px; margin:28px auto; text-align:left; }
.message-thread__label { font-size:11px; color:var(--ink-soft); margin-bottom:12px; text-align:center; }
.message-thread p.message-bubble { position:relative; max-width:100%; margin:0; padding:18px 22px; background:linear-gradient(145deg,#b5568d,var(--orchid)); color:var(--paper); font-size:15px; line-height:1.6; border-radius:22px 22px 6px 22px; box-shadow:inset 0 1px #ffffff40,0 5px 12px #752a5915; }
.message-bubble::after { content:''; position:absolute; right:-5px; bottom:0; width:17px; height:17px; background:var(--orchid); border-radius:0 0 0 16px; transform:skewX(25deg); }
.message-delivered { display:block; text-align:right; padding:7px 3px; font-size:11px; color:var(--ink-soft); }
.typing-dots { display:none; align-items:center; gap:4px; width:60px; padding:14px; background:linear-gradient(#f8f5f1,#ded8d3); border-radius:18px; margin-bottom:10px; }
.typing-dots i { width:7px; height:7px; background:#8b7b85; border-radius:50%; animation:typing .6s ease-in-out infinite alternate; }
.typing-dots i:nth-child(2) { animation-delay:.15s; }.typing-dots i:nth-child(3) { animation-delay:.3s; }
.is-typing .typing-dots { display:flex; }
.is-typing .message-bubble,.is-typing .message-delivered { opacity:0; }
.is-delivered .message-bubble { animation:window-in .25s ease-out; }
.followup__copy .message-thread { margin-inline:0; }
.pullquote figure { position:relative; max-width:1000px; padding:clamp(30px,6vw,70px); background:repeating-linear-gradient(2deg,#ffffff08 0 2px,#a17f6005 2px 3px),var(--paper); box-shadow:1px 14px 25px #52283b17,0 1px 3px #52283b18; transform:rotate(-1deg); }
.pullquote figure::before { content:''; position:absolute; width:105px; height:30px; top:-14px; left:calc(50% - 52px); transform:rotate(4deg); background:repeating-linear-gradient(90deg,#f3eee660 0 2px,#dfc7ad40 2px 4px); border:1px solid #ffffff60; }
.sticker { filter:drop-shadow(0 2px 1px #fff) drop-shadow(0 -2px 1px #fff) drop-shadow(0 8px 6px #45223730); }
@keyframes window-in { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes typing { to { transform:translateY(-3px); opacity:.5; } }
@media(max-width:600px) { .file-grid { grid-template-columns:1fr; gap:4px; } .desktop-file { flex-direction:row; text-align:left; flex-wrap:wrap; padding:14px; } .file-description { flex-basis:100%; } .file-icon { width:43px; height:57px; font-size:9px; padding:8px; } .desktop-window__content { padding:16px; } .desktop-folder { margin:16px 0; } .desk-note .steps,.desk-note .next-steps { padding-inline:18px; } }
@media(prefers-reduced-motion:reduce) { .desktop-window[open],.is-delivered .message-bubble,.typing-dots i { animation:none; } .folder-front { transition:none; } .is-typing .typing-dots { display:none; } .is-typing .message-bubble,.is-typing .message-delivered { opacity:1; } }