/* Visual scenes mirror the shipped Quickshell organiser: activity panels,
   horizontal workspace cards, and a persistent window-details pane. */
.dashboard-figure{margin:26px 0 0;transform:none!important;perspective:none!important}
.dashboard-figure .caption{text-align:left;margin:8px 0 0}
.dashboard-screen{--screen-bg:#191510;--surface:#211c16;--raised:#2b241d;--edge:#493c30;--text:#f1eee8;--muted:#aaa094;--accent:#ed9b70;position:relative;width:100%;height:790px;overflow:hidden;border:1px solid #55473a;border-radius:9px;background:var(--screen-bg);color:var(--text);box-shadow:0 30px 75px #0008;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:12px;line-height:1.35}
.dashboard-topbar{height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#302a25;color:#ddd4ca;font:10px ui-monospace,monospace;border-bottom:1px solid #ffffff13}.dashboard-topbar .bar-left{display:flex;align-items:center;gap:9px}.dashboard-topbar .bar-workspace{padding:2px 8px;background:#40372f}.dashboard-topbar .bar-dot{color:var(--accent)}.dashboard-main{height:calc(100% - 28px);padding:18px 22px 20px;display:flex;flex-direction:column;min-height:0}.dashboard-toolbar{height:51px;flex:none;display:flex;align-items:center;gap:8px}.dashboard-title{min-width:200px;margin-right:auto}.dashboard-title strong{display:block;font-size:21px;line-height:1.2}.dashboard-title small{display:block;color:var(--muted);margin-top:3px;font-size:11px}.dashboard-search{width:190px;height:32px;padding:0 10px;display:flex;align-items:center;gap:8px;border:1px solid #514438;border-radius:7px;background:#15120f;color:#b4a99c;font-size:11px}.dashboard-search .search-value{color:var(--text);overflow:hidden;white-space:nowrap}.dashboard-search .search-caret{display:none;width:1px;height:13px;background:var(--accent)}.dashboard-button{height:30px;padding:0 10px;border:1px solid #514438;border-radius:7px;background:#2b241d;color:var(--text);font:inherit;font-size:11px;white-space:nowrap}.dashboard-button.primary{background:var(--accent);border-color:var(--accent);color:#21170f;font-weight:700}.dashboard-rule{height:1px;flex:none;margin:8px 0 14px;background:#ffffff20}.organiser-content{display:flex;flex:1;min-height:0;gap:0}.activity-scroll{flex:1;min-width:0;overflow:hidden;padding-right:2px}.activity-list{display:flex;flex-direction:column;gap:10px}.activity-row{height:208px;flex:none;position:relative;padding:10px 11px 11px;border:1px solid #4a3e33;border-radius:10px;background:#201b15;transition:transform .65s cubic-bezier(.2,.8,.2,1),border-color .3s,opacity .3s}.activity-row-head{height:25px;display:flex;align-items:center;gap:7px;margin-bottom:8px}.activity-row-name{font-size:14px;font-weight:750;white-space:nowrap}.activity-row-count{color:var(--muted);font-size:10px}.activity-actions{display:flex;align-items:center;gap:5px;margin-left:auto}.activity-actions button,.workspace-actions button{height:25px;min-width:27px;padding:0 7px;border:1px solid #51463b;border-radius:6px;background:#2b251e;color:#ddd4ca;font-size:10px}.activity-actions button:hover,.workspace-actions button:hover{border-color:#b78b6e}.workspace-strip{display:flex;align-items:flex-start;gap:10px;overflow:hidden}.workspace-card{position:relative;flex:none;width:clamp(150px,17vw,205px);height:162px;padding:8px 9px 7px;border:1px solid #4a4035;border-radius:8px;background:#28221b;transition:border-color .25s,background .25s,box-shadow .25s}.workspace-card.current-card{border:2px solid var(--accent);padding:7px 8px 6px;background:#34251b}.workspace-card-head{height:22px;display:flex;align-items:center;gap:5px}.workspace-card-head strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px}.workspace-actions{display:flex;gap:3px;margin-left:auto}.workspace-actions button{width:24px;min-width:24px;height:23px;padding:0;font-size:11px}.window-grid{height:104px;display:grid;grid-template-columns:1fr;gap:5px;overflow:hidden}.target-extra{display:none}.empty-placeholder{display:none;align-items:center;justify-content:center;min-width:0;border:1px dashed #51463b;border-radius:5px;color:#aa9f92;font-size:9px}.permanent-empty{display:flex}.window-tile{min-width:0;overflow:hidden;display:flex;flex-direction:column;border:1px solid transparent;border-radius:5px;background:#171410;transition:opacity .25s,border-color .25s,transform .45s,filter .3s}.window-tile.selected{border-color:var(--accent);background:#38291f}.window-tile img{width:100%;height:76px;display:block;object-fit:cover;background:#171410}.window-tile .window-title{height:25px;padding:4px 6px;color:#e5ddd3;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace-status{height:15px;margin-top:4px;color:#a89d91;font-size:9px}.workspace-card.current-card .workspace-status{color:var(--accent)}.workspace-new{width:84px;height:162px;display:flex;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px solid #4a4035;border-radius:8px;background:#201b15;color:#a99d90}.workspace-new .plus{font-size:26px;color:var(--accent);line-height:1}.workspace-new small{font-size:9px;text-align:center}.dashboard-divider{position:relative;flex:none;width:16px;display:grid;place-items:center}.dashboard-divider:after{content:"";width:2px;height:30px;border-radius:2px;background:#55483a}.details-content{display:block}.details-empty{display:none}.details-pane{width:270px;flex:none;overflow:hidden;padding:13px 14px;border:1px solid #453a30;border-radius:9px;background:#1e1914;transition:background .3s}.details-title{margin:0 0 10px;font-size:14px;font-weight:750}.details-preview{width:100%;height:175px;overflow:hidden;border:1px solid #4d4136;border-radius:6px;background:#15120f;transition:height .5s,box-shadow .4s}.details-preview img{display:block;width:100%;height:100%;object-fit:contain}.details-window-name{margin-top:9px;font-weight:650;font-size:12px}.details-meta{margin-top:3px;color:var(--muted);font-size:10px}.details-action{width:100%;height:29px;margin-top:9px;border:1px solid #52463a;border-radius:6px;background:#2c251e;color:var(--text);font-size:10px}.details-label{margin:8px 0 4px;color:#b8ab9d;font-size:9px}.details-select{height:27px;padding:5px 8px;border:1px solid #4b4035;border-radius:5px;background:#181410;color:#e6ded4;font-size:10px}.details-empty{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:9px;color:var(--muted)}.details-empty strong{font-size:14px;color:var(--text)}.details-empty p{max-width:220px;margin:0;font-size:11px;line-height:1.55}.drag-ghost{position:absolute;z-index:10;left:var(--drag-start-x,8%);top:var(--drag-start-y,24%);box-sizing:border-box;display:flex;align-items:center;justify-content:center;overflow:hidden;width:180px;height:44px;padding:4px 7px;text-align:center;line-height:1.2;border-radius:8px;background:var(--accent);color:#21170f;box-shadow:0 12px 25px #0007;font-size:11px;font-weight:650;opacity:0;pointer-events:none}.drag-cursor{position:absolute;z-index:11;left:var(--drag-cursor-x,11%);top:var(--drag-cursor-y,25%);font-size:19px;color:#fff;text-shadow:0 2px 5px #000;opacity:0;pointer-events:none}.move-confirm{position:absolute;right:12px;bottom:10px;padding:6px 9px;border:1px solid #715b48;border-radius:6px;background:#2b241d;color:#e8d8ca;font-size:9px;opacity:0}
.demo-stage{display:flex!important;flex-direction:column;align-items:stretch!important;gap:14px!important;padding:22px!important;min-height:0!important}.demo-copy{display:grid;grid-template-columns:170px minmax(180px,.8fr) minmax(220px,1.3fr) auto;align-items:center;gap:13px}.demo-copy small{grid-column:1;grid-row:1 / span 2}.demo-copy h3{grid-column:2;grid-row:1 / span 2;margin:0!important;font-size:20px!important}.demo-copy p{grid-column:3;grid-row:1 / span 2;margin:0}.demo-hint{grid-column:4;grid-row:1 / span 2;margin:0;max-width:150px}.demo-visual{min-height:0!important;padding:0!important;background:transparent!important;border:0!important;overflow:visible!important}.demo-visual .dashboard-screen{height:700px;border-radius:8px;box-shadow:0 18px 45px #0007}.demo-visual .dashboard-main{padding:14px 16px}.demo-visual .dashboard-toolbar{height:45px}.demo-visual .dashboard-title{min-width:170px}.demo-visual .dashboard-title strong{font-size:18px}.demo-visual .dashboard-title small{font-size:10px}.demo-visual .dashboard-search{width:165px;height:29px}.demo-visual .dashboard-button{height:28px;padding:0 8px;font-size:10px}.demo-visual .dashboard-rule{margin:7px 0 10px}.demo-visual .activity-list{gap:8px}.demo-visual .activity-row{height:174px;padding:8px 9px}.demo-visual .activity-row-head{height:22px;margin-bottom:6px}.demo-visual .activity-row-name{font-size:12px}.demo-visual .activity-actions button{height:22px;min-width:23px;padding:0 5px;font-size:9px}.demo-visual .workspace-strip{gap:7px}.demo-visual .workspace-card{width:clamp(155px,20vw,230px);height:132px;padding:6px 7px 5px}.demo-visual .workspace-card.current-card{padding:5px 6px 4px}.demo-visual .workspace-card-head{height:19px}.demo-visual .workspace-card-head strong{font-size:10px}.demo-visual .workspace-actions button{width:21px;min-width:21px;height:20px;font-size:9px}.demo-visual .window-grid{height:79px}.demo-visual .window-tile img{height:57px}.demo-visual .window-tile .window-title{height:20px;padding:3px 5px;font-size:8px}.demo-visual .workspace-status{height:12px;margin-top:3px;font-size:8px}.demo-visual .workspace-new{width:54px;height:132px}.demo-visual .workspace-new .plus{font-size:22px}.demo-visual .workspace-new small{font-size:8px}.demo-visual .details-pane{width:230px;padding:10px 11px}.demo-visual .details-preview{height:132px}.demo-visual .details-title{font-size:12px}.demo-visual .details-window-name{font-size:10px}.demo-visual .details-meta,.demo-visual .details-label,.demo-visual .details-select{font-size:9px}.demo-visual .details-action{height:25px;margin-top:7px;font-size:9px}.demo-visual .dashboard-divider{width:13px}.demo-visual .drag-ghost{height:38px;width:160px;font-size:10px}.demo-visual .activity-row.research-row{display:none}.demo-visual .target-extra{display:none}
/* Drag begins on a window tile, follows the pointer as the product's title ghost,
   highlights a workspace DropArea, then completes the move. */
.dashboard-mount[data-demo="move"] .window-tile.source-window{animation:source-after-drop 5s ease-in-out infinite}.dashboard-mount[data-demo="move"] .workspace-card.move-target{animation:drop-target 5s ease-in-out infinite}.dashboard-mount[data-demo="move"] .target-extra{display:flex;animation:target-extra-show 5s ease-in-out infinite}.dashboard-mount[data-demo="move"] .window-grid:has(.target-extra){animation:target-columns 5s ease-in-out infinite}.dashboard-mount[data-demo="move"] .source-window + .empty-placeholder{display:none!important}.dashboard-mount[data-demo="move"] .source-window .window-title{animation:source-label 5s ease-in-out infinite}.dashboard-mount[data-demo="move"] .source-window .window-title:after{content:""}.dashboard-mount[data-demo="move"] .drag-ghost,.dashboard-mount[data-demo="move"] .drag-cursor{animation:drag-across 5s ease-in-out infinite}.dashboard-mount[data-demo="move"] .move-confirm{animation:move-toast 5s ease-in-out infinite}
@keyframes target-extra-show{0%,42%{opacity:0;transform:translateX(8px)}49%,83%{opacity:1;transform:none}100%{opacity:0}}@keyframes target-columns{0%,44%{grid-template-columns:1fr}49%,83%{grid-template-columns:repeat(2,minmax(0,1fr))}100%{grid-template-columns:1fr}}@keyframes source-label{0%,44%{opacity:1}49%,83%{opacity:0}100%{opacity:0}}@keyframes source-after-drop{0%,44%{opacity:1}49%,83%{opacity:0}100%{opacity:0}}@keyframes drop-target{0%,18%,42%,100%{border-color:#4a4035;box-shadow:none;background:#28221b}25%,38%{border-color:var(--accent);box-shadow:0 0 0 2px #ed9b7055;background:#39291d}49%,83%{border-color:var(--accent);background:#39291d}}@keyframes drag-across{0%,10%{opacity:0;transform:translate(0,0) scale(1)}14%{opacity:1;transform:translate(0,0) scale(1)}43%,48%{opacity:1;transform:translate(var(--drag-dx,205px),var(--drag-dy,220px)) scale(var(--drag-scale-x,1),var(--drag-scale-y,1))}49%,100%{opacity:0;transform:translate(var(--drag-dx,205px),var(--drag-dy,220px)) scale(var(--drag-scale-x,1),var(--drag-scale-y,1))}}@keyframes move-toast{0%,46%{opacity:0;transform:translateY(4px)}52%,83%{opacity:1;transform:none}100%{opacity:0}}
/* Search narrows the visible window previews, while all activity/workspace cards remain in place. */
.dashboard-mount[data-demo="search"] .search-placeholder{display:none}.dashboard-mount[data-demo="search"] .dashboard-search .search-caret{display:inline-block;animation:caret .8s step-end infinite}.dashboard-mount[data-demo="search"] .dashboard-search .search-value{animation:type-query 6s steps(8,end) infinite}.dashboard-mount[data-demo="search"] .dashboard-search .search-value:after{content:"Planning"}.dashboard-mount[data-demo="search"] .activity-row:not([data-row="property"]) .window-tile{animation:search-dim 6s ease-in-out infinite}.dashboard-mount[data-demo="search"] .activity-row[data-row="property"]{border-color:#b98260}@keyframes caret{50%{opacity:0}}@keyframes type-query{0%,10%{width:0}40%,75%{width:8ch}90%,100%{width:0}}@keyframes search-dim{0%,15%,88%,100%{opacity:1;filter:none}40%,75%{opacity:.15;filter:grayscale(.6)}}
/* New activity uses the real +Activity action and appears as another full row. */
.activity-row.research-row{display:none}.dashboard-mount[data-demo="add"] .activity-row.research-row{display:block;animation:new-row .65s ease-out both}.dashboard-mount[data-demo="add"] .activity-list{padding-bottom:5px}.dashboard-mount[data-demo="add"] .dashboard-button.add-activity{animation:button-press 5s ease-in-out infinite}@keyframes new-row{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:none}}@keyframes button-press{0%,17%,100%{transform:none;filter:none}25%,32%{transform:translateY(1px);filter:brightness(.86)}}
/* The up/down buttons swap the first two complete activity panels. */
.dashboard-mount[data-demo="arrange"] .activity-row[data-row="development"]{z-index:2;animation:row-down 6s ease-in-out infinite}.dashboard-mount[data-demo="arrange"] .activity-row[data-row="property"]{z-index:3;animation:row-up 6s ease-in-out infinite}.dashboard-mount[data-demo="arrange"] .activity-row[data-row="development"] .activity-actions button:nth-child(2),.dashboard-mount[data-demo="arrange"] .activity-row[data-row="property"] .activity-actions button:first-child{animation:button-press 6s ease-in-out infinite}@keyframes row-down{0%,14%,100%{transform:translateY(0)}26%,67%{transform:translateY(calc(100% + 8px))}80%{transform:translateY(0)}}@keyframes row-up{0%,14%,100%{transform:translateY(0)}26%,67%{transform:translateY(calc(-100% - 8px))}80%{transform:translateY(0)}}
/* Selecting a preview expands the actual right-hand Window details pane. */
.dashboard-mount[data-demo="preview"] .window-tile.selected{animation:select-window 5.5s ease-in-out infinite}.dashboard-mount[data-demo="preview"] .details-content{animation:show-details 5.5s ease-in-out infinite}.dashboard-mount[data-demo="preview"] .details-empty{display:flex;animation:hide-details 5.5s ease-in-out infinite}.dashboard-mount[data-demo="preview"] .details-preview{animation:preview-pane 5.5s ease-in-out infinite}.dashboard-mount[data-demo="preview"] .drag-cursor{animation:click-window 5.5s ease-in-out infinite}.dashboard-mount[data-demo="preview"] .details-pane{border-color:#a87b60}@keyframes show-details{0%,22%{opacity:0;transform:translateY(8px)}36%,79%{opacity:1;transform:none}100%{opacity:0}}@keyframes hide-details{0%,22%{opacity:1}36%,79%{opacity:0}100%{opacity:1}}@keyframes select-window{0%,18%,100%{border-color:transparent;background:#171410}32%,78%{border-color:var(--accent);background:#38291f}}@keyframes preview-pane{0%,20%{transform:scale(.96);filter:brightness(.8)}35%,78%{transform:scale(1);filter:none}}@keyframes click-window{0%,16%,100%{opacity:0;transform:translate(0,0)}26%,47%{opacity:1;transform:translate(0,0)}37%{transform:scale(.8)}}
.dashboard-mount[data-demo="search"] .details-content,.dashboard-mount[data-demo="add"] .details-content,.dashboard-mount[data-demo="arrange"] .details-content{display:none}.dashboard-mount[data-demo="search"] .details-empty,.dashboard-mount[data-demo="add"] .details-empty,.dashboard-mount[data-demo="arrange"] .details-empty{display:flex}.dashboard-mount[data-demo="overview"] .details-pane{border-color:#5a4a3d}.dashboard-mount[data-demo="overview"] .window-tile.selected{border-color:var(--accent)}
.demo-section{background:#1b1713}.demo-carousel{border-color:#55483a;background:#17130f}.demo-tabs{border-color:#493d32}.demo-tab{color:#bcb0a3}.demo-tab.active{border-left-color:#e8986a;background:#30251d;color:#f3eee7}.demo-tab.active span,.demo-tab span{color:#e8986a}.demo-copy small{color:#e8986a}.demo-hint{color:#a99c8e}.demo-progress i{background:#e8986a}.real-transition{grid-template-columns:.7fr 1.3fr;align-items:center;gap:40px}.transition-shot{margin:0;border:1px solid #55483a;background:#15120f;overflow:hidden;border-radius:8px;box-shadow:0 24px 60px #0007}.transition-shot img{display:block;width:100%;height:auto}.transition-shot figcaption{padding:8px 10px;border-top:1px solid #493d32;color:#b9aa99;font:8px ui-monospace,monospace;letter-spacing:.04em}.real-transition .slide-copy span{color:#e8986a}.real-transition .slide-direction{color:#b9aa99}
@media(max-width:1050px){.dashboard-screen{height:760px}.dashboard-main{padding-left:14px;padding-right:14px}.dashboard-title{min-width:140px}.dashboard-title strong{font-size:17px}.dashboard-search{width:150px}.dashboard-button{padding:0 7px}.details-pane{width:235px}.demo-copy{grid-template-columns:130px minmax(160px,.8fr) minmax(190px,1.3fr)}.demo-hint{display:none}}
@media(max-width:820px){.dashboard-screen{height:auto;min-height:700px}.organiser-content{flex-direction:column;gap:10px}.activity-scroll{height:635px;flex:none}.details-pane{width:100%;height:260px}.dashboard-divider{display:none}.dashboard-toolbar{flex-wrap:wrap;height:auto;min-height:70px}.dashboard-title{min-width:100%;margin:0 0 2px}.dashboard-search{flex:1}.dashboard-main{height:auto;min-height:670px}.demo-visual .dashboard-screen{height:auto;min-height:690px}.demo-visual .activity-scroll{height:570px}.demo-visual .details-pane{height:230px}.demo-copy{grid-template-columns:120px 1fr;gap:8px}.demo-copy small{grid-column:1;grid-row:1}.demo-copy h3{grid-column:2;grid-row:1}.demo-copy p{grid-column:1/-1;grid-row:2}.real-transition{grid-template-columns:1fr!important}}
@media(max-width:560px){.dashboard-main{padding:12px 10px}.dashboard-toolbar{gap:5px}.dashboard-title strong{font-size:16px}.dashboard-search{order:2;width:100%;flex-basis:100%}.dashboard-button{font-size:9px}.dashboard-screen{min-height:740px}.activity-scroll{height:635px}.activity-row{height:196px;padding:8px}.activity-row-name{font-size:12px}.activity-actions{gap:3px}.activity-actions button{padding:0 5px;font-size:9px}.workspace-strip{overflow-x:auto;padding-bottom:4px}.workspace-card{width:180px;height:152px}.workspace-new{height:152px}.window-grid{height:94px}.window-tile img{height:68px}.details-pane{height:245px}.demo-stage{padding:12px!important}.demo-copy{grid-template-columns:1fr;gap:4px}.demo-copy small,.demo-copy h3,.demo-copy p{grid-column:1;grid-row:auto}.demo-copy h3{font-size:20px!important}.demo-visual .dashboard-main{padding:10px 8px}.demo-visual .activity-scroll{height:560px}.demo-visual .activity-row{height:184px}.demo-visual .workspace-card{width:178px;height:142px}.demo-visual .workspace-new{height:142px}.demo-visual .window-grid{height:84px}.demo-visual .window-tile img{height:60px}.demo-visual .details-pane{height:220px}.demo-visual .dashboard-title{min-width:100%}.demo-visual .dashboard-search{order:2}.demo-visual .dashboard-button{font-size:9px;padding:0 6px}}
@media(prefers-reduced-motion:reduce){.dashboard-screen *,.dashboard-screen *:before{animation:none!important;transition:none!important}.dashboard-mount[data-demo="arrange"] .activity-row{transform:none!important}.dashboard-mount[data-demo="move"] .move-target{border-color:var(--accent)}.dashboard-mount[data-demo="move"] .target-extra{display:none!important}.dashboard-mount[data-demo="move"] .source-window{opacity:1!important}.dashboard-mount[data-demo="move"] .source-window + .empty-placeholder{display:none!important}.dashboard-mount[data-demo="preview"] .window-tile.selected{border-color:var(--accent)}}
/* The homepage's older illustrative styles used .activity-row as a two-column
   label/card grid; the real organiser stacks its header above the card strip. */
.dashboard-screen .activity-row{display:block;gap:0}
.dashboard-screen .activity-row-count{white-space:nowrap}
.dashboard-screen .window-tile.target-extra{display:none}
.dashboard-mount[data-demo="move"] .dashboard-screen .window-tile.target-extra{display:flex}
.dashboard-screen .details-pane{position:relative}
.dashboard-screen .details-empty{position:absolute;left:12px;right:12px;top:39px;bottom:12px}
.dashboard-screen .dashboard-search .search-value{display:inline-block}

/* A quiet hardware frame gives the headline a finished product-shot feel while
   leaving the organiser itself faithful to its square-cornered desktop UI. */
.monitor-frame{position:relative;padding:8px 8px 0;border:1px solid #484641;border-bottom:0;border-radius:11px 11px 4px 4px;background:linear-gradient(145deg,#272725,#111110 55%,#222220);box-shadow:0 30px 76px #0009,0 1px 0 #ffffff24 inset}
.monitor-screen{overflow:hidden;border:1px solid #070707;border-radius:3px;background:#111}
.monitor-screen .dashboard-screen{border:0;border-radius:0;box-shadow:none}
.monitor-neck{width:74px;height:31px;margin:0 auto;background:linear-gradient(90deg,#141413,#333330 48%,#181817);border-left:1px solid #454541;border-right:1px solid #454541}
.monitor-base{width:min(220px,48%);height:11px;margin:0 auto;border:1px solid #474744;border-bottom:0;border-radius:8px 8px 0 0;background:linear-gradient(#343431,#171716);box-shadow:0 -2px 5px #0007}
.dashboard-figure .caption{padding-left:2px}
/* Empty-state copy belongs only to scenes with no selected window. */
.dashboard-mount[data-demo="overview"] .dashboard-screen .details-empty,
.dashboard-mount[data-demo="move"] .dashboard-screen .details-empty{display:none!important}
.dashboard-mount[data-demo="overview"] .dashboard-screen .details-content,
.dashboard-mount[data-demo="move"] .dashboard-screen .details-content{display:block!important;opacity:1;transform:none}
.dashboard-mount[data-demo="search"] .dashboard-screen .details-empty,
.dashboard-mount[data-demo="add"] .dashboard-screen .details-empty,
.dashboard-mount[data-demo="arrange"] .dashboard-screen .details-empty{display:flex}
.dashboard-mount[data-demo="preview"] .dashboard-screen .details-empty{display:flex}
.dashboard-screen .details-empty{z-index:2;box-sizing:border-box;min-height:0}
.dashboard-mount[data-demo="preview"] .dashboard-screen .details-content{position:relative;z-index:1;animation:show-details 5.5s ease-in-out infinite}
@media(max-width:820px){.monitor-frame{padding:5px 5px 0;border-radius:7px 7px 3px 3px}.monitor-neck{height:23px;width:56px}.monitor-base{height:8px}}
/* The product filters nonmatching windows out of their cards. Keep those
   workspace cards and activity rows visible so the result stays contextual. */
.dashboard-mount[data-demo="search"] .dashboard-screen .dashboard-search .search-caret{display:none}
.dashboard-mount[data-demo="search"] .dashboard-screen .dashboard-search .search-value:after{content:"Planning"}
.dashboard-mount[data-demo="search"] .dashboard-screen .dashboard-search .search-value{animation:none!important;width:8ch}
.dashboard-mount[data-demo="search"] .dashboard-screen .search-placeholder{display:none}
.count-after,.location-after{display:none}
.details-select .location-before,.details-select .location-after{white-space:nowrap}
.dashboard-mount[data-demo="move"] .count-before,.dashboard-mount[data-demo="move"] .details-meta .location-before,.dashboard-mount[data-demo="move"] .details-select .location-before{animation:move-location-before 5s ease-in-out infinite}
.dashboard-mount[data-demo="move"] .count-after,.dashboard-mount[data-demo="move"] .details-meta .location-after,.dashboard-mount[data-demo="move"] .details-select .location-after{display:inline;animation:move-location-after 5s ease-in-out infinite}
@keyframes move-location-before{0%,44%,100%{opacity:1}49%,83%{opacity:0}}
@keyframes move-location-after{0%,44%,100%{opacity:0}49%,83%{opacity:1}}
@media(max-width:820px){.dashboard-topbar{white-space:nowrap;gap:8px}.dashboard-topbar>span:nth-child(2){display:none}.dashboard-topbar>span:last-child{overflow:hidden;text-overflow:ellipsis}.dashboard-screen .details-pane{height:auto;min-height:390px;overflow:visible}.demo-visual .details-pane{height:auto;min-height:390px}}
.dashboard-screen .activity-row.research-row{display:none}
.dashboard-mount[data-demo="add"] .dashboard-screen .activity-row.research-row{display:block}
.dashboard-figure{perspective:1700px;perspective-origin:48% 48%}
.monitor-frame{transform:rotateY(-6deg) rotateX(.8deg);transform-origin:50% 50%;transform-style:preserve-3d}
.monitor-frame:after{content:"";position:absolute;z-index:-1;top:10px;right:-9px;bottom:31px;width:9px;border:1px solid #343431;border-left:0;background:linear-gradient(90deg,#111110,#292927);transform:translateZ(-1px) skewY(-.6deg);pointer-events:none}
@media(max-width:820px){.monitor-frame{transform:rotateY(-2deg)}}
@media(max-width:560px){.monitor-frame{transform:none}}
/* The board is a standard desktop-screen demonstration. Keep its real layout
   intact and scale the complete screen to its frame instead of reflowing it. */
.dashboard-mount{width:1200px;zoom:var(--board-scale,1)}
.dashboard-mount .dashboard-screen{width:1200px;height:790px;min-height:0;max-width:none}
.demo-visual .dashboard-mount .dashboard-screen{height:700px}
.dashboard-mount:not([data-instance="hero"]) .desktop-scene{display:none}
.dashboard-screen .dashboard-main{height:calc(100% - 28px);min-height:0}
.dashboard-screen .dashboard-toolbar{height:51px;min-height:0;flex-wrap:nowrap}
.dashboard-screen .dashboard-title{min-width:200px}
.dashboard-screen .dashboard-search{width:190px;flex:none}
.dashboard-screen .organiser-content{flex-direction:row;gap:0}
.dashboard-screen .activity-scroll{height:auto;flex:1;min-width:0}
.dashboard-screen .activity-row{height:208px}
.dashboard-screen .workspace-strip{overflow:hidden}
.dashboard-screen .workspace-card{width:202px;height:162px}
.dashboard-screen .workspace-new{width:64px;height:162px}
.dashboard-screen .details-pane{width:270px;height:auto;min-height:0;overflow:hidden}
.demo-visual .dashboard-mount .dashboard-screen .dashboard-main{padding:14px 16px}
.demo-visual .dashboard-mount .dashboard-screen .dashboard-toolbar{height:45px}
.demo-visual .dashboard-mount .dashboard-screen .dashboard-title{min-width:170px}
.demo-visual .dashboard-mount .dashboard-screen .dashboard-search{width:165px}
.demo-visual .dashboard-mount .dashboard-screen .activity-row{height:174px}
.demo-visual .dashboard-mount .dashboard-screen .workspace-card{width:166px;height:132px}
.demo-visual .dashboard-mount .dashboard-screen .workspace-new{width:54px;height:132px}
.demo-visual .dashboard-mount .dashboard-screen .details-pane{width:230px;height:auto;min-height:0}
.demo-carousel,.demo-stage{width:100%;min-width:0;max-width:100%}
.demo-visual{width:100%;min-width:0;max-width:100%;overflow:hidden!important}
.dashboard-figure{perspective:1300px!important;perspective-origin:49% 42%}
.monitor-frame{transform:rotateY(-8deg) rotateX(.8deg)}
.monitor-neck{width:6.2%;max-width:74px;height:auto;aspect-ratio:74/31}
.monitor-base{width:19%;max-width:220px;height:auto;min-height:4px;aspect-ratio:220/11}
.dashboard-screen{--accent:#e8986a}
.hero-screen .dashboard-topbar .bar-workspace{position:relative;display:inline-block;border:1px solid transparent;cursor:pointer;transition:background .2s,border-color .2s,filter .2s}
@media(max-width:820px){.monitor-frame{transform:rotateY(-3deg) rotateX(.4deg)}}
@media(max-width:560px){.monitor-frame{transform:rotateY(-1.5deg)}}
.dashboard-figure{perspective:1450px!important;perspective-origin:50% 50%}
.monitor-frame{width:93%;margin-left:2%;transform:rotateY(-15deg) rotateX(.6deg);transform-style:preserve-3d}
.monitor-frame:after{z-index:2;top:10px;right:-15px;bottom:7px;width:15px;border:1px solid #343431;background:linear-gradient(90deg,#10100f,#292927 52%,#171716);transform:skewY(-1deg);pointer-events:none}
.hero-screen .dashboard-topbar{position:relative;z-index:5}
.hero-screen .desktop-scene{position:absolute;z-index:1;inset:28px 0 0;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:12px;padding:12px;background:#191510}
.hero-screen .desktop-window{height:auto;min-width:0;min-height:0;overflow:hidden;border:1px solid #493c30;border-radius:0;background:#171410;color:#e5ddd3}
.hero-screen .terminal-body{height:100%;padding:14px 16px;background:#171410;font:11px/1.65 var(--mono)}
.hero-screen .terminal-body pre{margin-top:0}
.hero-screen .terminal-body pre span{color:#aaa094}
.hero-screen .terminal-body pre{margin:12px 0 0;color:#c7cec2;white-space:pre-wrap}.hero-screen .terminal-body pre i,.hero-screen .terminal-prompt i{color:#e8986a;font-style:normal}.hero-screen .terminal-body pre b{color:#c3d69b;font-weight:600}.hero-screen .terminal-body pre em{color:#9dbd7e;font-style:normal}.hero-screen .terminal-prompt{margin-top:12px;padding-top:10px;border-top:1px solid #ffffff12}.hero-screen .terminal-prompt span{color:#e8986a;animation:terminal-caret 1s steps(2,end) infinite}@keyframes terminal-caret{50%{opacity:0}}
.hero-screen .browser-toolbar{height:34px;display:flex;align-items:center;gap:14px;padding:0 12px;background:#252824;color:#adb3aa;font:12px var(--sans)}
.hero-screen .browser-toolbar div{height:22px;flex:1;padding:3px 10px;border:1px solid #41463e;border-radius:4px;background:#171a17;color:#c3c9be;font:9px var(--mono)}
.hero-screen .browser-page{height:calc(100% - 34px);overflow:hidden;background:#f3f2ed;color:#263027}
.hero-screen .browser-nav{height:47px;display:flex;align-items:center;gap:24px;padding:0 20px;border-bottom:1px solid #e1e3dc;font-size:10px;color:#697268}
.hero-screen .browser-nav b{display:flex;align-items:center;gap:6px;margin-right:auto;color:#29342a;font-size:13px}.hero-screen .browser-nav b i{width:12px;height:12px;border-radius:3px;background:#d58e63}.hero-screen .browser-nav small{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#e5e9e0;color:#4a574a}
.hero-screen .browser-content{display:flex;flex-direction:column;height:calc(100% - 47px);padding:26px 30px;box-sizing:border-box}.hero-screen .browser-content>small{font:8px var(--mono);letter-spacing:.08em;color:#8b9487}.hero-screen .browser-content h2{margin:7px 0 2px;font-size:22px;letter-spacing:-.04em}.hero-screen .browser-content p{margin:0;color:#778075;font-size:10px}
.hero-screen .browser-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:19px}.hero-screen .browser-metrics article{display:grid;gap:3px;padding:11px 12px;border:1px solid #e0e3dc;border-radius:4px;background:#fff}.hero-screen .browser-metrics small{color:#879085;font:7px var(--mono);letter-spacing:.06em}.hero-screen .browser-metrics b{font-size:21px;line-height:1.2}.hero-screen .browser-metrics i{color:#688161;font-size:8px;font-style:normal}
.hero-screen .browser-chart{display:flex;flex:1;min-height:175px;flex-direction:column;margin-top:14px;padding:12px;border:1px solid #e0e3dc;border-radius:4px;background:#fff}.hero-screen .browser-chart header{display:flex;justify-content:space-between;font-size:9px}.hero-screen .browser-chart header small{color:#889185;font-size:8px}.hero-screen .chart-lines{position:relative;flex:1;min-height:118px;margin-top:9px;background:repeating-linear-gradient(to bottom,transparent 0 28px,#edf0ea 29px 30px)}.hero-screen .chart-lines svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.hero-screen .chart-lines path{fill:none;stroke:#bd815d;stroke-width:3;vector-effect:non-scaling-stroke}.hero-screen .browser-chart footer{display:flex;justify-content:space-between;color:#939b91;font:7px var(--mono)}
.hero-screen .dashboard-main{position:absolute;z-index:4;inset:28px 0 0;height:auto;margin:0;background:#191510;opacity:0;transform:translateY(10px) scale(.99);transition:none;pointer-events:none}
.hero-screen .hero-pointer{z-index:6}
.dashboard-screen .activity-row[data-row="development"] [data-workspace="development-1"] .window-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.dashboard-screen .workspace-card.stacked .window-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr)}
.activity-row-count:has(.count-before),.workspace-status:has(.count-before){display:grid}
.activity-row-count .count-before,.activity-row-count .count-after,.workspace-status .count-before,.workspace-status .count-after{grid-area:1/1;white-space:nowrap}
.workspace-status:has(.current-label){grid-template-columns:auto max-content;align-items:center;column-gap:3px}
.workspace-status .current-label{grid-area:1/1;white-space:nowrap}
.workspace-status:has(.current-label) .count-before,.workspace-status:has(.current-label) .count-after{grid-area:1/2}
.dashboard-screen .activity-row[data-row="development"] [data-workspace="development-1"] .source-window{grid-column:1;grid-row:1;z-index:2}
.dashboard-screen .activity-row[data-row="development"] [data-workspace="development-1"] .development-browser{grid-column:2;grid-row:1;z-index:1}
.dashboard-mount[data-demo="move"] .activity-row[data-row="development"] [data-workspace="development-1"] .window-grid{animation:source-window-columns 5s ease-in-out infinite}
.dashboard-mount[data-demo="move"] .development-browser{animation:development-browser-shift 5s ease-in-out infinite}
@keyframes source-window-columns{0%,44%,100%{grid-template-columns:repeat(2,minmax(0,1fr))}49%,83%{grid-template-columns:1fr}}
@keyframes development-browser-shift{0%,44%,100%{grid-column:2}49%,83%{grid-column:1}}
@media(prefers-reduced-motion:reduce){.hero-screen .dashboard-main{opacity:1;transform:none}.hero-screen .terminal-prompt span{animation:none}}
@media(max-width:820px){.monitor-frame{width:96%;margin-left:1%;transform:rotateY(-7deg) rotateX(.5deg)}.monitor-frame:after{right:-10px;width:10px}.hero-screen .desktop-scene{gap:9px;padding:9px}.hero-screen .terminal-body{padding:9px;font-size:9px}.hero-screen .browser-content{padding:18px}.hero-screen .chart-lines{min-height:88px}}
@media(max-width:560px){.monitor-frame{width:98%;margin-left:0;transform:rotateY(-3deg) rotateX(.5deg)}.monitor-frame:after{right:-6px;width:6px}.hero-screen .desktop-scene{gap:5px;padding:5px}.hero-screen .terminal-body{padding:6px;font-size:6px}.hero-screen .browser-toolbar{height:25px;gap:5px;padding:0 5px;font-size:9px}.hero-screen .browser-toolbar div{height:18px;padding:2px 4px;font-size:6px}.hero-screen .browser-page{height:calc(100% - 25px)}.hero-screen .browser-nav{height:30px;gap:6px;padding:0 6px;font-size:6px}.hero-screen .browser-nav b{gap:3px;font-size:8px}.hero-screen .browser-nav b i{width:8px;height:8px}.hero-screen .browser-nav small{width:16px;height:16px;font-size:6px}.hero-screen .browser-content{height:calc(100% - 30px);padding:11px 8px}.hero-screen .browser-content>small{font-size:5px}.hero-screen .browser-content h2{font-size:13px}.hero-screen .browser-content p{font-size:6px}.hero-screen .browser-metrics{gap:4px;margin-top:9px}.hero-screen .browser-metrics article{gap:1px;padding:5px}.hero-screen .browser-metrics small{font-size:5px}.hero-screen .browser-metrics b{font-size:13px}.hero-screen .browser-metrics i{font-size:5px}.hero-screen .browser-chart{margin-top:6px;padding:5px}.hero-screen .browser-chart header{font-size:6px}.hero-screen .browser-chart header small{font-size:5px}.hero-screen .chart-lines{min-height:55px;margin-top:5px}.hero-screen .browser-chart footer{font-size:4px}}

/* The page scroll only toggles this scene. The pointer and click play at a
   fixed pace; the organiser appears just after the click. */
.hero-screen .dashboard-main{opacity:0;transform:translateY(8px);transition:opacity .12s ease,transform .12s ease;pointer-events:none}
.hero-screen .workspace-card{width:260px;height:176px}
.hero-screen .workspace-new{width:84px;height:176px}
.hero-screen .workspace-card.stacked .window-grid{height:100px;grid-auto-rows:62px}
.hero-screen .workspace-card.stacked .window-tile img{height:44px}
.hero-screen .workspace-card.stacked .window-tile .window-title{height:18px;padding:2px 4px;font-size:8px}
.hero-screen .mini-preview{padding:5px}
.demo-visual .workspace-card.stacked .window-grid{height:85px;grid-auto-rows:55px}
.demo-visual .workspace-card.stacked .window-tile img{height:38px}
.demo-visual .workspace-card.stacked .window-tile .window-title{height:17px;padding:2px 4px;font-size:7px}
.mini-preview{position:relative;flex:1;min-height:0;overflow:hidden;padding:4px 5px;background:#f1eee8;color:#344033;font:6px/1.25 ui-sans-serif,system-ui,sans-serif}
.mini-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:3px;border-bottom:1px solid #d4d8ce;color:#64705d;font-size:5px;letter-spacing:.04em}
.mini-metric{display:flex;flex-direction:column;gap:1px;margin-top:4px}.mini-metric strong{font-size:12px;line-height:1}.mini-metric small{color:#71806a;font-size:5px}
.mini-chart{height:22px;display:flex;align-items:end;gap:3px;margin-top:4px;border-bottom:1px solid #d4d8ce;background:repeating-linear-gradient(to bottom,transparent 0 6px,#e2e6dd 7px 8px)}.mini-chart i{flex:1;background:#b8c998;border-radius:2px 2px 0 0}.mini-chart i:nth-child(1){height:30%}.mini-chart i:nth-child(2){height:56%}.mini-chart i:nth-child(3){height:42%}.mini-chart i:nth-child(4){height:75%}.mini-chart i:nth-child(5){height:62%}.mini-chart i:nth-child(6){height:92%}
.mini-rule{height:2px;width:74%;margin-top:4px;border-radius:2px;background:#d4d8ce}
.mini-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-top:4px}.mini-calendar i{height:9px;display:grid;place-items:center;border-radius:2px;background:#e5e7e0;color:#65715f;font:5px ui-monospace,monospace;font-style:normal}.mini-calendar i.busy{background:#d9a27d;color:#34271f}.mini-event{margin-top:4px;padding:3px;background:#e7e0d6;color:#5c4b3d;font-size:5px}.mini-event b{display:inline-block;width:3px;height:8px;margin-right:2px;background:#cf8962;vertical-align:middle}
.mini-check{display:flex;align-items:center;gap:4px;margin-top:4px;color:#53624d;font-size:5px}.mini-check i{width:8px;height:8px;display:grid;place-items:center;border-radius:50%;background:#c4d3ad;color:#35452c;font-size:6px;font-style:normal}.mini-check.pending i{border:1px solid #c68e69;background:transparent}
.mini-book{display:flex;align-items:center;gap:4px;margin-top:4px}.mini-book>i{width:15px;height:20px;border-radius:2px;background:linear-gradient(140deg,#d9ad84,#a75f4e)}.mini-book:nth-of-type(3)>i{background:linear-gradient(140deg,#9daf8e,#556e60)}.mini-book span{display:flex;min-width:0;flex-direction:column}.mini-book b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:5px}.mini-book small{color:#7b8276;font-size:4px}
.mini-map{height:25px;position:relative;display:flex;flex-direction:column;justify-content:center;margin-top:4px;padding-left:5px;background:repeating-linear-gradient(35deg,#dce3d2 0 8px,#e9e9df 8px 12px);color:#405346}.mini-map i{position:absolute;left:42%;top:45%;width:5px;height:5px;border:1px solid #fff;border-radius:50%;background:#c87957;box-shadow:0 0 0 2px #c8795733}.mini-map b{font-size:6px}.mini-map small{font-size:4px}.mini-route{margin-top:4px;color:#6b7665;font-size:5px}
.hero-screen.hero-open .dashboard-main{opacity:1;transform:none;transition-delay:1.52s}
.hero-screen .hero-pointer{position:absolute;z-index:6;left:calc(100% - 72px);top:calc(100% - 88px);width:54px;height:68px;opacity:0;filter:drop-shadow(0 2px 3px #000);pointer-events:none}
.hero-screen .hero-pointer svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero-screen .pointer-hand{opacity:0;transform:translate(-20px,-6px)}
.hero-screen.hero-open .hero-pointer{animation:hero-pointer-journey 1.72s ease-in-out both}
.hero-screen.hero-open .pointer-arrow{animation:hero-arrow-change 1.72s both}
.hero-screen.hero-open .pointer-hand{animation:hero-hand-change 1.72s both}
.hero-screen.hero-open .dashboard-topbar .bar-workspace{animation:hero-button-click .24s 1.28s both}
@keyframes hero-pointer-journey{
  0%{left:calc(100% - 72px);top:calc(100% - 88px);opacity:0;transform:scale(1)}
  4%{opacity:1}
  70%{left:var(--hero-pointer-x,34px);top:var(--hero-pointer-y,1px);opacity:1;transform:scale(1)}
  76%{left:var(--hero-pointer-x,34px);top:var(--hero-pointer-y,1px);opacity:1;transform:scale(1)}
  81%{left:var(--hero-pointer-x,34px);top:var(--hero-pointer-y,1px);opacity:1;transform:scale(.86)}
  87%{left:var(--hero-pointer-x,34px);top:var(--hero-pointer-y,1px);opacity:1;transform:scale(1)}
  100%{left:var(--hero-pointer-x,34px);top:var(--hero-pointer-y,1px);opacity:0;transform:scale(1)}
}
@keyframes hero-hand-change{0%,69%{opacity:0}74%,87%{opacity:1}100%{opacity:0}}
@keyframes hero-arrow-change{0%,69%{opacity:1}74%,100%{opacity:0}}
@keyframes hero-button-click{0%,20%{background:#40372f;border-color:transparent;filter:none}55%{background:#644a3a;border-color:#e8986a;filter:brightness(1.25)}100%{background:#40372f;border-color:transparent;filter:none}}
@media(prefers-reduced-motion:reduce){.hero-screen .dashboard-main{transition:none}.hero-screen.hero-open .dashboard-main{transition:none}.hero-screen .hero-pointer,.hero-screen .dashboard-topbar .bar-workspace{animation:none!important}}

/* Give the organiser room to breathe and make the details-pane resize affordance
   visible in the product demonstrations. */
.dashboard-main{padding:20px 26px}
.dashboard-toolbar{height:52px;gap:10px}
.dashboard-toolbar .dashboard-button{order:1}
.dashboard-toolbar .dashboard-search{order:2;width:190px;margin-left:0}
.dashboard-search .search-placeholder{margin-left:0!important;color:#93877a}
.dashboard-rule{margin:8px 0 13px}
.activity-list{gap:10px}
.activity-row{padding:10px 14px 11px}
.workspace-strip{gap:12px}
.dashboard-divider{width:22px;cursor:col-resize}
.dashboard-divider:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:linear-gradient(transparent,#675744 12%,#675744 88%,transparent);transform:translateX(-50%)}
.dashboard-divider:after{z-index:1;width:5px;height:42px;border:1px solid #8b7055;border-radius:3px;background:repeating-linear-gradient(to bottom,#ba9775 0 2px,transparent 2px 5px),#332920;box-shadow:0 0 0 4px #191510}
.hero-screen .activity-scroll{scroll-behavior:auto;padding-bottom:5px}
.hero-screen.hero-open .activity-row.research-row{display:block}
.demo-visual .dashboard-main{padding:19px 21px 20px}
.demo-visual .dashboard-toolbar{height:48px;gap:8px}
.demo-visual .dashboard-toolbar .dashboard-search{width:165px}
.demo-visual .dashboard-rule{margin:8px 0 12px}
.demo-visual .activity-list{gap:9px}
.demo-visual .activity-row{padding:9px 11px 10px}
.demo-visual .workspace-strip{gap:8px}
.demo-visual .dashboard-divider{width:18px}
.demo-visual .dashboard-divider:after{height:36px}
/* Slim graphite display hardware: the screen sits in a narrow bezel, with a
   small integrated chin and understated stand instead of a deep picture frame. */
.monitor-assembly{position:relative;width:90%;margin-left:8%;transform:rotateY(6deg) rotateX(.3deg);transform-style:preserve-3d;transform-origin:50% 50%}
.monitor-frame{width:100%;margin:0;padding:5px 5px 10px;transform:none;border:1px solid #393633;border-radius:6px;background:linear-gradient(145deg,#34312e 0%,#191817 14%,#10100f 70%,#262320 100%);box-shadow:0 27px 58px #0009,0 1px 0 #ffffff20 inset,0 0 0 1px #080807}
.monitor-frame:before{content:"";position:absolute;z-index:5;right:15px;bottom:3px;width:4px;height:4px;border:1px solid #181716;border-radius:50%;background:#b98a68;box-shadow:0 0 5px #d69a7066;pointer-events:none}
.monitor-frame:after{display:none}
.monitor-screen{position:relative;border:0;border-radius:1px;background:#10100f;box-shadow:0 0 0 1px #080807}
.monitor-screen:after{content:"";position:absolute;z-index:20;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 0 46%,rgba(255,255,255,.008) 55%,rgba(255,255,255,.022) 65%,rgba(255,255,255,.048) 74%,rgba(255,255,255,.058) 79%,rgba(255,255,255,.04) 85%,rgba(255,255,255,.016) 92%,transparent 98%),linear-gradient(180deg,rgba(255,255,255,.025),transparent 13%);mix-blend-mode:screen}
.hero-screen.dashboard-screen{border-radius:0;box-shadow:none}
.monitor-neck{width:5.2%;max-width:64px;height:auto;aspect-ratio:74/34;clip-path:polygon(24% 0,76% 0,100% 100%,0 100%);background:linear-gradient(90deg,#22211f,#4a4741 50%,#252320);border:0;box-shadow:0 4px 6px #0007}
.monitor-base{width:18%;max-width:190px;height:auto;aspect-ratio:220/10;border:1px solid #4b4842;border-bottom:0;border-radius:50% 50% 2px 2px;background:linear-gradient(#4a4741 0%,#302e2a 48%,#1c1b19 100%);box-shadow:0 -1px 0 #ffffff20 inset,0 3px 7px #0008}
.dashboard-figure{margin-top:86px}
@media(max-width:820px){.monitor-assembly{width:90%;margin-left:7%;transform:rotateY(4deg) rotateX(.3deg)}.monitor-frame{padding:4px 4px 8px}.monitor-neck{width:6%;max-width:56px;aspect-ratio:74/31}.monitor-base{width:20%;max-width:160px;aspect-ratio:220/11}}
@media(max-width:560px){.monitor-assembly{width:100%;margin-left:0;transform:rotateY(1.5deg)}.monitor-neck{width:7%;max-width:48px}.monitor-base{width:24%;max-width:120px}}
@media(max-width:820px){.dashboard-main{padding:18px 16px}.dashboard-toolbar{height:auto;min-height:72px}.dashboard-divider{display:none}.demo-visual .dashboard-main{padding:14px 12px}}
@media(max-width:560px){.dashboard-main{padding:12px 10px}.demo-visual .dashboard-main{padding:10px 8px}}
@media(max-width:820px){.dashboard-figure{margin-top:26px}}

/* A compact feature index immediately follows the animated hero. */
.feature-index{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0 auto 18px;border:1px solid #40372f;background:#1d1915}
.feature-index>a{min-width:0;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:9px;padding:15px 12px;color:#e9e1d7;text-decoration:none;border-right:1px solid #40372f;transition:background .18s,color .18s}
.feature-index>a:last-child{border-right:0}
.feature-index>a:hover,.feature-index>a:focus-visible{background:#29221b;color:#f3ede5;outline:none}
.index-icon{display:grid;place-items:center;color:var(--accent)}
.index-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.index-copy{min-width:0}.index-copy strong,.index-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.index-copy strong{font-size:11px}.index-copy small{margin-top:3px;color:#9f968b;font-size:9px}.index-arrow{align-self:start;color:#998a7d;font-size:12px}
#demos,#quick-access,#keyboard,#gestures{scroll-margin-top:70px}
.shortcut-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.shortcut-row{min-width:0;display:grid;grid-template-columns:minmax(220px,.9fr) minmax(180px,1.1fr);align-items:center;gap:16px;padding:14px 16px;border:1px solid #41372d;background:#1e1a16}
.shortcut-row>div:last-child strong,.shortcut-row>div:last-child small{display:block}.shortcut-row strong{font-size:12px}.shortcut-row small{margin-top:4px;color:#a99f93;font-size:10px}
.shortcut-keys{display:flex;align-items:center;gap:5px;white-space:nowrap;color:#b9aa99;font:10px var(--mono)}
.shortcut-keys kbd{min-width:25px;padding:5px 7px;border:1px solid #5b4c3e;border-bottom-width:2px;background:#2a231c;color:#f0e7dc;text-align:center;font:10px var(--mono)}
.shortcut-more{margin:17px 0 0;text-align:right;font-size:12px}.shortcut-more a{color:var(--accent);text-decoration:none}.shortcut-more a:hover{text-decoration:underline}
.gesture-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.gesture-item{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:16px;padding:18px 20px;border:1px solid #41372d;background:#1e1a16}
.gesture-art{display:grid;place-items:center;width:68px;height:64px;background:#29231d}.gesture-art svg{width:60px;height:52px;fill:none;stroke:#d8c9b7;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.gesture-art .arrow{stroke:var(--accent);stroke-width:2.6}
.gesture-item strong{font-size:13px}.gesture-item p{margin:5px 0 0;color:#aaa094;font-size:11px;line-height:1.5}.gesture-note{margin:14px 0 0;color:#9f968b;font-size:10px}
.shortcut-section .section-head,.gesture-section .section-head{margin-bottom:26px}
@media(max-width:900px){.feature-index{grid-template-columns:repeat(3,minmax(0,1fr))}.feature-index>a:nth-child(3){border-right:0}.feature-index>a:nth-child(n+4){border-top:1px solid #40372f}.shortcut-row{grid-template-columns:1fr;gap:9px}}
@media(max-width:620px){.feature-index{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:0}.feature-index>a{padding:12px 9px;gap:7px}.feature-index>a:nth-child(3){border-right:1px solid #40372f}.feature-index>a:nth-child(2n){border-right:0}.feature-index>a:nth-child(n+3){border-top:1px solid #40372f}.index-icon svg{width:19px;height:19px}.index-copy strong{font-size:10px}.index-copy small{font-size:8px}.shortcut-list,.gesture-list{grid-template-columns:1fr}.shortcut-row{padding:12px}.shortcut-keys{gap:4px;font-size:9px}.shortcut-keys kbd{min-width:22px;padding:5px 5px;font-size:9px}.gesture-item{padding:14px 12px;gap:10px}}

/* Animate the preview's actual layout position. Transforming a distant tile by
   a viewport-derived vector drifted under the tilted monitor's perspective. */
.dashboard-mount[data-demo="move"] .dashboard-screen .drag-ghost{animation:drag-ghost-to-tile 5s ease-in-out infinite}
.dashboard-mount[data-demo="move"] .dashboard-screen .drag-cursor{animation:drag-cursor-to-tile 5s ease-in-out infinite}
@keyframes drag-ghost-to-tile{0%,10%{left:var(--drag-start-x);top:var(--drag-start-y);opacity:0;transform:scale(1)}14%{opacity:1}55%,58%{left:var(--drag-end-x);top:var(--drag-end-y);opacity:1;transform:scale(var(--drag-scale-x,1),var(--drag-scale-y,1))}59%,100%{left:var(--drag-end-x);top:var(--drag-end-y);opacity:0;transform:scale(var(--drag-scale-x,1),var(--drag-scale-y,1))}}
@keyframes drag-cursor-to-tile{0%,10%{left:var(--drag-cursor-x);top:var(--drag-cursor-y);opacity:0}14%{opacity:1}55%,58%{left:var(--drag-cursor-end-x);top:var(--drag-cursor-end-y);opacity:1}59%,100%{left:var(--drag-cursor-end-x);top:var(--drag-cursor-end-y);opacity:0}}

/* Keep the move brisk and make release legible: prepare the destination slot,
   finish the drag, then reveal the moved tile after the ghost has disappeared. */
@keyframes drag-ghost-to-tile{0%,10%{left:var(--drag-start-x);top:var(--drag-start-y);opacity:0;transform:scale(1)}14%{opacity:1}37%,39%{left:var(--drag-end-x);top:var(--drag-end-y);opacity:1;transform:scale(var(--drag-scale-x,1),var(--drag-scale-y,1))}40%,100%{left:var(--drag-end-x);top:var(--drag-end-y);opacity:0;transform:scale(var(--drag-scale-x,1),var(--drag-scale-y,1))}}
@keyframes drag-cursor-to-tile{0%,10%{left:var(--drag-cursor-x);top:var(--drag-cursor-y);opacity:0}14%{opacity:1}37%,39%{left:var(--drag-cursor-end-x);top:var(--drag-cursor-end-y);opacity:1}40%,100%{left:var(--drag-cursor-end-x);top:var(--drag-cursor-end-y);opacity:0}}
@keyframes target-extra-show{0%,40%{opacity:0;transform:translateX(8px)}43%,83%{opacity:1;transform:none}100%{opacity:0}}
@keyframes target-columns{0%,30%{grid-template-columns:1fr}35%,83%{grid-template-columns:repeat(2,minmax(0,1fr))}100%{grid-template-columns:1fr}}
@keyframes drop-target{0%,18%,40%,100%{border-color:#4a4035;box-shadow:none;background:#28221b}25%,38%{border-color:var(--accent);box-shadow:0 0 0 2px #ed9b7055;background:#39291d}43%,83%{border-color:var(--accent);background:#39291d}}

/* Search is live per keystroke: the query grows while each newly unmatched
   preview fades and leaves the grid. Clearing reverses the filtering. */
.dashboard-mount[data-demo="search"] .dashboard-screen .dashboard-search .search-value{animation:search-query 6s linear infinite!important;width:0}
.dashboard-mount[data-demo="search"] .dashboard-screen .dashboard-search .search-caret{display:inline-block;animation:caret .8s step-end infinite}
.dashboard-mount[data-demo="search"] .dashboard-screen .window-tile[data-title]:not([data-title="Planning terminal"]){display:flex;animation:search-filter-first 6s linear infinite}
.dashboard-mount[data-demo="search"] .dashboard-screen .window-tile[data-title="Project notes"]:not([data-title="Planning terminal"]){animation:search-filter-second 6s linear infinite}
.dashboard-mount[data-demo="search"] .dashboard-screen .window-tile[data-title="Property plan"]:not([data-title="Planning terminal"]){animation:search-filter-fifth 6s linear infinite}
.dashboard-mount[data-demo="search"] .dashboard-screen .window-tile[data-title="Planning terminal"]{animation:search-match 6s linear infinite}
.dashboard-mount[data-demo="search"] .dashboard-screen .search-empty{animation:search-empty-result 6s linear infinite}
@keyframes search-query{0%,8%{width:0;animation-timing-function:steps(8,end)}48%,72%{width:8ch;animation-timing-function:steps(8,end)}90%,100%{width:0}}
@keyframes search-filter-first{0%,14%{display:flex;opacity:1;visibility:visible;transform:scale(1)}16%{opacity:0;transform:scale(.96)}18%,90%{display:none;opacity:0;visibility:hidden}92%,100%{display:flex;opacity:1;visibility:visible;transform:scale(1)}}
@keyframes search-filter-second{0%,19%{display:flex;opacity:1;visibility:visible;transform:scale(1)}21%{opacity:0;transform:scale(.96)}23%,87%{display:none;opacity:0;visibility:hidden}89%,100%{display:flex;opacity:1;visibility:visible;transform:scale(1)}}
@keyframes search-filter-fifth{0%,34%{display:flex;opacity:1;visibility:visible;transform:scale(1)}36%{opacity:0;transform:scale(.96)}38%,82%{display:none;opacity:0;visibility:hidden}84%,100%{display:flex;opacity:1;visibility:visible;transform:scale(1)}}
@keyframes search-match{0%,100%{border-color:transparent}50%,74%{border-color:var(--accent);box-shadow:0 0 0 1px #ed9b7055}}
@keyframes search-empty-result{0%,49%{display:none}51%,73%{display:flex}75%,100%{display:none}}
.demo-visual .dashboard-mount .dashboard-screen{height:870px}
.dashboard-toolbar .dashboard-title{margin-right:auto}
.dashboard-toolbar .dashboard-search{order:1;margin-left:0}
.dashboard-toolbar .dashboard-button{order:2}
/* The toolbar actions use one neutral visual weight; the search precedes them. */
.hero-screen .dashboard-toolbar .dashboard-title{margin-right:auto}
.hero-screen .dashboard-toolbar .dashboard-search{order:1;margin-left:0}
.hero-screen .dashboard-toolbar .dashboard-button{order:2}
.hero-screen .dashboard-toolbar .add-activity{background:#2b241d;border-color:#514438;color:var(--text);font-weight:400;box-shadow:none}
@media(max-width:820px){.dashboard-toolbar .dashboard-search{order:1;margin-left:0}.dashboard-toolbar .dashboard-button{order:2}.demo-visual .dashboard-toolbar .dashboard-search{order:1}.demo-visual .dashboard-toolbar .dashboard-button{order:2}}

/* Workspace cards must fit inside their activity panels, including the hero
   version's taller preview cards. */
.dashboard-screen .activity-row{height:216px}
.dashboard-screen.hero-screen .activity-row{height:230px}
@media(max-width:560px){
  .dashboard-screen .activity-row{height:216px}
  .dashboard-screen.hero-screen .activity-row{height:230px}
}

/* Give the feature index enough scale and room to read at a glance. */
.feature-index>a{grid-template-columns:34px minmax(0,1fr) 12px;gap:11px;padding:19px 15px}
.index-icon svg{width:26px;height:26px}
.index-copy strong,.index-copy small{overflow:visible;text-overflow:clip;white-space:normal}
.index-copy strong{font-size:14px;line-height:1.3}
.index-copy small{margin-top:4px;font-size:11px;line-height:1.4}
.index-arrow{font-size:14px}
@media(max-width:900px){.feature-index>a{padding:17px 14px;gap:10px}.index-copy strong{font-size:14px}.index-copy small{font-size:11px}}
@media(max-width:620px){
  .feature-index>a{grid-template-columns:28px minmax(0,1fr) 10px;padding:15px 11px;gap:8px}
  .index-icon svg{width:23px;height:23px}
  .index-copy strong{font-size:12px;line-height:1.25}
  .index-copy small{font-size:10px;line-height:1.35}
  .index-arrow{font-size:12px}
}

/* Once the feature map has passed, keep a quiet section marker in view. It is
   fixed rather than changing the nav's height, so revealing it never shifts
   the page or steals space from the section being read. */
.feature-current{position:fixed;z-index:30;top:12px;left:50%;width:min(1180px,calc(100% - 44px));min-height:42px;padding:7px 12px;display:flex;align-items:center;gap:20px;border:1px solid #ffffff1c;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);box-shadow:0 8px 25px #0005;opacity:0;visibility:hidden;transform:translate(-50%,-8px);transform-origin:top center;transition:opacity .24s ease,transform .45s cubic-bezier(.2,.75,.25,1),visibility .24s}
#demos{scroll-margin-top:0}
.feature-current.is-morphing{opacity:0;visibility:visible;transition:none;transform:translate(calc(-50% + var(--morph-x,0px)),var(--morph-y,0px)) scale(var(--morph-sx,1),var(--morph-sy,1))}
.feature-current.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
.feature-index.is-covered{opacity:0;visibility:hidden;pointer-events:none}
.feature-current-reading{min-width:0;display:flex;align-items:center;gap:11px}
.feature-current-reading span{flex:none;color:var(--accent);font:9px var(--mono);letter-spacing:.12em}
.feature-current-reading strong{overflow:hidden;color:var(--ink);font-size:14px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.feature-current-links{min-width:0;margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:4px}
.feature-current-links a{flex:none;padding:5px 7px;border:1px solid transparent;color:#b3a99c;font-size:10px;line-height:1.2;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.feature-current-links a:hover,.feature-current-links a:focus-visible{border-color:#514438;background:#29221b;color:var(--ink);outline:none}
.feature-current-links a[aria-current="location"]{color:var(--accent)}
@media(max-width:620px){.feature-current{top:8px;width:calc(100% - 24px);min-height:0;padding:7px 9px;display:grid;grid-template-columns:minmax(0,1fr);gap:4px}.feature-current-reading{gap:8px}.feature-current-reading span{font-size:7px}.feature-current-reading strong{font-size:11px}.feature-current-links{width:100%;justify-content:flex-start;gap:3px;overflow-x:auto;scrollbar-width:none}.feature-current-links::-webkit-scrollbar{display:none}.feature-current-links a{padding:4px 6px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.feature-current{transition:none}}

/* Give the feature names and explanation the first read; the live board is a
   shorter supporting example beneath them. */
.demo-carousel{grid-template-columns:250px minmax(0,1fr)}
.demo-tabs{gap:3px;padding:16px 0}
.demo-tab{min-height:62px;padding:10px 14px;gap:12px}
.demo-tab>div{min-width:0;display:grid;gap:4px}
.demo-tab>div strong{font-size:12px;line-height:1.2;font-weight:650}
.demo-tab>div small{color:#938a7f;font-size:10px;line-height:1.25}
.demo-tab.active>div small{color:#c0b3a5}
.demo-stage{gap:17px!important;padding:24px!important}
.demo-copy{grid-template-columns:minmax(190px,.9fr) minmax(260px,1.1fr);grid-template-rows:auto auto auto;align-items:start;gap:6px 24px}
.demo-copy small{grid-column:1;grid-row:1;margin:0}
.demo-copy h3{grid-column:1;grid-row:2;align-self:start;font-size:24px!important;line-height:1.15!important;letter-spacing:-.045em}
.demo-copy p{grid-column:2;grid-row:1 / span 2;align-self:center;max-width:460px;font-size:14px;line-height:1.65}
.demo-hint{grid-column:2;grid-row:3;margin:0;max-width:none;font-size:9px}
.demo-visual{margin-top:2px}
.demo-visual .dashboard-mount .dashboard-screen{height:760px}
@media(max-width:900px){.demo-carousel{grid-template-columns:1fr}.demo-tabs{padding:0}.demo-tab{min-height:64px}.demo-stage{padding:20px!important}.demo-copy{grid-template-columns:minmax(180px,.8fr) minmax(250px,1.2fr);gap:8px 18px}}
@media(max-width:620px){.demo-tab{min-height:58px;padding:9px 8px;gap:7px}.demo-tab>div{gap:3px}.demo-tab>div strong{font-size:10px}.demo-tab>div small{font-size:8px}.demo-copy{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;gap:5px}.demo-copy small{grid-column:1;grid-row:1}.demo-copy h3{grid-column:1;grid-row:2;font-size:21px!important}.demo-copy p{grid-column:1;grid-row:3;font-size:12px}.demo-hint{grid-column:1;grid-row:4}}

/* A consistent, oversized pointer guides the eye through every carousel scene. */
.demo-visual .dashboard-screen .drag-cursor{left:var(--cursor-x,12%);top:var(--cursor-y,24%);width:56px;height:72px;font-size:0;filter:drop-shadow(0 2px 4px #000b)}
.demo-visual .dashboard-screen .drag-cursor svg{display:block;width:100%;height:100%;overflow:visible}
.dashboard-mount[data-demo="search"] .dashboard-screen .drag-cursor{display:none}
.dashboard-mount[data-demo="add"] .dashboard-screen .drag-cursor{animation:click-window 5s ease-in-out infinite}
.dashboard-mount[data-demo="arrange"] .dashboard-screen .drag-cursor{animation:arrange-pointer 6s ease-in-out infinite}
.dashboard-mount[data-demo="preview"] .dashboard-screen .drag-cursor{animation:preview-pointer 5.5s ease-in-out infinite}
.dashboard-mount[data-demo="search"] .dashboard-search{position:relative;overflow:visible}
.dashboard-mount[data-demo="search"] .dashboard-search .search-zoom{position:absolute;z-index:4;left:28px;top:50%;padding:3px 7px;border:1px solid #e8986a;background:#211a14;color:#fff2e5;font:700 14px/1.2 var(--mono);letter-spacing:-.04em;box-shadow:0 0 0 3px #e8986a24,0 3px 9px #0009;white-space:nowrap;transform:translateY(-50%);pointer-events:none}
@keyframes arrange-pointer{0%,12%,33%,100%{opacity:0;transform:scale(1)}16%,29%{opacity:1;transform:scale(1)}23%{opacity:1;transform:scale(.82)}}
@keyframes preview-pointer{0%,12%,100%{opacity:0;transform:scale(1)}16%,29%{opacity:1;transform:scale(1)}23%{opacity:1;transform:scale(.82)}}
@keyframes row-down{0%,14%,100%{transform:translateY(0)}35%,67%{transform:translateY(calc(100% + 8px))}80%{transform:translateY(0)}}
@keyframes row-up{0%,14%,100%{transform:translateY(0)}35%,67%{transform:translateY(calc(-100% - 8px))}80%{transform:translateY(0)}}

/* Accordion demos keep the feature list in the foreground and let the real
   organiser board open directly beneath the selected feature. */
.demo-accordion{width:100%;min-width:0;border:0;background:transparent}
.demo-accordion-item{border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.demo-accordion-item:first-child{border-top:1px solid color-mix(in srgb,var(--ink) 14%,transparent)}
.demo-accordion-heading{margin:0}
.demo-accordion-trigger{width:100%;min-height:76px;padding:14px 4px;display:grid;grid-template-columns:38px minmax(0,1fr) 22px;align-items:center;gap:14px;border:0;border-radius:0;background:transparent;color:var(--ink);text-align:left;cursor:pointer;transition:background .18s,padding .2s,color .18s}
.demo-accordion-trigger:hover,.demo-accordion-trigger:focus-visible{padding-left:12px;padding-right:12px;background:color-mix(in srgb,var(--ink) 4%,transparent);outline:none}
.accordion-number{color:var(--accent);font:10px var(--mono);font-variant-numeric:tabular-nums}
.accordion-label{min-width:0;display:flex;align-items:baseline;gap:16px}
.accordion-label strong{font-size:17px;line-height:1.25;letter-spacing:-.025em;font-weight:650}
.accordion-label small{color:var(--muted);font-size:12px;line-height:1.4}
.accordion-mark{position:relative;width:18px;height:18px;justify-self:end;color:var(--accent)}
.accordion-mark:before,.accordion-mark:after{content:"";position:absolute;left:3px;top:8px;width:12px;height:1px;background:currentColor;transition:transform .2s}
.accordion-mark:after{transform:rotate(90deg)}
.demo-accordion-item.is-open .accordion-mark:after{transform:rotate(0)}
.demo-accordion-item.is-open .demo-accordion-trigger{padding-top:17px;padding-bottom:17px}
.demo-accordion-panel[hidden]{display:none!important}
.demo-accordion-panel{min-width:0;padding:0}
.demo-accordion-content{min-width:0;padding:1px 0 28px}
.demo-stage{width:100%;min-width:0;max-width:100%;gap:15px!important;padding:15px 0 0!important}
.demo-copy{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.demo-copy small{margin:0}
.demo-copy h3{margin:0!important;font-size:24px!important;line-height:1.15!important;letter-spacing:-.045em}
.demo-caption{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:13px 2px 4px}
.demo-caption p{max-width:820px;margin:0;color:var(--muted);font-size:13px;line-height:1.65}
.demo-hint{flex:none;margin:0;max-width:250px;color:var(--muted);font-size:9px;text-align:right}
.demo-visual{margin-top:2px}
.demo-visual .dashboard-mount .dashboard-screen{height:760px}
.dashboard-mount[data-demo="search"] .dashboard-search{width:160px!important}
.dashboard-mount[data-demo="search"] .dashboard-search .search-value,.dashboard-mount[data-demo="search"] .dashboard-search .search-caret{visibility:hidden}
.dashboard-mount[data-demo="search"] .dashboard-screen .dashboard-search .search-zoom{position:absolute;z-index:5;left:50%;right:auto;top:calc(50% + 18px);box-sizing:border-box;width:160px;height:160px;padding:0 20px;display:flex;align-items:center;justify-content:center;gap:11px;border:1px solid #aaa9a2;border-radius:50%;background:radial-gradient(circle at 34% 24%,#555650e8 0,#3a3b37e8 38%,#242522ed 76%,#1b1c1af2 100%);backdrop-filter:blur(1px) saturate(1.1);color:#f0f0eb;white-space:nowrap;box-shadow:0 0 0 3px #d6d6ce18,0 10px 28px #000b,inset 0 1px #ffffff38;transform:translate(-50%,-50%);pointer-events:none}
.dashboard-mount[data-demo="search"] .search-zoom-icon{flex:none;color:#deded7;font:22px/1 var(--sans)}
.dashboard-mount[data-demo="search"] .search-zoom-value{display:inline-block;min-width:0;overflow:hidden;color:#f0f0eb;font:700 19px/1 var(--mono);letter-spacing:-.06em;animation:search-query 6s linear infinite!important;width:0}
.dashboard-mount[data-demo="search"] .search-zoom-value:after{content:"Planning"}
.dashboard-mount[data-demo="search"] .search-zoom-caret{width:2px;height:21px;background:#e4e4dd;animation:caret .8s step-end infinite}

/* The original feature cards physically move into this quiet floating bar;
   only their labels remain, so the transition reads as a morph, not a clone. */
.feature-current{position:fixed;z-index:30;top:10px;left:50%;width:min(1180px,calc(100% - 44px));min-height:40px;padding:6px 4px;display:flex;align-items:center;gap:20px;border:0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);box-shadow:none;opacity:0;visibility:hidden;transform:translate(-50%,-8px);transition:opacity .24s ease,transform .38s cubic-bezier(.2,.75,.25,1),visibility .24s}
.feature-current.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
.feature-current-reading{min-width:0;display:flex;align-items:center;gap:9px}
.feature-current-reading span{flex:none;color:var(--accent);font:8px var(--mono);letter-spacing:.1em}
.feature-current-reading strong{overflow:hidden;color:var(--ink);font-size:12px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.feature-current-links{min-width:0;margin:0 0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.feature-index.is-floating{width:auto!important;max-width:none;margin:0!important;padding:0;display:flex;align-items:center;justify-content:flex-end;gap:4px;border:0;background:transparent}
.feature-index.is-floating>a{min-width:0;flex:none;display:flex;align-items:center;gap:6px;padding:7px 6px;border:0!important;background:transparent!important;color:var(--muted);text-decoration:none;white-space:nowrap;transition:color .16s,opacity .16s}
.feature-index.is-floating>a:last-child{border:0}
.feature-index.is-floating .index-icon{display:none}
.feature-index.is-floating .index-copy{min-width:0}
.feature-index.is-floating .index-copy strong{font-size:10px;font-weight:550}
.feature-index.is-floating .index-copy small,.feature-index.is-floating .index-arrow{display:none}
.feature-index.is-floating>a:hover,.feature-index.is-floating>a:focus-visible,.feature-index.is-floating>a[aria-current="location"]{color:var(--accent);outline:none}
.feature-index.is-floating>a:focus-visible{box-shadow:0 1px currentColor}
#demos{scroll-margin-top:0}
@media(max-width:900px){.feature-current{width:calc(100% - 30px);gap:10px}.feature-current-reading span{display:none}.feature-index.is-floating{gap:0}.feature-index.is-floating>a{padding:7px 5px}.feature-index.is-floating .index-copy strong{font-size:9px}}
@media(max-width:620px){.feature-current{top:6px;width:calc(100% - 20px);min-height:0;padding:5px 2px;display:grid;grid-template-columns:1fr;gap:0}.feature-current-reading{display:none}.feature-current-links{width:100%;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}.feature-current-links::-webkit-scrollbar{display:none}.feature-index.is-floating{width:max-content!important;max-width:none;gap:5px}.feature-index.is-floating>a{padding:5px 7px}.feature-index.is-floating .index-copy strong{font-size:9px}.demo-accordion-trigger{min-height:66px;grid-template-columns:28px minmax(0,1fr) 18px;gap:9px;padding:11px 2px}.accordion-label{display:grid;gap:3px}.accordion-label strong{font-size:14px}.accordion-label small{font-size:10px}.demo-stage{padding-top:9px!important}.demo-copy h3{font-size:21px!important}.demo-caption{display:block;padding:10px 2px 2px}.demo-caption p{font-size:12px}.demo-hint{display:block;margin-top:7px;text-align:left}}
@media(prefers-reduced-motion:reduce){.feature-current,.demo-accordion-trigger,.accordion-mark:before,.accordion-mark:after{transition:none}}
.feature-current{justify-content:flex-end;padding-inline:0}
.feature-current-links{width:100%;justify-content:flex-end}
.feature-index.is-floating>a{position:relative;padding:8px 8px;color:var(--muted)}
.feature-index.is-floating>a[aria-current="location"]{color:var(--ink)}
.feature-index.is-floating>a[aria-current="location"]:after{content:"";position:absolute;left:8px;right:8px;bottom:1px;height:2px;background:var(--accent)}
@media(max-width:620px){.feature-current-links{justify-content:flex-start}}

/* Adding an activity uses the same named-row dialog as the real organiser. */
.dashboard-mount[data-demo="add"] .activity-create-overlay{position:absolute;z-index:20;inset:28px 0 0;display:grid;place-items:center;padding:16px;background:#080706a8;opacity:0;pointer-events:none;animation:activity-dialog-backdrop 7s linear infinite}
.activity-create-dialog{box-sizing:border-box;width:min(560px,100%);padding:23px 25px 21px;border:1px solid #b87755;border-radius:13px;background:#1b1713;color:#f1eee8;box-shadow:0 18px 50px #000a;opacity:0;transform:translateY(9px) scale(.985);animation:activity-dialog-enter 7s cubic-bezier(.2,.75,.25,1) infinite}
.activity-create-dialog h3{margin:0 0 14px;font-size:22px;line-height:1.2;letter-spacing:-.03em}
.activity-create-dialog p{margin:0 0 15px;color:#bcb1a5;font-size:14px;line-height:1.45}
.activity-name-field{position:relative;height:38px;padding:0 10px;display:flex;align-items:center;gap:1px;border:1px solid #b87755;border-radius:7px;background:#211b16;color:#f1eee8;font-size:14px;white-space:nowrap;overflow:hidden}
.activity-name-placeholder{position:absolute;left:10px;color:#93877a;animation:activity-placeholder 7s steps(1,end) infinite}
.activity-name-value{width:0;overflow:hidden;color:#f1eee8;animation:activity-name-type 7s steps(8,end) infinite}
.activity-name-value:after{content:"Research"}
.activity-name-field i{width:1px;height:18px;background:#e8986a;opacity:0;animation:activity-name-caret 7s steps(1,end) infinite}
.activity-create-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}
.activity-create-actions button{height:36px;padding:0 14px;border:1px solid #514438;border-radius:7px;background:#2b241d;color:#ddd4ca;font:inherit;font-size:13px}
.activity-create-actions .activity-create-submit{border-color:#6f4b35;background:#885a3c;color:#21170f;font-weight:650;animation:activity-submit-enable 7s ease-in-out infinite}
.dashboard-mount[data-demo="add"] .dashboard-screen .activity-row.research-row{display:block!important;box-sizing:border-box;height:0;min-height:0;padding:0;border-width:0;overflow:hidden;opacity:0;transform:translateY(12px);animation:activity-row-lifecycle 7s linear infinite}
.dashboard-mount[data-demo="add"] .dashboard-screen .dashboard-button.add-activity{animation:activity-button-press 7s ease-in-out infinite}
.dashboard-mount[data-demo="add"] .dashboard-screen .drag-cursor{animation:activity-pointer-press 7s ease-in-out infinite}
@keyframes activity-dialog-backdrop{0%,12%,75%,100%{opacity:0;visibility:hidden}17%,69%{opacity:1;visibility:visible}}
@keyframes activity-dialog-enter{0%,13%,74%,100%{opacity:0;transform:translateY(9px) scale(.985)}18%,68%{opacity:1;transform:none}}
@keyframes activity-placeholder{0%,29%{opacity:1}30%,71%,100%{opacity:0}}
@keyframes activity-name-type{0%,29%{width:0}53%,67%{width:8ch}72%,100%{width:0}}
@keyframes activity-name-caret{0%,29%,69%,100%{opacity:0}30%,67%{opacity:1}}
@keyframes activity-submit-enable{0%,49%,100%{filter:saturate(.55) brightness(.72);transform:none}53%,63%{filter:saturate(1) brightness(1.12);transform:scale(.98)}68%,76%{filter:saturate(.55) brightness(.72);transform:none}}
@keyframes activity-row-lifecycle{0%,72%,100%{height:0;padding-block:0;border-width:0;opacity:0;transform:translateY(12px)}74%{height:0;padding-block:0;border-width:0;opacity:0;transform:translateY(12px)}82%,94%{height:174px;padding:8px 9px;border-width:1px;opacity:1;transform:none}}
@keyframes activity-button-press{0%,12%,100%{transform:none;filter:none}14%,20%{transform:translateY(1px);filter:brightness(.8)}}
@keyframes activity-pointer-press{0%,7%,13%,100%{opacity:0;transform:none}9%,11%{opacity:1;transform:none}10%{opacity:1;transform:scale(.8)}}
@media(max-width:620px){.activity-create-dialog{padding:17px 16px 15px}.activity-create-dialog h3{font-size:18px}.activity-create-dialog p{font-size:11px}.activity-name-field{height:32px;font-size:11px}.activity-create-actions{margin-top:12px}.activity-create-actions button{height:30px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.dashboard-mount[data-demo="add"] .activity-create-overlay{display:none;animation:none}.dashboard-mount[data-demo="add"] .activity-row.research-row{animation:none;opacity:1;transform:none;display:block;height:174px;padding:8px 9px;border-width:1px}}

/* The preview scene deliberately selects two different windows in sequence. */
.dashboard-mount[data-demo="preview"] .dashboard-screen .source-window{animation:preview-select-first 6.5s ease-in-out infinite}
.dashboard-mount[data-demo="preview"] .dashboard-screen .development-browser{animation:preview-select-second 6.5s ease-in-out infinite}
.dashboard-mount[data-demo="preview"] .dashboard-screen .drag-cursor{animation:preview-pointer-two 6.5s ease-in-out infinite}
.dashboard-mount[data-demo="preview"] .details-content{animation:preview-details-content 6.5s linear infinite}
.dashboard-mount[data-demo="preview"] .details-empty{animation:preview-details-empty 6.5s linear infinite}
.dashboard-mount[data-demo="preview"] .details-preview{position:relative}
.dashboard-mount[data-demo="preview"] .details-preview .preview-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;animation-duration:6.5s;animation-timing-function:linear;animation-iteration-count:infinite}
.dashboard-mount[data-demo="preview"] .preview-terminal-shot,.dashboard-mount[data-demo="preview"] .preview-window-one{animation-name:preview-detail-first}
.dashboard-mount[data-demo="preview"] .preview-browser-shot,.dashboard-mount[data-demo="preview"] .preview-window-two{animation-name:preview-detail-second}
.dashboard-mount[data-demo="preview"] .preview-window-one,.dashboard-mount[data-demo="preview"] .preview-window-two{animation-duration:6.5s;animation-timing-function:linear;animation-iteration-count:infinite}
.dashboard-mount[data-demo="preview"] .preview-window-two{display:inline;opacity:0}
@keyframes preview-select-first{0%,13%,100%{border-color:transparent;background:#171410;box-shadow:none}18%,43%{border-color:var(--accent);background:#38291f;box-shadow:0 0 0 1px #e8986a55}}
@keyframes preview-select-second{0%,48%,100%{border-color:transparent;background:#171410;box-shadow:none}54%,81%{border-color:var(--accent);background:#38291f;box-shadow:0 0 0 1px #e8986a55}}
@keyframes preview-detail-first{0%,16%,100%{opacity:0}21%,47%{opacity:1}54%{opacity:0}}
@keyframes preview-detail-second{0%,44%,100%{opacity:0}52%,82%{opacity:1}89%{opacity:0}}
@keyframes preview-details-content{0%,15%,100%{opacity:0;transform:translateY(7px)}21%,82%{opacity:1;transform:none}}
@keyframes preview-details-empty{0%,14%,100%{opacity:1}21%,83%{opacity:0}}
@keyframes preview-pointer-two{0%,8%,63%,100%{opacity:0;left:var(--cursor-x);top:var(--cursor-y);transform:none}13%,23%{opacity:1;left:var(--cursor-x);top:var(--cursor-y);transform:none}19%{transform:scale(.82)}32%{opacity:1;left:var(--cursor-x);top:var(--cursor-y);transform:none}43%,54%{opacity:1;left:var(--cursor-end-x);top:var(--cursor-end-y);transform:none}49%{transform:scale(.82)}59%{opacity:0;left:var(--cursor-end-x);top:var(--cursor-end-y)}}
@media(prefers-reduced-motion:reduce){.dashboard-mount[data-demo="preview"] .source-window,.dashboard-mount[data-demo="preview"] .development-browser{animation:none;border-color:var(--accent)}.dashboard-mount[data-demo="preview"] .drag-cursor{display:none}.dashboard-mount[data-demo="preview"] .details-content{animation:none;opacity:1}.dashboard-mount[data-demo="preview"] .details-empty{display:none}.dashboard-mount[data-demo="preview"] .preview-terminal-shot,.dashboard-mount[data-demo="preview"] .preview-window-one{animation:none;opacity:1}.dashboard-mount[data-demo="preview"] .preview-browser-shot,.dashboard-mount[data-demo="preview"] .preview-window-two{animation:none;opacity:0}}

/* Keep the accordion board's proportions closer to the desktop organiser and
   give the details divider a clear, usable resize grip. */
.demo-visual .dashboard-divider{width:26px;touch-action:none}
.demo-visual .dashboard-divider:before{width:1px;background:linear-gradient(transparent,#81786d 10%,#81786d 90%,transparent)}
.demo-visual .dashboard-divider:after{width:8px;height:46px;border-color:#b6aa9b;background:repeating-linear-gradient(to bottom,#d0c8bd 0 2px,transparent 2px 5px),#393732;box-shadow:0 0 0 4px #191816,0 1px 5px #0009}
.demo-visual .dashboard-divider:hover:after,.demo-visual .dashboard-divider:focus-visible:after{border-color:#e1ddd5;box-shadow:0 0 0 4px #191816,0 0 0 6px #d0c8bd33,0 1px 5px #0009}
.demo-visual .dashboard-divider:focus-visible{outline:0}
.demo-visual .dashboard-divider.is-resizing,.demo-visual .organiser-content:has(.dashboard-divider.is-resizing){cursor:col-resize;user-select:none}
.demo-visual .details-pane{box-sizing:border-box;width:260px}
@media(max-width:820px){.demo-visual .details-pane{width:100%}}

/* Keep both window previews present and switch them decisively when selection
   changes; a thumbnail should never disappear in a fade. */
.dashboard-mount[data-demo="preview"] .dashboard-screen .details-content{display:block!important;opacity:1;transform:none;animation:none!important}
.dashboard-mount[data-demo="preview"] .dashboard-screen .details-empty{display:none!important;animation:none!important}
.dashboard-mount[data-demo="preview"] .dashboard-screen .details-preview .preview-shot{animation-timing-function:steps(1,end)}
.dashboard-mount[data-demo="preview"] .dashboard-screen .preview-window-one,.dashboard-mount[data-demo="preview"] .dashboard-screen .preview-window-two{animation-timing-function:steps(1,end)}
@keyframes preview-detail-first{0%,49.99%{opacity:1}50%,100%{opacity:0}}
@keyframes preview-detail-second{0%,49.99%{opacity:0}50%,100%{opacity:1}}

/* Quick access is a utility section: label it, then get straight to the tools. */
.quick-access-section{padding:48px 0 58px}
.quick-access-heading{margin:0 0 12px}
.quick-access-heading h2{margin:0;font-size:23px;line-height:1.15;letter-spacing:-.04em;color:var(--muted)}
@media(max-width:620px){.quick-access-section{padding:36px 0 44px}.quick-access-heading h2{font-size:20px}}


/* Compact and consistent spacing for the feature sections. */
.compact-section{padding:44px 0}
.compact-section-heading{max-width:none;margin:0 0 18px}
.compact-section .section-head{margin-bottom:18px}
.compact-section-heading h2{margin:0;font-size:23px;line-height:1.15;letter-spacing:-.04em;color:var(--muted)}
@media(max-width:620px){.compact-section{padding:32px 0}.compact-section-heading{margin-bottom:14px}.compact-section-heading h2{font-size:20px}}


/* Quick access: show the real move flow over a tiled desktop, then retile the source. */
.teleport-demo{position:relative;isolation:isolate;aspect-ratio:16/10;min-height:280px;background:#11100e;border-color:#4a4035;border-radius:10px;box-shadow:0 24px 60px #0008}
.tele-desktop{position:absolute;inset:0;overflow:hidden;background:#171411;color:#eee8df;font:9px/1.5 var(--sans)}
.tele-topbar{position:absolute;inset:0 0 auto;height:23px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;background:#11100f;border-bottom:1px solid #ffffff14;color:#a99f93;font:7px var(--mono)}
.tele-topbar span:first-child{display:flex;align-items:center;gap:6px}.tele-topbar i{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.tele-workarea{position:absolute;inset:23px 0 0;background:#1a1713}
.tele-window{position:absolute;overflow:hidden;border:1px solid #514438;border-radius:3px;background:#211d18;box-shadow:0 2px 8px #0005}
.tele-left{left:1.8%;top:3%;width:47%;height:94%}
.tele-right{left:50.8%;top:3%;width:47.3%;height:45%;animation:tele-right-reflow 6s cubic-bezier(.2,.72,.22,1) infinite}
.tele-source{left:50.8%;top:51.5%;width:47.3%;height:45%;border:2px solid #d98d64;animation:tele-source-depart 6s cubic-bezier(.2,.72,.22,1) infinite}
.tele-terminal{padding:11px 12px;color:#b9c3b1;font:8px/1.9 var(--mono)}.tele-terminal b{color:#e8986a}.tele-terminal span{color:#84977b}.tele-terminal i{color:#e8986a;font-style:normal}
.tele-browser{height:100%;padding:10px 13px;background:#e5e0d7;color:#28241f;font-size:8px}.tele-browserbar{margin:-10px -13px 10px;padding:4px 8px;background:#c9c2b8;color:#5c554b;font:7px var(--mono)}.tele-browser h4{margin:4px 0 7px;font-size:13px}.tele-browser p{margin:0 0 7px;color:#5b554d;line-height:1.55}.tele-browser-line{width:88%;height:3px;margin:5px 0;background:#aaa397}.tele-browser-line.short{width:56%}
.tele-notes{padding:12px 13px;color:#d6c9b7;font:8px/1.8 var(--mono)}.tele-notes b{color:#f0e5d7;font-size:9px}.tele-notes p{margin:6px 0;color:#afa394}
.tele-dim{position:absolute;z-index:3;inset:23px 0 0;background:#080706bd;visibility:hidden;animation:tele-dim-in 6s steps(1,end) infinite}
.tele-chooser{position:absolute;z-index:4;left:6%;right:6%;top:8%;bottom:5%;display:flex;flex-direction:column;gap:7px;padding:12px 13px 9px;border:1px solid #4e4135;border-radius:9px;background:#191511;color:#f1eae1;box-shadow:0 15px 48px #000a;visibility:hidden;animation:tele-modal-in 6s steps(1,end) infinite}
.tele-modal-head,.tele-row-head,.tele-modal-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}.tele-modal-head strong{font-size:15px;letter-spacing:-.03em}.tele-modal-head>span{padding:4px 7px;border:1px solid #453a30;border-radius:5px;background:#252019;color:#d5cabe;font:7px var(--mono)}
.tele-source-card{min-height:42px;display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;background:#282119}.tele-source-card>div:nth-child(2){display:grid;gap:2px}.tele-source-card b{font-size:9px}.tele-source-card small{color:#a99d8e;font-size:7px}.tele-thumb{width:42px;height:30px;display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:3px;border-radius:3px;background:#30271f}.tele-thumb i{background:#151b17;border:1px solid #575143}.tele-thumb i:first-child{grid-row:span 2}.tele-arrow{margin-left:auto;color:#e8986a;font-size:16px}
.tele-search{flex:none;padding:4px 7px;border:1px solid #a56d4d;border-radius:5px;color:#9d9183;font-size:8px}
.tele-activity{display:grid;gap:5px}.tele-row-head b{font-size:9px}.tele-row-head small{padding:3px 6px;border:1px solid #443a30;border-radius:5px;background:#252019;color:#d1c4b5;font:7px var(--mono)}.tele-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.tele-card{min-width:0;height:62px;padding:5px 6px;border:1px solid #40372e;border-radius:6px;background:#211c16;display:flex;flex-direction:column;gap:2px}.tele-card>b{overflow:hidden;font-size:8px;text-overflow:ellipsis;white-space:nowrap}.tele-card>small{overflow:hidden;margin-top:auto;color:#a99b8a;font-size:6px;text-overflow:ellipsis;white-space:nowrap}.tele-mini{height:19px;border-radius:3px;background:#30281f}.mini-current{background:linear-gradient(90deg,#171b17 0 48%,#28231c 48% 52%,#171b17 52%)}.mini-terminal{background:linear-gradient(90deg,#111 0 47%,#333 47% 52%,#111 52%)}.mini-browser{background:linear-gradient(90deg,#ddd8ce 0 48%,#171b17 48% 53%,#ddd8ce 53%)}.tele-card-current{border-color:#d98d64;box-shadow:0 0 0 1px #d98d6466;background:#38271c;animation:tele-current-select 6s steps(1,end) infinite}.tele-target{border-color:#40372e;box-shadow:none;background:#211c16;animation:tele-target-select 6s steps(1,end) infinite}.tele-new{position:relative}.tele-new>strong{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);color:#e8986a;font-size:17px;font-weight:400}.tele-modal-foot{margin-top:auto;padding-top:4px;border-top:1px solid #ffffff15;color:#a99d8f;font-size:6px}.tele-modal-foot>span:last-child{font:7px var(--mono);white-space:nowrap}
@keyframes tele-dim-in{0%,12%,51%,100%{visibility:hidden}13%,50%{visibility:visible}}
@keyframes tele-modal-in{0%,12%,51%,100%{visibility:hidden}13%,50%{visibility:visible}}
@keyframes tele-current-select{0%,35%{border-color:#d98d64;box-shadow:0 0 0 1px #d98d6466;background:#38271c}36%,100%{border-color:#40372e;box-shadow:none;background:#211c16}}
@keyframes tele-target-select{0%,35%{border-color:#40372e;box-shadow:none;background:#211c16}36%,49%{border-color:#d98d64;box-shadow:0 0 0 1px #d98d6466;background:#38271c}51%,100%{border-color:#40372e;box-shadow:none;background:#211c16}}

@keyframes tele-source-depart{0%,50%{visibility:visible;transform:none}52%{visibility:visible;transform:translate(16px,-7px) scale(.96)}53%,99%{visibility:hidden;transform:translate(16px,-7px) scale(.96)}100%{visibility:visible;transform:none}}
@keyframes tele-right-reflow{0%,51%{top:3%;height:45%}56%,99%{top:3%;height:94%}100%{top:3%;height:45%}}
@media(max-width:620px){.teleport-demo{min-height:220px}.tele-chooser{left:4%;right:4%;top:6%;bottom:4%;gap:5px;padding:8px}.tele-modal-head strong{font-size:12px}.tele-source-card{min-height:35px}.tele-card{height:54px;padding:4px}.tele-card>b{font-size:7px}.tele-modal-foot{font-size:5px}.tele-topbar{font-size:6px}.tele-terminal{padding:7px;font-size:6px}.tele-browser{padding:8px;font-size:7px}.tele-notes{padding:8px;font-size:6px}}
@media(prefers-reduced-motion:reduce){.tele-dim,.tele-chooser,.tele-card-current,.tele-target,.tele-source,.tele-right{animation:none!important}.tele-dim{visibility:visible}.tele-chooser{visibility:visible}.tele-card-current{border-color:#d98d64;background:#38271c}.tele-target{border-color:#40372e;background:#211c16}}

.feature:not(.show) .tele-dim,.feature:not(.show) .tele-chooser,.feature:not(.show) .tele-card-current,.feature:not(.show) .tele-card-step-two,.feature:not(.show) .tele-card-step-three,.feature:not(.show) .tele-target,.feature:not(.show) .tele-second-current,.feature:not(.show) .tele-second-target,.feature:not(.show) .tele-chooser-second,.feature:not(.show) .tele-source,.feature:not(.show) .tele-right,.feature:not(.show) .tele-left{animation-play-state:paused}


/* Two quick, sequential moves: notes first, then the browser window. */
.tele-left{animation:tele-left-fill 8s cubic-bezier(.2,.72,.22,1) infinite,tele-terminal-focus 8s steps(1,end) infinite}
.tele-right{animation:tele-browser-lifecycle 8s cubic-bezier(.2,.72,.22,1) infinite}
.tele-source{animation:tele-notes-lifecycle 8s cubic-bezier(.2,.72,.22,1) infinite}
.tele-right{border-color:#514438;animation-name:tele-browser-lifecycle,tele-browser-focus;animation-duration:8s,8s;animation-timing-function:cubic-bezier(.2,.72,.22,1),steps(1,end);animation-iteration-count:infinite,infinite}
.tele-dim{animation:tele-two-overlays 8s steps(1,end) infinite}
.tele-chooser{animation:tele-modal-first 8s linear infinite}
.tele-chooser-second{animation-name:tele-modal-second}
.tele-card-current{animation:tele-current-first 8s steps(1,end) infinite}
.tele-card-step-two{animation:tele-step-two 8s steps(1,end) infinite}
.tele-card-step-three{animation:tele-step-three 8s steps(1,end) infinite}
.tele-target{animation:tele-target-first 8s steps(1,end) infinite}
.tele-second-current{border-color:#40372e;box-shadow:none;background:#211c16;animation:tele-current-second 8s steps(1,end) infinite}
.tele-second-target{border-color:#40372e;box-shadow:none;background:#211c16;animation:tele-target-second 8s steps(1,end) infinite}
@keyframes tele-two-overlays{0%,9%,30%,43%,64%,100%{visibility:hidden}10%,29%,44%,63%{visibility:visible}}
@keyframes tele-modal-first{0%,9%{visibility:hidden;opacity:0}10%{visibility:visible;opacity:0}12%,29%{visibility:visible;opacity:1}30%,100%{visibility:hidden;opacity:1}}
@keyframes tele-modal-second{0%,43%{visibility:hidden;opacity:0}44%{visibility:visible;opacity:0}46%,63%{visibility:visible;opacity:1}64%,100%{visibility:hidden;opacity:1}}
@keyframes tele-current-first{0%,15%{border-color:#d98d64;box-shadow:0 0 0 1px #d98d6466;background:#38271c}16%,100%{border-color:#40372e;box-shadow:none;background:#211c16}}
@keyframes tele-step-two{0%,14%{border-color:#40372e;box-shadow:none;background:#211c16}15%,19%{border-color:#d98d64;box-shadow:0 0 0 1px #d98d6466;background:#38271c}20%,100%{border-color:#40372e;box-shadow:none;background:#211c16}}
@keyframes tele-step-three{0%,19%{border-color:#40372e;box-shadow:none;background:#211c16}20%,24%{border-color:#d98d64;box-shadow:0 0 0 1px #d98d6466;background:#38271c}25%,100%{border-color:#40372e;box-shadow:none;background:#211c16}}
@keyframes tele-target-first{0%,24%{border-color:#40372e;box-shadow:none;background:#211c16}25%,29%{border-color:#d98d64;box-shadow:0 0 0 1px #d98d6466;background:#38271c}30%,100%{border-color:#40372e;box-shadow:none;background:#211c16}}
@keyframes tele-current-second{0%,43%{border-color:#40372e;box-shadow:none;background:#211c16}44%,53%{border-color:#d98d64;box-shadow:0 0 0 1px #d98d6466;background:#38271c}54%,100%{border-color:#40372e;box-shadow:none;background:#211c16}}
@keyframes tele-target-second{0%,53%{border-color:#40372e;box-shadow:none;background:#211c16}54%,63%{border-color:#d98d64;box-shadow:0 0 0 1px #d98d6466;background:#38271c}64%,100%{border-color:#40372e;box-shadow:none;background:#211c16}}
@keyframes tele-notes-lifecycle{0%,29%{visibility:visible;transform:none}31%{visibility:visible;transform:translate(18px,-5px) scale(.96)}32%,99%{visibility:hidden;transform:translate(18px,-5px) scale(.96)}100%{visibility:visible;transform:none}}
@keyframes tele-browser-lifecycle{0%,31%{top:3%;height:45%;visibility:visible}36%,62%{top:3%;height:94%;visibility:visible}65%{top:3%;height:94%;visibility:visible}66%,99%{top:3%;height:94%;visibility:hidden}100%{top:3%;height:45%;visibility:visible}}
@keyframes tele-browser-focus{0%,35%{border-color:#514438;border-width:1px}36%,63%{border-color:#d98d64;border-width:2px}64%,100%{border-color:#514438;border-width:1px}}
@keyframes tele-terminal-focus{0%,65%{border-color:#514438;border-width:1px}66%,99%{border-color:#d98d64;border-width:2px}100%{border-color:#514438;border-width:1px}}
@keyframes tele-left-fill{0%,66%{width:47%}75%,99%{width:94%}100%{width:47%}}
@media(prefers-reduced-motion:reduce){.tele-dim,.tele-chooser,.tele-card-current,.tele-card-step-two,.tele-card-step-three,.tele-target,.tele-second-current,.tele-second-target,.tele-source,.tele-right,.tele-left{animation:none!important}.tele-dim{visibility:visible}.tele-chooser{visibility:visible}.tele-card-current,.tele-second-current{border-color:#d98d64;background:#38271c}.tele-target,.tele-second-target{border-color:#40372e;background:#211c16}.tele-source,.tele-right{visibility:visible}.tele-left{width:47%}}

.tele-cards-many{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:620px){.tele-cards-many{grid-template-columns:repeat(5,minmax(0,1fr))}.tele-cards-many .tele-card{padding:3px 4px}.tele-cards-many .tele-card>b{font-size:6px}.tele-cards-many .tele-card>small{font-size:5px}}


/* Workspace switcher visual, based on its real dialog geometry and controls. */
.workspace-map-demo{position:relative;aspect-ratio:1.32;min-height:424px;background:#0f0d0b;border-color:#51463b;border-radius:11px}
.map-dialog{position:absolute;inset:0 0 35px;display:flex;flex-direction:column;overflow:hidden;padding:14px 14px 0;border:1px solid #4b4036;border-radius:10px;background:#191511;color:#eee7df}
.map-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:10px}
.map-head h4{margin:0;font-size:21px;line-height:1.15;letter-spacing:-.035em}.map-head p{margin:4px 0 0;color:#a99e91;font-size:10px;line-height:1.35}
.map-search{flex:none;width:43%;margin-top:3px;padding:6px 9px;border:1px solid #b87856;border-radius:6px;background:#211b16;color:#a99d90;font-size:10px;line-height:1.2}
.map-activities{flex:1;min-height:0;overflow:hidden;padding-right:2px}
.map-activity{margin:0 0 10px}.map-row-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}.map-row-head strong{font-size:11px}.map-row-head small{color:#9c9184;font-size:9px}
.map-spaces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;width:54%;align-items:stretch}.map-spaces-three{grid-template-columns:repeat(3,minmax(0,1fr));width:77%}
.map-space{min-width:0;height:87px;padding:5px 7px;border:1px solid #40372e;border-radius:7px;background:#211c16;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.map-space>strong{font-size:10px;line-height:1.1;white-space:nowrap}.map-previews{height:36px;flex:none;display:flex;gap:4px;overflow:hidden;padding:2px;border-radius:4px;background:#302820}.map-previews i{flex:1;min-width:0;border:1px solid #55483a;border-radius:2px;background-color:#11130f;background-size:cover}.map-previews .map-terminal{background-image:linear-gradient(90deg,transparent 0 12%,#a2bb7b 12% 14%,transparent 14% 19%,#53664a 19% 76%,transparent 76%),linear-gradient(#222a20,#10130f)}.map-previews .map-editor{background-image:linear-gradient(90deg,#191b18 0 19%,#4f6550 19% 21%,#252a23 21% 100%),linear-gradient(#31382f,#171a16)}.map-previews .map-browser{background-image:linear-gradient(#c9c4ba 0 17%,#ece8df 17% 75%,#b9c7ad 75% 83%,#e9e4da 83%)}
.map-space>span{overflow:hidden;color:#b9ad9f;font-size:9px;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}.map-space>small{overflow:hidden;color:#8f8477;font-size:8px;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}
.map-space.map-select-dev-one,.map-space.map-select-property-one,.map-space.map-select-property-two,.map-space.map-select-planning-one,.map-space.map-select-planning-two,.map-space.map-select-planning-three{animation-duration:6.5s;animation-timing-function:steps(1,end);animation-iteration-count:infinite}
.map-space.map-select-dev-one{animation-name:map-select-dev-one}.map-space.map-select-property-one{animation-name:map-select-property-one}.map-space.map-select-property-two{animation-name:map-select-property-two}.map-space.map-select-planning-one{animation-name:map-select-planning-one}.map-space.map-select-planning-two{animation-name:map-select-planning-two}.map-space.map-select-planning-three{animation-name:map-select-planning-three}
.map-footer{position:relative;z-index:2;flex:none;display:grid;gap:5px;margin:0 -14px;padding:8px 14px 10px;border-top:1px solid #ffffff18;background:#191511;color:#9f9488;font-size:8px;line-height:1.35}
.map-status{position:relative;min-height:11px}.map-footer strong{font-weight:500;color:#c1b5a8}.map-status strong{position:absolute;inset:0;display:block}.map-hint-current{animation:map-hint-current 6.5s steps(1,end) infinite}.map-hint-open{visibility:hidden;animation:map-hint-open 6.5s steps(1,end) infinite}
@keyframes map-hint-current{0%,8%,63%,100%{visibility:visible}9%,62%{visibility:hidden}}
@keyframes map-hint-open{0%,8%,63%,100%{visibility:hidden}9%,62%{visibility:visible}}
@keyframes map-select-dev-one{0%,8%,63%,100%{border:2px solid #e8986a;background:#39291f;box-shadow:0 0 0 1px #e8986a38}9%,62%{border:1px solid #40372e;background:#211c16;box-shadow:none}}
@keyframes map-select-property-one{0%,44%,54%,100%{border:1px solid #40372e;background:#211c16;box-shadow:none}45%,53%{border:2px solid #e8986a;background:#39291f;box-shadow:0 0 0 1px #e8986a38}}
@keyframes map-select-property-two{0%,8%,18%,35%,45%,53%,63%,100%{border:1px solid #40372e;background:#211c16;box-shadow:none}9%,17%,36%,44%,54%,62%{border:2px solid #e8986a;background:#39291f;box-shadow:0 0 0 1px #e8986a38}}
@keyframes map-select-planning-one{0%,17%,27%,100%{border:1px solid #40372e;background:#211c16;box-shadow:none}18%,26%{border:2px solid #e8986a;background:#39291f;box-shadow:0 0 0 1px #e8986a38}}
@keyframes map-select-planning-two{0%,26%,36%,100%{border:1px solid #40372e;background:#211c16;box-shadow:none}27%,35%{border:2px solid #e8986a;background:#39291f;box-shadow:0 0 0 1px #e8986a38}}
@keyframes map-select-planning-three{0%,100%{border:1px solid #40372e;background:#211c16;box-shadow:none}}
.map-key-demo{position:absolute;left:0;right:0;bottom:0;height:27px;display:flex;align-items:center;justify-content:center;gap:11px;color:#8f8579;font-size:7px;letter-spacing:.08em}.map-key-demo>span{white-space:nowrap}.map-key-demo>span i{font-style:normal;color:#6f675e;letter-spacing:0}.map-key-sequence{position:relative;width:32px;height:30px;flex:none}.map-key-sequence kbd{position:absolute;inset:0;display:grid;place-items:center;border:0;background:transparent;box-shadow:none}.map-key-sequence svg{width:29px;height:29px;overflow:visible;fill:none;stroke:#f1b28d;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round;transform-origin:center;animation-duration:6.5s;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes map-arrow-1{0%,8%{opacity:0;transform:scale(.84)}9%{opacity:0;transform:scale(.9)}9.5%{opacity:1;transform:scale(1.12)}11%{opacity:1;transform:scale(1)}19%{opacity:0;transform:scale(.97)}100%{opacity:0;transform:scale(.97)}}
.map-key-1 svg{animation-name:map-arrow-1}
@keyframes map-arrow-2{0%,17%{opacity:0;transform:scale(.84)}18%{opacity:0;transform:scale(.9)}18.5%{opacity:1;transform:scale(1.12)}20%{opacity:1;transform:scale(1)}28%{opacity:0;transform:scale(.97)}100%{opacity:0;transform:scale(.97)}}
.map-key-2 svg{animation-name:map-arrow-2}
@keyframes map-arrow-3{0%,26%{opacity:0;transform:scale(.84)}27%{opacity:0;transform:scale(.9)}27.5%{opacity:1;transform:scale(1.12)}29%{opacity:1;transform:scale(1)}37%{opacity:0;transform:scale(.97)}100%{opacity:0;transform:scale(.97)}}
.map-key-3 svg{animation-name:map-arrow-3}
@keyframes map-arrow-4{0%,35%{opacity:0;transform:scale(.84)}36%{opacity:0;transform:scale(.9)}36.5%{opacity:1;transform:scale(1.12)}38%{opacity:1;transform:scale(1)}46%{opacity:0;transform:scale(.97)}100%{opacity:0;transform:scale(.97)}}
.map-key-4 svg{animation-name:map-arrow-4}
@keyframes map-arrow-5{0%,44%{opacity:0;transform:scale(.84)}45%{opacity:0;transform:scale(.9)}45.5%{opacity:1;transform:scale(1.12)}47%{opacity:1;transform:scale(1)}55%{opacity:0;transform:scale(.97)}100%{opacity:0;transform:scale(.97)}}
.map-key-5 svg{animation-name:map-arrow-5}
@keyframes map-arrow-6{0%,53%{opacity:0;transform:scale(.84)}54%{opacity:0;transform:scale(.9)}54.5%{opacity:1;transform:scale(1.12)}56%{opacity:1;transform:scale(1)}64%{opacity:0;transform:scale(.97)}100%{opacity:0;transform:scale(.97)}}
.map-key-6 svg{animation-name:map-arrow-6}
@keyframes map-arrow-7{0%,62%{opacity:0;transform:scale(.84)}63%{opacity:0;transform:scale(.9)}63.5%{opacity:1;transform:scale(1.12)}65%{opacity:1;transform:scale(1)}73%{opacity:0;transform:scale(.97)}100%{opacity:0;transform:scale(.97)}}
.map-key-7 svg{animation-name:map-arrow-7}
.feature:not(.show) .map-key-sequence svg{animation-play-state:paused}
.feature:not(.show) .map-space,.feature:not(.show) .map-hint-current,.feature:not(.show) .map-hint-open{animation-play-state:paused}
@media(max-width:620px){.workspace-map-demo{aspect-ratio:auto;min-height:360px}.map-dialog{inset:0 0 31px;padding:10px 9px 0}.map-head{gap:8px;padding-bottom:7px}.map-head h4{font-size:15px}.map-head p{font-size:8px}.map-search{width:45%;padding:5px;font-size:8px}.map-activity{margin-bottom:8px}.map-row-head strong{font-size:9px}.map-row-head small{font-size:7px}.map-spaces{width:68%;gap:4px}.map-spaces-three{width:88%;grid-template-columns:repeat(3,minmax(0,1fr))}.map-space{height:70px;padding:4px}.map-space>strong{font-size:8px}.map-previews{height:27px}.map-space>span{font-size:7px}.map-space>small{font-size:6px}.map-footer{margin:0 -9px;padding:6px 9px;font-size:6px}.map-key-demo{height:24px;gap:6px;font-size:6px}.map-key-sequence{width:23px;height:25px}.map-key-sequence svg{width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){.map-space,.map-hint-current,.map-hint-open,.map-key-sequence svg{animation:none!important;opacity:0!important}.map-hint-current{visibility:visible}.map-hint-open{visibility:hidden}.map-space.map-select-dev-one{border:2px solid #e8986a;background:#39291f}.map-space.map-select-property-one,.map-space.map-select-property-two,.map-space.map-select-planning-one,.map-space.map-select-planning-two,.map-space.map-select-planning-three{border:1px solid #40372e;background:#211c16}}