/* Two persistent displays. Switching changes stacking, never window geometry. */
/* All features share a canvas, including space for the preview footer and hint. */
.stage[data-feature]{height:clamp(548px,calc(100svh - 190px),640px)}
.desktop-preview{position:absolute;inset:78px 32px 98px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;pointer-events:none;transition:opacity .18s ease}
.stage[data-shelf=open] .desktop-preview{opacity:.26}
.stage[data-shelf=open]:has(.peek:not([hidden])) .desktop-preview{opacity:.16}
.stage[data-shelf=open]:has(.peek:not([hidden])) .demo-display>span{visibility:hidden}
.stage[data-shelf=open]:has(.peek:not([hidden])) .desktop-window>header strong,
.stage[data-shelf=open]:has(.peek:not([hidden])) .desktop-window .page-screen{visibility:hidden}
.demo-display{position:relative;min-width:0;display:flex;flex-direction:column;gap:9px}
.demo-display>span{font-size:11px;color:#596153;text-align:center;order:2}
.display-surface{position:relative;aspect-ratio:16/10;min-height:0;border:1px solid #f6f5ee9c;border-radius:9px;background:#e3dfd6;box-shadow:0 2px 5px #44463813;overflow:hidden}
.demo-display[data-desktop-display=external] .display-surface{background:#ccd2c7}
.display-surface:before{content:"";position:absolute;width:110%;height:90%;left:-22%;bottom:-50%;border-radius:50%;background:#f5f1e24d;transform:rotate(-15deg)}
.desktop-window{position:absolute;background:#fafbf8;border:1px solid #fafbf8c9;border-radius:6px;box-shadow:0 3px 12px #35402e20;overflow:hidden}
.desktop-window>header{display:flex;align-items:center;gap:6px;height:20px;padding:0 7px;background:#f5f5ef;border-bottom:1px solid #e7e9e1}
.desktop-window>header strong{font-size:8px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#61685a}
.desktop-window .traffic{gap:3px}.desktop-window .traffic i{width:4px;height:4px;background:#c8cbc0}
.desktop-window .page-screen{height:calc(100% - 20px)}
.desktop-window[data-window-id=social]{left:5%;top:7%;width:62%;height:71%}
.desktop-window[data-window-id=video]{left:23%;top:21%;width:68%;height:72%}
.desktop-window[data-window-id=paper]{left:17%;top:12%;width:61%;height:79%}
.desktop-window[data-window-id=blog]{left:7%;top:9%;width:68%;height:76%}
.desktop-window[data-window-id=notes]{left:25%;top:24%;width:67%;height:70%}
.desktop-window.is-front{z-index:1}
.desktop-window.has-focus-cue:after{content:"";position:absolute;inset:0;border:2px solid #52785c;border-radius:5px;pointer-events:none}
.stage .active-window,.stage[data-shelf=open] .active-window{inset:auto 20px 32px;width:auto;max-width:none;transform:none;border:0;border-radius:0;background:none;box-shadow:none;animation:none;overflow:visible}
.stage .active-window>header{display:flex;justify-content:center;gap:15px;height:auto;padding:0;border:0;background:none;font-size:11px;color:#53604d}
.stage .active-window .text-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;text-decoration:underline;text-underline-offset:4px;white-space:nowrap;border-radius:6px}
.stage .active-window .text-button:hover{background:#edf0e66b}
.stage .active-window .text-button:focus-visible{outline:2px solid #687e62;outline-offset:2px}
.stage .active-window>header{align-items:center}
.stage .shelf{position:relative;z-index:2}
.stage .peek{z-index:3}
@media(max-width:1050px){.desktop-preview{gap:14px;inset-inline:20px}.desktop-window>header strong{font-size:7px}}
@media(max-width:767px){
 .stage[data-feature]{height:650px}
 .desktop-preview{inset:70px 20px 112px;grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:12px}
 .demo-display{gap:6px}.demo-display>span{font-size:10px}
 .stage .active-window,.stage[data-shelf=open] .active-window{bottom:48px;inset-inline:14px}
 .stage .active-window>header{font-size:9px;gap:10px}
 .stage #active-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .stage .active-window .text-button{font-size:10px}
 .stage[data-feature=windows] .stage-note,.stage[data-feature=collections] .stage-note{bottom:10px;inset-inline:12px}
}
@media(prefers-reduced-motion:reduce){.desktop-preview{transition:none}}

/* Returning to the shelf has a quiet hit target. */
.stage .active-window .text-button {
  background: #f8f8f1c9;
  border: 1px solid #cdd4c466;
  border-radius: 999px;
  text-decoration: none;
  color: #40573f;
}
.stage .active-window .text-button:hover { background: #fdfdf7; }

/* A contained canvas leaves room for the feature controls and complete preview. */
.showcase.wrap { max-width:1060px; scroll-margin-top:0; }
.stage .shelf { padding-top:18px; }
.stage .shelf-toolbar { height:38px; }
.stage .rail-viewport { margin:10px 22px 0; padding-top:8px; }
.stage .window-rail { grid-auto-columns:196px; gap:14px; padding-bottom:10px; }
.stage .window-rail:has(.window-card:last-child:nth-child(-n+3)) { justify-content:center; }
.stage .thumbnail { aspect-ratio:1.9; }
.stage .card-info { padding:8px 9px 9px; gap:7px; }
.stage .card-info strong { font-size:11px; }
.stage .card-info small { font-size:9px; }
.stage .peek { position:absolute; top:252px; margin-top:0; width:400px; max-width:calc(100% - 40px); }
.stage .peek > header { padding:8px 12px 7px; }
.stage .peek > header strong { font-size:11px; }
.stage .peek > header span { font-size:9px; }
.stage .peek > footer { font-size:9px; padding:7px 12px; }
.stage .peek-content .page-screen { aspect-ratio:5/3; }
.stage .stage-note { bottom:12px; font-size:10px; }
.stage .active-window { bottom:37px; }
.stage[data-shelf=open] .active-window { visibility:hidden;pointer-events:none; }
.stage .tool-window { width:76%; max-width:700px; grid-template-columns:145px 1fr; }
.stage .tool-main { padding:26px; }
.stage .tool-window aside { padding-inline:11px; }
.gallery-controls { margin-top:19px; }
.gallery-caption { padding-top:16px; }
.gallery-source { margin-top:16px; padding-top:14px; }
.stage .app-icon.terminal { background:#3d4841; color:#f2f3e9; }
.stage .app-icon.docs { background:#e7e9df; color:#68765c; }
.stage .app-icon:is(.editor,.terminal,.docs) svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; }
.desktop-window[data-window-id=editor] { left:10%;top:14%;width:78%;height:80%; }
.desktop-window[data-window-id=terminal] { left:4%;top:43%;width:70%;height:51%; }
.desktop-window[data-window-id=docs] { left:24%;top:5%;width:71%;height:84%; }
@media (min-width:768px) and (max-height:820px) {
 .stage .peek { top:222px;width:310px; }
 .stage .shelf { padding-top:12px; }
 .stage .shelf-toolbar { height:36px; }
 .stage .rail-viewport { margin-top:6px;padding-top:6px; }
 .stage .window-rail { grid-auto-columns:174px;padding-top:16px; }
}
@media (min-width:768px) and (max-width:1050px) {
 .stage .tool-window { width:86%;grid-template-columns:130px 1fr; }
}
@media (max-width:767px) {
 .showcase.wrap{scroll-margin-top:0}
 .stage .shelf { padding-top:18px; }
 .stage .shelf-toolbar{height:39px}
 .stage .rail-viewport { margin:12px 0 0;padding:9px 16px 0; }
 .stage .window-rail{grid-auto-columns:190px;gap:12px;justify-content:start!important}
 .stage .peek{top:252px;width:calc(100% - 30px);max-width:400px}
 .stage .active-window{bottom:48px}
 .stage .tool-window{width:calc(100% - 26px);grid-template-columns:1fr}
 .stage .tool-main{padding:22px 23px}
 .stage .tool-window aside{padding:10px 12px}
 .stage .stage-note{bottom:11px;font-size:9px}
}