*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;min-height:100%}body{background:#f7f7f7;font-family:Oxanium,sans-serif}button,input,select{font-family:inherit}body{margin:0;font-family:Oxanium,sans-serif}.home-page{background:#f7f7f7;min-height:100vh}.top-bar{background:#33393d;justify-content:space-between;align-items:center;height:50px;padding:0 14px;display:flex}.icon-button{color:#fff;cursor:pointer;background:0 0;border:none;font-size:36px}.home-content{grid-template-columns:1fr 0fr 0fr 1fr;grid-template-areas:"title array array array""selected selected selected list";gap:40px 56px;padding:50px 100px;display:grid}.algorithm-list{flex-direction:column;gap:24px;width:100%;display:flex}.title{color:#f3805c;text-shadow:5px 5px 4px #00000040;grid-area:title;margin:40px 80px 0;font-size:95px;font-weight:900;line-height:1.45}.array-card{color:#fff;text-align:center;background:#f3805c;grid-area:array;width:100%;padding:36px 70px 54px;box-shadow:0 6px 6px #00000059}.array-card h2{margin:0 0 36px;font-size:64px}.array-card p{font-size:36px;font-weight:700}.input-row{margin-top:56px;display:flex}.input-row input{border:none;flex:1;height:64px;padding:0 18px;font-size:32px}.input-row button{color:#fff;cursor:pointer;background:#33393d;border:none;width:100px;font-size:32px;font-weight:700}.selected-card{color:#fff;background:#ffd97d;grid-area:selected;justify-content:center;align-items:center;gap:48px;width:100%;min-height:390px;display:flex;box-shadow:0 4px 6px #00000059}.selected-card h2{white-space:pre-line;font-size:72px;line-height:1.5}.bubble-visual{width:260px;height:240px;position:relative}.bubble{border:18px solid #fff;border-radius:50%;position:absolute}.bubble-large{width:190px;height:190px;bottom:0;left:0}.bubble-small{width:110px;height:110px;top:0;right:0}.algorithm-image{object-fit:contain;width:180px;height:180px}.algorithm-list{flex-direction:column;grid-area:list;gap:15px;width:100%;display:flex}.algorithm-button{text-align:left;cursor:pointer;background:#fff;border:none;width:90%;height:64px;padding-left:44px;font-size:42px;font-weight:700;transition:all .25s;box-shadow:4px 4px 5px #0000004d}.bubble-sort{color:#ff6b6b;border-left:12px solid #ff6b6b}.bubble-sort:hover,.bubble-sort.active{color:#fff;background:#ff6b6b}.selection-sort{color:#f3805c;border-left:12px solid #f3805c}.selection-sort:hover,.selection-sort.active{color:#fff;background:#f3805c}.insertion-sort{color:#fcd680;border-left:12px solid #fcd680}.insertion-sort:hover,.insertion-sort.active{color:#fff;background:#fcd680}.merge-sort{color:#6599c8;border-left:12px solid #6599c8}.merge-sort:hover,.merge-sort.active{color:#fff;background:#6599c8}.quick-sort{color:#52b788;border-left:12px solid #52b788}.quick-sort:hover,.quick-sort.active{color:#fff;background:#52b788}.heap-sort{color:#9d4edd;border-left:12px solid #9d4edd}.heap-sort:hover,.heap-sort.active{color:#fff;background:#9d4edd}.app{min-height:100vh}.visualizer-page{background:#f7f7f7;min-height:100vh}.visualizer-header{grid-template-columns:1fr auto 1fr;align-items:center;height:108px;padding:0 28px;display:grid}.visualizer-header h1{color:#fff;margin:0;font-size:54px}.visualizer-icon-button{cursor:pointer;color:#fff;background:0 0;border:none;justify-content:center;align-items:center;width:60px;height:60px;padding:0;font-size:54px;display:flex}.start-button{cursor:pointer;background:#fff;border:none;justify-self:end;width:200px;height:58px;font-size:32px;font-weight:800;box-shadow:4px 4px 5px #0000004d}.bar-container{background:#fff;justify-content:center;align-items:flex-end;gap:3px;width:82%;height:540px;margin:0 auto;padding:36px 44px 0;display:flex;box-shadow:0 4px 6px #00000040}.array-bar{color:#fff;background:#686878;justify-content:center;align-items:flex-end;min-width:4px;font-size:12px;font-weight:700;transition:height .2s,background-color .2s;display:flex}.array-bar.active{background:#f4d03f}.array-bar.sorted{background:#52be80}.speed-buttons{justify-content:center;gap:88px;margin:45px 0;display:flex}.speed-button{cursor:pointer;background:#fff;border:none;width:96px;height:58px;font-size:32px;font-weight:800;box-shadow:4px 4px 5px #00000040}.speed-button.active{color:#fff;background:#f3805c}.speed-button:disabled{opacity:.5;cursor:not-allowed}