/* Shared base of the demo practice websites (docs/demo-weby.md). Each demo brings its own site.css on top and
   may set these variables: --kit-bar-bg, --kit-bar-fg, --kit-focus, --kit-accent, --kit-font. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0}
img,svg,video,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--kit-focus,#2563eb);outline-offset:3px}
.kit-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.kit-skip{position:absolute;left:12px;top:-60px;z-index:1000;padding:10px 14px;border-radius:10px;background:#111;color:#fff;font:600 14px/1.2 var(--kit-font,system-ui,sans-serif);text-decoration:none}
.kit-skip:focus{top:12px}

/* demo bar: always visible, quiet, the same on every demo */
.kit-demobar{position:relative;z-index:60;display:flex;align-items:center;justify-content:center;gap:10px 18px;flex-wrap:wrap;
  padding:7px 16px;background:var(--kit-bar-bg,#16181d);color:var(--kit-bar-fg,#e9ebf0);font:500 12.5px/1.35 var(--kit-font,system-ui,sans-serif);letter-spacing:.01em;text-align:center}
.kit-demobar p{margin:0}
.kit-demobar strong{font-weight:650}
.kit-demobar a{color:inherit;font-weight:650;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap}
.kit-demobar-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#f5b14c;margin-right:8px;vertical-align:1px;box-shadow:0 0 0 3px rgba(245,177,76,.22)}
@media(max-width:560px){.kit-demobar{font-size:11.5px;padding:6px 12px}}

/* reveal on scroll (only with JS; without JS everything is visible) */
.js .kit-rv{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .kit-rv.is-in{opacity:1;transform:none}

/* hours: today highlighted */
.kit-hours{width:100%;border-collapse:collapse}
.kit-hours th,.kit-hours td{text-align:left;padding:9px 0;border-bottom:1px solid var(--kit-line,rgba(0,0,0,.08));font-weight:inherit}
.kit-hours td{text-align:right;font-variant-numeric:tabular-nums}
.kit-hours tr.is-today th,.kit-hours tr.is-today td{font-weight:650;color:var(--kit-accent,currentColor)}

/* absence notice (each demo restyles it; this is a sane default) */
.kit-notice{display:grid;gap:4px;padding:14px 18px;border-radius:14px;background:var(--kit-notice-bg,#fff7e6);color:var(--kit-notice-fg,#4a3306);border:1px solid var(--kit-notice-line,rgba(180,120,20,.25))}
.kit-notice[hidden]{display:none}
.kit-notice p{margin:0}
.kit-notice-badge{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.kit-notice-cover:empty{display:none}

/* demo form message */
.kit-form-msg{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:var(--kit-msg-bg,#eef6ff);color:var(--kit-msg-fg,#0b2a4a);font-size:14.5px;line-height:1.5}
.kit-form-msg[hidden]{display:none}

/* 3D viewer (viewer3d.js): canvas over a static fallback image, hotspots as real buttons */
.kit-3d{position:relative;isolation:isolate;overflow:hidden;touch-action:pan-y}
.kit-3d-still,.kit-3d canvas{position:absolute;inset:0;width:100%;height:100%}
.kit-3d-still{object-fit:contain;transition:opacity .9s ease}
.kit-3d canvas{opacity:0;transition:opacity .9s ease;cursor:grab}
.kit-3d.is-live canvas{opacity:1}
.kit-3d.is-live .kit-3d-still{opacity:0}
.kit-3d.is-dragging canvas{cursor:grabbing}
.kit-3d-spot{position:absolute;left:var(--x,50%);top:var(--y,50%);z-index:2;transform:translate(-50%,-50%)}   /* --x/--y place it over the still; live: px set by viewer3d.js */
.kit-3d-spot.is-behind{opacity:.38}
.kit-3d-spot[hidden]{display:none}
.kit-3d-zoom{position:absolute;right:10px;top:10px;z-index:3;display:grid;gap:6px}
.kit-3d-zoom button{width:40px;height:40px;border:1px solid currentColor;background:rgba(255,255,255,.9);color:#111;font:600 20px/1 var(--kit-font,system-ui);cursor:pointer}
.kit-3d-zoom button:disabled{opacity:.4;cursor:default}
.kit-3d-hint{position:absolute;left:50%;top:50%;z-index:3;margin:0;padding:8px 12px;transform:translate(-50%,-50%);background:rgba(0,0,0,.75);color:#fff;font-size:14px;pointer-events:none;opacity:0;transition:opacity .25s ease}
.kit-3d-hint.is-on{opacity:1}
.kit-3d-tip{position:absolute;left:0;top:0;z-index:4;display:grid;gap:2px;max-width:280px;padding:7px 10px;background:#fff;color:#111;font-size:13px;line-height:1.35;pointer-events:none;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.kit-3d-tip[hidden]{display:none}
.kit-3d-tip b{font-size:14px}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}