@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap";:root{color:#effff8;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--accent:#7df9c1;--muted:#a4beb6;--border:#aaedd229;background:#07111a;font-family:IBM Plex Sans,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 0 0,#2868583d,#0000 40%),#07111a;min-width:320px;margin:0}button,input{font:inherit}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.app-shell{max-width:1200px;margin:0 auto;padding:24px 20px}.page-heading{justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.eyebrow{color:var(--accent);letter-spacing:.18em;margin:0 0 6px;font-size:11px;font-weight:600}h1{letter-spacing:-.025em;margin:0;font-size:clamp(22px,3vw,32px);font-weight:600}.local-badge{border:1px solid var(--border);white-space:nowrap;color:var(--muted);border-radius:30px;align-items:center;gap:8px;padding:9px 12px;font-size:12px;display:flex}.local-badge span{background:var(--accent);border-radius:50%;width:6px;height:6px}.predictions{grid-template-columns:1.25fr 1fr 1.15fr;gap:12px;margin-bottom:14px;display:grid}.prediction-card,.viewer-card{border:1px solid var(--border);background:#0b1c26d9;border-radius:16px}.prediction-card{flex-direction:column;min-height:264px;padding:16px;display:flex}.card-heading{justify-content:space-between;align-items:center;gap:8px;display:flex}h2{margin:0;font-size:17px;font-weight:600}.card-tag{letter-spacing:.08em;color:var(--accent);background:#7df9c114;border-radius:5px;padding:4px 7px;font-size:10px}.card-summary{color:var(--muted);min-height:16px;margin:6px 0 13px;font-size:12px}.probability-rows{gap:7px;display:grid}.probability-row{grid-template-columns:62px 1fr 51px;align-items:center;gap:8px;font-size:12px;line-height:16px;display:grid}.row-label{white-space:nowrap}.bar-track{background:#ffffff0f;border-radius:4px;height:7px;overflow:hidden}.bar-fill{background:#548c80;border-radius:4px;height:100%;transition:width .15s linear}.probability-row:first-child .bar-fill{background:var(--accent)}.row-value{font-variant-numeric:tabular-nums;text-align:right;color:#d4e8e2}.emotion-card .probability-row{grid-template-columns:92px 1fr 51px}.emotion-card .bar-fill{background:#5b82a3}.card-footnote{color:var(--muted);margin:12px 0 0;font-size:11px;line-height:1.5}.prediction-card>.card-footnote{margin-top:auto;padding-top:13px}.empty-state{color:var(--muted);margin:24px 0;font-size:12px}.viewer-card{overflow:hidden}.toolbar{flex-wrap:wrap;align-items:center;gap:12px;padding:12px 14px;display:flex}.primary-button,.secondary-button{cursor:pointer;border:0;border-radius:30px;padding:10px 16px;font-size:13px;font-weight:600}.primary-button{background:var(--accent);color:#05281c}.secondary-button{color:#effff8;background:#ffffff14}button:disabled{opacity:.45;cursor:not-allowed}.toggle{color:var(--muted);cursor:pointer;align-items:center;gap:6px;font-size:12px;display:flex}input{accent-color:var(--accent)}.performance-text{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:auto;font-size:12px}.video-stage{aspect-ratio:16/9;background:#040b10;border-radius:10px;margin:0 8px;position:relative;overflow:hidden}#inputVideo,#overlayCanvas{object-fit:contain;width:100%;height:100%;position:absolute;inset:0}#inputVideo.mirrored{transform:scaleX(-1)}#overlayCanvas{pointer-events:none}.viewer-hint{text-align:center;color:var(--muted);background:radial-gradient(#22544c3d,#0000 70%);flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:24px;display:flex;position:absolute;inset:0}.viewer-hint strong{color:#d4e8e2;font-size:18px;font-weight:500}.viewer-hint span{max-width:390px;font-size:13px}.hidden{display:none}.viewer-footer{align-items:center;gap:16px;padding:13px 16px;display:flex}.crop-preview{flex-shrink:0;align-items:center;gap:9px;display:flex}.crop-preview canvas{object-fit:contain;border:1px solid var(--border);background:#061219;border-radius:6px;width:48px;height:48px}.crop-preview span{color:var(--muted);font-size:10px;line-height:1.5}.status-block{flex:1;min-width:0}.status-block p{margin:0;font-size:12px;line-height:1.5}.status-block .card-footnote{margin-top:4px;font-size:11px}.model-label{color:var(--muted);text-align:right;flex-shrink:0;font-size:10px;line-height:1.5}.learning-note{color:var(--muted);max-width:840px;margin:14px 0 0;font-size:12px;line-height:1.6}@media (width<=760px){.app-shell{padding:16px 10px}.page-heading{flex-direction:column;align-items:flex-start;gap:10px}.predictions{grid-template-columns:1fr 1fr;gap:8px}.age-card{grid-column:1/-1;min-height:264px}.prediction-card{min-height:260px;padding:13px}.emotion-card .probability-row{grid-template-columns:79px 1fr 44px;gap:5px;font-size:11px}.probability-row{grid-template-columns:56px 1fr 44px;gap:5px;font-size:11px}.card-tag{font-size:9px}.toolbar{gap:10px;padding:10px}.performance-text{flex-basis:100%;margin:0}.viewer-footer{gap:10px;padding:10px}.model-label,.crop-preview span{display:none}.viewer-hint strong{font-size:15px}.viewer-hint span{font-size:11px}}@media (prefers-reduced-motion:reduce){.bar-fill{transition:none}}.emotion-card .probability-row:first-child .bar-fill{background:#5b82a3}.emotion-card .probability-row.is-leading .bar-fill{background:#8bc6f7}
