:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; color: #fbf8ff; background: #100918; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
body { display: grid; place-items: center; min-width: 240px; min-height: 100vh; min-height: 100svh; margin: 0; background: radial-gradient(ellipse at center, #251637 0, #100918 65%); }
button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid #c29bff; outline-offset: -5px; }
.watch-player { position: relative; width: 510px; height: 750px; }
.watch-canvas { position: absolute; width: 510px; height: 750px; transform-origin: top left; isolation: isolate; }
.watch-band { position: absolute; z-index: -2; left: 107px; width: 298px; background: linear-gradient(90deg, #100e15, #27242e 6%, #34313c 12%, #25222d 26%, #292630 70%, #37333e 89%, #17141e 96%, #100e15); box-shadow: inset 5px 0 7px #0007, inset -5px 0 7px #0007; }
.watch-band::after { content: ""; position: absolute; inset: 0 19px; border-inline: 1px solid #ffffff09; }
.watch-band-top { top: 0; height: 155px; border-radius: 42px 42px 14px 14px; mask-image: linear-gradient(transparent, #000 22%); }
.watch-band-bottom { bottom: 0; height: 160px; border-radius: 14px 14px 42px 42px; mask-image: linear-gradient(#000 78%, transparent); }
.watch-side { position: absolute; z-index: -1; top: 398px; right: 18px; width: 12px; height: 92px; border: 1px solid #4e4b52; border-radius: 7px; background: linear-gradient(90deg, #302e34, #55515b, #26242c); }
.watch-crown { position: absolute; z-index: -1; top: 212px; right: 0; width: 29px; height: 84px; border: 2px solid #222027; border-radius: 12px 16px 16px 12px; background: repeating-linear-gradient(0deg, #48454e 0 2px, #242229 2px 4px); box-shadow: inset -5px 0 6px #0008, inset 3px 0 4px #ffffff20; }
.watch-crown::after { content: ""; position: absolute; inset: 5px 3px 5px auto; width: 2px; border-radius: 3px; background: #92899366; }
.watch-case { position: absolute; top: 94px; left: 21px; width: 462px; height: 562px; padding: 24px 20px; border: 1px solid #77707b; border-radius: 122px; background: linear-gradient(125deg, #b5aeb8 0, #5d5762 2%, #27242d 8%, #17151d 23%, #3e3845 49%, #111017 69%, #4f4855 91%, #96909b 98%, #39333f); box-shadow: 0 28px 45px #0007, inset 0 0 0 3px #25212b, inset 0 0 0 5px #aaa1af4d, inset 0 0 0 7px #111015, 0 0 0 1px #0c0910; }
.watch-bezel { position: absolute; inset: 10px; border-radius: 112px; background: #020203; box-shadow: inset 0 1px 2px #b0a5ba80, 0 0 0 1px #050406; }
.watch-bezel::after { content: ""; position: absolute; inset: 2px; border-radius: 110px; border-top: 2px solid #d6ccdf24; border-left: 1px solid #c0b0d114; pointer-events: none; }
.watch-display { position: relative; width: 422px; height: 514px; overflow: hidden; border-radius: 98px; background: #08040e; isolation: isolate; }
.watch-screen { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 85% 5%, #241238 0, transparent 63%), linear-gradient(155deg, #10081a, #0a0311); }
.watch-screen[hidden] { display: none; }
.recording-wave { position: absolute; top: 124px; left: 41px; width: 340px; height: 79px; overflow: visible; }
.recording-wave path { fill: none; stroke: url(#record-wave); stroke-linecap: round; stroke-linejoin: round; }
.wave-glow { stroke-width: 9px; opacity: 0.2; filter: url(#record-wave-blur); }
.wave-line { stroke-width: 2.8px; }
.recording-time { position: absolute; top: 209px; left: 0; width: 100%; margin: 0; text-align: center; font-size: 46px; line-height: 56px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.recording-actions { position: absolute; top: 302px; left: 59px; right: 59px; display: flex; justify-content: space-between; }
.recording-action { display: grid; justify-items: center; gap: 10px; font-size: 27px; line-height: 33px; border-radius: 60px 60px 12px 12px; }
.recording-action-circle { display: grid; place-items: center; width: 119px; height: 120px; border: 3px solid #6d626a55; border-radius: 50%; background: #4c303578; box-shadow: inset 0 0 0 1px #ffffff09, 0 0 0 1px #ffffff07; }
.stop-recording .recording-action-circle { background: #4b1c327d; }
.pause-icon { position: relative; width: 24px; height: 32px; color: #ffb718; }
.pause-icon::before, .pause-icon::after { content: ""; position: absolute; top: 0; bottom: 0; width: 8px; border-radius: 4px; background: currentColor; }
.pause-icon::before { left: 0; }
.pause-icon::after { right: 0; }
.stop-icon { width: 31px; height: 31px; border-radius: 7px; background: #ff4d4c; }
.recording-screen.is-paused .pause-icon { width: 0; height: 0; margin-left: 5px; border-top: 17px solid transparent; border-bottom: 17px solid transparent; border-left: 25px solid #ffb718; }
.recording-screen.is-paused .pause-icon::before, .recording-screen.is-paused .pause-icon::after { display: none; }
.processing-waves { position: absolute; top: 92px; left: 0; width: 422px; height: 140px; overflow: visible; }
.processing-waves path { stroke: #ffb32d; stroke-width: 7; stroke-linecap: round; transform-origin: center; }
.processing-waves path:nth-child(2) { stroke: #d27a24; opacity: 0.85; }
.processing-waves path:nth-child(3) { stroke: #8b542a; opacity: 0.8; }
.processing-screen h1 { position: absolute; top: 328px; left: 0; width: 100%; margin: 0; text-align: center; font-size: 40px; line-height: 49px; letter-spacing: -1.3px; }
.processing-screen > p { position: absolute; top: 400px; left: 0; width: 100%; margin: 0; text-align: center; color: #a498b3; font-size: 27px; line-height: 35px; letter-spacing: -0.6px; }
.watch-header { position: relative; height: 134px; }
.watch-back { position: absolute; top: 38px; left: 24px; display: grid; place-items: center; width: 80px; height: 80px; border: 3px solid #7340b180; border-radius: 50%; background: radial-gradient(ellipse at center, #30114d80, #090710 75%); }
.watch-back svg { width: 24px; height: 32px; stroke: white; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.watch-header h1 { position: absolute; top: 84px; right: 25px; margin: 0; color: #a296ad; font-size: 34px; font-weight: 400; line-height: 41px; letter-spacing: -0.9px; }
.watch-note-list { height: 380px; overflow-y: auto; padding: 0 7px 44px; scrollbar-width: none; overscroll-behavior: contain; }
.watch-note-list::-webkit-scrollbar, .watch-summary::-webkit-scrollbar { display: none; }
.watch-note-card { display: block; width: 100%; padding: 21px 19px 13px; border-radius: 29px; background: #393045cc; text-align: left; }
.watch-note-card + .watch-note-card { margin-top: 10px; }
.watch-note-card h2, .watch-summary h2 { margin: 0; font-size: 30px; font-weight: 700; line-height: 37px; letter-spacing: -0.8px; }
.watch-note-excerpt { margin: 17px 0 16px; color: #c2b9ce; font-size: 27px; line-height: 33px; letter-spacing: -0.45px; }
.watch-note-date { margin: 0; color: #81778e; font-size: 26px; line-height: 32px; letter-spacing: -0.7px; }
.summary-screen { background: radial-gradient(ellipse at 10% 5%, #1a0d29 0, transparent 44%), radial-gradient(ellipse at 90% 100%, #20132f 0, transparent 62%), #010102; }
.summary-screen .watch-back { border-color: #77736770; }
.summary-screen .watch-header { height: 146px; }
.summary-screen .watch-header h1 { right: 36px; }
.watch-summary { height: 368px; overflow-y: auto; padding: 0 26px 55px; scrollbar-width: none; overscroll-behavior: contain; }
.watch-summary h2 { padding-left: 6px; }
.summary-date { margin-top: 15px; }
.summary-bullets { margin: 25px 0 0; padding: 0; list-style: none; color: #cbc6d1; font-size: 28px; line-height: 40px; letter-spacing: -0.6px; }
.summary-bullets li::before { content: "- "; }
.demo-tap { position: absolute; z-index: 2; width: 58px; height: 58px; border: 2px solid #e9d5ffb3; border-radius: 50%; background: #ceb0ff22; box-shadow: 0 0 20px #cba3ff22; opacity: 0; pointer-events: none; }
.demo-tap::after { content: ""; position: absolute; inset: 22px; border-radius: 50%; background: #f1e2ff; }
.record-tap { top: 333px; left: 276px; }
.note-tap { top: 197px; left: 274px; }
.watch-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.embedded, .embedded body { min-width: 0; min-height: 0; width: 100%; height: 100%; overflow: hidden; background: transparent; }
.embedded body { display: block; }
.embedded .watch-player { position: absolute; top: 0; left: 0; }
.watch-canvas.is-idle .processing-waves path, .watch-canvas.is-idle .processing-dots { animation-play-state: paused; }
@media (prefers-reduced-motion: no-preference) {
  .watch-screen:not([hidden]) { animation: screen-appear 280ms ease-out; }
  .processing-waves path { animation: processing-wave-motion 2.4s ease-in-out infinite alternate; }
  .processing-waves path:nth-child(2) { animation-delay: -0.8s; }
  .processing-waves path:nth-child(3) { animation-delay: -1.6s; }
  .processing-dots { animation: processing-dots 1.4s ease-in-out infinite alternate; }
  .recording-action-circle, .watch-note-card { transition: background 160ms ease, transform 160ms ease; }
  .recording-action:active .recording-action-circle, .watch-note-card:active { transform: scale(0.96); }
  .demo-tap.is-tapping { animation: demo-tap 650ms ease-out both; }
}
@keyframes processing-wave-motion { from { transform: translateY(-6px) scaleY(0.8); } to { transform: translateY(7px) scaleY(1.15); } }
@keyframes processing-dots { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes screen-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes demo-tap { 0% { opacity: 0; transform: scale(1.2); } 35% { opacity: 1; transform: scale(0.8); } 100% { opacity: 0; transform: scale(1.15); } }