/* About — catch-the-pearls game */
.cp-wrap{position:relative;height:400px;background:linear-gradient(#fff,var(--paper));touch-action:none;cursor:none}
.cp-wrap canvas{width:100%;height:100%;display:block}
.cp-last{position:absolute;left:14px;top:10px;margin:0;color:var(--ink-2);pointer-events:none}
.story{display:grid;grid-template-columns:.4fr 1.6fr;gap:40px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:44px;color:var(--ink-2)}
.clocks{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.clock-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:grid;gap:22px;background:#fff;box-shadow:var(--shadow)}
.clk{display:flex;align-items:center;gap:20px}
.clk svg{width:92px;flex:none}
.clk svg>circle:first-child{fill:var(--paper);stroke:var(--line-2)}
.clk line{stroke:var(--ink);stroke-linecap:round;transition:transform .5s var(--ease);transform-origin:50px 50px}
.clk line[id^=h]{stroke-width:3.2}
.clk line[id^=m]{stroke-width:1.8;stroke:var(--indigo)}
.clk .pin{fill:var(--amber)}
.clk g line{stroke:var(--line-2);stroke-width:1.2}
.clk strong{display:block;font:560 40px/1 var(--display);letter-spacing:-.04em;margin-top:6px;font-variant-numeric:tabular-nums}
.overlap{margin:0;padding-top:18px;border-top:1px solid var(--line);color:var(--ink-2);font-size:15px}
.overlap b{color:var(--ink)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
@media(max-width:1080px){.story,.clocks,.faq-grid{grid-template-columns:1fr;gap:24px}}
@media(max-width:640px){.cols2{grid-template-columns:1fr;gap:0;margin-top:28px}.clk strong{font-size:32px}.clk svg{width:72px}.cp-wrap{height:360px}}