/* Desktop photo: Thomas Marban, Big Sur — https://unsplash.com/photos/JSv9uK-9ZUg
   Used under the Unsplash License: https://unsplash.com/license (not Apple artwork). */
/* Independent replica of the current expanded Settings overview.
   Logical desktop: 1600×900 with symmetric 50px gutter; the 24px menu bar is sized independently of world scaling.
   Main 800×600, icon rail 56×600, unified window list adds 180px outward, gaps 6. */
.sp-opening { position:relative; overflow:hidden; width:100%; container-type:inline-size; aspect-ratio:16 / 9; isolation:isolate; border:0; border-radius:10px; box-shadow:inset 0 0 0 1px #ffffff55,0 3px 10px #15233214; background:linear-gradient(#edf2f51f,#edf2f51f),url("./assets/opening/desktop-big-sur-coast.jpg") center / cover no-repeat #547786; color:#303031; font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif; }
.sp-menubar { position:absolute; left:0; top:0; z-index:40; width:100%; height:24px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; color:#28292c; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; text-shadow:0 1px 2px rgba(255,255,255,.75); font-size:12px; font-weight:400; line-height:1; white-space:nowrap; user-select:none; pointer-events:none; }
.sp-menu-left,.sp-menu-right { display:flex; align-items:center; }
.sp-menu-left { gap:14px; }
.sp-menu-right { gap:12px; }
.sp-menubar svg { display:block; flex:0 0 14px; width:14px; height:14px; }
.sp-menu-app { font-weight:600; }
.sp-menu-clock { font-variant-numeric:tabular-nums; }
@container (max-width:600px){.sp-menubar{height:22px;padding:0 8px;font-size:11px}.sp-menu-left{gap:8px}.sp-menu-left>span:not(.sp-menu-apple){display:none}.sp-menu-right{gap:8px}}
.sp-opening *, .sp-opening *::before, .sp-opening *::after { box-sizing:border-box; }
.sp-opening button { appearance:none; font:inherit; color:inherit; border:0; padding:0; cursor:pointer; }
.sp-opening img { display:block; object-fit:contain; user-select:none; pointer-events:none; }
.sp-world { position:absolute; inset:0 auto auto 0; width:1500px; height:900px; transform-origin:0 0;  }
.sp-world button:focus-visible { outline:2px solid #008aff; outline-offset:2px; }
.sp-glass { background:rgba(163,165,167,.35); border:1px solid rgba(255,255,255,.37); box-shadow:inset 0 1px .4px #ffffff66,inset 0 -1px .5px #00000010; backdrop-filter:blur(18px) saturate(1.05); }
.sp-window { position:absolute; overflow:hidden; border-radius:10px; background:#fff; box-shadow:0 14px 24px #00000028; }
.sp-window-bar { height:28px; display:flex; align-items:center; gap:8px; padding:0 14px; background:#f7f7f9; border-bottom:1px solid #e5e5e8; color:#8a8a8e; font-size:12px; }
.sp-lamp { flex:0 0 12px; width:12px; height:12px; border-radius:50%; background:#ff6057; }
.sp-lamp:nth-child(2){background:#ffbd2e}.sp-lamp:nth-child(3){background:#28c840}
.sp-window-bar > span:last-child { margin-left:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-window-bar .sp-chrome-app { width:18px; height:18px; margin-left:5px; }
.sp-main { left:var(--main-x); top:var(--main-y); width:var(--main-w); height:var(--main-h); z-index:10; }
.sp-main-content { padding:24px 28px; }
.sp-scene-kicker { display:flex; align-items:center; gap:7px; height:28px; font-size:20px; font-weight:600; margin:0; }
.sp-scene-kicker img { width:23px; height:23px; }
.sp-main h2 { height:56px; display:flex; align-items:center; margin:0; font-size:30px; font-family:ui-rounded,"SF Pro Rounded",-apple-system,sans-serif; font-weight:600; letter-spacing:0; }
.sp-main .sp-lead { display:flex; align-items:center; height:54px; font-size:24px; font-weight:400; color:#666; margin:0; line-height:1.35; }
.sp-main .sp-hint { display:flex; align-items:center; gap:8px; padding-top:6px; min-height:34px; font-size:20px; line-height:1.3; color:#777; font-weight:500; margin:0; }
.sp-hint::before { content:""; flex:0 0 6px; height:6px; border-radius:50%; background:#ff4da0; }
.sp-overview-hints { padding-top:10px; color:#888; font-size:20px; line-height:1.4; }.sp-overview-hints p{margin:0 0 7px}
.sp-quick-entry { position:absolute; left:108px; width:584px; bottom:22px; display:flex; align-items:center; gap:12px; height:54px; border:1px solid #d7d7d7!important; border-radius:14px; background:#f2f2f2; padding:0 16px!important; text-align:left; }
.sp-quick-entry img { width:27px; height:27px; }.sp-quick-entry strong { font-size:24px; font-weight:600; }.sp-quick-entry small { font-size:18px; color:#999; margin-left:auto; }.sp-quick-entry .sp-next { width:12px; height:17px; }
/* One continuous Dock container. System-only furniture fades during the move. */
.sp-dock { position:absolute; overflow:hidden; left:var(--rail-x); top:var(--rail-y); width:var(--rail-w); height:var(--rail-h); border-radius:14px; z-index:12; transition:left .8s cubic-bezier(.25,.65,.2,1),top 1s cubic-bezier(.25,.65,.2,1),width .8s cubic-bezier(.25,.65,.2,1),height .8s cubic-bezier(.25,.65,.2,1),border-radius .7s,background .7s,opacity .4s; }
.sp-tool { display:flex; align-items:center; justify-content:center; width:36px; height:30px; border-radius:7px; background:#8888881b; border:1px solid #88888814!important; }
.sp-tool img { width:18px; height:18px; }.sp-tool[data-selected=true] { background:#0a84ff22; border-color:#0a84ff88!important; }.sp-tool:hover{background:#8b8b8b33}
.sp-rail-icons { position:absolute; top:0; right:0; width:var(--rail-w); height:100%; transition:width .8s cubic-bezier(.25,.65,.2,1); }
.sp-world:is([data-dock=bottom],[data-dock=travel]) .sp-rail-icons { width:100%; }
.sp-rail-tools { position:absolute; top:6px; left:10px; display:grid; gap:6px; transition:opacity .3s ease .55s; }
.sp-rail-tools::after { content:""; height:1px; margin:2px 0; background:#7c7c7c22; }
.sp-rail-app { position:absolute; left:8px; top:calc(170px + var(--app-index)*44px); display:flex; justify-content:center; align-items:center; width:40px; height:40px; border-radius:8px; border:1px solid #8585852d!important; background:#a6a6a625; transition:left 1.05s cubic-bezier(.22,.7,.25,1),top 1.05s cubic-bezier(.22,.7,.25,1),width 1.05s,height 1.05s,background .5s; }
.sp-rail-app img{width:32px;height:32px;transition:width .9s,height .9s}.sp-rail-app[aria-pressed=true]{border-color:#1584ff88!important;box-shadow:0 0 0 2px #208cff18}
.sp-rail-footer { position:absolute; bottom:8px; left:10px; height:36px; transition:opacity .3s .7s; }
.sp-rail-window-list { position:absolute; left:62px; right:8px; top:258px; transition:opacity .3s .4s; }
.sp-rail-window-list button { width:100%; display:flex; gap:8px; align-items:center; height:30px; border:1px solid transparent; border-radius:5px; background:transparent; text-align:left; padding:0 8px; font-size:12px; color:#888; white-space:nowrap; }
.sp-rail-window-list button small{font-size:10px;color:#888}.sp-rail-window-list button[aria-current=true]{background:#267aff33;border-color:#3996ff;color:#333}.sp-rail-window-list button+button{margin-top:5px}
.sp-dock-only { position:absolute; opacity:0; pointer-events:none; transition:opacity .2s,transform .25s; transform:scale(.7); }
.sp-system-app { left:calc(12px + var(--dock-index)*64px); top:6px; width:56px; height:68px; }.sp-dock-only img{width:56px;height:56px;filter:drop-shadow(0 3px 2px #0002)}
.sp-running-dot { position:absolute; width:4px; height:4px; background:#353941aa; border-radius:50%; bottom:1px; left:calc(50% - 2px); opacity:0; transition:opacity .2s; }
.sp-dock-separator { position:absolute; left:56px; top:8px; width:1px; height:calc(100% - 16px); background:#656a7322; box-shadow:1px 0 #ffffff44; opacity:0; transition:opacity .2s,left 1s cubic-bezier(.25,.65,.2,1),top 1s cubic-bezier(.25,.65,.2,1); }.sp-world[data-dock=bottom] .sp-dock-separator { opacity:1; left:658px; top:15px; height:55px; background:#656a733e; }.sp-dock-downloads{left:668px;top:7px}.sp-dock-trash{left:732px;top:7px}
.sp-world[data-dock=bottom] .sp-dock { left:350px; top:800px; width:800px; height:86px; border-radius:22px; background:#eff3fa55; border-color:#ffffffaa; box-shadow:0 12px 32px #25314438,inset 0 1px #ffffffcc,inset 0 -1px #626a8022; backdrop-filter:blur(26px) saturate(1.35); }
.sp-world[data-dock=bottom] .sp-rail-app { top:6px; left:calc(12px + var(--dock-index)*64px); width:56px; height:68px; align-items:flex-start; background:transparent; border-color:transparent!important; box-shadow:none; }
.sp-world[data-dock=bottom] .sp-rail-app img { width:56px; height:56px; filter:drop-shadow(0 3px 2px #0002); }
.sp-world[data-dock=bottom] .sp-dock-only { opacity:1; transform:none; }.sp-world[data-dock=bottom] .sp-running-dot{opacity:1}
.sp-world:is([data-dock=bottom],[data-dock=travel]) :is(.sp-rail-tools,.sp-rail-footer,.sp-rail-window-list){opacity:0;transition-delay:0s;pointer-events:none}
/* Narrow the surface before extending it, then unfold against the main window. */
.sp-world[data-dock=travel] .sp-dock{left:calc(var(--rail-x) - 30px);top:var(--rail-y);width:86px;height:600px;transition:left 1s cubic-bezier(.25,.65,.2,1),top 1s cubic-bezier(.25,.65,.2,1),width .35s ease-out,height .65s ease-in-out .25s,border-radius .7s,background .7s,opacity .4s}
.sp-world[data-dock=travel] .sp-dock-separator{left:calc(84.313725% - 16.5098px);transition:none}
.sp-world[data-dock=rail] .sp-dock-separator{transition-duration:.8s,.8s,.8s}
/* The Dock owns the only glass surface. Its right edge and icon column stay fixed. */
.sp-world[data-dock=rail] .sp-dock { transition-duration:.35s,1s,.35s,.8s,.7s,.7s,.4s; }
.sp-opening[data-phase="112"] .sp-dock { transition-duration:.8s,1s,.8s,.8s,.7s,.7s,.4s; }
.sp-world[data-dock=rail][data-group=open] .sp-dock { left:calc(var(--rail-x) - 180px); width:calc(var(--rail-w) + 180px); }
.sp-group { position:absolute; left:0; top:0; width:calc(100% - var(--rail-w)); height:100%; overflow:hidden; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s,visibility 0s .35s; }
.sp-world[data-dock=rail][data-group=open] .sp-group { opacity:1; visibility:visible; pointer-events:auto; transition-delay:.1s,0s; }
.sp-group-heading { display:flex; align-items:center; gap:9px; width:156px; margin:16px 12px; font-size:14px; font-weight:600; }
.sp-group-heading img { width:28px; height:28px; }.sp-group-heading small { display:block; margin-top:3px; font-size:11px; font-weight:400; opacity:.6; }
.sp-group .sp-rail-window-list { left:8px; right:auto; width:164px; top:258px; transition:none; }
.sp-world[data-window-demo=true] .sp-quick-entry { opacity:0; visibility:hidden; pointer-events:none; }
.sp-main-content .sp-document-heading { margin:22px 0 16px; font-size:22px; font-weight:600; }
.sp-world[data-active=group] .sp-back-window::after { opacity:1; }
.sp-tabs { position:absolute; left:var(--top-x); top:var(--top-y); width:var(--top-w); height:var(--top-h); border-radius:14px 14px 0 0; z-index:12; display:flex; align-items:center; padding:4px 6px; gap:6px; transition:opacity .45s,transform .45s; }
.sp-tabs .sp-tool{width:36px;flex:0 0 36px}.sp-tabs .sp-tab{height:30px; min-width:0; flex:1; display:flex; align-items:center; gap:7px; padding:0 12px; background:#92929218; border:1px solid #77777725; border-radius:15px; font-size:12px; font-weight:550; white-space:nowrap; }
.sp-tab img{width:16px;height:16px}.sp-tab span{overflow:hidden;text-overflow:ellipsis}.sp-tab[aria-current=true]{background:#77777720;border-color:#77777740}.sp-tabs .sp-tab-round { order:10; width:26px; height:26px; flex:0 0 26px; border-radius:50%;background:#aaaaaa1a;border:1px solid #77777725;display:grid;place-items:center; }.sp-tab-round img{width:13px;height:13px}
.sp-bottom { top:calc(var(--main-y) + var(--main-h) + 2px); border-radius:0 0 14px 14px; }
.sp-note { position:absolute; left:var(--note-x); top:var(--note-y); width:var(--note-w); height:var(--note-h); border-radius:0 14px 14px 0; z-index:12; transition:opacity .55s,clip-path .7s cubic-bezier(.2,.7,.2,1),transform .7s; overflow:hidden; }
.sp-note-toolbar { position:absolute;left:9px;top:14px;right:7px;display:flex;gap:5px;align-items:center;height:26px; }.sp-note-toolbar .sp-tool{width:25px;height:25px;flex:0 0 25px}.sp-note-toolbar .sp-tool:first-child{width:31px;flex-basis:31px}.sp-note-toolbar .sp-tool img{width:16px;height:16px}.sp-note-search {flex:1;height:25px;background:#77777722;border-radius:6px;display:flex;align-items:center;padding-left:8px;min-width:30px}.sp-note-search img{width:13px;height:13px}
.sp-notebook { position:absolute; left:13px; top:54px; width:172px; height:25px; border-radius:10px; display:flex;align-items:center;gap:7px;padding:0 8px;background:#99999933;font-size:10px;font-weight:600;color:#666 }.sp-notebook img{width:11px;height:11px}.sp-notebook .sp-next{margin-left:auto;width:7px}
.sp-note-list {position:absolute;left:13px;top:81px;right:9px;bottom:147px;border-radius:12px;background:#8585851f;padding:12px 9px;display:flex;flex-direction:column;gap:16px;align-items:flex-end}
.sp-note-bubble{max-width:100%;font-size:10px;line-height:1.4;background:#72727220;border-radius:6px;padding:7px 9px;color:#555}
.sp-note-composer { position:absolute;left:13px;bottom:31px;right:9px;height:116px;font-size:10px;line-height:1.5;padding:6px 10px;background:#a2a2a21b; }
.sp-compose-toolbar {position:absolute;left:3px;right:3px;bottom:8px;display:flex;align-items:center;gap:6px}.sp-compose-toolbar .sp-tool{width:22px;height:22px}.sp-compose-toolbar .sp-tool img{width:12px;height:12px}.sp-compose-spacer{flex:1}.sp-send{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#008cff}.sp-send img{width:14px;height:14px}.sp-collapse{position:absolute;left:11px;top:calc(50% - 14px);width:15px;height:29px;border-radius:7px;background:#fafafa;display:grid;place-items:center;z-index:2}.sp-collapse img{width:7px;height:11px}.sp-pen{position:absolute;right:14px;bottom:9px;width:15px;height:15px;opacity:.65}
.sp-feature {position:absolute;left:var(--main-x);top:calc(var(--main-y) + 40px);width:590px;height:360px;z-index:20;border-radius:0 14px 14px 0;padding:16px;background:#e4e5e7ef;box-shadow:0 8px 28px #0002;backdrop-filter:blur(24px);font-size:14px}.sp-feature[hidden]{display:none}.sp-feature-heading{display:flex;align-items:center;gap:9px;font-weight:600;margin-bottom:14px}.sp-feature-heading img{width:20px;height:20px}.sp-feature-heading button{margin-left:auto;background:transparent}.sp-feature-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:#aaa3;height:280px;border-radius:8px;overflow:hidden}.sp-feature-column{padding:10px;background:#f3f3f4d9}.sp-feature-column button{display:flex;align-items:center;gap:8px;background:transparent;width:100%;padding:8px;border-radius:6px;text-align:left;font-size:13px}.sp-feature-column button img{width:24px;height:24px}.sp-feature-column button[aria-selected=true]{background:#208bff2b}.sp-feature h3{font-size:17px;margin:9px 0}.sp-feature p{font-size:14px;line-height:1.5}.sp-feature-browser{width:350px}.sp-feature-browser .sp-feature-grid{grid-template-columns:1fr}.sp-feature-quick{left:calc(var(--main-x) + 175px);top:calc(var(--main-y) + 125px);width:450px;height:350px;border-radius:14px}.sp-feature-quick .sp-feature-grid{grid-template-columns:1fr}
/* The main window leads; only the source being gathered briefly comes forward. */
.sp-back-window{z-index:5;transition:opacity .35s,transform .35s}.sp-back-window::after{content:"";position:absolute;inset:0;background:#e4e7ecb8;opacity:0;pointer-events:none;transition:opacity .35s}
.sp-source-browser{z-index:6}.sp-source-note{z-index:7}.sp-source-files{z-index:8}
.sp-world:is([data-files=approach],[data-files=collapse]) .sp-source-files,.sp-world:is([data-note=approach],[data-note=collapse]) .sp-source-note{z-index:11}
.sp-source-files,.sp-source-note{transform-origin:center center;transition:opacity .15s .45s,transform .6s cubic-bezier(.25,.65,.2,1)}
.sp-world:is([data-files=collapse],[data-files=collapsed],[data-files=moving],[data-files=landed],[data-files=open],[data-files=docked]) .sp-source-files,.sp-world:is([data-note=collapse],[data-note=moving],[data-note=docked]) .sp-source-note{opacity:0;transform:scale(.145);pointer-events:none}
.sp-world:is([data-files=collapse],[data-note=collapse]) :is(.sp-source-files,.sp-source-note) :is(.sp-back-content,.sp-window-bar>.sp-chrome-app,.sp-window-bar>span,.sp-lamp){opacity:0;transition:opacity .18s}
.sp-back-content{padding:20px 23px;color:#666;font-size:16px;line-height:1.65}.sp-back-content h3{font-size:22px;font-weight:600;margin:0 0 12px;color:#333}.sp-back-content p{margin:8px 0}.sp-back-content img{width:30px;height:30px}
.sp-source-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-radius:5px;transition:background .2s}.sp-source-row span{transition:opacity .25s}
.sp-address{background:#7777770d;border-radius:6px;padding:5px 9px;margin-bottom:12px;color:#999;font-size:13px}.sp-terminal{font:15px/1.8 ui-monospace,monospace;color:#44654f}.sp-event{border-left:3px solid #ff9f0a;padding:9px;background:#ff9f0a12;margin-top:8px;border-radius:4px}.sp-back-message{padding:9px;background:#34c75919;border-radius:9px;margin:9px 0}
.sp-main-content,.sp-quick-entry{transition:opacity .35s}
.sp-world[data-active=files] .sp-back-window:not(.sp-source-files)::after,.sp-world[data-active=browser] .sp-back-window:not(.sp-source-browser)::after,.sp-world[data-active=note] .sp-back-window:not(.sp-source-note)::after{opacity:1}
.sp-world:is([data-files=select],[data-files=fold],[data-files=moving],[data-files=landed]) [data-sp-file]{background:#0a84ff20}
.sp-world:is([data-files=fold],[data-files=moving],[data-files=landed]) [data-sp-file]>:is(img,span){opacity:0}
.sp-world:is([data-files=open],[data-files=docked]) .sp-source-files,.sp-world[data-browser=docked] .sp-source-browser,.sp-world[data-note=docked] .sp-source-note,.sp-world[data-windows=docked] .sp-source-recent{opacity:0;pointer-events:none}
.sp-token{position:absolute;z-index:18;width:40px;height:40px;opacity:0;pointer-events:none;transform:translate(-50%,-50%);transition:left var(--flight,.9s) cubic-bezier(.32,.05,.2,1),top var(--flight,.9s) cubic-bezier(.32,.05,.2,1),opacity .18s,transform .2s}
.sp-token img{width:40px;height:40px;filter:drop-shadow(0 3px 3px #0002)}
.sp-token-files,.sp-token-note{width:56px;height:56px}
.sp-token-files{left:var(--file-from-x);top:var(--file-from-y);--flight:.7s}
.sp-token-files>.sp-file-stack,.sp-token-files>.sp-feature-token{display:none}
.sp-source-app-token{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .15s .45s}
.sp-source-app-token img{width:56px;height:56px}
.sp-file-stack{position:absolute;left:5px;top:5px;width:210px;height:84px}
.sp-file-stack>div{position:absolute;display:flex;align-items:center;gap:10px;height:30px;white-space:nowrap;font-size:16px;color:inherit}
.sp-file-stack>div:nth-child(2){top:42px}.sp-file-stack img{width:30px;height:30px}.sp-file-stack span{font-size:16px}
.sp-feature-token{position:absolute;inset:0;display:grid;place-items:center;background:#e1e3e6;border:1px solid #ffffffb0;border-radius:9px;box-shadow:0 3px 10px #0002;opacity:0;transform:scale(.7);transition:opacity .25s,transform .3s}
.sp-feature-token img{width:24px;height:24px}
.sp-world:is([data-files=collapse],[data-files=collapsed],[data-files=moving],[data-files=landed]) .sp-token-files{opacity:1}
.sp-world[data-files=collapse] .sp-source-app-token{opacity:1}
.sp-world:is([data-files=collapsed],[data-files=moving],[data-files=landed]) .sp-source-app-token{opacity:1;transition-delay:0s}
.sp-world:is([data-files=collapsed],[data-files=moving],[data-files=landed]) .sp-token-files,.sp-world:is([data-note=moving]) .sp-token-note{opacity:1;transition-delay:0s}
.sp-world:is([data-files=moving],[data-files=landed]) .sp-token-files{left:var(--file-to-x);top:var(--file-to-y)}
.sp-world[data-files=landed] .sp-token-files{transform:translate(-50%,-50%) scale(.92)}
.sp-world[data-note=collapse] .sp-token-note{opacity:1}
.sp-token-note img{opacity:0;transition:opacity .15s .45s}
.sp-world[data-note=collapse] .sp-token-note img{opacity:1}
.sp-world[data-note=moving] .sp-token-note{left:var(--note-to-x);top:var(--note-to-y);opacity:1;transition-delay:0s}
.sp-world[data-note=moving] .sp-token-note img{opacity:1;transition-delay:0s}
.sp-world[data-note=docked] .sp-token-note{opacity:0}
@keyframes sp-file-fold{0%{transform:none;opacity:1}70%{transform:translate(4px,4px) rotate(-8deg);opacity:1}100%{transform:translate(4px,4px) scale(.8);opacity:0}}
@keyframes sp-file-fold-second{0%{transform:none;opacity:1}70%{transform:translate(11px,-33px) rotate(9deg);opacity:1}100%{transform:translate(4px,-38px) scale(.8);opacity:0}}
@keyframes sp-file-label{to{opacity:0;transform:translateX(-5px)}}
@keyframes sp-feature-form{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.sp-world:is([data-files=desk],[data-files=approach],[data-files=collapse],[data-files=collapsed],[data-files=moving]) .sp-rail-tools [data-sp-action=files],.sp-world:is([data-browser=desk],[data-browser=approach],[data-browser=assemble],[data-browser=moving]) .sp-rail-tools [data-sp-action=browser]{opacity:.25}
.sp-world:is([data-files=landed],[data-files=open]) .sp-rail-tools [data-sp-action=files],.sp-world[data-browser=docked][data-active=browser] .sp-rail-tools [data-sp-action=browser]{background:#0a84ff2b;border-color:#0a84ff99!important}
.sp-rail-tools .sp-tool{transition:opacity .25s,background .25s}
.sp-token-browser{left:var(--browser-from-x);top:var(--browser-from-y);--flight:.85s}
.sp-browser-icons{position:absolute;inset:0}.sp-browser-icons img{position:absolute;left:7px;top:7px;width:26px;height:26px}
.sp-world[data-browser=assemble] .sp-token-browser{opacity:1}
.sp-world[data-browser=assemble] .sp-browser-icons img{animation:sp-browser-gather .48s cubic-bezier(.25,.65,.2,1) both;animation-delay:calc(var(--seed-index)*.06s)}
@keyframes sp-browser-gather{from{transform:translate(var(--seed-x),var(--seed-y)) scale(.7)}to{transform:translate(calc((var(--seed-index) - 1)*20px),0)}}
.sp-world:is([data-browser=assemble],[data-browser=moving]) .sp-source-browser .sp-chrome-app{opacity:0}
.sp-world[data-browser=moving] .sp-token-browser{opacity:1}.sp-world[data-browser=moving] .sp-browser-icons{animation:sp-file-label .25s both}.sp-world[data-browser=moving] .sp-browser-icons img{transform:translate(calc((var(--seed-index) - 1)*20px),0)}
.sp-world[data-browser=moving] .sp-token-browser .sp-feature-token{animation:sp-feature-form .3s both}
.sp-world:is([data-browser=moving],[data-browser=docked]) .sp-token-browser{left:var(--browser-to-x);top:var(--browser-to-y)}
.sp-token-note{left:var(--note-from-x);top:var(--note-from-y);--flight:.7s}.sp-token-note img{width:56px;height:56px}
.sp-world:not([data-note=docked]) .sp-note{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-8px)}
.sp-world:not([data-windows=docked]) .sp-top{opacity:0;transform:translateY(6px);pointer-events:none}.sp-world[data-windows=gather] .sp-top{opacity:1;transform:none}
.sp-mru-card{position:absolute;z-index:17;display:flex;align-items:center;gap:7px;width:132px;height:28px;padding:4px 8px;border-radius:14px;background:#e7e7e9ee;border:1px solid #ffffff88;font-size:12px;opacity:0;left:var(--mru-x);top:var(--mru-y);transform:translate(-16px,-50%);pointer-events:none}
.sp-mru-card img{width:16px;height:16px;flex-shrink:0}.sp-mru-card span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-world[data-windows=gather] .sp-mru-card{animation:sp-mru-flight 1.1s cubic-bezier(.25,.65,.2,1) both;animation-delay:calc(var(--mru-index)*.25s)}
.sp-world[data-windows=gather] .sp-source-recent{animation:sp-source-retire .3s ease both;animation-delay:calc(1s + var(--mru-index)*.25s)}
.sp-world[data-windows=gather] .sp-source-recent .sp-window-bar :is(.sp-chrome-app,span){animation:sp-source-retire .1s both;animation-delay:calc(var(--mru-index)*.25s)}
.sp-world[data-windows=gather] .sp-top .sp-tab{animation:sp-tab-arrive .2s both;animation-delay:calc(1s + var(--mru-index)*.25s)}
@keyframes sp-mru-flight{0%{opacity:0}8%{opacity:1}48%{left:var(--mru-x);top:calc(var(--top-y) + 20px);transform:translate(-16px,-50%);opacity:1}90%{left:var(--mru-to);top:calc(var(--top-y) + 20px);transform:translate(-50%,-50%);opacity:1}100%{left:var(--mru-to);top:calc(var(--top-y) + 20px);transform:translate(-50%,-50%);opacity:0}}
@keyframes sp-source-retire{from{opacity:1}to{opacity:0}}
@keyframes sp-tab-arrive{from{opacity:0}to{opacity:1}}
.sp-pointer{position:absolute;z-index:30;left:1200px;top:714px;width:26px;height:33px;opacity:0;pointer-events:none;transition:left .9s cubic-bezier(.32,.05,.2,1),top .9s cubic-bezier(.32,.05,.2,1),opacity .2s;filter:drop-shadow(0 2px 1px #0003)}
.sp-opening:is([data-phase="110"],[data-phase="120"],[data-phase="126"],[data-phase="130"],[data-phase="140"],[data-phase="150"],[data-phase="20"]) .sp-pointer{transition-duration:.4s,.4s,.25s}
.sp-opening:is([data-phase="113"],[data-phase="115"],[data-phase="117"],[data-phase="119"]) .sp-pointer{transition-duration:.35s,.35s,.2s}
.sp-opening:is([data-phase="114"],[data-phase="116"],[data-phase="118"]) .sp-pointer{animation:sp-window-click .18s ease-out;transform-origin:0 0}
@keyframes sp-window-click{0%,100%{transform:scale(1)}50%{transform:scale(.84)}}
.sp-opening[data-phase="111"] .sp-pointer{transition:left 1s cubic-bezier(.25,.65,.2,1),top 1s cubic-bezier(.25,.65,.2,1),opacity .2s}.sp-opening[data-phase="112"] .sp-pointer{transition:left .8s cubic-bezier(.25,.65,.2,1),top .8s cubic-bezier(.25,.65,.2,1),opacity .2s}
.sp-dock>.sp-pointer{left:28px!important;top:50%!important;transition:left 1s cubic-bezier(.25,.65,.2,1),opacity .2s}.sp-world[data-dock=bottom] .sp-dock>.sp-pointer{left:658px!important}
.sp-world[data-dock=travel] .sp-dock>.sp-pointer{left:calc(84.313725% - 16.5098px)!important;transition:none}
.sp-opening[data-phase="121"] .sp-pointer,.sp-opening[data-phase="141"] .sp-pointer{transition:left .7s cubic-bezier(.32,.05,.2,1),top .7s cubic-bezier(.32,.05,.2,1),opacity .2s}.sp-opening[data-phase="131"] .sp-pointer{transition-duration:.85s,.85s,.2s}
.sp-opening[data-phase="125"] .sp-feature,.sp-opening[data-phase="132"] .sp-feature{animation:sp-panel-reveal .25s both;transform-origin:left top}
@keyframes sp-panel-reveal{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.sp-opening:not([data-reference=true]) .sp-bottom{visibility:hidden}.sp-opening[data-preview="24"] .sp-bottom{visibility:visible}
.sp-opening[data-reference=true] :is(.sp-back-window,.sp-token,.sp-mru-card,.sp-pointer,.sp-veil){display:none}
/* The main window stays visible while only the surrounding furniture resets. */
.sp-opening[data-phase="198"] :is(.sp-dock,.sp-top,.sp-note,.sp-back-window,.sp-token,.sp-mru-card,.sp-pointer){opacity:0!important;transition:opacity .4s!important}
.sp-opening:is([data-reset=true],[data-opening-seek=true],[data-opening-still=true]) *{transition:none!important;animation:none!important}
.sp-opening[data-reset=true] :is(.sp-dock,.sp-back-window){animation:sp-reset-reveal .5s ease-out both!important}
.sp-opening:is([data-opening-seek=true],[data-opening-still=true]) :is(.sp-dock,.sp-back-window){animation:none!important}
@keyframes sp-reset-reveal{from{opacity:0}to{opacity:1}}
.sp-veil{display:none}
.sp-main-content>h3{font-size:26px;margin:0 0 16px}.sp-main-content>p:not([class]){font-size:20px;line-height:1.6;margin:8px 0}
.ws-canvas.sp-opening { aspect-ratio:16 / 9; border:0; border-radius:10px; box-shadow:inset 0 0 0 1px #ffffff55,0 3px 10px #15233214; background:linear-gradient(#edf2f51f,#edf2f51f),url("./assets/opening/desktop-big-sur-coast.jpg") center / cover no-repeat #547786; }
@media(prefers-color-scheme:dark){
.sp-opening,.ws-canvas.sp-opening{background:linear-gradient(#101b303d,#101b303d),url("./assets/opening/desktop-big-sur-coast.jpg") center / cover no-repeat #233c4b;color:#e7e7e7}.sp-glass{background:#22222266;border-color:#eeeeee50;box-shadow:inset 0 1px .5px #ffffff40}.sp-window{background:#202020}.sp-window-bar{background:#202020;border-color:#282828;color:#999}.sp-main .sp-lead,.sp-main .sp-hint{color:#aaa}.sp-quick-entry{background:#323232;border-color:#565656!important}.sp-rail-window-list button[aria-current=true]{color:#eee}.sp-note-bubble{color:#bbb;background:#eeeeee18}.sp-notebook{color:#ccc;background:#bbbbbb25}.sp-note-list{background:#eeeeee18}.sp-note-composer{background:#2223}.sp-collapse{background:#101010}.sp-feature{background:#353638ed}.sp-feature-column{background:#292a2aee}.sp-back-content,.sp-back-content h3{color:#ddd}.sp-token-note span{background:#333e;color:#eee}.sp-feature-token{background:#414345;border-color:#ffffff55}.sp-feature-token img{filter:brightness(0) invert(1);opacity:.8}.sp-mru-card{background:#414141ee;border-color:#fff5}.sp-veil{background:#21242aa8}.sp-back-window::after{background:#222731bf}.sp-world[data-dock=bottom] .sp-dock{background:#3c414969;border-color:#ffffff55}.sp-running-dot{background:#f4f6ffb3}
.sp-menubar{color:#f1f2f4;text-shadow:0 1px 2px rgba(0,0,0,.72)}
.sp-tool:not([data-selected=true]) img,.sp-notebook img,.sp-tab-round img,.sp-quick-entry img,.sp-pen,.sp-collapse img,.sp-note-search img,.sp-feature-heading>img:not([src*="-real-"]),.sp-feature-column img:is([src$="/folder.png"],[src$="/document.png"],[src$="/browser.png"]){filter:brightness(0) invert(1);opacity:.7}.sp-tool img[src$="keyboard-active.png"] {filter:none;opacity:1}.sp-pointer{filter:drop-shadow(0 1px 1px #fff8)}
}
@media(prefers-reduced-motion:reduce){.sp-opening *{transition:none!important;animation:none!important}.sp-opening[data-reset=true] :is(.sp-dock,.sp-back-window){animation:none!important}}

/* Feature-menu clips use the same cursor and surfaces as the opening story. */
.sp-opening:is([data-phase="308"],[data-phase="309"],[data-phase="319"],[data-phase="330"],[data-phase="340"],[data-phase="348"],[data-phase="349"]) .sp-pointer{transition-duration:.35s,.35s,.2s}
.sp-opening:is([data-phase="310"],[data-phase="311"],[data-phase="320"],[data-phase="331"],[data-phase="350"],[data-phase="351"]) .sp-pointer{animation:sp-window-click .18s ease-out;transform-origin:0 0}

/* Retract toward the current window edges without moving or scaling the window. */
.sp-world:is([data-recall=ready],[data-recall=hidden],[data-recall=rail]) :is(.sp-dock,.sp-top,.sp-note){clip-path:inset(0);transition:clip-path .38s cubic-bezier(.2,.7,.2,1),transform .38s cubic-bezier(.2,.7,.2,1),opacity .28s;}
.sp-world[data-recall=hidden] .sp-dock{clip-path:inset(0 0 0 100%);transform:translateX(6px);opacity:0;pointer-events:none;}
.sp-world:is([data-recall=hidden],[data-recall=rail]) .sp-top{clip-path:inset(100% 0 0 0);transform:translateY(2px);opacity:0;pointer-events:none;}
.sp-world:is([data-recall=hidden],[data-recall=rail]) .sp-note{clip-path:inset(0 100% 0 0);transform:translateX(-6px);opacity:0;pointer-events:none;}
.sp-opening:is([data-phase="160"],[data-phase="161"],[data-phase="162"],[data-phase="163"],[data-phase="164"],[data-phase="165"],[data-phase="166"]) .sp-pointer{transition-duration:.45s,.45s,.2s;}

/* Detailed feature illustrations use the native window bounds and existing icon assets. */
.sp-operation { position:absolute; left:var(--main-x); top:var(--main-y); z-index:24; font-size:14px; color:#303031; }
.sp-operation[hidden],.sp-operation [hidden],.sp-demo-disclosure[hidden] { display:none!important; }
.sp-world[data-detail] .sp-feature { display:none; }
.sp-demo-disclosure { position:absolute; right:50px; bottom:18px; z-index:25; font-size:13px; color:white; text-shadow:0 1px 3px #0009; }
.sp-op-heading { display:flex; align-items:center; gap:8px; height:32px; margin-bottom:10px; }
.sp-op-heading>img { width:20px; height:20px; }.sp-op-heading strong{font-weight:600;font-size:16px}
.sp-op-heading button { background:transparent; min-width:24px; height:24px; font-size:18px; }.sp-op-spacer{flex:1}
.sp-op-row { display:flex; gap:8px; align-items:center; width:100%; min-height:42px; padding:8px!important; background:transparent; border-radius:6px; text-align:left; }
.sp-op-row>img { width:24px; height:24px; flex:0 0 24px; }.sp-op-row>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.sp-op-row[aria-selected=true] { background:#208bff2b; box-shadow:inset 0 0 0 1px #1584ff25; }
.sp-op-files { top:calc(var(--main-y) + 40px); width:620px; height:460px; padding:14px; border-radius:0 14px 14px 0; background:#e4e5e7ef; box-shadow:0 8px 28px #0002; backdrop-filter:blur(24px); }
.sp-file-locations { display:flex; align-items:center; gap:7px; height:32px; padding:0 6px; margin-bottom:10px; font-size:12px; color:#62656c; }.sp-file-locations img{width:18px;height:18px}.sp-file-locations img:nth-of-type(2){margin-left:15px}.sp-file-locations small{font-size:11px}
.sp-file-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); height:346px; border-radius:9px; background:#b7b8ba55; overflow:hidden; gap:1px; }
.sp-file-column { padding:9px; background:#f3f3f4d9; }.sp-op-files[data-step="500"] .sp-file-current{visibility:hidden}
.sp-file-context { position:absolute; left:370px; top:50px; width:210px; padding:6px; border-radius:9px; border:1px solid #b6b8bd88; background:#f6f6f7f5; box-shadow:0 8px 24px #0003; z-index:3; backdrop-filter:blur(15px); }
.sp-file-context button{display:block;width:100%;padding:7px 10px!important;text-align:left;background:transparent;border-radius:4px;font-size:13px}.sp-file-context hr{border:0;border-top:1px solid #c3c5ca;margin:3px 7px}.sp-op-files[data-step="505"] [data-op=rename]{color:#fff;background:#087cff}
.sp-file-preview { position:absolute; inset:0; border-radius:12px; overflow:hidden; z-index:4; background:#d9dce1; box-shadow:0 12px 28px #0003; }
.sp-file-preview header{height:35px;padding:0 13px;display:flex;align-items:center;gap:12px;background:#eceef1;font-size:13px}.sp-file-preview header button{background:transparent;font-size:18px}.sp-file-preview header small{margin-left:auto;color:#858995}
.sp-file-preview article{width:320px;height:392px;margin:15px auto 0;padding:30px;background:white;box-shadow:0 3px 10px #0002;color:#313a48}.sp-file-preview article small{font-size:10px;letter-spacing:2px;color:#737e8f}.sp-file-preview h2{font-size:25px;margin:16px 0}.sp-file-preview h3{font-size:15px;margin-top:25px}.sp-file-preview p{font-size:13px;line-height:1.65}.sp-pdf-rule{height:4px;width:38px;background:#4c79ec;margin-bottom:18px}.sp-pdf-lines{height:62px;margin-top:22px;background:repeating-linear-gradient(transparent 0 13px,#dbe0e7 13px 14px,transparent 14px 20px)}
.sp-rename-dialog { position:absolute; left:154px; top:77px; width:312px; padding:22px; z-index:5; text-align:center; background:#f5f5f7fa; border-radius:13px; border:1px solid #ffffffa8; box-shadow:0 15px 48px #0004; }
.sp-rename-dialog>img{width:42px;height:42px;margin:0 auto}.sp-rename-dialog h3{margin:10px 0 7px;font-size:17px}.sp-rename-dialog p{font-size:12px;color:#656973;margin:7px 0 15px}.sp-rename-field{height:30px;line-height:28px;font-size:13px;text-align:left;padding:0 7px;border:1px solid #1584ff;border-radius:5px;box-shadow:0 0 0 3px #208bff33;background:white;white-space:nowrap;overflow:hidden}.sp-op-files[data-step="507"] .sp-rename-field::after{content:"";display:inline-block;height:14px;border-right:1px solid currentColor;vertical-align:middle}
.sp-rename-dialog footer{display:flex;justify-content:flex-end;gap:8px;margin-top:17px}.sp-rename-dialog footer button{padding:5px 15px!important;border-radius:5px;background:#fff;box-shadow:0 1px 3px #0002;font-size:12px}.sp-rename-dialog footer button:last-child{background:#007aff;color:#fff}
.sp-file-ghost { position:absolute; z-index:6; display:flex; align-items:center; gap:7px; white-space:nowrap; padding:4px 7px; border-radius:5px; font-size:12px; background:#ebf2ffed; border:1px solid #3c93ed88; box-shadow:0 4px 10px #0002; pointer-events:none; transition:left .65s cubic-bezier(.25,.7,.2,1),top .65s cubic-bezier(.25,.7,.2,1); }.sp-file-ghost img{width:25px;height:25px}.sp-op-files:is([data-step="511"],[data-step="512"]) [data-op=destination]{background:#208bff3b;box-shadow:inset 0 0 0 2px #1584ff88}
.sp-op-browser { width:800px; height:600px; display:flex; border-radius:10px; box-shadow:0 14px 28px #0003; transition:width .45s ease,opacity .3s; }
.sp-op-browser[data-page=false]{width:300px}.sp-browser-list{flex:0 0 300px;width:300px;height:100%;padding:14px;border-radius:10px 0 0 10px;overflow:hidden}.sp-op-browser[data-page=false] .sp-browser-list{border-radius:10px}
.sp-browser-nav{height:25px;display:flex;align-items:center;gap:5px;margin-bottom:7px}.sp-browser-nav button{width:22px;height:22px;background:transparent;font-size:21px;color:#606670}.sp-browser-nav button img{width:14px;height:14px;margin:auto}.sp-browser-nav small{font-size:9px;color:#087cff;white-space:nowrap}
.sp-op-browser[data-page=false] .sp-browser-nav{visibility:hidden}.sp-browser-address{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:7px;background:#7777771f;font-size:12px;color:#606775;border:1px solid #8a8a8a20;overflow:hidden;white-space:nowrap}.sp-browser-address>img{width:15px;height:15px}.sp-op-browser:is([data-step="521"],[data-step="522"]) .sp-browser-address{background:#f5f7fc;border-color:#1584ff;box-shadow:0 0 0 2px #1584ff22}.sp-op-browser[data-step="522"] .sp-browser-address span::after{content:"";border-right:1px solid #333;margin-left:1px}
.sp-browser-loading{height:2px;margin-top:2px;visibility:hidden;background:#087cff;width:65%}.sp-op-browser[data-loading=true] .sp-browser-loading{visibility:visible;animation:sp-web-load .65s ease-out both}
.sp-browser-sources{height:39px;display:flex;align-items:center;gap:13px;margin-top:10px}.sp-browser-sources img{width:20px;height:20px}.sp-browser-source-active{padding:5px 12px;border-radius:6px;background:#fff9;font-size:12px}
.sp-browser-group{margin-top:15px;padding:12px;border-radius:11px;background:#d7d9de4a;box-shadow:inset 0 1px 0 #ffffff30}.sp-browser-group h3{margin:0 0 12px;font-size:13px;font-weight:600;color:#616773}
.sp-browser-current{display:flex;align-items:center;gap:9px;width:100%;padding:9px!important;border-radius:7px;background:#1789ff20;text-align:left;border-left:2px solid #1789ff!important;font-size:13px}.sp-browser-current img{width:22px;height:22px}.sp-browser-current span{display:flex;flex-direction:column;gap:5px}.sp-browser-current small{font-size:10px;color:#6c7585}.sp-op-browser[data-page=false] .sp-browser-current{visibility:hidden}
.sp-browser-pinned{display:flex;align-items:center;gap:10px;margin-top:13px;font-size:13px}.sp-browser-pinned img{width:22px;height:22px}
.sp-web-viewport{flex:1;min-width:0;height:600px;border-radius:0 10px 10px 0;overflow:hidden;background:#fff}.sp-op-browser[data-page=false] .sp-web-viewport{display:none}.sp-web-content{padding:34px 34px 60px;transition:transform .75s ease;min-height:770px;color:#343e50}.sp-web-brand{font-size:15px;font-weight:650;display:flex;align-items:center;justify-content:space-between;margin-bottom:44px}.sp-web-brand small{font-size:10px;font-weight:400;color:#8793a6}.sp-web-eyebrow{font-size:11px!important;color:#597cc9;letter-spacing:1px;font-weight:600}.sp-web-content h2{font-size:27px;line-height:1.3;margin:14px 0 22px}.sp-web-content h3{font-size:20px;line-height:1.3;margin:37px 0 14px}.sp-web-content p{font-size:17px;line-height:1.8;margin:12px 0}.sp-web-link{padding:10px 0!important;background:transparent;color:#087cff!important;font-size:15px;text-align:left}.sp-op-browser[data-loading=true] .sp-web-content{opacity:.15}.sp-op-browser{clip-path:inset(0);transition:width .45s ease,clip-path .4s cubic-bezier(.2,.7,.2,1),transform .4s,box-shadow .3s}.sp-op-browser[data-collapsed=true]{clip-path:inset(0 100% 0 0);transform:translateX(-8px);box-shadow:none;pointer-events:none}
.sp-demo-shortcut{position:absolute;bottom:35px;left:350px;padding:9px 20px;border-radius:9px;background:#edf0f6ed;border:1px solid #d4dae4;box-shadow:0 3px 12px #0002;font:600 22px -apple-system,BlinkMacSystemFont,sans-serif;color:#465570}
.sp-op-note{width:var(--note-w);height:var(--main-h);overflow:hidden;border-radius:0 14px 14px 0;background:#fff;box-shadow:0 14px 28px #0003;opacity:0;transform:translateX(calc(var(--note-x) - var(--main-x)));transition:width .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1),opacity .35s,border-radius .6s;pointer-events:none}.sp-op-note[data-expanded=true]{width:var(--main-w);transform:translateX(0);opacity:1;border-radius:10px}.sp-world[data-note-expanded=true] .sp-note{opacity:0;pointer-events:none}.sp-immersive-toolbar{position:absolute;top:13px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;color:#69727d;font-size:12px;opacity:0;transition:opacity .35s}.sp-immersive-toolbar>span{display:flex;align-items:center;gap:7px}.sp-immersive-toolbar img{width:18px;height:18px}.sp-immersive-toolbar button{display:flex;align-items:center;gap:4px;background:transparent;font-size:11px}.sp-op-note[data-chrome=true] .sp-immersive-toolbar{opacity:1}
.sp-immersive-body{padding:94px 90px;max-width:800px}.sp-immersive-body h2{font-size:29px;line-height:1.4;margin:0 0 32px;font-weight:650}.sp-immersive-body p{font-size:21px;line-height:1.85;margin:20px 0;color:#424b58}.sp-immersive-paragraph:empty,.sp-immersive-final:empty{display:none}.sp-op-note:is([data-step="546"],[data-step="547"]) .sp-immersive-paragraph::after{content:"";display:inline-block;border-right:1px solid #323a49;height:21px;vertical-align:text-bottom;margin-left:2px}
.sp-immersive-edge{position:absolute;left:1px;top:calc(50% - 18px);height:36px;width:15px;display:grid;place-items:center;border-radius:0 7px 7px 0;background:#f1f2f4;border:1px solid #ddd!important}.sp-immersive-edge img{width:7px;height:13px}.sp-world[data-detail=note] .sp-note-composer{font-size:13px;line-height:1.6}.sp-live-note{display:block;white-space:pre-line;max-height:78px;overflow:auto}
.sp-opening[data-phase="548"] .sp-pointer{opacity:0!important}.sp-opening:is([data-phase="508"],[data-phase="511"],[data-phase="525"],[data-phase="550"]) .sp-pointer{animation:sp-window-click .18s ease-out;transform-origin:0 0}.sp-world[data-detail] .sp-pointer{transition-duration:.5s,.5s,.2s}
@keyframes sp-web-load{from{width:5%}to{width:92%}}
@media(prefers-color-scheme:dark){.sp-operation{color:#e4e6eb}.sp-op-files{background:#353638f5}.sp-file-column{background:#292a2af5}.sp-file-locations{color:#afb7c4}.sp-file-context,.sp-rename-dialog{background:#35373bef;border-color:#ffffff29}.sp-file-context hr{border-color:#656b75}.sp-rename-field{background:#24282e;color:#e4e6eb}.sp-rename-dialog p{color:#b8c0cb}.sp-rename-dialog footer button:first-child{background:#565b65}.sp-browser-source-active{background:#ffffff1c}.sp-browser-group{background:#ffffff10}.sp-browser-current small,.sp-browser-group h3,.sp-browser-address{color:#b1bac9}.sp-op-note{background:#202020}.sp-immersive-body p{color:#d4dae3}.sp-immersive-toolbar{color:#b0b7c3}.sp-immersive-edge{background:#393e47;border-color:#606672!important}.sp-immersive-edge img{filter:brightness(0) invert(1)}.sp-op-note h2{color:#e4e6eb}.sp-demo-shortcut{background:#303945e8;border-color:#566172;color:#e3e8f0}}

.sp-demo-shortcut{left:calc(var(--main-x) + 350px);top:calc(var(--main-y) + var(--main-h) - 70px);bottom:auto;z-index:26}.sp-demo-shortcut[hidden]{display:none!important}.sp-op-note .sp-immersive-body{opacity:0;transition:opacity .3s}.sp-op-note[data-expanded=true] .sp-immersive-body{opacity:1;transition-delay:.2s}
.sp-browser-list.sp-glass{background:#dedfe1;backdrop-filter:blur(24px)}
@media(prefers-color-scheme:dark){.sp-browser-list.sp-glass{background:#303136}}
.sp-op-files{clip-path:inset(0);opacity:1;transform:translateX(0);transition:clip-path .6s cubic-bezier(.2,.7,.2,1),transform .6s,opacity .35s}
.sp-op-files[data-collapsed=true]{clip-path:inset(0 100% 0 0);opacity:0;transform:translateX(-8px);pointer-events:none}
.sp-tab-group{position:absolute;top:4px;height:32px;display:flex;align-items:center;gap:6px;min-width:0}
.sp-tab-leading{left:48px;right:calc(50% + 24px)}.sp-tab-trailing{left:calc(50% + 24px);right:70px}
.sp-top>.sp-tool{position:absolute;left:6px;top:4px}.sp-top>.sp-tab-round{position:absolute;top:7px;right:38px}.sp-top>.sp-tab-round:last-child{right:6px}
.sp-center-switch{position:absolute;left:calc(50% - 16px);top:4px;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;border:1px solid #77777759!important;background:#ffffff14;transition:background .12s,border-color .12s}
.sp-center-switch img{width:8px;height:12px;opacity:.78}.sp-center-switch:hover,.sp-center-switch[data-hovered=true]{background:#0a84ff24;border-color:#0a84ffb8!important}
.sp-opening:is([data-phase="353"],[data-phase="355"]) .sp-pointer{animation:sp-window-click .18s ease-out;transform-origin:0 0}
.sp-world[data-windows=docked] .sp-back-window{opacity:0;pointer-events:none;transition:opacity .3s}
/* Utility chapters reuse independent icons after the desktop has been tidied. */
.sp-world[data-windows=docked] .sp-token-files{--file-from-x:calc(var(--main-x) + 90px);--file-from-y:calc(var(--main-y) + 95px)}
.sp-world[data-windows=docked]:is([data-files=approach],[data-files=collapse],[data-files=collapsed]) .sp-token-files{opacity:1}
.sp-world[data-windows=docked]:is([data-files=approach],[data-files=collapse],[data-files=collapsed]) .sp-source-app-token{opacity:1;transition-delay:0s}
.sp-world[data-windows=docked] .sp-token-browser{--browser-from-x:calc(var(--main-x) + var(--main-w) - 130px);--browser-from-y:calc(var(--main-y) + 90px)}
.sp-world[data-windows=docked][data-browser=approach] .sp-token-browser{opacity:1}
.sp-world[data-windows=docked] .sp-browser-icons img{--seed-x:calc((var(--seed-index) - 1)*45px)!important;--seed-y:0px!important}
.sp-world[data-windows=docked][data-browser=approach] .sp-browser-icons img{transform:translate(calc((var(--seed-index) - 1)*45px),0)}
.sp-world[data-windows=docked] .sp-token-note{--note-from-x:calc(var(--main-x) + var(--main-w) - 90px);--note-from-y:calc(var(--main-y) + 150px)}
.sp-world[data-windows=docked]:is([data-note=approach],[data-note=collapse]) .sp-token-note,.sp-world[data-windows=docked]:is([data-note=approach],[data-note=collapse]) .sp-token-note img{opacity:1;transition-delay:0s}
@media(prefers-color-scheme:dark){.sp-center-switch img{filter:brightness(0) invert(1)}}

/* File drag-out stays between the drawer and the current, single app window. */
.sp-op-files{transition:width .45s,height .45s,clip-path .6s cubic-bezier(.2,.7,.2,1),transform .6s,opacity .35s}
.sp-op-files[data-delivery=true]{width:300px;height:440px}
.sp-op-files[data-delivery=true] .sp-file-columns{grid-template-columns:1fr;height:320px}
.sp-op-files[data-delivery=true] .sp-file-column:not(.sp-file-current){display:none}
.sp-op-files[data-delivery=true] .sp-file-locations>img:first-child,.sp-op-files[data-delivery=true] .sp-file-locations>span:first-of-type{display:none}
.sp-op-files[data-delivery=true] .sp-file-locations img:nth-of-type(2){margin-left:0}
.sp-mail{font-size:15px;color:#3c424b;margin:-12px -12px}
.sp-mail-field{display:flex;align-items:center;gap:20px;min-height:40px;border-bottom:1px solid #ececf0;padding:0 10px}
.sp-mail-field>span{width:70px;color:#959ba4}.sp-mail-field strong{font-size:14px;font-weight:400}
.sp-mail-body{padding:22px 10px;line-height:1.7}.sp-mail-body>p{margin:0 0 36px;font-size:15px}
.sp-mail-drop{width:375px;min-height:160px;margin:35px 0 0 320px;border:1px dashed #d3d8df;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#9b9fa8;font-size:13px;transition:background .25s,border-color .25s}
.sp-mail-drop[data-active=true]{border-color:#0a84ff;background:#0a84ff0e}
.sp-mail-attachment{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:8px;background:#f1f3f7;color:#353b45;border:1px solid #e1e5ec}
.sp-mail-attachment[hidden]{display:none}.sp-mail-attachment>img{width:44px;height:52px}.sp-mail-attachment>span{display:flex;flex-direction:column;gap:8px;font-size:14px}.sp-mail-attachment small{font-size:11px;color:#87909c}
.sp-delivery-ghost{position:absolute;z-index:29;display:flex;align-items:center;gap:8px;padding:6px 10px;background:#edf4fff2;border:1px solid #3292e99e;border-radius:6px;box-shadow:0 4px 14px #0002;font-size:13px;pointer-events:none;transform:translate(-18px,-18px);transition:left .7s cubic-bezier(.25,.7,.2,1),top .7s cubic-bezier(.25,.7,.2,1)}
.sp-delivery-ghost>img{width:32px;height:36px}.sp-delivery-ghost[hidden]{display:none!important}
/* External-tab results are separate from the built-in web page. */
.sp-browser-results{margin-top:22px}.sp-browser-results>small{display:block;color:#858b95;font-size:11px;margin-bottom:10px}
.sp-browser-results>button{display:flex;align-items:center;gap:9px;width:100%;padding:12px 8px!important;background:transparent;text-align:left;border-radius:7px;margin-bottom:7px}
.sp-browser-results>button>img{width:26px;height:26px;flex:0 0 26px}.sp-browser-results>button>span{display:flex;flex-direction:column;gap:7px;min-width:0;font-size:13px;line-height:1.4}
.sp-browser-results small{color:#8a909a;font-size:10px}.sp-browser-results>button[aria-selected=true]{background:#1789ff22;box-shadow:inset 0 0 0 1px #1789ff44}
.sp-op-browser:is([data-step="621"],[data-step="622"]) .sp-browser-address{background:#f5f7fc;border-color:#1584ff;box-shadow:0 0 0 2px #1584ff22}
.sp-op-browser[data-step="622"] .sp-browser-address span::after{content:"";border-right:1px solid #333;margin-left:1px}
.sp-external-browser{margin:-24px -28px;color:#343b48}.sp-external-tabs{display:flex;align-items:center;gap:24px;height:39px;padding:0 14px;background:#eceff4;font-size:12px}.sp-external-tabs>span:first-child{background:white;padding:10px 17px;border-radius:9px 9px 0 0}
.sp-external-address{display:flex;align-items:center;gap:10px;height:33px;margin:5px 14px;padding:0 14px;background:#f0f2f6;border-radius:18px;font-size:12px;color:#6c7481}.sp-external-address img{width:18px;height:18px}.sp-external-address small{margin-left:auto}
.sp-external-browser article{padding:36px 45px}.sp-external-browser article>small{font-size:11px;color:#8495b5}.sp-main .sp-external-browser h2{font-size:29px;margin:16px 0;height:auto}.sp-external-browser h3{font-size:20px;margin-top:35px}.sp-external-browser p{font-size:20px;line-height:1.9;max-width:600px}
/* Note tools use the existing rail material and its real toolbar entry points. */
.sp-note-utility{position:absolute;top:54px;left:13px;right:9px;bottom:147px;z-index:6;padding:10px 9px;border-radius:12px;background:#dddfe2;overflow:visible;color:#4e535c;font-size:12px}
.sp-note-utility[hidden],.sp-note-utility [hidden]{display:none!important}
.sp-world:is([data-note-utility=clipboard],[data-note-utility=tasks]) .sp-note-list{visibility:hidden}
.sp-note-utility>header{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:26px;margin-bottom:12px}.sp-note-utility>header strong{font-size:12px}.sp-note-utility>header button{font-size:9px;color:#0a84ff;background:transparent}
.sp-clipboard-cards>small{display:block;font-size:10px;color:#8d929a;margin-bottom:8px}
.sp-clipboard-cards>button,.sp-clipboard-secondary{display:block;text-align:left;width:100%;padding:11px 10px!important;background:#f0f1f3;border:1px solid #ccd0d566!important;border-radius:10px;margin-bottom:10px;line-height:1.65}
.sp-clipboard-source,.sp-clipboard-secondary>span{display:flex;align-items:center;gap:5px;font-size:9px;color:#8c929c}.sp-clipboard-source img,.sp-clipboard-secondary img{width:16px;height:16px}
.sp-clipboard-cards p{margin:9px 0;font-size:12px}.sp-clipboard-copy{font-size:9px;color:#969ba4}.sp-clipboard-cards>button[data-copied=true]{background:#0a84ff1a;border-color:#0a84ff88!important}.sp-clipboard-cards>button[data-copied=true] .sp-clipboard-copy{color:#0a84ff}
.sp-task-filter{display:flex;justify-content:space-between;padding:6px 0 10px;font-size:11px;color:#7c848e}.sp-task-entry{display:flex;align-items:flex-start;gap:7px;padding:11px 0;border-bottom:1px solid #c9ced480}.sp-task-entry>div{flex:1;min-width:0}.sp-task-title{display:block;font-size:12px;line-height:1.55}
.sp-task-check,.sp-reminder-item>button{flex:0 0 15px;width:15px;height:15px;border:1px solid #a7afb9!important;border-radius:50%;background:transparent;font-size:10px;color:white!important;margin-top:3px}
.sp-task-entry[data-completed=true] .sp-task-check,.sp-reminder-item[data-completed=true]>button{background:#0a84ff;border-color:#0a84ff!important}
.sp-task-entry[data-completed=true] .sp-task-title{text-decoration:line-through;color:#9ca3ab}.sp-task-date{display:block;font-size:9px!important;color:#0a84ff!important;padding:3px 6px!important;background:#c8d7e738;border-radius:4px;margin-top:8px}.sp-task-entry>div>small{display:block;font-size:9px;color:#9a9faa;margin-top:6px}
.sp-task-add{display:block;background:transparent;text-align:left;min-height:31px;width:100%;padding:7px!important;font-size:11px;color:#a0a6af!important;border-radius:5px;margin-top:8px}.sp-task-add[data-editing=true]{background:#ffffff90;box-shadow:inset 0 0 0 1px #0a84ff;color:#4e535c!important}.sp-task-add[data-editing=true]::after{content:"";border-right:1px solid currentColor;margin-left:1px}
.sp-task-date-menu{position:absolute;top:116px;right:7px;z-index:7;width:150px;padding:5px;background:#f6f6f8f5;border:1px solid #c6cbd3;border-radius:7px;box-shadow:0 8px 25px #0003}
.sp-task-date-menu>button{display:block;width:100%;background:transparent;padding:7px 10px!important;text-align:left;border-radius:4px;font-size:11px}.sp-task-date-menu>[data-extra=date-tomorrow]{background:#0a84ff;color:white}
.sp-reminder-enabled{position:absolute;left:8px;right:8px;bottom:12px;display:flex;align-items:center;gap:7px;line-height:1.6;font-size:9px;color:#89919d}.sp-reminder-enabled>img{width:23px;height:23px}
.sp-reminders-app{display:flex;min-height:572px;margin:-24px -28px;color:#424b58;background:white}.sp-reminders-app>aside{width:190px;flex:0 0 190px;padding:26px 17px;background:#f0f1f3}.sp-reminders-app>aside>img{width:42px;height:42px;margin-bottom:27px}.sp-reminders-app>aside>strong{font-size:13px;color:#a2a8b1}.sp-reminders-app>aside>div{margin-top:15px;padding:10px;border-radius:7px;background:#d8e7fb;font-size:13px}.sp-reminders-app>aside span{float:right;color:#91a0b2}.sp-reminders-app>article{flex:1;padding:35px 30px}.sp-main .sp-reminders-app h2{color:#0785ff;font-size:33px;margin:0 0 9px;height:auto}.sp-reminders-app article>small{color:#9da4ae;font-size:12px}
.sp-reminder-item{display:flex;align-items:flex-start;gap:12px;padding:30px 0;font-size:18px}.sp-reminder-item>button{width:21px;height:21px;flex-basis:21px;font-size:14px}.sp-reminder-item>span>small{display:block;color:#eda241;font-size:12px;margin-top:12px}.sp-reminder-item[data-completed=true]>span{color:#9ba3ae;text-decoration:line-through}
.sp-opening:is([data-phase="624"],[data-phase="642"],[data-phase="649"],[data-phase="651"],[data-phase="654"]) .sp-pointer{animation:sp-window-click .18s ease-out;transform-origin:0 0}
@media(prefers-color-scheme:dark){.sp-mail,.sp-external-browser{color:#d4d8df}.sp-mail-field{border-color:#444}.sp-mail-drop{border-color:#575e69}.sp-mail-attachment{background:#363b44;color:#d4d8df;border-color:#4c535f}.sp-external-tabs,.sp-external-address{background:#343941}.sp-external-tabs>span:first-child{background:#454b56}.sp-note-utility{background:#303136;color:#d5d9df}.sp-clipboard-cards>button,.sp-clipboard-secondary{background:#42464d;border-color:#555c67!important}.sp-task-add[data-editing=true]{background:#42464d;color:#d4d8df!important}.sp-task-date-menu{background:#383d45;border-color:#555c67}.sp-reminders-app{background:#24272e;color:#d4d8df}.sp-reminders-app>aside{background:#30343d}.sp-reminders-app>aside>div{background:#1e4e89}.sp-note-toolbar [data-sp-action=clipboard] img,.sp-note-toolbar [data-sp-action=tasks] img{filter:brightness(0) invert(1)}}

/* One view transform includes all existing surfaces, drag ghosts and the pointer.
   The menu and feature directory stay outside this camera. */
.sp-camera{position:absolute;inset:0;transform-origin:0 0;background:inherit;transition:transform .52s cubic-bezier(.22,.68,.24,1)}
.sp-note-composer .sp-live-note{white-space:pre-line}
.sp-note-composer[data-typing=true] .sp-live-note::after{content:"";display:inline-block;height:1em;border-right:1px solid currentColor;vertical-align:-1px;margin-left:2px}

/* Click the drawer close control after delivery, then leave the draft unobstructed. */
.sp-opening[data-phase="616"] .sp-pointer{animation:sp-window-click .18s ease-out;transform-origin:0 0}

/* The action caption stays above the scaled desktop, aligned with the directory. */
#workflow-start [data-opening-action-caption]{box-sizing:border-box;height:20px;margin:0 0 8px;padding:0 6px;overflow:hidden;color:var(--body,#4b5058);font-size:14px;line-height:20px;white-space:nowrap;text-overflow:ellipsis}
#workflow-start [data-opening-action-caption][data-opening-action-caption-enter]{animation:wi-opening-action-caption-in 150ms ease-out both}
@keyframes wi-opening-action-caption-in{from{opacity:0}to{opacity:1}}
@media(max-width:820px){#workflow-start [data-opening-action-caption]{height:40px;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}}
@media(prefers-reduced-motion:reduce){#workflow-start [data-opening-action-caption]{animation:none!important}}