/* Local background trial. Test surfaces keep their original opaque backgrounds. */
@font-face {
  font-family: 'Tests Pencil';
  src: url('/assets/caveat-variable.ttf') format('truetype');
  font-weight: 400 700;
  font-display: swap;
}
body.tests-watercolor-preview {
  background: #fff url('/assets/tests-sketch-final.png') center top / 100% auto no-repeat fixed;
}
.tests-watercolor-preview .device-tests {
  background: rgba(255,255,255,.52);
}
.tests-watercolor-preview .tests-devices { display: none; }
.tests-watercolor-preview .test-panel,
.tests-watercolor-preview .test-report { background-color: #fff; }
.tests-watercolor-preview .device-tests :is(h1,h2,h3,legend),
.tests-watercolor-preview .device-tests button,
.tests-watercolor-preview .device-tests .test-report label,
.tests-watercolor-preview .device-tests .test-actions a,
.tests-watercolor-preview .device-tests .ssd-upload {
  font-family: 'Tests Pencil', cursive;
  letter-spacing: .015em;
}
.tests-watercolor-preview .device-tests h1 { font-size: clamp(40px,5vw,62px); font-weight: 650; }
.tests-watercolor-preview .device-tests h2 { font-size: 32px; }
.tests-watercolor-preview .device-tests :is(h3,legend) { font-size: 24px; }
.tests-watercolor-preview .device-tests button,
.tests-watercolor-preview .device-tests .test-actions a,
.tests-watercolor-preview .device-tests .ssd-upload {
  --wash: rgba(95,178,208,.25);
  color: #263641;
  font-size: 23px;
  font-weight: 650;
  line-height: 1.15;
  border: 1px solid #73808a;
  border-radius: 9px 14px 8px 12px / 13px 7px 12px 8px;
  background: radial-gradient(ellipse at 28% 100%,var(--wash),transparent 70%), #fffefa;
  box-shadow: 1px 2px 0 #47596524, inset 0 0 0 2px #fff9;
  padding: 10px 18px;
  transition: background-color .15s, box-shadow .15s;
}
.tests-watercolor-preview .device-tests button:nth-child(3n+2) { --wash: rgba(163,144,210,.24); }
.tests-watercolor-preview .device-tests button:nth-child(3n) { --wash: rgba(235,170,110,.25); }
.tests-watercolor-preview .device-tests button:hover:not(:disabled) {
  background-color: #edf8fa;
  box-shadow: 1px 3px 0 #47596540, inset 0 0 0 2px #fff9;
}
.tests-watercolor-preview .device-tests button[aria-pressed=true] {
  color: #173c51;
  border: 2px solid #385d70;
  padding: 9px 17px;
  background: radial-gradient(ellipse at 28% 65%,#72bddb70,transparent 80%), linear-gradient(112deg,#edf5ee,#dceaf6 65%,#e7dff0);
  box-shadow: 1px 2px 0 #385d7060, inset 0 -4px 0 #5187a338;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.tests-watercolor-preview .device-tests button:focus-visible { outline: 3px solid #286788; outline-offset: 4px; }
.tests-watercolor-preview .test-control-icon { stroke-width: 1.5; }
.tests-watercolor-preview :is(.test-panel,.test-report) {
  border-color: #aeb6bc;
  border-radius: 18px 23px 16px 20px / 22px 16px 21px 17px;
  box-shadow: 2px 4px 0 #5268790c;
}
.tests-watercolor-preview .keyboard-live { background: #fafaf7; border-color: #abb5ba; }
.tests-watercolor-preview .keyboard-live :is(.key-row>span,.keyboard-extras span) {
  font-family: 'Tests Pencil', cursive;
  font-size: 17px;
  background: #fffefa;
  border-color: #a5adb2;
  border-radius: 5px 7px 4px 6px;
  box-shadow: 1px 2px 0 #66798526;
}
.tests-watercolor-preview .keyboard-live .seen { background: #e0eee2; color: #224d3c; border-color: #79a28a; }
.tests-watercolor-preview .keyboard-live .held { background: #315f69; color: #fff; border-color: #254b54; }
.tests-watercolor-preview .keyboard-history { background: #edf2f3; color: #304955; border: 1px dashed #8197a2; }
.tests-watercolor-preview .test-report :is(input,textarea) { background: #fffefa; border-color: #8e9ca5; }
/* Hand-drawn keyboard: decoration only; event targets and state classes unchanged. */
.tests-watercolor-preview .keyboard-live {
  border: 1.3px solid #7a8589;
  border-radius: 23px 17px 21px 14px / 16px 24px 15px 22px;
  background: repeating-linear-gradient(112deg,#6d777903 0 1px,transparent 1px 5px),#fcfbf7;
  box-shadow: 2px 2px 0 #71808824, -1px 1px 0 #71808815;
}
.tests-watercolor-preview .keyboard-live :is(.key-row>span,.keyboard-extras span) {
  position: relative;
  isolation: isolate;
  border: 1.15px solid #727c81;
  border-radius: 5px 8px 4px 7px / 8px 4px 7px 5px;
  background: repeating-linear-gradient(125deg,#74828a08 0 1px,transparent 1px 4px),#fffefa;
  box-shadow: 1px 2px 0 #596d7433;
}
.tests-watercolor-preview .keyboard-live :is(.key-row>span,.keyboard-extras span)::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 2px 1px 1px 2px;
  border: 1px solid #68777e42;
  border-radius: 7px 4px 8px 3px / 4px 7px 3px 8px;
  transform: rotate(-.7deg);
}
.tests-watercolor-preview .keyboard-live .key-row>span:nth-child(3n+1) {
  border-radius: 8px 4px 7px 3px / 4px 7px 3px 6px;
  transform: rotate(-.55deg);
}
.tests-watercolor-preview .keyboard-live .key-row>span:nth-child(3n+2) {
  border-radius: 3px 7px 4px 8px / 7px 3px 8px 4px;
  transform: rotate(.45deg);
}
.tests-watercolor-preview .keyboard-live :is(.key-row,.keyboard-extras) span.seen {
  background: repeating-linear-gradient(125deg,#52886818 0 1px,transparent 1px 4px),#dceee0;
  color: #224d3c;
  border-color: #598773;
}
.tests-watercolor-preview .keyboard-live :is(.key-row,.keyboard-extras) span.held {
  background: repeating-linear-gradient(125deg,#ffffff15 0 1px,transparent 1px 4px),#315f69;
  color: #fff;
  border-color: #254b54;
  transform: translateY(2px);
  box-shadow: none;
}
.tests-watercolor-preview .keyboard-history,
.tests-watercolor-preview .pointer-test-area>div {
  border: 1px solid #89969b;
  border-radius: 8px 12px 6px 10px / 11px 7px 12px 6px;
  background: linear-gradient(175deg,#d8e9ed60,transparent 75%),#fffefa;
  box-shadow: 1px 1px 0 #70818a20;
}
.tests-watercolor-preview .pointer-test-area { font-family: 'Tests Pencil',cursive; }
.tests-watercolor-preview .pointer-test-area>div { font-size: 22px; }
.tests-watercolor-preview .pointer-test-area strong { font-size: 26px; }
/* Sketchbook footer, scoped to the tests pages only. */
.tests-watercolor-preview footer {
  --color-on-action: #283b47;
  --color-footer-muted: #52616a;
  --color-footer-faint: #62717a;
  color: #283b47;
  position: relative;
  border-top: 1px solid #80949c55;
  background: radial-gradient(ellipse at 0 0,#c3eaf06b,transparent 38%), radial-gradient(ellipse at 95% 100%,#d9cfef66,transparent 40%),#fcfbf8;
  box-shadow: 0 -3px 0 #fdfcf8,0 -4px 0 #8a9da329;
}
.tests-watercolor-preview footer .footer-logo-link .brand-wordmark>span { color: #25333c; }
.tests-watercolor-preview footer .footer-logo-link .brand-lockup,
.tests-watercolor-preview footer .footer-logo-link .irestore-wordmark { color: #25333c; }
.tests-watercolor-preview footer .footer-logo-link .brand-lockup.brand-static .brand-wordmark>small { color: #52616a; }
.tests-watercolor-preview footer .footer-links>a {
  font-family: 'Tests Pencil',cursive;
  font-size: 23px;
  font-weight: 650;
  color: #2c4554;
  text-decoration-color: #669caf;
  text-underline-offset: 5px;
}
.tests-watercolor-preview footer .footer-links>a:hover { text-decoration: underline; color: #17627d; }
.tests-watercolor-preview footer .legal-links :is(a,button) { color: #455963; }
.tests-watercolor-preview footer .legal-links :is(a,button):hover { color: #17627d; text-decoration: underline; }
.tests-watercolor-preview footer .footer-bottom { border-top: 1px dashed #8d9ba570; }
.tests-watercolor-preview footer .footer-language .language-menu>button {
  color: #243d4a;
  background: linear-gradient(135deg,#ffffffb3,#d6e9f04d);
  border: 1px solid #ffffffd9;
  border-radius: 13px;
  box-shadow: inset 0 1px #fff,0 0 0 1px #7b98a342,0 2px 7px #56758414;
  min-height: 44px;
  min-width: 48px;
}
.tests-watercolor-preview footer :is(a,button):focus-visible { outline: 2px solid #286788; outline-offset: 4px; }
/* Translucent glass controls; diagnostic display surfaces remain untouched. */
.tests-watercolor-preview .device-tests button,
.tests-watercolor-preview .device-tests .test-actions a,
.tests-watercolor-preview .device-tests .ssd-upload {
  background: linear-gradient(145deg,#ffffff75,#ffffff18 48%,#b9dbe92b);
  border: 1px solid #ffffffc9;
  border-radius: 16px;
  -webkit-backdrop-filter: blur(9px) saturate(145%);
  backdrop-filter: blur(9px) saturate(145%);
  box-shadow: inset 0 1px 1px #fffffff2, inset 0 -1px 1px #7192a047, 0 3px 12px #344c601c, 0 0 0 1px #52697938;
  color: #243947;
  text-shadow: 0 1px 1px #ffffffb3;
}
.tests-watercolor-preview .device-tests button:hover:not(:disabled) {
  background: linear-gradient(145deg,#ffffffa6,#ffffff38 50%,#b9dbe947);
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px #7192a047, 0 4px 15px #344c6026, 0 0 0 1px #52697947;
}
.tests-watercolor-preview .device-tests button[aria-pressed=true] {
  background: linear-gradient(135deg,#ffffff80,#87cbe84d 45%,#b6aed74d);
  border: 1px solid #426d8199;
  padding: 10px 18px;
  box-shadow: inset 0 1px 2px #fff, inset 0 -2px 0 #527e9b59, 0 3px 12px #344c6026;
  color: #143d51;
}
@supports not ((backdrop-filter: blur(9px)) or (-webkit-backdrop-filter: blur(9px))) {
  .tests-watercolor-preview .device-tests button { background-color: #f0f7f9e6; }
}
@media (prefers-reduced-transparency: reduce) {
  .tests-watercolor-preview .device-tests button { background-color: #f0f7f9; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (max-width: 700px) {
  body.tests-watercolor-preview { background-size: auto 100vh; background-attachment: scroll; }
  .tests-watercolor-preview .device-tests { background: rgba(255,255,255,.68); }
}