* { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; background: #f5f5f0;
    color: #1a1a1a;
  }
  .container { width: 400px; height: 400px; position: relative; user-select: none; }
  svg { position: absolute; top: 0; left: 50px; cursor: grab; }
  .info {
    position: absolute; bottom: 12px; left: 0; width: 100%;
    display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center;
    text-align: center; gap: 0;
  }
  .info-item { display: flex; flex-direction: column; align-items: center; }
  .info-label { font-size: 11px; color: #888; }
  .info-val { font-size: 14px; font-weight: 500; }
  .result {
    position: absolute; bottom: 48px; left: 0; width: 100%; text-align: center;
  }
  .result span.lbl { font-size: 12px; color: #666; }
  .result span.time { font-size: 16px; font-weight: 500; color: #378ADD; }
  #feedback { font-size: 11px; font-weight: 500; margin-left: 4px; }
  @keyframes pulse-hint {
    0%,100% { opacity: 0.12; }
    50% { opacity: 0.4; }
  }
  #hint-group { animation: pulse-hint 2s ease-in-out infinite; }