.guide-welcome[hidden] { display: none; } html.guide-welcome-open { overflow: hidden; } html.guide-welcome-open .site-guide-shell, html.guide-welcome-open .site-guide-restore { visibility: hidden; } .guide-welcome { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 16px; overflow-y: auto; background: rgba(3, 5, 8, .78); backdrop-filter: blur(6px); } .guide-welcome-card { position: relative; isolation: isolate; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: clamp(23px, 4vw, 38px); border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--panel-line)); border-radius: 18px; background: radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 36%), linear-gradient(145deg, #17191e, #090b0f 70%); box-shadow: 0 30px 100px #000c, inset 0 1px #ffffff12; color: #f4f5f6; } .guide-welcome-card:before, .guide-welcome-card:after { content: ""; position: absolute; width: 22px; height: 22px; border-color: var(--accent); pointer-events: none; } .guide-welcome-card:before { top: 10px; left: 10px; border-top: 1px solid; border-left: 1px solid; } .guide-welcome-card:after { bottom: 10px; right: 10px; border-bottom: 1px solid; border-right: 1px solid; } .guide-welcome-top, .guide-welcome-eyebrow, .guide-welcome-foot { font: 600 10px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .14em; } .guide-welcome-top { display: flex; justify-content: space-between; gap: 12px; color: #aeb6c1; } .guide-welcome-top span:first-child, .guide-welcome-eyebrow { color: var(--accent); } .guide-welcome-orbit { position: relative; display: grid; place-items: center; width: 94px; height: 94px; margin: 30px 0 25px; border: 1px dotted color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent) 0 25%, transparent 65%); box-shadow: inset 0 0 20px color-mix(in srgb, var(--accent) 11%, transparent), 0 0 28px color-mix(in srgb, var(--accent) 18%, transparent); } .guide-welcome-eyebrow { margin: 0 0 12px; } .guide-welcome h2 { margin: 0; font: 700 clamp(34px, 4vw, 49px)/1.05 var(--heading); letter-spacing: -.05em; } .guide-welcome h2 em { color: var(--accent); font-style: normal; } .guide-welcome-card > p:not(.guide-welcome-eyebrow):not(.guide-welcome-foot) { max-width: 47ch; margin: 18px 0 24px; color: #b8c0ca; font-size: 14px; line-height: 1.65; } .guide-welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; } .guide-welcome-actions button { min-height: 44px; padding: 10px 16px; border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--accent) 20%, #101217); color: #f5f5f6; font-size: 12px; font-weight: 650; transition: background .2s, border-color .2s, transform .2s; } .guide-welcome-actions button:first-child { display: inline-flex; justify-content: space-between; gap: 30px; min-width: 178px; } .guide-welcome-actions button:last-child { border-color: #ffffff30; background: #ffffff08; color: #c5cad1; } .guide-welcome-actions button:hover { background: color-mix(in srgb, var(--accent) 32%, #101217); transform: translateY(-2px); } .guide-welcome-actions button:last-child:hover { background: #ffffff16; } .guide-welcome-foot { margin: 24px 0 0; color: #828c98; font-size: 9px; } @media(max-width:520px) { .guide-welcome-card { padding: 25px 22px; } .guide-welcome-top { font-size: 8px; } .guide-welcome-orbit { width: 75px; height: 75px; margin: 22px 0 20px; } .guide-welcome h2 { font-size: 36px; } .guide-welcome-card > p:not(.guide-welcome-eyebrow):not(.guide-welcome-foot) { font-size: 13px; } .guide-welcome-actions button { flex: 1 1 100%; } } @media(prefers-reduced-motion:reduce) { .guide-welcome-actions button { transition: none; } } @media print { .guide-welcome { display: none; } } .site-guide-shell[hidden], .site-guide-restore[hidden], .site-guide-contact-link[hidden] { display: none !important; } .site-guide-shell { position: fixed; left: var(--guide-x, calc(100vw - 72px)); top: var(--guide-y, calc(100vh - 94px)); z-index: 120; width: 88px; height: 104px; color: var(--accent); filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .36)); transform: translate(-50%, -50%); transition: left .75s cubic-bezier(.2, .72, .2, 1), top .75s cubic-bezier(.2, .72, .2, 1); } .site-guide-shell.is-dragging { transition: none; } .site-guide { position: relative; display: grid; width: 88px; height: 104px; padding: 0 0 16px; border: 0; background: transparent; color: inherit; cursor: grab; touch-action: none; transition: transform .28s cubic-bezier(.2, .78, .2, 1), filter .28s ease; } .site-guide-shell.is-dragging .site-guide { cursor: grabbing; } .site-guide:hover, .site-guide:focus-visible, .site-guide-shell.is-alert .site-guide { transform: translateY(-3px) scale(1.04); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 32%, transparent)); } .site-guide:focus-visible { outline-offset: 2px; border-radius: 50%; } .site-guide-canvas { position: relative; z-index: 2; display: block; width: 88px; height: 88px; } .site-guide-hide { position: absolute; z-index: 4; top: -3px; right: -2px; width: 22px; height: 22px; padding: 0; border: 1px solid var(--panel-line); border-radius: 50%; background: color-mix(in srgb, rgb(var(--scene-rgb)) 94%, transparent); color: var(--muted); font: 16px/1 var(--font); cursor: pointer; opacity: .72; } .site-guide-hide:hover, .site-guide-hide:focus-visible { color: var(--ink); border-color: var(--accent); opacity: 1; } .site-guide-restore { position: fixed; z-index: 120; right: 12px; bottom: 12px; padding: 7px 10px; border: 1px solid var(--panel-line); border-radius: 999px; background: color-mix(in srgb, rgb(var(--scene-rgb)) 93%, transparent); color: var(--accent); font: 600 9px/1 var(--font); letter-spacing: .12em; cursor: pointer; backdrop-filter: blur(10px); } .site-guide-restore:hover, .site-guide-restore:focus-visible { border-color: var(--accent); } .site-guide-label { position: absolute; left: 50%; bottom: 1px; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); border-radius: 999px; background: color-mix(in srgb, rgb(var(--scene-rgb)) 88%, transparent); color: color-mix(in srgb, var(--accent) 82%, var(--ink)); font: 600 7px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; white-space: nowrap; transform: translateX(-50%); backdrop-filter: blur(8px); } .site-guide-bubble { position: absolute; right: calc(100% + 12px); bottom: 27px; width: min(230px, calc(100vw - 128px)); margin: 0; padding: 11px 13px; border: 1px solid var(--panel-line); border-radius: 9px; background: color-mix(in srgb, rgb(var(--scene-rgb)) 94%, transparent); box-shadow: 0 14px 38px rgba(0, 0, 0, .3); color: color-mix(in srgb, var(--ink) 86%, var(--muted)); font: 500 11px/1.45 var(--font); opacity: 0; pointer-events: none; transform: translate3d(8px, 4px, 0) scale(.96); transform-origin: 100% 70%; transition: opacity .2s ease, transform .28s cubic-bezier(.2, .78, .2, 1); backdrop-filter: blur(14px); } .site-guide-bubble p { margin: 0; } .site-guide-actions { display: flex; flex-wrap: wrap; gap: 6px; } .site-guide-contact-link { display: inline-flex; margin-top: 9px; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--accent) 56%, transparent); border-radius: 5px; color: var(--ink); font: 600 10px/1.2 var(--font); text-decoration: none; } .site-guide-contact-link:hover, .site-guide-contact-link:focus-visible { background: color-mix(in srgb, var(--accent) 17%, transparent); } .site-guide-bubble:after { position: absolute; left: 100%; bottom: 19px; width: 9px; height: 9px; border-top: 1px solid var(--panel-line); border-right: 1px solid var(--panel-line); background: inherit; content: ""; transform: translateX(-5px) rotate(45deg); } .site-guide-shell:is(.is-speaking, :focus-within) .site-guide-bubble, .site-guide-bubble:hover { opacity: 1; pointer-events: auto; transform: none; } .site-guide-shell.is-driving .site-guide { animation: site-guide-drive .9s cubic-bezier(.2, .8, .2, 1); } .site-guide-signal { position: fixed; z-index: 119; height: 2px; pointer-events: none; transform-origin: 0 50%; background: repeating-linear-gradient(90deg, var(--accent) 0 3px, transparent 3px 9px); filter: drop-shadow(0 0 4px var(--accent)); opacity: 0; } .site-guide-signal.is-active { animation: site-guide-send 1.3s ease-out both; } .site-guide-shell[data-action="inspect"] .site-guide { animation: site-guide-inspect .7s ease-in-out 2; } .site-guide-shell[data-action="curious"] .site-guide { animation: site-guide-curious .7s ease-in-out 2; } .guide-reacting { animation: site-guide-target 1.35s ease-out; } .guide-reacting .work-compute-led, .guide-reacting .work-face-data-bit, .guide-reacting .connected-signal { opacity: .82; } .guide-reacting .impact-line { filter: drop-shadow(0 0 4px var(--accent)); } .guide-reacting .career-bar { filter: drop-shadow(0 0 5px var(--accent)); } .guide-reacting .project-open, .guide-reacting .contact-button, .guide-reacting .repo-action { border-color: var(--accent); } @keyframes site-guide-send { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 22% { opacity: .72; } 68% { clip-path: inset(0 0 0 0); opacity: .7; } 100% { opacity: 0; clip-path: inset(0 0 0 100%); } } @keyframes site-guide-target { 0%, 100% { filter: none; } 45% { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 27%, transparent)); } } @keyframes site-guide-inspect { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg); } } @keyframes site-guide-curious { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(11deg) translateY(-2px); } } @keyframes site-guide-drive { 0% { transform: translate3d(0, 0, 0) scale(1); } 35% { transform: translate3d(-8px, -8px, 0) scale(1.08, .94); } 72% { transform: translate3d(2px, 1px, 0) scale(.98, 1.03); } 100% { transform: translate3d(0, 0, 0) scale(1); } } @media (prefers-reduced-motion: reduce) { .site-guide, .site-guide-bubble, .site-guide-shell { transition: none; } .site-guide-shell.is-driving .site-guide, .guide-reacting, .site-guide-signal.is-active { animation: none; } } @media screen and (max-width: 720px) { .site-guide-shell { left: auto; top: auto; right: 9px; bottom: 11px; width: 70px; height: 84px; transform: none; transition: none; } .site-guide-shell.is-contact:not(.is-placed) { right: 24px; bottom: 96px; } .site-guide { width: 70px; height: 84px; padding-bottom: 14px; } .site-guide-canvas { width: 70px; height: 70px; } .site-guide-shell.is-placed { left: var(--guide-x); top: var(--guide-y); right: auto; bottom: auto; transform: translate(-50%, -50%); } .site-guide-hide { right: -4px; } .site-guide-bubble { right: calc(100% + 8px); bottom: 21px; width: min(210px, calc(100vw - 92px)); } .site-guide-label { font-size: 6px; } } @media print { .site-guide-shell, .site-guide-restore { display: none; } } .site-guide-canvas{border-radius:50%;background:radial-gradient(ellipse,#090b10e8 12%,#090b10b8 48%,transparent 72%)} .guide-welcome-orbit{width:110px;height:110px;border:0;background:none;box-shadow:none} .guide-welcome-orbit::before,.guide-welcome-orbit::after{display:none} .guide-welcome-orbit canvas{width:110px;height:110px} .site-guide-auto{position:absolute;top:-3px;left:-2px;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:10px;cursor:pointer} .guide-tour-dock{position:fixed;z-index:125;bottom:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;width:min(620px,calc(100% - 24px));padding:12px 16px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:18px;background:#101217f5;box-shadow:0 12px 45px #0008;color:#f2f2f4} .guide-tour-dock[hidden]{display:none} .guide-tour-status{display:grid;gap:3px;min-width:0;flex:1} .guide-tour-status span{font:9px monospace;letter-spacing:.12em;color:var(--accent)} .guide-tour-status strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .guide-tour-dock button{flex-shrink:0;padding:10px;border:1px solid #ffffff26;border-radius:9px;background:#ffffff08;color:inherit;font:inherit;font-size:11px;cursor:pointer} .guide-tour-dock button:hover{border-color:var(--accent);background:#ffffff12} .guide-tour-dock button:focus-visible,.site-guide-auto:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .guide-tour-focus{outline:1px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:5px;transition:outline-color .4s} .guide-reading-shade{position:fixed;z-index:110;pointer-events:none;left:var(--reading-left,0);top:var(--reading-top,0);width:var(--reading-width,0);height:var(--reading-height,0);border-radius:8px;box-shadow:0 0 0 200vmax rgb(0 0 0 / .56);opacity:0;transition:opacity .25s ease} .guide-reading-shade.is-active{opacity:1} .guide-reading-word{opacity:.38;color:var(--ink);transition:opacity .45s ease-out} .guide-reading-word.is-read{opacity:1;animation:guide-reading-shimmer 1.2s ease-out both} @supports (background-clip:text){ .guide-reading-word{background:linear-gradient(110deg,var(--ink) 35%,color-mix(in srgb,var(--ink) 86%,var(--accent)) 49%,var(--ink) 63%);background-size:260% 100%;background-position:100% 0;background-clip:text;-webkit-background-clip:text;color:transparent} } @keyframes guide-reading-shimmer{to{background-position:0 0}} .guide-reading-manual .guide-reading-word{animation:none;transition:none;opacity:calc(.38 + .62 * var(--word-progress,0));background-position:calc(100% * (1 - var(--word-progress,0))) 0} @media(prefers-reduced-motion:reduce){.guide-reading-word,.guide-reading-shade{transition:none}.guide-reading-word.is-read{animation:none}} @media print{.guide-reading-shade{display:none}} .site-guide-shell.is-touring .site-guide-bubble{max-width:calc(100vw - 110px)} .site-guide-shell.is-touring:not(.is-dragging) .site-guide-canvas{animation:guide-tour-hover 2.7s ease-in-out infinite alternate} @keyframes guide-tour-hover{from{transform:translate3d(-3px,2px,0) rotate(-3deg)}to{transform:translate3d(4px,-5px,0) rotate(4deg)}} @media(max-width:720px){.site-guide-shell.is-touring:not(.is-placed){right:16px;bottom:104px;transition:right .6s ease,bottom .6s ease}.site-guide-shell.is-touring[data-tour-side="inset"]:not(.is-placed){right:32px;bottom:114px}.guide-tour-dock{gap:5px;padding:10px}.guide-tour-dock button{padding:10px 7px;font-size:11px}.guide-tour-status strong{font-size:10px}.guide-tour-status span{font-size:8px}} @media(prefers-reduced-motion:reduce){.guide-tour-focus,.site-guide-shell.is-touring{transition:none}.site-guide-shell.is-touring .site-guide-canvas{animation:none}} @media print{.guide-tour-dock{display:none}} @media(min-width:721px){.site-guide-shell.is-contact .site-guide-bubble{bottom:calc(100% + 8px);right:18px}} .site-guide-shell.is-touring[data-tour-section="architecture"] .site-guide-bubble{left:calc(100% + 12px);right:auto;transform-origin:0 70%} .site-guide-shell.is-touring[data-tour-section="architecture"] .site-guide-bubble:after{left:auto;right:100%;transform:translateX(5px) rotate(225deg)} @media(max-width:720px){.site-guide-shell.is-touring[data-tour-section="architecture"]:not(.is-placed){left:16px;right:auto}} @media print{.guide-reading-word{opacity:1!important;background:none!important;color:var(--ink)!important}}