@property --guide-angle{syntax:'<angle>';initial-value:0deg;inherits:false;}.portfolio-page-guide{position:fixed;top:50%;right:0;z-index:9999;display:flex;align-items:stretch;transform:translateY(-50%) translate3d(100%,0,0);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.35s cubic-bezier(0.16,1,0.3,1),transform 0.4s cubic-bezier(0.16,1,0.3,1),visibility 0.4s ease;--guide-cyan:#38bdf8;--guide-cyan-bright:#7dd3fc;--guide-violet:#a78bfa;--guide-gold:#fbbf24;}.portfolio-page-guide.is-ready{opacity:1;visibility:visible;transform:translateY(-50%) translate3d(0,0,0);}.portfolio-guide-tab,.portfolio-guide-panel{pointer-events:auto;}.portfolio-guide-tab{position:relative;align-self:center;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0.55rem;width:46px;min-height:132px;padding:0.85rem 0.4rem;border:1px solid rgba(125,211,252,0.28);border-right:0;border-radius:16px 0 0 16px;background:linear-gradient(180deg,rgba(20,62,88,0.97),rgba(9,22,38,0.99));color:#bae6fd;cursor:pointer;font:700 0.68rem/1 'Outfit',sans-serif;letter-spacing:0.1em;text-transform:uppercase;box-shadow:-6px 0 26px rgba(14,165,233,0.18),inset 0 1px 0 rgba(255,255,255,0.14),inset 0 0 0 1px rgba(148,163,184,0.04);overflow:hidden;isolation:isolate;transition:color 0.25s ease,width 0.25s ease,box-shadow 0.3s ease,border-color 0.3s ease;}.portfolio-guide-tab::before{content:'';position:absolute;inset:-40% -60%;z-index:-2;background:conic-gradient(from var(--guide-angle),transparent 0 72%,var(--guide-cyan-bright) 82%,var(--guide-violet) 90%,transparent 100%);opacity:0;animation:guide-spin 5.5s linear infinite;animation-play-state:paused;transition:opacity 0.35s ease;}.portfolio-guide-tab::after{content:'';position:absolute;inset:1px;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,rgba(20,62,88,0.97),rgba(9,22,38,0.99));}@keyframes guide-spin{to{--guide-angle:360deg;}}.portfolio-guide-tab:hover,.portfolio-guide-tab:focus-visible,.portfolio-page-guide.is-open .portfolio-guide-tab{color:#fff;outline:none;border-color:rgba(125,211,252,0.55);box-shadow:-8px 0 34px rgba(14,165,233,0.32),inset 0 1px 0 rgba(255,255,255,0.18);}.portfolio-guide-tab:hover::before,.portfolio-guide-tab:focus-visible::before,.portfolio-page-guide.is-open .portfolio-guide-tab::before{opacity:1;animation-play-state:running;}.portfolio-guide-tab-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:linear-gradient(155deg,rgba(56,189,248,0.22),rgba(167,139,250,0.14));box-shadow:inset 0 0 0 1px rgba(125,211,252,0.25);transition:transform 0.3s ease,background 0.3s ease;}.portfolio-guide-tab:hover .portfolio-guide-tab-icon,.portfolio-page-guide.is-open .portfolio-guide-tab-icon{transform:scale(1.08);background:linear-gradient(155deg,rgba(56,189,248,0.4),rgba(167,139,250,0.28));}.portfolio-guide-tab svg{width:16px;height:16px;}.portfolio-guide-tab span{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);}.portfolio-guide-tab-dot{position:absolute;top:10px;right:10px;width:6px;height:6px;border-radius:50%;background:var(--guide-gold);box-shadow:0 0 8px 1px rgba(251,191,36,0.75);animation:guide-pulse 2.4s ease-in-out infinite;transition:background 0.25s ease,box-shadow 0.25s ease;}.portfolio-guide-tab-dot.is-playing{background:#22c55e;box-shadow:0 0 9px 2px rgba(34,197,94,0.8);animation:guide-pulse 1.1s ease-in-out infinite;}@keyframes guide-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.45;transform:scale(0.72);}}.portfolio-guide-panel{position:relative;width:min(372px,calc(100vw - 58px));max-height:min(780px,calc(100vh - 2rem));overflow-y:auto;padding:1.35rem 1.3rem 1.3rem;border:1px solid rgba(148,163,184,0.16);border-right:0;border-radius:20px 0 0 20px;background:radial-gradient(120% 140% at 100% 0%,rgba(56,189,248,0.1),transparent 55%),linear-gradient(150deg,rgba(26,50,71,0.98),rgba(7,15,28,0.99));color:#e2e8f0;box-shadow:-20px 24px 60px rgba(0,0,0,0.55),inset 0 1px 0 rgba(255,255,255,0.09),inset 1px 0 0 rgba(125,211,252,0.08);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);scrollbar-width:thin;scrollbar-color:rgba(56,189,248,0.45) transparent;animation:guide-panel-in 0.32s cubic-bezier(0.16,1,0.3,1);}@keyframes guide-panel-in{from{opacity:0;transform:translateX(14px) scale(0.98);}to{opacity:1;transform:translateX(0) scale(1);}}.portfolio-guide-panel::-webkit-scrollbar{width:6px;}.portfolio-guide-panel::-webkit-scrollbar-thumb{background:rgba(56,189,248,0.4);border-radius:999px;}.portfolio-guide-panel[hidden]{display:none;}.portfolio-guide-panel.is-preparing{overflow:hidden;}.portfolio-guide-loading{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;padding:1.5rem;border-radius:inherit;background:radial-gradient(ellipse at 50% 40%,rgba(56,189,248,0.17),transparent 52%),linear-gradient(150deg,rgba(18,37,56,0.99),rgba(5,13,25,0.995));color:#e2e8f0;text-align:center;animation:guide-preparation-in 0.28s ease-out both;}@keyframes guide-preparation-in{from{opacity:0;}to{opacity:1;}}.portfolio-guide-loader-orbit{position:relative;display:block;width:58px;height:58px;border:1px solid rgba(125,211,252,0.16);border-radius:50%;box-shadow:0 0 28px rgba(56,189,248,0.12),inset 0 0 20px rgba(56,189,248,0.08);}.portfolio-guide-loader-orbit span{position:absolute;inset:5px;border:2px solid transparent;border-top-color:#7dd3fc;border-right-color:rgba(167,139,250,0.75);border-radius:50%;animation:guide-orbit-spin 1.35s cubic-bezier(0.55,0.1,0.35,0.9) infinite;}.portfolio-guide-loader-orbit span:nth-child(2){inset:12px;border-top-color:#fbbf24;border-right-color:transparent;animation-duration:1.9s;animation-direction:reverse;}.portfolio-guide-loader-orbit i{position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;background:#e0f2fe;box-shadow:0 0 12px 3px rgba(56,189,248,0.65);transform:translate(-50%,-50%);animation:guide-core-pulse 1.4s ease-in-out infinite;}@keyframes guide-orbit-spin{to{transform:rotate(360deg);}}@keyframes guide-core-pulse{50%{opacity:0.5;transform:translate(-50%,-50%) scale(0.72);}}.portfolio-guide-loading-copy{display:flex;flex-direction:column;gap:0.35rem;}.portfolio-guide-loading-copy strong{color:#f8fafc;font:700 0.9rem/1.3 'Outfit',sans-serif;}.portfolio-guide-loading-copy > span{color:#9fb2c5;font:400 0.7rem/1.4 'Inter',sans-serif;}.portfolio-guide-loading-track{display:block;width:min(160px,65%);height:3px;overflow:hidden;border-radius:3px;background:rgba(148,163,184,0.16);}.portfolio-guide-loading-track span{display:block;width:38%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#38bdf8,#a78bfa,#fbbf24);box-shadow:0 0 12px rgba(56,189,248,0.65);animation:guide-track-sweep 1.05s ease-in-out infinite alternate;}@keyframes guide-track-sweep{from{transform:translateX(-5%);}to{transform:translateX(165%);}}.portfolio-guide-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:0.75rem;}.portfolio-guide-kicker{display:inline-flex;align-items:center;gap:0.4rem;color:#7dd3fc;font:700 0.62rem/1.3 'Outfit',sans-serif;letter-spacing:0.14em;text-transform:uppercase;}.portfolio-guide-kicker::before{content:'';width:5px;height:5px;border-radius:50%;background:linear-gradient(135deg,var(--guide-cyan-bright),var(--guide-violet));box-shadow:0 0 6px rgba(125,211,252,0.8);}.portfolio-guide-section-label{color:#94a3b8;font:700 0.62rem/1.3 'Outfit',sans-serif;letter-spacing:0.1em;text-transform:uppercase;}.portfolio-guide-panel h2{margin:0.3rem 0 0;background:linear-gradient(120deg,#f8fafc 35%,#bae6fd 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font:800 1.24rem/1.18 'Outfit',sans-serif;letter-spacing:-0.01em;}.portfolio-guide-close{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:30px;height:30px;border:1px solid rgba(148,163,184,0.2);border-radius:9px;background:rgba(15,23,42,0.55);color:#94a3b8;cursor:pointer;font-size:1.15rem;line-height:1;transition:border-color 0.2s ease,color 0.2s ease,background 0.2s ease,transform 0.2s ease;}.portfolio-guide-close:hover,.portfolio-guide-close:focus-visible{border-color:rgba(125,211,252,0.55);background:rgba(56,189,248,0.12);color:#fff;outline:none;transform:rotate(90deg);}.portfolio-guide-intro{margin:0.85rem 0 1rem;padding-bottom:1rem;border-bottom:1px solid rgba(148,163,184,0.12);color:#a8b8c9;font:400 0.76rem/1.55 'Inter',sans-serif;}.portfolio-guide-video-wrap{position:relative;overflow:hidden;aspect-ratio:16 / 9;border:1px solid rgba(125,211,252,0.22);border-radius:12px;background:#020617;box-shadow:0 14px 32px rgba(0,0,0,0.45),0 0 0 1px rgba(255,255,255,0.03) inset;}.portfolio-guide-video-wrap::before{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(125,211,252,0.5),transparent 40%,transparent 60%,rgba(167,139,250,0.4));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}.portfolio-guide-expand{position:absolute;top:0.5rem;right:0.5rem;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid rgba(255,255,255,0.16);border-radius:8px;background:rgba(2,6,23,0.55);color:#f1f5f9;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background 0.2s ease,border-color 0.2s ease,transform 0.2s ease;}.portfolio-guide-expand:hover,.portfolio-guide-expand:focus-visible{background:rgba(56,189,248,0.28);border-color:rgba(125,211,252,0.55);outline:none;transform:scale(1.06);}.portfolio-guide-expand svg{width:15px;height:15px;}.portfolio-guide-video-wrap iframe{display:block;width:100%;height:100%;border:0;}.portfolio-guide-video-meta{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;padding:0.7rem 0 0.9rem;margin-top:0.15rem;border-bottom:1px solid rgba(148,163,184,0.14);color:#cbd5e1;font:600 0.67rem/1.2 'Outfit',sans-serif;}.portfolio-guide-video-meta a{display:inline-flex;align-items:center;gap:0.3rem;color:#7dd3fc;text-decoration:none;white-space:nowrap;transition:color 0.2s ease,gap 0.2s ease;}.portfolio-guide-video-meta a:hover,.portfolio-guide-video-meta a:focus-visible{color:#fff;gap:0.45rem;}.portfolio-guide-video-meta a::after{content:'\2197';font-size:0.8em;}.portfolio-guide-timestamps{display:grid;gap:0.28rem;padding-top:0.9rem;}.portfolio-guide-timestamps .portfolio-guide-section-label{margin-bottom:0.3rem;}.portfolio-guide-timestamp{display:flex;align-items:center;gap:0.65rem;width:100%;padding:0.6rem 0.6rem;border:1px solid rgba(148,163,184,0.08);border-radius:9px;background:rgba(15,23,42,0.35);color:#cbd5e1;cursor:pointer;text-align:left;font:500 0.72rem/1.4 'Inter',sans-serif;transition:background 0.18s ease,border-color 0.18s ease,color 0.18s ease,transform 0.18s ease;}.portfolio-guide-timestamp:hover,.portfolio-guide-timestamp:focus-visible{border-color:rgba(56,189,248,0.32);background:rgba(56,189,248,0.09);color:#f8fafc;outline:none;transform:translateX(2px);}.portfolio-guide-timestamp.is-active{border-color:rgba(125,211,252,0.5);background:linear-gradient(90deg,rgba(56,189,248,0.16),rgba(167,139,250,0.08));color:#f8fafc;box-shadow:inset 0 0 0 1px rgba(125,211,252,0.12);}.portfolio-guide-timestamp b{flex:0 0 auto;min-width:34px;color:#7dd3fc;font-family:'JetBrains Mono',monospace;font-size:0.64rem;}.portfolio-guide-timestamp.is-active b{color:#bae6fd;}.portfolio-guide-play{display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:rgba(56,189,248,0.14);color:#7dd3fc;font-size:0.56rem;transition:background 0.2s ease,color 0.2s ease,transform 0.2s ease;}.portfolio-guide-timestamp:hover .portfolio-guide-play,.portfolio-guide-timestamp.is-active .portfolio-guide-play{background:linear-gradient(135deg,var(--guide-cyan-bright),var(--guide-violet));color:#071120;transform:scale(1.08);}@media (max-width:700px){.portfolio-page-guide{top:auto;right:max(0.75rem,env(safe-area-inset-right));bottom:calc(5rem + 60px + env(safe-area-inset-bottom));left:auto;align-items:flex-end;transform:translate3d(0,20px,0);gap:0.6rem;flex-direction:column-reverse;}.portfolio-page-guide.is-ready{transform:none;}.portfolio-guide-tab{width:44px;height:44px;min-height:44px;flex-direction:row;justify-content:center;gap:0;padding:0;border:1px solid rgba(125,211,252,0.28);border-radius:50%;background:rgba(9,22,38,0.88);box-shadow:0 8px 22px rgba(0,0,0,0.4);transition:color 0.2s ease,background 0.2s ease,border-color 0.2s ease;}.portfolio-guide-tab::after{display:none;border-radius:50%;}.portfolio-guide-tab::before{display:none;}.portfolio-guide-tab:hover,.portfolio-guide-tab:focus-visible,.portfolio-page-guide.is-open .portfolio-guide-tab{border-color:rgba(125,211,252,0.6);background:rgba(20,62,88,0.95);box-shadow:0 8px 22px rgba(0,0,0,0.4);transform:none;}.portfolio-guide-tab-icon{width:22px;height:22px;background:none;box-shadow:none;}.portfolio-guide-tab:hover .portfolio-guide-tab-icon,.portfolio-page-guide.is-open .portfolio-guide-tab-icon{background:none;transform:none;}.portfolio-guide-tab > span:not(.portfolio-guide-tab-icon):not(.portfolio-guide-tab-dot){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}.portfolio-guide-tab-dot{top:5px;right:5px;}.portfolio-guide-panel{width:min(376px,calc(100vw - 40px));max-height:min(72vh,calc(100vh - 1.3rem));padding:1.15rem 1.1rem 1.1rem;border:1px solid rgba(148,163,184,0.16);border-radius:20px;box-shadow:0 26px 60px rgba(0,0,0,0.55),inset 0 1px 0 rgba(255,255,255,0.09),inset 0 0 0 1px rgba(125,211,252,0.06);animation:guide-panel-in-mobile 0.3s cubic-bezier(0.16,1,0.3,1);}@keyframes guide-panel-in-mobile{from{opacity:0;transform:translateY(14px) scale(0.98);}to{opacity:1;transform:translateY(0) scale(1);}}.portfolio-guide-panel h2{font-size:1.12rem;}.portfolio-guide-close{width:28px;height:28px;}.portfolio-guide-timestamp{padding:0.65rem 0.6rem;}}@media (max-width:420px){.portfolio-guide-panel{width:calc(100vw - 24px);}}.portfolio-guide-lightbox{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:4vh 4vw;}.portfolio-guide-lightbox[hidden]{display:none;}.portfolio-guide-lightbox-backdrop{position:absolute;inset:0;background:radial-gradient(120% 120% at 50% 50%,rgba(15,23,42,0.92),rgba(2,6,15,0.97));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:guide-lightbox-fade 0.25s ease;}@keyframes guide-lightbox-fade{from{opacity:0;}to{opacity:1;}}.portfolio-guide-lightbox-frame{position:relative;z-index:1;width:min(1120px,92vw);border-radius:18px;padding:3px;background:linear-gradient(135deg,rgba(125,211,252,0.55),rgba(167,139,250,0.4));box-shadow:0 30px 90px rgba(0,0,0,0.65);animation:guide-lightbox-in 0.32s cubic-bezier(0.16,1,0.3,1);}@keyframes guide-lightbox-in{from{opacity:0;transform:scale(0.94) translateY(10px);}to{opacity:1;transform:scale(1) translateY(0);}}.portfolio-guide-lightbox-video{aspect-ratio:16 / 9;width:100%;overflow:hidden;border-radius:16px;background:#000;}.portfolio-guide-lightbox-video iframe{display:block;width:100%;height:100%;border:0;}.portfolio-guide-lightbox-close{position:absolute;top:-18px;right:-18px;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid rgba(148,163,184,0.3);border-radius:50%;background:linear-gradient(150deg,#172033,#0b1322);color:#f1f5f9;cursor:pointer;font-size:1.35rem;line-height:1;box-shadow:0 8px 22px rgba(0,0,0,0.5);transition:transform 0.2s ease,border-color 0.2s ease,background 0.2s ease;}.portfolio-guide-lightbox-close:hover,.portfolio-guide-lightbox-close:focus-visible{border-color:rgba(125,211,252,0.55);background:linear-gradient(150deg,#1e2c46,#0e1930);outline:none;transform:rotate(90deg);}@media (max-width:700px){.portfolio-guide-lightbox{padding:0;}.portfolio-guide-lightbox-frame{width:100vw;max-width:100vw;border-radius:0;padding:0;background:none;box-shadow:none;}.portfolio-guide-lightbox-video{aspect-ratio:auto;width:100vw;height:calc(100vw * 9 / 16);max-height:100dvh;border-radius:0;}.portfolio-guide-lightbox-close{top:max(0.6rem,env(safe-area-inset-top));right:max(0.6rem,env(safe-area-inset-right));width:34px;height:34px;background:rgba(2,6,15,0.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}}@media (prefers-reduced-motion:reduce){.portfolio-guide-tab,.portfolio-guide-tab-icon,.portfolio-guide-timestamp,.portfolio-guide-close,.portfolio-guide-panel,.portfolio-guide-tab-dot,.portfolio-guide-tab::before,.portfolio-guide-expand,.portfolio-guide-lightbox-backdrop,.portfolio-guide-lightbox-frame,.portfolio-guide-lightbox-close,.portfolio-guide-loading,.portfolio-guide-loader-orbit span,.portfolio-guide-loader-orbit i,.portfolio-guide-loading-track span{animation:none !important;transition:none !important;}.portfolio-guide-loading-track span{transform:translateX(80%);}}@media (min-width:701px){.portfolio-guide-tab{width:34px;min-height:0;height:34px;padding:0;gap:0;border-radius:10px 0 0 10px;box-shadow:-3px 0 14px rgba(14,165,233,0.12),inset 0 1px 0 rgba(255,255,255,0.1);}.portfolio-guide-tab::after{border-radius:9px 0 0 9px;}.portfolio-guide-tab > span:not(.portfolio-guide-tab-icon):not(.portfolio-guide-tab-dot){display:none;}.portfolio-guide-tab-icon{width:22px;height:22px;background:none;box-shadow:none;}.portfolio-guide-tab svg{width:17px;height:17px;}.portfolio-guide-tab-dot{top:5px;right:5px;width:5px;height:5px;}}.portfolio-guide-icon-pause{display:none;}.portfolio-guide-tab.is-playing .portfolio-guide-icon-play{display:none;}.portfolio-guide-tab.is-playing .portfolio-guide-icon-pause{display:inline;}