/* Shared editorial artwork for Learn, its guides, and home destinations. */
.illustrated-hero { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(240px,1fr); align-items:center; gap:36px; }
.illustrated-hero-copy { min-width:0; }
.hero-illustration-brand { isolation:isolate; }
.hero-illustration-brand .hero-art-main { width:270px; height:270px; border:1px solid #a68cff55; border-radius:30%; transform:rotate(-7deg); filter:none; box-shadow:12px 14px 0 #7160ff18; }
.hero-illustration-brand::before { content:""; position:absolute; width:300px; height:300px; border:1px solid #a68cff30; border-radius:36%; transform:rotate(12deg); z-index:-1; }
.hero-illustration-brand::after { content:"+"; position:absolute; right:4%; top:8%; color:#a88aff; font:32px Arial,sans-serif; }
/* Interaction-only polish; no timers, continuous animations or persistent layer hints. */
:is(.studio-button,.project-portal-action a,.earning-links a,.merch-shop-link) { transition:border-color .18s ease,background-color .18s ease; }
:is(.studio-button,.project-portal-action a,.earning-links a,.merch-shop-link) > span { transition:transform .18s ease; }
:is(.launch-goal-card,.tutorial-guide-card,.earning-card,.community-room-card,.merch-card) { transition:border-color .18s ease; }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 :is(.studio-button,.project-portal-action a,.earning-links a,.merch-shop-link):hover > span { transform:translateX(4px); }
 .hero-illustration-brand .hero-art-main { transition:transform .25s ease; }
 .hero-illustration-brand:hover .hero-art-main { transform:rotate(0); }
}
:is(.launch-goal-card,.tutorial-guide-card,.earning-card,.community-room-card,.merch-card):hover { border-color:#9483ef99; }
:is(.studio-button,.project-portal-action a,.earning-links a,.merch-shop-link):focus-visible { outline:2px solid #b39aff; outline-offset:4px; }
@media(max-width:900px) { .hero-illustration-brand .hero-art-main { width:210px; height:210px; } .hero-illustration-brand::before { width:235px; height:235px; } }
.hero-illustration { position:relative; display:grid; place-items:center; min-height:320px; background:radial-gradient(ellipse,#47d6bd29,transparent 70%); }
.hero-art-main { display:block; width:100%; max-width:340px; height:320px; object-fit:contain; filter:drop-shadow(0 22px 20px #0005); }
.hero-illustration-creator .hero-art-main { transform:rotate(-7deg); }
.hero-illustration-learn .hero-art-main { max-width:240px; height:280px; transform:rotate(8deg); }
.hero-art-app { position:absolute; width:64px; height:64px; object-fit:contain; filter:drop-shadow(0 10px 10px #0006); }
.hero-art-app-record { left:0; top:12%; transform:rotate(-10deg); }
.hero-art-app-edit { right:0; bottom:10%; transform:rotate(10deg); }
@media(max-width:900px) { .illustrated-hero { grid-template-columns:1fr; gap:16px; } .hero-illustration { min-height:220px; max-width:300px; width:100%; margin:auto; } .hero-art-main { height:220px; max-width:240px; } .hero-illustration-learn .hero-art-main { height:210px; } .hero-art-app { width:52px; height:52px; } }
/* Keep decoration static: no continuously repainted background layers or live blur surfaces. */
html body.gear-page::before,html body.gear-page::after { content:none; animation:none; }
html body .navbar.contear-nav,html body .footer.contear-footer,html body .merch-product-preview span { -webkit-backdrop-filter:none; backdrop-filter:none; }
html body .contear-nav { background:#080f16; }
.project-portal { scroll-margin-top:85px; }
.project-web-art { background: radial-gradient(ellipse at 50% 20%,#164c42,transparent 65%),#07131c; }
.project-product-preview { transform: rotate(-3deg); background:#08140f; border-color:#3acb8a66; }
.project-preview-image { display:block; width:100%; height:auto; border-bottom:1px solid #ffffff1c; }
.project-preview-caption { display:flex; gap:16px; align-items:center; padding:25px; }
.project-preview-caption > img { width:48px; height:48px; object-fit:contain; }
.project-preview-caption div { display:grid; gap:8px; }
.project-preview-caption small,.life-photo-note small { color:#55e4b0; font-size:10px; font-weight:900; letter-spacing:.12em; }
.project-preview-caption strong { color:#f4faf8; font-size:20px; line-height:1.2; }
.project-preview-caption span { color:#c2d5cd; font-size:15px; line-height:1.5; }
.project-stack-strip,.guide-stack-images { display:flex; justify-content:center; align-items:center; gap:22px; padding:20px; }
.project-stack-strip { margin:0 22px 22px; border-radius:14px; background:#ffffff08; }
.project-stack-strip img,.guide-stack-images img { width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 8px 14px #0006); }
.project-creator-art { align-content:center; gap:20px; background:radial-gradient(ellipse at 75% 35%,#643b9477,transparent 65%),linear-gradient(135deg,#123c36,#151528 60%); }
.project-game-horizon { display:flex; gap:14px; justify-content:center; }
.project-game-horizon img { width:54px; height:54px; border-radius:15px; box-shadow:0 10px 25px #0005; transform:rotate(-8deg); }
.project-game-horizon img:nth-child(even) { transform:rotate(8deg) translateY(-5px); }
.project-tier-head { background:#080d1bb3; }
.project-tier-ladder { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:12px; margin:0; }
.project-tier-ladder figure:nth-child(n) { min-height:160px; justify-content:center; background:radial-gradient(ellipse at center,#59e3d820,transparent 75%),#08111da6; border-color:#7fe8df33; }
.project-tier-ladder figure:nth-child(2) { background:radial-gradient(ellipse at center,#368eff38,transparent 75%),#08111da6; }
.project-tier-ladder figure:nth-child(3) { background:radial-gradient(ellipse at center,#42eaa638,transparent 75%),#08111da6; }
.project-tier-ladder figure:nth-child(4) { background:radial-gradient(ellipse at center,#b56dff45,transparent 75%),#08111da6; }
.project-tier-ladder img { width:110px; height:100px; max-height:none; }
.project-tier-ladder figcaption { margin-top:8px; font-size:11px; }
.project-reality-art { display:block; padding:26px; background:#10241f; }
.life-photo-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; height:100%; min-height:430px; }
.life-photo-grid figure { position:relative; margin:0; overflow:hidden; border-radius:18px; }
.life-photo-grid figure:nth-child(2) { margin-top:46px; }
.life-photo-grid img { width:100%; height:100%; object-fit:cover; opacity:.8; }
.life-photo-grid figcaption { position:absolute; top:16px; left:14px; right:14px; color:white; font-size:12px; font-weight:800; text-shadow:0 2px 8px #000; }
.life-photo-note { position:absolute; bottom:46px; left:45px; right:45px; padding:22px; border:1px solid #ffffff25; border-radius:16px; background:#061813e8; backdrop-filter:blur(12px); }
.life-photo-note strong { display:block; margin-top:10px; color:#f4faf7; font-size:clamp(24px,3vw,36px); line-height:1.1; letter-spacing:-.035em; }
.launch-goal-grid .goal-art { height:154px; min-height:154px; display:flex; align-items:center; justify-content:center; gap:14px; padding:22px; overflow:hidden; background:radial-gradient(ellipse at 50% 90%,#43d9c41c,transparent 70%),#0a131d; border-bottom:1px solid #ffffff12; }
.launch-goal-grid .goal-art > img { width:62px; height:70px; min-width:0; object-fit:contain; padding:0; border:0; border-radius:12px; background:transparent; filter:drop-shadow(0 10px 12px #0005); transform:none; }
.launch-goal-grid .goal-art > img:nth-child(even) { transform:translateY(-8px); }
.launch-goal-grid .goal-art-products > img { width:29%; height:95px; border-radius:8px; }
.launch-goal-grid .goal-art-program > img { width:100px; height:100px; }
.launch-goal-grid .goal-art-merch { gap:10px; }
.launch-goal-grid .goal-art-merch > span { display:flex; align-items:center; justify-content:center; width:29%; height:66px; padding:10px; background:#fff; border:0; border-radius:12px; }
.launch-goal-grid .goal-art-merch img { width:100%; height:42px; object-fit:contain; }
.launch-goal-grid .goal-art-merch > span:first-child img { transform:scale(1.7); }
.brawlytix-case-study { display:grid; grid-template-columns:1.1fr 1fr; gap:32px; padding:32px; margin:24px 0; border:1px solid #36d28f44; border-radius:24px; background:radial-gradient(ellipse at 10% 30%,#164d353b,transparent 65%),#0b171b; align-items:center; }
.case-study-image { display:block; overflow:hidden; border:1px solid #ffffff20; border-radius:14px; text-decoration:none; background:#050c09; }
.case-study-image img { display:block; width:100%; height:auto; }
.case-study-image > span { display:block; padding:18px; color:#70f0b7; font-size:16px; font-weight:800; }
.brawlytix-case-study h2 { margin:10px 0 16px; color:#f6faf9; font-size:40px; letter-spacing:-.04em; }
.brawlytix-case-study p { color:#c9d8d3; font-size:18px; line-height:1.75; }
.brawlytix-case-study .studio-eyebrow { font-size:12px; line-height:1.6; }
.brawlytix-case-study .studio-text-link { font-size:17px; line-height:1.5; }
.case-study-tags { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0; }
.case-study-tags span { padding:8px 12px; border:1px solid #63dbad35; border-radius:8px; color:#c6eddd; font-size:14px; }
.guide-stack-images { padding-top:0; }
.website-architecture { background:radial-gradient(ellipse at top,#35dab625,transparent 60%),#09131d; }
.program-badge-collection { display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; max-width:350px; }
.program-hero-badge .program-badge-collection img { width:100%; height:130px; object-fit:contain; padding:12px; margin:0; border-radius:22px; background:radial-gradient(ellipse,#8756cc55,transparent 75%); filter:drop-shadow(0 12px 18px #0006); }
.program-tier-card { background-image:radial-gradient(ellipse at 80% 0%,#707bdb28,transparent 65%); }
.reality-hero { display:grid; grid-template-columns:1.3fr .7fr; align-items:center; gap:36px; }
.reality-hero-copy { min-width:0; }
.reality-hero-copy > p { color:#a8b8c4; line-height:1.7; font-size:16px; }
.reality-cover { position:relative; margin:0; align-self:stretch; min-height:380px; overflow:hidden; border-radius:20px; transform:rotate(2deg); }
.reality-cover img { position:absolute; width:100%; height:100%; object-fit:cover; }
.reality-cover figcaption { position:absolute; inset:auto 0 0; padding:55px 22px 22px; background:linear-gradient(transparent,#071810e8); color:white; font-size:20px; font-weight:850; }
.life-editorial-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:24px 0; }
.life-editorial-strip figure { margin:0; overflow:hidden; border:1px solid #ffffff1c; border-radius:18px; background:#101c25; }
.life-editorial-strip img { display:block; width:100%; height:190px; object-fit:cover; }
.life-editorial-strip figcaption { display:grid; gap:8px; padding:20px; }
.life-editorial-strip small { color:#59ddbf; font-size:10px; font-weight:850; letter-spacing:.12em; }
.life-editorial-strip strong { color:#f0f7f4; font-size:17px; line-height:1.3; }
.visual-photo-credits { margin-top:28px; font-size:11px; color:#91a59e; }
.visual-photo-credits a { color:#b2c9be; }
@media(max-width:1050px) {
  .project-product-preview { max-width:650px; }
  .project-tier-ladder { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .project-tier-ladder img { width:90px; }
  .life-photo-grid { min-height:390px; }
  .life-photo-grid figure:nth-child(2) { margin-top:0; }
  .brawlytix-case-study,.reality-hero { grid-template-columns:1fr; }
  .reality-cover { min-height:300px; transform:none; }
  .reality-cover img { object-position:center 60%; }
}
@media(max-width:600px) {
  .project-preview-caption { padding:18px; gap:12px; }
  .project-preview-caption strong { font-size:17px; }
  .project-product-preview { transform:none; }
  .project-stack-strip { margin:0 16px 16px; padding:12px; }
  .project-stack-strip img { width:42px; height:42px; }
  .project-game-horizon img { width:44px; height:44px; }
  .project-tier-ladder { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .project-tier-ladder figure:nth-child(n) { min-height:135px; }
  .project-tier-ladder img { height:82px; }
  .project-reality-art { padding:16px; }
  .life-photo-note { left:30px; right:30px; bottom:30px; }
  .brawlytix-case-study { padding:18px; gap:22px; }
  .brawlytix-case-study h2 { font-size:34px; }
  .life-editorial-strip { grid-template-columns:1fr; }
  .life-editorial-strip figure { display:grid; grid-template-columns:110px 1fr; align-items:center; }
  .life-editorial-strip img { height:150px; }
  .life-editorial-strip figcaption { padding:15px; }
  .reality-hero { gap:24px; }
  .reality-cover { min-height:260px; }
}
/* Calm entry points: one heading, one explanation, useful next steps. */
.simple-hero { padding:clamp(36px,6vw,76px) 0; margin:18px 0 28px; border-bottom:1px solid #ffffff1c; }
.simple-hero h1 { max-width:1000px; margin:20px 0; font-size:clamp(42px,5.4vw,76px); line-height:1.06; letter-spacing:-.045em; color:#f5f9fc; }
.simple-hero h1 em { color:#51dcca; font-style:normal; }
.simple-hero p { max-width:630px; font-size:18px; line-height:1.65; color:#aebfcb; }
.simple-hero .studio-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.simple-hero .community-consent { font-size:14px; margin-top:20px; }
.community-intro h1 em { color:#a89bff; }
.tutorial-jump-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.tutorial-jump-links a { padding:12px 18px; border:1px solid #51dcca50; border-radius:9px; color:#70e5d6; text-decoration:none; }
.tutorial-directory section { scroll-margin-top:100px; margin-bottom:48px; }
.tutorial-guide-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.tutorial-guide-card { display:flex; flex-direction:column; padding:26px; border:1px solid #ffffff20; border-radius:16px; background:#0e1924; color:#f5f9fc; text-decoration:none; }
.tutorial-guide-card small { display:flex; justify-content:space-between; gap:12px; color:#69dfcc; font-size:12px; }
.tutorial-guide-card h3 { font-size:23px; line-height:1.3; margin:18px 0 12px; letter-spacing:-.025em; }
.tutorial-guide-card p { color:#acbfcc; font-size:15px; line-height:1.65; margin:0 0 24px; }
.tutorial-guide-card strong { display:flex; justify-content:space-between; gap:16px; margin-top:auto; font-size:12px; color:#c5d7df; }
.tutorial-guide-card:hover,.learn-tutorial-entry:hover { border-color:#51dcca; }
.tutorial-video-group { border-bottom:1px solid #ffffff20; padding:20px 0; }
.tutorial-video-group summary { cursor:pointer; font-size:22px; color:#e8f2f8; font-weight:750; }
.tutorial-video-group summary span { color:#8da5b5; font-size:14px; margin-left:14px; font-weight:400; }
.tutorial-video-group .gear-tutorial-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:22px; }
.launch-goal-grid .goal-art > img { width:62px; height:62px; filter:none; }
.launch-goal-grid .goal-art > img:nth-child(even),.launch-goal-grid .goal-art-merch > span:nth-child(2) { transform:none; }
.launch-goal-grid .goal-art-equipment svg { width:62px; height:66px; padding:8px; fill:none; stroke:#ffb577; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.launch-goal-grid .goal-art-program > img { width:88px; height:88px; }
.merch-page .merch-hero { min-height:0; grid-template-columns:1fr 1fr; padding:clamp(24px,4vw,48px); gap:32px; background:#0d1721; }
.merch-page .merch-hero::before,.merch-page .merch-hero::after { content:none; }
.merch-page .merch-hero h1 { font-size:clamp(42px,5vw,70px); line-height:1.04; }
.merch-hero-image { margin:0; overflow:hidden; border-radius:16px; background:#172033; }
.merch-hero-image > img { display:block; width:100%; height:auto; }
.merch-hero-image figcaption { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; padding:18px; color:#d1dce6; font-size:12px; }
.merch-hero-image a { color:#ffbf79; }
@media(max-width:760px) {
 .simple-hero { padding:30px 0; }
 .simple-hero p { font-size:16px; }
 .learn-tutorial-entry { grid-template-columns:1fr auto; padding:22px; gap:18px; }
 .tutorial-entry-icons { grid-column:1/-1; }
 .tutorial-guide-grid,.tutorial-video-group .gear-tutorial-grid,.merch-page .merch-hero { grid-template-columns:1fr; }
 .tutorial-guide-card { padding:22px; }
 .tutorial-guide-card h3 { font-size:21px; }
}
/* Clear entry cards, without decorative dashboards or repeated content. */
.home-intro,.community-intro { padding:clamp(28px,5vw,64px); border:1px solid #53d8cb38; border-radius:24px; background:radial-gradient(ellipse at 100% 0%,#246c6440,transparent 65%),#0b151f; }
.community-intro { border-color:#a89bff40; background:radial-gradient(ellipse at 100% 0%,#51458644,transparent 65%),#101421; }
.tutorial-guide-card { overflow:hidden; }
.tutorial-card-art { display:flex; align-items:center; justify-content:center; min-height:180px; margin:-26px -26px 24px; border-bottom:1px solid #ffffff18; background:radial-gradient(ellipse at center,var(--art-glow),transparent 75%),#101d29; }
.art-mint { --art-glow:#3fdcc43b; }
.art-purple { --art-glow:#9b7cef45; }
.art-blue { --art-glow:#459fea45; }
.art-amber { --art-glow:#f4b85e35; }
.tutorial-card-art img { width:210px; height:138px; object-fit:contain; filter:drop-shadow(0 12px 15px #0004); }
/* Radar controls are choices, not metadata tags. */
.radar-page .radar-preferences { grid-template-columns: minmax(230px,.7fr) minmax(0,1.3fr); gap:36px; }
.radar-page .radar-preferences h2 { font-size:clamp(32px,3.2vw,46px); line-height:1.12; }
.radar-page .radar-preferences form { gap:24px; }
.radar-page .radar-preferences legend { margin-bottom:12px; font-size:13px; letter-spacing:.08em; }
.radar-page .radar-preferences fieldset > div { gap:10px; }
.radar-page .radar-preference-chip span { min-height:50px; padding:12px 17px; gap:10px; border-color:#7897b052; color:#e0edf6; background:#182a3b; font-size:15px; font-weight:750; line-height:1.3; }
.radar-page .radar-preference-chip span img { width:32px; height:32px; flex-shrink:0; object-fit:contain; border-radius:6px; }
.radar-page .radar-preference-chip img[src$="/x.svg"] { background:#101319; padding:5px; box-sizing:border-box; }
.radar-page .radar-preference-chip:hover span { border-color:#68eddb; background:#213d4c; }
.radar-page .radar-preference-chip input:checked + span { background:#5ce9d1; color:#07201c; border-color:#81ffe8; box-shadow:0 4px 18px #50e0c82b; }
.radar-page .radar-preference-chip input:checked + span::after { content:'\2713' / ''; position:absolute; top:3px; right:5px; color:#07342c; font-size:12px; }
.radar-page .studio-button { min-height:58px; padding:16px 25px; font-family:inherit; font-size:17px; font-weight:850; line-height:1.3; }
.radar-page .studio-button-primary { background:linear-gradient(115deg,#65f3d6,#35d6d2); border:1px solid #99ffe5; box-shadow:0 6px 25px #41dfc62c; color:#06201d; }
.radar-page .studio-button-primary:hover { background:#8affdf; box-shadow:0 8px 30px #41dfc64d; }
.radar-page .studio-button-quiet { color:#e7f5ff; background:#203148; border-color:#6f8aab80; }
.radar-page .radar-reset,.radar-page .radar-personalize-jump,.radar-page .radar-hook button { min-height:46px; padding:12px 18px; font-size:14px; color:#d4e6f4; background:#182a3b; border-color:#7596b05c; }
.radar-page .radar-filters button { min-height:52px; font-size:15px; padding:12px 18px; }
.radar-page .radar-preference-actions { gap:14px; }
.radar-page button:focus-visible,.radar-page a:focus-visible { outline:3px solid #a0ffe7; outline-offset:4px; }
@media(max-width:900px) { .radar-page .radar-preferences { grid-template-columns:1fr; } }
@media(max-width:760px) {
 .home-intro,.community-intro { padding:28px 22px; border-radius:20px; }
 .tutorial-card-art { min-height:160px; margin:-22px -22px 22px; }
 .tutorial-card-art img { height:124px; }
 .radar-page .radar-preference-chip span { min-height:48px; padding:11px 12px; font-size:14px; }
 .radar-page .radar-hero-actions { display:grid; grid-template-columns:1fr; }
 .radar-page .radar-filters { flex-wrap:wrap; }
}
.community-with-art { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(220px,.7fr); gap:30px; align-items:center; }
.community-with-art h1 { font-size:clamp(42px,5vw,68px); }
.discord-hero-art { position:relative; display:grid; place-items:center; min-height:320px; background:radial-gradient(circle,#7865ee50,transparent 68%); }
.discord-icon-tile { width:clamp(190px,23vw,300px); aspect-ratio:1; display:grid; place-items:center; border:1px solid #b5aaff66; border-radius:30%; background:linear-gradient(145deg,#aaa0ff22,#6255cd33); box-shadow:0 25px 70px #5b45ce38,inset 0 1px 0 #ffffff30; transform:rotate(-9deg); }
.discord-icon-tile img { width:78%; height:78%; object-fit:contain; filter:drop-shadow(0 12px 15px #07072088); }
.discord-spark { position:absolute; font:300 38px Arial,sans-serif; color:#c4baff; }
.spark-one { right:1%; top:8%; }.spark-two { left:5%; bottom:8%; font-size:24px; }
.income-page { padding-bottom:30px; }
.income-summary { display:flex; gap:24px; align-items:center; justify-content:space-between; margin:24px 0; color:#c5d6df; }
.income-summary span { font-size:12px; color:#95aebd; }
.earning-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.earning-card { scroll-margin-top:100px; display:flex; flex-direction:column; padding:30px; border:1px solid #77bfbf30; border-radius:22px; background:linear-gradient(145deg,#11232b,#0d1723); }
.earning-icon { display:grid; place-items:center; width:62px; height:62px; flex-shrink:0; border-radius:17px; background:#51dec91a; border:1px solid #61ecd448; color:#70ebd8; }
.earning-icon svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.earning-card:nth-child(3n+2) .earning-icon { color:#b7a8ff; border-color:#b7a8ff55; background:#b7a8ff15; }
.earning-card h2 { font-size:27px; line-height:1.2; margin:22px 0 12px; letter-spacing:-.025em; color:#eff7fc; }
.earning-card p { font-size:16px; line-height:1.7; color:#adc2cf; margin:0 0 18px; }
.earning-card .earning-note { color:#d2e0e6; padding-left:14px; border-left:2px solid #7ee5d44d; font-size:14px; }
.earning-links { display:grid; gap:10px; margin-top:auto; padding-top:10px; }
.earning-links a { display:flex; justify-content:space-between; gap:14px; padding:13px 16px; border:1px solid #6bd6bf40; border-radius:10px; color:#78efda; background:#081a2199; font-size:14px; font-weight:750; text-decoration:none; }
.earning-links a:hover { border-color:#78efda; background:#163632; }
.income-footnote { padding:26px; margin-top:24px; border:1px solid #ffffff20; border-radius:16px; color:#bbcfda; line-height:1.7; }
.learn-income-link { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; padding:28px; margin:24px 0; border:1px solid #6bd6bf40; border-radius:16px; color:#73ead5; text-decoration:none; background:#10242b; }
.merch-collection-art { display:flex; position:relative; align-items:center; justify-content:center; gap:15px; min-height:220px; padding:30px 22px 60px; border-radius:16px; background:radial-gradient(ellipse at center,#6953a949,transparent 75%),#101c2c; }
.merch-collection-art img { width:20%; max-width:80px; height:auto; border-radius:16px; }
.merch-collection-art span { position:absolute; left:20px; right:20px; bottom:20px; color:#d2c9f4; font-size:11px; font-weight:800; letter-spacing:.1em; text-align:center; }
.merch-page .merch-checked { font-size:11px; color:#91a5b4; }
.merch-game-filters { padding-bottom:14px; border-bottom:1px solid #ffffff18; }
.merch-empty { color:#b5c6d2; line-height:1.7; padding:20px 0; font-size:14px; }
.launch-radar-preview .home-radar-return:not([hidden]) { margin-bottom:20px !important; }
.merch-empty { padding:24px; border:1px solid #96cfc538; border-radius:16px; background:#10222b; }
@media(max-width:900px) { .community-with-art { grid-template-columns:1fr; } .discord-hero-art { min-height:230px; } .discord-icon-tile { width:210px; } }
@media(max-width:760px) { .earning-grid { grid-template-columns:1fr; } .earning-card { padding:24px; } .income-summary { flex-direction:column; align-items:flex-start; gap:4px; } .community-with-art { gap:8px; } .community-with-art h1 { font-size:40px; } }
.merch-page .merch-card[hidden],.merch-page .merch-empty[hidden] { display:none !important; }
.merch-page .merch-filters button { min-height:44px; padding:11px 15px; font-size:13px; }
/* One public-page hero treatment, including generated tutorials and creator kits. */
html body :is(.simple-hero,.about-launch-hero,.resource-launch-hero,.radar-hero,.niche-launch-hero,.gear-directory-hero,.website-guide-hero,.project-hero,.reality-hero,.merch-page .merch-hero,.program-tier-hero,.tutorial-hero,.expanded-kit-hero,.gear-kit-header,.device-hero) {
 min-height:0; margin:24px 0 32px; padding:clamp(28px,4.5vw,64px); border:1px solid #70bdbd38; border-radius:24px; background:radial-gradient(ellipse at 100% 0%,#3c797328,transparent 70%),#0d1721; box-shadow:none; overflow:hidden;
}
html body :is(.simple-hero,.about-launch-hero,.resource-launch-hero,.radar-hero,.niche-launch-hero,.gear-directory-hero,.website-guide-hero,.project-hero,.reality-hero,.merch-page .merch-hero,.program-tier-hero,.tutorial-hero,.expanded-kit-hero,.gear-kit-header,.device-hero) h1 { margin:18px 0 22px; font-size:clamp(38px,4.6vw,68px); line-height:1.08; letter-spacing:-.04em; max-width:1000px; }
html body :is(.simple-hero,.about-launch-hero,.resource-launch-hero,.radar-hero,.niche-launch-hero,.gear-directory-hero,.website-guide-hero,.project-hero,.reality-hero,.merch-page .merch-hero,.program-tier-hero,.tutorial-hero,.expanded-kit-hero,.gear-kit-header,.device-hero)::before,
html body :is(.simple-hero,.about-launch-hero,.resource-launch-hero,.radar-hero,.niche-launch-hero,.gear-directory-hero,.website-guide-hero,.project-hero,.reality-hero,.merch-page .merch-hero,.program-tier-hero,.tutorial-hero,.expanded-kit-hero,.gear-kit-header,.device-hero)::after { content:none; }
.portal-logo-art { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:24px; background:radial-gradient(ellipse at center,#58d7c72b,transparent 75%),#0c2029; }
.project-portal .portal-logo-art { min-height:330px; padding:36px; }
.portal-logo-art figure,.income-card-art figure { margin:0; text-align:center; }
.portal-logo-art img { display:block; width:100px; height:120px; object-fit:contain; margin:auto; filter:drop-shadow(0 12px 16px #0005); }
.portal-logo-art figcaption { margin-top:16px; color:#bdceda; font-size:12px; }
.income-hero { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:center; gap:30px; }
.income-hero-art { padding:24px; border-radius:20px; min-height:250px; gap:16px; }
.income-hero-art img { width:75px; height:90px; }
.income-card-art { display:flex; flex-wrap:wrap; align-items:center; gap:22px; min-height:110px; padding-bottom:18px; border-bottom:1px solid #ffffff18; }
.income-card-art img { width:72px; height:72px; object-fit:contain; }
.income-card-art figcaption { color:#aac3ce; font-size:12px; margin-top:8px; }
.earning-card > .earning-icon { width:88px; height:88px; }
.earning-card > .earning-icon svg { width:44px; height:44px; }
html body .community-room-card > .community-room-art { width:96px; height:104px; border:0; border-radius:0; background:none; box-shadow:none; }
html body .community-room-card { grid-template-columns:96px minmax(0,1fr); }
.community-room-art img { width:96px; height:104px; object-fit:contain; filter:drop-shadow(0 8px 12px #0005); }
@media(max-width:760px) {
 html body :is(.simple-hero,.about-launch-hero,.resource-launch-hero,.radar-hero,.niche-launch-hero,.gear-directory-hero,.website-guide-hero,.project-hero,.reality-hero,.merch-page .merch-hero,.program-tier-hero,.tutorial-hero,.expanded-kit-hero,.gear-kit-header,.device-hero) { padding:28px 22px; border-radius:20px; margin:18px 0 26px; }
 html body :is(.simple-hero,.about-launch-hero,.resource-launch-hero,.radar-hero,.niche-launch-hero,.gear-directory-hero,.website-guide-hero,.project-hero,.reality-hero,.merch-page .merch-hero,.program-tier-hero,.tutorial-hero,.expanded-kit-hero,.gear-kit-header,.device-hero) h1 { font-size:clamp(32px,8vw,44px); }
 .income-hero { grid-template-columns:1fr; }
 .income-hero-art { flex-wrap:nowrap; min-height:160px; padding:16px 8px; gap:12px; }
 .income-hero-art img { width:58px; height:72px; }
 .income-hero-art figure { flex:1; min-width:0; }
 .income-hero-art figcaption { font-size:10px; }
 .project-portal .portal-logo-art { min-height:230px; padding:24px; gap:16px; }
 .portal-logo-art img { width:72px; height:90px; }
 html body .community-room-card > .community-room-art,.community-room-art img { width:70px; height:78px; }
 html body .community-room-card { grid-template-columns:70px minmax(0,1fr); gap:18px; }
}

/* Local product photos: bounded dimensions and no animated layers. */
.contear-inner-page .razer-products,
.razer-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.razer-products .gear-razer-card {
  display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden;
  border: 1px solid #29413d; border-radius: 22px; background: #0d1920; box-shadow: none;
}
.razer-product-photo {
  display: grid; place-items: center; background: #e9eeeb; aspect-ratio: 16 / 10;
  border-bottom: 1px solid #29413d;
}
.razer-product-photo img { width: 100%; height: 100%; max-height: 320px; object-fit: contain; padding: 22px; box-sizing: border-box; }
.razer-product-copy { display: flex; flex: 1; flex-direction: column; gap: 16px; padding: 28px; }
.razer-product-category { color: #99e887; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.razer-products .gear-razer-card h2 { font-size: clamp(24px, 2.3vw, 34px); line-height: 1.15; }
.razer-products .gear-razer-card p { color: #adbec6; line-height: 1.65; }
.razer-products .gear-product-actions { padding-top: 12px; }
.razer-products .gear-button-primary { display: flex; justify-content: space-between; gap: 16px; width: 100%; min-height: 54px; background: #9bea80; color: #10200d; border-color: #9bea80; }
.razer-product-photo:focus-visible { outline: 3px solid #9bea80; outline-offset: -4px; }
@media (max-width: 640px) {
  .contear-inner-page .razer-products, .razer-products { grid-template-columns: minmax(0, 1fr); }
  .razer-product-copy { padding: 22px; }
}
.merch-card-games { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.merch-card-games img { display:block; width:36px; height:36px; object-fit:contain; border-radius:9px; }
.merch-card header { flex-wrap:wrap; gap:12px; }
.project-directory-page .project-portal-tutorials { --portal:182,162,255; --card-surface:#201c32; --art-surface:#29213f; }
.project-directory-page .project-portal-web { --portal:135,184,255; --card-surface:#182538; --art-surface:#1d304b; }
.project-directory-page .project-portal-creator { --portal:213,159,242; --card-surface:#291f32; --art-surface:#352441; }
.project-directory-page .project-portal-reality { --portal:242,172,141; --card-surface:#30231f; --art-surface:#3b2c26; }
.project-directory-page .project-portal-income { --portal:236,199,115; --card-surface:#2c291e; --art-surface:#383222; }
.project-directory-page .project-portal {
  grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--card-surface); border-color:rgba(var(--portal),.32); box-shadow:none;
}
.project-directory-page .project-portal-art { grid-column:1; grid-row:1; background:var(--art-surface); border:0; }
.project-directory-page .project-portal-copy { grid-column:2; grid-row:1; }
.project-directory-page .project-kicker { color:rgb(var(--portal)); font-size:12px; line-height:1.4; letter-spacing:.12em; }
.project-directory-page .project-portal h2 { font-size:clamp(32px,3.3vw,48px); line-height:1.08; letter-spacing:-.035em; }
.project-directory-page .project-portal-copy > p { color:#c0c5cf; }
@media (max-width:900px) {
  .project-directory-page .project-portal { grid-template-columns:minmax(0,1fr); }
  .project-directory-page .project-portal-copy { grid-column:1; grid-row:2; }
}

/* Focused finishing pass: retain the dark identity and existing layouts.
   Interaction patterns inspired by transitions.dev; no perpetual animation. */
.hero-illustration-brand .hero-art-main {
  border-radius: 26%; border-color: #a68cff70;
  box-shadow: 0 12px 0 #090b18, 0 13px 0 #a68cff35;
}
.hero-illustration-brand::after { content: none; }
.project-directory-page .project-portal { border-top: 2px solid rgba(var(--portal),.65); }
.project-directory-page .project-portal-action a { border-radius: 12px; }
.community-room-card { border-top-color: #a68cff55; }
@media (prefers-reduced-motion: no-preference) {
  :is(.studio-button,.project-portal-action a,.merch-shop-link) {
    transition: transform 180ms cubic-bezier(.22,1,.36,1), border-color 180ms ease, background-color 180ms ease;
  }
  :is(.studio-button,.project-portal-action a,.merch-shop-link):active { transform: scale(.98); }
  .radar-preference-content { transition: background-color 180ms ease, border-color 180ms ease; }
  .radar-preference-chip input:checked + .radar-preference-content img { animation: contear-check-pop 230ms cubic-bezier(.22,1,.36,1); }
  @keyframes contear-check-pop { from { transform: scale(.85); } to { transform: scale(1); } }
  :is(.radar-details,.tutorial-content details)[open] > :not(summary) {
    animation: contear-panel-reveal 220ms cubic-bezier(.22,1,.36,1);
  }
  @keyframes contear-panel-reveal {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  :is(.project-directory-page .project-portal,.tutorial-guide-card,.community-room-card) {
    transition: transform 260ms cubic-bezier(.22,1,.36,1), border-color 180ms ease;
  }
  :is(.project-directory-page .project-portal,.tutorial-guide-card,.community-room-card):hover { transform: translateY(-3px); }
  .hero-illustration-brand .hero-art-main { transition: transform 380ms cubic-bezier(.22,1,.36,1); }
  .hero-illustration-brand:hover .hero-art-main { transform: translateY(-6px) rotate(-2deg); }
  .community-room-art img { transition: transform 300ms cubic-bezier(.22,1,.36,1); }
  .community-room-card:hover .community-room-art img { transform: translateY(-4px) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.studio-button,.project-portal,.project-portal-action a,.merch-shop-link,.tutorial-guide-card,.community-room-card,.community-room-art img,.hero-illustration-brand .hero-art-main,.radar-preference-content) { transition: none; animation: none; }
}