/* EasyNote page, Tape deck look: a retro cassette recorder in the hero with reels that spin while it records, VU
   needles for You and Others and a big REC button that really starts and stops it with a counter, plus retro label
   colours on the feature cards. The deck is added by easynote-tape.js. Loaded after the page's own styles, so it wins. */

html[data-app="easynote"] h1, html[data-app="easynote"] h2 { font-family: Bahnschrift, "Segoe UI", system-ui, sans-serif; font-weight: 700; letter-spacing: -.01em; }
@media (prefers-color-scheme: light) {
  html[data-app="easynote"] { --bg: #F2E8D8; --surface: #FBF4E6; --surface-alt: #EFE3CF; --line: #E2D3BC; }
}

/* ---- NT-C1 to NT-C3 the deck in the hero ---- */
.hero .art.nt-on { aspect-ratio: auto; width: min(440px, 88vw); }
.hero .art.nt-on .ring, .hero .art.nt-on .icon-big, .hero .art.nt-on .float { display: none; }
.nt-deck { background: #2F2724; border-radius: 18px; padding: 18px; box-shadow: 0 22px 44px rgba(60, 35, 20, .28); }
html.motion .nt-deck { animation: nt-in .9s var(--ease) .3s both; }
@keyframes nt-in { from { opacity: 0; transform: translateY(16px) rotate(-1.5deg); } }
.nt-cass { width: 100%; height: auto; display: block; }
.nt-cass .reel { transform-box: fill-box; transform-origin: center; animation: nt-spin 2.2s linear infinite; animation-play-state: paused; }
@keyframes nt-spin { to { transform: rotate(360deg); } }
.nt-vus { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: center; margin-top: 14px; }
.nt-vu { background: #F4EAD6; border-radius: 8px; padding: 6px 8px 4px; text-align: center; font: 700 .7rem "Segoe UI", sans-serif; color: #6B5A48; letter-spacing: .08em; }
.nt-vu svg { width: 100%; height: 44px; display: block; }
.nt-vu .needle { transform-origin: 50px 46px; transform: rotate(-50deg); }
@keyframes nt-vu { 0% { transform: rotate(-48deg); } 30% { transform: rotate(10deg); } 55% { transform: rotate(-20deg); } 80% { transform: rotate(28deg); } 100% { transform: rotate(-6deg); } }
.nt-deck.rec .reel { animation-play-state: running; }
.nt-deck.rec .needle { animation: nt-vu 1.1s ease-in-out infinite alternate; }
.nt-deck.rec .nt-vu + .nt-vu .needle { animation-duration: .8s; animation-delay: -.4s; }
.nt-deck.rest .reel, .nt-deck.rest .needle { animation-play-state: paused; }
.nt-rec {
  width: 64px; height: 64px; border-radius: 50%; border: 4px solid #F4EAD6; background: #9E2B2B; cursor: pointer;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .3); color: #fff; font: 800 .7rem "Segoe UI", sans-serif; letter-spacing: .08em;
}
.nt-rec:focus-visible { outline: 3px solid #F0B93A; outline-offset: 3px; }
.nt-deck.rec .nt-rec { background: #E5484D; box-shadow: 0 0 18px rgba(229, 72, 77, .7); }
.nt-ctr { margin-top: 10px; color: #F4EAD6; font: 600 .9rem "Cascadia Mono", Consolas, monospace; display: flex; justify-content: space-between; }
@media (max-width: 480px) { .nt-deck { padding: 12px; } .nt-rec { width: 54px; height: 54px; } }

/* ---- NT-C4 retro label colours on the feature cards ---- */
#features .card { border: 0; border-radius: 4px; border-top: 14px solid #A768BA; box-shadow: 0 8px 18px rgba(60, 35, 20, .12); }
#features .card:nth-child(3n+2) { border-top-color: #E07A3F; }
#features .card:nth-child(3n) { border-top-color: #F0B93A; }
#features .card h3 { font-family: Bahnschrift, "Segoe UI", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .06em; font-size: .98rem; }
@media (prefers-color-scheme: light) { #features .card { background: #FFF8EA; } }
.step .num { background: #2F2724; color: #F4EAD6; }