/* Wave edges unify the homepage photographs without cropping their subject. */
.wave-photo { position: relative; overflow: hidden; --wave-fill: #08090c; isolation: isolate; }
.wave-photo>img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: contain; border: 0; border-radius: 0; }
.photo-wave { position: absolute; bottom: -1px; left: 0; width: 100%; height: 43px; fill: var(--wave-fill); pointer-events: none; z-index: 2; }
.photo-wave .wave-soft { opacity: .3; }
.host-hero { padding-bottom: 42px; }
.host-hero-art { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.host-hero-art .wave-photo { border-radius: 32% 12% 0 0 / 11% 7% 0 0; }
.host-hero-art .photo-wave { height: 55px; }
.host-hero-art figcaption { border: 0; padding: 8px 18px; justify-content: center; color: #9ec3af; font-size: 14px; }
.host-world::before { display: none; }.host-world .wave-photo { border-radius: 12% 25% 0 0 / 8% 10% 0 0; }
.host-world .host-image-label { border: 0; background: none; justify-content: center; margin-top: 0; }
.host-service { display: flex; padding: 0 26px 24px; background: #111216; border-color: #2b3b32; isolation: isolate; }
.host-service::after { display: none; }
.host-service .service-photo { position: relative; margin: 0 -26px 16px; --wave-fill: #111216; z-index: 0; }
.host-service .service-photo img { position: static; height: auto; opacity: 1; z-index: auto; object-fit: contain; }
.host-service .photo-wave { height: 40px; }
.host-service-icon { position: absolute; top: 20px; left: 22px; background: #0c1914e8; z-index: 3; }
.host-service-type { position: absolute; top: 27px; right: 22px; padding: 5px 10px; border: 1px solid #84d0a92b; border-radius: 20px; background: #0c1914db; color: #e5f5ec; z-index: 3; }
.host-service h3 { margin: 4px 0 12px; font-size: 28px; }.host-service p { margin-bottom: 20px; }.host-service-link { min-height: 45px; align-items: center; }
/* A short, controllable animated guide. */
.panel-tour { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 55px; padding: 70px 0; }
.tour-intro h2 { font-size: 47px; line-height: 1.1; margin: 17px 0 24px; }.tour-intro>p { font-size: 17px; line-height: 1.8; max-width: 420px; }
.tour-step-list { display: grid; gap: 8px; margin-top: 25px; }.tour-step-list button { display: flex; align-items: center; gap: 15px; padding: 17px; background: transparent; border: 1px solid transparent; border-radius: 14px; text-align: left; color: #a5b3ae; }
.tour-step-list button>span { font-size: 14px; color: #769887; border: 1px solid #34463b; border-radius: 10px; width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0; }
.tour-step-list strong { font-size: 19px; font-weight: 600; }.tour-step-list small { display: none; color: #adc1b5; font-size: 14px; line-height: 1.8; margin-top: 7px; }
.tour-step-list svg { width: 21px; height: 21px; margin-left: auto; flex-shrink: 0; opacity: .6; }
.tour-step-list button[aria-pressed=true] { background: #15241c; border-color: #84d0a953; color: #d7f3e3; }.tour-step-list button[aria-pressed=true]>span { background: #84d0a91c; color: #b1e4c9; border-color: #84d0a966; }.tour-step-list button[aria-pressed=true] small { display: block; }
.tour-player { overflow: hidden; min-width: 0; background: linear-gradient(145deg,#18251e,#0f151a); border: 1px solid #476251; border-radius: 20px; box-shadow: 0 20px 60px #0004; }
.tour-player-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 21px 25px; border-bottom: 1px solid #ffffff10; }
.tour-player-top>span { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 600; }.tour-player-top svg { width: 21px; height: 21px; color: #84d0a9; }.tour-player-top small { font-size: 12px; font-weight: 400; color: #8aa897; }.tour-player-top>b { font-size: 8px; letter-spacing: 1.2px; color: #91aa9e; font-weight: 500; }
.tour-screen { min-height: 355px; padding: 28px 32px; }
.tour-package>span:first-child { font-size: 11px; letter-spacing: 2px; color: #a6d5bc; }.tour-package>strong { display: block; font-size: 40px; line-height: 1.14; margin: 20px 0; font-weight: 600; }
.tour-package>div { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 27px; }.tour-package b { font-size: 24px; color: #a7debe; }.tour-package small { display: block; font-size: 12px; color: #8fa99b; font-weight: 400; margin-top: 6px; }
.tour-demo-button { display: flex; align-items: center; justify-content: space-between; width: 100%; background: #a5dfbe; border-radius: 10px; padding: 14px 17px; font-size: 16px; font-weight: 600; color: #10251d; }.tour-demo-button b { color: #10251d; font-size: 18px; }
.tour-form>span:not(.tour-demo-button) { display: block; font-size: 10px; letter-spacing: 1.4px; color: #97b5a4; margin: 5px 0 9px; }.tour-form>div { display: flex; align-items: center; justify-content: space-between; border: 1px solid #324d3d; border-radius: 9px; padding: 13px 16px; margin-bottom: 19px; font-size: 17px; background: #0d1512; }.tour-form small { font-size: 12px; color: #809b8c; }.tour-form p { font-size: 13px; margin: 21px 0; color: #a9ccba; }
.tour-caret { width: 1px; height: 18px; background: #b2e7c8; margin-left: auto; }.is-playing .tour-caret { animation: tour-blink 1s steps(2,end) infinite; }
.tour-console>div:first-child { display: flex; gap: 7px; align-items: center; font-size: 11px; letter-spacing: 1px; margin-bottom: 28px; color: #afd2be; }.tour-console small { margin-left: auto; color: #7e998b; font-size: 10px; }.tour-dot { width: 6px; height: 6px; background: #84d0a9; border-radius: 50%; }.tour-console p { font: 12px/1.8 ui-monospace,monospace; padding: 13px 0; color: #bccec4; }.tour-console p span { color: #57725f; margin-right: 10px; }
.tour-demo-command { display: flex; gap: 12px; padding: 13px 15px; margin-top: 18px; border: 1px solid #304d3c; background: #0a110e; border-radius: 9px; font-size: 13px; color: #9abeaa; }.tour-demo-command span { margin-right: auto; color: #668673; }
.tour-connect { text-align: center; }.tour-connect-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 19px; font-size: 33px; background: #84d0a91b; color: #a7dfbf; border: 1px solid #84d0a943; border-radius: 18px; }.tour-connect h3 { font-size: 28px; }.tour-connect p { font-size: 15px; margin: 10px 0 23px; }.tour-connect>div { padding: 13px 17px; border: 1px dashed #84d0a950; border-radius: 9px; color: #c4e5d2; font-size: 16px; }.tour-connect>div span { margin-left: 20px; }.tour-connect small { display: block; color: #8eac9b; font-size: 12px; line-height: 1.8; margin-top: 20px; }
.tour-progress { height: 2px; background: #ffffff0a; }.tour-progress span { display: block; height: 100%; background: #84d0a9; transform: scaleX(0); transform-origin: left; }
.tour-controls { display: flex; align-items: center; gap: 10px; padding: 17px 23px 5px; }.tour-controls button { min-width: 40px; min-height: 40px; border: 1px solid #3b5446; border-radius: 10px; background: #17281e; color: #bedbca; font-size: 16px; }.tour-controls>span { font-size: 12px; color: #8aab97; }.tour-controls [data-tour-action=play] { margin-left: auto; padding: 9px 14px; font-size: 13px; }.tour-footnote { font-size: 10px; padding: 7px 23px 17px; color: #769282; }
@keyframes tour-blink { to { opacity: 0; } }
/* Management focuses on find, open and act. */
.admin-finder { padding: 25px; border: 1px solid #84d0a93e; background: linear-gradient(130deg,#192b20,#13181b); border-radius: 17px; margin-bottom: 22px; }.admin-finder h2 { font-size: 29px; margin: 9px 0 18px; }.admin-find-label { display: block; font-size: 12px; color: #a2b3a8; }.admin-find-label input { display: block; margin-top: 8px; }
.admin-quick-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin-top: 17px; }.admin-quick-links button { display: flex; align-items: center; gap: 9px; text-align: left; border: 1px solid #3b4b41; border-radius: 10px; background: #1b2820; color: #cfdfd5; font-size: 14px; padding: 13px; }.admin-quick-links svg { width: 18px; height: 18px; color: #9ed6b6; flex-shrink: 0; }.admin-quick-links b { margin-left: auto; font-weight: 500; color: #9ed6b6; }
#adminQuickResults:empty { display: none; }#adminQuickResults { display: grid; gap: 7px; margin-top: 12px; }#adminQuickResults>a,#adminQuickResults>button { display: flex; align-items: center; gap: 13px; padding: 13px; background: #0f1913; color: #e1ece6; border: 1px solid #304a39; border-radius: 10px; text-align: left; width: 100%; }#adminQuickResults svg { width: 23px; height: 23px; flex-shrink: 0; color: #9ed6b6; }#adminQuickResults span { min-width: 0; }#adminQuickResults strong { display: block; font-size: 15px; overflow-wrap: anywhere; }#adminQuickResults small { display: block; font-size: 11px; color: #8faa99; margin-top: 4px; }#adminQuickResults b { margin-left: auto; font-size: 11px; font-weight: 400; white-space: nowrap; color: #9ed6b6; }#adminQuickResults>p { padding: 12px; font-size: 13px; }
.admin-mobile-menu { display: none; }.admin-action-panel button { min-height: 46px; }.admin-section-header p { max-width: 640px; }
.server-shortcuts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 22px 0; }.server-shortcuts button { display: flex; align-items: center; gap: 11px; text-align: left; background: #15231b; border: 1px solid #354d3f; border-radius: 13px; color: #a7d8bc; padding: 18px; }.server-shortcuts svg { width: 23px; height: 23px; flex-shrink: 0; }.server-shortcuts span { flex: 1; min-width: 0; }.server-shortcuts strong { display: block; color: #d9e9df; font-size: 16px; }.server-shortcuts small { display: block; font-size: 12px; color: #8fae9b; margin-top: 5px; }
.admin-quick-links button:hover,.server-shortcuts button:hover,#adminQuickResults>a:hover,#adminQuickResults>button:hover { border-color: #84d0a97a; background: #203429; }
@media(max-width:1000px) { .panel-tour { gap: 30px; }.tour-intro h2 { font-size: 40px; }.tour-screen { padding: 25px; }.tour-player-top { padding: 18px; }.tour-player-top small { display: none; }.admin-quick-links button { font-size: 12px; padding: 12px; }.server-shortcuts button { padding: 15px; gap: 9px; } }
@media(max-width:800px) { .panel-tour { grid-template-columns: 1fr; padding: 40px 0; gap: 25px; }.tour-intro>p { max-width: none; }.tour-intro h2 { font-size: 40px; }.tour-step-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.tour-step-list button { align-items: flex-start; padding: 13px; }.tour-step-list button svg { display: none; }.tour-step-list button>span { width: 28px; height: 28px; font-size: 12px; }.tour-step-list strong { font-size: 16px; }.tour-step-list small { font-size: 12px; }.tour-player { max-width: 650px; width: 100%; margin: auto; }.tour-screen { min-height: 350px; }.tour-player-top small { display: inline; }.admin-mobile-menu { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 22px; font-size: 12px; color: var(--muted); }.admin-mobile-menu select { min-width: 0; flex: 1; }.admin-v3>.admin-tabs { display: none; } }
@media(max-width:540px) { .host-service,.host-service:nth-child(-n+2),.host-service:last-child { padding: 0 23px 22px; }.host-service .service-photo { margin: 0 -23px 13px; }.host-service h3 { font-size: 27px; }.host-hero-art .photo-wave { height: 35px; }.host-hero-art figcaption { font-size: 12px; }.photo-wave { height: 32px; }.tour-intro h2 { font-size: 35px; }.tour-intro>p { font-size: 15px; }.tour-step-list { grid-template-columns: 1fr; }.tour-step-list button { align-items: center; }.tour-step-list strong { font-size: 17px; }.tour-step-list small { font-size: 13px; }.tour-screen { padding: 24px 20px; min-height: 350px; }.tour-package>strong { font-size: 34px; }.tour-package b { font-size: 22px; }.tour-player-top { padding: 17px; }.tour-player-top>span { font-size: 15px; }.tour-player-top small { display: none; }.tour-player-top>b { font-size: 7px; }.tour-console p { font-size: 10px; }.tour-console p span { margin-right: 5px; }.tour-form>div { font-size: 15px; }.tour-form small { font-size: 10px; }.tour-controls { padding: 15px 17px 5px; }.tour-controls [data-tour-action=play] { font-size: 12px; }.admin-finder { padding: 20px; }.admin-finder h2 { font-size: 26px; }.admin-quick-links { grid-template-columns: 1fr; gap: 8px; }.admin-quick-links button { font-size: 14px; min-height: 46px; }#adminQuickResults b { font-size: 10px; }#adminQuickResults strong { font-size: 13px; }.server-shortcuts { grid-template-columns: 1fr; gap: 9px; }.server-shortcuts button { padding: 15px; }.server-shortcuts small { font-size: 12px; }.admin-mobile-menu { padding: 13px; gap: 10px; } }
@media(prefers-reduced-motion:reduce) { .tour-caret { animation: none!important; } }
.is-playing .tour-console p { animation: tour-line .45s ease both; }.is-playing .tour-console p:nth-of-type(2) { animation-delay: .3s; }.is-playing .tour-console p:nth-of-type(3) { animation-delay: .6s; }
@keyframes tour-line { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media(prefers-reduced-motion:reduce) { .is-playing .tour-console p { animation: none; } }