/* Tide it: a mini Tide-1 page (Test, Memory, Policies) in each example. Site tokens only. */
#tp-new .tt-panel{padding:var(--s-4) var(--s-6) var(--s-4)}
#tp-new .tt-panel .tp-context{margin-bottom:var(--s-3)}
#tp-new .tt-panel .tp-context h3{margin:0}
#tp-new .tt-panel .tpn-side{flex-wrap:nowrap;gap:var(--s-3)}
#tp-new .tt-panel .tp-run{width:auto;min-width:112px}

/* The window */
#tp-new .tt-app{border:1px solid var(--g-line2);border-radius:var(--r-tag);background:var(--g-raise);min-width:0}
#tp-new .tt-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:0 var(--s-4);border-bottom:1px solid var(--g-line)}
#tp-new .tt-tabs{display:flex;gap:var(--s-1)}
#tp-new .tt-tabs [role=tab]{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:0 var(--s-3);border:0;background:none;color:var(--g-mute);font:400 16px/1 var(--sans,inherit);cursor:pointer;box-shadow:inset 0 -2px 0 transparent;transition:color .3s,box-shadow .3s,background-color .3s}
#tp-new .tt-tabs [role=tab]:hover{color:var(--g-body)}
#tp-new .tt-tabs [role=tab][aria-selected=true]{color:var(--g-hi);font-weight:600;box-shadow:inset 0 -2px 0 var(--g-lit)}
#tp-new .tt-tabs [role=tab].is-lit{color:var(--g-hi);background:var(--g-tint);box-shadow:inset 0 -2px 0 var(--g-lit)}
#tp-new .tt-tabs [role=tab]:focus-visible{outline:3px solid #3269bf;outline-offset:-3px}
#tp-new .tt-n{display:inline-block;font:400 13px/1 var(--mono);color:var(--g-mute)}
#tp-new .tt-bank{font:400 14px/1.4 var(--mono);color:var(--g-mute);white-space:nowrap}
#tp-new .tt-p{padding:var(--s-4)}
#tp-new .tt-p[hidden]{display:none}

/* Test: the request on the left, the answer on the right */
#tp-new .tt-test{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-6)}
#tp-new .tt-req{display:flex;flex-direction:column;gap:var(--s-3);min-width:0;padding-right:var(--s-6);border-right:1px solid var(--g-line)}
#tp-new .tt-ans{display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
#tp-new .tt-l{display:block;margin-bottom:var(--s-1);font:400 13px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--g-mute)}
#tp-new .tt-q{margin:0;font-size:18px;line-height:1.4;font-weight:500;color:var(--g-hi)}
#tp-new .tt-chips .tpn-chip{font-size:15px}
#tp-new .tt-ctx{margin:0;display:flex;flex-direction:column;gap:2px}
#tp-new .tt-ctx>div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--s-2);font:400 15px/1.5 var(--mono)}
#tp-new .tt-ctx dt{color:var(--g-mute)}
#tp-new .tt-ctx dd{margin:0;color:var(--g-body);overflow-wrap:anywhere}
#tp-new .tt-rec{margin:0;font-size:26px;line-height:1.2;font-weight:600;letter-spacing:-.01em;color:var(--g-lit)}
#tp-new .tt-was{margin:var(--s-1) 0 0;font-size:15px;color:var(--g-body)}
#tp-new .tt-bars{margin:var(--s-2) 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
#tp-new .tt-bars li{display:grid;grid-template-columns:150px minmax(0,1fr) 44px;gap:var(--s-3);align-items:center;font-size:15px;color:var(--g-mute)}
#tp-new .tt-bars li.is-win{color:var(--g-hi);font-weight:600}
#tp-new .tt-track{height:8px;border-radius:4px;background:var(--g-line);overflow:hidden}
#tp-new .tt-fill{display:block;height:100%;border-radius:4px;background:var(--g-line2);transform-origin:left}
#tp-new .tt-bars li.is-win .tt-fill{background:var(--g-lit)}
#tp-new .tt-pct{font:400 14px/1 var(--mono);text-align:right}
#tp-new .tt-ev{display:flex;flex-direction:column;gap:var(--s-2);padding-top:var(--s-3);border-top:1px solid var(--g-line)}
#tp-new .tt-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px;font-size:15px;line-height:1.45;color:var(--g-body)}
#tp-new .tt-tag{display:inline-block;margin-left:var(--s-1);padding:0 6px;border:1px solid var(--g-lit);border-radius:var(--r-tag);font:400 12px/1.6 var(--mono);color:var(--g-hi);vertical-align:1px;white-space:nowrap}

/* The correction (02, step 2) */
#tp-new .tt-cor{padding:var(--s-3);border:1px solid var(--g-lit);border-radius:var(--r-tag);background:var(--g-panel)}
#tp-new .tt-cor p{margin:0;font-size:15px;line-height:1.45;color:var(--g-body)}
#tp-new .tt-cor .tt-cor-pick{font-size:17px;color:var(--g-hi)}
#tp-new .tt-cor .tt-src{overflow-wrap:normal;margin-top:var(--s-1);font:400 13px/1.5 var(--mono);color:var(--g-mute)}
#tp-new .tt-cor .tt-saved{margin-top:var(--s-1)}
#tp-new .tt-cor .tt-saved .tt-tag{margin-left:0}
#tp-new .tt-test.is-cor .tt-ev{display:none}

/* Memory and Policies */
#tp-new .tt-sub{margin:0 0 var(--s-2);font-size:15px;color:var(--g-mute)}
#tp-new .tt-mem{margin:0;padding:0;list-style:none;columns:2;column-gap:var(--s-6);font-size:15px;line-height:1.45;color:var(--g-mute)}
#tp-new .tt-mem li{break-inside:avoid;padding:6px 0;border-bottom:1px solid var(--g-line)}
#tp-new .tt-mem li.is-on{color:var(--g-hi)}
#tp-new .tt-recall{display:none}
#tp-new .tt-mem li.is-on .tt-recall{display:inline-block;margin-left:var(--s-2);font:400 12px/1.6 var(--mono);color:var(--g-lit)}

/* 02: the three steps */
#tp-new .tt-steps{display:flex;gap:var(--s-2);margin:0 0 var(--s-3);padding:0;list-style:none;flex-wrap:wrap}
#tp-new .tt-steps button{display:inline-flex;align-items:center;gap:var(--s-2);min-height:36px;padding:0 var(--s-3);border:1px solid var(--g-line2);border-radius:var(--r-tag);background:transparent;color:var(--g-mute);font-size:15px;cursor:pointer;transition:color .3s,border-color .3s,background-color .3s}
#tp-new .tt-steps button span{font:400 13px/1 var(--mono)}
#tp-new .tt-steps button.is-done{color:var(--g-body)}
#tp-new .tt-steps button[aria-current=step]{border-color:var(--g-lit);color:var(--g-hi);background:var(--g-panel)}
#tp-new .tt-steps button:focus-visible{outline:3px solid #3269bf;outline-offset:2px}

/* Foot: the small print and Request early access */
#tp-new .tt-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-3) var(--s-6);border-top:1px solid var(--g-line)}
#tp-new .tt-small{margin:0;font-size:13px;line-height:1.5;color:var(--g-mute)}
#tp-new .tt-access{display:inline-flex;align-items:center;min-height:44px;color:var(--g-hi);text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--g-lit)}

/* Run, played (the earlier playground's motion): each part waits, space kept, then fades up (tp-fade-in, .3s ease-out). Score bars
   grow from 0, or from the previous ticket's score, over .5s ease-out, each a little after the one above (--d). What was on screen
   fades out first (.2s). The context types in behind a hidden copy of itself, so no line moves. */
#tp-new .tt-test{min-height:var(--tt-h,0)}
#tp-new .tt-playing .tt-w:not(.tt-on),#tp-new .tt-w.tt-playing:not(.tt-on){visibility:hidden;opacity:0}
#tp-new .tt-playing .tt-w.tt-on,#tp-new .tt-w.tt-playing.tt-on{animation:tp-fade-in .3s ease-out both}
#tp-new .tt-playing .tt-bars li .tt-fill{transform:scaleX(var(--from,0))}
#tp-new .tt-playing .tt-bars li.tt-grow .tt-fill{animation:tt-grow .5s ease-out var(--d,0ms) both}
@keyframes tt-grow{from{transform:scaleX(var(--from,0))}to{transform:none}}
#tp-new .tt-ghost{visibility:hidden}
#tp-new .tt-leave{opacity:0;transition:opacity .2s ease-out}
#tp-new .tt-n.tt-pop{animation:tt-pop .5s cubic-bezier(.2,.8,.2,1.2)}
@keyframes tt-pop{0%{transform:none}35%{transform:scale(1.1);color:var(--g-hi)}100%{transform:none}}

@media (max-width:1100px){
  #tp-new .tt-bars li{grid-template-columns:120px minmax(0,1fr) 40px}
}
@media (max-width:760px){
  #tp-new .tt-panel{padding:var(--s-4)}
  #tp-new .tt-panel .tp-context{grid-template-columns:minmax(0,1fr)}
  #tp-new .tt-panel .tpn-side{justify-content:flex-start}
  #tp-new .tt-bar{padding:0 var(--s-1)}
  #tp-new .tt-tabs [role=tab]{padding:0 var(--s-2)}
  #tp-new .tt-bank{display:none}
  #tp-new .tt-p{padding:var(--s-3)}
  #tp-new .tt-test{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
  #tp-new .tt-req{padding-right:0;border-right:0;padding-bottom:var(--s-4);border-bottom:1px solid var(--g-line)}
  #tp-new .tt-bars li{grid-template-columns:minmax(0,1fr) 64px 40px}
  #tp-new .tt-mem{columns:1}
  #tp-new .tt-foot{padding:var(--s-3) var(--s-4)}
  #tp-new .tt-steps{gap:var(--s-1)}
}
@media (prefers-reduced-motion:reduce){
  #tp-new .tt-tabs [role=tab],#tp-new .tt-steps button,#tp-new .tt-leave{transition:none}
  #tp-new .tt-w,#tp-new .tt-fill,#tp-new .tt-n{animation:none!important}
}