:root{--ink: #14213d;--ink-soft: #3b4a6b;--ink-muted: #75809a;--surface: #ffffff;--tint-blue: #e8f0fb;--tint-blue-strong: #d3e2f7;--tint-green: #e5f5eb;--navy: #1d3461;--accent: #f47920;--blue: #2f6fe4;--present: #22a745;--late: #f5b400;--elsewhere: #2f6fe4;--absent: #e5322d;--radius: 1rem;--radius-sm: .7rem;--gap: .9rem;--photo-aspect: 1.15;--frame-inset: .35rem;font-size:clamp(12px,1.35vw,30px)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#eef3fb;color:var(--ink);font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;cursor:none;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}body{position:relative;background:linear-gradient(165deg,#e6eefb,#f3f6fc 45%,#eaf0f9)}body:before,body:after{content:"";position:fixed;z-index:0;border-radius:50%;pointer-events:none}body:before{width:22vw;height:22vw;left:-9vw;top:-8vw;background:radial-gradient(circle,#2f6fe429,#2f6fe400)}body:after{width:26vw;height:26vw;left:-8vw;bottom:-10vw;background:radial-gradient(circle,#f5b40059,#f5b40000)}#app{position:relative;z-index:1;height:100%}.stage{display:flex;flex-direction:column;gap:var(--gap);height:100%;padding:1.2rem}body[data-status=stale] .stage{opacity:.55;filter:grayscale(.35);transition:opacity .6s ease}.icon{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);flex:none}.topbar__logo{display:block;height:5rem;width:auto}.topbar__right{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;min-width:0}.datepill{display:flex;align-items:center;gap:.6rem;padding:.5rem 1rem;border-radius:var(--radius-sm);background:var(--tint-blue);color:var(--ink);font-size:1.1rem;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}.datepill__icon{font-size:1.2rem;color:var(--navy)}.datepill__sep{width:1px;height:1.2em;background:#14213d40}.topbar__meta{display:flex;gap:.9rem;font-size:.9rem;color:var(--ink-muted);font-variant-numeric:tabular-nums;white-space:nowrap}body[data-status=stale] .topbar__synced,.topbar__synced--offline{color:var(--absent);font-weight:700}.band{display:grid;grid-template-columns:1fr;gap:var(--gap);flex:none}.band--two{grid-template-columns:1.5fr 1fr}.teacher{display:flex;align-items:center;gap:1rem;padding:.8rem;border-radius:var(--radius);min-width:0}.teacher--main{background:var(--tint-blue)}.teacher--assistant{background:var(--tint-green)}.teacher__portrait{flex:none;width:9.4rem;height:9.4rem;border-radius:var(--radius-sm);overflow:hidden;background:#cfd9ea;display:grid;place-items:center}.teacher--assistant .teacher__portrait{width:8rem;height:8rem}.teacher__portrait-img{width:100%;height:100%;object-fit:cover}.teacher__portrait-initials{font-size:2.6rem;font-weight:700;color:var(--ink-soft)}.teacher__text{min-width:0}.teacher__name{margin:0;display:flex;flex-direction:column;line-height:1.1;letter-spacing:-.02em}.teacher__name-given{font-size:1.35rem;font-weight:600;color:var(--ink-soft)}.teacher__name-family{font-size:2.1rem;font-weight:800;color:var(--ink)}.teacher__name--assistant .teacher__name-family{font-size:1.7rem}.teacher__label{margin:.45rem 0 .3rem;font-size:1.1rem;color:var(--ink-muted)}.teacher__count{display:inline-block;margin:0;padding:.4rem 1rem;border-radius:var(--radius-sm);background:var(--tint-blue-strong);color:var(--ink);font-size:1.5rem;font-weight:800;white-space:nowrap}.teacher__role{display:flex;align-items:center;gap:.5rem;margin:0 0 .4rem;font-size:1.05rem;color:var(--ink-muted)}.teacher__role-dot{width:.7rem;height:.7rem;border-radius:50%;background:var(--present)}.legend-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--gap);padding:.6rem 1.2rem;border-radius:var(--radius);background:var(--surface);box-shadow:0 2px 10px #14213d0d;flex:none}.legend{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin:0;padding:0;list-style:none}.legend__item{display:flex;align-items:center;gap:.55rem}.legend__dot{width:.95rem;height:.95rem;border-radius:50%}.legend__dot--present{background:var(--present)}.legend__dot--late{background:var(--late)}.legend__dot--elsewhere{background:var(--elsewhere)}.legend__dot--absent{background:var(--absent)}.legend__label{font-size:1.05rem;font-weight:500;color:var(--ink-soft)}.legend__motto{display:flex;align-items:center;gap:.6rem;font-size:1rem;font-style:italic;font-weight:600;color:var(--blue);white-space:nowrap}.legend__motto-icon{font-size:1.5rem;transform:rotate(-12deg)}.grid{--cols: 5;display:grid;grid-template-columns:repeat(var(--cols),var(--card-w, 1fr));gap:var(--gap);align-content:start;justify-content:center;grid-auto-rows:max-content;margin:0;padding:0 0 .2rem;list-style:none;flex:1 1 auto;min-height:0;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none}.grid::-webkit-scrollbar{width:0;height:0}.card{background:var(--surface);border-radius:var(--radius);box-shadow:0 2px 10px #14213d0f;padding:var(--frame-inset) var(--frame-inset) 0;display:flex;flex-direction:column}.card__frame{position:relative;height:calc((var(--card-w) - 2 * var(--frame-inset)) / var(--photo-aspect));flex:none;aspect-ratio:var(--photo-aspect);border-radius:var(--radius-sm);padding:.22rem;display:grid;grid-template-rows:100%;grid-template-columns:100%;place-items:center;overflow:hidden}.card--present .card__frame{background:var(--present)}.card--late .card__frame{background:var(--late)}.card--elsewhere .card__frame{background:var(--elsewhere)}.card--absent .card__frame{background:var(--absent)}.card__img{width:100%;height:100%;object-fit:cover;object-position:50% 0;border-radius:calc(var(--radius-sm) - .2rem)}.card__initials{font-size:2.2rem;font-weight:700;color:#ffffffeb}.card__meta{display:flex;align-items:center;gap:.4rem;padding:.5rem .35rem .55rem .45rem}.card__name{flex:1 1 auto;min-width:0;font-size:var(--card-font, .95rem);font-weight:700;line-height:1.18;color:var(--ink);overflow-wrap:break-word}.card__name-line{display:block}.card__name-line--family{font-weight:500;color:var(--ink-soft)}.card__badge{flex:none;width:1.8rem;height:1.8rem;border-radius:50%;color:#fff;display:grid;place-items:center}.card__badge-icon{font-size:1.1rem;stroke-width:3}.card--present .card__badge{background:var(--present)}.card--late .card__badge{background:var(--late)}.card--elsewhere .card__badge{background:var(--elsewhere)}.card--absent .card__badge{background:var(--absent)}.idle{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;text-align:center}.idle__room{margin:0;font-size:4rem;font-weight:800;letter-spacing:-.02em}.idle__note{margin:0;font-size:1.5rem;color:var(--ink-muted)}.fatal{height:100%;display:grid;place-items:center;padding:3rem;text-align:center;font-size:1.6rem;color:var(--ink-muted)}.footer{display:flex;align-items:stretch;justify-content:space-between;gap:var(--gap);flex:none}.timepill{flex:none;display:flex;align-items:center;gap:.7rem;padding:.5rem 1.3rem .5rem .6rem;border-radius:var(--radius);background:var(--navy);color:#fff}.timepill__ring{flex:none;width:2.4rem;height:2.4rem;border-radius:50%;background:#ffffff29;display:grid;place-items:center}.timepill__icon{font-size:1.35rem}.timepill__text{display:flex;flex-direction:column;line-height:1.15}.timepill__label{font-size:.85rem;opacity:.85}.timepill__time{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums}.motto{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:.7rem;padding:.5rem 1.2rem;border-radius:var(--radius);background:var(--tint-blue);color:var(--ink);font-size:1.05rem;font-weight:600;text-align:center;min-width:0}.motto__icon{flex:none;font-size:1.5rem;color:var(--navy)}@media(orientation:landscape){.topbar__logo{height:3.6rem}.teacher{padding:.55rem}.teacher__portrait,.teacher--assistant .teacher__portrait{width:5.6rem;height:5.6rem}.teacher__portrait-initials{font-size:1.8rem}.teacher__name-family{font-size:1.7rem}.teacher__name--assistant .teacher__name-family{font-size:1.4rem}.teacher__label{margin:.2rem 0}.teacher__count{font-size:1.2rem;padding:.3rem .8rem}}