.rec-page{flex-direction:column;justify-content:center;align-items:center;gap:24px;max-width:640px;min-height:calc(100dvh - 96px);margin:0 auto;display:flex}.stage{flex-direction:column;align-items:center;gap:36px;width:100%;display:flex}.intro{text-align:center;text-wrap:pretty;flex-direction:column;align-items:center;gap:12px;max-width:520px;display:flex}.small{font-size:.875rem}.center{text-align:center}.rec-wrap{width:112px;height:112px;margin:28px;position:relative}.ring{border-radius:var(--r-pill);position:absolute}.ring-1{background:var(--blue-100);animation:2.6s ease-in-out infinite breathe;inset:-14px}.ring-2{background:var(--blue-50);border:1px solid var(--blue-100);animation:2.6s ease-in-out .35s infinite breathe;inset:-28px}@keyframes breathe{0%,to{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.08)}}.rec-btn{border-radius:var(--r-pill);background:var(--blue-200);width:112px;height:112px;color:var(--ink);box-shadow:var(--sh-2);will-change:transform;border:0;justify-content:center;align-items:center;transition:background-color .16s ease-out;display:flex;position:relative}.rec-btn:hover{background:var(--blue-300)}.rec-btn:active{transform:none}.clock-block{flex-direction:column;align-items:center;gap:4px;display:flex}.clock{letter-spacing:-.02em;font-weight:300;line-height:1}.idle-clock{color:var(--ink-3);font-size:3rem}.live-clock{letter-spacing:-.025em;font-size:4.5rem}.or{width:100%;max-width:520px;color:var(--ink-3);align-items:center;gap:16px;font-size:.8125rem;display:flex}.or span{background:var(--line-strong);flex:1;height:1px}.drop{border:1.5px dashed var(--blue-300);background:var(--white);cursor:pointer;border-radius:20px;flex-wrap:wrap;align-items:center;gap:16px 20px;width:100%;max-width:520px;padding:20px 24px;transition:background-color .16s ease-out,border-color .16s ease-out;display:flex}.drop:hover,.drop.over{background:var(--blue-50);border-color:var(--blue-600)}.drop-ico{background:var(--blue-100);border-radius:14px;flex:0 0 48px;justify-content:center;align-items:center;height:48px;display:flex}.drop-text{flex-direction:column;flex:200px;gap:2px;min-width:0;font-size:.9375rem;display:flex}.lang{justify-content:space-between;width:100%;max-width:520px}.lang select{text-align:right;cursor:pointer;flex:0 auto;font-weight:600}.dot{border-radius:var(--r-pill);background:var(--ink);width:8px;height:8px}.pill .dot{display:inline-block}.pill.progress{height:32px;font-size:.8125rem}.wave{align-items:center;gap:3px;width:100%;max-width:640px;height:96px;display:flex}.wave i{background:var(--ink);will-change:transform;border-radius:3px;flex:1;min-width:2px;height:100%;transform:scaleY(.06)}.wave i:nth-last-child(-n+12){background:var(--blue-300)}.controls{align-items:center;gap:32px;display:flex}.round{border-radius:var(--r-pill);background:var(--blue-100);width:56px;height:56px;color:var(--ink);border:0;justify-content:center;align-items:center;display:flex}.stop-wrap{width:96px;height:96px;position:relative}.stop-halo{border-radius:var(--r-pill);background:var(--blue-300);position:absolute;inset:0}.stop-btn{border-radius:var(--r-pill);background:var(--ink);width:96px;height:96px;color:var(--white);box-shadow:var(--sh-3);border:0;justify-content:center;align-items:center;display:flex;position:relative}.bar{border-radius:var(--r-pill);background:var(--blue-100);width:100%;max-width:420px;height:8px;overflow:hidden}#bar-fill{background:var(--ink);transform-origin:0;border-radius:inherit;width:100%;height:100%;transition:transform .2s ease-out;transform:scaleX(0)}.error{border-radius:var(--r-field);box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--white);padding:12px 16px;font-size:.9375rem}@media (width<=899px){.rec-page{min-height:calc(100dvh - 190px)}.stage{gap:28px}.live-clock{font-size:3.5rem}.live-note{display:none}.controls{grid-template-columns:1fr auto 1fr;place-items:center;gap:0;width:100%;max-width:360px;display:grid}.controls .round{width:60px;height:60px}.controls .btn.tertiary{min-width:60px;height:60px}.idle-clock,.lang{display:none}.drop{text-align:center;flex-direction:column;justify-content:center;gap:14px;padding:24px 20px}.drop-text{flex:none;align-items:center}.drop .btn{width:100%;height:52px}}@media (prefers-reduced-motion:reduce){#bar-fill{transition:none}.ring{animation:none}}