:root{--primary-blue:#005DE0;--text-dark:#1a1a1a;--text-medium:#333333;--text-light:#444444;--border-light:rgba(255, 255, 255, 0.6);--bg-blur:rgba(255, 255, 255, 0.615)}.section-blurb,.section-title{text-align:center}.setup-page{background-color:var(--primary-blue);width:100%;height:75vh;padding:0;box-sizing:border-box;margin:0 auto;border-radius:2rem;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;background-image:none;backdrop-filter:none;-webkit-backdrop-filter:none}.setup-page::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;background-image:url('/resources/images/en/setupbackground.png');background-position:center;background-repeat:no-repeat;background-size:cover;filter:blur(4px);-webkit-filter:blur(4px);opacity:.8}.setup-page>*{position:relative;z-index:2}.platform-tutorial-container{background-color:var(--bg-blur);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 6px rgba(0,0,0,.1),0 1px 0 rgba(255,255,255,.1) inset;width:90%;max-width:1000px;min-height:85%;height:fit-content;padding:1rem;box-sizing:border-box;margin:0 auto;border-radius:2rem;position:relative;z-index:10;overflow:hidden;background-position:center;background-repeat:no-repeat;background-size:cover}.tutorial-stage{position:absolute;top:0;left:0;width:100%;height:100%;padding:1.5rem 1rem;box-sizing:border-box;display:grid;grid-template-columns:1fr;align-items:center;opacity:0;visibility:hidden;transition:opacity .4s ease-in-out,visibility 0s .4s;pointer-events:none}.tutorial-stage.active{opacity:1;visibility:visible;transition-delay:0s,0s;pointer-events:auto}.tutorial-stage.hidden{display:none!important;opacity:0;visibility:hidden;pointer-events:none}.step-content{grid-column:1/2;z-index:20;padding:1rem 0;height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center}.step-top{align-self:center}.step-title{font-size:1.5rem;font-weight:700;color:var(--text-dark);margin-bottom:.5rem;text-align:inherit}.step-blurb{font-size:1rem;line-height:1.6;color:var(--text-medium);text-align:inherit}.step-bottom{align-self:center;margin-top:1rem}.detailed-text{font-size:.9rem;line-height:1.5;color:var(--text-light);margin-top:1rem}.tutorial-step{z-index:25;position:absolute;top:10px;left:10px;width:40px;height:40px;display:flex;justify-content:center;align-items:center;font-size:1.25rem;font-weight:800;color:var(--primary-blue);background-color:#fff;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.15)}.phone-screen{--phone-height-offset:0;transition:transform .4s ease-out;display:flex;justify-content:center;align-items:center;height:fit-content;width:80%;margin:1rem auto;position:relative;overflow:hidden;grid-column:1/2;z-index:15;justify-self:center;align-self:center;transform:translateY(calc(var(--phone-height-offset) * -100%))}.phone-screen img{position:static;height:100%;width:100%;object-fit:contain;margin:0;border-radius:1rem;transition:opacity .3s ease-in-out}.tutorial-stage.leaving.move-up .phone-screen{transform:translateY(-100%)}.tutorial-stage.active.move-up .phone-screen{transform:translateY(0)}.tutorial-stage.active.move-up .phone-screen:not(.leaving){transform:translateY(100%)}.tutorial-stage.leaving.move-down .phone-screen{transform:translateY(100%)}.tutorial-stage.active.move-down .phone-screen{transform:translateY(0)}.tutorial-stage.active.move-down .phone-screen:not(.leaving){transform:translateY(-100%)}.platform-selector{display:flex;justify-content:center;gap:1rem;z-index:100;position:absolute;top:2rem;width:100%;padding:0 1rem;box-sizing:border-box}.platform-option{padding:.75rem 1.5rem;border-radius:9999px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease-in-out;background-color:rgba(255,255,255,.4);color:#fff;border:2px solid var(--border-light);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);white-space:nowrap}.platform-option:hover{background-color:rgba(255,255,255,.6)}.platform-option.selected{background-color:#fff;color:var(--primary-blue);border-color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.2)}.navigation-controls{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:50;display:flex;gap:20px}.nav-button{width:40px;height:40px;background:rgba(255,255,255,.7);border:none;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.2);cursor:pointer;display:flex;justify-content:center;align-items:center;transition:background .2s,opacity .2s}.nav-button:hover:not(:disabled){background:#fff}.nav-button:disabled{opacity:.4;cursor:default;box-shadow:none;pointer-events:none}.nav-button::after{content:'';width:0;height:0;border-style:solid;position:absolute}.up-button::after{border-width:0 8px 10px 8px;border-color:transparent transparent var(--primary-blue) transparent;transform:translateY(-2px)}.down-button::after{border-width:10px 8px 0 8px;border-color:var(--primary-blue) transparent transparent transparent;transform:translateY(2px)}@media (max-width:768px){.platform-selector{gap:.5rem;flex-wrap:wrap;top:1rem}.platform-option{padding:.4rem .8rem;font-size:.8rem}.tutorial-stage{padding-top:5rem}.phone-screen{display:none}.step-bottom{display:none}.navigation-controls{bottom:1rem;gap:15px}.nav-button{width:35px;height:35px}.tutorial-step{top:20px;left:20px;width:25px;height:25px;font-size:.75rem}}@media (min-width:769px) and (max-width:980px){.platform-tutorial-container{width:70%}.tutorial-stage{grid-template-columns:1fr;padding-top:4rem}.step-content{padding-right:1rem}.phone-screen{display:none}.step-bottom{display:none}.tutorial-step{top:20px;left:20px;width:25px;height:25px;font-size:.75rem}}@media (min-width:981px){.platform-tutorial-container{width:60%}.tutorial-stage{grid-template-columns:5fr 9fr;gap:40px;padding:2rem 1rem}.tutorial-step{top:20px;left:20px;width:30px;height:30px;font-size:1rem}.step-content{grid-column:1/2;padding-top:2rem;align-items:flex-start}.step-bottom,.step-top{align-self:flex-start}.step-blurb,.step-title{text-align:left}.phone-screen{grid-column:2/3;width:100%;justify-self:end;align-self:start;margin:0}}