:root { --page: #faf7ff; --surface: #fff; --ink: #30233e; --muted: #685a78; --accent: #7140a6; --line: #e4dced; --button-ink: #fff; --tint: #f0e6fc; }
.linberry h1, .linberry h2, .linberry h3, .linberry .brand { font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.learning-visual { position: relative; padding-top: 100px; }
.berry-art { position: absolute; z-index: 1; width: 170px; height: 170px; top: -2px; right: 22px; border-radius: 38px; box-shadow: 0 15px 35px #5b277218; }
.learning-card { padding: 37px 34px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 25px; box-shadow: 0 18px 65px #5b27720a; }
.learning-card .example-label { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.learning-card h2 { font-size: 33px; letter-spacing: -.03em; }
.learning-card .meaning { margin-top: 15px; font-size: 18px; }
.learning-card blockquote { margin: 23px 0; padding: 14px 0 14px 19px; border-left: 3px solid var(--accent); color: var(--muted); font-size: 16px; }
@media (max-width: 850px) and (min-width: 621px) { .berry-art { width: 130px; height: 130px; right: 15px; } .learning-card { padding: 28px 23px; } .learning-card h2 { font-size: 29px; } }
@media (max-width: 620px) { .learning-visual { width: min(100%, 440px); justify-self: center; padding-top: 0; } .berry-art { display: block; position: relative; width: 110px; height: 110px; top: auto; right: auto; margin: 0 25px -16px auto; border-radius: 25px; } .learning-card { padding: 28px 25px 23px; } .learning-card h2 { font-size: 30px; } }
@media (prefers-color-scheme: dark) { :root { --page: #201b29; --surface: #2b2435; --ink: #f3ecfc; --muted: #c2b4d1; --accent: #d0a8ff; --line: #463950; --button-ink: #241432; --tint: #3e2e50; } }