/* Familiar desktop details at the scale of a real Mac screen. */
.finder-demo { position:absolute;inset:0;pointer-events:none;font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif; }
.desktop-folder { position:absolute;right:3%;width:52px;text-align:center;color:white;font-size:7px;line-height:1.4;text-shadow:0 1px 3px #102a43; }
.folder-projects { top:24%; }.folder-personal { top:24%;right:17%; }
.mac-folder-art { display:block;position:relative;width:36px;height:25px;margin:5px auto 4px;border-radius:2px 3px 3px 3px;background:linear-gradient(#abecff 0 3%,#82d6f7 5%,#4eb2e3 88%,#3d9cc7);border:1px solid #66bde6;box-shadow:inset 0 1px #dafaff,0 2px 2px #153a5733; }
.mac-folder-art::before { content:'';position:absolute;left:-1px;top:-5px;width:44%;height:5px;border-radius:3px 5px 0 0;background:#99def4;border:1px solid #8dcfe5;border-bottom:0; }
.desktop-folder>b { position:relative;z-index:1;padding:2px 4px;border-radius:2px;font-weight:500; }
.folder-selection { position:absolute;inset:-2px 0;background:#2e76c455;border:1px solid #d7e9fb66;border-radius:4px;opacity:0;animation:finder-folder-selected 16s linear infinite; }
.finder-window { position:absolute;z-index:1;left:18%;top:31%;width:65%;height:55%;background:#fff;border:1px solid #6879808a;border-radius:7px;box-shadow:0 13px 24px #071a3b5e,0 1px 3px #102b4e33;overflow:hidden;transform-origin:100% 0;animation:finder-open 16s var(--ease) infinite; }
.finder-toolbar { height:29px;display:flex;align-items:center;gap:12px;padding:0 9px;background:linear-gradient(#f8f8f8,#e8e8e9);border-bottom:1px solid #d2d2d5;color:#434345;font-size:9px; }
.finder-traffic { display:flex;gap:4px; }.finder-traffic i { width:6px;height:6px;border-radius:50%;border:.5px solid #0002;background:#ff6058; }.finder-traffic i:nth-child(2){background:#ffbd2e}.finder-traffic i:nth-child(3){background:#28c940}.finder-back{font-size:16px;color:#828286}.finder-view{margin-left:auto;font-size:12px}
.finder-content { display:flex;height:calc(100% - 44px); }.finder-sidebar { flex:0 0 28%;min-width:0;background:#e8e9edef;border-right:1px solid #dcdde2;padding:9px 5px;font-size:6px;color:#55585d; }.finder-sidebar small{display:block;font-size:5.5px;margin:0 4px 4px;color:#76797f}.finder-sidebar span{display:block;padding:3px 4px;border-radius:3px;white-space:nowrap}.finder-sidebar .selected{background:#c6d2df;color:#293a50}
.finder-files { flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:16px 8px;align-content:start; }.finder-file { min-width:0;text-align:center;position:relative; }.finder-file>b{display:inline-block;margin-top:7px;font-size:6.5px;font-weight:400;padding:2px;color:#303439;border-radius:2px;white-space:nowrap}.finder-file .mac-folder-art{width:29px;height:22px;margin:8px auto 0}.finder-file>img{display:block;width:32px;height:28px;object-fit:cover;border:2px solid #fff;box-shadow:0 1px 3px #23384955;margin:auto}
.finder-document { display:flex;flex-direction:column;gap:3px;width:23px;height:30px;margin:0 auto;background:linear-gradient(135deg,#fff,#f2f3f5);border:1px solid #b2bdc5;border-radius:1px;padding:9px 4px 0;box-shadow:0 1px 2px #3452; }.finder-document i{height:1px;background:#98afc4}.finder-document i:last-child{width:65%}.finder-selected>b{animation:finder-document-selected 16s linear infinite}.finder-status { position:absolute;bottom:0;left:0;right:0;height:15px;text-align:center;padding-top:3px;background:#f4f4f6;border-top:1px solid #e3e3e6;color:#797b80;font-size:5.5px; }
.finder-pointer { position:absolute;z-index:4;inset:0;animation:finder-cursor 16s ease-in-out infinite; }.finder-pointer svg{display:block;width:13px;height:17px;fill:#18222d;stroke:#fff;stroke-width:1.2;filter:drop-shadow(0 1px 1px #0006)}.finder-pointer>i{position:absolute;left:-5px;top:-5px;width:18px;height:18px;border:1px solid #fff;border-radius:50%;opacity:0;animation:finder-click 16s ease-out infinite}
@keyframes finder-cursor { 0%,6%,100%{transform:translate(65%,80%)}18%,24%{transform:translate(91%,30%)}36%,66%{transform:translate(43%,52%)}76%,94%{transform:translate(73%,77%)} }
@keyframes finder-click {0%,19%,22%,25%,100%{opacity:0;transform:scale(.8)}20%,23%{opacity:.7;transform:scale(1.4)}}
@keyframes finder-open {0%,23%,92%,100%{opacity:0;transform:translate(28px,-10px) scale(.96)}27%,88%{opacity:1;transform:translate(0,0) scale(1)}}
@keyframes finder-folder-selected {0%,18%,92%,100%{opacity:0}19%,88%{opacity:1}}
@keyframes finder-document-selected {0%,35%,92%,100%{background:transparent;color:#303439}36%,88%{background:#3478e6;color:white}}
/* A clipped stack of ruled paper, with ink rather than a flat UI tile. */
.screen-schedule { padding-top:22px;background:repeating-linear-gradient(0deg,#fff9e92b 0 1px,transparent 1px 3px),linear-gradient(100deg,#eee5cf,#fff9e6 8%,#fffaf0 78%,#f4ead3);border-color:#fff9e8;border-radius:3px 7px 13px 3px;box-shadow:1px 2px #cec4ad,3px 4px #fbf5e6,4px 5px #c6bda6,7px 15px 16px -10px #1a344b66;transform:rotate(-4deg); }
.screen-schedule::before { content:'';position:absolute;left:41%;top:-11px;width:36px;height:18px;border-radius:4px 4px 2px 2px;border:1px solid #7e8e97;background:linear-gradient(100deg,#8b9aa1,#e3e9e9 25%,#a1b1b8 54%,#e8edef 80%,#7d8b92);box-shadow:0 2px 2px #46586466,inset 0 1px #fff; }
.screen-schedule::after { content:'';position:absolute;right:0;bottom:0;width:20px;height:20px;background:linear-gradient(135deg,transparent 48%,#dacdad 51%,#fff9e9 85%);border-radius:0 0 12px; }
.screen-schedule-head { color:#435461;letter-spacing:1.4px;font-size:9px; }.screen-schedule-head i{background:#809984;box-shadow:inset 0 1px 2px #244a4b77,0 1px #fff}
.screen-weekdays { padding:3px;background:#e7ddc43d;border:1px solid #d2c6aa70;border-radius:7px; }.screen-weekdays button{min-height:31px;border-radius:4px;font-size:11px;color:#5c655f}.screen-weekdays button[aria-pressed=true]{background:#344d58;box-shadow:inset 0 1px #fff2,0 2px 3px #22364133}
.screen-lessons>div{border-top-color:#a6b2ae59;min-height:46px}.screen-lessons time{font-size:9px;color:#63716f}.screen-lessons span{font-size:11px;color:#30464b}.screen-lessons small{font-size:9px;color:#697875}.schedule-tab{font-size:12px;color:#465d5e}
/* A pocket game: a solid enamel rim, inset board and inked marks. */
.cross-circle { padding:14px;background:linear-gradient(115deg,#e9eee4,#cdd9cb 80%);border:1px solid #f9fff1;border-radius:16px;box-shadow:inset 0 1px 1px #fff,inset -2px -4px #a4b5a7,1px 3px #748e80,0 15px 20px -11px #122e4480;transform:rotate(3deg); }
.cross-circle-header{font-size:9px;color:#465e54;letter-spacing:1px;margin-bottom:11px}.cross-circle-header i{background:#aa7257;box-shadow:0 0 0 2px #80948133,inset 0 1px #ebc3a8}
.cross-circle-board{position:relative;gap:1px;padding:5px;border:1px solid #9eaa98;border-radius:6px;overflow:hidden;background:#b7beaa;box-shadow:inset 1px 2px 3px #48615259,0 1px #ffffffb3}.cross-circle-board button{background:linear-gradient(135deg,#f6f2df,#ece7cf);font:500 28px Georgia,serif;color:#315764;text-shadow:0 1px #fff,0 -1px #203d464d}.cross-circle-board button[data-mark=O]{color:#a76a50}.cross-circle-board button[data-win=true]{background:#c2d8b3}.cross-circle-footer{font-size:11px;color:#41594f}.cross-circle-footer button{background:linear-gradient(#fffef2,#e3e5d5);border-color:#93a99b;box-shadow:inset 0 1px #fff,0 2px 2px #748b6f33}.cross-circle-footer button:active{transform:translateY(1px)}
html[data-motion=paused] .finder-demo *,html[data-visible=false] .finder-demo *,[data-scene-active=false] .finder-demo *{animation-play-state:paused!important}
@media(max-width:520px){.desktop-folder{width:34px;font-size:5px;right:2%}.folder-personal{right:18%}.mac-folder-art{width:23px;height:16px}.finder-window{top:34%;left:10%;width:76%;height:58%;border-radius:4px}.finder-toolbar{height:20px;font-size:6px;gap:7px;padding:0 6px}.finder-traffic{gap:2px}.finder-traffic i{width:4px;height:4px}.finder-back{font-size:11px}.finder-view{font-size:9px}.finder-content{height:calc(100% - 30px)}.finder-sidebar{padding:5px 2px;font-size:4px}.finder-sidebar small{font-size:4px}.finder-sidebar span{padding:2px}.finder-files{padding:9px 5px;gap:4px}.finder-file>b{font-size:4.5px;margin-top:3px}.finder-document{width:17px;height:22px;padding:5px 3px 0}.finder-file .mac-folder-art{width:22px;height:17px;margin-top:5px}.finder-file>img{width:24px;height:22px}.finder-status{height:10px;font-size:4px;padding-top:2px}.finder-pointer svg{width:9px;height:12px}.screen-weekdays button{min-height:44px}.screen-schedule{padding-top:22px}.cross-circle-board button{font-size:28px}}
@media(prefers-reduced-motion:reduce){.finder-demo *{animation:none!important}.finder-window{opacity:1;transform:none}.finder-pointer{display:none}}
.finder-back,.finder-view{display:flex;align-items:center;gap:8px}.finder-back svg,.finder-view svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.finder-sidebar span{display:flex;align-items:center;gap:4px}.finder-sidebar svg{width:8px;height:8px;flex:none;fill:none;stroke:#6884a2;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:520px){.finder-back,.finder-view{gap:4px}.finder-back svg,.finder-view svg{width:7px;height:7px}.finder-sidebar span{gap:2px}.finder-sidebar svg{width:5px;height:5px}}

/* Finder's selected document stays connected to its actual-looking location. */
.finder-content{height:calc(100% - 60px)}
.finder-path{position:absolute;bottom:15px;left:0;right:0;display:flex;align-items:center;gap:5px;height:16px;padding:0 8px;background:#f8f8f9;border-top:1px solid #e1e2e5;color:#5a616b;white-space:nowrap;font-size:5.5px}
.finder-path i{font:normal 9px system-ui;color:#a0a5ab}.finder-path b{font-weight:400;color:#3e4651}.finder-path-home{font-size:9px;color:#5684b2}
.finder-document{position:relative;padding-top:7px;gap:2px;clip-path:polygon(0 0,72% 0,100% 20%,100% 100%,0 100%)}
.finder-document::after{content:'';position:absolute;right:0;top:0;width:6px;height:6px;background:#d8e0e7;border-left:1px solid #adb9c3;border-bottom:1px solid #adb9c3}
.finder-document small{font:600 2.2px/1.3 system-ui;color:#546471;letter-spacing:.1px;margin-bottom:1px}
.desktop-tagline{color:#1d3439!important;text-shadow:0 1px #fff,0 0 12px #ffffffe0!important}
.desktop-introduction .release-caption{color:#263e45!important;text-shadow:0 1px #fff,0 0 7px #fff!important;font-weight:500}
@media(max-width:520px){.finder-content{height:calc(100% - 42px)}.finder-path{bottom:10px;height:12px;font-size:4px;gap:3px;padding:0 5px}.finder-path i,.finder-path-home{font-size:7px}.finder-document small{font-size:1.7px}.finder-document{gap:1.5px;padding-top:4px}.finder-document::after{width:4px;height:4px}}