body.system-design-questions-page{background:#f5f8fd;color:#101a33}.system-design-questions-page .questions-hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid #d8e2f1;background:linear-gradient(118deg,#eef4ff,#f7f2ff 48%,#e9f7f7)}.system-design-questions-page .hero-orb{position:absolute;z-index:-1;border-radius:999px;filter:blur(2px);pointer-events:none}.system-design-questions-page .hero-orb-one{top:-210px;right:-110px;width:500px;height:500px;background:#507cff1f}.system-design-questions-page .hero-orb-two{bottom:-250px;left:36%;width:460px;height:460px;background:#3dc4ae1c}.system-design-questions-page .hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);gap:clamp(48px,7vw,92px);align-items:center;min-height:0;padding-top:42px;padding-bottom:46px}.system-design-questions-page .breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:23px;color:#68748b;font-size:.78rem}.system-design-questions-page .breadcrumbs a{color:#365c9f;text-decoration:none}.system-design-questions-page .breadcrumbs a:hover{text-decoration:underline;text-underline-offset:3px}.system-design-questions-page .hero-eyebrow,.system-design-questions-page .section-kicker{margin:0 0 12px;color:#2b5eaa;font-size:.74rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}.system-design-questions-page h1{max-width:760px;margin:0;color:#101a33;font-size:clamp(2.7rem,5.2vw,5.05rem);font-weight:500;letter-spacing:-.055em;line-height:.98}.system-design-questions-page .hero-description{max-width:710px;margin:24px 0 0;color:#536078;font-size:clamp(1.03rem,1.6vw,1.2rem);line-height:1.72}.system-design-questions-page .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:27px}.system-design-questions-page .architecture-card{position:relative;overflow:hidden;min-height:390px;border:1px solid rgb(123 147 190 / 32%);border-radius:28px;background:#10254a;padding:25px;color:#fff;box-shadow:0 34px 80px #18376f38}.system-design-questions-page .architecture-card:before{position:absolute;inset:0;background:radial-gradient(circle at 85% 12%,rgb(79 146 255 / 30%),transparent 16rem);content:"";pointer-events:none}.system-design-questions-page .architecture-topline{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;color:#c8d6ec;font-size:.73rem;letter-spacing:.08em;text-transform:uppercase}.system-design-questions-page .status-dot{display:flex;align-items:center;gap:7px;color:#9ee6d8;letter-spacing:0;text-transform:none}.system-design-questions-page .status-dot:before{width:7px;height:7px;border-radius:999px;background:#48d5b8;box-shadow:0 0 0 5px #48d5b821;content:""}.system-design-questions-page .architecture-flow{position:relative;min-height:245px;margin-top:30px}.system-design-questions-page .flow-node{position:absolute;z-index:2;display:grid;width:115px;min-height:86px;align-content:center;border:1px solid rgb(167 197 244 / 30%);border-radius:17px;background:#ffffff14;padding:13px 15px;box-shadow:inset 0 1px #ffffff12}.system-design-questions-page .flow-node span{color:#76a8f8;font-family:var(--font-mono);font-size:.64rem}.system-design-questions-page .flow-node strong{margin-top:2px;font-size:.95rem;font-weight:600}.system-design-questions-page .flow-node small{color:#aabbd4;font-size:.72rem}.system-design-questions-page .node-client{top:7px;left:0}.system-design-questions-page .node-api{top:7px;right:0}.system-design-questions-page .node-core{bottom:7px;left:0}.system-design-questions-page .node-scale{right:0;bottom:7px;border-color:#58d6bc66;background:#34b19a1f}.system-design-questions-page .flow-line{position:absolute;z-index:1;opacity:.56}.system-design-questions-page .line-one{top:49px;left:115px;right:115px;border-top:1px dashed #75a5ee}.system-design-questions-page .line-two{top:92px;right:57px;bottom:93px;border-right:1px dashed #75a5ee}.system-design-questions-page .line-three{right:115px;bottom:49px;left:115px;border-top:1px dashed #64d0bc}.system-design-questions-page .architecture-card>p{position:relative;max-width:330px;margin:16px 0 0;color:#bdcbe0;font-size:.84rem;line-height:1.55}.system-design-questions-page .questions-section{padding:66px 0 96px;scroll-margin-top:80px}.system-design-questions-page .questions-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:34px;align-items:start}.system-design-questions-page .question-nav{position:sticky;top:88px;border:1px solid #d5deeb;border-radius:20px;background:#fff;padding:20px;box-shadow:0 16px 42px #1a396912}.system-design-questions-page .question-nav>p{margin:0 0 13px;color:#1f3356;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.system-design-questions-page .question-nav ol{display:grid;gap:1px;max-height:calc(100vh - 250px);margin:0;overflow-y:auto;padding:0;scrollbar-color:#bfd0e7 transparent;scrollbar-width:thin;list-style:none}.system-design-questions-page .question-nav a:not(.nav-cta){display:flex;align-items:center;gap:10px;border-radius:8px;padding:7px 8px;color:#59667c;font-size:.88rem;line-height:1.25;text-decoration:none;transition:background-color .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease}.system-design-questions-page .question-nav a:not(.nav-cta):hover,.system-design-questions-page .question-nav a:not(.nav-cta):focus-visible{background:#eef4ff;color:#194f9f;outline:none}.system-design-questions-page .question-nav a.is-active,.system-design-questions-page .question-nav a.is-active:hover,.system-design-questions-page .question-nav a.is-active:focus-visible{background:linear-gradient(110deg,#1f5fba,#174888);color:#fff;box-shadow:0 8px 18px #1d539f33;transform:translate(3px)}.system-design-questions-page .question-nav a span{color:#7790b8;font-family:var(--font-mono);font-size:.64rem;transition:color .22s ease}.system-design-questions-page .question-nav a.is-active span{color:#c8dcff}.system-design-questions-page .nav-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:17px;border-radius:12px;background:#16396f;padding:12px 13px;color:#fff;font-size:.76rem;font-weight:700;line-height:1.35;text-decoration:none}.system-design-questions-page .nav-cta:hover{background:#0f2f61}.system-design-questions-page .question-list{display:grid;gap:23px}.system-design-questions-page .question-card{display:grid;grid-template-columns:68px minmax(0,1fr);scroll-margin-top:90px;overflow:hidden;border:1px solid #d4deeb;border-radius:22px;background:#fff;box-shadow:0 14px 38px #1f3f6e12}.system-design-questions-page .question-number{display:flex;justify-content:center;border-right:1px solid #dce5f1;background:#edf4ff;padding-top:31px;color:#2c61b2;font-family:var(--font-mono);font-size:.78rem;font-weight:700}.system-design-questions-page .question-content{padding:31px 34px 34px}.system-design-questions-page .question-content>h2{margin:0;color:#15213b;font-size:clamp(1.35rem,2.35vw,1.78rem);font-weight:600;letter-spacing:-.025em;line-height:1.25}.system-design-questions-page .interviewer-focus{margin-top:20px;border-left:3px solid #79a6e8;padding:4px 0 4px 16px}.system-design-questions-page .focus-label{display:block;margin-bottom:3px;color:#315d9e;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.system-design-questions-page .interviewer-focus p{margin:0;color:#667287;font-size:.9rem;line-height:1.58}.system-design-questions-page .sample-answer{margin-top:25px;border-radius:15px;background:#f3f7fd;padding:22px 23px}.system-design-questions-page .answer-heading{display:flex;align-items:center;gap:10px;margin-bottom:13px}.system-design-questions-page .answer-icon{display:grid;width:27px;height:27px;place-items:center;border-radius:8px;background:#245ba9;color:#fff;font-size:.75rem;font-weight:700}.system-design-questions-page .answer-heading h3{margin:0;color:#1d3154;font-size:.84rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.system-design-questions-page .sample-answer p{margin:0;color:#4f5e75;font-size:1.03rem;line-height:1.75}.system-design-questions-page .sample-answer p+p{margin-top:13px}.system-design-questions-page .answer-body{position:relative;max-height:6.4em;overflow:hidden;transition:max-height .38s cubic-bezier(.22,1,.36,1)}.system-design-questions-page .answer-body:after{position:absolute;right:0;bottom:0;left:0;height:3.8em;background:linear-gradient(180deg,#f3f7fd00,#f3f7fd 86%);content:"";pointer-events:none;transition:opacity .18s ease}.system-design-questions-page .sample-answer.is-expanded .answer-body{max-height:60rem}.system-design-questions-page .sample-answer.is-expanded .answer-body:after{opacity:0}.system-design-questions-page .answer-toggle{display:inline-flex;min-height:39px;align-items:center;justify-content:center;gap:9px;margin-top:17px;border:1px solid #b9c9df;border-radius:999px;background:#fff;padding:0 16px;color:#254f8d;cursor:pointer;font-size:.75rem;font-weight:700;transition:border-color .18s ease,background-color .18s ease,color .18s ease,transform .18s ease}.system-design-questions-page .answer-toggle:hover{border-color:#7ea4d9;background:#eaf2ff;transform:translateY(-1px)}.system-design-questions-page .answer-toggle:focus-visible{outline:2px solid #2563eb;outline-offset:3px}.system-design-questions-page .answer-toggle .hide-label,.system-design-questions-page .sample-answer.is-expanded .show-label{display:none}.system-design-questions-page .sample-answer.is-expanded .hide-label{display:inline}.system-design-questions-page .toggle-arrow{transition:transform .22s ease}.system-design-questions-page .sample-answer.is-expanded .toggle-arrow{transform:rotate(180deg)}.system-design-questions-page .question-bank-scene{position:relative;overflow:hidden;background:radial-gradient(circle at 18% 46%,rgb(65 129 226 / 10%),transparent 25rem),radial-gradient(circle at 84% 52%,rgb(52 190 171 / 9%),transparent 24rem),#f5f8fd}.system-design-questions-page .question-bank-stage{position:relative;width:min(100% - 40px,var(--max));height:clamp(420px,54vh,500px);margin-inline:auto;overflow:hidden}.system-design-questions-page .question-bank-stage:before{position:absolute;inset:11% 8%;border-radius:50%;background:radial-gradient(circle,#ffffffbd,#fff0 68%);content:"";pointer-events:none}.system-design-questions-page .topic-bubbles{position:absolute;inset:0;z-index:2;pointer-events:none}.system-design-questions-page .bubble-position{position:absolute;display:block;opacity:0;transform-origin:center;transition:opacity .48s ease}.system-design-questions-page .question-bank-stage.is-visible .bubble-position{opacity:1}.system-design-questions-page .question-bank-stage.is-visible .bubble-position:nth-child(2){transition-delay:50ms}.system-design-questions-page .question-bank-stage.is-visible .bubble-position:nth-child(3){transition-delay:.1s}.system-design-questions-page .question-bank-stage.is-visible .bubble-position:nth-child(4){transition-delay:.15s}.system-design-questions-page .question-bank-stage.is-visible .bubble-position:nth-child(5){transition-delay:.2s}.system-design-questions-page .question-bank-stage.is-visible .bubble-position:nth-child(6){transition-delay:.25s}.system-design-questions-page .question-bank-stage.is-visible .bubble-position:nth-child(7){transition-delay:.3s}.system-design-questions-page .bubble-position:nth-child(1){top:10%;left:1%;transform:rotate(-3deg)}.system-design-questions-page .bubble-position:nth-child(2){top:10%;right:1%;transform:rotate(3deg)}.system-design-questions-page .bubble-position:nth-child(3){top:45%;left:0;transform:rotate(2deg)}.system-design-questions-page .bubble-position:nth-child(4){top:46%;right:0;transform:rotate(-2deg)}.system-design-questions-page .bubble-position:nth-child(5){bottom:8%;left:8%;transform:rotate(3deg)}.system-design-questions-page .bubble-position:nth-child(6){top:4%;left:50%;transform:translate(-50%) rotate(2deg)}.system-design-questions-page .bubble-position:nth-child(7){right:8%;bottom:8%;transform:rotate(-3deg)}.system-design-questions-page .topic-bubble{position:relative;isolation:isolate;display:inline-flex;width:250px;min-height:72px;align-items:center;justify-content:center;gap:12px;overflow:hidden;border:1px solid rgb(255 255 255 / 82%);border-radius:26px;background:linear-gradient(145deg,#ffffffdb,#ffffff7a),#e6effb75;padding:10px 18px;color:#173761;font-size:clamp(1.05rem,1.28vw,1.16rem);font-weight:700;box-shadow:0 20px 42px #22498421,inset 0 2px 2px #ffffffeb,inset 0 -9px 18px #97b0d31a;backdrop-filter:blur(15px) saturate(1.22);animation:questionBubbleFloat 4.8s ease-in-out infinite}.system-design-questions-page .topic-bubble:before{position:absolute;top:5px;right:9%;left:9%;z-index:-1;height:38%;border-radius:999px 999px 50% 50%;background:linear-gradient(180deg,#ffffffe5,#ffffff1a);content:"";pointer-events:none}.system-design-questions-page .topic-bubble-copy{position:relative;z-index:1;display:grid;justify-items:center;gap:2px;line-height:1.06;text-align:center}.system-design-questions-page .topic-bubble-copy>span{display:block;white-space:nowrap}.system-design-questions-page .company-logo{position:relative;z-index:1;display:grid;width:42px;height:42px;flex:0 0 42px;place-items:center;border:1px solid rgb(202 216 235 / 76%);border-radius:14px;background:#ffffffc7;box-shadow:inset 0 1px #fff,0 6px 16px #1f4c9114}.system-design-questions-page .company-logo img{width:31px;height:31px;object-fit:contain}.system-design-questions-page .bubble-position:nth-child(2n) .topic-bubble{animation-delay:-1.7s;animation-duration:5.4s}.system-design-questions-page .bubble-position:nth-child(3n) .topic-bubble{animation-delay:-3.1s;animation-duration:6.1s}.system-design-questions-page .bubble-position.is-more .topic-bubble{width:250px;min-height:72px;padding:10px 18px;color:#2563a8;font-size:1.42rem;letter-spacing:.12em}.system-design-questions-page .question-bank-reveal{position:absolute;top:50%;left:50%;z-index:1;display:grid;justify-items:center;gap:14px;width:min(86%,760px);opacity:0;text-align:center;transform:translate(-50%,calc(-50% + 18px));transition:opacity .56s ease .12s,transform .56s cubic-bezier(.22,1,.36,1) .12s;pointer-events:none}.system-design-questions-page .question-bank-stage.is-visible .question-bank-reveal{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}.system-design-questions-page .question-bank-reveal h2{margin:0;color:#10254a;font-size:clamp(4rem,8vw,7.2rem);font-weight:500;letter-spacing:-.065em;line-height:.92}.system-design-questions-page .question-bank-bubble-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:5px 2px;color:#174c91;font-size:.9rem;font-weight:700;text-decoration:underline;text-decoration-color:#174c9159;text-underline-offset:5px;transition:color .18s ease,transform .18s ease,text-decoration-color .18s ease}.system-design-questions-page .question-bank-bubble-cta:hover{color:#0f4fd8;text-decoration-color:currentColor;transform:translateY(-2px)}.system-design-questions-page .question-bank-bubble-cta:focus-visible{outline:2px solid #2563eb;outline-offset:4px}@keyframes questionBubbleFloat{0%,to{transform:translateZ(0)}50%{transform:translate3d(0,-9px,0)}}@media(max-width:980px){.system-design-questions-page .hero-grid{grid-template-columns:1fr}.system-design-questions-page .architecture-card{width:min(100%,610px);min-height:370px}.system-design-questions-page .questions-layout{grid-template-columns:1fr}.system-design-questions-page .question-nav{position:static}.system-design-questions-page .question-nav ol{grid-template-columns:repeat(2,minmax(0,1fr))}.system-design-questions-page .nav-cta{justify-content:flex-start}}@media(max-width:760px){.system-design-questions-page .hero-grid{padding-top:38px;padding-bottom:48px}.system-design-questions-page .breadcrumbs{margin-bottom:22px}.system-design-questions-page h1{font-size:clamp(2.75rem,13vw,4.2rem)}.system-design-questions-page .questions-section{padding:52px 0 78px}.system-design-questions-page .question-nav ol{grid-template-columns:1fr}.system-design-questions-page .question-card{grid-template-columns:48px minmax(0,1fr)}.system-design-questions-page .question-content{padding:25px 22px}.system-design-questions-page .question-number{padding-top:27px}.system-design-questions-page .sample-answer{padding:19px}.system-design-questions-page .question-bank-stage{width:min(100% - 28px,var(--max));height:590px}.system-design-questions-page .topic-bubble{width:min(44vw,185px);min-height:68px;gap:7px;padding:8px 10px;font-size:.94rem;text-align:center}.system-design-questions-page .bubble-position.is-more .topic-bubble{width:min(44vw,185px);min-height:68px;padding:8px 10px}.system-design-questions-page .company-logo{width:34px;height:34px;flex-basis:34px;border-radius:11px}.system-design-questions-page .company-logo img{width:26px;height:26px}.system-design-questions-page .bubble-position:nth-child(1){top:5%;left:1%}.system-design-questions-page .bubble-position:nth-child(2){top:5%;right:1%}.system-design-questions-page .bubble-position:nth-child(3){top:20%;left:0}.system-design-questions-page .bubble-position:nth-child(4){top:20%;right:0}.system-design-questions-page .bubble-position:nth-child(5){bottom:17%;left:0}.system-design-questions-page .bubble-position:nth-child(6){inset:auto auto 3% 50%}.system-design-questions-page .bubble-position:nth-child(7){inset:auto 0 17% auto;transform:rotate(-3deg)}.system-design-questions-page .question-bank-reveal{gap:18px}.system-design-questions-page .question-bank-reveal h2{font-size:clamp(3.5rem,17vw,5.6rem)}}@media(max-width:500px){.system-design-questions-page .hero-actions,.system-design-questions-page .hero-actions>a:first-child{width:100%}.system-design-questions-page .architecture-card{min-height:435px;padding:21px}.system-design-questions-page .architecture-flow{min-height:310px}.system-design-questions-page .flow-node{width:calc(50% - 11px)}.system-design-questions-page .node-client,.system-design-questions-page .node-api{top:8px}.system-design-questions-page .node-core,.system-design-questions-page .node-scale{bottom:8px}.system-design-questions-page .line-one{left:calc(50% - 11px);right:calc(50% - 11px)}.system-design-questions-page .line-two{top:94px;right:calc(25% - 5px);bottom:95px}.system-design-questions-page .line-three{right:calc(50% - 11px);left:calc(50% - 11px)}.system-design-questions-page .architecture-card>p{margin-top:10px}.system-design-questions-page .question-card{grid-template-columns:1fr}.system-design-questions-page .question-number{justify-content:flex-start;border-right:0;border-bottom:1px solid #dce5f1;padding:10px 18px}.system-design-questions-page .question-content{padding:22px 18px 24px}}@media(prefers-reduced-motion:reduce){.system-design-questions-page a,.system-design-questions-page .topic-bubble{transition:none!important;animation:none!important}}