/* トップページ（/ ・ /about）専用 CSS（change0916 Task 2.4 / 2.11）。docs/about-page-mock.html の <style> を移したもの。
   共通ナビと監修カードは static/css/public_pages.css（hx-pnav-* / hx-sup-*）にある。
   - 文字サイズは他の公開ページと同じ html ルール（rem 全体を画面幅で 16→19px に）。モックの body clamp は使わず、
     モックで +20% していた見出しの clamp() 上限は 1/1.2 に戻している（2560px でモックの最大値と同じ見た目になる）。
   - h1 / h2 は word-break: keep-all（高解像度で語の途中で折れない）。長い見出しは .heading-line / .keep-phrase で折る位置を明示する。
   - ナビは sticky で流れの中にあるため、モックの fixed ナビ前提だった hero の上余白と min-height は 68px 分だけ減らしている。
   - .fade-in の初期非表示は .js クラス（static/js/about_page.js が付ける）で門番する。JS が読めなくても本文が消えない。 */
:root {
  --helix-blue: #2b6bf2;
  --helix-cyan: #00d4ff;
  --helix-teal: #0abfb0;
  --deep-navy: #0b1528;
  --midnight: #111d35;
  --card-dark: #1a2844;
  --soft-white: #f0f4fa;
  --mid-gray: #8495af;
  --coral: #ff6b5a;
  --amber: #ffb347;
  --violet: #a78bfa;
  --emerald: #34d399;
  --line: rgba(126, 154, 196, .14);
  --nav-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; font-size: clamp(16px, 15px + 0.2vw, 19px); } /* 高解像度でも小さくなりすぎない: rem 全体を画面幅で 16→19px に */
body {
  margin: 0;
  min-width: 320px;
  font-family: "DM Sans", "Noto Sans JP", system-ui, sans-serif;
  font-size: 1rem;
  color: var(--soft-white);
  background: var(--deep-navy);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--helix-cyan); text-decoration: none; }
a:hover { color: #fff; }
button, input { font: inherit; }
p { text-wrap: pretty; }
h1, h2, h3, blockquote { text-wrap: balance; }
h1, h2 { word-break: keep-all; line-break: strict; }
:focus-visible { outline: 3px solid rgba(0, 212, 255, .72); outline-offset: 3px; }

.skip-link {
  position: fixed; z-index: 999; top: .7rem; left: .7rem;
  padding: .7rem 1rem; border-radius: 9px;
  color: var(--deep-navy); background: var(--soft-white);
  transform: translateY(-150%); transition: transform .2s;
}
.skip-link:focus { transform: translateY(0); }

.ambient { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ambient .orb { position: absolute; border-radius: 50%; filter: blur(120px); opacity: .1; }
.o1 { width: 700px; height: 700px; top: -15%; left: -8%; background: var(--helix-blue); animation: od1 20s ease-in-out infinite alternate; }
.o2 { width: 500px; height: 500px; right: -4%; bottom: -8%; background: var(--helix-cyan); animation: od2 18s ease-in-out infinite alternate; }
.o3 { width: 350px; height: 350px; top: 55%; left: 55%; background: var(--coral); animation: od3 22s ease-in-out infinite alternate; }
@keyframes od1 { to { transform: translate(60px, 50px); } }
@keyframes od2 { to { transform: translate(-50px, -60px); } }
@keyframes od3 { to { transform: translate(30px, -40px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

.page { position: relative; z-index: 1; }
.section { width: min(1160px, calc(100% - 40px)); margin-inline: auto; padding: 6.5rem 0; }
.divider { width: min(1160px, calc(100% - 40px)); height: 1px; margin-inline: auto; background: linear-gradient(90deg, transparent, rgba(0, 212, 255, .17), transparent); }
.section-label { margin-bottom: .8rem; color: var(--helix-cyan); font: 500 .7rem Outfit, sans-serif; letter-spacing: .38em; text-transform: uppercase; }
.section-heading {
  max-width: 960px;
  margin: 0 0 1.5rem;
  color: var(--soft-white);
  font: 700 clamp(1.9rem, 4.2vw, 3.2rem)/1.35 Outfit, "Noto Sans JP", sans-serif;
  letter-spacing: -.025em;
  overflow: visible;
}
.heading-line { display: block; text-wrap: wrap; }
.keep-phrase { display: inline-block; white-space: nowrap; }
.section-body { max-width: 780px; margin: 0; color: var(--mid-gray); line-height: 1.9; }
.gradient-text { background: linear-gradient(135deg, var(--helix-cyan), var(--helix-teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.js .fade-in { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .fade-in.visible { opacity: 1; transform: translateY(0); }

/* CTA の行（hero 以外: 登場アニメ無し・左寄せ） */
.cta-row { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; }

.about-hero {
  min-height: calc(100vh - var(--nav-h)); padding: 4.5rem 2rem 5rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}
/* Release opacity after the entrance so the canvas loop can fade out and reset. */
.hero-logo-canvas { width: 150px; height: 203px; filter: drop-shadow(0 0 40px rgba(0, 212, 255, .25)); opacity: 1; animation: fadeUp .9s .25s backwards; }
.hero-wordmark {
  margin-top: 1.15rem;
  font: 800 clamp(3.25rem, 8vw, 3.75rem)/1 Outfit, sans-serif;
  letter-spacing: -.03em;
  background: linear-gradient(135deg, #fff 0%, var(--helix-cyan) 60%, var(--helix-teal) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; animation: fadeUp .9s .45s forwards;
}
.hero-tagline { margin-top: 1rem; color: var(--mid-gray); font-size: .92rem; letter-spacing: .12em; text-transform: uppercase; opacity: 0; animation: fadeUp .8s .7s forwards; }
.hero-empathy { max-width: 790px; margin-top: 3.2rem; color: var(--mid-gray); font-size: 1em; line-height: 2; text-wrap: balance; opacity: 0; animation: fadeUp .8s .95s forwards; }
.about-hero h1 {
  max-width: 980px;
  margin: 1.35rem 0 0;
  font: 800 clamp(2.25rem, 5.5vw, 4rem)/1.3 Outfit, "Noto Sans JP", sans-serif;
  letter-spacing: -.035em;
  overflow: visible;
  opacity: 0; animation: fadeUp .8s 1.15s forwards;
}
.about-hero h1 .headline-line { display: block; }
.hero-answer { max-width: 770px; margin: 1.65rem 0 0; color: var(--mid-gray); font-size: 1em; line-height: 1.9; text-wrap: balance; opacity: 0; animation: fadeUp .8s 1.35s forwards; }
.hero-answer strong { color: var(--soft-white); font-weight: 600; }
.hero-cta-wrap { margin-top: 2.2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; opacity: 0; animation: fadeUp .8s 1.55s forwards; }
/* 主 CTA（/register）の直下: Google ログインが有効なときだけ描画される 1 行 */
.hero-google-note { margin: .85rem 0 0; color: var(--mid-gray); font-size: .78rem; letter-spacing: .02em; opacity: 0; animation: fadeUp .8s 1.65s forwards; }
.btn-primary-lp, .btn-secondary-lp { min-height: 48px; padding: .8rem 2rem; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font: 600 .95rem Outfit, sans-serif; transition: transform .2s, box-shadow .2s, background .2s; }
.btn-primary-lp { color: #fff; background: var(--helix-blue); }
.btn-primary-lp:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 8px 30px rgba(43, 107, 242, .4); }
.btn-secondary-lp { border: 1.5px solid var(--helix-cyan); color: var(--helix-cyan); }
.btn-secondary-lp:hover { color: var(--helix-cyan); transform: translateY(-3px); background: rgba(0, 212, 255, .08); }

.problem-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; align-items: end; }
.problem-intro > * { min-width: 0; }
.problem-intro .section-body { padding-bottom: .35rem; }
.problem-heading { font-size: clamp(1.9rem, 3.7vw, 2.75rem); }
.problem-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.75rem; }
.problem-card, .idea-card {
  min-width: 0; padding: 2rem; border: 1px solid rgba(43, 107, 242, .1); border-radius: 18px;
  background: rgba(17, 29, 53, .92); transition: transform .3s, border-color .3s;
}
.problem-card:hover, .idea-card:hover { transform: translateY(-4px); border-color: rgba(0, 212, 255, .22); }
.card-icon { width: 44px; height: 44px; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center; border-radius: 11px; }
.card-icon svg { width: 21px; height: 21px; }
.problem-card h3, .idea-card h3 { margin: 0 0 .7rem; font: 700 1.05em/1.5 Outfit, "Noto Sans JP", sans-serif; }
.problem-card p, .idea-card p { margin: 0; color: var(--mid-gray); font-size: .86em; line-height: 1.8; }
.problem-card strong { color: var(--soft-white); }
.problem-card { display: flex; flex-direction: column; }
.problem-card > p { flex: 1; }
.problem-card .card-icon { flex-shrink: 0; }
.problem-response { margin-top: 1.35rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.problem-response small { display: block; margin-bottom: .45rem; color: var(--wall-accent); font: 600 .62rem Outfit, "Noto Sans JP", sans-serif; letter-spacing: .06em; }
.problem-response p { color: #b8c8dd; font-size: .76em; line-height: 1.8; }
.problem-next { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }
.problem-next p { margin: 0; color: var(--soft-white); font-size: .88em; line-height: 1.8; text-wrap: pretty; }
.problem-next a { color: var(--helix-cyan); font-size: .78em; line-height: 1.8; text-underline-offset: .25em; }
.problem-next a:hover { text-decoration: underline; }

.partner-panel { padding: 3rem; border: 1px solid rgba(0, 212, 255, .18); border-radius: 24px; background: linear-gradient(135deg, rgba(43, 107, 242, .14), rgba(0, 212, 255, .04)); }
.partner-panel .section-heading { margin-bottom: 1rem; }
.lesson-creed { margin-top: 2.25rem; padding: 1.6rem 1.75rem; border: 1px solid rgba(255, 179, 71, .3); border-left-width: 3px; border-radius: 16px; background: rgba(7, 17, 34, .52); box-shadow: 0 0 34px rgba(255, 179, 71, .06); }
.lesson-creed p { margin: 0; color: #b9c8dc; font-size: .86em; line-height: 1.9; }
.lesson-creed p + p { margin-top: .2rem; }
.lesson-creed strong { color: var(--soft-white); font-weight: 700; }
.lesson-creed .lesson-creed-lead { margin: 0 0 .9rem; color: var(--soft-white); font: 700 clamp(1.15rem, 2.6vw, 1.5rem)/1.6 Outfit, "Noto Sans JP", sans-serif; }
.lesson-flow-link { margin: 1rem 0 0; color: var(--mid-gray); font-size: .78em; line-height: 1.8; }
.lesson-flow-link a:hover { text-decoration: underline; }

.perspective-wrap { width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: .5rem 0 6.5rem; display: flex; align-items: center; justify-content: center; gap: 4.5rem; }
.perspective-canvas-wrap { width: 300px; height: 400px; flex: 0 0 auto; }
.perspective-canvas-wrap canvas { width: 100%; height: 100%; display: block; }
.perspective-text { min-width: 0; max-width: 520px; }
.perspective-text h3 { margin: 0 0 1rem; font: 700 clamp(1.5rem, 3vw, 2rem)/1.45 Outfit, "Noto Sans JP", sans-serif; }
.perspective-text p { margin: 0 0 .85rem; color: var(--mid-gray); font-size: .92em; line-height: 1.85; }
.perspective-hook { margin: 0 0 1.25rem; color: var(--soft-white); font: 700 clamp(1.4rem, 3vw, 1.9rem)/1.55 Outfit, "Noto Sans JP", sans-serif; }
.philosophy-title { margin: 0 0 1rem; color: #b8c6d9; font: 600 clamp(.95rem, 2vw, 1.1rem)/1.6 Outfit, "Noto Sans JP", sans-serif; letter-spacing: .03em; }
.name-origin { margin-top: 1.2rem !important; padding-top: 1rem; border-top: 1px solid rgba(0, 212, 255, .12); color: #b9c8dc !important; }
.name-origin strong { color: var(--helix-cyan); font-family: Outfit, sans-serif; }
.perspective-motion { margin-top: 1.6rem; display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; color: #7085a3; font: 600 .62rem Outfit, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.perspective-motion i { position: relative; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, .08); }
.perspective-motion i::after { content: ""; position: absolute; inset: 0; transform: scaleX(.04); transform-origin: left; background: linear-gradient(90deg, var(--helix-blue), var(--helix-cyan), var(--helix-teal)); animation: motionProgress 7s linear infinite; animation-play-state: paused; }
.perspective-wrap.is-animating .perspective-motion i::after { animation-play-state: running; }
@keyframes motionProgress {
  0%, 10% { transform: scaleX(.04); opacity: 1; }
  50%, 85.7% { transform: scaleX(1); opacity: 1; }
  92.8% { transform: scaleX(1); opacity: 0; }
  92.9% { transform: scaleX(.04); opacity: 0; }
  100% { transform: scaleX(.04); opacity: 1; }
}

.belief-intro { max-width: 830px; margin-bottom: 2.8rem; }
.beliefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.idea-card { padding: 2.25rem; }
.idea-kicker { margin-bottom: .65rem; color: var(--idea); font: 600 .7rem Outfit, sans-serif; letter-spacing: .18em; }
.idea-card h3 { font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.4; }
/* 流し読み向けの「音シフトとは」定義（HEAR THE SHIFT カード冒頭） */
.idea-card .shift-definition { margin: 0 0 .9rem; padding: .8rem 1rem; border-left: 2px solid var(--helix-cyan); border-radius: 0 10px 10px 0; color: #c7d3e4; background: rgba(0, 212, 255, .05); }
.shift-definition strong { color: var(--soft-white); }
.idea-visual { min-height: 180px; margin: 1.7rem 0 1.4rem; padding: 1.35rem; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .06); border-radius: 15px; background: rgba(7, 17, 34, .52); }
.ssd-visual { padding: 1rem; place-items: stretch; }
.ssd-preview { width: 100%; padding: 1rem; border: 1px solid rgba(0, 212, 255, .14); border-radius: 12px; background: linear-gradient(155deg, rgba(17, 29, 53, .96), rgba(7, 17, 34, .96)); }
.ssd-preview-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: #7186a4; font: 700 .52rem Outfit, sans-serif; letter-spacing: .1em; }
.ssd-preview-head span { padding: .2rem .38rem; border-radius: 5px; color: var(--helix-cyan); background: rgba(0, 212, 255, .08); }
.ssd-preview-control { margin-top: .75rem; display: flex; align-items: center; justify-content: flex-end; gap: .4rem; color: #7186a4; font-size: .54rem; }
.ssd-preview-control .active { color: #bfcce0; }
.ssd-toggle { width: 28px; height: 15px; padding: 2px; display: flex; align-items: center; border-radius: 999px; background: #263a58; }
.ssd-toggle b { width: 11px; height: 11px; border-radius: 50%; background: #dce6f3; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.ssd-preview-sentence { margin: .75rem 0; color: var(--soft-white); font: 700 clamp(.92rem, 2.2vw, 1.08rem)/1.5 Outfit, sans-serif; text-align: center; }
.ssd-reduction { color: var(--amber); }
.ssd-fusion { color: var(--violet); }
.ssd-layer { padding: .55rem .65rem; display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: .55rem; align-items: center; border-top: 1px solid rgba(255, 255, 255, .055); }
.ssd-layer span { color: #7186a4; font-size: .54rem; }
.ssd-layer strong { min-width: 0; color: #b9c8dc; font: 500 .68rem/1.5 Outfit, sans-serif; overflow-wrap: anywhere; }
.ssd-layer-native strong { color: var(--soft-white); }
.ssd-est { margin-left: .35rem; padding: .12rem .3rem; border-radius: 4px; color: var(--helix-cyan); background: rgba(0, 212, 255, .08); font: 600 .48rem Outfit, sans-serif; font-style: normal; letter-spacing: .04em; white-space: nowrap; vertical-align: middle; }
.ssd-shifts { margin-top: .55rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.ssd-shifts span { padding: .28rem .45rem; border-radius: 999px; font-size: .52rem; }
.ssd-shifts span:first-child { color: var(--amber); background: rgba(255, 179, 71, .09); }
.ssd-shifts span:last-child { color: #c9adf9; background: rgba(167, 139, 250, .1); }
.ssd-change { margin-top: .55rem; padding: .55rem .65rem; border-radius: 8px; background: rgba(255, 255, 255, .025); }
.ssd-change span { display: block; margin-bottom: .18rem; color: #7186a4; font-size: .5rem; }
.ssd-change strong { color: #c7d3e4; font: 500 .62rem Outfit, sans-serif; }
/* 監修者の管理者プレビュー（partials/_supervisor_admin.html・見た目は public_pages.css）。SSD プレビューの下に置く */
.idea-card .hx-sup-card { margin-top: 1.5rem; }
.expression-orbit { width: 100%; min-height: 135px; position: relative; }
.expression-core { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 98px; height: 98px; display: grid; place-items: center; border-radius: 50%; color: #0b1528; background: linear-gradient(145deg, #d6c1ff, var(--violet)); font: 800 .72rem/1.2 Outfit, sans-serif; text-align: center; box-shadow: 0 0 32px rgba(167, 139, 250, .25); }
.expression-chip { position: absolute; padding: .35rem .55rem; border: 1px solid var(--line); border-radius: 999px; color: #aab8cc; background: rgba(255, 255, 255, .035); font-size: .62rem; white-space: nowrap; }
.expression-chip:nth-child(2) { top: 0; left: 0; }
.expression-chip:nth-child(3) { top: 2px; right: 0; }
.expression-chip:nth-child(4) { bottom: 0; left: 1%; }
.expression-chip:nth-child(5) { right: 0; bottom: 0; }

.thesis { padding: 6.5rem 0; text-align: center; }
.thesis blockquote { max-width: 1030px; margin: 0 auto; padding: 0 20px; font: 700 clamp(1.8rem, 4.5vw, 3.2rem)/1.55 Outfit, "Noto Sans JP", sans-serif; letter-spacing: -.03em; }
.thesis p { max-width: 780px; margin: 1.7rem auto 0; padding: 0 20px; color: var(--mid-gray); font-size: .92em; line-height: 1.9; }

.loop-link { margin: 1.2rem 0 0; font-size: .82em; line-height: 1.8; }
.loop-link a:hover { text-decoration: underline; }

.bridge-card { padding: 3rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; border: 1px solid rgba(0, 212, 255, .18); border-radius: 24px; background: linear-gradient(135deg, rgba(43, 107, 242, .15), rgba(0, 212, 255, .05), rgba(167, 139, 250, .08)); }
.bridge-card > * { min-width: 0; }
.bridge-card h2 { margin: 0 0 .9rem; font: 700 clamp(1.65rem, 3.7vw, 2.6rem)/1.4 Outfit, "Noto Sans JP", sans-serif; }
.bridge-card p { max-width: 780px; margin: 0; color: var(--mid-gray); font-size: .88em; line-height: 1.8; }
.role-dots { display: grid; grid-template-columns: repeat(4, 34px); gap: 8px; }
.role-dots span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #071426; background: var(--dot); font: 800 .58rem Outfit, sans-serif; }

.story-quote { max-width: 820px; margin: 0 auto; padding: 1.5rem 0; color: var(--soft-white); font: 600 clamp(1.15rem, 2.6vw, 1.55rem)/2 Outfit, "Noto Sans JP", sans-serif; text-align: center; }
.story-quote p { margin: 0 0 1.4rem; text-wrap: pretty; word-break: auto-phrase; }
.story-quote p:last-child { margin-bottom: 0; }
.story-quote .pop { color: var(--helix-cyan); }
.story-author { margin-top: 1rem; color: var(--mid-gray); font-size: .85em; text-align: center; }
.final-cta { padding: 7rem 20px; text-align: center; }
.final-cta h2 { max-width: 1020px; margin: 0 auto 1.2rem; font: 700 clamp(1.75rem, 4.4vw, 3rem)/1.5 Outfit, "Noto Sans JP", sans-serif; }
.final-cta p { margin: 0 0 2rem; color: var(--mid-gray); font-size: .95em; }

@media (max-width: 780px) {
  .section { width: min(100% - 28px, 1160px); padding: 4.8rem 0; }
  .divider { width: calc(100% - 28px); }
  .about-hero { min-height: auto; padding: 3.6rem 1rem 4.5rem; }
  .hero-logo-canvas { width: 120px; height: 162px; }
  .hero-empathy { margin-top: 2.5rem; font-size: .92em; }
  .about-hero h1 { font-size: clamp(2rem, 10vw, 3rem); }
  .problem-intro, .problem-cards, .beliefs, .bridge-card { grid-template-columns: 1fr; }
  .problem-intro { gap: .6rem; }
  .problem-card, .idea-card { padding: 1.5rem; }
  .partner-panel { padding: 2rem 1.5rem; }
  .partner-panel > .section-heading { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .lesson-creed { padding: 1.3rem 1.2rem; }
  .perspective-wrap { width: calc(100% - 28px); padding-bottom: 4.8rem; flex-direction: column; gap: 2.2rem; }
  .perspective-canvas-wrap { width: min(240px, 82vw); height: 320px; }
  .perspective-text { width: 100%; }
  .bridge-card { padding: 2rem 1.5rem; }
  .role-dots { order: -1; }
  .expression-orbit { min-height: 160px; }
}
@media (max-width: 420px) {
  .hero-wordmark { font-size: 3.1rem; }
  .hero-tagline { font-size: .7rem; letter-spacing: .09em; }
  .about-hero h1 { font-size: clamp(1.35rem, 6.6vw, 1.75rem); line-height: 1.48; }
  .hero-answer { font-size: .9em; }
  .hero-cta-wrap { width: 100%; }
  .hero-cta-wrap a { width: 100%; }
  .section-heading { font-size: 1.75rem; }
  .idea-card h3 { font-size: 1.45rem; }
  .thesis blockquote { font-size: 1.4rem; line-height: 1.65; }
  .final-cta h2 { font-size: 1.5rem; }
  .perspective-motion { font-size: .57rem; letter-spacing: .05em; }
  .expression-chip { font-size: .55rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .perspective-motion i::after { transform: scaleX(1); }
}
@media print { .ambient, .skip-link { display: none; } }