.g-action { width:100%; min-width:0; }
.g-a-bar { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:#4b575c; font-size:14px; font-variant-numeric:tabular-nums; min-height:24px; margin-bottom:12px; }
.g-a-message { color:#172125; font-size:16px; line-height:1.6; margin:0 0 16px; min-height:48px; text-wrap:pretty; }
.g-a-field { position:relative; width:100%; overflow:hidden; border:1px solid #dedfda; border-radius:16px; background:#faf9f6; margin-bottom:16px; }
.g-a-button { appearance:none; min-width:48px; min-height:48px; padding:12px 24px; border:1px solid #dedfda; border-radius:12px; color:#172125; background:#ffffff; font:inherit; font-weight:650; line-height:1.3; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:background-color .12s,border-color .12s,transform .12s; }
.g-a-button:hover:not(:disabled) { background:#fbe9e9; border-color:#c92d3b; }
.g-a-button:active:not(:disabled) { transform:translateY(1px); }
.g-a-button:focus-visible { outline:3px solid #285bc2; outline-offset:3px; }
.g-a-button:disabled { cursor:default; opacity:.55; }
.g-a-button[hidden] { display:none; }
.g-a-main { background:#c92d3b; color:#ffffff; border-color:#c92d3b; min-width:160px; }
.g-a-main:hover:not(:disabled) { color:#ffffff; background:#9e1c2a; border-color:#9e1c2a; }
.g-a-tracking { aspect-ratio:3/2; }
.g-a-ball { box-sizing:border-box; position:absolute; width:44px; height:44px; min-width:44px; min-height:44px; border-radius:50%; padding:0; background:#172125; color:#ffffff; border:2px solid #172125; transform:translate(-50%,-50%); font-size:16px; transition:background-color .12s,border-color .12s; }
.g-a-ball:disabled { opacity:1; }
.g-a-ball.is-marked { background:#c92d3b; border:4px double #ffffff; box-shadow:0 0 0 2px #c92d3b; }
.g-a-ball.is-selected { background:#285bc2; border-color:#285bc2; box-shadow:0 0 0 3px #e8efff; }
.g-a-ball:hover:not(:disabled) { background:#285bc2; color:#ffffff; }
.g-a-ball:active:not(:disabled) { transform:translate(-50%,-50%); }
.g-a-cups { height:320px; }
.g-a-cup { position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; transform:translate(-50%,-50%); padding:8px; width:clamp(64px,18vw,104px); height:120px; border:none; background:transparent; transition:none; }
.g-a-cup:disabled { opacity:1; }
.g-a-cup:hover:not(:disabled) { background:#fbe9e9; }
.g-a-cup:active:not(:disabled) { transform:translate(-50%,-50%); }
.g-a-cup-shape { display:block; width:100%; height:80px; border-radius:16px 16px 8px 8px; background:#c92d3b; border:4px solid #9e1c2a; border-bottom-width:8px; }
.g-a-cup-ball { display:block; font-size:24px; line-height:24px; height:24px; color:#285bc2; }
.g-a-canvas { display:block; width:100%; height:auto; aspect-ratio:5/4; }
.g-a-time { min-height:280px; padding:32px 16px; display:flex; flex-direction:column; gap:24px; align-items:center; justify-content:center; }
.g-a-big-number { font-size:64px; line-height:1.1; color:#172125; font-weight:750; font-variant-numeric:tabular-nums; }
.g-a-feedback { min-height:24px; max-width:100%; margin:0; font-size:16px; line-height:1.6; color:#4b575c; text-align:center; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.g-a-controls { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.g-a-target-field { height:clamp(280px,70vw,400px); touch-action:manipulation; }
.g-a-target { position:absolute; width:56px; height:56px; min-height:56px; min-width:56px; border-radius:50%; padding:0; transform:translate(-50%,-50%); color:#ffffff; background:#c92d3b; border:4px double #ffffff; box-shadow:0 0 0 2px #c92d3b; transition:none; font-variant-numeric:tabular-nums; }
.g-a-target:hover:not(:disabled) { color:#ffffff; background:#9e1c2a; }
.g-a-target:active:not(:disabled) { transform:translate(-50%,-50%); }
.g-a-rhythm { min-height:280px; padding:32px 16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; }
.g-a-beats { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; max-width:100%; }
.g-a-beat { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex-shrink:0; border:2px solid #dedfda; border-radius:50%; background:#ffffff; font-size:12px; font-variant-numeric:tabular-nums; }
.g-a-beat.is-on { border:4px double #ffffff; color:#ffffff; background:#c92d3b; box-shadow:0 0 0 2px #c92d3b; }
@media (prefers-reduced-motion:reduce) { .g-a-button { transition:none; } }
@media (max-width:400px) { .g-a-cups { height:280px; } .g-a-cup { height:104px; } .g-a-cup-shape { height:64px; } .g-a-message { font-size:14px; } }
/* Reference rule boards, with original Red Yarn presentation. */
.g-a-follow { max-width:440px; aspect-ratio:3/4; margin-inline:auto; touch-action:manipulation; }
.g-a-follow .g-a-ball { display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; font-size:12px; pointer-events:none; transition:none; }
.g-a-cups-reference { max-width:320px; margin-inline:auto; }
.g-a-cups-reference .g-a-cup { width:28.1%; min-width:0; padding:0; transition:left .4s ease-out,margin-top .4s ease-out; }
.g-a-circle-field { height:clamp(280px,65vw,440px); }
.g-a-circle-field .g-a-canvas { height:100%; aspect-ratio:auto; }
.g-a-time-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; padding:12px; }
.g-a-time-box { position:relative; display:flex; flex-direction:column; justify-content:center; gap:8px; min-width:0; min-height:100px; padding:12px 4px; overflow:hidden; }
.g-a-time-face { font-size:20px; font-variant-numeric:tabular-nums; }
.g-a-time-state { font-size:12px; overflow-wrap:anywhere; }
.g-a-time-guide { pointer-events:none; position:absolute; top:0; bottom:0; width:3px; background:#285bc2; }
.g-a-time-box.is-running { border:2px solid #c92d3b; background:#fbe9e9; }
.g-a-time-box.is-done:disabled { color:#12694b; background:#e5f2ec; opacity:1; }
.g-a-target-field { height:500px; max-width:970px; }
.g-a-target { width:100px; height:100px; min-width:100px; min-height:100px; }
.g-a-rhythm .g-a-big-number { min-height:72px; font-size:40px; }
@media(max-width:600px) { .g-a-time-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }