/* "Try it yourself": the film's desktop becomes a working Docnest. Positions follow the app's window geometry in macOS
   points (side shelf 400×640 at 8 from the edge, side peek 640 wide 34 beside it, library 1120×760). On wide screens the
   layer is 1600×1000 points scaled with the film; on narrow screens the frame grows taller and the layer uses CSS pixels. */
.try-layer{position:absolute;left:0;top:0;width:1600px;height:1000px;transform:scale(var(--s,1));transform-origin:0 0;z-index:4;overflow:hidden}
.frame.tall .try-layer{width:100%;height:100%;transform:none}
.try-exit{all:unset;box-sizing:border-box;position:absolute;left:12px;bottom:12px;z-index:9;display:inline-flex;align-items:center;gap:7px;
  min-height:32px;padding:0 12px;border-radius:999px;cursor:pointer;font:600 12px/1 var(--ui);color:var(--paper);
  background:rgba(12,13,16,.72);box-shadow:inset 0 0 0 1px rgba(236,238,242,.16)}
.try-exit:hover{background:rgba(12,13,16,.9)}
.try-exit:focus-visible{outline:2px solid var(--nest-hi);outline-offset:3px}
.try-exit svg{width:13px;height:13px}

/* menu bar with the Docnest status item and its menu */
.t-menubar{position:absolute;left:0;top:0;right:0;height:30px;display:flex;align-items:center;gap:20px;padding:0 18px;font-size:13.5px;color:#f5f7fb;
  background:rgba(10,14,24,.62);z-index:20;letter-spacing:-.005em}
.t-menubar>b{font-weight:700}
.t-menubar>span{opacity:.92}
.t-mb-r{margin-left:auto;display:flex;align-items:center;gap:14px}
.t-status{width:28px;height:24px;display:grid;place-items:center;border-radius:5px}
.t-status[aria-expanded="true"],.dn .t-status:hover{background:rgba(255,255,255,.18)}
.t-status img{display:block;filter:invert(1)}
.t-clock{font-variant-numeric:tabular-nums}
.t-menu{position:absolute;top:30px;right:150px;z-index:30;min-width:280px;padding:5px;border-radius:10px;background:rgba(36,38,44,.97);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16),0 16px 40px rgba(0,0,0,.45);font-size:13px}
.t-menu p{margin:0;padding:5px 10px;color:rgba(242,245,250,.5)}
.t-menu hr{border:0;height:1px;margin:5px 8px;background:rgba(255,255,255,.12)}
.t-menu button{display:flex;width:100%;justify-content:space-between;gap:24px;padding:5px 10px;border-radius:5px;color:#f2f5fa}
.t-menu button:hover,.t-menu button:focus-visible{background:#2f6be4;outline:none}
.t-menu button:disabled{color:rgba(242,245,250,.4);cursor:default;background:none}
.t-menu kbd{font:inherit;color:rgba(242,245,250,.55)}
.t-hint{position:absolute;right:64px;top:calc(50% + 5px);margin:0;max-width:420px;white-space:nowrap;text-align:right;font:13px/1.5 var(--ui);color:rgba(236,238,242,.75);
  pointer-events:none;transition:opacity .3s ease}
.try-layer.used .t-hint{opacity:0}
.hint-touch{display:none}
@media (hover:none),(pointer:coarse){.hint-touch{display:inline}.hint-pointer{display:none}}

/* side shelf: handle, panel, wide page */
.dn-list-wrap{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.dn-list-wrap>.dn-list{flex:1}
.dn-search{flex-basis:100%;margin-top:8px}
.dn-search input{box-sizing:border-box;width:100%;height:30px;padding:0 10px;border-radius:10px;border:0;background:rgba(38,50,70,.72);color:var(--text);font:13px/1 inherit}
.dn-search input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.dn-head{flex-wrap:wrap}
.play-shelf{position:absolute;inset:30px 0 0 0;pointer-events:none}
.play-shelf>*{pointer-events:auto}
.play-shelf .dn-handle{position:absolute;right:0;top:calc(50% - 52px);width:56px;height:104px;z-index:3;border-radius:28px 0 0 28px}
.play-shelf .dn-handle:focus-visible{outline-offset:-3px;border-radius:28px 0 0 28px}
.play-shelf .dn-line{right:2px;top:32px;transform-origin:100% 50%;transition:opacity .2s ease,transform .34s cubic-bezier(.3,1.2,.5,1)}
.play-shelf .dn-line>i{transition:opacity .3s ease}
.play-shelf .dn-capsule{right:6px;top:6px;opacity:0;transform:scale(.4);transition:opacity .18s ease,transform .34s cubic-bezier(.3,1.25,.5,1)}
.play-shelf .dn-ring path{stroke-dasharray:1 1;stroke-dashoffset:1}
.play-shelf .dn-handle.dwell .dn-ring path{stroke-dashoffset:0;transition:stroke-dashoffset .55s linear}
.play-shelf[data-state=capsule] .dn-capsule{opacity:1;transform:none}
.play-shelf[data-state=capsule] .dn-line{opacity:0;transform:scale(1.6)}
.play-shelf[data-state=panel] .dn-line,.play-shelf[data-state=page] .dn-line{opacity:0}
.play-shelf .dn-panel{right:8px;top:max(8px,calc(50% - 320px));width:min(400px,calc(100% - 16px));height:min(640px,calc(100% - 16px));z-index:4}
.play-shelf .dn-page{right:8px;top:max(8px,calc(50% - 320px));width:min(680px,calc(100% - 16px));height:min(640px,calc(100% - 16px));z-index:6}
.play-shelf .dn-undo{opacity:1;z-index:2}
.play-shelf .dn-selbar{z-index:3}
.play-shelf .dn-selbar:not([hidden])~.dn-undo{bottom:56px}
.play-shelf .dn-sugbar-slot:not(:empty)~.dn-selbar,.play-shelf .dn-sugbar-slot:not(:empty)~.dn-undo{bottom:46px}
.play-shelf .dn-sugbar-slot:not(:empty)~.dn-selbar:not([hidden])~.dn-undo{bottom:90px}
.play-shelf .dn-talk{right:2px;top:77px;opacity:1;transition:opacity .14s ease-out}
.play-shelf[data-state=capsule] .dn-talk,.play-shelf[data-state=panel] .dn-talk,.play-shelf[data-state=page] .dn-talk{opacity:0}
.play-shelf .dn-capdot{opacity:1}
/* the shelf ⋯ menu (Shelf options) */
.dn-omenu{position:absolute;right:18px;top:52px;z-index:8;min-width:220px;padding:5px;border-radius:10px;background:rgba(36,38,44,.98);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16),0 16px 40px rgba(0,0,0,.45);font-size:13px}
.dn-omenu hr{border:0;height:1px;margin:5px 8px;background:rgba(255,255,255,.12)}
.dn-omenu button{display:flex;width:100%;padding:5px 10px;border-radius:5px;color:#f2f5fa}
.dn-omenu button:hover,.dn-omenu button:focus-visible{background:#2f6be4;outline:none}
.dn-omenu button:disabled{color:rgba(242,245,250,.4);cursor:default;background:none}
.play-shelf .dn-row{touch-action:pan-y}
.play-shelf .dn-row.peeking .dn-row-fill{opacity:1;background:var(--sel)}
.play-shelf .dn-row.peeking .dn-acts{opacity:1}
.play-shelf .dn-row.peeking .dn-time,.play-shelf .dn-row.peeking .dn-slot>*{opacity:0}
.play-shelf .dn-suggest{position:relative}
.play-shelf .dn-ln.ready{transition:transform .3s cubic-bezier(.3,1.25,.5,1),opacity .25s ease}
.play-shelf .dn-ln.gone{opacity:0;pointer-events:none}
.play-shelf .dn-ln>.hlb,.play-shelf .dn-ln>.mk{transition:opacity .45s ease}
.play-shelf .dn-ln.lit>.hlb,.play-shelf .dn-ln.lit>.mk{opacity:1}
.play-shelf .dn-play.playing .pi{opacity:0}
.play-shelf .dn-play.playing .pa{opacity:1}
.dn .dn-changes:disabled{opacity:.45;cursor:default}
.dn .dn-body:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.dn .dn-track:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:12px}
@media (hover:none),(pointer:coarse){.dn .dn-acts,.dn .dn-sec .dn-all{opacity:1}.dn .dn-time,.dn .dn-slot>*{opacity:0}}

/* side peek: a pinned document window beside the shelf, 640 wide with a 6 pt rim */
.t-peek{position:absolute;right:442px;top:64px;width:min(640px,calc(100% - 458px));height:min(900px,calc(100% - 100px));z-index:7;
  padding:6px;border-radius:28px;background:#3a4b65;box-shadow:0 12px 26px rgba(0,0,0,.28)}
.t-peek .dn-page-in{position:absolute;inset:6px;border-radius:22px;background:var(--bg)}
.t-peek .dn-page-head{padding:12px 14px 12px 18px}
.t-peek .dn-body{padding:26px 34px 34px 40px}
.t-peek .dn-doc{max-width:560px}
.frame.tall .t-peek{left:8px;right:8px;top:38px;width:auto;height:calc(100% - 46px)}

/* changes in the document: the old blocks wait behind "Previous"; on open the marks glow in once (opacity and transform only) */
.dn-ib.was{display:none}
.dn-ib.was.show{display:block}
.dn-marks-in .dn-ib.mod,.dn-marks-in .dn-ib.add{animation:dn-in .62s cubic-bezier(.3,1.1,.5,1) .45s both}
.dn-marks-in .dn-ib.mod>.dn-band,.dn-marks-in .dn-ib.add>.dn-band{animation:dn-glow .75s ease-out .45s both}
.dn-marks-in .dn-ib.del>.dn-band,.dn-marks-in .dn-ib.del>.dn-sign{animation:dn-fade .4s ease-out .3s both}
.dn-marks-in .dn-ib.mod>.dn-sign,.dn-marks-in .dn-ib.add>.dn-sign,.dn-marks-in .dn-tog{animation:dn-fade .4s ease-out .75s both}
@keyframes dn-in{0%,30%{opacity:0;transform:translateY(-.25em)}100%{opacity:1;transform:none}}
@keyframes dn-glow{0%,40%{opacity:0}75%{opacity:1;transform:scaleY(1.06)}100%{opacity:1;transform:none}}
@keyframes dn-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.try-layer *,.try-layer *::before{transition:none!important;animation:none!important}}
/* narrow screens: the way out sits in the menu bar, and the peek header wraps under the title */
.frame.tall .try-exit{top:3px;bottom:auto;left:8px;min-height:24px;padding:0 10px}
.frame.tall .t-menubar>b,.frame.tall .t-menubar>span{display:none}
.frame.tall .t-peek .dn-page-head{flex-wrap:wrap;row-gap:8px}
.frame.tall .t-peek .dn-page-tt{flex-basis:100%}
/* the shelf header: Documents | Conversations and the tools stay on one row; the review chip drops below */
.frame.tall .dn-head{row-gap:8px}
.frame.tall .dn-head .dn-chip{order:3}
.frame.tall .t-peek .dn-body{padding:18px 16px 24px 30px}
.frame.tall .t-menu{right:8px;left:8px;min-width:0}
.frame.tall .t-hint{right:56px;white-space:normal;max-width:220px}
/* under 360 px the date gives way so Watch again never covers the Docnest item */
@media (max-width:359px){.frame.tall .t-date{display:none}}