/* The circular launcher fills the home route; tool pages keep their sidebar. */
body.home-page { background: #faf9f6; }
.home-page .sidebar, .home-page .topbar { display: none; }
.home-page .stage { overflow: hidden; }
.home-page .view.home { max-width: none; margin: 0; padding: 0; height: 100%; min-height: 0; overflow: hidden; }
.home-page .main { width: 100%; }
.orbit-page { width: 100%; height: 100%; display: flex; flex-direction: column; padding: 0 var(--home-gutter, 18px); overflow: hidden; transform-origin: top left; color: #282725; background: radial-gradient(ellipse at 50% 55%, #f1dfd04d, transparent 60%), #faf9f6; }
.home-toolbar { position: relative; z-index: 30; display: flex; align-items: stretch; gap: 10px; width: min(560px, calc(100% - 44px)); height: 40px; flex-shrink: 0; margin: 16px auto 0; }
.home-tool-search { position: relative; flex: 1; min-width: 0; }
.home-search-form { display: flex; align-items: center; height: 100%; gap: 8px; padding: 0 12px 0 8px; border: 1px solid rgb(133 47 49 / 24%); border-radius: 22px; background: rgb(255 252 248 / 65%); backdrop-filter: blur(12px); }
.home-search-form:focus-within { border-color: rgb(133 47 49 / 35%); box-shadow: 0 0 0 2px rgb(185 121 105 / 6%); }
.home-search-form button { display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 30px; padding: 4px; background: transparent; color: #852f31; cursor: pointer; }
.home-search-form svg { width: 18px; height: 18px; }
.home-search-form input { flex: 1; min-width: 0; width: 100%; padding: 0; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: #302722; }
.home-search-form input::placeholder { color: #59463c; opacity: 1; }
.home-search-form kbd { flex-shrink: 0; color: #665247; font-size: 11px; font-weight: 600; }
.home-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: calc(var(--home-page-height, 100dvh) - 88px); overflow: auto; padding: 12px; border: 1px solid #e3ded6; border-radius: 14px; background: #fffefd; box-shadow: 0 12px 30px -18px #6b463a44; }
.home-search-results[hidden] { display: none; }
.home-search-count { display: block; font-size: 11px; color: #8b847c; margin-bottom: 6px; }
.home-search-results a { display: flex; align-items: center; gap: 8px; padding: 9px 5px; border-radius: 7px; font-size: 12px; color: #554438; overflow-wrap: anywhere; }
.home-search-results a:hover, .home-search-results a:focus-visible { background: #f8f2ec; color: #b91c35; outline-offset: -2px; }
.home-search-results a svg { width: 17px; height: 17px; flex-shrink: 0; }
.home-search-results a img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.home-search-label { flex: 1; min-width: 0; }
.home-search-section + .home-search-section { margin-top: 8px; padding-top: 10px; border-top: 1px solid #eee6de; }
.home-search-group { margin: 0 0 4px; padding: 3px 5px; font-size: 13px; font-weight: 700; line-height: 1.5; color: #852f31; }
@media (max-width: 520px) { .home-search-form kbd { display: none; } }
.orbit-main { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; padding: 12px 0 22px; }
.orbit-visual { position: relative; width: min(100%, 850px); height: 100%; min-width: 0; min-height: 0; overflow: clip; }
.orbit-scene { --orbit-radius: 248px; --orbit-period: 90s; position: absolute; left: 50%; top: 50%; width: 100%; height: 598px; transform: translate(-50%, -50%) scale(var(--scene-fit, 1)); isolation: isolate; }
.orbit-halo { display: none; position: absolute; top: 50%; left: 50%; width: 460px; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--center-halo-gradient, radial-gradient(circle closest-side, rgb(255 255 255 / 99%) 0%, rgb(255 254 247 / 98%) 22%, rgb(255 249 229 / 94%) 38%, rgb(255 243 210 / 74%) 52%, rgb(255 233 174 / 40%) 68%, rgb(255 241 217 / 0%) 100%)); pointer-events: none; }
.orbit-track { position: absolute; top: 50%; left: 50%; width: calc(var(--orbit-radius) * 2); height: calc(var(--orbit-radius) * 2); border: 1px solid #d9c9b899; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.orbit-track::before, .orbit-track::after { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #c2ab92; top: 50%; left: -3px; }
.orbit-track::after { left: auto; right: -3px; }
.orbit-track-inner { width: 310px; height: 310px; border: 1px dashed #d9c9b85c; }
.orbit-track-inner::before, .orbit-track-inner::after { display: none; }
.orbit-center { position: absolute; top: 50%; left: 50%; width: 270px; height: 270px; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; background: linear-gradient(145deg, #fffefd, #f8efe7); border: 1px solid #e4d4c1; box-shadow: 0 20px 48px -30px #7e3b2366, 0 0 0 10px #fffaf76b, inset 0 1px 0 white; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.orbit-center-art { width: 180px; height: 190px; flex-shrink: 0; pointer-events: none; }
.orbit-center-image { position: relative; top: 5px; width: 100%; aspect-ratio: 857 / 715; }
.orbit-center-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Mirror the same transparent artwork; fade the reflection before the title. */
.orbit-center-reflection { position: absolute; top: calc(100% + 1px); left: 0; width: 100%; height: 100%; opacity: .23; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 48%) 9%, transparent 23%); mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 48%) 9%, transparent 23%); pointer-events: none; }
.orbit-center-reflection img { transform: scaleY(-1); }
.orbit-center h1 { max-width: 100%; font-size: 32px; font-weight: 800; letter-spacing: .06em; color: #852f31; margin: 0; white-space: nowrap; transform: translateY(-15px); }
.orbit-center > .orbit-center-art, .orbit-center > h1 { position: relative; top: -3px; }
.orbit-center > h1 { z-index: 1; }
.orbit-center-toggle { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; background: transparent; border: 0; border-radius: inherit; cursor: pointer; z-index: 2; }
.orbit-center-toggle:focus-visible { outline: 2px solid #b96b59; outline-offset: -5px; }
.orbit-arm { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: picc-orbit var(--orbit-period) linear infinite; }
.orbit-offset { transform: translateX(var(--orbit-radius)); }
.orbit-counter { animation: picc-counter-orbit var(--orbit-period) linear infinite; width: 0; height: 0; }
.orbit-tool { --tool-color: #bc2940; --tool-bg: #fbebe9; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 13px; position: absolute; left: 0; top: 0; width: 166px; height: 166px; border-radius: 16px; background: transparent; border: 0; transform: translate(-50%, -50%); box-shadow: none; }
.orbit-tool.tone-amber { --tool-color: #a57a40; --tool-bg: #f8f0e3; }
.orbit-tool.tone-blue { --tool-color: #5b7f9c; --tool-bg: #eaf2f8; }
.orbit-tool.tone-violet { --tool-color: #8c739e; --tool-bg: #f1ecf5; }
.orbit-tool-icon { width: 54px; height: 54px; background: var(--tool-bg); color: var(--tool-color); border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.orbit-tool-icon svg { width: 29px; height: 29px; }
.orbit-tool strong { display: block; font-size: 16px; font-weight: 700; color: #453f39; white-space: nowrap; }
.orbit-tool:hover .orbit-tool-icon, .orbit-tool:focus-visible .orbit-tool-icon { box-shadow: 0 0 0 5px var(--tool-bg); transform: translateY(-3px); }
.orbit-tool-icon { transition: transform .2s, box-shadow .2s; }
.orbit-scene:has(.orbit-tool:hover) .orbit-arm, .orbit-scene:has(.orbit-tool:hover) .orbit-counter,
.orbit-scene:has(.orbit-tool:focus-visible) .orbit-arm, .orbit-scene:has(.orbit-tool:focus-visible) .orbit-counter,
.orbit-scene.is-paused .orbit-arm, .orbit-scene.is-paused .orbit-counter,
.orbit-scene.is-searching .orbit-arm, .orbit-scene.is-searching .orbit-counter { animation-play-state: paused; }
.orbit-arm.is-dimmed .orbit-tool { opacity: .25; }
.home-return { display: flex; align-items: center; gap: 9px; color: #817481; padding: 9px 14px; border-radius: 10px; font-size: 13px; }
.home-return svg { width: 18px; height: 18px; }
.home-return:hover { background: #f8eff0; color: #b91c35; }
@keyframes picc-orbit { from { transform: rotate(var(--angle)); } to { transform: rotate(calc(var(--angle) + 360deg)); } }
@keyframes picc-counter-orbit { from { transform: rotate(calc(0deg - var(--angle))); } to { transform: rotate(calc(-360deg - var(--angle))); } }
/* Shared icon and label sizes come from the available space and tool count. */
.orbit-tool { width: var(--tool-width, 166px); height: var(--tool-height, 166px); gap: var(--tool-gap, 13px); pointer-events: none; }
.orbit-tool-icon, .orbit-tool strong { pointer-events: auto; }
.orbit-tool-icon { width: var(--tool-icon-size, 54px); height: var(--tool-icon-size, 54px); flex-shrink: 0; }
.orbit-tool-icon.orbit-tool-image, .orbit-tool-icon.orbit-tool-art { background: transparent; overflow: visible; }
/* Match visible artwork area, while keeping every painted pixel inside its circle. */
[data-orbit-id="image-compress"] { --tool-image-fit: 82.9%; }
[data-orbit-id="collaboration-ppt"] { --tool-image-fit: 82.3%; }
[data-orbit-id="performance-table"] { --tool-image-fit: 80.9%; }
[data-orbit-id="shuanglu"] { --tool-image-fit: 74%; }
.orbit-tool-icon img { display: block; width: var(--tool-image-fit, 70%); height: var(--tool-image-fit, 70%); object-fit: contain; border-radius: 0; filter: drop-shadow(0 6px 5px rgb(57 42 29 / 23%)); }
.orbit-tool:is(:hover, :focus-visible) .orbit-tool-icon:is(.orbit-tool-image, .orbit-tool-art) { box-shadow: none; }
.orbit-tool-icon svg { width: var(--tool-svg-fit, 54%); height: var(--tool-svg-fit, 54%); }
.orbit-tool strong { position: relative; font-size: var(--tool-font-size, 16px); line-height: 1.5; }
.orbit-tool-name-full { position: absolute; left: 50%; top: 0; width: max-content; max-width: var(--label-max-width, 800px); transform: translateX(calc(-50% + var(--name-shift, 0px))); white-space: normal; overflow-wrap: anywhere; text-align: center; display: none; pointer-events: none; }
.orbit-tool:hover .orbit-tool-name-short, .orbit-tool:focus-visible .orbit-tool-name-short { visibility: hidden; }
.orbit-tool:hover .orbit-tool-name-full, .orbit-tool:focus-visible .orbit-tool-name-full { display: block; }
.orbit-arm:hover, .orbit-arm:focus-within { z-index: 1; }