*{box-sizing:border-box;margin:0;padding:0}body{height:100vh;display:flex;justify-content:center;align-items:center;font-family:VT323,monospace;background:linear-gradient(135deg,#379bfa,#00d1ff,#38fceb);overflow:hidden}.window-stack{position:relative;width:500px;height:500px}.window-layer{position:absolute;width:100%;height:100%;border:4px solid #000;background-color:#0f2c64;display:flex;flex-direction:column}.layer-bottom{top:40px;left:40px;z-index:1;background-color:#9a59b7}.layer-middle{top:20px;left:20px;z-index:2;background-color:#df5da5}.layer-top{top:0;left:0;z-index:3;background-color:#ff7288;box-shadow:-5px 5px #0003}.window-header{height:40px;border-bottom:4px solid #000;display:flex;justify-content:space-between;align-items:center;padding:0 10px;background-color:#ff9a6c}.header-circles{display:flex;gap:5px}.circle{width:12px;height:12px;border-radius:50%;border:2px solid #000;background-color:#fff}.window-title{font-size:24px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1px;text-shadow:2px 2px 0px #000}.header-controls{display:flex;gap:5px}.control-box{width:20px;height:20px;border:2px solid #000;background-color:#ffc95e;display:flex;justify-content:center;align-items:center;font-size:14px;font-weight:700;cursor:pointer;color:#fff}.control-box:hover{background-color:#fff;color:#000}.window-body{flex-grow:1;margin:15px;border:3px solid #000;display:flex;background-color:#f9f871;background-image:linear-gradient(white 2px,transparent 2px),linear-gradient(90deg,white 2px,transparent 2px);background-size:50px 50px;overflow-y:auto;height:100%}.window-layer layer-top{overflow-y:auto;height:100%}.content-area{flex-grow:1;padding:20px;display:flex;flex-direction:column;align-items:center;text-align:center;overflow-y:auto;height:100%}.content-area::-webkit-scrollbar{width:8px}.content-area::-webkit-scrollbar-thumb{background:#000}h1{font-size:28px;margin-bottom:20px;color:#000;background-color:#fffc;padding:5px}.placeholder-image{width:100%;max-width:300px;height:auto;border:2px solid #000;display:block}.scrollbar-sidebar{width:30px;border-left:3px solid #000;background-color:#ff9a6c;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:2px 0}.scroll-arrow{font-size:12px;cursor:pointer}.scroll-track{flex-grow:1;width:100%;position:relative;background-color:#ff9a6c;border-top:2px solid #000;border-bottom:2px solid #000}.scroll-thumb{width:100%;height:50px;background-color:#ff7288;border-bottom:2px solid #000;position:absolute;top:0}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}