/* Hallmark · shape: app screen · genre: atmospheric · theme: custom · redesign: full
 * idea: a global demand intelligence observatory · vibe: expansive optical precise cinematic
 * paper: midnight charcoal · accent: luminous mint · display: system Chinese · body: system Chinese
 * nav: panoramic top bar · signature: global signal globe and factual project index · states: loading empty error full
 * axes: dark/system sans/mint · posture: open intelligence horizon · v2.0.0 */
/* Hallmark · pre-emit critique: an overly modest reading desk was rejected; rebuilt hierarchy, visual depth and composition. */
/* Hallmark · waive 72 · closed details.warnings paints its summary only and omits the collapsed list from AX · The ranking warnings preserve native disclosure; hidden list geometry does not represent visible text crowding. */
/* Hallmark · waive 49b · at 320px a repository title link wraps inside its ranking row without clipping · Complete ranking project names remain visible rather than truncating source identity on small screens. */
@import url('./tokens.css');
@import url('./base.css');
:root { --public-header:88px; --rank-column:44px; --author-column:160px; --metric-column:140px; --headline-size:clamp(40px,4.4vw,64px); --hero-height:416px; --item-title:18px; --container:1440px; --gutter:56px; --color-hero-paper:#080e13; --color-focus-ring:#84efd2; }
html { scroll-behavior:smooth; }
body { font-size:var(--text-sm); background:var(--color-paper); }
a { text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:5px; }
button, input, select, summary { color:inherit; }
button { cursor:pointer; }
button:disabled,[aria-disabled='true'] { opacity:.5;cursor:not-allowed; }
button:active:not(:disabled),.workbench-link:active,.explore-button:active { transform:translateY(1px); }
h1,h2,h3 { line-height:1.4; }
.icon { width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap; }
.skip-link { position:fixed;left:var(--space-lg);top:-80px;z-index:var(--z-tooltip);padding:var(--space-sm) var(--space-md);background:var(--color-accent);color:var(--color-accent-ink); }
.skip-link:focus { top:var(--space-xs); }
.site-header { height:var(--public-header);border-bottom:1px solid var(--color-rule);position:relative;z-index:var(--z-raised); }
.header-inner { max-width:var(--container);height:100%;margin-inline:auto;padding-inline:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg); }
.brand { display:inline-flex;align-items:center;gap:var(--space-sm);font-size:22px;font-weight:600;letter-spacing:-.035em;color:var(--color-ink);white-space:nowrap; }
.brand:hover { text-decoration:none; }
.brand-mark { color:var(--color-accent);width:38px;height:38px;flex-shrink:0; }
.workbench-link { display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);min-height:44px;padding:var(--space-sm) var(--space-lg);border:1px solid var(--color-accent);border-radius:var(--radius-input);background:var(--color-clear);color:var(--color-accent);font-size:var(--text-sm);font-weight:600;white-space:nowrap; }
.workbench-link:hover { background:var(--color-paper-3);text-decoration:none; }
.workbench-link .icon { width:16px;height:16px; }
.page { max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter); }
.hero { position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:var(--hero-height);align-items:center;isolation:isolate; }
.hero::before { content:'';position:absolute;inset:0 calc(-1*var(--gutter));background:var(--color-clear);z-index:-2;pointer-events:none; }
.hero-copy { position:relative;z-index:2;padding-block:var(--space-xl); }
.hero h1 { font-size:var(--headline-size);line-height:1.24;max-width:none;letter-spacing:-.045em;font-weight:600; }
.hero-copy>p { color:var(--color-ink-2);font-size:16px;line-height:1.9;margin-top:var(--space-lg);max-width:48ch; }
.hero-actions { display:flex;align-items:center;gap:var(--space-lg);margin-top:var(--space-lg); }
.explore-button { display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);min-height:46px;border-radius:var(--radius-input);background:var(--color-accent);color:var(--color-accent-ink);padding:var(--space-sm) var(--space-lg);font-weight:600;font-size:var(--text-sm); }
.explore-button:hover { background:var(--color-accent-hover);text-decoration:none; }
.hero-secondary { color:var(--color-ink-2);font-size:var(--text-sm);padding-block:var(--space-sm); }
.hero-scopes { display:flex;gap:var(--space-md);margin-top:var(--space-lg);color:var(--color-muted);font-size:var(--text-xs); }
.hero-scopes span+span { border-left:1px solid var(--color-rule);padding-left:var(--space-md); }
.hero-visual { position:relative;width:100%;height:var(--hero-height);margin:0;min-width:0;z-index:-1; }
.hero-visual img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:lighten;mask-image:linear-gradient(to right,var(--color-clear),var(--color-ink) 16%,var(--color-ink) 85%,var(--color-clear)); }
.hero-visual figcaption { position:absolute;bottom:var(--space-lg);right:var(--space-lg);font-size:var(--text-xs);color:var(--color-muted); }
.ranking-section { position:relative; }
.signal-toolbar { display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);border-block:1px solid var(--color-rule);padding-block:var(--space-md); }
.platforms { display:flex;align-items:center;gap:var(--space-xs);min-width:0; }
.platform { display:inline-flex;align-items:center;gap:var(--space-xs);min-height:44px;border:1px solid var(--color-clear);border-radius:var(--radius-input);background:var(--color-clear);color:var(--color-muted);padding:var(--space-xs) var(--space-md);font-size:var(--text-sm);white-space:nowrap; }
.platform:hover:not(.candidate) { background:var(--color-paper-3);color:var(--color-ink); }
.platform.selected { color:var(--color-accent);background:var(--color-paper-3);border-color:var(--color-rule);font-weight:600; }
.platform.selected:hover { color:var(--color-accent);background:var(--color-paper-3); }
.platform.candidate { color:var(--color-muted);font-size:var(--text-xs);gap:var(--space-xs);cursor:default; }
.platform.candidate small { font-size:var(--text-xs);color:var(--color-muted); }
.scope-link { display:inline-flex;align-items:center;gap:var(--space-xs);white-space:nowrap;color:var(--color-muted);font-size:var(--text-xs); }
.scope-link .icon { width:15px;height:15px; }
.period-toolbar { display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);padding-top:var(--space-lg); }
.periods { display:flex;gap:var(--space-2xs);border-radius:var(--radius-input);background:var(--color-paper-2);padding:var(--space-2xs); }
.period { border:0;background:var(--color-clear);border-radius:6px;padding:var(--space-xs) var(--space-md);min-height:36px;color:var(--color-muted);font-size:var(--text-sm);white-space:nowrap; }
.period:hover { background:var(--color-paper-3);color:var(--color-ink); }
.period.selected { background:var(--color-accent);color:var(--color-accent-ink);font-weight:600; }
.read-only-note { font-size:var(--text-xs);color:var(--color-muted); }
.section-heading { display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);padding-block:var(--space-lg); }
.section-heading h2 { font-size:24px;font-weight:600;max-width:none;letter-spacing:-.02em; }
.ranking-subtitle { margin-top:var(--space-xs);font-size:var(--text-xs);line-height:1.8;color:var(--color-muted); }
.filters { display:flex;align-items:center;justify-content:flex-end;gap:var(--space-xs);flex-wrap:wrap; }
.search-label { display:flex;align-items:center;gap:var(--space-xs);width:250px;min-width:0;background:var(--color-paper-2);border:1px solid var(--color-control-edge);border-radius:var(--radius-input);padding-inline:var(--space-sm);color:var(--color-muted); }
.search-label input { width:100%;min-width:0;height:42px;padding:0;border:0;outline:0;background:var(--color-clear);color:var(--color-ink);font-size:var(--text-sm); }
.search-label input::placeholder { color:var(--color-muted);opacity:1; }
.search-label:focus-within { outline:2px solid var(--color-focus);outline-offset:3px; }
.search-label input:focus-visible { outline:0; }
kbd { font:inherit;font-size:var(--text-xs);border:1px solid var(--color-control-edge);border-radius:3px;width:20px;height:22px;display:grid;place-items:center;flex-shrink:0; }
.language-label { min-height:44px;display:flex;align-items:center;gap:var(--space-xs);padding-inline:var(--space-sm);border:1px solid var(--color-control-edge);background:var(--color-paper-2);border-radius:var(--radius-input);color:var(--color-muted);font-size:var(--text-xs); }
.language-label select { color:var(--color-ink);background:var(--color-paper-2);max-width:118px;min-width:70px;border:0;height:42px;padding-inline:var(--space-2xs);font-size:var(--text-sm);cursor:pointer; }
.clear-filters { background:var(--color-clear);color:var(--color-accent);text-decoration:underline;border:0;min-height:40px;padding:var(--space-xs);font-size:var(--text-xs); }
.scope-note { display:flex;align-items:flex-start;gap:var(--space-xs);color:var(--color-ink-2);padding:var(--space-sm) 0;font-size:var(--text-xs);line-height:1.9;margin-bottom:var(--space-xs); }
.scope-note .icon { width:15px;height:15px;margin-top:var(--space-2xs);color:var(--color-accent); }
.column-heading { display:grid;grid-template-columns:var(--rank-column) minmax(0,1fr) var(--author-column) var(--metric-column) var(--metric-column);align-items:center;gap:var(--space-lg);color:var(--color-muted);font-size:var(--text-xs);padding:var(--space-md) var(--space-lg); }
.column-heading span:nth-last-child(-n+2) { text-align:right; }
.column-heading.qiita-columns { grid-template-columns:var(--rank-column) minmax(0,1fr) var(--author-column) minmax(304px,1fr); }
.ranking-results { background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-card);overflow:clip; }
.ranking-row { display:grid;grid-template-columns:var(--rank-column) minmax(0,1fr) var(--author-column) calc(var(--metric-column)*2 + var(--space-lg));align-items:center;gap:var(--space-lg);padding:var(--space-lg);border-bottom:1px solid var(--color-rule);position:relative;min-width:0; }
.ranking-row:last-child { border-bottom:0; }
.ranking-row:hover { background:var(--color-surface); }
.ranking-row:first-child { background:var(--color-surface);padding-block:var(--space-xl); }
.rank-number { color:var(--color-muted);font-size:22px;font-weight:400;font-variant-numeric:tabular-nums; }
.ranking-row:first-child .rank-number { font-variant-numeric:tabular-nums;color:var(--color-accent);font-size:28px; }
.item-content { min-width:0; }
.item-content h3 { max-width:none;font-size:var(--item-title);line-height:1.5;letter-spacing:-.02em;font-weight:600;overflow-wrap:break-word; }
.item-content h3 a { color:var(--color-ink); }
.item-content h3 a:hover { color:var(--color-accent); }
.item-description { margin-top:var(--space-xs);color:var(--color-muted);font-size:var(--text-xs);line-height:1.9;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; }
.item-description>span { display:inline;margin-right:var(--space-xs); }
.item-author { display:flex;flex-direction:column;gap:var(--space-xs);min-width:0;font-size:var(--text-xs);color:var(--color-muted); }
.author-name { display:flex;align-items:center;gap:var(--space-xs);color:var(--color-ink-2);overflow-wrap:break-word; }
.author-name .icon { width:14px;height:14px; }
.item-language { display:flex;align-items:center;gap:var(--space-xs); }
.language-dot { display:none; }
.item-author small { display:flex;align-items:center;gap:var(--space-xs);font-size:var(--text-xs); }
.item-author small .icon { width:13px;height:13px; }
.item-mobile-meta { display:none; }
.item-metrics { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg);font-variant-numeric:tabular-nums; }
.metric { text-align:right;min-width:0; }
.metric>span { display:block;position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap;color:var(--color-muted);font-size:var(--text-xs); }
.metric strong { display:flex;align-items:center;justify-content:flex-end;gap:var(--space-xs);font-size:24px;font-weight:400;color:var(--color-ink);white-space:nowrap; }
.metric:first-child strong { color:var(--color-accent);font-weight:600; }
.metric .icon { width:15px;height:15px;color:var(--color-muted); }
.qiita-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
.qiita-metrics .metric>span { display:block;position:static;width:auto;height:auto;clip-path:none;overflow:visible;white-space:normal;margin-bottom:var(--space-xs); }
.qiita-metrics .metric strong { font-size:var(--text-lg); }
.row-open { position:absolute;right:var(--space-md);top:var(--space-sm);width:24px;height:24px;display:none;place-items:center;color:var(--color-accent); }
.row-open .icon { width:14px;height:14px; }
.update-row { display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-xs) var(--space-md);color:var(--color-muted);font-size:var(--text-xs);padding-block:var(--space-lg); }
.update-row a { color:var(--color-ink-2);text-decoration:underline; }
.update-row .research-link { display:flex;align-items:center;gap:var(--space-xs);margin-left:auto;color:var(--color-accent); }
.research-link .icon { width:14px;height:14px; }
.warnings { border:1px solid var(--color-rule);border-radius:var(--radius-input);color:var(--color-muted);font-size:var(--text-xs);background:var(--color-paper); }
.warnings summary { cursor:pointer;min-height:44px;padding:var(--space-sm) var(--space-md);color:var(--color-ink-2); }
.warnings ul { margin:0;padding:0 var(--space-lg) var(--space-md) var(--space-xl);line-height:1.9; }
.warnings li+li { margin-top:var(--space-xs); }
.methodology { margin-block:var(--space-2xl) var(--space-xl);padding-block:var(--space-xl);border-top:1px solid var(--color-rule);display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--space-xl); }
.methodology-heading { display:flex;align-items:flex-start;gap:var(--space-sm); }
.methodology-heading .icon { width:20px;height:20px;margin-top:var(--space-2xs);color:var(--color-accent); }
.methodology-heading h2 { font-size:var(--text-lg);font-weight:600;letter-spacing:0; }
.methodology-body { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg) var(--space-xl); }
.methodology-body p { color:var(--color-muted);font-size:var(--text-sm);line-height:1.9; }
.methodology-body strong { display:block;font-weight:600;color:var(--color-ink-2);margin-bottom:var(--space-xs); }
.site-footer { display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);flex-wrap:wrap;padding-block:var(--space-lg) var(--space-xl);border-top:1px solid var(--color-rule);color:var(--color-muted);font-size:var(--text-xs); }
.footer-brand { font-size:var(--text-lg);font-weight:600;color:var(--color-ink);letter-spacing:-.03em; }
.site-footer>a:last-child { color:var(--color-accent); }
.empty-state { min-height:320px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:var(--space-xl) var(--space-lg); }
.empty-state>.icon { width:32px;height:32px;color:var(--color-accent);margin-bottom:var(--space-md); }
.empty-state h3 { max-width:none;font-size:var(--text-lg);margin-bottom:var(--space-sm); }
.empty-state p { font-variant-numeric:tabular-nums;max-width:52ch;color:var(--color-muted);font-size:var(--text-sm);line-height:1.9; }
.button { margin-top:var(--space-lg);border:1px solid var(--color-control-edge);border-radius:var(--radius-input);padding:var(--space-xs) var(--space-md);min-height:44px;color:var(--color-accent);background:var(--color-paper-3); }
.button:hover { background:var(--color-surface); }
.loading { min-height:280px;padding:var(--space-xl);display:flex;align-items:center;justify-content:center;gap:var(--space-sm);color:var(--color-muted); }
.spinner { width:18px;height:18px;border:2px solid var(--color-rule);border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.noscript-note { padding:var(--space-lg);text-align:center;color:var(--color-ink-2); }
@media(min-width:1600px) { :root { --gutter:64px; } }
@media(max-width:1250px) { :root { --gutter:40px;--author-column:130px;--metric-column:114px;--headline-size:52px; } .platform { padding-inline:var(--space-sm); } .hero-copy>p { font-size:15px; } .ranking-row,.column-heading { gap:var(--space-md); } .ranking-row { grid-template-columns:var(--rank-column) minmax(0,1fr) var(--author-column) calc(var(--metric-column)*2 + var(--space-md)); } .column-heading.qiita-columns { grid-template-columns:var(--rank-column) minmax(0,1fr) var(--author-column) minmax(244px,1fr); } .item-metrics { gap:var(--space-md); } .metric strong { font-size:22px; } }
@media(max-width:1024px) { :root { --gutter:32px;--headline-size:44px;--author-column:110px;--metric-column:104px; } .hero { min-height:380px; } .hero-visual { height:380px; } .platform.candidate { padding-inline:var(--space-xs); } .platform.candidate small { display:none; } .scope-link { display:none; } .search-label { width:220px; } .language-label>span { display:none; } .methodology { grid-template-columns:minmax(0,1fr);gap:var(--space-lg); }  }
@media(max-width:800px) { :root { --gutter:24px;--public-header:76px;--headline-size:40px; } .brand { font-size:20px; } .brand-mark { width:32px;height:32px; }  .hero { grid-template-columns:minmax(0,1fr);min-height:400px; } .hero-copy { padding-block:var(--space-xl); } .hero-visual { position:absolute;right:0;top:0;width:55%;height:100%;opacity:.4; } .hero-visual img { mask-image:linear-gradient(to right,var(--color-clear),var(--color-ink)); } .hero-visual figcaption { display:none; } .hero-copy>p { font-size:15px;max-width:40ch; } .signal-toolbar { overflow-x:auto; } .platforms { gap:var(--space-2xs); } .platform.candidate small { display:block; } .section-heading { align-items:flex-start;flex-direction:column;gap:var(--space-md); } .filters { width:100%;justify-content:flex-start; } .search-label { flex:1;width:auto;max-width:400px; } .ranking-row { grid-template-columns:32px minmax(0,1fr) 120px calc(var(--metric-column)*2 + var(--space-md)); } .column-heading { grid-template-columns:32px minmax(0,1fr) 120px var(--metric-column) var(--metric-column); } .item-metrics { gap:var(--space-md); } .metric strong { font-size:20px; } }
@media(max-width:660px) { :root { --gutter:16px;--public-header:72px;--headline-size:36px; } .brand { font-size:18px;gap:var(--space-xs); } .brand-mark { width:30px;height:30px; } .workbench-link { font-size:var(--text-xs);min-height:40px;padding:var(--space-xs) var(--space-sm);gap:var(--space-xs); } .workbench-link .icon { display:none; } .hero { min-height:368px; } .hero-copy { padding-block:var(--space-xl); } .hero h1 { line-height:1.3;letter-spacing:-.035em; } .hero-copy>p { font-size:var(--text-sm);max-width:29ch;line-height:1.9;margin-top:var(--space-md); } .hero-visual { width:78%;right:0;opacity:.3; } .hero-visual img { object-fit:cover;mask-image:linear-gradient(to right,var(--color-clear),var(--color-ink) 80%); } .hero-actions { gap:var(--space-lg);margin-top:var(--space-lg); } .explore-button { min-height:44px;font-size:var(--text-xs);padding:var(--space-sm) var(--space-md); } .hero-secondary { font-size:var(--text-xs); } .hero-scopes { margin-top:var(--space-lg);font-size:var(--text-xs);gap:var(--space-sm); } .hero-scopes span+span { padding-left:var(--space-sm); } .platform { min-height:44px;font-size:var(--text-xs);padding:var(--space-xs) var(--space-sm); } .platform .icon { width:16px;height:16px; } .platform.candidate { gap:var(--space-xs);padding-inline:var(--space-xs); } .platform.candidate small { font-size:var(--text-xs); } .signal-toolbar { padding-block:var(--space-sm); } .period-toolbar { padding-top:var(--space-lg); } .periods { width:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-3xs); } .period { font-size:var(--text-xs);white-space:nowrap;padding:var(--space-xs) var(--space-3xs);min-height:44px; } .read-only-note { display:none; } .section-heading { padding-block:var(--space-lg) var(--space-md);gap:var(--space-md); } .section-heading h2 { font-size:22px; } .ranking-subtitle { margin-top:var(--space-2xs); } .filters { gap:var(--space-xs);flex-wrap:wrap; } .search-label { width:auto;max-width:none; } .search-label input { height:44px;font-size:var(--text-xs); } .search-label kbd { display:none; } .language-label { max-width:140px;min-height:46px; } .language-label select { max-width:108px;min-width:64px;height:44px;font-size:var(--text-xs); } .clear-filters { min-height:32px; } .scope-note { font-size:var(--text-xs);padding-block:var(--space-sm);margin-bottom:var(--space-sm); } .column-heading { display:none; } .ranking-row { grid-template-columns:24px minmax(0,1fr);gap:0 var(--space-sm);padding:var(--space-lg) var(--space-md); } .ranking-row:first-child { padding-block:var(--space-lg); } .rank-number,.ranking-row:first-child .rank-number { font-size:var(--text-md);grid-row:span 2;align-self:start; } .item-content h3 { font-size:var(--text-md);padding-right:var(--space-md); } .item-description { font-size:var(--text-xs);margin-top:var(--space-xs);-webkit-line-clamp:3; } .item-description>span { display:none; } .item-author { display:none; } .item-mobile-meta { display:flex;align-items:center;gap:var(--space-xs) var(--space-sm);flex-wrap:wrap;color:var(--color-muted);font-size:var(--text-xs);margin-top:var(--space-sm); } .fork-count { display:inline-flex;align-items:center;gap:var(--space-2xs); } .fork-count .icon { width:12px;height:12px; } .item-metrics { grid-column:2;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--space-md);gap:var(--space-md);max-width:280px; } .metric { text-align:left; } .metric>span { display:block;position:static;width:auto;height:auto;clip-path:none;overflow:visible;white-space:normal;margin-bottom:var(--space-xs);font-size:var(--text-xs); } .metric strong { justify-content:flex-start;font-size:22px; } .metric .icon { width:14px;height:14px; } .qiita-metrics { grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:var(--space-sm); } .qiita-metrics .metric strong { font-size:var(--text-md); } .row-open { display:grid; } .update-row { line-height:1.9;padding-block:var(--space-md); } .update-row .research-link { margin-left:0;flex-basis:100%;min-height:36px; } .methodology { margin-block:var(--space-xl);gap:var(--space-md);padding-top:var(--space-lg); } .methodology-body { grid-template-columns:minmax(0,1fr);gap:var(--space-lg); } .methodology-body p { font-size:var(--text-xs); } .site-footer { gap:var(--space-md);padding-bottom:var(--space-lg); } .site-footer>span { flex-basis:100%;order:3; } .footer-brand { font-size:var(--text-md); } .empty-state { padding:var(--space-xl) var(--space-md);min-height:300px; } .empty-state h3 { font-size:var(--text-md); } .empty-state p { font-size:var(--text-xs); } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .spinner { animation:none; } button:active:not(:disabled),.workbench-link:active,.explore-button:active { transform:none; } }

/* User removed the header page navigation; source explanations remain in the data section. */
/* Globe motion is decorative, with a persistent pause control and automatic reduced motion. */
.hero-visual { overflow:clip; }
.hero-visual img { animation:globe-float 12s ease-in-out infinite;transform-origin:56% 50%;will-change:transform; }
.globe-orbit { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:var(--color-accent); }
.orbit-track { stroke:currentColor;stroke-width:.65;opacity:.14; }
.orbit-light { stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-dasharray:5 95;animation:orbit-drift 14s linear infinite;filter:drop-shadow(0 0 5px var(--color-accent));opacity:.8; }
.globe-toggle { position:absolute;right:var(--space-lg);bottom:calc(var(--space-2xl) - var(--space-xs));z-index:var(--z-raised);display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--color-control-edge);border-radius:var(--radius-pill);background:var(--color-paper-2);color:var(--color-ink-2);padding:0; }
.globe-toggle:hover { color:var(--color-accent);background:var(--color-paper-3); }
.globe-toggle .icon { width:16px;height:16px; }
.globe-toggle .play-icon { display:none; }
.globe-toggle[data-paused='true'] .pause-icon { display:none; }
.globe-toggle[data-paused='true'] .play-icon { display:block; }
.globe-toggle:disabled { opacity:.65;cursor:default; }
.hero-visual.motion-paused img,.hero-visual.motion-paused .orbit-light { animation-play-state:paused; }
@keyframes globe-float { 0%,100% { transform:translateY(4px) rotate(-.6deg) scale(1.012); } 50% { transform:translateY(-5px) rotate(.7deg) scale(1.024); } }
@keyframes orbit-drift { to { stroke-dashoffset:-100; } }
@media(max-width:800px) { .globe-toggle { right:var(--space-xs);bottom:var(--space-lg);width:44px;height:44px; } .hero-visual img { animation-name:globe-float-mobile; } .orbit-light { opacity:.6; } }
@keyframes globe-float-mobile { 0%,100% { transform:translateY(2px) rotate(-.35deg) scale(1.012); } 50% { transform:translateY(-3px) rotate(.4deg) scale(1.02); } }
@media(prefers-reduced-motion:reduce) { .hero-visual img,.orbit-light { animation:none;will-change:auto; } .orbit-light { opacity:0; } }