/* Layout and utility classes reused from PomodoroTechniqueTimer/welcome.html. */
body{background:#f8fafc}.bg-primary{background-color:#0891b2}.text-primary{color:#0e7490}.tutorial-card img{display:block;height:auto}.ocr-popup{max-width:440px;margin:auto}a:focus-visible{outline:3px solid #0891b2;outline-offset:4px}header>div{gap:12px}header span.text-lg{font-size:16px}header .uppercase{font-size:10px;white-space:nowrap}.pp-suite-lite{padding-left:0!important;padding-right:0!important}.pp-suite-lite .pp-card img{max-width:100%}@media(max-width:480px){header>div{flex-wrap:wrap;justify-content:center!important}main{padding-top:24px!important}.p-7{padding:22px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* pp-suite-lite: self-styled suite section + CSS shim for pp-cards.js Tailwind classes */
.pp-suite-lite { max-width: 1080px; margin: 0 auto; padding: 56px 24px; font-family: 'Inter', -apple-system, sans-serif; }
.pp-suite-lite h2 { font-size: 28px; font-weight: 800; text-align: center; color: #0f172a; margin: 0 0 8px; letter-spacing: -0.02em; }
.pp-suite-lite .pp-sub { text-align: center; color: #64748b; font-size: 15px; margin: 0 auto 28px; max-width: 520px; }
.pp-suite-lite .pp-cta-wrap { text-align: center; margin-top: 28px; }
.pp-suite-lite .pp-cta { display: inline-block; background: #6d28d9; color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; padding: 13px 26px; border-radius: 12px; }
.pp-suite-lite .pp-cta:hover { background: #5b21b6; }
[data-pp-cards] .grid { display: grid; gap: 1.25rem; }
[data-pp-cards] .grid-cols-1 { grid-template-columns: 1fr; }
@media (min-width: 640px) { [data-pp-cards] .sm\:grid-cols-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { [data-pp-cards] .md\:grid-cols-3 { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 1024px) { [data-pp-cards] .lg\:grid-cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; } }
[data-pp-cards] .pp-card { display: block; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
[data-pp-cards] .pp-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
[data-pp-cards] .pp-card .w-full { width: 100%; }
[data-pp-cards] .pp-card .aspect-video { aspect-ratio: 16/9; background: #f1f5f9; overflow: hidden; }
[data-pp-cards] .pp-card .aspect-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-pp-cards] .pp-card .px-4 { padding-left: 16px; padding-right: 16px; }
[data-pp-cards] .pp-card .py-3 { padding-top: 12px; padding-bottom: 12px; }
[data-pp-cards] .pp-card .flex { display: flex; }
[data-pp-cards] .pp-card .items-start { align-items: flex-start; }
[data-pp-cards] .pp-card .items-center { align-items: center; }
[data-pp-cards] .pp-card .justify-between { justify-content: space-between; }
[data-pp-cards] .pp-card .gap-2 { gap: 8px; }
[data-pp-cards] .pp-card .inline-flex { display: inline-flex; }
[data-pp-cards] .pp-card .shrink-0 { flex-shrink: 0; }
[data-pp-cards] .pp-card .mt-1 { margin-top: 4px; }
[data-pp-cards] .pp-card .leading-snug { line-height: 1.35; }
[data-pp-cards] .pp-card .font-semibold { font-weight: 600; }
[data-pp-cards] .pp-card .text-base { font-size: 15px; }
[data-pp-cards] .pp-card .text-xs { font-size: 12px; }
[data-pp-cards] .pp-card .text-slate-900 { color: #0f172a; }
[data-pp-cards] .pp-card .text-slate-700 { color: #334155; }
[data-pp-cards] .pp-card .text-slate-500 { color: #64748b; }
[data-pp-cards] .pp-card .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }