/* Carry the portfolio paper and cobalt through the Tools shell. */
body, body[data-layout=playground] { background:#ffffff; color:#1b1c1c; }
.play-hero h1 em { color:#284fea; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline-color:#284fea; }
.primary:hover,.preview-trigger:hover { background:#284fea; color:#fff; border-color:#284fea; }
.layout-footer { border-color:#d6d7cf; }
.thumb-nav { display:none; }
@media(max-width:700px) {
  body, body.tool-detail { padding-bottom:calc(76px + env(safe-area-inset-bottom,0px)); }
  .thumb-nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:fixed; bottom:0; left:0; right:0; z-index:85; border-top:1px solid #d6d7cf; background:#fffffff5; backdrop-filter:blur(14px); padding:7px max(12px,env(safe-area-inset-right,0px)) calc(7px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px)); gap:5px; }
  .thumb-nav > a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:54px; min-width:0; border-radius:7px; font:10px/1.4 'DM Sans',system-ui,sans-serif; padding:6px; color:#686b61; }
  .thumb-nav svg { width:20px; height:20px; stroke:currentColor; stroke-width:1.5; fill:none; }
  .thumb-nav [aria-current="page"] { color:#284fea; background:#e8edfc; }
  .layout-footer a { display:inline-flex; min-height:44px; align-items:center; }
}