/* "Look inside" (WYG.look, MONO-2385): the `.fte-look` part of the FT.c board (canvas NsFtE, Dima's pick, 27 Oct),
   from origin/feat/shelf-s1-ftc public/_site/shelf/css/NsFtE.css, classes renamed fte- to wyl-. Two rows of tabs (the
   three, and everything around them), one line, one screen with one camera on the real app stills.
   Tokens are base.css's. Kept literals, which have no token: #fff (the main tabs and the screen's frame), #f2f5f3
   (the view behind a still while it loads) and the board's three border tints.
   The block is its own container, so it lays out by its own width wherever the page puts it (the board's .ns did
   this). The page owns the spacing above it; set --wyl-ground to the section's background if it is not --bg. */
@property --wyl-p{syntax:'<percentage>';inherits:false;initial-value:0%}
.wyl{container:wyl / inline-size;width:100%;min-width:0;box-sizing:border-box;color:var(--fg);font-family:var(--body)}
.wyl *,.wyl *::before,.wyl *::after{box-sizing:border-box}
.wyl-h{margin:0;font:600 34px/1.05 var(--display);letter-spacing:-.03em;color:var(--fg)}
.wyl-groups{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:28px}
.wyl-groups > div{min-width:0}
.wyl-gk{margin:0 0 10px;font:700 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.wyl-gk--main{color:var(--primary)}
.wyl-tabs{display:flex;flex-wrap:wrap;gap:10px}
.wyl-tab{display:inline-flex;align-items:center;gap:10px;min-height:46px;margin:0;padding:0 18px 0 14px;border-radius:999px;border:1.5px solid transparent;background:linear-gradient(var(--wyl-ground,var(--bg)),var(--wyl-ground,var(--bg))) padding-box,linear-gradient(rgb(16 32 27 / .13),rgb(16 32 27 / .13)) border-box;font:600 15px/1 var(--body);color:var(--muted);cursor:pointer;white-space:nowrap;transition:color .3s ease,box-shadow .3s ease;-webkit-tap-highlight-color:transparent}
.wyl-tab:hover{color:var(--fg)}
.wyl-tab:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.wyl-tab.main{font-size:16px;color:var(--fg);background:linear-gradient(#fff,#fff) padding-box,linear-gradient(rgb(5 97 75 / .28),rgb(5 97 75 / .28)) border-box}
.wyl-tab svg{flex:none;width:18px;height:18px;color:var(--faint);transition:color .3s ease}
.wyl-tab.main svg{color:var(--primary)}
/* the chosen tab: its border fills over the dwell while the tabs move on by themselves, and is full once one is picked
   (and without the script) */
.wyl-tab.on{--wyl-p:100%;color:var(--fg);background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from -90deg,var(--primary) var(--wyl-p),rgb(5 97 75 / .16) var(--wyl-p)) border-box;box-shadow:0 8px 20px -12px rgb(30 60 50 / .35)}
.wyl-tab.on.auto{animation:wyl-fill var(--wyl-dwell) linear forwards}
.wyl-tab.on.held{--wyl-p:100%}
.wyl-tab.on svg{color:var(--primary)}
@keyframes wyl-fill{from{--wyl-p:0%}to{--wyl-p:100%}}
.wyl-lines{display:grid;margin:22px 0 0;max-width:64ch}
.wyl-line{grid-area:1/1;margin:0;font-size:16.5px;line-height:1.55;color:var(--muted);opacity:0;transform:translateY(4px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.wyl-line.on{opacity:1;transform:none}
.wyl-line b{color:var(--fg);font-weight:600}
.wyl-screen{margin-top:24px;padding:10px;border-radius:24px;background:#fff;box-shadow:var(--elev-float)}
.wyl-view{position:relative;aspect-ratio:16/10;border-radius:15px;overflow:hidden;background:#f2f5f3;box-shadow:inset 0 0 0 1px var(--hair);isolation:isolate}
.wyl-stage{position:absolute;inset:0;transform-origin:0 0;will-change:transform;backface-visibility:hidden}
.wyl-drift{position:absolute;inset:0;transform-origin:50% 50%;animation:wyl-drift 14s ease-in-out infinite alternate;will-change:transform}
.wyl-drift img{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;opacity:0;transition:opacity 1s cubic-bezier(.22,.61,.36,1)}
.wyl-drift img.on{opacity:1}
@keyframes wyl-drift{from{transform:scale(1)}to{transform:scale(1.025) translate(-.4%,-.3%)}}
@media (prefers-reduced-motion:reduce){
  .wyl-tab.on.auto{animation:none;--wyl-p:100%}
  .wyl-drift{animation:none}
  .wyl-line{transform:none;transition:opacity .2s ease}
  .wyl-drift img{transition:opacity .2s ease}
}
/* phone: the tab rows scroll inside themselves, never the page */
@container wyl (max-width:560px){
  .wyl-h{font-size:28px}
  .wyl-tabs{flex-wrap:nowrap;overflow-x:auto;padding:4px 4px 18px;margin:-4px -4px -12px;scrollbar-width:none;scroll-behavior:smooth;overscroll-behavior-x:contain}
  .wyl-tabs::-webkit-scrollbar{display:none}
  .wyl-tab{flex:none;min-height:44px;font-size:14.5px;padding:0 16px 0 12px}
  .wyl-tab.main{font-size:15px}
  .wyl-line{font-size:15.5px}
  .wyl-screen{padding:6px;border-radius:18px}
  .wyl-view{border-radius:13px}
}
/* the real app in the frame (MONO-2396): a button on the still starts it; the frame then fills the screen */
.wyl-try{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:10px;background:linear-gradient(rgb(242 245 243 / .1),rgb(242 245 243 / .55))}
.wyl-go{min-height:52px;padding:0 26px;border:0;border-radius:999px;background:var(--primary);color:#fff;font:600 16px/1 var(--body);cursor:pointer;box-shadow:0 14px 30px -14px rgb(5 60 45 / .7);transition:transform .2s ease,box-shadow .2s ease}
.wyl-go:hover{transform:translateY(-1px);box-shadow:0 18px 34px -14px rgb(5 60 45 / .75)}
.wyl-go:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.wyl-try p{margin:0;padding:4px 12px;border-radius:999px;background:rgb(255 255 255 / .85);font:500 13.5px/1.3 var(--body);color:var(--fg)}
.wyl-app{position:absolute;inset:0;z-index:3;width:100%;height:100%;border:0;background:#fff}
.wyl-close{position:absolute;top:10px;right:10px;z-index:4;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:rgb(16 32 27 / .78);color:#fff;cursor:pointer}
.wyl-close svg{width:18px;height:18px}
.wyl-close:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.wyl-close[hidden]{display:none}
.wyl-live .wyl-try{display:none}
.wyl-live .wyl-drift{animation:none}
.wyl-fail{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:#f2f5f3}
.wyl-fail a{min-height:46px;display:inline-flex;align-items:center;padding:0 22px;border-radius:999px;background:var(--primary);color:#fff;font:600 15px/1 var(--body);text-decoration:none}
@media (prefers-reduced-motion:reduce){.wyl-go,.wyl-go:hover{transition:none;transform:none}}
@container wyl (max-width:560px){
  .wyl-go{min-height:46px;padding:0 20px;font-size:15px}
}